From 432805b9b09c7c2ebab17b42d3f861b583970554 Mon Sep 17 00:00:00 2001 From: zhangzhang <1747194829@qq.com> Date: Mon, 19 Feb 2024 14:22:44 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/dayTotal/index.vue | 49 +---- .../components/eventSource/assets/charts.js | 37 ++-- .../components/eventSource/index.vue | 186 +++++++++--------- .../components/railway/index.vue | 62 +----- .../components/railwayDay/assets/charts.js | 4 +- .../components/railwayDay/index.vue | 6 +- 6 files changed, 131 insertions(+), 213 deletions(-) diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/index.vue index 065a5262..fc5d25f1 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/dayTotal/index.vue @@ -2,7 +2,8 @@
-
+ +
@@ -39,54 +40,10 @@ export default { getDailyCumulative().then(res => { if (res.code == 200) { + this.dataList = res.data let data = res.data; let timer = []; let number = []; - //默认数值 - if(data.length < 1){ - data = [ - { - time: '00:00', - number: 800 - }, - { - time: '02:00', - number: 1000 - }, - { - time: '04:00', - number: 800 - }, - { - time: '06:00', - number: 700 - }, - { - time: '08:00', - number: 400 - }, - { - time: '10:00', - number: 1000 - }, - { - time: '12:00', - number: 800 - }, - { - time: '14:00', - number: 500 - }, - { - time: '16:00', - number: 800 - }, - { - time: '18:00', - number: 500 - }, - ] - } data.forEach((it) => { timer.push(moment(it.time).format('HH:mm')); diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js index 3d1cfac4..e07369e8 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/assets/charts.js @@ -119,21 +119,7 @@ var options = { itemGap: 15, // 设置legend的间距 itemWidth: 10, // 设置宽度 itemHeight: 15, // 设置高度 - textStyle: { - fontSize: 12, - color: "#fff", - rich: { - a: { - fontSize: 12, - }, - b: { - fontSize: 12, - padding: 5, - marginLeft: 5, - color: "#37E7FF", - }, - }, - }, + itemStyle: { borderColor: "transparent", }, @@ -147,11 +133,28 @@ var options = { } } var arr = [ - "{a|" + name + (name.trim().length == 4 ? "}" : "} "), - "{b|" + (target * 100).toFixed(0) + "%}", + "{ast|" + name + "}", + "{bst|" + (target * 100).toFixed(0) + "%}", ]; return arr.join(" "); }, + textStyle: { + fontSize: 12, + color: "#fff", + rich: { + ast: { + align: "left", + fontSize: 12, + width: 65, + }, + bst: { + align: "left", + fontSize: 12, + marginLeft: 20, + color: "#37E7FF", + }, + }, + }, }, series: [ { diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue index cbdf451a..76be9cca 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/eventSource/index.vue @@ -59,103 +59,103 @@ export default { let data = res.data.warningSourceList; let total = res.data.total; - if (data.length > 0) { - let chartData = [ - { - average: 0, - name: '视频AI ', - percent: 0.3 - }, - { - average: 0, - name: '雷达识别', - percent: 0.2 - }, { - average: 0, - name: '锥桶', - percent: 0.1 - }, { - average: 0, - name: '护栏碰撞', - percent: 0.2 - }, { - average: 0, - name: '扫码报警', - percent: 0.1 - }, { - average: 0, - name: '非机预警', - percent: 0.1 - }, - ] - data.forEach(it => { - if (it.warningSource == 1) { - chartData[0].average += it.number; - } - if (it.warningSource == 2) { - chartData[1].average += it.number; - } - if (it.warningSource == 3) { - chartData[2].average += it.number; - } - if (it.warningSource == 4) { - chartData[3].average += it.number; - } - if (it.warningSource == 5) { - chartData[4].average += it.number; - } - if (it.warningSource == 6) { - chartData[5].average += it.number; - } - // total ++; - // drawRoundRect(context, 231, 37 + (index * 27), 138, 20, 12, gr); + // if (data.length > 0) { + let chartData = [ + { + average: 0, + name: '视频AI', + percent: 0.3 + }, + { + average: 0, + name: '雷达识别', + percent: 0.2 + }, { + average: 0, + name: '锥桶', + percent: 0.1 + }, { + average: 0, + name: '护栏碰撞', + percent: 0.2 + }, { + average: 0, + name: '扫码报警', + percent: 0.1 + }, { + average: 0, + name: '非机预警', + percent: 0.1 + }, + ] + data.forEach(it => { + if (it.warningSource == 1) { + chartData[0].average += it.number; + } + if (it.warningSource == 2) { + chartData[1].average += it.number; + } + if (it.warningSource == 3) { + chartData[2].average += it.number; + } + if (it.warningSource == 4) { + chartData[3].average += it.number; + } + if (it.warningSource == 5) { + chartData[4].average += it.number; + } + if (it.warningSource == 6) { + chartData[5].average += it.number; + } + // total ++; + // drawRoundRect(context, 231, 37 + (index * 27), 138, 20, 12, gr); + }) + // console.log('data',chartData) + let colorList = ['#006EDF', '#00FF00', '#FFC30D', '#FF8400', '#1DA7FF', '#2967EA']; + let lengData = []; + let mainData = []; + + for (let i = 0; i < chartData.length; i++) { + let it = chartData[i]; + lengData.push({ + name: it.name, + color: colorList[i], + value: it.average, + }); + mainData.push({ + name: it.name, + color: colorList[i], + value: it.average, + percent: (it.average / total) || 0 }) - // console.log('data',chartData) - let colorList = ['#006EDF', '#00FF00', '#FFC30D', '#FF8400', '#1DA7FF', '#2967EA']; - let lengData = []; - let mainData = []; - - for (let i = 0; i < chartData.length; i++) { - let it = chartData[i]; - lengData.push({ - name: it.name, - color: colorList[i], - value: it.average, - }); - mainData.push({ - name: it.name, - color: colorList[i], - value: it.average, - percent: it.average / total - }) + } + window.mainData = mainData; + // console.log('mainData', mainData) + chartsStatistics.title.text = `{tb|${total}}`; + chartsStatistics.title.subtext = "{zb|总数}"; + + chartsStatistics.legend.data = lengData; + chartsStatistics.series[0].data = mainData; + + myChart.on('mouseover', (params) => { + // console.log('params',params) + if (params.componentType == 'graphic') { + return } - window.mainData = mainData; - // console.log('mainData', mainData) + chartsStatistics.title.text = `{tb|${params.percent}%}`; + chartsStatistics.title.subtext = `{zb|${params.data.name}}`; + // chartsStatistics.title.left = "22%"; + myChart.setOption(chartsStatistics); + }) + + // 用户鼠标移出时，重新开始自动切换 + myChart.on('mouseout', (params) => { chartsStatistics.title.text = `{tb|${total}}`; chartsStatistics.title.subtext = "{zb|总数}"; - - chartsStatistics.legend.data = lengData; - chartsStatistics.series[0].data = mainData; - - myChart.on('mouseover', (params) => { - // console.log('params',params) - if (params.componentType == 'graphic') { - return - } - chartsStatistics.title.text = `{tb|${params.percent}%}`; - chartsStatistics.title.subtext = `{zb|${params.data.name}}`; - // chartsStatistics.title.left = "22%"; - myChart.setOption(chartsStatistics); - }) - - // 用户鼠标移出时，重新开始自动切换 - myChart.on('mouseout', (params) => { - chartsStatistics.title.text = `{tb|${total}}`; - chartsStatistics.title.subtext = "{zb|总数}"; - // chartsStatistics.title.left = "25%"; - myChart.setOption(chartsStatistics); - }) - } + // chartsStatistics.title.left = "25%"; + myChart.setOption(chartsStatistics); + }) + // } } diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue index 2dba7636..997a2604 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railway/index.vue @@ -6,7 +6,9 @@
路段车流量Top10
断面交通量Top10
--> -
+ +
+ @@ -23,7 +25,9 @@ export default { WgtTitle, }, data() { - return {}; + return { + dataList: [] + }; }, mounted() { @@ -40,51 +44,6 @@ export default { let texts = []; let datas = []; - //默认显示数值 - if (data.length <= 0) { - data = [ - { - sectionName: "华山北枢纽-济南虚", - number: 32774, - }, - { - sectionName: "东客站虚-华山北枢纽", - number: 30067, - }, - { - sectionName: "小许家枢纽-东客站虚", - number: 30057, - }, - { - sectionName: "临沂枣园枢纽-临沂虚", - number: 28774, - }, - { - sectionName: "华山北枢纽-济南虚", - number: 26021, - }, - { - sectionName: "华山北枢纽-济南虚", - number: 24061, - }, - { - sectionName: "华山北枢纽-济南虚", - number: 20150, - }, - { - sectionName: "华山北枢纽-济南虚", - number: 20140, - }, - { - sectionName: "华山北枢纽-济南虚", - number: 20050, - }, - { - sectionName: "华山北枢纽-济南虚", - number: 20010, - }, - ]; - } data.forEach((it) => { texts.push(it.sectionName); datas.push(it.number); @@ -99,7 +58,7 @@ export default { }); }); }, - created() {}, + created() { }, methods: {}, }; @@ -116,12 +75,9 @@ export default { border-radius: 5px 5px 5px 5px; opacity: 1; border: 1px solid; - border-image: linear-gradient( - 360deg, + border-image: linear-gradient(360deg, rgba(55, 231, 255, 0.3), - rgba(55, 231, 255, 0) - ) - 1 1; + rgba(55, 231, 255, 0)) 1 1; display: flex; justify-content: flex-start; align-items: center; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/assets/charts.js index d7f83e96..f305a9a9 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/assets/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/assets/charts.js @@ -69,7 +69,7 @@ var options = { }, xAxis: { type: "category", - data: nameList, + data: [], axisTick: { show: false, //隐藏X轴刻度 }, @@ -121,7 +121,7 @@ var options = { series: [ { type: "bar", - data: dataList, + data: [], z: 4, itemStyle: { color: { diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/index.vue index 460c0827..47044581 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/eventDetection/components/railwayDay/index.vue @@ -2,7 +2,8 @@
-
+ +
@@ -21,7 +22,7 @@ export default { }, data() { return { - + dataList: [] } }, @@ -37,6 +38,7 @@ export default { var myChart = echarts.init(document.getElementById('railwayDay')); getSectionPerceivedNumber().then((res) => { if (res.code == 200) { + dataList = res.data; let data = res.data; if (data.length > 0) { let texts = [];