From 4e3b8155722b66e25df3c6fd42cc586b68dea391 Mon Sep 17 00:00:00 2001 From: zhoushihao <zsh19950802@163.com> Date: 星期五, 06 六月 2025 13:55:39 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- UI-Project/src/views/largescreendisplay/statistics.vue | 109 +++++++++++++++++++++++++++++++++++++++++------------- 1 files changed, 83 insertions(+), 26 deletions(-) diff --git a/UI-Project/src/views/largescreendisplay/statistics.vue b/UI-Project/src/views/largescreendisplay/statistics.vue index 892dead..98ce258 100644 --- a/UI-Project/src/views/largescreendisplay/statistics.vue +++ b/UI-Project/src/views/largescreendisplay/statistics.vue @@ -297,6 +297,8 @@ const chartRef = ref(null) const chartRef2 = ref(null) const showchart = ref(false) +const switchNoorAreaLeft = ref(true) +const switchNoorAreaRight = ref(true) const createchart = (productionVO) => { categories = productionVO.value.map(item => item.date); // 鑾峰彇鏃ユ湡浣滀负 x 杞� totalAreaOutOne = productionVO.value.map(item => item.totalAreaOutOne); @@ -312,7 +314,7 @@ totalAreaIn = productionVO.value.map(item => item.totalAreaIn); countOutOne = productionVO.value.map(item => item.countOutOne); //鍥捐〃 - nextTick() // 纭繚 DOM 鍔犺浇瀹屾垚 + nextTick() // 纭繚 DOM 鍔犺浇瀹屾垚 const chartDom = chartRef.value; if (!chartDom) { console.error('鍥捐〃瀹瑰櫒鏈壘鍒�'); @@ -321,6 +323,21 @@ if (!myChart) { myChart = echarts.init(chartDom); } + let loadOneData; + let loadTwoData; + let tempfontData; + if (switchNoorAreaLeft.value) { + loadOneData = countOutOne; + loadTwoData = countOutTwo; + tempfontData = countIn; + } else { + loadOneData = totalAreaOutOne; + loadTwoData = totalAreaOutTwo; + tempfontData = totalAreaIn; + } + + + const option = { title: { text: '' }, @@ -328,32 +345,46 @@ legend: { data: [ t('large.countOutOne'), - t('large.totalAreaOutOne'), + // t('large.totalAreaOutOne'), t('large.countOutTwo'), - t('large.totalAreaOutTwo'), + // t('large.totalAreaOutTwo'), t('large.countIn'), - t('large.totalAreaIn') + // t('large.totalAreaIn') ] }, - grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, - toolbox: { feature: { saveAsImage: {} } }, + grid: { top: '20%', left: '3%', right: '4%', bottom: '3%', containLabel: true }, + toolbox: { + feature: { + saveAsImage: {}, + myTool1: { + show: true, + title: t('large.switch'), + icon: 'path://M512 0C229.234 0 0 229.234 0 512s229.234 512 512 512 512-229.234 512-512S794.766 0 512 0z m0 960C264.602 960 64 759.398 64 512S264.602 64 512 64s448 200.602 448 448-200.602 448-448 448z m0-768c-176.448 0-320 143.552-320 320s143.552 320 320 320 320-143.552 320-320-143.552-320-320-320z', // 鍦嗗舰鎸夐挳鍥炬爣锛堝彲鎹級 + onclick: function () { + switchNoorAreaLeft.value = !switchNoorAreaLeft.value; + createchart(productionVO); + // customButtonClick(); // 璋冪敤浣犺嚜瀹氫箟鐨勬柟娉� + } + } + } + }, xAxis: { type: 'category', - boundaryGap: false, + boundaryGap: true, data: categories // 杩欐槸鏃ユ湡鏁版嵁 }, yAxis: { type: 'value' }, series: [ - { name: t('large.countOutOne'), type: 'bar', data: countOutOne }, - { name: t('large.totalAreaOutOne'), type: 'bar', data: totalAreaOutOne }, - { name: t('large.countOutTwo'), type: 'bar', data: countOutTwo }, - { name: t('large.totalAreaOutTwo'), type: 'bar', data: totalAreaOutTwo }, - { name: t('large.countIn'), type: 'bar', data: countIn }, - { name: t('large.totalAreaIn'), type: 'bar', data: totalAreaIn } + { name: t('large.countOutOne'), type: 'bar', data: loadOneData }, + // { name: t('large.totalAreaOutOne'), type: 'bar', data: totalAreaOutOne }, + { name: t('large.countOutTwo'), type: 'bar', data: loadTwoData }, + // { name: t('large.totalAreaOutTwo'), type: 'bar', data: totalAreaOutTwo }, + { name: t('large.countIn'), type: 'bar', data: tempfontData }, + // { name: t('large.totalAreaIn'), type: 'bar', data: totalAreaIn } ] }; - myChart.setOption(option); + myChart.setOption(option, true); const chartDom2 = chartRef2.value; @@ -368,38 +399,64 @@ // else { // myChart2.clear(); // } + let tempData; + let hollowOneData; + let hollowTwoData; + if (switchNoorAreaRight.value) { + tempData = countOut; + hollowOneData = hollowCountOutOne; + hollowTwoData = hollowCountOutTwo; + } else { + tempData = totalAreaOut; + hollowOneData = hollowTotalAreaOutOne; + hollowTwoData = hollowTotalAreaOutTwo; + } const option2 = { title: { text: '' }, tooltip: { trigger: 'axis' }, legend: { data: [ - t('large.totalAreaOut'), t('large.countOut'), - t('large.hollowTotalAreaOutOne'), + // t('large.totalAreaOut'), t('large.hollowCountOutOne'), + // t('large.hollowTotalAreaOutOne'), t('large.hollowCountOutTwo'), - t('large.hollowTotalAreaOutTwo') + // t('large.hollowTotalAreaOutTwo') ] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, - toolbox: { feature: { saveAsImage: {} } }, + toolbox: { + feature: { + saveAsImage: {}, + myTool1: { + show: true, + title: t('large.switch'), + icon: 'path://M512 0C229.234 0 0 229.234 0 512s229.234 512 512 512 512-229.234 512-512S794.766 0 512 0z m0 960C264.602 960 64 759.398 64 512S264.602 64 512 64s448 200.602 448 448-200.602 448-448 448z m0-768c-176.448 0-320 143.552-320 320s143.552 320 320 320 320-143.552 320-320-143.552-320-320-320z', // 鍦嗗舰鎸夐挳鍥炬爣锛堝彲鎹級 + onclick: function () { + switchNoorAreaRight.value = !switchNoorAreaRight.value; + createchart(productionVO); + // customButtonClick(); // 璋冪敤浣犺嚜瀹氫箟鐨勬柟娉� + } + } + } + }, xAxis: { type: 'category', - boundaryGap: false, + boundaryGap: true, data: categories // 杩欐槸鏃ユ湡鏁版嵁 }, yAxis: { type: 'value' }, series: [ - { name: t('large.totalAreaOut'), type: 'bar', data: totalAreaOut }, - { name: t('large.countOut'), type: 'bar', data: countOut }, - { name: t('large.hollowTotalAreaOutOne'), type: 'bar', data: hollowTotalAreaOutOne }, - { name: t('large.hollowCountOutOne'), type: 'bar', data: hollowCountOutOne }, - { name: t('large.hollowCountOutTwo'), type: 'bar', data: hollowCountOutTwo }, - { name: t('large.hollowTotalAreaOutTwo'), type: 'bar', data: hollowTotalAreaOutTwo } + // { name: t('large.totalAreaOut'), type: 'bar', data: tempData }, + { name: t('large.countOut'), type: 'bar', data: tempData }, + // { name: t('large.hollowTotalAreaOutOne'), type: 'bar', data: hollowOneData }, + { name: t('large.hollowCountOutOne'), type: 'bar', data: hollowOneData }, + // { name: t('large.hollowTotalAreaOutTwo'), type: 'bar', data: hollowTwoData }, + { name: t('large.hollowCountOutTwo'), type: 'bar', data: hollowTwoData } ] }; - myChart2.setOption(option2); + myChart2.setOption(option2, true); } -- Gitblit v1.8.0