123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112 |
- <template>
- <fs-page class="fs-page-custom">
- <fs-crud ref="crudRef" v-bind="crudBinding">
- <template #header-middle>
- <el-tabs v-model="tabActiveName" class="chart-tabs" type="border-card" @tab-change="changeTab">
- <el-tab-pane label="数据趋势" name="barLine">
- <MetricsCards v-model="metrics" :metric-items="options" @change="changeMetric"></MetricsCards>
- <div style="display: flex; justify-content: flex-end">
- <el-button-group class="ml-4" style="margin-top: 10px; margin-right: 30px">
- <el-button type="primary" @click="changeChartData">日</el-button>
- <el-button type="primary" @click="changeChartData">周</el-button>
- <el-button type="primary" @click="changeChartData">月</el-button>
- </el-button-group>
- </div>
- <BarLineChart ref="barLineRef" :barLineData="barLineData"/>
- </el-tab-pane>
- <el-tab-pane label="散点视图" name="scatterView" :lazy="true"></el-tab-pane>
- </el-tabs>
- </template>
- </fs-crud>
- </fs-page>
- </template>
- <script setup>
- import {ref, onMounted, onBeforeUnmount, watch, nextTick, onActivated, reactive} from 'vue'
- import {useFs, FsPage} from '@fast-crud/fast-crud'
- import {createCrudOptions} from './crud'
- import {useRoute, useRouter} from 'vue-router'
- import MetricsCards from '/@/components/MetricsCards/index.vue'
- import AdStructChart from '/@/views/adManage/sp/campaigns/chartComponents/adStruct.vue'
- import DataTendencyChart from '/@/views/adManage/sp/campaigns/chartComponents/dataTendency.vue'
- import BarLineChart from '/@/components/echartsComponents/BarLineChart.vue'
- import PieBarChart from '/@/components/echartsComponents/PieBarChart.vue'
- import BarChart from "/@/components/echartsComponents/BarChart.vue"
- const tabActiveName = ref('barLine')
- const {crudBinding, crudRef, crudExpose} = useFs({createCrudOptions, context: {}})
- const metrics = ref([{metric: 'ACOS', color: 'blue'}])
- const options = ref([
- {label: 'ACOS', value: 'ACOS', metricVal: '18.00%', preVal: '20.15%', gapVal: '-2.00%', disabled: true},
- {label: '点击量', value: 'clicks', metricVal: '19.00%', preVal: '20.15%', gapVal: '-1.00%', disabled: true},
- {label: '曝光量', value: 'impression', metricVal: '20.00%', preVal: '15.00%', gapVal: '5.00%', disabled: true},
- {label: '转化率1', value: 'rate1', metricVal: '1.00%', preVal: '15.00%', gapVal: '5.00%', disabled: true},
- {label: '转化率2', value: 'rate2', metricVal: '2.00%', preVal: '15.00%', gapVal: '5.00%', disabled: true},
- {label: '转化率3', value: 'rate3', metricVal: '3.00%', preVal: '15.00%', gapVal: '5.00%', disabled: true},
- {label: '转化率4', value: 'rate4', metricVal: '4.00%', preVal: '15.00%', gapVal: '5.00%'},
- {label: '转化率5', value: 'rate5', metricVal: '5.00%', preVal: '15.00%', gapVal: '5.00%'},
- {label: '转化率6', value: 'rate6', metricVal: '6.00%', preVal: '15.00%', gapVal: '5.00%'},
- ])
- const route = useRoute()
- const router = useRouter()
- const barLineRef = ref()
- const barLineData = reactive({
- xData: ['2023-10-18', '2023-10-19', '2023-10-20', '2023-10-21', '2023-10-22', '2023-10-23', '2023-10-24'],
- barData: [12, 13.4, 12.5, 16, 14.5, 15.6, 12.3],
- yData1: [18, 13, 10, 8, 9, 10, 14.2],
- yData2: [14, 15, 12, 16, 15, 13, 14.5]
- })
- onMounted(() => {
- crudExpose.doRefresh()
- })
- const resizeTabChart = () => {
- if (tabActiveName.value === 'barLine') {
- barLineRef.value.resizeChart()
- } else if (tabActiveName.value === 'bar') {
- // BarChartRef.value.resizeChart()
- }
- }
- const changeTab = () => {
- nextTick(() => {
- resizeTabChart()
- })
- }
- const changeMetric = () => {
- console.log(metrics.value)
- }
- // todo 发送请求获取数据切换图表
- function changeChartData() {
- updateData({
- xData: ['2023-10-18', '2023-10-19', '2023-10-20', '2023-10-21', '2023-10-22', '2023-10-23', '2023-10-24'],
- barData: [10, 13.4, 12, 14, 20, 14, 11.1],
- yData1: [7, 2, 4, 8, 4, 15, 10],
- yData2: [15, 10, 12, 14, 12, 10, 12.5]
- });
- }
- function updateData(newData) {
- // 更新响应式数据
- Object.assign(barLineData, newData)
- // 然后更新图表
- barLineRef.value.updateChart()
- }
- defineExpose({resizeTabChart})
- </script>
- <style lang="scss">
- .chart-tabs {
- margin: 5px 0;
- .el-tabs__nav {
- padding-left: 0 !important;
- }
- }
- </style>
|