renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 组件库替换

Browse Source
This commit is contained in:
rd
2025-09-05 16:41:50 +08:00
parent f6b91fce4f
commit 3451546280
61 changed files with 549 additions and 548 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/views/property-marketing/put-account/account-dashboard/components/echarts-item/index.vue
View File

@ -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';

12
src/views/property-marketing/put-account/account-dashboard/index.vue
View File

@ -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,

6
src/views/property-marketing/put-account/account-data/components/filter-block/index.vue
View File

@ -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,

21
src/views/property-marketing/put-account/account-manage/components/add-account-modal/index.vue
View File

@ -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() {

6
src/views/property-marketing/put-account/account-manage/components/add-account-modal/style.scss
View File

@ -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;

22
src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/index.vue
View File

@ -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();

71
src/views/property-marketing/put-account/investment-guidelines/components/action-guide-distribution/index.vue
View File

@ -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({

9
src/views/property-marketing/put-account/investment-guidelines/components/month-data/index.vue
View File

@ -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: {

75
src/views/property-marketing/put-account/investment-guidelines/components/placement-suggestions/index.vue
View File

@ -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({

18
src/views/property-marketing/put-account/investment-guidelines/components/table-data/guideListHistory.vue
View File

@ -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>

6
src/views/property-marketing/put-account/investment-guidelines/components/table-data/listSearchForm.vue
View File

@ -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';

34
src/views/property-marketing/put-account/investment-guidelines/components/table-data/placementGuideList.vue
View File

@ -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({

26
src/views/property-marketing/put-account/investment-guidelines/detail.vue
View File

@ -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';

4
src/views/property-marketing/put-account/investment-guidelines/index.vue
View File

@ -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';