WI/Web.V1.0.git

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>总览概述</title>
        <script src="/ai_html/views/demo/js/tailwind.js"></script>
        <script src="/ai_html/views/demo/js/vue.global.js"></script>
        <script src="/ai_html/views/demo/js/datav.umd.js"></script>
        <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/views/demo/js/customInstruction.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>
        <div class="w-full h-full bg-[#f2f4f8]" id="overview">
            <div class="screen-top-center">
                <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 cursor-pointer" @click="handleDataItemClick(item)">{{item.value}}</p>
                    </div>
                </div>
                <div class="top-center-chart">
                    <div class="chart-item">
                        <div class="screen-top-header flex flex-wrap justify-center items-center">
                            <div class="header-left flex-c">
                                <i class="myiconfont icon-ico_shuju text-[#1c86ff]"></i>
                            </div>
                            <div class="header-right flex-l">
                                <span class="header-title">今日地区销量排行</span>
                                <Decoration3 class="dv-dec-3" />
                            </div>
                        </div>
                        <div class="max-w-[600px] h-full ml-[5px]">
                            <div v-for="(item,index) in state.rankList.data" :key="index" class="flex">
                                <div class="text-[16px] text-[#000] w-[70px]">{{item.name}}</div>
 
                                <el-progress
                                    :stroke-width="20"
                                    :percentage="item.value/100"
                                    class="mb-[15px] w-full"
                                    :text-inside="true"
                                ></el-progress>
                                <div class="text-[12px] text-[#000] w-[70px] ml-[10px]">{{item.value}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="chart-item">
                        <div class="screen-top-header flex-l">
                            <div class="header-left flex-c">
                                <i class="myiconfont icon-shangchuan text-[#1c86ff]"></i>
                            </div>
                            <div class="header-right flex-l">
                                <span class="header-title">今日业绩完成度</span>
                                <Decoration3 class="dv-dec-3" />
                            </div>
                        </div>
                        <div class="pond-section" v-resize="chartContainerResize">
                            <div id="pond" class="w-full h-[270px]"></div>
                        </div>
                    </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]" v-resize="chartContainerResize"></div>
            </el-dialog>
        </div>
    </body>
    <script>
        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({
                    annualPayment: [
                        {
                            ID: 1,
                            Name: '本年缴费',
                            Value: 8009987,
                            Unit: '笔',
                        },
                        {
                            ID: 2,
                            Name: '缴费金额',
                            Value: 7298.3,
                            Unit: '万元',
                        },
                        {
                            ID: 3,
                            Name: '本月缴费',
                            Value: 198,
                            Unit: '笔',
                        },
                        {
                            ID: 4,
                            Name: '缴费金额',
                            Value: 3,
                            Unit: '万元',
                        },
                        {
                            ID: 5,
                            Name: '本月缴费',
                            Value: 22,
                            Unit: '笔',
                        },
                        {
                            ID: 6,
                            Name: '缴费金额',
                            Value: 0.3,
                            Unit: '万元',
                        },
                        {
                            ID: 7,
                            Name: '今日实时',
                            Value: 198,
                            Unit: '笔',
                        },
                        {
                            ID: 8,
                            Name: '缴费金额',
                            Value: 198,
                            Unit: '万元',
                        },
                    ],
                    dataList: [
                        {
                            id: 1,
                            title: '今日累计销量',
                            value: 755,
                        },
                        {
                            id: 2,
                            title: '本周累计销量',
                            value: 3288,
                        },
                        {
                            id: 3,
                            title: '本月累计销量',
                            value: 14222,
                        },
                        {
                            id: 4,
                            title: '季度累计销量',
                            value: 41022,
                        },
                        {
                            id: 5,
                            title: '年度累计销量',
                            value: 176888,
                        },
                        {
                            id: 6,
                            title: '今日目标销量',
                            value: 820,
                        },
                    ],
                    completeObj: {
                        data: [45, 56],
                        shape: 'round',
                    },
                    rankList: {
                        data: [
                            {
                                name: '武汉市',
                                value: 1210,
                            },
                            {
                                name: '北京',
                                value: 1655,
                            },
                            {
                                name: '上海',
                                value: 1788,
                            },
                            {
                                name: '深圳',
                                value: 2100,
                            },
                            {
                                name: '广州',
                                value: 1577,
                            },
                            {
                                name: '成都',
                                value: 1625,
                            },
                            {
                                name: '厦门',
                                value: 857,
                            },
                            {
                                name: '郑州',
                                value: 1322,
                            },
                        ],
                        carousel: 'single',
                        unit: '辆',
                    },
                    intervalInstance: 0,
                    isShowChartVisible: false,
                    volumeInfo: {
                        id: null,
                        title: null,
                        value: null,
                    },
                });
                const getOverViewList = () => {
                    const iconList = [
                        'biaodan',
                        'putong',
                        'zhongduancanshuchaxun',
                        'shidu',
                        'fuwenbenkuang',
                        'fuwenben',
                        'jiliandongxuanzeqi',
                        'jinridaiban',
                        'gongju',
                    ];
                    state.annualPayment.forEach((annual, index) => {
                        annual.Icon = iconList[index];
                        annual.BgColor = randomHexColor();
                    });
                };
                //随机生成颜色
                const randomHexColor = () => {
                    return `#${Math.floor(Math.random() * 16777215)
                        .toString(16)
                        .padEnd(6, '0')}`;
                };
                onMounted(() => {
                    // getOverViewList();
                    initOverViewEchart();
                });
                //初始化今日业绩完成度echart
                const initOverViewEchart = () => {
                    var chartDom = document.getElementById('pond');
                    var myChart = echarts.init(chartDom);
                    var dataCake = [
                        { value: 2562, name: '优质', percentage: '15.86%' },
                        { value: 6000, name: '良好', percentage: '37.15%' },
                        { value: 2589, name: '一般', percentage: '16.03%' },
                        { value: 4000, name: '较差', percentage: '24.77%' },
                        { value: 1000, name: '恶劣', percentage: '6.19%' },
                    ];
                    demoOverViewChart.value = myChart;
                    var option = {
                        tooltip: {
                            trigger: 'item',
                        },
                        legend: {
                            orient: 'vertical',
                            left: '54%',
                            y: 'center',
 
                            formatter: function (name) {
                                let target, percentage;
                                for (let i = 0; i < dataCake.length; i++) {
                                    if (dataCake[i].name === name) {
                                        target = dataCake[i].value;
                                        percentage = dataCake[i].percentage;
                                    }
                                }
                                let arr = [name + ' ', ' ' + target + '人 ', ' ' + percentage];
                                return arr.join(' ');
                            },
                        },
                        grid: {
                            left: '25',
                        },
                        series: [
                            {
                                name: '今日业绩完成度',
                                type: 'pie',
                                radius: ['40%', '60%'],
                                center: ['30%', '50%'],
                                avoidLabelOverlap: false,
                                label: {
                                    show: false,
                                    position: 'center',
                                },
 
                                labelLine: {
                                    show: false,
                                },
                                data: dataCake,
                            },
                        ],
                    };
 
                    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'],
                        },
                        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;
                };
                const chartContainerResize = ({ width, height }) => {
                    demoOverViewChart.value.resize();
                    demoBusinessTrendsChart.value.resize();
                };
                return { state, handleDataItemClick, handleCloseChartVisible, chartContainerResize };
            },
        });
 
        App.component('Decoration3', Decoration3);
        elementResizeDirective(App);
        App.use(ElementPlus);
        App.mount('#overview');
    </script>
</html>