对接媒体历史数据

src/views/mediaLibrary/historyData.vue

@@ -2,64 +2,70 @@
     <!-- 历史数据对话框 -->
     <el-dialog title="历史数据" v-model="historyDataOpen" width="1250px" class="my_dialog" align-center
         :destroy-on-close="true" :close-on-click-modal="false">
-        <el-form :inline="true" class="myInsertForm">
+        <div v-loading="loading">
-            <el-form-item label="开始时间">
+            <el-form :inline="true" :model="queryParams" class="myInsertForm">
-                <el-date-picker v-model="queryParams.startTime" type="date" placeholder="开始时间" />
+                <el-form-item label="开始时间">
-            </el-form-item>
+                    <el-date-picker v-model="queryParams.startTime" format="YYYY-MM-DD HH:mm:ss"
-            <el-form-item label="结束时间">
+                        value-format="YYYY-MM-DD HH:mm:ss" type="date" placeholder="开始时间" @change="validateStartTime" />
-                <el-date-picker v-model="queryParams.endTime" type="date" placeholder="结束时间" />
+                </el-form-item>
-            </el-form-item>
+                <el-form-item label="结束时间">
-            <el-form-item>
+                    <el-date-picker v-model="queryParams.endTime" format="YYYY-MM-DD HH:mm:ss"
-                <el-radio-group v-model="queryParams.radio1">
+                        value-format="YYYY-MM-DD HH:mm:ss" type="date" placeholder="结束时间" @change="validateEndTime" />
-                    <el-radio value="1">折线图</el-radio>
+                </el-form-item>
-                    <el-radio value="2">柱状图</el-radio>
+                <el-form-item>
-                </el-radio-group>
+                    <el-radio-group v-model="charsType" @change="handleChangeType">
-            </el-form-item>
+                        <el-radio value="1">折线图</el-radio>
-            <el-form-item>
+                        <el-radio value="2">柱状图</el-radio>
-                <el-button type="primary" class="primaryBtn" @click="handleQuery">查询</el-button>
+                    </el-radio-group>
-                <el-button type="primary" class="primaryBtn" @click="resetQuery">重置</el-button>
+                </el-form-item>
-            </el-form-item>
+                <el-form-item>
-        </el-form>
+                    <el-button type="primary" class="primaryBtn" @click="handleQuery">查询</el-button>
-        <div id="historyChar" ref="historyCharRef"></div>
+                    <el-button type="primary" class="primaryBtn" @click="resetQuery">重置</el-button>
-        <el-table v-loading="loading" :data="historyList" height="368px">
+                </el-form-item>
-            <el-table-column label="媒体名称" align="left" prop="mediaName">
+            </el-form>
-                <template #default="scope">
+            <div id="historyChar" ref="historyCharRef"></div>
-                    <span class="mediaNameLabel">{{ scope.row.mediaName }}</span>
+            <el-table :data="historyList" height="368px">
-                </template>
+                <el-table-column label="媒体名称" align="left" prop="mediaName" />
-            </el-table-column>
+                <el-table-column label="供应商名称" prop="supplier" :show-overflow-tooltip="true" />
-            <el-table-column label="供应商名称" prop="realName" :show-overflow-tooltip="true" />
+                <el-table-column label="折扣" prop="discount" :show-overflow-tooltip="true" />
-            <el-table-column label="折扣" prop="email" :show-overflow-tooltip="true" />
+                <el-table-column label="媒体净价(元)" prop="mediaRegularPrice" :show-overflow-tooltip="true" />
-            <el-table-column label="媒体净价(元)" prop="phonenumber" :show-overflow-tooltip="true" />
+                <el-table-column label="实际报价(元)" prop="listPrice" :show-overflow-tooltip="true" />
-            <el-table-column label="实际报价(元)" prop="phonenumber" :show-overflow-tooltip="true" />
+                <el-table-column label="创建时间" align="center" prop="createTIme" width="180">
-            <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+                    <template #default="scope">
-                <template #default="scope">
+                        <span>{{ parseTime(scope.row.createTime) }}</span>
-                    <span>{{ parseTime(scope.row.createTime) }}</span>
+                    </template>
-                </template>
+                </el-table-column>
-            </el-table-column>
+            </el-table>
-        </el-table>
 
-        <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
+            <!-- <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
-            @pagination="getList" />
+            @pagination="getList" /> -->
+        </div>
     </el-dialog>
 </template>
 <script setup>
 import { onMounted, defineEmits, ref } from 'vue'
+import { mediaPrice } from "@/api/mediaLibrary"
 import * as echarts from 'echarts'
 
+const { proxy } = getCurrentInstance()
+
+// 图表类型
+const charsType = ref('1')
 const historyCharRef = ref(null)
+
+const xData = ref([])
+const yData = ref([])
+
 const historyDataOpen = ref(false)
 const loading = ref(false)
-const total = ref(0)
+// const total = ref(0)
 const historyList = ref([])
 const queryParams = ref({
-    pageNum: 1,
+    mediaId: undefined,
-    pageSize: 10,
+    startTime: undefined,
-    userName: undefined,
+    endTime: undefined,
-    phonenumber: undefined,
 })
