202107211437

src/api/Overview/index.js

@@ -64,5 +64,23 @@ export default {
             // data: data
         })
     },
+    ///获取需量趋势 -> 需量趋势图
+    demandIco(params) {
+        return request({
+            url: `htAnalogData/demandIco`,
+            method: 'GET',
+            params: params
+            // data: data
+        })
+    },
+    ///获取历史趋势 -> 历史记录电流电压
+    electricIco(params) {
+        return request({
+            url: `htAnalogData/electricIco`,
+            method: 'GET',
+            params: params
+            // data: data
+        })
+    },
     
 }

src/views/site/Overview.vue

@@ -85,9 +85,9 @@
         <div class="column">
           <div class="panel currentUsage" style="height: 100%">
             <div class="filterSec">
-              <select name="" id="">
-                <option value="11">日</option>
-                <option value="22">月</option>
+              <select ref="select_filterSec" @change="select_filterSec">
+                <option :value="1">日</option>
+                <option :value="2">月</option>
               </select>
             </div>
             <h2>历史趋势</h2>
@@ -96,13 +96,10 @@
               <li @click="msg = 1" :class="{ active: msg === 1 }">电压</li>
             </ul>
             <hist-trend-chart
-              v-if="msg === 0"
+              :msg="msg"
+              :filterSec_value="filterSec_value"
               style="width: 100%"
             ></hist-trend-chart>
-            <hist-trend-chart2
-              v-if="msg === 1"
-              style="width: 100%"
-            ></hist-trend-chart2>
             <div class="panel-footer"></div>
           </div>
         </div>
@@ -118,7 +115,6 @@ import barChart from "./components/Overview/barChart";
 import modelStaticTop from "./components/Overview/modelStaticTop";
 import realTimeChart from "./components/Overview/realTimeChart";
 import histTrendChart from "./components/Overview/histTrendChart";
-import histTrendChart2 from "./components/Overview/histTrendChart2";
 import alarmingChart from "./components/Overview/alarmingChart";
 import pieChart from "./components/Overview/pieChart";
 import pieChart2 from "./components/Overview/pieChart2";
@@ -136,7 +132,6 @@ export default {
     modelStaticTop,
     realTimeChart,
     histTrendChart,
-    histTrendChart2,
     alarmingChart,
     pieChart,
     pieChart2,
@@ -150,6 +145,7 @@ export default {
       dayMonthData: null,
       epLoad: null,
       select_value: 1,
+      filterSec_value: 1,
     };
   },
   created() {},
@@ -157,6 +153,9 @@ export default {
     this.dayMonthYearEp();
   },
   methods: {
+    select_filterSec() {
+      this.filterSec_value = parseInt(this.$refs.select_filterSec.value);
+    },
     select_timeShare() {
       this.select_value = parseInt(this.$refs.select_timeShare.value);
     },

src/views/site/components/Overview/barChart.vue

@@ -1,36 +1,115 @@
 <template>
-  <div ref="distion" style="width: 100%; height: 100%"></div>
+  <div ref="barChart" style="width: 100%; height: 100%"></div>
 </template>
 <script>
 import * as echarts from "echarts";
-
+import api from "@/api/Overview/index";
+import { ElMessage } from "element-plus";
 export default {
   props: {},
   data() {
-    return {};
+    return {
+      chart:[],
+      itemStyle: [
+        {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: "#00FBE0",
+              },
+              {
+                offset: 1,
+                color: "#00FBE0",
+              },
+            ]),
+          },
+        },
+        {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: "#FF8A0D",
+              },
+              {
+                offset: 1,
+                color: "#FF8A0D",
+              },
+            ]),
+          },
+        },
+        {
+          //折线拐点标志的样式
+          color: "#fff",
+          borderColor: "#44A9FF",
+          width: 2,
+          shadowColor: "#44A9FF",
+          shadowBlur: 2,
+        },
+      ],
+    };
   },
-
   mounted() {
     this.$nextTick(() => {
-      this.initChart();
+      this.demandIco();
     });
   },
-
   beforeUnmount() {
     window.removeEventListener("resize", this.chart);
   },
