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="/customer_list/ch/ai_html/views/demo/js/tailwind.js"></script>
        <script src="/customer_list/ch/ai_html/views/demo/js/vue.global.js"></script>
        <script src="/customer_list/ch/ai_html/views/demo/js/datav.umd.js"></script>
        <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>
        <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" />
        <script src="/customer_list/ch/ai_html/views/demo/js/customInstruction.js"></script>
        <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>
        <div class="w-full h-full bg-[#f2f4f8]" id="workOrder">
            <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}}<span class="text-[13px]"> {{' '+item.unit}}</span>
                        </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 id="inspectionChart" class="w-full h-[280px]" v-resize="chartContainerResize"></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="salesRankChart" class="w-full h-[280px]"></div>
                        </div>
                    </div>
                </div>
            </div>
            <el-dialog
                v-model="state.isShowChartVisible"
                :title="state.inspectionInfo.title"
                width="50%"
                class="px-[unset] py-[unset]"
                :before-close="handleCloseChartVisible"
            >
                <div id="inspectionTrends" class="w-full h-[500px]"></div>
            </el-dialog>
        </div>
    </body>
    <script>
        const { createApp, onMounted, ref, reactive, nextTick } = Vue;
        const { Decoration3 } = DataV;
        const demoOverViewChart = ref(null);
        const inspectionChart = ref(null);
        const salesRankRef = ref(null);
        const inspectionTrendsChart = ref(null);
        const App = createApp({
            setup() {
                let state = reactive({
                    dataList: [
                        {
                            title: '管线总长',
                            value: 755,
                            config: {
                                number: [755],
                                toFixed: 0,
                                content: '{nt}',
                                textAlign: 'left',
                                style: {
                                    fontSize: 24,
                                },
                            },
                            unit: '米',
                        },
                        {
                            title: '压力表数',
                            value: 3288,
                            config: {
                                number: [3288],
                                toFixed: 0,
                                content: '{nt}',
                                textAlign: 'left',
                                style: {
                                    fontSize: 24,
                                },
                            },
                            unit: '个',
                        },
                        {
                            title: '流量计数',
                            value: 14222,
                            config: {
                                number: [14222],
                                toFixed: 0,
                                content: '{nt}',
                                textAlign: 'left',
                                style: {
                                    fontSize: 24,
                                },
                            },
                            unit: '个',
                        },
                        {
                            title: '户表数',
                            value: 41022,
                            config: {
                                number: [41022],
                                toFixed: 0,
                                content: '{nt}',
                                textAlign: 'left',
                                style: {
                                    fontSize: 24,
                                },
                            },
                            unit: '个',
                        },
                        {
                            title: '水质仪数',
                            value: 176888,
                            config: {
                                number: [176888],
                                toFixed: 0,
                                content: '{nt}',
                                textAlign: 'left',
                                style: {
                                    fontSize: 24,
                                },
                            },
                            unit: '个',
                        },
                        {
                            title: '阀门数',
                            value: 820,
                            config: {
                                number: [820],
                                toFixed: 0,
                                content: '{nt}',
                                textAlign: 'left',
                                style: {
                                    fontSize: 24,
                                },
                            },
                            unit: '个',
                        },
                    ],
                    isShowChartVisible: false,
                    inspectionInfo: {
                        id: null,
                        title: null,
                        value: null,
                    },
                });
                const getOverViewList = () => {
                    const iconList = [
                        'biaodan',
                        'putong',
                        'zhongduancanshuchaxun',
                        'shidu',
                        'fuwenbenkuang',
                        'fuwenben',
                        'jiliandongxuanzeqi',
                        'jinridaiban',
                        'gongju',
                    ];
                    state.dataList.forEach((annual, index) => {
                        annual.Icon = iconList[index];
                        annual.BgColor = randomHexColor();
                    });
                };
                //随机生成颜色
                const randomHexColor = () => {
                    return `#${Math.floor(Math.random() * 16777215)
                        .toString(16)
                        .padEnd(6, '0')}`;
                };
                onMounted(() => {
                    initInspectionChart();
                    drawSalesRanking();
                });
                //初始化巡检图表
                const initInspectionChart = () => {
                    var chartDom = document.getElementById('inspectionChart');
                    var myInspectChart = echarts.init(chartDom);
                    inspectionChart.value = myInspectChart;
                    var option = {
                        legend: {},
                        tooltip: {},
                        grid: {
                            left: '2%', // 调整左边距
                            right: '5%', // 调整右边距
                            bottom: '6%',
                            containLabel: true, // 确保标签和轴标题被包含在容器内
                        },
                        dataset: {
                            source: [
                                ['product', '循环完成率', '维保完成率'],
                                ['1月', 43.3, 85.8],
                                ['2月', 83.1, 73.4],
                                ['3月', 86.4, 65.2],
                                ['4月', 72.4, 53.9],
                                ['5月', 77.0, 39.1],
                                ['6月', 68.2, 56.2],
                                ['7月', 72.1, 64.5],
                                ['8月', 76.5, 70.8],
                                ['9月', 74.1, 72.4],
                                ['10月', 75.3, 71.7],
                                ['11月', 70.9, 74.2],
                                ['12月', 66.8, 75.2],
                            ],
                        },
                        xAxis: { type: 'category', name: '月份', nameGap: 10 },
                        yAxis: {
                            name: '单位: %',
                        },
                        series: [{ type: 'bar' }, { type: 'bar' }],
                    };
                    option && myInspectChart.setOption(option);
                };
                //初始化弹窗echart
                const initInspectionTrendsEchart = () => {
                    var chartDom = document.getElementById('inspectionTrends');
                    var businessTrendsChart = echarts.init(chartDom);
                    inspectionTrendsChart.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 drawSalesRanking = () => {
                    var chartDom = document.getElementById('salesRankChart');
                    var salesRankingElement = echarts.init(chartDom);
                    salesRankRef.value = salesRankingElement;
                    const option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow',
                            },
                        },
                        grid: {
                            left: '2%', // 调整左边距
                            right: '5%', // 调整右边距
                            top: '2%', // 调整下边距
                            bottom: '15%',
                            containLabel: true, // 确保标签和轴标题被包含在容器内
                        },
                        xAxis: {
                            type: 'value',
                            boundaryGap: [0, 0.01],
                            axisLine: {
                                show: false, // 不显示横坐标轴线
                            },
                            axisTick: {
                                show: false, // 不显示刻度线
                            },
                            splitLine: {
                                show: false, // 不显示x轴网格线
                            },
                        },
                        yAxis: {
                            type: 'category',
                            data: ['闵行区', '浦东区', '徐汇区'], // 示例数据
                            axisLine: {
                                show: false, // 不显示横坐标轴线
                            },
                            axisTick: {
                                show: false, // 不显示刻度线
                            },
                            splitLine: {
                                show: false, // 不显示y轴网格线
                            },
                            axisLabel: {
                                rich: {
                                    iconStyle: {
                                        fontSize: 20, // 设置图标的字体大小为20
                                    },
                                    nameStyle: {
                                        // 定义名字的样式
                                        fontSize: 12, // 设置名字的字体大小为12，或者您希望的任何大小
                                    },
                                },
                                formatter: function (value, index) {
                                    // 根据index或value来决定显示哪个排名的图标
                                    const rankIcons = {
                                        2: '{iconStyle|🥇}',
                                        1: '{iconStyle|🥈}',
                                        0: '{iconStyle|🥉}',
                                    };
                                    return `${rankIcons[index]} {nameStyle|${value}}`;
                                },
                            },
                        },
                        series: [
                            {
                                name: '受理量',
                                type: 'bar',
                                data: [9, 10, 21], // 示例数据
                                barWidth: '30%', // 调整柱子宽度
                                itemStyle: {
                                    borderRadius: [0, 5, 5, 0], // 只有右侧圆角
                                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                        // 设置渐变色，方向也要调整为横向
                                        { offset: 0, color: '#bdd1f6' },
                                        { offset: 1, color: '#4282ff' },
                                    ]),
                                },
                                label: {
                                    show: true, // 显示标签
                                    position: 'right', // 标签位置在顶部
                                    formatter: '{c}万', // 自定义显示的内容，{c}是指当前数据点的值
                                },
                            },
                        ],
                    };
                    salesRankingElement.setOption(option);
                };
                //点击数据项弹窗
                const handleDataItemClick = (item) => {
                    state.inspectionInfo = item;
                    nextTick(() => {
                        initInspectionTrendsEchart();
                    });
 
                    state.isShowChartVisible = true;
                };
                const chartContainerResize = ({ width, height }) => {
                    inspectionChart.value.resize();
                    salesRankRef.value.resize();
                };
                //关闭弹窗
                const handleCloseChartVisible = () => {
                    state.isShowChartVisible = false;
                };
                return { state, handleDataItemClick, handleCloseChartVisible, chartContainerResize };
            },
        });
 
        App.component('Decoration3', Decoration3);
        elementResizeDirective(App);
        App.use(ElementPlus);
        App.mount('#workOrder');
    </script>
</html>