-const getList = () => {
 
-}
 const _historyChar = ref(null)
 // 折线图
 const initHistoryCharLine = () => {
@@ -71,15 +77,15 @@ const initHistoryCharLine = () => {
             formatter: "{b} : {c} 元/年"   //鼠标放上去 展示内容 
         },
         grid: {
-            left: '2%',
+            left: '4%',
-            right: '2%',  // 右侧留更多空间显示长数值
+            right: '3%',  // 右侧留更多空间显示长数值
             top: '14%',
             bottom: '10%',
             containLabel: true
         },
         xAxis: {
             type: 'category',
-            data: ['滴滴', '五粮液项目', '北京易优行广告传媒有限公司', '滴滴', '五粮液项目', '北京易优行广告传媒有限公司', '滴滴'],
+            data: xData.value,
             axisLabel: {
                 interval: 0,  // 强制显示所有标签
                 rotate: 15,   // 标签旋转45度防止重叠
@@ -130,11 +136,11 @@ const initHistoryCharLine = () => {
         },
         series: [
             {
-                data: [820, 932, 901, 934, 1290, 1330, 1320],
+                data: yData.value,
                 type: 'line',
                 smooth: true,
                 // symbol: 'circle',
-                  symbolSize: 12,
+                symbolSize: 12,
                 itemStyle: {
                     color: '#FFC63D'
                 },
@@ -146,11 +152,162 @@ const initHistoryCharLine = () => {
         ]
     })
 }
+// 柱状图
+const initHistoryCharBar = () => {
+    if (_historyChar.value) _historyChar.value.dispose();
+    _historyChar.value = echarts.init(historyCharRef.value)
+    _historyChar.value.setOption({
+        tooltip: {
+            trigger: 'item',
+            formatter: "{b} : {c} 元/年"   //鼠标放上去 展示内容 
+        },
+        grid: {
+            left: '4%',
+            right: '3%',  // 右侧留更多空间显示长数值
+            top: '14%',
+            bottom: '10%',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            data: xData.value,
+            axisLabel: {
+                interval: 0,  // 强制显示所有标签
+                rotate: 15,   // 标签旋转45度防止重叠
+                fontSize: 16,  // 缩小字体
+                color: '#808080'
+            },
+            axisLine: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+            splitLine: {
+                lineStyle: {
+                    type: 'dashed',
+                    color: '#eee',
+                },
+                show: false
+            },
+        },
+        yAxis: {
+            name: '实际报价（元/年）',
+            nameTextStyle: {
+                color: '#3B3B3B',
+                fontSize: 16,
+                fontWeight: '400',
+                fontFamily: 'Microsoft YaHei',
+                align: 'center',
+            },
+            type: 'value',
+            axisLabel: {
+                fontSize: 16,
+                color: '#808080'
+            },
+            axisLine: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+            splitLine: {
+                lineStyle: {
+                    type: 'solid',
+                    color: '#F1F1F1',
+                },
+                show: true
+            },
+        },
+        series: [{
+            name: '数值',
+            type: 'bar',
+            barWidth: '16',
+            data: yData.value,
+            itemStyle: {
+                // color: '#767C81',
+
+                // 间隔变色函数
+                color: '#1A75E6',
+                borderRadius: [0, 0, 0, 0]  // 顶部圆角
+            },
+            label: {
+                show: false,
+                position: 'top',  // 数值显示在柱子上方
+                formatter: '{c}',
+                color: '#333'
+            }
+        }]
+    })
+    // window.addEventListener("resize", () => {
+    //     _vehicleTrainBarChart.value.resize()
+    // })
+}
+
+const handleChangeType = (val) => {
+    charsType.value = val
+    getMediaPriceList()
+}
+const handleQuery = () => {
+    getMediaPriceList()
+}
+const resetQuery = () => {
+    queryParams.value.startTime = undefined
+    queryParams.value.endTime = undefined
+    getMediaPriceList()
+}
+
+const getMediaPriceList = () => {
+    loading.value = true
+    console.log('查询参数', queryParams.value)
+    mediaPrice(queryParams.value).then(res => {
+        historyList.value = res.data
+        xData.value = []
+        yData.value = []
+        res.data.forEach(item => {
+            xData.value.push(item.supplier)
+            yData.value.push(parseFloat(item.listPrice))
+        });
+        if (xData.value.length > 0) {
+            nextTick(() => {
+                if (charsType.value == '1') initHistoryCharLine()
+                else initHistoryCharBar()
+            });
+        }
+        loading.value = false
+    })
+}
+// 校验开始时间是否超过结束时间
+const validateStartTime = (val) => {
+    if (val && queryParams.value.endTime && new Date(val) > new Date(queryParams.value.endTime)) {
+        proxy.$modal.msgError("开始时间不能晚于结束时间！")
+        // 自动修正为与结束时间相同
+        queryParams.value.startTime = queryParams.value.endTime;
+    }
+};
+
+// 校验结束时间是否早于开始时间
+const validateEndTime = (val) => {
+    if (val && queryParams.value.startTime && new Date(val) < new Date(queryParams.value.startTime)) {
+        proxy.$modal.msgError("结束时间不能早于开始时间！")
+        // 自动修正为与开始时间相同
+        queryParams.value.endTime = queryParams.value.startTime;
+    }
+};
+// 对外暴漏方法
+const initHistoryData = (_mediaId) => {
+    historyDataOpen.value = true
+    nextTick(() => {
+        if (_mediaId) {
+            queryParams.value.mediaId = _mediaId
+            getMediaPriceList()
+        }
+    })
+}
 
 // 暴露方法\属性给父组件
 defineExpose({
-    historyDataOpen,
+    initHistoryData
-    initHistoryCharLine
 });
 </script>
 <style lang='scss'>

src/views/mediaLibrary/index.vue

@@ -572,10 +572,7 @@ const handleAbolish = (row) => {
 }
 // 打开历史数据
 const handleHistoryChart = (row) => { 
-    historyDataRef.value.historyDataOpen = true
+    historyDataRef.value.initHistoryData(row.id)
-    nextTick(() => {
-        historyDataRef.value.initHistoryCharLine()
-    })
 }
 // 打开文件下载
 const handleDownFiles = (row) => {