diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/solar/c0.png b/ruoyi-ui/src/views/JiHeExpressway/images/solar/c0.png new file mode 100644 index 00000000..09678b10 Binary files /dev/null and b/ruoyi-ui/src/views/JiHeExpressway/images/solar/c0.png differ diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/solar/c1.png b/ruoyi-ui/src/views/JiHeExpressway/images/solar/c1.png new file mode 100644 index 00000000..85b253ec Binary files /dev/null and b/ruoyi-ui/src/views/JiHeExpressway/images/solar/c1.png differ diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/solar/c2.png b/ruoyi-ui/src/views/JiHeExpressway/images/solar/c2.png new file mode 100644 index 00000000..15dd24b4 Binary files /dev/null and b/ruoyi-ui/src/views/JiHeExpressway/images/solar/c2.png differ diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/solar/d0.png b/ruoyi-ui/src/views/JiHeExpressway/images/solar/d0.png new file mode 100644 index 00000000..84d425d6 Binary files /dev/null and b/ruoyi-ui/src/views/JiHeExpressway/images/solar/d0.png differ diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/solar/d1.png b/ruoyi-ui/src/views/JiHeExpressway/images/solar/d1.png new file mode 100644 index 00000000..fddf7541 Binary files /dev/null and b/ruoyi-ui/src/views/JiHeExpressway/images/solar/d1.png differ diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/solar/space.png b/ruoyi-ui/src/views/JiHeExpressway/images/solar/space.png new file mode 100644 index 00000000..8d86a616 Binary files /dev/null and b/ruoyi-ui/src/views/JiHeExpressway/images/solar/space.png differ diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/title/title-device.png b/ruoyi-ui/src/views/JiHeExpressway/images/title/title-device.png new file mode 100644 index 00000000..43bede59 Binary files /dev/null and b/ruoyi-ui/src/views/JiHeExpressway/images/title/title-device.png differ diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/title/title-import.png b/ruoyi-ui/src/views/JiHeExpressway/images/title/title-import.png new file mode 100644 index 00000000..6f66f2a1 Binary files /dev/null and b/ruoyi-ui/src/views/JiHeExpressway/images/title/title-import.png differ diff --git a/ruoyi-ui/src/views/JiHeExpressway/images/title/title-place.png b/ruoyi-ui/src/views/JiHeExpressway/images/title/title-place.png new file mode 100644 index 00000000..0824a176 Binary files /dev/null and b/ruoyi-ui/src/views/JiHeExpressway/images/title/title-place.png differ diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue index dd0c7c9a..cf6cae4e 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue @@ -28,13 +28,27 @@ @@ -68,6 +82,11 @@ import Button from "@screen/components/Buttons/Button.vue"; import Vue from "vue"; import BMapContainer from "./components/BMapContainer/index.vue"; import RadioGroup from "@screen/components/FormConfig/components/RadioGroup/index.vue"; + + +import Real from "@screen/pages/perception/trafficFlow/analysis/real/index.vue"; +import Fee from "@screen/pages/perception/trafficFlow/analysis/fee/index.vue"; + import Carbon from "./carbon"; export default { name: "Home", @@ -89,16 +108,20 @@ export default { HomeWeatherLayer, HomeTraffic, RadioGroup, - Carbon + Carbon, + Real, + Fee }, data() { return { selectedDevice: null, isGisCompleted: false, mapContainer:'BMapContainer', - jnValue:'1' + jnValue:'1', + footVisible:0 }; }, + provide() { return { // 2024-06-04更新地图========================================== @@ -112,11 +135,20 @@ export default { }; }, methods: { + footClick(v){ + this.footVisible = v; + if(v===1){ + setTimeout(() => { + this.$refs.refReal.myChart.resize(); + this.$refs.refFee.myChart.resize(); + }, 100); + } + }, debug(){ this.$refs.Thumbnail.debug() }, handleShrink(e) { - const translateXElement = e.target.parentElement.parentElement; + const translateXElement = e.target.parentElement.parentElement.parentElement; const result = (e.target.style.transform.match(/[-0-9]+/)?.[0] || -90) * -1; @@ -198,7 +230,6 @@ export default { height: 100%; } } - .footer { width: 100%; // margin: auto; @@ -212,15 +243,26 @@ export default { >div { pointer-events: all; } - + .foot-title-panel{ + display: flex; + } // position: fixed; // bottom: 0; + .footer-titleVis{ + border: 1px solid #2ad9fd !important; + span{ + color: #2ad9fd !important; + } + i{ + color: #2ad9fd !important; + } + } .footer-title { width: 164px; height: 36px; border-radius: 11px 11px 0px 0px; opacity: 1; - border: 1px solid #2ad9fd; + border: 1px solid #cccccc; display: flex; justify-content: center; align-items: center; @@ -229,17 +271,20 @@ export default { align-items: center; gap: 15px; + span { font-size: 16px; font-family: PingFang SC, PingFang SC; font-weight: 500; - color: #2ad9fd; + color: #cccccc; + cursor: pointer; } i { + color: #cccccc; transition: all 0.24s linear; - cursor: pointer; + cursor: s-resize; } // img { @@ -250,7 +295,20 @@ export default { // cursor: pointer; // } } - + .footer-contentFlow{ + display:flex; + div{ + flex:1; + height:100%; + gap: 20px; + .ftitle{ + color: white; + position: absolute; + text-align: center; + margin-left: 20vw; + } + } + } .footer-content { width: 100%; height: 200px; diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/solar/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/solar/index.vue index 8dce5b2b..95031459 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/solar/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/solar/index.vue @@ -13,7 +13,7 @@
-
重点数据
+
@@ -34,19 +34,19 @@
今日累计发电量
-
+
-
{{ titles2 }}度
+
{{ titles2 }}度
今日累计用电量
-
+
-
{{ titles3 }}度
+
{{ titles3 }}度
 @@ -54,15 +54,26 @@
-
设备统计
+
-
+ +
+
{{parseInt(device1/device0 * 100)}}%
+
{{device1}} / {{device0}}
+
设备故障率
+
-
{{device0}} 个
-
设备总数
-
{{device1}} 个
-
放电异常设备
+
+ +
放电异常设备
+
{{device1}}
+
+
+ +
设备总数
+
{{device0}}个
+
@@ -71,22 +82,22 @@
-
环境贡献
+
- -
{{titles4}} 吨
+ +
{{titles4}}吨
CO₂减排
- -
{{titles5}} 棵
+ +
{{titles5}}棵
等效植树
- -
{{titles6}} 吨
+ +
{{titles6}} 吨
节约标准煤
@@ -102,17 +113,17 @@
今日发电统计 - 总计：{{ chart1Total1 }}度 + 总计：{{ chart1Total1 }}度
今日用电统计 - 总计：{{ chart1Total1 }}度 + 总计：{{ chart1Total1 }}度
今日功率统计 - 总计：{{ chart1Total3 }}千瓦 + 总计：{{ chart1Total3 }}千瓦
@@ -244,11 +255,11 @@ export default { }).then(result => { if (result.code != 200) return; console.log('initTotal',result) - this.titles0 = result.data.theAccumulatedChargeOfTheYear.toString().padStart(9,'0'); // - this.titles1 = result.data.cumulativeElectricityConsumptionInTheYear.toString().padStart(9,'0'); - this.titles2 = result.data.dailyAccumulatedCharge; - this.titles3 = result.data.cumulativeElectricityConsumptionOnTheDay; - let _titles2p = (result.data.dailyAccumulatedCharge/10000) * 24 + this.titles0 = parseInt(result.data.theAccumulatedChargeOfTheYear).toString().padStart(9,'0'); // + this.titles1 = parseInt(result.data.cumulativeElectricityConsumptionInTheYear).toString().padStart(9,'0'); + this.titles2 = parseFloat(result.data.dailyAccumulatedCharge); + this.titles3 = parseFloat(result.data.cumulativeElectricityConsumptionOnTheDay); + let _titles2p = (result.data.dailyAccumulatedCharge/100) * 24 if(_titles2p > 24){ _titles2p = 24; } else if(_titles2p===0){ @@ -256,7 +267,7 @@ export default { } this.titles2p = parseInt(_titles2p); - let _titles3p = (result.data.cumulativeElectricityConsumptionOnTheDay/10000) * 24 + let _titles3p = (result.data.cumulativeElectricityConsumptionOnTheDay/100) * 24 if(_titles3p > 24){ _titles3p = 24; } else if(_titles3p===0){ @@ -304,12 +315,12 @@ export default { } ] } - if (!this.chartp1) { - this.chartp1 = echarts.init(document.getElementById("chartp1")); - let option1 = JSON.parse(JSON.stringify(_chartsOptions)); - this.chartp1.setOption(option1); - this.chartp1.resize(); - } + // if (!this.chartp1) { + // this.chartp1 = echarts.init(document.getElementById("chartp1")); + // let option1 = JSON.parse(JSON.stringify(_chartsOptions)); + // this.chartp1.setOption(option1); + // this.chartp1.resize(); + // } }) }, initChart(){ @@ -378,7 +389,31 @@ export default { { data: [], type: 'line', - smooth: true + showSymbol: false, + smooth: true, // 是否曲线 + lineStyle: { + color: "#2AD9FD", + }, + areaStyle: { + color: { + type: "linear", + x: 0, //右 + y: 0, //下 + x2: 0, //左 + y2: 1, //上 + colorStops: [ + { + offset: 0.1, + color: "#2AD9FD", // 0% 处的颜色 + }, + { + offset: 1, + opacity: 0.01, + color: "#2AD9FD01", // 100% 处的颜色 + }, + ], + }, + }, } ] } @@ -403,7 +438,29 @@ export default { this.chart1.setOption(option1); this.chart1.resize(); }) - + _chartsOptions.series[0].lineStyle = { + color: "#FFD15C", + } + _chartsOptions.series[0].areaStyle= { + color: { + type: "linear", + x: 0, //右 + y: 0, //下 + x2: 0, //左 + y2: 1, //上 + colorStops: [ + { + offset: 0.1, + color: "#FFD15C", // 0% 处的颜色 + }, + { + offset: 1, + opacity: 0.01, + color: "#FFD15C01", // 100% 处的颜色 + }, + ], + }, + }, this.chart2 = echarts.init(document.getElementById("charts2")); let option2 = JSON.parse(JSON.stringify(_chartsOptions)); request({ @@ -423,6 +480,30 @@ export default { this.chart2.setOption(option2); this.chart2.resize(); }) + + _chartsOptions.series[0].lineStyle = { + color: "#04BFAE", + } + _chartsOptions.series[0].areaStyle= { + color: { + type: "linear", + x: 0, //右 + y: 0, //下 + x2: 0, //左 + y2: 1, //上 + colorStops: [ + { + offset: 0.1, + color: "#04BFAE", // 0% 处的颜色 + }, + { + offset: 1, + opacity: 0.01, + color: "#04BFAE01", // 100% 处的颜色 + }, + ], + }, + }, // 发电功率 this.chart3 = echarts.init(document.getElementById("charts3")); let option3 = JSON.parse(JSON.stringify(_chartsOptions)); @@ -515,6 +596,37 @@ export default { display: flex; align-items: center; justify-content: space-between; + .title1 { + width: 220px; + height: 40px; + margin-top: 10px; + margin-left: 10px; + display: flex; + align-items: center; + background: url("~@screen/images/title/title-import.png") no-repeat; + background-size: 100% 100%; + } + .title4 { + width: 220px; + height: 40px; + margin-top: 10px; + margin-left: 10px; + display: flex; + align-items: center; + background: url("~@screen/images/title/title-place.png") no-repeat; + background-size: 100% 100%; + } + + .title3 { + width: 220px; + height: 40px; + margin-top: 10px; + margin-left: 10px; + display: flex; + align-items: center; + background: url("~@screen/images/title/title-device.png") no-repeat; + background-size: 100% 100%; + } .title2 { @@ -543,28 +655,62 @@ export default { .content-l-sec-content { display: flex; flex-direction: row; - + justify-content: center; + align-items: center; + height: 100%; .secleft { height: 180px; width: 250px; } - + .seclft{ + height: 130px; + flex: 1; + background:url('~@screen/images/solar/space.png') no-repeat; + margin-left:20px; + margin-top:50px; + display:flex; + flex-direction:column; + justify-content: flex-start; + align-items: center; + .seclft-s0{ + font-size: 25px; + font-weight:bold; + } + .seclft-s1{ + color:#83B8B8; + margin:0px 0px 32px 0px; + } + .seclft-s2{ + color:#83B8B8; + } + } .secright { display: flex; justify-content: center; align-items: center; flex-direction: column; - gap: 10px; - font-size: 14px; - + gap: 15px; + width:240px; .d1 { - font-size: 12px; - - span { - font-size: 30px; - font-weight: bold; - color: #d3d51c; + display:flex; + justify-content: center; + align-items: center; + .d1label{ + font-size:16px; + margin:0px 5px; + } + .d1Num{ + font-size: 20px; + font-weight:bold; + font-family: YouSheBiaoTiHei; } + // font-size: 12px; + + // span { + // font-size: 30px; + // font-weight: bold; + // color: #d3d51c; + // } } } } @@ -583,7 +729,8 @@ export default { .content-k1 { display: flex; flex-direction: row; - + justify-content: space-between; + width:100%; .content-ll { flex: 1; width: 200px; @@ -597,7 +744,7 @@ export default { gap: 3px; >div { - background-color: #9ff501; + width: 5px; height: 17px; } @@ -608,13 +755,16 @@ export default { .content-kk { display: flex; flex-direction: row; - margin-left: 10px; + margin-right: 3px; gap: 3px; >div { - border: 1px solid #0c7f8a; - padding: 2px 5px; + // border: 1px solid #0c7f8a; + background:#1f3c4d; + color:#3FD7FE; + padding: 2px 6px; + font-weight:bold; } } @@ -629,7 +779,7 @@ export default { .content-l-third-content { display: flex; width: 100%; - margin: 20px 20px 20px 10px; + margin: 20px 10px 20px 0px; .thirditem { flex: 1; @@ -638,12 +788,15 @@ export default { justify-content: center; align-items: center; gap: 10px; - font-size: 14px; - + font-size: 18px; + .thirdNum{ + margin-top:-100px; + margin-bottom: 30px; + font-weight:bold; + } img { - width: 40px; - height: 40px; - margin-bottom: 10px; + width: 100px; + height: 129px; } span { diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/analysis/fee/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/analysis/fee/charts.js index 485cbbb4..2a3e667f 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/analysis/fee/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/analysis/fee/charts.js @@ -3,6 +3,7 @@ var options = { color:['#6DBBFB','#E18B3B'], tooltip: { show: true, + confine:true, trigger: "axis", formatter: (params) => { console.log(params) diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/analysis/fee/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/analysis/fee/index.vue index 701b3b9d..263ba1be 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/analysis/fee/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/analysis/fee/index.vue @@ -1,7 +1,7 @@ @@ -14,6 +14,9 @@ import { exportFile } from "@screen/utils/common"; export default { name: "Flowstate", + props:{ + source:String + }, components: { }, data() { diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/analysis/real/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/analysis/real/charts.js index d5367c47..36de7582 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/analysis/real/charts.js +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/analysis/real/charts.js @@ -2,6 +2,7 @@ import * as echarts from "echarts"; var options = { tooltip: { show: true, + confine:true, trigger: "axis", formatter: (params) => { diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/analysis/real/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/analysis/real/index.vue index fd2ab8fb..582d8016 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/analysis/real/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/analysis/real/index.vue @@ -1,7 +1,7 @@ @@ -15,6 +15,9 @@ import { exportFile } from "@screen/utils/common"; export default { name: "Flowstate", + props:{ + source:String + }, components: { }, data() {