index.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. <template>
  2. <fs-page class="fs-page-custom">
  3. <fs-crud ref="crudRef" v-bind="crudBinding">
  4. <template #header-middle>
  5. <el-tabs v-model="tabActiveName" class="chart-tabs" type="border-card" @tab-change="changeTab">
  6. <el-tab-pane label="数据趋势" name="barLine">
  7. <MetricsCards v-model="metrics" :metric-items="options" @change="changeMetric"></MetricsCards>
  8. <div style="display: flex; justify-content: flex-end">
  9. <el-button-group class="ml-4" style="margin-top: 10px; margin-right: 30px">
  10. <el-button type="primary" @click="changeChartData">日</el-button>
  11. <el-button type="primary" @click="changeChartData">周</el-button>
  12. <el-button type="primary" @click="changeChartData">月</el-button>
  13. </el-button-group>
  14. </div>
  15. <BarLineChart ref="barLineRef" :barLineData="barLineData"/>
  16. </el-tab-pane>
  17. <el-tab-pane label="散点视图" name="scatterView" :lazy="true"></el-tab-pane>
  18. </el-tabs>
  19. </template>
  20. </fs-crud>
  21. </fs-page>
  22. </template>
  23. <script setup>
  24. import {ref, onMounted, onBeforeUnmount, watch, nextTick, onActivated, reactive} from 'vue'
  25. import {useFs, FsPage} from '@fast-crud/fast-crud'
  26. import {createCrudOptions} from './crud'
  27. import {useRoute, useRouter} from 'vue-router'
  28. import MetricsCards from '/@/components/MetricsCards/index.vue'
  29. import AdStructChart from '/@/views/adManage/sp/campaigns/chartComponents/adStruct.vue'
  30. import DataTendencyChart from '/@/views/adManage/sp/campaigns/chartComponents/dataTendency.vue'
  31. import BarLineChart from '/@/components/echartsComponents/BarLineChart.vue'
  32. import PieBarChart from '/@/components/echartsComponents/PieBarChart.vue'
  33. import BarChart from "/@/components/echartsComponents/BarChart.vue"
  34. const tabActiveName = ref('barLine')
  35. const {crudBinding, crudRef, crudExpose} = useFs({createCrudOptions, context: {}})
  36. const metrics = ref([{metric: 'ACOS', color: 'blue'}])
  37. const options = ref([
  38. {label: 'ACOS', value: 'ACOS', metricVal: '18.00%', preVal: '20.15%', gapVal: '-2.00%', disabled: true},
  39. {label: '点击量', value: 'clicks', metricVal: '19.00%', preVal: '20.15%', gapVal: '-1.00%', disabled: true},
  40. {label: '曝光量', value: 'impression', metricVal: '20.00%', preVal: '15.00%', gapVal: '5.00%', disabled: true},
  41. {label: '转化率1', value: 'rate1', metricVal: '1.00%', preVal: '15.00%', gapVal: '5.00%', disabled: true},
  42. {label: '转化率2', value: 'rate2', metricVal: '2.00%', preVal: '15.00%', gapVal: '5.00%', disabled: true},
  43. {label: '转化率3', value: 'rate3', metricVal: '3.00%', preVal: '15.00%', gapVal: '5.00%', disabled: true},
  44. {label: '转化率4', value: 'rate4', metricVal: '4.00%', preVal: '15.00%', gapVal: '5.00%'},
  45. {label: '转化率5', value: 'rate5', metricVal: '5.00%', preVal: '15.00%', gapVal: '5.00%'},
  46. {label: '转化率6', value: 'rate6', metricVal: '6.00%', preVal: '15.00%', gapVal: '5.00%'},
  47. ])
  48. const route = useRoute()
  49. const router = useRouter()
  50. const barLineRef = ref()
  51. const barLineData = reactive({
  52. xData: ['2023-10-18', '2023-10-19', '2023-10-20', '2023-10-21', '2023-10-22', '2023-10-23', '2023-10-24'],
  53. barData: [12, 13.4, 12.5, 16, 14.5, 15.6, 12.3],
  54. yData1: [18, 13, 10, 8, 9, 10, 14.2],
  55. yData2: [14, 15, 12, 16, 15, 13, 14.5]
  56. })
  57. onMounted(() => {
  58. crudExpose.doRefresh()
  59. })
  60. const resizeTabChart = () => {
  61. if (tabActiveName.value === 'barLine') {
  62. barLineRef.value.resizeChart()
  63. } else if (tabActiveName.value === 'bar') {
  64. // BarChartRef.value.resizeChart()
  65. }
  66. }
  67. const changeTab = () => {
  68. nextTick(() => {
  69. resizeTabChart()
  70. })
  71. }
  72. const changeMetric = () => {
  73. console.log(metrics.value)
  74. }
  75. // todo 发送请求获取数据切换图表
  76. function changeChartData() {
  77. updateData({
  78. xData: ['2023-10-18', '2023-10-19', '2023-10-20', '2023-10-21', '2023-10-22', '2023-10-23', '2023-10-24'],
  79. barData: [10, 13.4, 12, 14, 20, 14, 11.1],
  80. yData1: [7, 2, 4, 8, 4, 15, 10],
  81. yData2: [15, 10, 12, 14, 12, 10, 12.5]
  82. });
  83. }
  84. function updateData(newData) {
  85. // 更新响应式数据
  86. Object.assign(barLineData, newData)
  87. // 然后更新图表
  88. barLineRef.value.updateChart()
  89. }
  90. defineExpose({resizeTabChart})
  91. </script>
  92. <style lang="scss">
  93. .chart-tabs {
  94. margin: 5px 0;
  95. .el-tabs__nav {
  96. padding-left: 0 !important;
  97. }
  98. }
  99. </style>