-
+  watch: {
+    "$store.state.siteId"() {
+      this.demandIco();
+    },
+  },
   methods: {
+    demandIco() {
+      api
+        .demandIco({
+          siteId: this.$store.state.siteId,
+        })
+        .then((requset) => {
+          if (requset.status === "SUCCESS") {
+            this.initChart(requset.data);
+          } else {
+            ElMessage.success({
+              message: requset.msg,
+              type: "success",
+            });
+          }
+        });
+    },
     //次数分布折线图
-    initChart() {
-      var chart = echarts.init(this.$refs.distion);
+    initChart(data) {
+      var chart = echarts.init(this.$refs.barChart);
       var option;
+      var dataAll = [];
+      var dataName = [];
 
-      var arr = new Array();
-      for (var i = 0; i < 31; i++) {
-        arr.push(i);
-      }
-
+      data.map((val, ind) => {
+        dataName.push(val.name);
+        dataAll.push({
+          name: val.name,
+          type: ind == 2 ? "line" : "bar",
+          barWidth: "4",
+          itemStyle: this.itemStyle[ind],
+          data: val.list,
+          yAxisIndex: ind == 2 ? 1 : 0,
+          showAllSymbol: ind == 2 ? true : false,
+          symbol: ind == 2 ? "circle" : "",
+          symbolSize: ind == 2 ? 6 : 0,
+          lineStyle:
+            ind == 2
+              ? {
+                  color: "#44A9FF",
+                  width: 2,
+                  shadowBlur: 2,
+                }
+              : {},
+        });
+      });
+      
       option = {
         tooltip: {
           trigger: "axis",
@@ -48,8 +127,7 @@ export default {
           bottom: "22%",
         },
         legend: {
-          // data: ["昨日总人数", "今日实时人数", "昨日使用率"],
-          data: ["最小值", "最大值", "平均值"],
+          data: dataName,
           bottom: "0%",
           textStyle: {
             color: "#fff",
@@ -59,7 +137,7 @@ export default {
           itemHeight: 10,
         },
         xAxis: {
-          data: arr,
+          data: data[0].listDate,
           axisLine: {
             show: true, //隐藏X轴轴线
             lineStyle: {
@@ -93,7 +171,7 @@ export default {
               show: true,
               lineStyle: {
                 width: 1,
-                 color: "rgba(255,255,255,0.1)",
+                color: "rgba(255,255,255,0.1)",
               },
             },
             axisTick: {
@@ -114,103 +192,41 @@ export default {
             type: "value",
             name: "平均值",
             nameTextStyle: {
-                color: "#fff",
-                fontSize: 10
+              color: "#fff",
+              fontSize: 10,
             },
             position: "right",
             splitLine: {
-                show: false
+              show: false,
             },
             axisTick: {
-                show: false
+              show: false,
             },
             axisLine: {
-                show: false,
-                lineStyle: {
-                    color: "#396A87",
-                    width: 2
-                }
-            },
-            axisLabel: {
-                show: true,
-                formatter: "{value} %", //右侧Y轴文字显示
-                textStyle: {
-                    color: "#fff",
-                    fontSize: 10
-                }
-            }
-        },
-        ],
-        series: [
-          {
-            name: "最小值",
-            type: "bar",
-            barWidth: "4",
-            itemStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  {
-                    offset: 0,
-                    color: "#00FBE0",
-                  },
-                  {
-                    offset: 1,
-                    color: "#00FBE0",
-                  },
-                ]),
+              show: false,
+              lineStyle: {
+                color: "#396A87",
+                width: 2,
               },
             },
-            data: [0.24, 0.45, 0.43,  0.35,  0.76,  0.154,  0.86,  0.42,  0.68,  0.97,  0.24,  0.34,0.45, 0.45, 0.43,  0.75,  0.85, 0.35,  0.76,  0.154,  0.86,  0.42,  0.68,  0.97,0.43,  0.35,  0.76,  0.154,  0.86,  0.42,  0.68,  0.97,],
-          },
-          {
-            name: "最大值",
-            type: "bar",
-            barWidth: "4",
-            itemStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  {
-                    offset: 0,
-                    color: "#FF8A0D",
-                  },
-                  {
-                    offset: 1,
-                    color: "#FF8A0D",
-                  },
-                ]),
+            axisLabel: {
+              show: true,
+              formatter: "{value} %", //右侧Y轴文字显示
+              textStyle: {
+                color: "#fff",
+                fontSize: 10,
               },
             },
-            data: [ 0.133,  0.23,  0.114,  0.67,  0.89,  0.35,  0.67,  0.96,  0.90,  0.46,  0.75,  0.85, 0.75,  0.85,0.45, 0.43,  0.35,  0.76,  0.154,  0.86,  0.42,  0.68,  0.97,0.45, 0.43,  0.35,  0.76,  0.154,  0.86,  0.42,  0.68,  0.97,],
-          },
-          {
-            name: "平均值",
-            type: "line",
-            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
-            showAllSymbol: true, //显示所有图形。
-            symbol: "circle", //标记的图形为实心圆
-            symbolSize: 6, //标记的大小
-            itemStyle: {
-              //折线拐点标志的样式
-              color: "#fff",
-              borderColor: "#44A9FF",
-              width: 2,
-              shadowColor: "#44A9FF",
-              shadowBlur: 2,
-            },
-            lineStyle: {
-              color: "#44A9FF",
-              width: 2,
-              shadowBlur: 2,
-            },
-            data: [4.2, 3.5, 2.9, 7.8, 2, 3, 4.2, 3.5, 2.9, 7.8, 2, 3, 7.8, 2, 3, 4.2, 3.5, 2.9, 7.8, 2, 3, 7.8, 2, 3, 4.2, 3.5, 2.9, 7.8, 2, 3,2],
           },
         ],
+        series: dataAll,
       };
 
-      chart.setOption(option);
+      chart.setOption(option, true);
       window.addEventListener("resize", () => {
         chart.resize();
       });
+      this.chart = chart
     },
   },
 };

src/views/site/components/Overview/histTrendChart.vue

@@ -1,33 +1,90 @@
 <template>
-  <div ref="distion" style="width: 100%; height: 100%"></div>
+  <div ref="histTrendChart" style="width: 100%; height: 100%"></div>
 </template>
 <script>
 import * as echarts from "echarts";
-
+import api from "@/api/Overview/index";
+import { ElMessage } from "element-plus";
 export default {
-  props: {},
+  props: {
+    msg: Object,
+    filterSec_value: Object,
+  },
   data() {
     return {};
   },
 
   mounted() {
     this.$nextTick(() => {
-      this.initChart();
+      this.electricIco();
     });
   },
 
   beforeUnmount() {
     window.removeEventListener("resize", this.chart);
   },
-
+  watch: {
+    "$store.state.siteId"() {
+      this.electricIco();
+    },
+    msg() {
+      this.electricIco();
+    },
+    filterSec_value() {
+      this.electricIco();
+    },
+  },
   methods: {
+    electricIco() {
+      api
+        .electricIco({
+          siteId: this.$store.state.siteId,
+          date: "2021-07-01 00:00:00",
+        })
+        .then((requset) => {
+          if (requset.status === "SUCCESS") {
+            this.initChart(requset.data);
+          } else {
+            ElMessage.success({
+              message: requset.msg,
+              type: "success",
+            });
+          }
+        });
+    },
     //次数分布折线图
-    initChart() {
-      var chart = echarts.init(this.$refs.distion);
+    initChart(data) {
+      var chart = echarts.init(this.$refs.histTrendChart);
       var option;
+      var dataAll = [];
+
+      data.map((val) => {
+        if (this.msg == 0) {
+          if (val.name == "IA" || val.name == "IB" || val.name == "IC") {
+            return dataAll.push({
+              name: val.name + "(A)",
+              type: "line",
+              smooth: false,
+              data: val.list,
+              symbolSize: 6,
+            });
+          }
+        } else {
+          if (val.name == "UA" || val.name == "UB" || val.name == "UC") {
+            return dataAll.push({
+              name: val.name + "(kV)",
+              type: "line",
+              smooth: false,
+              data: val.list,
+              symbolSize: 6,
+            });
+          }
+        }
+      });
+      // console.log(data, dataAll);
 
       option = {
-        color: ["#FEB70D", "#50F335","#0DC8FE"],
+        color: ["#FEB70D", "#50F335", "#0DC8FE"],
         tooltip: {
           trigger: "axis",
         },
@@ -41,7 +98,7 @@ export default {
           },
 
           left: "30%",
-          bottom:'0'
+          bottom: "0",
         },
         grid: {
           left: "0%",
@@ -53,19 +110,9 @@ export default {
         xAxis: {
           type: "category",
           boundaryGap: true,
-         data: ["0:00",
-            "2:00",
-            "4:00",
-            "6:00",
-            "8:00",
-            "10:00",
-            "12:00",
-            "13:00",
-            "16:00",
-            "18:00",
-            "20:00",
-            "22:00",
-          ],
+          data: data[0].listDate.map((val) => {
+            return val.split(":")[0] + ":" + val.split(":")[1];
+          }),
           axisTick: {
             show: false, //去除刻度线
           },
@@ -77,13 +124,12 @@ export default {
           },
         },
         yAxis: {
-             name: 'A',
-              nameTextStyle: {
+          name: "A",
+          nameTextStyle: {
             color: "#fff",
             fontSize: 10,
-           
-        },
-            max: 1,  //设置左侧最大值
+          },
+          max: 1, //设置左侧最大值
           type: "value",
           axisTick: {
             show: false, //去除刻度线
@@ -102,44 +148,10 @@ export default {
             },
           },
         },
-        series: [
-          {
-            name: "IA(A)",
-            type: "line",
-            smooth: false, // 曲线是否平滑显示
-            // data: yearData[0].data[0],
-            data: [
-              0.24, 0.40, 0.101, 0.134, 0.30, 0.230, 0.210, 0.230, 0.120, 0.230,0.22,0.42,0.52,0.11
-            ],
-            symbolSize: 6, //拐点圆的大小
-            // symbol: 'circle',
-          },
-          {
-            name: "IB(A)",
-            type: "line",
-            smooth: false, // 曲线是否平滑显示
-            // data: yearData[0].data[1],
-            data: [
-            0.230, 0.210, 0.230, 0.120, 0.230,0.22,0.42,0.52,0.11, 0.210, 0.230, 0.120, 0.230
-            ],
-            symbolSize: 6, //拐点圆的大小
-            // symbol: 'circle',
-          },
-          {
-            name: "IC(A)",
-            type: "line",
-            smooth: false, // 曲线是否平滑显示
-            // data: yearData[0].data[1],
-            data: [
-             0.230, 0.120, 0.230,0.230, 0.210, 0.230, 0.120, 0.230,0.22,0.42,0.52,0.11, 0.210
-            ],
-            symbolSize: 6, //拐点圆的大小
-            // symbol: 'circle',
-          },
-        ],
+        series: dataAll,
       };
 
-      chart.setOption(option);
+      chart.setOption(option, true);
       window.addEventListener("resize", () => {
         chart.resize();
       });

src/views/site/components/Overview/histTrendChart2.vue

@@ -5,16 +5,19 @@
 import * as echarts from "echarts";
 
 export default {
-  props: {},
+  props: {
+    msg: Object,
+    select_filterSec: Object,
+  },
   data() {
     return {};
   },
 
   mounted() {
-      
-
+    
     this.$nextTick(() => {
       this.initChart();
+      console.log("aaaaaaaaaaaaaaa",this.msg, this.select_filterSec);
     });
   },
 
@@ -29,7 +32,7 @@ export default {
       var option;
 
       option = {
-        color: ["#FEB70D", "#50F335","#0DC8FE"],
+        color: ["#FEB70D", "#50F335", "#0DC8FE"],
         tooltip: {
           trigger: "axis",
         },
@@ -43,7 +46,7 @@ export default {
           },
 
           left: "30%",
-          bottom:'0'
+          bottom: "0",
         },
         grid: {
           left: "0%",
@@ -55,7 +58,8 @@ export default {
         xAxis: {
           type: "category",
           boundaryGap: true,
-         data: ["0:00",
+          data: [
+            "0:00",
             "2:00",
             "4:00",
             "6:00",
@@ -79,13 +83,12 @@ export default {
           },
         },
         yAxis: {
-             name: 'A',
-              nameTextStyle: {
+          name: "A",
+          nameTextStyle: {
             color: "#fff",
             fontSize: 10,
-           
-        },
-            max: 1,  //设置左侧最大值
+          },
+          max: 1, //设置左侧最大值
           type: "value",
           axisTick: {
             show: false, //去除刻度线
@@ -111,7 +114,8 @@ export default {
             smooth: false, // 曲线是否平滑显示
             // data: yearData[0].data[0],
             data: [
-               0.230, 0.120, 0.230,0.22,0.42,0.52,0.11,0.24, 0.40, 0.101, 0.134, 0.30, 0.230, 0.210
+              0.23, 0.12, 0.23, 0.22, 0.42, 0.52, 0.11, 0.24, 0.4, 0.101, 0.134,
+              0.3, 0.23, 0.21,
             ],
             symbolSize: 6, //拐点圆的大小
             // symbol: 'circle',
@@ -122,7 +126,8 @@ export default {
             smooth: false, // 曲线是否平滑显示
             // data: yearData[0].data[1],
             data: [
-            0.120, 0.230,0.22,0.42,0.52, 0.230, 0.210, 0.230,0.11, 0.210, 0.230, 0.120, 0.230
+              0.12, 0.23, 0.22, 0.42, 0.52, 0.23, 0.21, 0.23, 0.11, 0.21, 0.23,
+              0.12, 0.23,
             ],
             symbolSize: 6, //拐点圆的大小
             // symbol: 'circle',
@@ -133,7 +138,8 @@ export default {
             smooth: false, // 曲线是否平滑显示
             // data: yearData[0].data[1],
             data: [
-             0.230, 0.120, 0.230,0.230, 0.210, 0.230, 0.120, 0.230,0.22,0.42,0.52,0.11, 0.210
+              0.23, 0.12, 0.23, 0.23, 0.21, 0.23, 0.12, 0.23, 0.22, 0.42, 0.52,
+              0.11, 0.21,
             ],
             symbolSize: 6, //拐点圆的大小
             // symbol: 'circle',

src/views/site/components/Overview/realTimeChart.vue

@@ -1,30 +1,63 @@
 <template>
-  <div ref="distion" style="width: 100%; height: 100%"></div>
+  <div ref="realTimeChart" style="width: 100%; height: 100%"></div>
 </template>
 <script>
 import * as echarts from "echarts";
+import api from "@/api/Overview/index";
+import { ElMessage } from "element-plus";
 
 export default {
   props: {},
   data() {
-    return {};
+    return {
+      chart: null,
+    };
   },
 
   mounted() {
-    this.$nextTick(() => {
-      this.initChart();
-    });
+    this.eptrendIco();
   },
 
   beforeUnmount() {
     window.removeEventListener("resize", this.chart);
   },
-
+  watch: {
+    "$store.state.siteId"() {
+      this.eptrendIco();
+    },
+  },
   methods: {
+    eptrendIco() {
+      api
+        .eptrendIco({
+          siteId: this.$store.state.siteId,
+        })
+        .then((requset) => {
+          if (requset.status === "SUCCESS") {
+            this.initChart(requset.data);
+          } else {
+            ElMessage.success({
+              message: requset.msg,
+              type: "success",
+            });
+          }
+        });
+    },
     //次数分布折线图
-    initChart() {
-      var chart = echarts.init(this.$refs.distion);
+    initChart(data) {
+      var chart = echarts.init(this.$refs.realTimeChart);
       var option;
+      var dataAll = [];
+
+      data.map((val) => {
+        dataAll.push({
+          name: val.name,
+          type: "line",
+          smooth: false,
+          data: val.list,
+          symbolSize: 6,
+        });
+      });
 
       option = {
         color: ["#FCFF14", "#35F393"],
@@ -41,7 +74,7 @@ export default {
           },
 
           left: "30%",
-          bottom:'0'
+          bottom: "0",
         },
         grid: {
           left: "0%",
@@ -53,19 +86,9 @@ export default {
         xAxis: {
           type: "category",
           boundaryGap: true,
-         data: ["0:00",
-            "2:00",
-            "4:00",
-            "6:00",
-            "8:00",
-            "10:00",
-            "12:00",
-            "13:00",
-            "16:00",
-            "18:00",
-            "20:00",
-            "22:00",
-          ],
+          data: data[0].listDate.map((val) => {
+            return val.split(":")[0] + ":" + val.split(":")[1];
+          }),
           axisTick: {
             show: false, //去除刻度线
           },
@@ -77,13 +100,12 @@ export default {
           },
         },
         yAxis: {
-             name: 'MW',
-              nameTextStyle: {
+          name: "MW",
+          nameTextStyle: {
             color: "#fff",
             fontSize: 10,
-           
-        },
-            max: 1,  //设置左侧最大值
+          },
+          max: 1, //设置左侧最大值
           type: "value",
           axisTick: {
             show: false, //去除刻度线
@@ -102,33 +124,10 @@ export default {
             },
           },
         },
-        series: [
-          {
-            name: "昨日",
-            type: "line",
-            smooth: false, // 曲线是否平滑显示
-            // data: yearData[0].data[0],
-            data: [
-              0.24, 0.40, 0.101, 0.134, 0.30, 0.230, 0.210, 0.230, 0.120, 0.230,0.22,0.42,0.52,0.11
-            ],
-            symbolSize: 6, //拐点圆的大小
-            // symbol: 'circle',
-          },
-          {
-            name: "今日",
-            type: "line",
-            smooth: false, // 曲线是否平滑显示
-            // data: yearData[0].data[1],
-            data: [
-            0.230, 0.210, 0.230, 0.120, 0.230,0.22,0.42,0.52,0.11, 0.210, 0.230, 0.120, 0.230
-            ],
-            symbolSize: 6, //拐点圆的大小
-            // symbol: 'circle',
-          },
-        ],
+        series: dataAll,
       };
 
-      chart.setOption(option);
+      chart.setOption(option, true);
       window.addEventListener("resize", () => {
         chart.resize();
       });