WI/Web.V1.0.git

yangyin

2024-07-18 577052107e623fd950584c0dab91493ff6dd631e

feat: 新增官网页面

已修改2个文件

已添加2个文件

	customer_list/ch/ai_html/views/demo/html/Overview.html	20 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	customer_list/ch/ai_html/views/demo/html/WorkOrder.html	322 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/views/project/ch/demo/Overview.html	20 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/views/project/ch/demo/WorkOrder.html	322 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 customer_list/ch/ai_html/views/demo/html/Overview.html

@@ -18,18 +18,6 @@

<body>
    <div class="w-full h-full bg-[#f2f4f8]" id="overview">
        <!-- <div class="w-full h-[40px] flex items-center">å¹´åº¦ç¼´è´¹æåµ</div>
            <div class="h-full">
                <div class="w-[310px] flex flex-wrap justify-between h-[220px]">
                    <div v-for="item in state.annualPayment" :key="item" class="w-[50%] h-[33%] flex items-center">
                        <div :class="['iconfont icon-' + item.Icon]" :style="`color:${item.BgColor};font-size:${36}px`"></div>
                        <div class="ml-[10px]">
                            <span>{{ item.Value }} <span>{{ item.Unit }}</span></span>
                            <p>{{ item.Name }}</p>
                        </div>
                    </div>
                </div>
            </div> -->
        <div class="screen-top-center">
            <div class="top-center-data">
                <div class="data-item" v-for="(item, index) in state.dataList">
@@ -305,7 +293,9 @@
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'right',
                        left: '60%',
                        y: 'center',

                        formatter: function (name) {
                            let target, percentage;
                            for (let i = 0; i < dataCake.length; i++) {
@@ -317,6 +307,9 @@
                            let arr = [name + ' ', ' ' + target + 'äºº ', ' ' + percentage];
                            return arr.join(' ');
                        },
                    },
                    grid: {
                        left: '45'
                    },
                    // title: {
                    //     text: '76%',//ä¸»æ é¢ææ¬
@@ -340,6 +333,7 @@
                            name: 'ä»æ¥ä¸ç»©å®æåº¦',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            center: ['30%', '50%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,

 customer_list/ch/ai_html/views/demo/html/WorkOrder.html

¶Ô±ÈÐÂÎÄ¼þ
@@ -0,0 +1,322 @@
<!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>
    <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" />
</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">{{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="iconfont 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]"></div>

                </div>
                <div class="chart-item">
                    <div class="screen-top-header flex-l">
                        <div class="header-left flex-c">
                            <i class="iconfont 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">
                        <div id="salesRankChart" class="w-full h-[280px]"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    const { createApp, onMounted, ref, reactive } = Vue;
    const { Decoration3 } = DataV;
    const demoOverViewChart = ref(null);
    const inspectionChart = ref(null);
    const salesRankRef = 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: 'ä¸ª',
                    },
                ],
            });
            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(() => {
                // getOverViewList();
                window.addEventListener('resize', () => {
                    inspectionChart.value.resize();
                    salesRankRef.value.resize();
                });
                initInspectionChart()
                drawSalesRanking();
            });
            //åå§åå·¡æ£å¾è¡¨
            const initInspectionChart = () => {
                var chartDom = document.getElementById('inspectionChart');
                var myInspectChart = echarts.init(chartDom);
                inspectionChart.value = myInspectChart;
                var option = {
                    legend: {},
                    tooltip: {},
                    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);
            }
            // ç»å¶æ¨ªåæ±ç¶å¾æè¡æ¦
            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%', // è°æ´ä¸è¾¹è·

                        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);
            };

            return { state };
        },
    });

    App.component('Decoration3', Decoration3);
    App.use(ElementPlus);
    App.mount('#workOrder');
</script>

</html>

 src/views/project/ch/demo/Overview.html

@@ -18,18 +18,6 @@

<body>
    <div class="w-full h-full bg-[#f2f4f8]" id="overview">
        <!-- <div class="w-full h-[40px] flex items-center">å¹´åº¦ç¼´è´¹æåµ</div>
            <div class="h-full">
                <div class="w-[310px] flex flex-wrap justify-between h-[220px]">
                    <div v-for="item in state.annualPayment" :key="item" class="w-[50%] h-[33%] flex items-center">
                        <div :class="['iconfont icon-' + item.Icon]" :style="`color:${item.BgColor};font-size:${36}px`"></div>
                        <div class="ml-[10px]">
                            <span>{{ item.Value }} <span>{{ item.Unit }}</span></span>
                            <p>{{ item.Name }}</p>
                        </div>
                    </div>
                </div>
            </div> -->
        <div class="screen-top-center">
            <div class="top-center-data">
                <div class="data-item" v-for="(item, index) in state.dataList">
@@ -305,7 +293,9 @@
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'right',
                        left: '60%',
                        y: 'center',

                        formatter: function (name) {
                            let target, percentage;
                            for (let i = 0; i < dataCake.length; i++) {
@@ -317,6 +307,9 @@
                            let arr = [name + ' ', ' ' + target + 'äºº ', ' ' + percentage];
                            return arr.join(' ');
                        },
                    },
                    grid: {
                        left: '45'
                    },
                    // title: {
                    //     text: '76%',//ä¸»æ é¢ææ¬
