YouKeChuanMei_VUE/src/views/mediaLibrary/historyData.vue

<template>
    <!-- 历史数据对话框 -->
    <el-dialog title="历史数据" v-model="historyDataOpen" width="1250px" class="my_dialog" align-center
        :destroy-on-close="true" :close-on-click-modal="false">
        <div v-loading="loading">
            <el-form :inline="true" :model="queryParams" class="myInsertForm">
                <el-form-item label="开始时间">
                    <el-date-picker v-model="queryParams.startTime" format="YYYY-MM-DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss" type="date" placeholder="开始时间" @change="validateStartTime" />
                </el-form-item>
                <el-form-item label="结束时间">
                    <el-date-picker v-model="queryParams.endTime" format="YYYY-MM-DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss" type="date" placeholder="结束时间" @change="validateEndTime" />
                </el-form-item>
                <el-form-item>
                    <el-radio-group v-model="charsType" @change="handleChangeType">
                        <el-radio value="1">折线图</el-radio>
                        <el-radio value="2">柱状图</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="primaryBtn" @click="handleQuery">查询</el-button>
                    <el-button type="primary" class="primaryBtn" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
            <div id="historyChar" ref="historyCharRef"></div>
            <el-table :data="historyList" height="368px">
                <el-table-column label="媒体名称" align="left" prop="mediaName" />
                <el-table-column label="供应商名称" prop="supplier" :show-overflow-tooltip="true" />
                <el-table-column label="折扣" prop="discount" :show-overflow-tooltip="true" />
                <el-table-column label="媒体净价(元)" prop="mediaRegularPrice" :show-overflow-tooltip="true" />
                <el-table-column label="实际报价(元)" prop="listPrice" :show-overflow-tooltip="true" />
                <el-table-column label="创建时间" align="center" prop="createTIme" width="180">
                    <template #default="scope">
                        <span>{{ parseTime(scope.row.createTime) }}</span>
                    </template>
                </el-table-column>
            </el-table>

            <!-- <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
            @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 historyList = ref([])
const queryParams = ref({
    mediaId: undefined,
    startTime: undefined,
    endTime: undefined,
})

const _historyChar = ref(null)
// 折线图
const initHistoryCharLine = () => {
    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: [
            {
                data: yData.value,
                type: 'line',
                smooth: true,
                // symbol: 'circle',
                symbolSize: 12,
                itemStyle: {
                    color: '#FFC63D'
                },
                lineStyle: {
                    width: 2,
                    color: '#FFC63D'
                },
            }
        ]
    })
}
// 柱状图
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({
    initHistoryData
});
</script>
<style lang='scss'>
.mediaNameLabel {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    color: #1A75E6;
    cursor: pointer;
}

.mediaNameLabel:hover {
    text-decoration: underline solid #1A75E6 1px;
    text-underline-offset: 4px;
}

#historyChar {
    width: 100%;
    height: 350px;
}
</style>