feat: 组件库替换
This commit is contained in:
@ -14,8 +14,8 @@
|
||||
</Input>
|
||||
<div v-for="(item, index) in list" :key="index">
|
||||
<p class="span-title w-fit mb-16px">{{ item.name }}</p>
|
||||
<a-row class="grid-demo" :gutter="[20, 16]" v-if="item.agent_products.length > 0">
|
||||
<a-col :xs="24" :sm="12" :md="8" :lg="5" :xl="6" :xxl="4" v-for="(product, k) in item.agent_products" :key="k">
|
||||
<Row class="grid-demo" :gutter="[20, 16]" v-if="item.agent_products.length > 0">
|
||||
<Col :xs="24" :sm="12" :md="8" :lg="5" :xl="6" :xxl="4" v-for="(product, k) in item.agent_products" :key="k">
|
||||
<div class="card-container cursor-pointer !h-252px" @click="goDetail(product?.type, product?.id)">
|
||||
<div class="card-image h-120px w-100% bg-cover bg-center mb-8px" v-image-main-color="product.image_url">
|
||||
<img class="object-contain h-full w-100%" :src="product?.image_url" />
|
||||
@ -56,8 +56,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<NoData v-else />
|
||||
</div>
|
||||
@ -65,7 +65,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Input } from 'ant-design-vue';
|
||||
import { Input, Row, Col } from 'ant-design-vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { getAgentList } from '@/api/all/agent';
|
||||
import { formatNumberShow } from '@/utils/tools';
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="form-container">
|
||||
<a-form :model="formData" ref="formRef" layout="vertical">
|
||||
<a-form-item
|
||||
<Form :model="formData" ref="formRef" layout="vertical">
|
||||
<FormItem
|
||||
v-for="(field, index) in formFields"
|
||||
:key="index"
|
||||
:label="field.props.label"
|
||||
:field="field.props.name"
|
||||
:name="field.props.name"
|
||||
:rules="field.props.rules"
|
||||
:tooltip="field.props.tip"
|
||||
>
|
||||
@ -21,9 +21,6 @@
|
||||
v-model:value="formData[field.props.name]"
|
||||
:placeholder="field?.props?.placeholder"
|
||||
/>
|
||||
<!-- <a-color-picker v-if="field.type === 'color_picker'"
|
||||
style="width: 500px; height: 200px"
|
||||
v-model="formData[field.props.name]" /> -->
|
||||
<ImageUpload
|
||||
v-if="field.type == 'upload_image'"
|
||||
v-model="formData[field.props.name]"
|
||||
@ -43,8 +40,8 @@
|
||||
{{ option.label }}
|
||||
</Option>
|
||||
</Select>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<Button class="submit-btn" type="primary" :disabled="loading" @click="handleSubmit">提交执行</Button>
|
||||
</div>
|
||||
</template>
|
||||
@ -52,9 +49,10 @@
|
||||
import { defineProps, defineEmits } from 'vue';
|
||||
import ImageUpload from '@/components/upload/ImageUpload.vue';
|
||||
import FileUpload from '@/components/upload/FileUpload.vue';
|
||||
import { Button, Input, Select } from 'ant-design-vue';
|
||||
import { Button, Input, Select, Row, Col, Form } from 'ant-design-vue';
|
||||
const { TextArea } = Input;
|
||||
const { Option } = Select;
|
||||
const { Item: FormItem } = Form;
|
||||
|
||||
const props = defineProps({
|
||||
formFields: {
|
||||
|
||||
@ -42,15 +42,14 @@
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<div class="trigger-container">
|
||||
<a-trigger
|
||||
mouse-leave-delay="200"
|
||||
position="top"
|
||||
<Dropdown
|
||||
:mouseLeaveDelay="200"
|
||||
placement="top"
|
||||
trigger="hover"
|
||||
:auto-fit-position="false"
|
||||
:unmount-on-close="true"
|
||||
:overlayStyle="{ width: 'auto' }"
|
||||
>
|
||||
<SvgIcon size="12" name="svg-more" class="icon-more" />
|
||||
<template #content>
|
||||
<template #overlay>
|
||||
<div class="">
|
||||
<div class="history-item-dropdown">
|
||||
<div class="dropdown-item">
|
||||
@ -61,18 +60,19 @@
|
||||
</div>
|
||||
<div class="dropdown-item">
|
||||
<SvgIcon size="12" name="svg-delete" class="icon color-#6D4CFE" />
|
||||
<a-popconfirm
|
||||
<Popconfirm
|
||||
content="你确认删除该历史对话吗"
|
||||
@ok="deleteHistory(item.id, index)"
|
||||
type="error"
|
||||
@confirm="deleteHistory(item.id, index)"
|
||||
ok-text="确定"
|
||||
cancel-text="取消"
|
||||
>
|
||||
<div class="text delete">删除</div>
|
||||
</a-popconfirm>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-trigger>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -95,7 +95,7 @@
|
||||
<DynamicForm :formFields="formFields.form" :formData="formData" :loading="loading" @submit="handleSubmit" />
|
||||
</div>
|
||||
<div class="res h-full">
|
||||
<a-spin v-if="loading" class="spin-center" tip="生成中。。。" />
|
||||
<Spin v-if="loading" class="spin-center" tip="生成中。。。" />
|
||||
<div
|
||||
class="markdown-container"
|
||||
v-if="workFlowRes.output != '' && loading === false"
|
||||
@ -116,7 +116,7 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { Modal, Tooltip, message } from 'ant-design-vue';
|
||||
import { Modal, Tooltip, message, Popconfirm, Spin, Dropdown } from 'ant-design-vue';
|
||||
import DynamicForm from './components/DynamicForm.vue';
|
||||
import {
|
||||
executeWorkFlow,
|
||||
|
||||
@ -134,9 +134,9 @@
|
||||
<p class="!mr-16px w-48px cts relative top-2px">原始来源</p>
|
||||
<div class="flex flex-col">
|
||||
<div v-for="item in topicInfo.industry_topic_sources" :key="item" class="mb-18px flex items-center">
|
||||
<a-link style="background-color: initial" :href="item.link" target="_blank" class="!text-12px">{{
|
||||
<Link :href="item.link" target="_blank" class="!text-12px">{{
|
||||
item.title
|
||||
}}</a-link>
|
||||
}}</Link>
|
||||
<img src="@/assets/img/hottranslation/xhs.png" width="16" height="16" />
|
||||
</div>
|
||||
</div>
|
||||
@ -153,7 +153,8 @@
|
||||
|
||||
<script setup>
|
||||
import topHeader from './topHeader.vue';
|
||||
import { Modal, Button, Tooltip, Space, Table, Tag } from 'ant-design-vue';
|
||||
import { Modal, Button, Tooltip, Space, Table, Tag, Typography } from 'ant-design-vue';
|
||||
const { Link } = Typography;
|
||||
import { ref, computed } from 'vue';
|
||||
import { fetchIndustriesTree, fetchIndustryTopics, fetchIndustryTopicDetail } from '@/api/all/index';
|
||||
import star1 from '@/assets/img/hottranslation/star-fill1.png';
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.slotName === 'volumeRate'" #customRender="{ record }">
|
||||
<a-statistic :value="record.volume_rate * 100" />%
|
||||
<Statistic :value="record.volume_rate * 100" />%
|
||||
</template>
|
||||
<template v-else-if="column.titleSlotName === 'hotTitle'" #title>
|
||||
<Space>
|
||||
@ -118,7 +118,7 @@
|
||||
|
||||
<script setup>
|
||||
import topHeader from './topHeader.vue';
|
||||
import { Tooltip, Space, Table } from 'ant-design-vue';
|
||||
import { Tooltip, Space, Table, Statistic } from 'ant-design-vue';
|
||||
import { fetchFocusBrandsList, fetchEventDynamicsList } from '@/api/all/index';
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
import star1 from '@/assets/img/hottranslation/star-fill1.png';
|
||||
|
||||
@ -250,9 +250,9 @@
|
||||
<p class="!mr-16px w-83px cts relative top-2px">原始来源</p>
|
||||
<div class="flex flex-col">
|
||||
<div v-for="item in topicInfo.industry_new_keyword_sources" :key="item" class="mb-18px flex items-center">
|
||||
<a-link style="background-color: initial" :href="item.link" target="_blank" class="!text-12px">{{
|
||||
<Link :href="item.link" target="_blank" class="!text-12px">{{
|
||||
item.title
|
||||
}}</a-link>
|
||||
}}</Link>
|
||||
<img src="@/assets/img/hottranslation/xhs.png" width="16" height="16" />
|
||||
</div>
|
||||
</div>
|
||||
@ -269,7 +269,8 @@
|
||||
|
||||
<script setup>
|
||||
import topHeader from './topHeader.vue';
|
||||
import { Checkbox, Modal, Button, Tooltip, Space, Table, Tag } from 'ant-design-vue';
|
||||
import { Modal, Button, Tooltip, Space, Table, Tag, Typography } from 'ant-design-vue';
|
||||
const { Link } = Typography;
|
||||
import {
|
||||
fetchKeywordTrendsList,
|
||||
fetchIndustryEmotions,
|
||||
|
||||
@ -108,9 +108,9 @@
|
||||
<p class="cts !mr-16px flex-shrink-0 w-60px">原始来源</p>
|
||||
<div class="flex flex-col">
|
||||
<div v-for="item in topicInfo.user_pain_point_sources" :key="item" class="mb-18px flex items-center">
|
||||
<a-link style="background-color: initial" :href="item.link" target="_blank" class="!text-12px">{{
|
||||
<Link :href="item.link" target="_blank" class="!text-12px">{{
|
||||
item.title
|
||||
}}</a-link>
|
||||
}}</Link>
|
||||
<img src="@/assets/img/hottranslation/xhs.png" width="16" height="16" />
|
||||
</div>
|
||||
</div>
|
||||
@ -127,7 +127,8 @@
|
||||
|
||||
<script setup>
|
||||
import topHeader from './topHeader.vue';
|
||||
import { Modal, Button, Tooltip, Space, Table, Tag } from 'ant-design-vue';
|
||||
import { Modal, Button, Tooltip, Space, Table, Tag, Typography } from 'ant-design-vue';
|
||||
const { Link } = Typography;
|
||||
import { fetchUserPainPointsDetail, fetchUserPainPointsList } from '@/api/all/index';
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
import top1 from '@/assets/img/captcha/top1.svg';
|
||||
|
||||
@ -65,9 +65,9 @@
|
||||
<Space class="text-12px color-#737478 justify-start items-center">
|
||||
<Checkbox v-model:checked="hasCheck" class="!text-12px mr-8px"></Checkbox>
|
||||
<span class="text-12px color-#737478">{{ isLogin ? '登录' : '注册' }}即代表同意</span>
|
||||
<a-link href="link" class="form-link color-#211F24" target="_blank">用户协议</a-link>
|
||||
<Link href="link" class="form-link color-#211F24" target="_blank">用户协议</Link>
|
||||
<span class="text-12px color-#737478">和</span>
|
||||
<a-link href="link" class="form-link color-#211f24" target="_blank">隐私政策</a-link>
|
||||
<Link href="link" class="form-link color-#211f24" target="_blank">隐私政策</Link>
|
||||
</Space>
|
||||
</Space>
|
||||
</div>
|
||||
@ -87,13 +87,13 @@
|
||||
<span style="text-align: left; width: 100%">选择账号</span>
|
||||
</template>
|
||||
<div class="account-bind-container">
|
||||
<a-card :bordered="false" class="bind-card">
|
||||
<Card :bordered="false" class="bind-card">
|
||||
<div class="bind-header">
|
||||
<a-typography-text class="mobile-number">{{ mobileNumber }} 已在以下企业绑定了账号</a-typography-text>
|
||||
<Typography.Text class="mobile-number">{{ mobileNumber }} 已在以下企业绑定了账号</Typography.Text>
|
||||
</div>
|
||||
|
||||
<a-list :bordered="false" :split="false" class="account-list">
|
||||
<a-list-item
|
||||
<List :bordered="false" :split="false" class="account-list">
|
||||
<List.Item
|
||||
v-for="(account, index) in accounts"
|
||||
:key="index"
|
||||
class="account-item"
|
||||
@ -104,17 +104,17 @@
|
||||
}"
|
||||
@click="selectAccount(account, index)"
|
||||
>
|
||||
<a-list-item-meta>
|
||||
<List.Item.Meta>
|
||||
<template #title>
|
||||
<div style="display: flex; align-items: center; gap: 12px">
|
||||
<Checkbox :checked="selectedAccountIndex === index" />
|
||||
<a-typography-text>{{ account.name || '-' }}</a-typography-text>
|
||||
<Typography.Text>{{ account.name || '-' }}</Typography.Text>
|
||||
</div>
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
</a-card>
|
||||
</List.Item.Meta>
|
||||
</List.Item>
|
||||
</List>
|
||||
</Card>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="flex">
|
||||
@ -125,7 +125,8 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Checkbox, Modal, Button, Form, FormItem, Input, Space, message } from 'ant-design-vue';
|
||||
import { Checkbox, Modal, Button, Form, FormItem, Input, Space, message, Typography, Card, List } from 'ant-design-vue';
|
||||
const { Link } = Typography;
|
||||
import PuzzleVerification from './components/PuzzleVerification.vue';
|
||||
import { fetchLoginCaptCha, fetchAuthorizationsCaptcha, fetchProfileInfo } from '@/api/all/login';
|
||||
import { joinEnterpriseByInviteCode } from '@/api/all';
|
||||
|
||||
@ -69,6 +69,7 @@
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.bind-header {
|
||||
@ -111,6 +112,9 @@
|
||||
background-color: rgba(109, 76, 254, 0.1);
|
||||
box-shadow: 0 2px 4px 0 rgba(109, 76, 254, 0.5);
|
||||
}
|
||||
:deep(.ant-list-item-meta-title) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.account-item:deep(.arco-list-item-main) {
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<Table.Column title="用户信息" dataIndex="info">
|
||||
<template #customRender="{ record }">
|
||||
<div class="pt-3px pb-3px">
|
||||
<a-avatar :image-url="record.head_image" :size="32" />
|
||||
<Avatar :src="record.head_image" :size="32" />
|
||||
{{ record.name || '-' }}
|
||||
<icon-edit size="13" class="ml-8px" @click="openEditInfoModal" />
|
||||
</div>
|
||||
@ -33,7 +33,7 @@
|
||||
>
|
||||
<FormItem name="head_image" label="头像">
|
||||
<div class="flex items-center">
|
||||
<a-avatar :image-url="userInfoForm.file_url" :size="48" />
|
||||
<Avatar :src="userInfoForm.file_url" :size="48" />
|
||||
<span class="upload-button" @click="triggerFileInput">
|
||||
<input
|
||||
ref="uploadInputRef"
|
||||
@ -85,7 +85,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Button, Form, FormItem, Input, Table, message } from 'ant-design-vue';
|
||||
import { Button, Form, FormItem, Input, Table, message, Avatar } from 'ant-design-vue';
|
||||
import Container from '@/components/container.vue';
|
||||
import Modal from '@/components/modal.vue';
|
||||
import PuzzleVerification from '@/views/components/login/components/PuzzleVerification.vue';
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<div class="m-auto mt-24px max-w-1000px">
|
||||
<Container title="推荐产品" class="container-body">
|
||||
<div class="grid grid-cols-3 gap-20px">
|
||||
<Product v-for="product in products" :key="product.id" :product="product" @refresh="getProductList" />
|
||||
<!-- <Product v-for="product in products" :key="product.id" :product="product" @refresh="getProductList" /> -->
|
||||
</div>
|
||||
<NoData v-if="products.length === 0" />
|
||||
</Container>
|
||||
@ -20,7 +20,7 @@
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import Container from '@/components/container.vue';
|
||||
import Product from '@/views/components/workplace/modules/product.vue';
|
||||
// import Product from '@/views/components/workplace/modules/product.vue';
|
||||
import Case from '@/views/components/workplace/modules/case.vue';
|
||||
import { fetchProductList, fetchSuccessCaseList } from '@/api/all/index';
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
@ -6,12 +6,11 @@
|
||||
<Tag v-if="props.product.status === Status.Disable" class="status status-disable">未开通</Tag>
|
||||
<Tag v-if="props.product.status === Status.EXPIRED" class="status status-expired">已到期</Tag>
|
||||
<Tag v-if="props.product.status === Status.TRIAL_ENDS" class="status status-expired">试用结束</Tag>
|
||||
<a-countdown
|
||||
<Countdown
|
||||
v-if="props.product.status === Status.ON_TRIAL"
|
||||
class="status-on-trill"
|
||||
title="试用中"
|
||||
:value="1000 * (props.product.expired_at ?? 0)"
|
||||
:now="now()"
|
||||
format="D天H时m分s秒"
|
||||
/>
|
||||
</div>
|
||||
@ -60,9 +59,10 @@
|
||||
>
|
||||
联系客服
|
||||
</Button>
|
||||
<a-popconfirm focusLock title="试用产品" content="确定试用该产品吗?" @ok="handleTrial(props.product.id)">
|
||||
<Popconfirm title="试用产品" ok-text="确定" cancel-text="取消" @confirm="handleTrial(props.product.id)">
|
||||
<template #description>确定试用该产品吗?</template>
|
||||
<Button v-if="props.product.status === Status.Disable" size="small" type="default" ghost> 免费试用7天 </Button>
|
||||
</a-popconfirm>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
<CustomerServiceModal v-model:open="visible" centered/>
|
||||
</div>
|
||||
@ -73,7 +73,8 @@ import { now } from '@vueuse/core';
|
||||
import { trialProduct } from '@/api/all';
|
||||
import { useRouter } from 'vue-router';
|
||||
import CustomerServiceModal from '@/components/customer-service-modal.vue';
|
||||
import { Button, message, Tag } from 'ant-design-vue';
|
||||
import { Button, message, Tag, Statistic, Popconfirm } from 'ant-design-vue';
|
||||
const { Countdown } = Statistic;
|
||||
|
||||
import { useSidebarStore } from '@/stores/modules/side-bar';
|
||||
import { useEnterpriseStore } from '@/stores/modules/enterprise';
|
||||
@ -177,7 +178,7 @@ const gotoModule = (menuId: number) => {
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 245, 222, 1);
|
||||
|
||||
:deep(.arco-statistic-title) {
|
||||
:deep(.ant-statistic-title) {
|
||||
font-family: $font-family-medium;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
@ -187,7 +188,7 @@ const gotoModule = (menuId: number) => {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.arco-statistic-value) {
|
||||
:deep(.ant-statistic-content) {
|
||||
font-family: $font-family-medium;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
</div>
|
||||
<div class="filter-row-item" v-if="query.audit_status === AuditStatus.Pending">
|
||||
<span class="label">上传时间</span>
|
||||
<a-range-picker
|
||||
<DatePicker.RangePicker
|
||||
v-model="created_at"
|
||||
size="medium"
|
||||
allow-clear
|
||||
@ -69,7 +69,7 @@
|
||||
</div>
|
||||
<div class="filter-row-item">
|
||||
<span class="label">审核时间</span>
|
||||
<a-range-picker
|
||||
<DatePicker.RangePicker
|
||||
v-model="audit_started_at"
|
||||
size="medium"
|
||||
allow-clear
|
||||
@ -99,7 +99,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Button, Input, Select, Space } from 'ant-design-vue';
|
||||
import { Button, Input, Select, Space, DatePicker } from 'ant-design-vue';
|
||||
const { Option } = Select;
|
||||
import { defineEmits, defineProps } from 'vue';
|
||||
import { PLATFORMS } from '@/views/material-center/components/finished-products/manuscript/check-list/constants';
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script lang="jsx">
|
||||
import { Drawer, Image } from '@arco-design/web-vue';
|
||||
import { Drawer, Image } from 'ant-design-vue';
|
||||
import TextOverTips from '@/components/text-over-tips';
|
||||
|
||||
import icon1 from '@/assets/img/error-img.png';
|
||||
@ -32,12 +32,12 @@ export default {
|
||||
return () => (
|
||||
<Drawer
|
||||
title="审核列表"
|
||||
visible={visible.value}
|
||||
v-model:open={visible.value}
|
||||
width={420}
|
||||
class="check-list-drawer-xt"
|
||||
footer={false}
|
||||
header={false}
|
||||
onCancel={onClose}
|
||||
rootClassName="check-list-drawer-xt"
|
||||
footer={null}
|
||||
closable={false}
|
||||
onClose={onClose}
|
||||
>
|
||||
<div class="flex justify-between items-center h-56px px-24px">
|
||||
<div class="flex items-center">
|
||||
@ -61,13 +61,12 @@ export default {
|
||||
height={48}
|
||||
preview={false}
|
||||
src={item.cover}
|
||||
class="!rounded-4px mr-8px"
|
||||
fit="cover"
|
||||
class="!rounded-4px"
|
||||
v-slots={{
|
||||
error: () => <img src={icon1} class="w-full h-full" />,
|
||||
}}
|
||||
/>
|
||||
<div class="flex-1 overflow-hidden flex flex-col items-start">
|
||||
<div class="flex-1 overflow-hidden flex flex-col items-start ml-8px">
|
||||
<TextOverTips context={item.title} class={`cts !color-#211F24 title mb-4px !text-14px`} />
|
||||
<p class="cts !text-14px">{`合规程度:${
|
||||
item.ai_review?.compliance_level ? `${item.ai_review?.compliance_level}%` : '-'
|
||||
|
||||
@ -1,43 +1,41 @@
|
||||
.check-list-drawer-xt {
|
||||
.arco-drawer-mask {
|
||||
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.15);
|
||||
.ant-drawer-mask {
|
||||
background-color: transparent;
|
||||
}
|
||||
.arco-drawer {
|
||||
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.15);
|
||||
.arco-drawer-body {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 0 24px;
|
||||
.cts {
|
||||
color: var(--Text-1, #939499);
|
||||
.ant-drawer-body {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 0 24px;
|
||||
.cts {
|
||||
color: var(--Text-1, #939499);
|
||||
|
||||
font-family: $font-family-regular;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
&.bold {
|
||||
color: var(--Text-1, #211f24);
|
||||
font-family: $font-family-medium;
|
||||
}
|
||||
font-family: $font-family-regular;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
&.bold {
|
||||
color: var(--Text-1, #211f24);
|
||||
font-family: $font-family-medium;
|
||||
}
|
||||
.card-item {
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
transition: all;
|
||||
&:hover {
|
||||
background-color: #e6e6e8;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
&.active {
|
||||
border-color: #6d4cfe;
|
||||
background-color: #f0edff;
|
||||
:deep(.overflow-text) {
|
||||
font-family: $font-family-medium !important;
|
||||
}
|
||||
}
|
||||
.card-item {
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
transition: all;
|
||||
&:hover {
|
||||
background-color: #e6e6e8;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
&.active {
|
||||
border-color: #6d4cfe;
|
||||
background-color: #f0edff;
|
||||
:deep(.overflow-text) {
|
||||
font-family: $font-family-medium !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -137,9 +137,7 @@ export default {
|
||||
};
|
||||
|
||||
const uploadImage = async (option, action = 'upload') => {
|
||||
const {
|
||||
fileItem: { file },
|
||||
} = option;
|
||||
const { file } = option;
|
||||
|
||||
const { name, size, type } = file;
|
||||
const response = await getImagePreSignedUrl({ suffix: getFileExtension(name) });
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script lang="jsx">
|
||||
import { Image } from '@arco-design/web-vue';
|
||||
import { Image } from 'ant-design-vue';
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue';
|
||||
import TextOverTips from '@/components/text-over-tips';
|
||||
|
||||
@ -56,13 +56,13 @@ export default {
|
||||
height={48}
|
||||
preview={false}
|
||||
src={item.cover}
|
||||
class="!rounded-4px mr-8px"
|
||||
class="!rounded-4px"
|
||||
fit="cover"
|
||||
v-slots={{
|
||||
error: () => <img src={icon1} class="w-full h-full" />,
|
||||
}}
|
||||
/>
|
||||
<div class="flex-1 overflow-hidden flex flex-col items-start">
|
||||
<div class="flex-1 overflow-hidden flex flex-col items-start ml-8px">
|
||||
<TextOverTips context={item.title} class={`cts !color-#211F24 title mb-4px`} />
|
||||
<p class="cts">{`合规程度:${item.ai_review?.compliance_level ? `${item.ai_review?.compliance_level}%` : '-'}`}</p>
|
||||
</div>
|
||||
|
||||
@ -23,25 +23,23 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<a-upload
|
||||
<Upload
|
||||
v-if="files.length < 18"
|
||||
ref="uploadRef"
|
||||
action="/"
|
||||
draggable
|
||||
:custom-request="(option) => emit('upload', option)"
|
||||
:customRequest="(option) => emit('upload', option)"
|
||||
accept=".jpg,.jpeg,.png,.gif,.webp"
|
||||
:show-file-list="false"
|
||||
:showUploadList="false"
|
||||
multiple
|
||||
class="!flex !items-center"
|
||||
:limit="18 - files.length"
|
||||
>
|
||||
<template #upload-button>
|
||||
<template #default>
|
||||
<div class="upload-box">
|
||||
<icon-plus size="14" class="mb-16px color-#3C4043" />
|
||||
<span class="cts !color-#211F24">上传图片</span>
|
||||
</div>
|
||||
</template>
|
||||
</a-upload>
|
||||
</Upload>
|
||||
</VueDraggable>
|
||||
</div>
|
||||
</FormItem>
|
||||
@ -49,7 +47,7 @@
|
||||
|
||||
<script setup>
|
||||
import { VueDraggable } from 'vue-draggable-plus';
|
||||
import { FormItem} from 'ant-design-vue';
|
||||
import { FormItem, Upload } from 'ant-design-vue';
|
||||
|
||||
const props = defineProps({
|
||||
files: {
|
||||
|
||||
@ -131,9 +131,7 @@ export default {
|
||||
formData.value.videoInfo.uploadStatus = ENUM_UPLOAD_STATUS.UPLOADING;
|
||||
emit('updateVideoInfo', formData.value.videoInfo);
|
||||
|
||||
const {
|
||||
fileItem: { file },
|
||||
} = option;
|
||||
const { file } = option;
|
||||
setVideoInfo(file);
|
||||
|
||||
const response = await getVideoPreSignedUrl({ suffix: getFileExtension(file.name) });
|
||||
@ -164,9 +162,7 @@ export default {
|
||||
};
|
||||
// 文件上传处理
|
||||
const uploadImage = async (option) => {
|
||||
const {
|
||||
fileItem: { file },
|
||||
} = option;
|
||||
const { file } = option;
|
||||
|
||||
// 验证文件数量
|
||||
if (formData.value.files?.length >= 18) {
|
||||
|
||||
@ -52,7 +52,7 @@
|
||||
</div>
|
||||
<div class="filter-row-item">
|
||||
<span class="label">上传时间</span>
|
||||
<a-range-picker
|
||||
<DatePicker.RangePicker
|
||||
v-model="created_at"
|
||||
size="medium"
|
||||
allow-clear
|
||||
@ -80,7 +80,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Button, Input } from 'ant-design-vue';
|
||||
import { Button, Input, DatePicker } from 'ant-design-vue';
|
||||
import { defineEmits, defineProps } from 'vue';
|
||||
import { CHECK_STATUS } from '@/views/material-center/components/finished-products/manuscript/list/constants';
|
||||
import CommonSelect from '@/components/common-select';
|
||||
|
||||
@ -25,8 +25,8 @@
|
||||
</div>
|
||||
<div class="filter-row-item">
|
||||
<span class="label">上传时间</span>
|
||||
<a-range-picker
|
||||
v-model="created_at"
|
||||
<DatePicker.RangePicker
|
||||
v-model:value="created_at"
|
||||
size="medium"
|
||||
allow-clear
|
||||
format="YYYY-MM-DD"
|
||||
@ -54,7 +54,7 @@
|
||||
|
||||
<script setup>
|
||||
import { defineEmits, defineProps, ref, nextTick } from 'vue';
|
||||
import { Button, Input } from 'ant-design-vue';
|
||||
import { Button, Input, DatePicker } from 'ant-design-vue';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
const props = defineProps({
|
||||
|
||||
@ -92,15 +92,14 @@
|
||||
<Table.Column :width="80" title="操作" dataIndex="optional">
|
||||
<template #customRender="{ record }">
|
||||
<Space>
|
||||
<a-popconfirm
|
||||
content="确定删除吗?"
|
||||
type="warning"
|
||||
ok-text="确认删除"
|
||||
cancel-text="取消"
|
||||
@ok="deleteBrand(record.id)"
|
||||
<Popconfirm
|
||||
title="确定删除吗?"
|
||||
okText="确认删除"
|
||||
cancelText="取消"
|
||||
@confirm="deleteBrand(record.id)"
|
||||
>
|
||||
<icon-delete></icon-delete>
|
||||
</a-popconfirm>
|
||||
</Popconfirm>
|
||||
<Button type="outline" class="edit-btn" size="small" @click="handleEdit(record.id)">编辑</Button>
|
||||
</Space>
|
||||
</template>
|
||||
@ -127,7 +126,7 @@
|
||||
<script setup>
|
||||
import { ref, computed, reactive, onMounted } from 'vue';
|
||||
import { IconDelete } from '@arco-design/web-vue/es/icon';
|
||||
import { Button, Modal, Space, Form, FormItem, Pagination, Input, Table, message } from 'ant-design-vue';
|
||||
import { Button, Modal, Space, Form, FormItem, Pagination, Input, Table, message, Popconfirm } from 'ant-design-vue';
|
||||
const { TextArea } = Input;
|
||||
|
||||
import {
|
||||
|
||||
@ -37,6 +37,9 @@
|
||||
|
||||
|
||||
}
|
||||
:deep(.ant-popconfirm-buttons) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
:deep(.arco-input-wrapper),
|
||||
:deep(.arco-select-view-single),
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">时间筛选</span>
|
||||
<Space class="w-240px">
|
||||
<a-range-picker size="medium" allow-clear format="YYYY-MM-DD HH:mm" class="w-100%" />
|
||||
<DatePicker.RangePicker allowClear format="YYYY-MM-DD HH:mm" class="w-100%" />
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
@ -70,7 +70,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue';
|
||||
import { Button, Input, Space, Table, Pagination } from 'ant-design-vue';
|
||||
import { Button, Input, Space, Table, Pagination, DatePicker } from 'ant-design-vue';
|
||||
|
||||
const pageInfo = reactive({
|
||||
page: 1,
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">时间筛选</span>
|
||||
<Space class="w-240px">
|
||||
<a-range-picker size="medium" allow-clear format="YYYY-MM-DD HH:mm" class="w-100%" />
|
||||
<DatePicker.RangePicker allow-clear format="YYYY-MM-DD HH:mm" class="w-100%" />
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
@ -99,7 +99,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Button, Input, Space, Pagination, Table } from 'ant-design-vue';
|
||||
import { Button, Input, Space, Pagination, Table, DatePicker } from 'ant-design-vue';
|
||||
import { reactive, ref } from 'vue';
|
||||
|
||||
const pageInfo = reactive({
|
||||
|
||||
@ -23,8 +23,8 @@
|
||||
</div>
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">发布日期</span>
|
||||
<a-range-picker
|
||||
v-model="published_at"
|
||||
<DatePicker.RangePicker
|
||||
v-model:value="published_at"
|
||||
size="medium"
|
||||
class="!w-260px"
|
||||
allow-clear
|
||||
@ -105,7 +105,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Button, Input, Tooltip, Table, Pagination } from 'ant-design-vue';
|
||||
import { Button, Input, Tooltip, Table, Pagination, DatePicker } from 'ant-design-vue';
|
||||
import { TABLE_COLUMNS, INITIAL_QUERY, INITIAL_PAGE_INFO } from './constants';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { formatTableField, exactFormatTime, formatNumberShow } from '@/utils/tools';
|
||||
|
||||
@ -4,20 +4,17 @@
|
||||
-->
|
||||
<template>
|
||||
<div class="card-container">
|
||||
<a-spin
|
||||
<Spin
|
||||
v-for="(item, index) in dataSource"
|
||||
:key="index"
|
||||
:loading="isSyncing(item)"
|
||||
:spinning="isSyncing(item)"
|
||||
tip="更新数据中..."
|
||||
class="card-item"
|
||||
:class="{
|
||||
checked: isSelected(item),
|
||||
}"
|
||||
:wrapperClassName="`card-item ${isSelected(item) ? 'checked' : ''}`"
|
||||
>
|
||||
<template #icon>
|
||||
<icon-sync size="24" />
|
||||
</template>
|
||||
<Checkbox :checked="isSelected(item)" :value="item.id" @change="toggleSelect(item)"></Checkbox>
|
||||
<Checkbox :checked="isSelected(item)" :value="item.id" @change="toggleSelect(item)" class="relative top--2px"></Checkbox>
|
||||
<div class="ml-8px flex-1">
|
||||
<Tooltip title="点击查看账号详情">
|
||||
<p class="name cursor-pointer hover:!color-#6d4cfe" @click="goDetail(item)">{{ item.name || '-' }}</p>
|
||||
@ -121,7 +118,7 @@
|
||||
}}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</a-spin>
|
||||
</Spin>
|
||||
<PauseAccountPatchModal ref="pauseAccountPatchModalRef" @success="emits('update')" />
|
||||
<ReauthorizeAccountModal ref="reauthorizeAccountModalRef" @update="emits('update')" />
|
||||
<AuthorizedAccountModal ref="authorizedAccountModalRef" @update="emits('update')" />
|
||||
@ -130,7 +127,7 @@
|
||||
|
||||
<script setup>
|
||||
import { defineProps, ref, computed, inject } from 'vue';
|
||||
import { Checkbox, Button, Tooltip } from 'ant-design-vue';
|
||||
import { Checkbox, Button, Tooltip, Spin } from 'ant-design-vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { deleteSyncStatus } from '@/api/all/propertyMarketing';
|
||||
import { exactFormatTime } from '@/utils/tools';
|
||||
|
||||
@ -4,13 +4,17 @@
|
||||
// grid-template-rows: repeat(2, 1fr); /* 2行 */
|
||||
grid-template-columns: repeat(4, 1fr); /* 4列 */
|
||||
gap: 20px;
|
||||
:deep(.ant-spin-container) {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.card-item {
|
||||
border-radius: 8px;
|
||||
// border: 1px solid var(--BG-300, #e6e6e8);
|
||||
background: var(--BG-white, #fff);
|
||||
padding: 12px 16px 16px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
.name {
|
||||
color: var(--Text-1, #211f24);
|
||||
|
||||
@ -16,12 +16,12 @@
|
||||
<div class="flex flex-col items-center">
|
||||
<!-- 加载中状态 -->
|
||||
<template v-if="modalState === MODAL_STATE.LOADING">
|
||||
<a-progress
|
||||
<Progress
|
||||
:percent="progress"
|
||||
color="#6D4CFE"
|
||||
trackColor="#E6E6E8"
|
||||
size="large"
|
||||
:stroke-width="4"
|
||||
strokeColor="#6D4CFE"
|
||||
trailColor="#E6E6E8"
|
||||
size="default"
|
||||
:strokeWidth="4"
|
||||
type="circle"
|
||||
/>
|
||||
<p class="s2 mt-16px">数据同步和初始化中,请勿关闭窗口。</p>
|
||||
@ -41,7 +41,7 @@
|
||||
<!-- 二维码加载中或失败 -->
|
||||
<template v-if="modalState === MODAL_STATE.QR_LOADING || modalState === MODAL_STATE.QR_FAILED">
|
||||
<div class="relative w-160px h-160px">
|
||||
<a-image :src="icon1" width="160" height="160" />
|
||||
<Image :src="icon1" :width="160" :height="160" />
|
||||
<div class="absolute top-0 left-0 z-2 w-full h-full flex flex-col items-center justify-center">
|
||||
<img
|
||||
v-if="modalState === MODAL_STATE.QR_FAILED"
|
||||
@ -63,7 +63,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<!-- 正常二维码 -->
|
||||
<a-image v-else :src="qrCodeUrl" width="160" height="160" />
|
||||
<Image v-else :src="qrCodeUrl" :width="160" :height="160" />
|
||||
<!-- 二维码失效遮罩 -->
|
||||
<div v-if="modalState === MODAL_STATE.QR_EXPIRED" class="mask cursor-pointer" @click="handleRefreshQrCode">
|
||||
<icon-refresh size="24" class="mb-13px" />
|
||||
@ -94,7 +94,7 @@
|
||||
|
||||
<script setup>
|
||||
import { defineExpose, ref, computed } from 'vue';
|
||||
import { Button, Modal, message } from 'ant-design-vue';
|
||||
import { Button, Modal, message, Image, Progress } from 'ant-design-vue';
|
||||
import { getAuthorizedImage, getMediaAccountsAuthorizedStatus } from '@/api/all/propertyMarketing';
|
||||
import SyncDataModal from '../sync-data-modal';
|
||||
|
||||
@ -242,12 +242,12 @@ const getAuthorizedStatus = async () => {
|
||||
const startFakeProgressPolling = () => {
|
||||
clearFakeProgressTimer();
|
||||
progressTimer = setInterval(() => {
|
||||
if (modalState.value === MODAL_STATE.LOADING && progress.value < 0.99) {
|
||||
const step = Math.random() * 0.04 + 0.01;
|
||||
progress.value = Math.min(progress.value + step, 0.99);
|
||||
if (modalState.value === MODAL_STATE.LOADING && progress.value < 99) {
|
||||
const step = Math.random() * 4 + 1;
|
||||
progress.value = Math.min(progress.value + step, 99);
|
||||
progress.value = Number(progress.value.toFixed(2));
|
||||
} else if (modalState.value === MODAL_STATE.LOADING && progress.value >= 0.99) {
|
||||
progress.value = 0.99; // 卡在99%
|
||||
} else if (modalState.value === MODAL_STATE.LOADING && progress.value >= 99) {
|
||||
progress.value = 99; // 卡在99%
|
||||
} else {
|
||||
clearFakeProgressTimer();
|
||||
clearStatusPollingTimer();
|
||||
|
||||
@ -16,12 +16,12 @@
|
||||
<div class="flex flex-col items-center">
|
||||
<!-- 加载中状态 -->
|
||||
<template v-if="modalState === MODAL_STATE.LOADING">
|
||||
<a-progress
|
||||
<Progress
|
||||
:percent="progress"
|
||||
color="#6D4CFE"
|
||||
trackColor="#E6E6E8"
|
||||
size="large"
|
||||
:stroke-width="4"
|
||||
strokeColor="#6D4CFE"
|
||||
trailColor="#E6E6E8"
|
||||
size="default"
|
||||
:strokeWidth="4"
|
||||
type="circle"
|
||||
/>
|
||||
<p class="s2 mt-16px">数据同步和初始化中,请勿关闭窗口。</p>
|
||||
@ -55,7 +55,7 @@
|
||||
<!-- 二维码加载中或失败 -->
|
||||
<template v-if="modalState === MODAL_STATE.QR_LOADING || modalState === MODAL_STATE.QR_FAILED">
|
||||
<div class="relative w-160px h-160px">
|
||||
<a-image :src="icon1" width="160" height="160" />
|
||||
<Image :src="icon1" :width="160" :height="160" />
|
||||
<div class="absolute top-0 left-0 z-2 w-full h-full flex flex-col items-center justify-center">
|
||||
<img
|
||||
v-if="modalState === MODAL_STATE.QR_FAILED"
|
||||
@ -78,7 +78,7 @@
|
||||
</template>
|
||||
|
||||
<!-- 正常二维码 -->
|
||||
<a-image v-else :src="qrCodeUrl" width="160" height="160" />
|
||||
<Image v-else :src="qrCodeUrl" :width="160" :height="160" />
|
||||
|
||||
<!-- 二维码失效遮罩 -->
|
||||
<div v-if="modalState === MODAL_STATE.QR_EXPIRED" class="mask cursor-pointer" @click="handleRefreshQrCode">
|
||||
@ -112,7 +112,7 @@
|
||||
|
||||
<script setup>
|
||||
import { defineExpose, ref, computed } from 'vue';
|
||||
import { Button, Modal, message } from 'ant-design-vue';
|
||||
import { Button, Modal, message, Image, Progress } from 'ant-design-vue';
|
||||
import { getMediaAccountsAuthorizedStatus, getAuthorizedImage } from '@/api/all/propertyMarketing';
|
||||
import SyncDataModal from '../sync-data-modal';
|
||||
|
||||
@ -259,12 +259,12 @@ const getAuthorizedStatus = async () => {
|
||||
const startFakeProgressPolling = () => {
|
||||
clearFakeProgressTimer();
|
||||
progressTimer = setInterval(() => {
|
||||
if (modalState.value === MODAL_STATE.LOADING && progress.value < 0.99) {
|
||||
const step = Math.random() * 0.04 + 0.01;
|
||||
progress.value = Math.min(progress.value + step, 0.99);
|
||||
if (modalState.value === MODAL_STATE.LOADING && progress.value < 99) {
|
||||
const step = Math.random() * 4 + 1;
|
||||
progress.value = Math.min(progress.value + step, 99);
|
||||
progress.value = Number(progress.value.toFixed(2));
|
||||
} else if (modalState.value === MODAL_STATE.LOADING && progress.value >= 0.99) {
|
||||
progress.value = 0.99; // 卡在99%
|
||||
} else if (modalState.value === MODAL_STATE.LOADING && progress.value >= 99) {
|
||||
progress.value = 99; // 卡在99%
|
||||
} else {
|
||||
clearFakeProgressTimer();
|
||||
clearStatusPollingTimer();
|
||||
|
||||
@ -9,9 +9,9 @@
|
||||
@cancel="onClose"
|
||||
>
|
||||
<div class="content">
|
||||
<a-steps changeable :current="currentStep" @change="setCurrent" class="mb-24px mx-79px">
|
||||
<a-step v-for="(step, index) in STEPS" :key="index">{{ step.label }}</a-step>
|
||||
</a-steps>
|
||||
<Steps changeable :current="currentStep" @change="setCurrent" class="mb-24px mx-79px w-full">
|
||||
<Steps.Step v-for="(step, index) in STEPS" :key="index" :title="step.label" />
|
||||
</Steps>
|
||||
|
||||
<component :is="activeComp" v-model:formQuery="formQuery" ref="compRef" />
|
||||
</div>
|
||||
@ -31,7 +31,7 @@
|
||||
|
||||
<script setup>
|
||||
import { postAddProject, putProject, getProjectDetail } from '@/api/all/propertyMarketing';
|
||||
import { Button, Modal } from 'ant-design-vue';
|
||||
import { Button, Modal, Steps } from 'ant-design-vue';
|
||||
|
||||
import StepOne from './stepOne.vue';
|
||||
import StepTwo from './stepTwo.vue';
|
||||
|
||||
@ -1,21 +1,20 @@
|
||||
<template>
|
||||
<a-card :bordered="false" class="chart-container" ref="chartContainer">
|
||||
<Card :bordered="false" class="chart-container !p-0" ref="chartContainer">
|
||||
<template #title>
|
||||
<span class="a-card-title">{{ title.name }}</span>
|
||||
<a-popover position="tl">
|
||||
<Tooltip position="tl" :title="title.popover">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p style="margin: 0">{{ title.popover }}</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</Tooltip>
|
||||
|
||||
</template>
|
||||
<NoData v-if="isChartEmpty" text="暂无数据" />
|
||||
|
||||
<div v-else class="chart" ref="chartEl" :style="{ height: height + 'px' }"></div>
|
||||
</a-card>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Tooltip, Card } from "ant-design-vue"
|
||||
import { ref, onMounted, watch, onBeforeUnmount } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
<div class="filter-row flex">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">时间筛选</span>
|
||||
<a-range-picker v-model="query.data_time" size="medium" allow-clear format="YYYY-MM-DD" class="!w-240px" />
|
||||
<DatePicker.RangePicker v-model:value="query.data_time" allowClear format="YYYY-MM-DD" class="!w-240px" />
|
||||
</div>
|
||||
<Button type="primary" ghost class="mr-12px" @click="handleSearch">
|
||||
<template #icon>
|
||||
@ -51,23 +51,23 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-wrap rounded-8px py-5px flex-1 flex flex-col" v-if="onLoading == false">
|
||||
<a-row :gutter="[24, 24]">
|
||||
<a-col v-for="(chart, key) in chartConfigs" :key="chart.dataKey" :span="12">
|
||||
<Row :gutter="[24, 24]">
|
||||
<Col v-for="(chart, key) in chartConfigs" :key="chart.dataKey" :span="12">
|
||||
<div>
|
||||
<EchartsItem
|
||||
:chartData="{ date: chart.date, series_data: chart.series_data }"
|
||||
:title="{ name: chart.title.name, popover: chart.title.popover }"
|
||||
/>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import EchartsItem from './components/echarts-item/index';
|
||||
import { PLATFORM_LIST } from '@/utils/platform';
|
||||
import { Button, Select, Tabs } from 'ant-design-vue';
|
||||
import { Button, Select, Tabs, Row, Col, DatePicker } from 'ant-design-vue';
|
||||
import {
|
||||
getPlacementAccountsTrend,
|
||||
getPlacementAccountProjectsTrend,
|
||||
|
||||
@ -52,8 +52,8 @@
|
||||
</div>
|
||||
<div class="filter-row-item">
|
||||
<span class="label">时间筛选</span>
|
||||
<a-range-picker
|
||||
v-model="query.data_time"
|
||||
<DatePicker.RangePicker
|
||||
v-model:value="query.data_time"
|
||||
size="medium"
|
||||
:allow-clear="false"
|
||||
format="YYYY-MM-DD"
|
||||
@ -81,7 +81,7 @@
|
||||
|
||||
<script setup>
|
||||
import { reactive, defineEmits, defineProps } from 'vue';
|
||||
import { Button, Input } from 'ant-design-vue';
|
||||
import { Button, Input, DatePicker } from 'ant-design-vue';
|
||||
import {
|
||||
getPlacementAccountProjectGroupsList,
|
||||
getPlacementAccountsList,
|
||||
|
||||
@ -35,22 +35,21 @@
|
||||
<!-- 默认状态 -->
|
||||
<div class="upload-block">
|
||||
<template v-if="uploadStatus === UploadStatus.DEFAULT">
|
||||
<a-upload
|
||||
<Upload
|
||||
ref="uploadRef"
|
||||
action="/"
|
||||
draggable
|
||||
:custom-request="handleUpload"
|
||||
:customRequest="handleUpload"
|
||||
accept=".xlsx,.xls,.docx,.doc"
|
||||
:show-file-list="false"
|
||||
:showUploadList="false"
|
||||
>
|
||||
<template #upload-button>
|
||||
<template #default>
|
||||
<div class="upload-box">
|
||||
<icon-plus size="14" class="mb-16px" />
|
||||
<span class="text mb-4px">点击或拖拽文件到此处上传</span>
|
||||
<span class="tip">支持 xls, xlsx格式</span>
|
||||
</div>
|
||||
</template>
|
||||
</a-upload>
|
||||
</Upload>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="flex items-center">
|
||||
@ -138,7 +137,7 @@
|
||||
<icon-question-circle size="14" class="ml-4px color-#737478" />
|
||||
</Tooltip>
|
||||
</template>
|
||||
<a-switch v-model="form.is_sync_project" size="medium" :checked-value="1" :unchecked-value="0" />
|
||||
<Switch v-model:checked="form.is_sync_project" size="middle" :checkedValue="1" :unCheckedValue="0" />
|
||||
</FormItem>
|
||||
</template>
|
||||
</Form>
|
||||
@ -155,7 +154,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Modal, Form, FormItem, Button, Input, RadioGroup, Radio, Tooltip, message } from 'ant-design-vue';
|
||||
import { Modal, Form, FormItem, Button, Input, RadioGroup, Radio, Tooltip, message, Switch, Upload } from 'ant-design-vue';
|
||||
import { ref, defineEmits } from 'vue';
|
||||
|
||||
import AuthorizedAccountModal from '../authorized-account-modal';
|
||||
@ -239,12 +238,12 @@ const confirmBtnText = computed(() => {
|
||||
});
|
||||
|
||||
const handleUpload = async (option) => {
|
||||
const { fileItem } = option;
|
||||
const { file: uploadedFile } = option;
|
||||
|
||||
uploadStatus.value = UploadStatus.WAITING;
|
||||
|
||||
file.value = fileItem.file;
|
||||
fileName.value = fileItem.name;
|
||||
file.value = uploadedFile;
|
||||
fileName.value = uploadedFile.name;
|
||||
};
|
||||
|
||||
function removeFile() {
|
||||
|
||||
@ -36,8 +36,8 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.arco-upload-drag {
|
||||
height: 120px;
|
||||
.ant-upload {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@ -47,6 +47,8 @@
|
||||
}
|
||||
}
|
||||
.upload-box {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 120px;
|
||||
padding: 0 16px;
|
||||
|
||||
@ -15,12 +15,12 @@
|
||||
>
|
||||
<div class="flex flex-col items-center">
|
||||
<template v-if="isLoading">
|
||||
<a-progress
|
||||
<Progress
|
||||
:percent="progress"
|
||||
color="#6D4CFE"
|
||||
trackColor="#E6E6E8"
|
||||
size="large"
|
||||
:stroke-width="4"
|
||||
strokeColor="#6D4CFE"
|
||||
trailColor="#E6E6E8"
|
||||
size="default"
|
||||
:strokeWidth="4"
|
||||
type="circle"
|
||||
/>
|
||||
<p class="s2 mt-16px">数据同步和初始化中,请勿关闭窗口。</p>
|
||||
@ -61,7 +61,7 @@
|
||||
|
||||
<script setup>
|
||||
// 添加Modal导入
|
||||
import { Modal, Form, FormItem, Input } from 'ant-design-vue';
|
||||
import { Modal, Form, FormItem, Input, Progress } from 'ant-design-vue';
|
||||
import dayjs from 'dayjs';
|
||||
import { Button } from 'ant-design-vue';
|
||||
import { defineExpose, ref, computed, defineEmits } from 'vue';
|
||||
@ -217,12 +217,12 @@ const startLoading = async () => {
|
||||
const startFakeProgressPolling = () => {
|
||||
clearFakeProgressTimer();
|
||||
progressTimer = setInterval(() => {
|
||||
if (!isCompleted.value && progress.value < 0.99) {
|
||||
const step = Math.random() * 0.04 + 0.01;
|
||||
progress.value = Math.min(progress.value + step, 0.99);
|
||||
if (!isCompleted.value && progress.value < 99) {
|
||||
const step = Math.random() * 4 + 1;
|
||||
progress.value = Math.min(progress.value + step, 99);
|
||||
progress.value = Number(progress.value.toFixed(2));
|
||||
} else if (!isCompleted.value && progress.value >= 0.99) {
|
||||
progress.value = 0.99; // 卡在99%
|
||||
} else if (!isCompleted.value && progress.value >= 99) {
|
||||
progress.value = 99; // 卡在99%
|
||||
} else {
|
||||
clearFakeProgressTimer();
|
||||
clearStatusPollingTimer();
|
||||
|
||||
@ -3,25 +3,19 @@
|
||||
<div class="part-div">
|
||||
<div class="part-div-header">
|
||||
<span class="part-div-header-title">投放行动指南</span>
|
||||
<a-popover position="tl">
|
||||
<Tooltip position="tl" title="投放建议优化。">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p>投放建议优化。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<Space>
|
||||
<span class="player-title">表现分析</span>
|
||||
<a-popover position="tl">
|
||||
<Tooltip position="tl" title="表现分析。">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p>表现分析。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</Tooltip>
|
||||
</Space>
|
||||
<div style="margin-right: 24px">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<Row :gutter="24">
|
||||
<Col :span="12">
|
||||
<div class="overall-strategy">
|
||||
<span class="placement-optimization-title">人群分析</span>
|
||||
<Space direction="vertical">
|
||||
@ -34,8 +28,8 @@
|
||||
</Space>
|
||||
</Space>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
</Col>
|
||||
<Col :span="12">
|
||||
<div class="overall-strategy">
|
||||
<span class="placement-optimization-title">投放素材</span>
|
||||
<Space direction="vertical">
|
||||
@ -48,10 +42,10 @@
|
||||
</Space>
|
||||
</Space>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="grid-demo" :gutter="24">
|
||||
<a-col :span="12">
|
||||
</Col>
|
||||
</Row>
|
||||
<Row class="grid-demo" :gutter="24">
|
||||
<Col :span="12">
|
||||
<div class="overall-strategy">
|
||||
<span class="placement-optimization-title">投放时段</span>
|
||||
<Space direction="vertical">
|
||||
@ -64,9 +58,9 @@
|
||||
</Space>
|
||||
</Space>
|
||||
</div>
|
||||
</a-col>
|
||||
</Col>
|
||||
|
||||
<a-col :span="12">
|
||||
<Col :span="12">
|
||||
<div class="overall-strategy">
|
||||
<span class="placement-optimization-title">平台表现</span>
|
||||
<Space direction="vertical">
|
||||
@ -79,20 +73,17 @@
|
||||
</Space>
|
||||
</Space>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
<Space>
|
||||
<span class="player-title">新投放建议生成</span>
|
||||
<a-popover position="tl">
|
||||
<Tooltip position="tl" title="新投放建议生成。">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p style="margin: 0">新投放建议生成。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</Tooltip>
|
||||
</Space>
|
||||
<a-row class="grid-demo" :gutter="24">
|
||||
<a-col :span="24">
|
||||
<Row class="grid-demo" :gutter="24">
|
||||
<Col :span="24">
|
||||
<div class="overall-strategy">
|
||||
<span class="placement-optimization-title">人群建议</span>
|
||||
<Space direction="vertical">
|
||||
@ -105,10 +96,10 @@
|
||||
</Space>
|
||||
</Space>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="grid-demo" :gutter="24">
|
||||
<a-col :span="24">
|
||||
</Col>
|
||||
</Row>
|
||||
<Row class="grid-demo" :gutter="24">
|
||||
<Col :span="24">
|
||||
<div class="overall-strategy">
|
||||
<span class="placement-optimization-title">素材建议</span>
|
||||
<Space direction="vertical">
|
||||
@ -121,11 +112,11 @@
|
||||
</Space>
|
||||
</Space>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<a-row class="grid-demo" :gutter="24">
|
||||
<a-col :span="24">
|
||||
<Row class="grid-demo" :gutter="24">
|
||||
<Col :span="24">
|
||||
<div class="overall-strategy">
|
||||
<span class="placement-optimization-title">投放策略建议</span>
|
||||
<Space direction="vertical">
|
||||
@ -138,14 +129,14 @@
|
||||
</Space>
|
||||
</Space>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Space } from "ant-design-vue"
|
||||
import { Space, Tooltip, Row, Col } from "ant-design-vue"
|
||||
import { IconQuestionCircle } from '@arco-design/web-vue/es/icon';
|
||||
|
||||
const props = defineProps({
|
||||
|
||||
@ -2,12 +2,9 @@
|
||||
<div class="part-div">
|
||||
<div class="part-div-header">
|
||||
<span class="part-div-header-title">总体摘要</span>
|
||||
<a-popover position="tl">
|
||||
<Tooltip position="tl" title="于筛选出来的投流账户/计划的情况生成的总体描述。">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p style="margin: 0">基于筛选出来的投流账户/计划的情况生成的总体描述。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</Tooltip>
|
||||
<span @click="copyData" class="copybtn">
|
||||
<icon-copy :style="{ fontSize: '14px' }" />
|
||||
复制
|
||||
@ -29,7 +26,7 @@
|
||||
<script setup lang="ts">
|
||||
import { IconQuestionCircle } from '@arco-design/web-vue/es/icon';
|
||||
import { defineProps } from 'vue';
|
||||
import { Space, message } from "ant-design-vue"
|
||||
import { Space, message, Tooltip } from "ant-design-vue"
|
||||
|
||||
const props = defineProps({
|
||||
overview: {
|
||||
|
||||
@ -2,97 +2,80 @@
|
||||
<div class="part-div">
|
||||
<div class="part-div-header">
|
||||
<span class="part-div-header-title">投放建议优化</span>
|
||||
<a-popover position="tl">
|
||||
<Tooltip position="tl" title="基于筛选出来的投流账户/计划的情况生成的优化建议。">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p style="margin: 0">基于筛选出来的投流账户/计划的情况生成的优化建议。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<NoData v-if="isEmptyData" style="height: 100px" text="暂无数据" />
|
||||
|
||||
<div v-else>
|
||||
<a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
|
||||
<a-col :span="24">
|
||||
<Row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
|
||||
<Col :span="24">
|
||||
<div class="overall-strategy">
|
||||
<span class="placement-optimization-title"
|
||||
>总体策略
|
||||
<a-popover position="tl">
|
||||
<Tooltip position="tl" title="优化建议的整体调整概述。">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p style="margin: 0">优化建议的整体调整概述。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</Tooltip>
|
||||
</span>
|
||||
<span class="placement-optimization-str">{{ props.optimization?.[0]?.['content'] }}</span>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="grid-demo" style="margin-right: 10px" :gutter="{ md: 8, lg: 24, xl: 32 }">
|
||||
<a-col :span="12">
|
||||
</Col>
|
||||
</Row>
|
||||
<Row class="grid-demo" style="margin-right: 10px" :gutter="{ md: 8, lg: 24, xl: 32 }">
|
||||
<Col :span="12">
|
||||
<div class="overall-strategy">
|
||||
<span class="placement-optimization-title"
|
||||
>预算分配
|
||||
<a-popover position="tl">
|
||||
<Tooltip position="tl" title="优化建议在预算分配部分的详细描述。">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p style="margin: 0">优化建议在预算分配部分的详细描述。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</Tooltip>
|
||||
</span>
|
||||
<span class="placement-optimization-str">{{ props.optimization?.[1]?.['content'] }}</span>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
</Col>
|
||||
<Col :span="12">
|
||||
<div class="overall-strategy">
|
||||
<span class="placement-optimization-title"
|
||||
>时段优化
|
||||
<a-popover position="tl">
|
||||
<Tooltip position="tl" title="优化建议在时段优化部分的详细描述。">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p style="margin: 0">优化建议在时段优化部分的详细描述。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</Tooltip>
|
||||
</span>
|
||||
<span class="placement-optimization-str">{{ props.optimization?.[2]?.['content'] }}</span>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="grid-demo" style="margin-right: 10px" :gutter="{ md: 8, lg: 24, xl: 32 }">
|
||||
<a-col :span="12">
|
||||
</Col>
|
||||
</Row>
|
||||
<Row class="grid-demo" style="margin-right: 10px" :gutter="{ md: 8, lg: 24, xl: 32 }">
|
||||
<Col :span="12">
|
||||
<div class="overall-strategy">
|
||||
<span class="placement-optimization-title"
|
||||
>人群包优化
|
||||
<a-popover position="tl">
|
||||
<Tooltip position="tl" title="优化建议在人群包优化部分的详细描述。">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p style="margin: 0">优化建议在人群包优化部分的详细描述。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</Tooltip>
|
||||
</span>
|
||||
<span class="placement-optimization-str">{{ props?.optimization?.[3]?.['content'] }}</span>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
</Col>
|
||||
<Col :span="12">
|
||||
<div class="overall-strategy">
|
||||
<span class="placement-optimization-title"
|
||||
>素材优化
|
||||
<a-popover position="tl">
|
||||
<Tooltip position="tl" title="优化建议在素材优化部分的详细描述。">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p style="margin: 0">优化建议在素材优化部分的详细描述。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</Tooltip>
|
||||
</span>
|
||||
<span class="placement-optimization-str">{{ props?.optimization?.[4]?.['content'] }}</span>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Tooltip, Row, Col } from "ant-design-vue"
|
||||
import { defineProps } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
|
||||
@ -42,15 +42,14 @@
|
||||
<template #customRender="{ record }">
|
||||
<Space>
|
||||
<Space>
|
||||
<a-popconfirm
|
||||
content="确定删除吗?"
|
||||
type="warning"
|
||||
ok-text="确认删除"
|
||||
cancel-text="取消"
|
||||
@ok="deleteData(record.id)"
|
||||
<Popconfirm
|
||||
title="确定删除吗?"
|
||||
okText="确认删除"
|
||||
cancelText="取消"
|
||||
@confirm="deleteData(record.id)"
|
||||
>
|
||||
<icon-delete></icon-delete>
|
||||
</a-popconfirm>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
<Space>
|
||||
<Button type="primary" ghost @click="downLoad(record.file_url)" class="operation-btn">下载</Button>
|
||||
@ -63,7 +62,7 @@
|
||||
</view>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Button, Space, Table, message } from 'ant-design-vue';
|
||||
import { Button, Space, Table, message, Popconfirm } from 'ant-design-vue';
|
||||
import { IconDelete } from '@arco-design/web-vue/es/icon';
|
||||
import { PLATFORM_LIST } from '@/utils/platform';
|
||||
|
||||
@ -122,4 +121,7 @@ const props = defineProps({
|
||||
line-height: 22px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
:deep(.ant-popconfirm-buttons) {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<!--表单搜索组件-->
|
||||
<template>
|
||||
<div class="container px-24px">
|
||||
<div class="container px-24px pt-24px">
|
||||
<div class="filter-row flex mb-20px">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">账户名称</span>
|
||||
@ -25,7 +25,7 @@
|
||||
<div class="filter-row flex mb-20px">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">时间筛选</span>
|
||||
<a-range-picker v-model="query.data_time" size="medium" allow-clear format="YYYY-MM-DD" class="w-310" />
|
||||
<DatePicker.RangePicker v-model:value="query.data_time" size="medium" allowClear format="YYYY-MM-DD" class="w-310" />
|
||||
</div>
|
||||
|
||||
<div class="filter-row-item flex items-center">
|
||||
@ -48,7 +48,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineEmits, defineProps } from 'vue';
|
||||
import { Button, Select } from 'ant-design-vue';
|
||||
import { Button, Select, DatePicker } from 'ant-design-vue';
|
||||
import { PLATFORM_LIST } from '@/utils/platform';
|
||||
import AccountSelect from '@/views/components/common/AccountSelect.vue';
|
||||
import PlanSelect from '@/views/components/common/PlanSelect.vue';
|
||||
|
||||
@ -46,12 +46,9 @@
|
||||
<template #title>
|
||||
<Space>
|
||||
<span>本周总消耗</span>
|
||||
<a-popover position="tl">
|
||||
<Tooltip position="tl" title="当前周内所有投流账户的累计广告花费,反映整体投放规模。">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p>当前周内所有投流账户的累计广告花费,反映整体投放规模。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</Tooltip>
|
||||
</Space>
|
||||
</template>
|
||||
<template #customRender="{ record }">
|
||||
@ -68,16 +65,13 @@
|
||||
<template #title>
|
||||
<Space>
|
||||
<span>本周总消耗环比</span>
|
||||
<a-popover position="tl">
|
||||
<Tooltip position="tl" title="本周消耗金额与上周对比的变化百分比,用于衡量预算投放趋势。">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p>本周消耗金额与上周对比的变化百分比,用于衡量预算投放趋势。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</Tooltip>
|
||||
</Space>
|
||||
</template>
|
||||
<template #customRender="{ record }">
|
||||
<a-statistic
|
||||
<Statistic
|
||||
:value="record.pre_total_use_amount_chain * 100"
|
||||
:value-style="{
|
||||
color: record.pre_total_use_amount_chain > 0 ? '#F64B31' : '#25C883',
|
||||
@ -90,7 +84,7 @@
|
||||
<icon-arrow-down v-else />
|
||||
</template>
|
||||
<template #suffix>%</template>
|
||||
</a-statistic>
|
||||
</Statistic>
|
||||
</template>
|
||||
</Table.Column>
|
||||
<Table.Column
|
||||
@ -103,12 +97,9 @@
|
||||
<template #title>
|
||||
<Space>
|
||||
<span>ROI</span>
|
||||
<a-popover position="tl">
|
||||
<Tooltip position="tl" title="投资回报率(ROI)= 收益 ÷ 投入成本,反映整体投流账户的收益效率。">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p>投资回报率(ROI)= 收益 ÷ 投入成本,反映整体投流账户的收益效率。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</Tooltip>
|
||||
</Space>
|
||||
</template>
|
||||
</Table.Column>
|
||||
@ -122,12 +113,9 @@
|
||||
<template #title>
|
||||
<Space>
|
||||
<span>CTR</span>
|
||||
<a-popover position="tl">
|
||||
<Tooltip position="tl" title="点击率(CTR)= 点击量 ÷ 展示量,是衡量广告素材吸引力的关键指标。">
|
||||
<icon-question-circle />
|
||||
<template #content>
|
||||
<p>点击率(CTR)= 点击量 ÷ 展示量,是衡量广告素材吸引力的关键指标。</p>
|
||||
</template>
|
||||
</a-popover>
|
||||
</Tooltip>
|
||||
</Space>
|
||||
</template>
|
||||
<template #customRender="{ record }">
|
||||
@ -138,7 +126,7 @@
|
||||
</view>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Space, Table } from "ant-design-vue"
|
||||
import { Space, Table, Tooltip, Statistic } from "ant-design-vue"
|
||||
import { PLATFORM_LIST } from '@/utils/platform';
|
||||
|
||||
const props = defineProps({
|
||||
|
||||
@ -6,27 +6,27 @@
|
||||
</div>
|
||||
|
||||
<div class="container px-24px pt-12px pb-24px">
|
||||
<a-row class="grid-demo" :gutter="24">
|
||||
<a-col :span="12">
|
||||
<Row class="grid-demo" :gutter="24">
|
||||
<Col :span="12">
|
||||
<div class="">
|
||||
<Space direction="vertical">
|
||||
<span class="span-title">账户</span>
|
||||
<span class="span-content">{{ detailData?.account }}</span>
|
||||
</Space>
|
||||
</div>
|
||||
</a-col>
|
||||
</Col>
|
||||
|
||||
<a-col :span="12">
|
||||
<Col :span="12">
|
||||
<div class="">
|
||||
<Space direction="vertical">
|
||||
<span class="span-title">计划</span>
|
||||
<span class="span-content">{{detailData.plan}}</span>
|
||||
</Space>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row class="grid-demo" :gutter="24" style="margin-top: 30px">
|
||||
<a-col :span="12">
|
||||
</Col>
|
||||
</Row>
|
||||
<Row class="grid-demo" :gutter="24" style="margin-top: 30px">
|
||||
<Col :span="12">
|
||||
<div class="">
|
||||
<Space direction="vertical">
|
||||
<span class="span-title">平台</span>
|
||||
@ -42,17 +42,17 @@
|
||||
</Space>
|
||||
</Space>
|
||||
</div>
|
||||
</a-col>
|
||||
</Col>
|
||||
|
||||
<a-col :span="12">
|
||||
<Col :span="12">
|
||||
<div class="">
|
||||
<Space direction="vertical">
|
||||
<span class="span-title">生成时间</span>
|
||||
<span class="span-content">{{ detailData.created_at }}</span>
|
||||
</Space>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
<MonthData :overview="aiResult.overview"></MonthData>
|
||||
@ -74,7 +74,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue';
|
||||
import { Button, Space, message } from 'ant-design-vue';
|
||||
import { Button, Space, message, Row, Col } from 'ant-design-vue';
|
||||
import MonthData from './components/month-data/index.vue';
|
||||
import PlacementSuggestions from './components/placement-suggestions/index.vue';
|
||||
import { PLATFORM_LIST } from '@/utils/platform';
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
@onSearch="onSearch"
|
||||
@updateQuery="handleUpdateQuery"
|
||||
/>
|
||||
<a-spin v-if="loading" tip="AI分析中" />
|
||||
<Spin v-if="loading" tip="AI分析中" />
|
||||
|
||||
<div v-if="listData.total > 0" class="pagination-box flex justify-end ignore-export">
|
||||
<Pagination
|
||||
@ -72,7 +72,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref } from 'vue';
|
||||
import { Button, Tabs, Space, Pagination } from 'ant-design-vue';
|
||||
import { Button, Tabs, Space, Pagination, Spin } from 'ant-design-vue';
|
||||
const { TabPane } = Tabs;
|
||||
import PlacementGuideList from './components/table-data/placementGuideList.vue';
|
||||
import listSearchForm from './components/table-data/listSearchForm.vue';
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
</div>
|
||||
<div class="filter-row-item" v-if="query.audit_status === AuditStatus.Pending">
|
||||
<span class="label">上传时间</span>
|
||||
<a-range-picker
|
||||
<DatePicker.RangePicker
|
||||
v-model="created_at"
|
||||
size="medium"
|
||||
allow-clear
|
||||
@ -69,7 +69,7 @@
|
||||
</div>
|
||||
<div class="filter-row-item">
|
||||
<span class="label">审核时间</span>
|
||||
<a-range-picker
|
||||
<DatePicker.RangePicker
|
||||
v-model="audit_started_at"
|
||||
size="medium"
|
||||
allow-clear
|
||||
@ -100,7 +100,7 @@
|
||||
|
||||
<script setup>
|
||||
import { defineEmits, defineProps } from 'vue';
|
||||
import { Button, Input, Select, Space } from 'ant-design-vue';
|
||||
import { Button, Input, Select, Space, DatePicker } from 'ant-design-vue';
|
||||
const { Option } = Select;
|
||||
import { PLATFORMS } from '@/views/writer-material-center/components/finished-products/manuscript/check-list/constants';
|
||||
import { AuditStatus } from '@/views/writer-material-center/components/finished-products/constants';
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script lang="jsx">
|
||||
import { Drawer, Image } from '@arco-design/web-vue';
|
||||
import { Drawer, Image } from 'ant-design-vue';
|
||||
import TextOverTips from '@/components/text-over-tips';
|
||||
|
||||
import icon1 from '@/assets/img/error-img.png';
|
||||
@ -32,12 +32,12 @@ export default {
|
||||
return () => (
|
||||
<Drawer
|
||||
title="审核列表"
|
||||
visible={visible.value}
|
||||
v-model:open={visible.value}
|
||||
width={420}
|
||||
class="check-list-drawer-xt"
|
||||
footer={false}
|
||||
header={false}
|
||||
onCancel={onClose}
|
||||
rootClassName="check-list-drawer-xt"
|
||||
footer={null}
|
||||
closable={false}
|
||||
onClose={onClose}
|
||||
>
|
||||
<div class="flex justify-between items-center h-56px px-24px">
|
||||
<div class="flex items-center">
|
||||
@ -61,13 +61,13 @@ export default {
|
||||
height={48}
|
||||
preview={false}
|
||||
src={item.cover}
|
||||
class="!rounded-4px mr-8px"
|
||||
class="!rounded-4px"
|
||||
fit="cover"
|
||||
v-slots={{
|
||||
error: () => <img src={icon1} class="w-full h-full" />,
|
||||
}}
|
||||
/>
|
||||
<div class="flex-1 overflow-hidden flex flex-col items-start">
|
||||
<div class="flex-1 overflow-hidden flex flex-col items-start ml-8px">
|
||||
<TextOverTips context={item.title} class={`cts !color-#211F24 title mb-4px !text-14px`} />
|
||||
<p class="cts !text-14px">{`合规程度:${
|
||||
item.ai_review?.compliance_level ? `${item.ai_review?.compliance_level}%` : '-'
|
||||
|
||||
@ -1,43 +1,40 @@
|
||||
.check-list-drawer-xt {
|
||||
.arco-drawer-mask {
|
||||
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.15);
|
||||
.ant-drawer-mask {
|
||||
background-color: transparent;
|
||||
}
|
||||
.arco-drawer {
|
||||
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.15);
|
||||
.arco-drawer-body {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 0 24px;
|
||||
.cts {
|
||||
color: var(--Text-1, #939499);
|
||||
|
||||
font-family: $font-family-regular;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
&.bold {
|
||||
color: var(--Text-1, #211f24);
|
||||
font-family: $font-family-medium;
|
||||
}
|
||||
.ant-drawer-body {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 0 24px;
|
||||
.cts {
|
||||
color: var(--Text-1, #939499);
|
||||
font-family: $font-family-regular;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
&.bold {
|
||||
color: var(--Text-1, #211f24);
|
||||
font-family: $font-family-medium;
|
||||
}
|
||||
.card-item {
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
transition: all;
|
||||
&:hover {
|
||||
background-color: #e6e6e8;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
&.active {
|
||||
border-color: #6d4cfe;
|
||||
background-color: #f0edff;
|
||||
:deep(.overflow-text) {
|
||||
font-family: $font-family-medium !important;
|
||||
}
|
||||
}
|
||||
.card-item {
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
transition: all;
|
||||
&:hover {
|
||||
background-color: #e6e6e8;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
&.active {
|
||||
border-color: #6d4cfe;
|
||||
background-color: #f0edff;
|
||||
:deep(.overflow-text) {
|
||||
font-family: $font-family-medium !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -138,9 +138,7 @@ export default {
|
||||
};
|
||||
|
||||
const uploadImage = async (option, action = 'upload') => {
|
||||
const {
|
||||
fileItem: { file },
|
||||
} = option;
|
||||
const { file } = option;
|
||||
|
||||
const { name, size, type } = file;
|
||||
const response = await getImagePreSignedUrl({ suffix: getFileExtension(name) });
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script lang="jsx">
|
||||
import { Image } from '@arco-design/web-vue';
|
||||
import { Image } from 'ant-design-vue';
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue';
|
||||
import TextOverTips from '@/components/text-over-tips';
|
||||
|
||||
@ -56,13 +56,13 @@ export default {
|
||||
height={48}
|
||||
preview={false}
|
||||
src={item.cover}
|
||||
class="!rounded-4px mr-8px"
|
||||
class="!rounded-4px"
|
||||
fit="cover"
|
||||
v-slots={{
|
||||
error: () => <img src={icon1} class="w-full h-full" />,
|
||||
}}
|
||||
/>
|
||||
<div class="flex-1 overflow-hidden flex flex-col items-start">
|
||||
<div class="flex-1 overflow-hidden flex flex-col items-start ml-8px">
|
||||
<TextOverTips context={item.title} class={`cts !color-#211F24 title mb-4px`} />
|
||||
<p class="cts">{`合规程度:${item.ai_review?.compliance_level ? `${item.ai_review?.compliance_level}%` : '-'}`}</p>
|
||||
</div>
|
||||
|
||||
@ -23,25 +23,23 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<a-upload
|
||||
<Upload
|
||||
v-if="files.length < 18"
|
||||
ref="uploadRef"
|
||||
action="/"
|
||||
draggable
|
||||
:custom-request="(option) => emit('upload', option)"
|
||||
:customRequest="(option) => emit('upload', option)"
|
||||
accept=".jpg,.jpeg,.png,.gif,.webp"
|
||||
:show-file-list="false"
|
||||
:showUploadList="false"
|
||||
multiple
|
||||
class="!flex !items-center"
|
||||
:limit="18 - files.length"
|
||||
>
|
||||
<template #upload-button>
|
||||
<template #default>
|
||||
<div class="upload-box">
|
||||
<icon-plus size="14" class="mb-16px color-#3C4043" />
|
||||
<span class="cts !color-#211F24">上传图片</span>
|
||||
</div>
|
||||
</template>
|
||||
</a-upload>
|
||||
</Upload>
|
||||
</VueDraggable>
|
||||
</div>
|
||||
</FormItem>
|
||||
@ -49,7 +47,7 @@
|
||||
|
||||
<script setup>
|
||||
import { VueDraggable } from 'vue-draggable-plus';
|
||||
import { FormItem} from 'ant-design-vue';
|
||||
import { FormItem, Upload } from 'ant-design-vue';
|
||||
|
||||
const props = defineProps({
|
||||
files: {
|
||||
|
||||
@ -132,9 +132,7 @@ export default {
|
||||
formData.value.videoInfo.uploadStatus = ENUM_UPLOAD_STATUS.UPLOADING;
|
||||
emit('updateVideoInfo', formData.value.videoInfo);
|
||||
|
||||
const {
|
||||
fileItem: { file },
|
||||
} = option;
|
||||
const { file } = option;
|
||||
setVideoInfo(file);
|
||||
|
||||
const response = await getVideoPreSignedUrlWriter(writerCode.value, { suffix: getFileExtension(file.name) });
|
||||
@ -165,9 +163,7 @@ export default {
|
||||
};
|
||||
// 文件上传处理
|
||||
const uploadImage = async (option) => {
|
||||
const {
|
||||
fileItem: { file },
|
||||
} = option;
|
||||
const { file } = option;
|
||||
|
||||
// 验证文件数量
|
||||
if (formData.value.files?.length >= 18) {
|
||||
|
||||
@ -56,7 +56,7 @@
|
||||
</div>
|
||||
<div class="filter-row-item">
|
||||
<span class="label">上传时间</span>
|
||||
<a-range-picker
|
||||
<DatePicker.RangePicker
|
||||
v-model="created_at"
|
||||
size="medium"
|
||||
allow-clear
|
||||
@ -85,7 +85,7 @@
|
||||
|
||||
<script setup>
|
||||
import { defineEmits, defineProps } from 'vue';
|
||||
import { Button, Input, Space } from 'ant-design-vue';
|
||||
import { Button, Input, Space, DatePicker } from 'ant-design-vue';
|
||||
import { CHECK_STATUS } from '@/views/writer-material-center/components/finished-products/manuscript/list/constants';
|
||||
import CommonSelect from '@/components/common-select';
|
||||
// import { getProjectList } from '@/api/all/propertyMarketing';
|
||||
|
||||
Reference in New Issue
Block a user