yangyin
2024-07-19 4300e2394a205f3afbf4a3528db851e5636041d9
fix: 修改页面路径
已修改11个文件
426 ■■■■■ 文件已修改
customer_list/ch/ai_html/views/demo/html/MonthlyLeaderBoard.html 8 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
customer_list/ch/ai_html/views/demo/html/MonthlyPay.html 12 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
customer_list/ch/ai_html/views/demo/html/Overview.html 188 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
customer_list/ch/ai_html/views/demo/html/UnionPay.html 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
customer_list/ch/ai_html/views/demo/html/WorkOrder.html 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/project/ch/demo/CreditRateRank.html 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/project/ch/demo/MonthlyLeaderBoard.html 8 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/project/ch/demo/MonthlyPay.html 12 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/project/ch/demo/Overview.html 188 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/project/ch/demo/UnionPay.html 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/project/ch/demo/WorkOrder.html 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
customer_list/ch/ai_html/views/demo/html/MonthlyLeaderBoard.html
@@ -73,6 +73,8 @@
</body>
<script>
    const { createApp, onMounted, ref, reactive } = Vue;
    const leaderChartDomRef = ref(null);
    const leaderBarChartDomRef = ref(null);
    const App = createApp({
        setup() {
            let state = reactive({
@@ -118,6 +120,7 @@
            const initLeaderBoardChart = () => {
                var chartDom = document.getElementById('leaderChart');
                var leaderChartDom = echarts.init(chartDom);
                leaderChartDomRef.value = leaderChartDom;
                var option = {
                    title: {
                        text: '近12月缴费金额',
@@ -149,6 +152,7 @@
                const barXData = state.leaderBoardList.map((item) => item.Name);
                var chartDom = document.getElementById('leaderBarChart');
                var leaderBarChartDom = echarts.init(chartDom);
                leaderBarChartDomRef.value = leaderBarChartDom;
                var option = {
                    xAxis: {
                        type: 'category',
@@ -176,6 +180,10 @@
                option && leaderBarChartDom.setOption(option);
            };
            onMounted(() => {
                window.parent.addEventListener('resize', () => {
                    leaderChartDomRef.value.resize();
                    leaderBarChartDomRef.value.resize();
                });
                initLeaderBoardChart();
                initLeaderBoardBarChart();
            });
customer_list/ch/ai_html/views/demo/html/MonthlyPay.html
@@ -26,12 +26,15 @@
</body>
<script>
    const { createApp, onMounted, ref, reactive } = Vue;
    const monthlyPayChart = ref(null)
    const monthPayRecord = ref(null)
    const monthPayAmount = ref(null)
    createApp({
        setup() {
            const initMonthlyPayEChart = () => {
                const chartDom = document.getElementById('MonthlyPayChart');
                const myChart = echarts.init(chartDom);
                monthlyPayChart.value = myChart
                const data = [{ "name": 1596038400000, "value": [1596038400000, 53] }, { "name": 1596039040000, "value": [1596039040000, 51] }, { "name": 1596039680000, "value": [1596039680000, 51] }, { "name": 1596040320000, "value": [1596040320000, 51] }, { "name": 1596040832000, "value": [1596040832000, 58] }, { "name": 1596041472000, "value": [1596041472000, 67] }, { "name": 1596042112000, "value": [1596042112000, 68] }, { "name": 1596042624000, "value": [1596042624000, 54] }, { "name": 1596043264000, "value": [1596043264000, 51] }, { "name": 1596043904000, "value": [1596043904000, 57] }, { "name": 1596044416000, "value": [1596044416000, 52] }, { "name": 1596045056000, "value": [1596045056000, 54] }, { "name": 1596045696000, "value": [1596045696000, 51] }, { "name": 1596046208000, "value": [1596046208000, 51] }, { "name": 1596046848000, "value": [1596046848000, 52] }, { "name": 1596047488000, "value": [1596047488000, 51] }, { "name": 1596048000000, "value": [1596048000000, 53] }, { "name": 1596048640000, "value": [1596048640000, 52] }, { "name": 1596049280000, "value": [1596049280000, 67] }, { "name": 1596049920000, "value": [1596049920000, 59] }, { "name": 1596050432000, "value": [1596050432000, 58] }, { "name": 1596051072000, "value": [1596051072000, 52] }, { "name": 1596051712000, "value": [1596051712000, 55] }, { "name": 1596052224000, "value": [1596052224000, 53] }, { "name": 1596052864000, "value": [1596052864000, 54] }, { "name": 1596053504000, "value": [1596053504000, 54] }, { "name": 1596054016000, "value": [1596054016000, 54] }, { "name": 1596054656000, "value": [1596054656000, 52] }, { "name": 1596055296000, "value": [1596055296000, 54] }, { "name": 1596055808000, "value": [1596055808000, 65] }, { "name": 1596056448000, "value": [1596056448000, 59] }, { "name": 1596057088000, "value": [1596057088000, 55] }, { "name": 1596057600000, "value": [1596057600000, 53] }, { "name": 1596058240000, "value": [1596058240000, 55] }, { "name": 1596058880000, "value": [1596058880000, 54] }, { "name": 1596059520000, "value": [1596059520000, 55] }, { "name": 1596060032000, "value": [1596060032000, 64] }, { "name": 1596060672000, "value": [1596060672000, 57] }, { "name": 1596061312000, "value": [1596061312000, 56] }, { "name": 1596061824000, "value": [1596061824000, 55] }, { "name": 1596062464000, "value": [1596062464000, 55] }, { "name": 1596063104000, "value": [1596063104000, 55] }, { "name": 1596063616000, "value": [1596063616000, 58] }, { "name": 1596064256000, "value": [1596064256000, 79] }, { "name": 1596064896000, "value": [1596064896000, 60] }, { "name": 1596065408000, "value": [1596065408000, 63] }, { "name": 1596066048000, "value": [1596066048000, 63] }, { "name": 1596066688000, "value": [1596066688000, 82] }, { "name": 1596067200000, "value": [1596067200000, 81] }, { "name": 1596067840000, "value": [1596067840000, 78] }, { "name": 1596068480000, "value": [1596068480000, 78] }, { "name": 1596069120000, "value": [1596069120000, 65] }, { "name": 1596069632000, "value": [1596069632000, 76] }, { "name": 1596070272000, "value": [1596070272000, 80] }, { "name": 1596070912000, "value": [1596070912000, 78] }, { "name": 1596107040000, "value": [1596107040000, 70] }, { "name": 1596124799000, "value": [1596124799000, 0] }];
                //下面是一个简单的demo,方便展示数据格式和构成
                let option = {
@@ -114,6 +117,7 @@
            const initMonthPayRecordEChart = () => {
                const chartDom = document.getElementById('MonthPayRecord');
                const myMonthPayChart = echarts.init(chartDom);
                monthPayRecord.value = myMonthPayChart
                var monthPayOption = {
                    title: {
                        text: '近12个月的缴费记录',
@@ -224,6 +228,7 @@
            const initMonthPayAmountEChart = () => {
                const chartDom = document.getElementById('MonthPayAmount');
                const myMonthPayAmountChart = echarts.init(chartDom);
                monthPayAmount.value = myMonthPayAmountChart
                var monthPayAmountOption = {
                    title: {
                        text: '近12个月的缴费金额',
@@ -250,6 +255,11 @@
                myMonthPayAmountChart && myMonthPayAmountChart.resize();
            }
            onMounted(() => {
                window.parent.addEventListener('resize', () => {
                    monthlyPayChart.value && monthlyPayChart.value.resize();
                    monthPayRecord.value && monthPayRecord.value.resize();
                    monthPayAmount.value && monthPayAmount.value.resize();
                })
                initMonthlyPayEChart();
                initMonthPayRecordEChart()
                initMonthPayAmountEChart()
customer_list/ch/ai_html/views/demo/html/Overview.html
@@ -11,9 +11,26 @@
    <script src="/ai_html/views/demo/js/index.full.js"></script>
    <script src="/ai_html/views/demo/js/iframe-resizer/child-5.1.5.js" async></script>
    <script src="/ai_html/views/demo/js/echarts.min.js"></script>
    <!-- <script src="/ai_html/lib/common.js"></script> -->
    <link href="/ai_html/views/demo/css/variablesDemo.css" rel="stylesheet" type="text/css" />
    <link href="/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css" />
    <link href="/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css" />
    <style>
        .el-dialog__header {
            margin-right: 0;
            padding: 8px 10px;
            background: #528abe
        }
        .el-dialog__title {
            color: #fff;
            font-size: 14px;
        }
        .el-dialog__close {
            color: #fff !important;
        }
    </style>
</head>
<body>
@@ -22,7 +39,7 @@
            <div class="top-center-data">
                <div class="data-item" v-for="(item, index) in state.dataList">
                    <p class="data-item-title">{{item.title}}</p>
                    <p class="data-item-desc">{{item.value}}</p>
                    <p class="data-item-desc cursor-pointer" @click="handleDataItemClick(item)">{{item.value}}</p>
                </div>
            </div>
            <div class="top-center-chart">
@@ -62,12 +79,17 @@
                </div>
            </div>
        </div>
        <el-dialog v-model="state.isShowChartVisible" :title="state.volumeInfo.title" width="50%"
            class="px-[unset] py-[unset]" :before-close="handleCloseChartVisible">
            <div id="businessTrends" class="w-full h-[500px]"></div>
        </el-dialog>
    </div>
</body>
<script>
    const { createApp, onMounted, ref, reactive } = Vue;
    const { createApp, onMounted, ref, reactive, nextTick } = Vue;
    const { Decoration3 } = DataV;
    const demoOverViewChart = ref(null);
    const demoBusinessTrendsChart = ref(null);
    const App = createApp({
        setup() {
            let state = reactive({
@@ -124,82 +146,40 @@
                dataList: [
                    {
                        id: 1,
                        title: '今日累计销量',
                        value: 755,
                        config: {
                            number: [755],
                            toFixed: 0,
                            content: '{nt}',
                            textAlign: 'left',
                            style: {
                                fontSize: 24,
                            },
                        },
                    },
                    {
                        id: 2,
                        title: '本周累计销量',
                        value: 3288,
                        config: {
                            number: [3288],
                            toFixed: 0,
                            content: '{nt}',
                            textAlign: 'left',
                            style: {
                                fontSize: 24,
                            },
                        },
                    },
                    {
                        id: 3,
                        title: '本月累计销量',
                        value: 14222,
                        config: {
                            number: [14222],
                            toFixed: 0,
                            content: '{nt}',
                            textAlign: 'left',
                            style: {
                                fontSize: 24,
                            },
                        },
                    },
                    {
                        id: 4,
                        title: '季度累计销量',
                        value: 41022,
                        config: {
                            number: [41022],
                            toFixed: 0,
                            content: '{nt}',
                            textAlign: 'left',
                            style: {
                                fontSize: 24,
                            },
                        },
                    },
                    {
                        id: 5,
                        title: '年度累计销量',
                        value: 176888,
                        config: {
                            number: [176888],
                            toFixed: 0,
                            content: '{nt}',
                            textAlign: 'left',
                            style: {
                                fontSize: 24,
                            },
                        },
                    },
                    {
                        id: 6,
                        title: '今日目标销量',
                        value: 820,
                        config: {
                            number: [820],
                            toFixed: 0,
                            content: '{nt}',
                            textAlign: 'left',
                            style: {
                                fontSize: 24,
                            },
                        },
                    },
                ],
                completeObj: {
@@ -245,6 +225,12 @@
                    unit: '辆',
                },
                intervalInstance: 0,
                isShowChartVisible: false,
                volumeInfo: {
                    id: null,
                    title: null,
                    value: null,
                }
            });
            const getOverViewList = () => {
                const iconList = [
@@ -271,11 +257,15 @@
            };
            onMounted(() => {
                // getOverViewList();
                window.addEventListener('resize', () => {
                    demoOverViewChart.value.resize();
                });
                initOverViewEchart();
                window.parent.addEventListener('resize', () => {
                    demoOverViewChart.value.resize();
                    demoBusinessTrendsChart.value.resize();
                });
            });
            //初始化今日业绩完成度echart
            const initOverViewEchart = () => {
                var chartDom = document.getElementById('pond');
                var myChart = echarts.init(chartDom);
@@ -293,7 +283,7 @@
                    },
                    legend: {
                        orient: 'vertical',
                        left: '60%',
                        left: '54%',
                        y: 'center',
                        formatter: function (name) {
@@ -309,7 +299,7 @@
                        },
                    },
                    grid: {
                        left: '45'
                        left: '25'
                    },
                    // title: {
                    //     text: '76%',//主标题文本
@@ -332,7 +322,7 @@
                        {
                            name: '今日业绩完成度',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            radius: ['40%', '60%'],
                            center: ['30%', '50%'],
                            avoidLabelOverlap: false,
                            label: {
@@ -350,8 +340,80 @@
                option && myChart.setOption(option);
            };
            //初始化弹窗echart
            const initBusinessTrendsEchart = () => {
                var chartDom = document.getElementById('businessTrends');
                var businessTrendsChart = echarts.init(chartDom);
                demoBusinessTrendsChart.value = businessTrendsChart;
                const option = {
                    tooltip: {
                        trigger: 'axis',
                    },
                    grid: {
                        left: '3%', // 调整左边距
                        right: '5%', // 调整右边距
                        bottom: '3%', // 调整底部边距
                        top: '5%', // 调整顶部边距
                        containLabel: true, // 确保标签和轴标题被包含在容器内
                    },
                    xAxis: {
                        name: '时间',
                        type: 'category',
                        minInterval: 3600 * 4 * 1000, //12
                        data: ['00:00', '05:00', '10:00', '15:00', '20:00', '23:45']
            return { state };
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}',
                        },
                    },
                    dataZoom: {
                        type: 'inside',
                    },
                    series: [
                        {
                            name: '销售额',
                            type: 'line',
                            data: [620, 1032, 701, 1234, 890, 1430, 1320, 1230, 1320, 1430, 1320], // 示例数据,模拟起伏更大
                            smooth: true, // 折线平滑
                            lineStyle: {
                                width: 2,
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    { offset: 0, color: '#62c1fe' },
                                    { offset: 0.5, color: '#ad90f7' },
                                    { offset: 1, color: '#e875f2' },
                                ]),
                            },
                            symbolSize: (value, params) => {
                                // 获取数据系列的长度
                                const seriesLength = option.series[0].data.length;
                                // 中间节点放大
                                if (params.dataIndex === Math.floor(seriesLength / 2)) {
                                    return 8; // 中间节点的大小
                                }
                                return 8; // 其他节点的大小
                            },
                        },
                    ],
                };
                option && businessTrendsChart.setOption(option);
            }
            //点击数据项弹窗
            const handleDataItemClick = (item) => {
                state.volumeInfo = item
                nextTick(() => {
                    initBusinessTrendsEchart();
                });
                state.isShowChartVisible = true;
            };
            //关闭弹窗
            const handleCloseChartVisible = () => {
                state.isShowChartVisible = false;
            }
            return { state, handleDataItemClick, handleCloseChartVisible };
        },
    });
customer_list/ch/ai_html/views/demo/html/UnionPay.html
@@ -197,7 +197,7 @@
                option && myChart.setOption(option);
            };
            onMounted(() => {
                window.addEventListener('resize', () => {
                window.parent.addEventListener('resize', () => {
                    myChartRef.value.resize();
                });
                initUnionPayEChart();
customer_list/ch/ai_html/views/demo/html/WorkOrder.html
@@ -180,7 +180,7 @@
            };
            onMounted(() => {
                // getOverViewList();
                window.addEventListener('resize', () => {
                window.parent.addEventListener('resize', () => {
                    inspectionChart.value.resize();
                    salesRankRef.value.resize();
                });
src/views/project/ch/demo/CreditRateRank.html
@@ -233,7 +233,7 @@
                option && creditRatePieRankDom.setOption(option);
            };
            onMounted(() => {
                window.addEventListener('resize', () => {
                window.parent.addEventListener('resize', () => {
                    creditRateRankRef.value.resize();
                    creditRatePieRankRef.value.resize();
                });
src/views/project/ch/demo/MonthlyLeaderBoard.html
@@ -73,6 +73,8 @@
</body>
<script>
    const { createApp, onMounted, ref, reactive } = Vue;
    const leaderChartDomRef = ref(null);
    const leaderBarChartDomRef = ref(null);
    const App = createApp({
        setup() {
            let state = reactive({
@@ -118,6 +120,7 @@
            const initLeaderBoardChart = () => {
                var chartDom = document.getElementById('leaderChart');
                var leaderChartDom = echarts.init(chartDom);
                leaderChartDomRef.value = leaderChartDom;
                var option = {
                    title: {
                        text: '近12月缴费金额',
@@ -149,6 +152,7 @@
                const barXData = state.leaderBoardList.map((item) => item.Name);
                var chartDom = document.getElementById('leaderBarChart');
                var leaderBarChartDom = echarts.init(chartDom);
                leaderBarChartDomRef.value = leaderBarChartDom;
                var option = {
                    xAxis: {
                        type: 'category',
@@ -176,6 +180,10 @@
                option && leaderBarChartDom.setOption(option);
            };
            onMounted(() => {
                window.parent.addEventListener('resize', () => {
                    leaderChartDomRef.value.resize();
                    leaderBarChartDomRef.value.resize();
                });
                initLeaderBoardChart();
                initLeaderBoardBarChart();
            });
src/views/project/ch/demo/MonthlyPay.html
@@ -26,12 +26,15 @@
</body>
<script>
    const { createApp, onMounted, ref, reactive } = Vue;
    const monthlyPayChart = ref(null)
    const monthPayRecord = ref(null)
    const monthPayAmount = ref(null)
    createApp({
        setup() {
            const initMonthlyPayEChart = () => {
                const chartDom = document.getElementById('MonthlyPayChart');
                const myChart = echarts.init(chartDom);
                monthlyPayChart.value = myChart
                const data = [{ "name": 1596038400000, "value": [1596038400000, 53] }, { "name": 1596039040000, "value": [1596039040000, 51] }, { "name": 1596039680000, "value": [1596039680000, 51] }, { "name": 1596040320000, "value": [1596040320000, 51] }, { "name": 1596040832000, "value": [1596040832000, 58] }, { "name": 1596041472000, "value": [1596041472000, 67] }, { "name": 1596042112000, "value": [1596042112000, 68] }, { "name": 1596042624000, "value": [1596042624000, 54] }, { "name": 1596043264000, "value": [1596043264000, 51] }, { "name": 1596043904000, "value": [1596043904000, 57] }, { "name": 1596044416000, "value": [1596044416000, 52] }, { "name": 1596045056000, "value": [1596045056000, 54] }, { "name": 1596045696000, "value": [1596045696000, 51] }, { "name": 1596046208000, "value": [1596046208000, 51] }, { "name": 1596046848000, "value": [1596046848000, 52] }, { "name": 1596047488000, "value": [1596047488000, 51] }, { "name": 1596048000000, "value": [1596048000000, 53] }, { "name": 1596048640000, "value": [1596048640000, 52] }, { "name": 1596049280000, "value": [1596049280000, 67] }, { "name": 1596049920000, "value": [1596049920000, 59] }, { "name": 1596050432000, "value": [1596050432000, 58] }, { "name": 1596051072000, "value": [1596051072000, 52] }, { "name": 1596051712000, "value": [1596051712000, 55] }, { "name": 1596052224000, "value": [1596052224000, 53] }, { "name": 1596052864000, "value": [1596052864000, 54] }, { "name": 1596053504000, "value": [1596053504000, 54] }, { "name": 1596054016000, "value": [1596054016000, 54] }, { "name": 1596054656000, "value": [1596054656000, 52] }, { "name": 1596055296000, "value": [1596055296000, 54] }, { "name": 1596055808000, "value": [1596055808000, 65] }, { "name": 1596056448000, "value": [1596056448000, 59] }, { "name": 1596057088000, "value": [1596057088000, 55] }, { "name": 1596057600000, "value": [1596057600000, 53] }, { "name": 1596058240000, "value": [1596058240000, 55] }, { "name": 1596058880000, "value": [1596058880000, 54] }, { "name": 1596059520000, "value": [1596059520000, 55] }, { "name": 1596060032000, "value": [1596060032000, 64] }, { "name": 1596060672000, "value": [1596060672000, 57] }, { "name": 1596061312000, "value": [1596061312000, 56] }, { "name": 1596061824000, "value": [1596061824000, 55] }, { "name": 1596062464000, "value": [1596062464000, 55] }, { "name": 1596063104000, "value": [1596063104000, 55] }, { "name": 1596063616000, "value": [1596063616000, 58] }, { "name": 1596064256000, "value": [1596064256000, 79] }, { "name": 1596064896000, "value": [1596064896000, 60] }, { "name": 1596065408000, "value": [1596065408000, 63] }, { "name": 1596066048000, "value": [1596066048000, 63] }, { "name": 1596066688000, "value": [1596066688000, 82] }, { "name": 1596067200000, "value": [1596067200000, 81] }, { "name": 1596067840000, "value": [1596067840000, 78] }, { "name": 1596068480000, "value": [1596068480000, 78] }, { "name": 1596069120000, "value": [1596069120000, 65] }, { "name": 1596069632000, "value": [1596069632000, 76] }, { "name": 1596070272000, "value": [1596070272000, 80] }, { "name": 1596070912000, "value": [1596070912000, 78] }, { "name": 1596107040000, "value": [1596107040000, 70] }, { "name": 1596124799000, "value": [1596124799000, 0] }];
                //下面是一个简单的demo,方便展示数据格式和构成
                let option = {
@@ -114,6 +117,7 @@
            const initMonthPayRecordEChart = () => {
                const chartDom = document.getElementById('MonthPayRecord');
                const myMonthPayChart = echarts.init(chartDom);
                monthPayRecord.value = myMonthPayChart
                var monthPayOption = {
                    title: {
                        text: '近12个月的缴费记录',
@@ -224,6 +228,7 @@
            const initMonthPayAmountEChart = () => {
                const chartDom = document.getElementById('MonthPayAmount');
                const myMonthPayAmountChart = echarts.init(chartDom);
                monthPayAmount.value = myMonthPayAmountChart
                var monthPayAmountOption = {
                    title: {
                        text: '近12个月的缴费金额',
@@ -250,6 +255,11 @@
                myMonthPayAmountChart && myMonthPayAmountChart.resize();
            }
            onMounted(() => {
                window.parent.addEventListener('resize', () => {
                    monthlyPayChart.value && monthlyPayChart.value.resize();
                    monthPayRecord.value && monthPayRecord.value.resize();
                    monthPayAmount.value && monthPayAmount.value.resize();
                })
                initMonthlyPayEChart();
                initMonthPayRecordEChart()
                initMonthPayAmountEChart()
src/views/project/ch/demo/Overview.html
@@ -11,9 +11,26 @@
    <script src="/customer_list/ch/ai_html/views/demo/js/index.full.js"></script>
    <script src="/customer_list/ch/ai_html/views/demo/js/iframe-resizer/child-5.1.5.js" async></script>
    <script src="/customer_list/ch/ai_html/views/demo/js/echarts.min.js"></script>
    <!-- <script src="/customer_list/ch/ai_html/lib/common.js"></script> -->
    <link href="/customer_list/ch/ai_html/views/demo/css/variablesDemo.css" rel="stylesheet" type="text/css" />
    <link href="/customer_list/ch/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css" />
    <link href="/customer_list/ch/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css" />
    <style>
        .el-dialog__header {
            margin-right: 0;
            padding: 8px 10px;
            background: #528abe
        }
        .el-dialog__title {
            color: #fff;
            font-size: 14px;
        }
        .el-dialog__close {
            color: #fff !important;
        }
    </style>
</head>
<body>
@@ -22,7 +39,7 @@
            <div class="top-center-data">
                <div class="data-item" v-for="(item, index) in state.dataList">
                    <p class="data-item-title">{{item.title}}</p>
                    <p class="data-item-desc">{{item.value}}</p>
                    <p class="data-item-desc cursor-pointer" @click="handleDataItemClick(item)">{{item.value}}</p>
                </div>
            </div>
            <div class="top-center-chart">
@@ -62,12 +79,17 @@
                </div>
            </div>
        </div>
        <el-dialog v-model="state.isShowChartVisible" :title="state.volumeInfo.title" width="50%"
            class="px-[unset] py-[unset]" :before-close="handleCloseChartVisible">
            <div id="businessTrends" class="w-full h-[500px]"></div>
        </el-dialog>
    </div>
</body>
<script>
    const { createApp, onMounted, ref, reactive } = Vue;
    const { createApp, onMounted, ref, reactive, nextTick } = Vue;
    const { Decoration3 } = DataV;
    const demoOverViewChart = ref(null);
    const demoBusinessTrendsChart = ref(null);
    const App = createApp({
        setup() {
            let state = reactive({
@@ -124,82 +146,40 @@
                dataList: [
                    {
                        id: 1,
                        title: '今日累计销量',
                        value: 755,
                        config: {
                            number: [755],
                            toFixed: 0,
                            content: '{nt}',
                            textAlign: 'left',
                            style: {
                                fontSize: 24,
                            },
                        },
                    },
                    {
                        id: 2,
                        title: '本周累计销量',
                        value: 3288,
                        config: {
                            number: [3288],
                            toFixed: 0,
                            content: '{nt}',
                            textAlign: 'left',
                            style: {
                                fontSize: 24,
                            },
                        },
                    },
                    {
                        id: 3,
                        title: '本月累计销量',
                        value: 14222,
                        config: {
                            number: [14222],
                            toFixed: 0,
                            content: '{nt}',
                            textAlign: 'left',
                            style: {
                                fontSize: 24,
                            },
                        },
                    },
                    {
                        id: 4,
                        title: '季度累计销量',
                        value: 41022,
                        config: {
                            number: [41022],
                            toFixed: 0,
                            content: '{nt}',
                            textAlign: 'left',
                            style: {
                                fontSize: 24,
                            },
                        },
                    },
                    {
                        id: 5,
                        title: '年度累计销量',
                        value: 176888,
                        config: {
                            number: [176888],
                            toFixed: 0,
                            content: '{nt}',
                            textAlign: 'left',
                            style: {
                                fontSize: 24,
                            },
                        },
                    },
                    {
                        id: 6,
                        title: '今日目标销量',
                        value: 820,
                        config: {
                            number: [820],
                            toFixed: 0,
                            content: '{nt}',
                            textAlign: 'left',
                            style: {
                                fontSize: 24,
                            },
                        },
                    },
                ],
                completeObj: {
@@ -245,6 +225,12 @@
                    unit: '辆',
                },
                intervalInstance: 0,
                isShowChartVisible: false,
                volumeInfo: {
                    id: null,
                    title: null,
                    value: null,
                }
            });
            const getOverViewList = () => {
                const iconList = [
@@ -271,11 +257,15 @@
            };
            onMounted(() => {
                // getOverViewList();
                window.addEventListener('resize', () => {
                    demoOverViewChart.value.resize();
                });
                initOverViewEchart();
                window.parent.addEventListener('resize', () => {
                    demoOverViewChart.value.resize();
                    demoBusinessTrendsChart.value.resize();
                });
            });
            //初始化今日业绩完成度echart
            const initOverViewEchart = () => {
                var chartDom = document.getElementById('pond');
                var myChart = echarts.init(chartDom);
@@ -293,7 +283,7 @@
                    },
                    legend: {
                        orient: 'vertical',
                        left: '60%',
                        left: '54%',
                        y: 'center',
                        formatter: function (name) {
@@ -309,7 +299,7 @@
                        },
                    },
                    grid: {
                        left: '45'
                        left: '25'
                    },
                    // title: {
                    //     text: '76%',//主标题文本
@@ -332,7 +322,7 @@
                        {
                            name: '今日业绩完成度',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            radius: ['40%', '60%'],
                            center: ['30%', '50%'],
                            avoidLabelOverlap: false,
                            label: {
@@ -350,8 +340,80 @@
                option && myChart.setOption(option);
            };
            //初始化弹窗echart
            const initBusinessTrendsEchart = () => {
                var chartDom = document.getElementById('businessTrends');
                var businessTrendsChart = echarts.init(chartDom);
                demoBusinessTrendsChart.value = businessTrendsChart;
                const option = {
                    tooltip: {
                        trigger: 'axis',
                    },
                    grid: {
                        left: '3%', // 调整左边距
                        right: '5%', // 调整右边距
                        bottom: '3%', // 调整底部边距
                        top: '5%', // 调整顶部边距
                        containLabel: true, // 确保标签和轴标题被包含在容器内
                    },
                    xAxis: {
                        name: '时间',
                        type: 'category',
                        minInterval: 3600 * 4 * 1000, //12
                        data: ['00:00', '05:00', '10:00', '15:00', '20:00', '23:45']
            return { state };
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}',
                        },
                    },
                    dataZoom: {
                        type: 'inside',
                    },
                    series: [
                        {
                            name: '销售额',
                            type: 'line',
                            data: [620, 1032, 701, 1234, 890, 1430, 1320, 1230, 1320, 1430, 1320], // 示例数据,模拟起伏更大
                            smooth: true, // 折线平滑
                            lineStyle: {
                                width: 2,
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    { offset: 0, color: '#62c1fe' },
                                    { offset: 0.5, color: '#ad90f7' },
                                    { offset: 1, color: '#e875f2' },
                                ]),
                            },
                            symbolSize: (value, params) => {
                                // 获取数据系列的长度
                                const seriesLength = option.series[0].data.length;
                                // 中间节点放大
                                if (params.dataIndex === Math.floor(seriesLength / 2)) {
                                    return 8; // 中间节点的大小
                                }
                                return 8; // 其他节点的大小
                            },
                        },
                    ],
                };
                option && businessTrendsChart.setOption(option);
            }
            //点击数据项弹窗
            const handleDataItemClick = (item) => {
                state.volumeInfo = item
                nextTick(() => {
                    initBusinessTrendsEchart();
                });
                state.isShowChartVisible = true;
            };
            //关闭弹窗
            const handleCloseChartVisible = () => {
                state.isShowChartVisible = false;
            }
            return { state, handleDataItemClick, handleCloseChartVisible };
        },
    });
src/views/project/ch/demo/UnionPay.html
@@ -197,7 +197,7 @@
                option && myChart.setOption(option);
            };
            onMounted(() => {
                window.addEventListener('resize', () => {
                window.parent.addEventListener('resize', () => {
                    myChartRef.value.resize();
                });
                initUnionPayEChart();
src/views/project/ch/demo/WorkOrder.html
@@ -180,7 +180,7 @@
            };
            onMounted(() => {
                // getOverViewList();
                window.addEventListener('resize', () => {
                window.parent.addEventListener('resize', () => {
                    inspectionChart.value.resize();
                    salesRankRef.value.resize();
                });