@@ -340,6 +333,7 @@
                            name: 'ä»æ¥ä¸ç»©å®æåº¦',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            center: ['30%', '50%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,

 src/views/project/ch/demo/WorkOrder.html

¶Ô±ÈÐÂÎÄ¼þ
@@ -0,0 +1,322 @@
<!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" />
    <link href="/customer_list/ch/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css" />
</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">{{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="iconfont 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]"></div>

                </div>
                <div class="chart-item">
                    <div class="screen-top-header flex-l">
                        <div class="header-left flex-c">
                            <i class="iconfont 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">
                        <div id="salesRankChart" class="w-full h-[280px]"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    const { createApp, onMounted, ref, reactive } = Vue;
    const { Decoration3 } = DataV;
    const demoOverViewChart = ref(null);
    const inspectionChart = ref(null);
    const salesRankRef = 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: 'ä¸ª',
                    },
                ],
            });
            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(() => {
                // getOverViewList();
                window.addEventListener('resize', () => {
                    inspectionChart.value.resize();
                    salesRankRef.value.resize();
                });
                initInspectionChart()
                drawSalesRanking();
            });
            //åå§åå·¡æ£å¾è¡¨
            const initInspectionChart = () => {
                var chartDom = document.getElementById('inspectionChart');
                var myInspectChart = echarts.init(chartDom);
                inspectionChart.value = myInspectChart;
                var option = {
                    legend: {},
                    tooltip: {},
                    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);
            }
            // ç»å¶æ¨ªåæ±ç¶å¾æè¡æ¦
            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%', // è°æ´ä¸è¾¹è·

                        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);
            };

            return { state };
        },
    });

    App.component('Decoration3', Decoration3);
    App.use(ElementPlus);
    App.mount('#workOrder');
</script>

</html>

			@@ -18,18 +18,6 @@

			<body>
			<div class="w-full h-full bg-[#f2f4f8]" id="overview">
			<!-- <div class="w-full h-[40px] flex items-center">å¹´åº¦ç¼´è´¹æåµ</div>
			<div class="h-full">
			<div class="w-[310px] flex flex-wrap justify-between h-[220px]">
			<div v-for="item in state.annualPayment" :key="item" class="w-[50%] h-[33%] flex items-center">
			<div :class="['iconfont icon-' + item.Icon]" :style="`color:${item.BgColor};font-size:${36}px`"></div>
			<div class="ml-[10px]">
			<span>{{ item.Value }} <span>{{ item.Unit }}</span></span>
			<p>{{ item.Name }}</p>
			</div>
			</div>
			</div>
			</div> -->
			<div class="screen-top-center">
			<div class="top-center-data">
			<div class="data-item" v-for="(item, index) in state.dataList">
			@@ -305,7 +293,9 @@
			},
			legend: {
			orient: 'vertical',
			left: 'right',
			left: '60%',
			y: 'center',

			formatter: function (name) {
			let target, percentage;
			for (let i = 0; i < dataCake.length; i++) {
			@@ -317,6 +307,9 @@
			let arr = [name + ' ', ' ' + target + 'äºº ', ' ' + percentage];
			return arr.join(' ');
			},
			},
			grid: {
			left: '45'
			},
			// title: {
			// text: '76%',//ä¸»æ é¢ææ¬
			@@ -340,6 +333,7 @@
			name: 'ä»æ¥ä¸ç»©å®æåº¦',
			type: 'pie',
			radius: ['40%', '70%'],
			center: ['30%', '50%'],
			avoidLabelOverlap: false,
			label: {
			show: false,

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,322 @@
			<!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>
			<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" />
			</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">{{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="iconfont 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]"></div>

			</div>
			<div class="chart-item">
			<div class="screen-top-header flex-l">
			<div class="header-left flex-c">
			<i class="iconfont 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">
			<div id="salesRankChart" class="w-full h-[280px]"></div>
			</div>
			</div>
			</div>
			</div>
			</div>
			</body>
			<script>
			const { createApp, onMounted, ref, reactive } = Vue;
			const { Decoration3 } = DataV;
			const demoOverViewChart = ref(null);
			const inspectionChart = ref(null);
			const salesRankRef = 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: 'ä¸ª',
			},
			],
			});
			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(() => {
			// getOverViewList();
			window.addEventListener('resize', () => {
			inspectionChart.value.resize();
			salesRankRef.value.resize();
			});
			initInspectionChart()
			drawSalesRanking();
			});
			//åå§åå·¡æ£å¾è¡¨
			const initInspectionChart = () => {
			var chartDom = document.getElementById('inspectionChart');
			var myInspectChart = echarts.init(chartDom);
			inspectionChart.value = myInspectChart;
			var option = {
			legend: {},
			tooltip: {},
			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);
			}
			// ç»å¶æ¨ªåæ±ç¶å¾æè¡æ¦
			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%', // è°æ´ä¸è¾¹è·

			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);
			};

			return { state };
			},
			});

			App.component('Decoration3', Decoration3);
			App.use(ElementPlus);
			App.mount('#workOrder');
			</script>

			</html>