modify

package-lock.json

@@ -3554,7 +3554,11 @@
     },
     "clone-deep": {
       "version": "4.0.1",
+<<<<<<< HEAD
       "resolved": "https://registry.nlark.com/clone-deep/download/clone-deep-4.0.1.tgz",
+=======
+      "resolved": "https://registry.npm.taobao.org/clone-deep/download/clone-deep-4.0.1.tgz",
+>>>>>>> 41e09ba3f90cb5a3f13f4f7e5cc3968ca56fbcce
       "integrity": "sha1-wZ/Zvbv4WUK0/ZechNz31fB8I4c=",
       "dev": true,
       "requires": {
@@ -10588,7 +10592,11 @@
     },
     "sass-loader": {
       "version": "8.0.2",
+<<<<<<< HEAD
       "resolved": "https://registry.nlark.com/sass-loader/download/sass-loader-8.0.2.tgz?cache=0&sync_timestamp=1623350053592&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsass-loader%2Fdownload%2Fsass-loader-8.0.2.tgz",
+=======
+      "resolved": "https://registry.nlark.com/sass-loader/download/sass-loader-8.0.2.tgz",
+>>>>>>> 41e09ba3f90cb5a3f13f4f7e5cc3968ca56fbcce
       "integrity": "sha1-3r7NjDziQ8dkVPLoKQSCFQOACQ0=",
       "dev": true,
       "requires": {
@@ -10613,7 +10621,11 @@
       "dependencies": {
         "ansi-styles": {
           "version": "4.3.0",
+<<<<<<< HEAD
           "resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1618995778321&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz",
+=======
+          "resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1618995547052&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz",
+>>>>>>> 41e09ba3f90cb5a3f13f4f7e5cc3968ca56fbcce
           "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
           "dev": true,
           "requires": {
@@ -10622,7 +10634,11 @@
         },
         "async": {
           "version": "3.2.0",
+<<<<<<< HEAD
           "resolved": "https://registry.nlark.com/async/download/async-3.2.0.tgz",
+=======
+          "resolved": "https://registry.npm.taobao.org/async/download/async-3.2.0.tgz",
+>>>>>>> 41e09ba3f90cb5a3f13f4f7e5cc3968ca56fbcce
           "integrity": "sha1-s6JoXF67ZB094C0WEALGD8n4VyA=",
           "dev": true
         },
@@ -10638,7 +10654,11 @@
         },
         "color-convert": {
           "version": "2.0.1",
+<<<<<<< HEAD
           "resolved": "https://registry.nlark.com/color-convert/download/color-convert-2.0.1.tgz",
+=======
+          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
+>>>>>>> 41e09ba3f90cb5a3f13f4f7e5cc3968ca56fbcce
           "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
           "dev": true,
           "requires": {

public/static/config.js

@@ -1,6 +1,10 @@
 // api 请求路径
 var PLATFROM_CONFIG = {};
-PLATFROM_CONFIG.baseUrl = "http://121.40.217.77:8081/"
+// PLATFROM_CONFIG.baseUrl = "http://121.40.217.77:8081/"
+PLATFROM_CONFIG.baseUrl = "http://172.16.120.155:8010/" //杨强本地
+// PLATFROM_CONFIG.baseUrl = "http://172.16.1.196:8010/"  //超博本地
+
+
 
 
 //alarming WEBSOCKET

src/api/site/Device_motore.js

@@ -0,0 +1,29 @@
+import request from '@/utils/request'
+
+
+export default {
+    // 获取模拟量信息列表
+    rtAnalogData(data) {
+        return request({
+            url: `rtAnalogData/one`,
+            method: 'post',
+            data: data
+        })
+    },
+    // 获取开关量信息列表
+    rtSwitchData(data) {
+        return request({
+            url: `rtSwitchData/one`,
+            method: 'post',
+            data: data
+        })
+    },
+    // 获取运行状态统计 -> 本日 本月
+    LoopStatus(data) {
+        return request({
+            url: `rtSwitchData/LoopStatus`,
+            method: 'post',
+            data: data
+        })
+    }
+}

src/assets/css/index.css

@@ -77,18 +77,22 @@ header {
 
 .topBox {
     height: 70%;
-    border: 1px solid red;
+    /* border: 1px solid red; */
 }
 
 .bottomBox {
     height: calc(30% - 0.45rem);
-    border: 1px solid pink;
+    /* border: 1px solid red; */
     margin-top: 0.225rem;
 }
 
+.bottomBox .panel {
+    padding-top: .7rem
+}
+
 .bottomBox .column {
     text-align: end;
-    border: 1px solid red
+    /* border: 1px solid red */
 }
 
 .bottomBox .column:first-child {
@@ -113,14 +117,17 @@ header {
 
 .panel.statisTop {
     height: 60%;
-    border: 1px solid green
+    /* border: 1px solid red */
 }
 
+
 /* el-select 下拉框 样式 */
-.el-input__suffix{
+
+.el-input__suffix {
     line-height: 1rem !important;
 }
-.el-input--suffix .el-input__inner{
+
+.el-input--suffix .el-input__inner {
     margin-top: 0.2rem;
     width: 2rem !important;
     height: 0.375rem !important;
@@ -129,38 +136,43 @@ header {
     font-size: 0.18rem !important;
     border: 1px #4BF4F9 solid !important;
     border-radius: 0px !important;
-    
 }
-.el-input--suffix .el-input__icon{
+
+.el-input--suffix .el-input__icon {
     width: 0.3125rem;
     line-height: 0.375rem !important;
 }
-.el-input--suffix .el-select__caret{
-    color:#4BF4F9 !important;
+
+.el-input--suffix .el-select__caret {
+    color: #4BF4F9 !important;
     font-size: 0.175rem !important;
 }
-.el-input__prefix, .el-input__suffix{
+
+.el-input__prefix,
+.el-input__suffix {
     top: -0.30rem !important;
 }
-/* el-select 下拉框 样式 */
 
 
+/* el-select 下拉框 样式 */
+
 .panel.statisBottom {
     height: calc(100% - 60% - 0.225rem);
-    border: 1px solid blue
+    /* border: 1px solid red */
 }
 
 .panel.deviceSum {
     height: 50%;
-    border: 1px solid red;
+    /* border: 1px solid red; */
 }
 
 .panel.operStatus {
     height: calc(50% - 0.225rem);
-    border: 1px solid red;
+    /* border: 1px solid red; */
 }
 
-.panel::before {
+.panel::before,
+.mapBox::before {
     position: absolute;
     top: 0;
     left: 0;
@@ -169,9 +181,11 @@ header {
     height: 10px;
     border-top: 2px solid #02a6b5;
     border-left: 2px solid #02a6b5;
+    z-index: 999
 }
 
-.panel::after {
+.panel::after,
+.mapBox::after {
     position: absolute;
     top: 0;
     right: 0;
@@ -180,6 +194,7 @@ header {
     height: 10px;
     border-top: 2px solid #02a6b5;
     border-right: 2px solid #02a6b5;
+    z-index: 999
 }
 
 .panel .panel-footer {
@@ -198,6 +213,7 @@ header {
     height: 10px;
     border-bottom: 2px solid #02a6b5;
     border-left: 2px solid #02a6b5;
+    z-index: 999
 }
 
 .panel .panel-footer::after {
@@ -209,6 +225,7 @@ header {
     height: 10px;
     border-bottom: 2px solid #02a6b5;
     border-right: 2px solid #02a6b5;
+    z-index: 999
 }
 
 .panel h2 {
@@ -416,6 +433,14 @@ p {
     background-image: url(../images/statisTop-bg.png);
 }
 
+.deviceSum {
+    background-image: url(../images/deviceSum.png);
+}
+
+.currentUsage {
+    background-image: url(../images/currentUsage-bg.png);
+}
+
 .statisSec .statisBottom ul {
     height: 100%;
 }
@@ -452,5 +477,28 @@ p {
     bottom: 0
 }
 
+.filterSec {
+    position: absolute;
+    top: .7rem;
+    right: 10px;
+    z-index: 11111111
+}
+
+.filterSec select,
+.filterSec option {
+    border: 1px solid #2399ed;
+    min-width: 2.05rem;
+    font-size: .15rem;
+    height: .27rem;
+    color: #2399ed;
+    line-height: 0.45rem;
+    /* background: rgba(0, 0, 0, 0); */
+    outline: none;
+    padding-left: 0.1rem;
+    background-image: -webkit-linear-gradient(bottom, #1298f5, #fff);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
 
 /* ming end */

src/views/home/components/barChart.vue

@@ -0,0 +1,184 @@
+<template>
+  <div ref="distion" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from "echarts";
+
+export default {
+  props: {},
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+
+  beforeUnmount() {
+    window.removeEventListener("resize", this.chart);
+  },
+
+  methods: {
+    //次数分布折线图
+    initChart() {
+      var chart = echarts.init(this.$refs.distion);
+      var option;
+
+      option = {
+        //    backgroundColor:'#323a5e',
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
+        },
+        grid: {
+          left: "0%",
+          right: "0%",
+          bottom: "0%",
+          top: "22%",
+          containLabel: true,
+        },
+        legend: {
+          itemGap: 30,
+          left: '30%',
+          top: 0,
+          textStyle: {
+            color: "#fff",
+          },
+          itemWidth: 12,
+          itemHeight: 10,
+        },
+        xAxis: {
+          type: "category",
+          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",
+          ],
+          axisLine: {
+            lineStyle: {
+              color:"rgba(0,0,0,0.1)",
+            },
+          },
+          axisTick: {
+                show: false
+            },
+          axisLabel: {
+            // interval: 0,
+            // rotate: 40,
+            textStyle: {
+                 color: '#fff',
+              fontFamily: "Microsoft YaHei",
+            },
+          },
+        },
+
+        yAxis: {
+          type: "value",
+        //   max: "800",
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: "white",
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255,255,255,0.1)",
+            },
+          },
+          axisLabel: {},
+        },
+        // dataZoom: [
+        //   {
+        //     show: true,
+        //     height: 12,
+        //     xAxisIndex: [0],
+        //     bottom: "8%",
+        //     start: 10,
+        //     end: 90,
+        //     handleIcon:
+        //       "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
+        //     handleSize: "110%",
+        //     handleStyle: {
+        //       color: "#d3dee5",
+        //     },
+        //     textStyle: {
+        //       color: "#fff",
+        //     },
+        //     borderColor: "#90979c",
+        //   },
+        //   {
+        //     type: "inside",
+        //     show: true,
+        //     height: 15,
+        //     start: 1,
+        //     end: 35,
+        //   },
+        // ],
+        series: [
+          {
+            name: "昨日",
+            type: "bar",
+            barWidth: "20%",
+            barGap: '0%',
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "#00A7FD",
+                  },
+                  {
+                    offset: 1,
+                    color: "#00A7FD",
+                  },
+                ]),
+              },
+            },
+            data: [40, 40, 30, 30, 30, 40, 40, 40, 30,40,50,60],
+          },
+          {
+            name: "当日",
+            type: "bar",
+            barWidth: "20%",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "#FD8F00",
+                  },
+                  {
+                    offset: 1,
+                    color: "#FD8F00",
+                  },
+                ]),
+              },
+            },
+            data: [40, 50, 50, 50, 50, 40, 40, 50, 50,20,40,30],
+          },
+        ],
+      };
+
+      chart.setOption(option);
+      window.addEventListener("resize", () => {
+        chart.resize();
+      });
+    },
+  },
+};
+</script>

src/views/home/components/lineChart.vue

@@ -0,0 +1,129 @@
+<template>
+  <div ref="distion" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from "echarts";
+
+export default {
+  props: {},
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+
+  beforeUnmount() {
+    window.removeEventListener("resize", this.chart);
+  },
+
+  methods: {
+    //次数分布折线图
+    initChart() {
+      var chart = echarts.init(this.$refs.distion);
+      var option;
+
+      var arr = new Array();
+      for (var i = 0; i < 32; i++) {
+        arr.push(i);
+      }
+
+      option = {
+        color: ["#00F4FD", "#FD8F00"],
+        tooltip: {
+          trigger: "axis",
+        },
+        // 图列组件
+        legend: {
+          itemHeight: 10, //改变圆圈大小
+          itemWidth: 26, //改变圆圈大小
+          itemGap: 30,
+          textStyle: {
+            color: "#fff",
+          },
+
+          left: "30%",
+          top: 0,
+        },
+        grid: {
+          left: "0%",
+          right: "0%",
+          bottom: "0%",
+          top: "20%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: true,
+          data: arr,
+          axisTick: {
+            show: false, //去除刻度线
+          },
+          axisLabel: {
+            color: "#fff", // 文本颜色
+          },
+          axisLine: {
+            show: false, // 去除轴线
+          },
+        },
+        yAxis: {
+          type: "value",
+          axisTick: {
+            show: false, //去除刻度线
+          },
+          axisLabel: {
+            color: "#fff", // 文本颜色
+          },
+          axisLine: {
+            show: false, // 去除轴线
+          },
+          splitNumber: 5,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(255,255,255,0.1)",
+            },
+          },
+        },
+        series: [
+          {
+            name: "故障数量",
+            type: "line",
+            smooth: false, // 曲线是否平滑显示
+            // data: yearData[0].data[0],
+            data: [
+              24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120, 230, 210,
+              230, 120, 230, 210, 120, 120, 230, 210, 230, 120, 230, 210, 120,
+              24, 40, 101, 134, 90, 230,
+            ],
+            symbolSize: 6, //拐点圆的大小
+            // symbol: 'circle',
+          },
+          {
+            name: "故障抢修数量",
+            type: "line",
+            smooth: false, // 曲线是否平滑显示
+            // data: yearData[0].data[1],
+            data: [
+              30, 50, 110, 144, 110, 240, 228, 240, 130, 240, 220, 130, 110,
+              240, 228, 240, 130, 240, 220, 130, 240, 228, 240, 130, 240, 220,
+              130, 30, 50, 110, 144, 110, 240, 228, 240,
+            ],
+            symbolSize: 6, //拐点圆的大小
+            // symbol: 'circle',
+          },
+        ],
+      };
+
+      chart.setOption(option);
+      window.addEventListener("resize", () => {
+        chart.resize();
+      });
+      this.chart = chart;
+    },
+  },
+};
+</script>

src/views/home/components/pieChart.vue

@@ -1,3 +1,161 @@
 <template>
-    <div>dsds</div>
-</template>
+
+  <div ref="distion" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from "echarts";
+
+export default {
+  props: {
+    // className: {
+    //   type: String,
+    //   default: "chart",
+    // },
+    // width: {
+    //   type: String,
+    //   default: "100%",
+    // },
+    // height: {
+    //   type: String,
+    //   default: "400px",
+    // },
+    // perData: {
+    //   type: Array,
+    //   default: () => [
+    //     {
+    //       color: "#01ACFF",
+    //       name: "摄像头",
+    //       value: [39],
+    //       // nAmount: 566557.14,
+    //     },
+    //   ],
+    // },
+  },
+  data() {
+    return {};
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+
+  beforeUnmount() {
+    window.removeEventListener("resize", this.chart);
+  },
+
+  methods: {
+    //次数分布折线图
+    initChart() {
+      var chart = echarts.init(this.$refs.distion);
+      var option;
+
+      var pie = [
+        {
+          value: 50,
+          name: "正常",
+        },
+        {
+          value: 150,
+          name: "故障",
+        },
+        {
+          value: 100,
+          name: "离线",
+        },
+        {
+          value: 100,
+          name: "预警",
+        },
+        {
+          value: 100,
+          name: "其他",
+        },
+      ];
+      var totalNum = 0;
+      pie.forEach(function (value) {
+        totalNum += value.value;
+      });
+
+      option = {
+        grid: {
+        },
+
+        title: [
+          {
+            text: "{name|" + totalNum + "}\n{val|设备总数}",
+            top: "center",
+            left: "center",
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: 30,
+                  fontWeight: "normal",
+                  color: "#FFFFFF",
+                  fontFamily:"impact",
+                   padding: [0, 0,3,0]
+
+                },
+                val: {
+                  fontSize: 14,
+                  fontWeight: "normal",
+                  color: "#FFFFFF",
+                  padding: [3,0,0, 0]
+                },
+              },
+            },
+          },
+        ],
+        tooltip: {
+          trigger: "item",
+          formatter: function (params) {
+            return (
+              params.name +
+              "：" +
+              params.value +
+              "<br>占比：" +
+              params.percent.toFixed(2) +
+              "%"
+            );
+          },
+        },
+        // itemStyle:{
+        //     normal: {
+        //          label: {
+        //              show: true,
+        //         position: 'outside',
+        //              color: 'green',
+        //          }
+        //     }
+        // },
+
+        series: [
+          {
+            label: {
+              normal: {
+                show: true,
+                formatter: " {b}：{c} ",
+              },
+              emphasis: {
+                show: true,
+              },
+            },
+            name: "访问来源",
+            radius: ["45%", "67%"],
+            type: "pie", 
+            data: pie,
+          },
+        ],
+        color: ["#0DFE95", "#F7B61C", "#2BCCFF", "#FE5C0D", "#4388F9"],
+      };
+
+      chart.setOption(option);
+      window.addEventListener("resize", () => {
+        chart.resize();
+      });
+      this.chart = chart;
+    },
+  },
+};
+</script>

src/views/home/components/statisBottom.vue

@@ -26,6 +26,7 @@
         <p class="timeEle">年用电量</p>
       </li>
     </ul>
+    <div class="panel-footer"></div>
   </div>
 </template>
 <script>

src/views/home/components/statisTop.vue

@@ -44,6 +44,8 @@
         </div>
       </li>
     </ul>
+
+    <div class="panel-footer"></div>
   </div>
 </template>
 <script>

src/views/home/index.vue

@@ -5,46 +5,60 @@
         <div class="column statisSec">
           <statis-top></statis-top>
           <statis-bottom></statis-bottom>
-
-          <!-- <div class="panel statisBottom">
-            <h2>折线图-人员变化</h2>
-            <div class="chart"></div>
-            <div class="panel-footer"></div>
-          </div> -->
-          <!-- <div class="panel pie">
-          <h2>饼形图-年龄分布</h2>
-          <div class="chart"></div>
-          <div class="panel-footer"></div>
-        </div> -->
         </div>
-        <div class="column">
-          <!-- @click="Overview()" -->
-          <div class="map" id="mapF" style="">
-          <div id="pickerBox">
-            <input id="pickerInput" placeholder="输入关键字选取地点" />
-            <div id="poiInfo"></div>
-          </div>
+        <div class="column mapBox">
+          <div class="map panel" id="mapF" style="height:100%;z-index:999999999999;width:100%">
+            <div id="pickerBox">
+              <input id="pickerInput" placeholder="输入关键字选取地点" />
+              <div id="poiInfo"></div>
+            </div>
+            <div class="panel-footer"></div>
           </div>
         </div>
         <div class="column">
           <div class="panel deviceSum">
+            <div class="filterSec">
+              <select name="" id="">
+                <option value="3">日</option>
+                <option value="4">月</option>
+              </select>
+            </div>
+
             <pie-chart></pie-chart>
+            <div class="panel-footer"></div>
           </div>
           <div class="panel line1 operStatus">
-            <h2>折线图-播放量</h2>
+            <h2>锥形图</h2>
             <div class="chart"></div>
             <div class="panel-footer"></div>
           </div>
-          <!-- <div class="panel pie1">
-          <h2>饼形图-地区分布</h2>
-          <div class="chart"></div>
-          <div class="panel-footer"></div>
-        </div> -->
         </div>
       </div>
       <div class="bottomBox">
-        <div class="column">221</div>
-        <div class="column">21211</div>
+        <div class="column">
+          <div class="panel currentUsage" style="height: 100%">
+             <div class="filterSec">
+              <select name="" id="">
+                <option value="1">当日用量趋势</option>
+                <option value="2">当月用量趋势</option>
+              </select>
+            </div>
+            <bar-chart></bar-chart>
+            <div class="panel-footer"></div>
+          </div>
+        </div>
+        <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>
+            </div>
+            <line-chart></line-chart>
+            <div class="panel-footer"></div>
+          </div>
+        </div>
       </div>
     </section>
   </div>
@@ -53,12 +67,14 @@
 import statisTop from "./components/statisTop";
 import statisBottom from "./components/statisBottom";
 import pieChart from "./components/pieChart";
+import barChart from "./components/barChart";
+import lineChart from "./components/lineChart";
 // 地图
 import AMap from "AMap";
 import AMapUI from "AMapUI";
 export default {
   name: "index",
-  components: { statisTop, statisBottom, pieChart },
+  components: { statisTop, statisBottom, pieChart, barChart, lineChart },
   data() {
     return {
       map: null,
@@ -165,7 +181,7 @@ export default {
         content:
           content ||
           `
-                <div class="tableTooltip mapTab">
+                <div class="tableTooltip mapTab" >
                   <div class="tableTitle">
                     <div>${"测试站点1"}</div>
                   </div>
@@ -176,6 +192,7 @@ export default {
                     <div><a>监控类型：</a>${"电力，视频"}</div>
                     <div><a> 电话：</a>${"18888888888"}</div>
                     <div><a> 地址：</a>${"XX路135弄"}</div>
+                    <bottom onclick="${this.Overview()}">11111</bottom>
                   </el-row>
                 </div>`,
         offset: new AMap.Pixel(16, -30),
@@ -222,7 +239,7 @@ export default {
     },
     initMapUi() {
       console.log(22);
-      AMapUI.load(["ui/misc/PoiPicker"],  (PoiPicker)=> {
+      AMapUI.load(["ui/misc/PoiPicker"], (PoiPicker) => {
         console.log(PoiPicker);
         let poiPickers = new PoiPicker({
           //city:'北京',

src/views/index.vue

@@ -327,7 +327,7 @@ export default {
 }
 </style>
 <style>
-.el-popper__arrow::before {
+.el-select__popper .el-popper__arrow::before {
   border-top-color: transparent !important;
   border-left-color: transparent !important;
   background: rgba(0, 244, 253, 1) !important;

src/views/site/Device_motore.vue

@@ -4,13 +4,17 @@
       class="Site-details"
       :style="
         activeName === 'first'
-          ? 'height: 684px;'
+          ? 'min-height:700px;'
+          : activeName === 'second'
+          ? 'min-height:700px;'
           : activeName === 'third'
           ? 'height: 670px;'
+          : activeName === 'fourth'
+          ? 'min-height: 830px;'
           : 'height: 710px;'
       "
     >
-      <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tabs v-model="activeName" @tab-click="handleClick" id="device_tabs">
         <el-tab-pane label="实时数据" name="first">
           <el-tabs
             v-model="ac_content"
@@ -23,75 +27,71 @@
               style="display: flex"
               class="model"
             >
-              <div>
-                <div
-                  v-for="arr in model_array.slice(0, 16)"
-                  :key="arr"
-                  class="display"
-                >
-                  <div>{{ arr.name }}</div>
-                  <div>{{ arr.value }}</div>
-                </div>
-              </div>
-              <div>
-                <div
-                  v-for="arr in model_array.slice(16, 30)"
-                  :key="arr"
-                  class="display"
-                >
-                  <div>{{ arr.name }}</div>
-                  <div>{{ arr.value }}</div>
-                </div>
-              </div>
-              <div>
-                <div
-                  v-for="arr in model_array.slice(30, 46)"
-                  :key="arr"
-                  class="display"
-                >
-                  <div>{{ arr.name }}</div>
-                  <div>{{ arr.value }}</div>
-                </div>
-              </div>
-              <div>
+              <div v-for="(all, index) in 4" :key="index">
                 <div
-                  v-for="arr in model_array.slice(46)"
+                  v-for="arr in model_array.slice(
+                    index == 0 ? 0 : index == 1 ? 20 : index == 2 ? 40 : 60,
+                    index == 0
+                      ? 20
+                      : index == 1
+                      ? 40
+                      : index == 2
+                      ? 60
+                      : model_array.length
+                  )"
                   :key="arr"
                   class="display"
                 >
-                  <div>{{ arr.name }}</div>
-                  <div>{{ arr.value }}</div>
+                  <el-tooltip
+                    :disabled="arr.name.length > 10 ? false : true"
+                    effect="dark"
+                    :content="arr.name"
+                    placement="top"
+                  >
+                    <div>{{ arr.name }}</div>
+                  </el-tooltip>
+                  <el-tooltip
+                    :disabled="arr.value.length > 10 ? false : true"
+                    effect="dark"
+                    :content="arr.value"
+                    placement="top"
+                  >
+                    <div>{{ arr.value }}</div>
+                  </el-tooltip>
                 </div>
               </div>
             </el-tab-pane>
             <el-tab-pane label="状态量" name="states" class="states">
-              <div>
+              <div v-for="(all, index) in 2" :key="index">
                 <div
-                  v-for="arr in state_array.slice(0, 17)"
+                  v-for="arr in state_array.slice(
+                    index == 0 ? 0 : state_array.length / 2,
+                    index == 0 ? state_array.length / 2 : state_array.length
+                  )"
                   :key="arr"
                   class="display"
                 >
                   <div style="display: flex">
-                    <div class="name">{{ arr.name }}</div>
-                    <div :class="'state_' + arr.value"></div>
-                  </div>
-                </div>
-              </div>
-              <div>
-                <div
-                  v-for="arr in state_array.slice(17)"
-                  :key="arr"
-                  class="display"
-                >
-                  <div style="display: flex">
-                    <div class="name1">{{ arr.name }}</div>
+                    <el-tooltip
+                      :disabled="arr.name.length > 10 ? false : true"
+                      effect="dark"
+                      :content="arr.name"
+                      placement="top"
+                    >
+                      <div :class="index == 0 ? 'name' : 'name1'">
+                        {{ arr.name }}
+                      </div>
+                    </el-tooltip>
+
                     <div :class="'state_' + arr.value"></div>
                   </div>
                 </div>
               </div>
             </el-tab-pane>
           </el-tabs>
-          <el-button type="primary" class="primary">刷新</el-button>
+          <el-button type="primary" class="primary" @click="Real_time_api"
+            >刷新</el-button
+          >
         </el-tab-pane>
         <el-tab-pane label="历史趋势" name="second" style="top: 1px">
           <el-tabs
@@ -134,23 +134,23 @@
             >
           </el-tabs>
           <div class="block">
-            <span>选择时间范围:</span>
+            <span>选择时间范围 :</span>
             <el-date-picker
-              v-model="defaultTime"
+              v-model="se_defaultTime"
               type="datetimerange"
               start-placeholder="开始日期"
               end-placeholder="结束日期"
               range-separator="~"
-              :disabledDate="disabledDate"
+              :disabledDate="se_disabledDate"
             >
             </el-date-picker>
           </div>
         </el-tab-pane>
         <el-tab-pane label="数据报表" name="third" style="top: 2px">
           <div class="block">
-            <span>选择时间范围:</span>
+            <span>选择时间范围 :</span>
             <el-date-picker
-              v-model="defaultTime"
+              v-model="th_defaultTime"
               type="datetimerange"
               start-placeholder="开始日期"
               end-placeholder="结束日期"
@@ -159,8 +159,23 @@
             >
             </el-date-picker>
             <div class="operation">
-              <el-button type="primary" class="query" :disabled="checkedCities.length > 0 ? false : true" @click="Time_all">查询</el-button>
-              <el-button type="primary" class="export" :disabled="tableData.length > 0 ? false : true">导出</el-button>
+              <el-button
+                type="primary"
+                class="query"
+                :disabled="checkedCities.length > 0 ? false : true"
+                @click="Time_all"
+                >查询</el-button
+              >
+              <el-button
+                type="primary"
+                class="export"
+                :disabled="
+                  th_tableData.length > 0 && checkedCities.length > 0
+                    ? false
+                    : true
+                "
+                >导出</el-button
+              >
             </div>
           </div>
           <div class="box">
@@ -180,38 +195,34 @@
             </el-checkbox-group>
           </div>
           <div class="table">
-            <el-table :data="tableData" style="width: 100%" height="520" show>
-              <el-table-column prop="time" label="时间" fixed>
-              </el-table-column>
-              <el-table-column label="电流 A" v-if="columnHeaders[0].isShow">
-                <el-table-column prop="name" label="A相电流"> </el-table-column>
-                <el-table-column prop="province" label="B相电流">
-                </el-table-column>
-                <el-table-column prop="city" label="C相电流"> </el-table-column>
-              </el-table-column>
-              <el-table-column label="电流 B" v-if="columnHeaders[1].isShow">
-                <el-table-column prop="name" label="B相电流"> </el-table-column>
-                <el-table-column prop="province" label="B相电流">
-                </el-table-column>
-                <el-table-column prop="city" label="B相电流"> </el-table-column>
+            <el-table
+              class="elTable"
+              :data="th_tableData"
+              style="width: 100%"
+              height="520"
+              show
+            >
+              <el-table-column
+                prop="time"
+                label="时间"
+                :render-header="labelHead"
+                fixed
+              >
               </el-table-column>
-              <!-- <el-table-column label="地址">
-                <el-table-column prop="province" label="省份" width="120">
-                </el-table-column>
-                <el-table-column prop="city" label="市区" width="120">
-                </el-table-column>
-                <el-table-column prop="address" label="地址"> </el-table-column>
-                <el-table-column prop="zip" label="邮编" width="120">
-                </el-table-column>
-                <el-table-column prop="zip" label="邮编" width="120">
-                </el-table-column>
-                <el-table-column prop="zip" label="邮编" width="120">
-                </el-table-column>
-                <el-table-column prop="zip" label="邮编" width="120">
-                </el-table-column>
-                <el-table-column prop="zip" label="邮编" width="120">
+              <template v-for="(table, index) in table_list" :key="index">
+                <el-table-column
+                  :label="table.name"
+                  v-if="columnHeaders[index].isShow"
+                >
+                  <el-table-column
+                    :render-header="labelHead"
+                    v-for="list in table.list"
+                    :key="list"
+                    :label="list.name"
+                    :prop="list.value"
+                  ></el-table-column>
                 </el-table-column>
-              </el-table-column> -->
+              </template>
 
               <template #empty>
                 <div class="zwsj">
@@ -222,20 +233,70 @@
             </el-table>
           </div>
         </el-tab-pane>
-        <devicemotore
+        <devicesecond
           v-if="activeName === 'second'"
           ref="main"
           :defaul_tTime="defaultTime"
-        ></devicemotore>
-        <el-tab-pane label="运行状态统计" name="fourth" style="top: 3px"
-          >运行状态统计</el-tab-pane
-        >
+        ></devicesecond>
+        <el-tab-pane label="运行状态统计" name="fourth" style="top: 3px">
+          <div class="ft_content">
+            <div style="display: flex">
+              <div class="ctn_one">
+                <div class="one_text">{{ loadLive }}</div>
+                <div>当前回路带电/停电</div>
+              </div>
+              <div class="ctn_one">
+                <div>{{ day_count }}</div>
+                <div>本日 OFF 次数</div>
+              </div>
+              <div class="ctn_one">
+                <div>{{ month_count }}</div>
+                <div>本月 OFF 次数</div>
+              </div>
+              <div class="ctn_one">
+                <div>0</div>
+                <div>本日 OFF 时长</div>
+              </div>
+              <div>
+                <el-button type="primary" class="primary">下载</el-button>
+              </div>
+            </div>
+            <div class="ctn_time">
+              <span>选择时间范围 :</span>
+              <el-date-picker
+                v-model="fh_defaultTime"
+                type="datetimerange"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                range-separator="~"
+                :disabledDate="disabledDate"
+              >
+              </el-date-picker>
+            </div>
+            <div class="ctn_echarts">
+              <devicedistion
+                v-if="activeName === 'fourth'"
+                ref="distion"
+                :defaul_tTime="defaultTime"
+              ></devicedistion>
+              <deviceStateCurve
+                v-if="activeName === 'fourth'"
+                ref="statecurve"
+                :defaul_tTime="defaultTime"
+              ></deviceStateCurve>
+            </div>
+          </div>
+        </el-tab-pane>
       </el-tabs>
     </div>
   </section>
 </template>
 <script>
-import devicemotore from "../site_ehcarts/Device_motore";
+import api from "../../api/site/Device_motore";
+import devicesecond from "../site_ehcarts/Device_second";
+import devicedistion from "../site_ehcarts/Device_distion";
+import deviceStateCurve from "../site_ehcarts/Device_StateCurve";
+import { ElMessage } from "element-plus";
 const cityOptions = [
   "电流",
   "功率",
@@ -248,134 +309,43 @@ const cityOptions = [
   "通讯参数",
   "电压突变",
 ];
+const time = new Date();
+const Y = time.getFullYear(); //年
+const M = time.getMonth(); //月
+const D = time.getDate(); //日
+// const timestamp = new Date().getTime();//时间戳
+
 export default {
   name: "site_details",
-  components: { devicemotore },
+  components: { devicesecond, devicedistion, deviceStateCurve },
   data() {
     return {
-      activeName: "first",
-      ac_content: "model",
-      se_content: "flow",
-      se_label: "电流",
-
-      model_array: [
-        { name: "A相电压：", value: "236.94V" },
-        { name: "B相电压：", value: "237.94V" },
-        { name: "C相电压：", value: "237.82V" },
-        { name: "回路电压：", value: "236.94V" },
-        { name: "A相电流：", value: "0A" },
-        { name: "B相电流：", value: "0A" },
-        { name: "C相电流：", value: "0A" },
-        { name: "剩余电流（漏电流）：", value: "0mA" },
-        { name: "外接温度1：", value: "-273℃" },
-        { name: "外接温度2：", value: "-273℃" },
-        { name: "外接温度3：", value: "-273℃" },
-        { name: "外接温度4：", value: "-273℃" },
-        { name: "频率：", value: "49.97Hz" },
-        { name: "AB线电压：", value: "411.06V" },
-        { name: "BC线电压：", value: "412.48V" },
-        { name: "CA线电压：", value: "410.66V" },
+      activeName: "first", //最外层tabs切换name
+      ac_content: "model", //实时数据tabs切换name
+      se_content: "flow", //历史趋势tabs切换name
+      se_label: "电流", //历史趋势label/name信息存储 tabs切换时调用接口进行判断的值
 
-        { name: "A相有功功率：", value: "0kW" },
-        { name: "A相无功功率：", value: "0kVar" },
-        { name: "A相功率因数：", value: 0 },
-        { name: "B相有功功率：", value: "0kW" },
-        { name: "B相无功功率：", value: "0kVar" },
-        { name: "B相功率因数：", value: "0" },
-        { name: "C相有功功率：", value: "0kW" },
-        { name: "C相无功功率：", value: "0kVar" },
-        { name: "C相功率因数：", value: "0" },
-        { name: "总有功功率：", value: "0kW" },
-        { name: "总无功功率：", value: "0kVar" },
-        { name: "功率因数：", value: "0" },
-        { name: "实时需量：", value: "0kW" },
-        { name: "昨日最大有功需量：", value: "0.12kW" },
+      model_array: [], //实时数据->模拟量接口返回信息存储
+      state_array: [], //实时数据->状态接口返回信息存储
+      th_tableData: [], //数据报表->table表格数据存储
 
-        { name: "昨日Pmax发生时间：", value: "1057" },
-        { name: "负序电流：", value: "0.075A" },
-        { name: "零序电流：", value: "0.05A" },
-        { name: "负序电压不平衡度：", value: "0.37%" },
-        { name: "零序电压不平衡度：", value: "0.12%" },
-        { name: "A相电压畸变率：", value: "1.59%" },
-        { name: "B相电压畸变率：", value: "1.75%" },
-        { name: "C相电压畸变率：", value: "1.6%" },
-        { name: "Ia总谐波电流：", value: "0A" },
-        { name: "Ib总谐波电流：", value: "0A" },
-        { name: "Ic总谐波电流：", value: "0A" },
-        { name: "设备温度：", value: "33.1℃" },
-        { name: "设备信号强度：", value: "29" },
-        { name: "电压暂升次数：", value: "102次" },
-        { name: "电压暂降次数：", value: "6次" },
-        { name: "电压中断次数：", value: "6次" },
+      se_defaultTime: [new Date(Y, M, D, 0, 0, 0), new Date()], //历史趋势时间选择器v-model
+      th_defaultTime: [new Date(Y, M, D, 0, 0, 0), new Date()], //数据报表时间选择器v-model
+      fh_defaultTime: [new Date(Y, M, 1, 0, 0, 0), new Date()], //运行状态统计时间选择器v-model
 
-        { name: "母线停电次数：", value: "1次" },
-        { name: "设备复位次数：", value: "0次" },
-        { name: "正有功电度：", value: "8.27.0001kWh" },
-        { name: "负有功电度：", value: "3.4kWh" },
-        { name: "正无功电度：", value: "410.2kWh" },
-        { name: "负无功电度：", value: "37kWh" },
-        { name: "尖段正向有功：", value: "0kWh" },
-        { name: "尖段反向有功：", value: "0kWh" },
-        { name: "峰段正向有功：", value: "652.8kWh" },
-        { name: "峰段反向有功：", value: "3.2kWh" },
-        { name: "平段正向有功：", value: "0kWh" },
-        { name: "平段反向有功：", value: "0kWh" },
-        { name: "谷段正向有功：", value: "157.2kWh" },
-        { name: "谷段反向有功：", value: "0.2kWh" },
-      ],
-      state_array: [
-        { name: "外接遥信1状态：", value: "OFF" },
-        { name: "外接遥信2状态：", value: "OFF" },
-        { name: "外接遥信3状态：", value: "OFF" },
-        { name: "火警预警总：", value: "OFF" },
-        { name: "线路电气故障总：", value: "OFF" },
-        { name: "电压缺相：", value: "OFF" },
-        { name: "回路带电/停电：", value: "ON" },
-        { name: "线路开关状态：", value: "ON" },
-        { name: "电压越上限告警：", value: "OFF" },
-        { name: "电压越下限告警：", value: "OFF" },
-        { name: "电流越限：", value: "OFF" },
-        { name: "回路跳闸：", value: "OFF" },
-        { name: "母线停电：", value: "OFF" },
-        { name: "剩余电流超限：", value: "OFF" },
-        { name: "测温点T1超温：", value: "OFF" },
-        { name: "测温点T2超温：", value: "OFF" },
-        { name: "测温点T3超温：", value: "OFF" },
+      disabledDate(date) {
+        return date.getTime() > new Date(); //公共时间选择器 控制当前时间之后的时间无法选择
+      },
 
-        { name: "测温点T4超温：", value: "OFF" },
-        { name: "设备温度越限：", value: "OFF" },
-        { name: "A相燃弧：", value: "OFF" },
-        { name: "B相燃弧：", value: "OFF" },
-        { name: "C相燃弧：", value: "OFF" },
-        { name: "电压谐波越限：", value: "OFF" },
-        { name: "电流谐波越限：", value: "OFF" },
-        { name: "视在需量超限：", value: "OFF" },
-        { name: "测量通道故障：", value: "OFF" },
-        { name: "设备异常：", value: "OFF" },
-        { name: "消音：", value: "OFF" },
-        { name: "继电器1状态：", value: "OFF" },
-        { name: "继电器2状态：", value: "OFF" },
-        { name: "备用遥信1：", value: "OFF" },
-        { name: "备用遥信2：", value: "OFF" },
-        { name: "备用遥信3：", value: "OFF" },
-        { name: "备用遥信4：", value: "OFF" },
-      ],
+      loadLive: "ON", //运行状态统计->当前回路带电/停电
+      month_count: 0, //运行状态统计->本月off次数
+      day_count: 0, //运行状态统计->本日off次数
 
       value: "",
-      defaultTime: [
-        new Date(2021, 6, 1, 0, 0, 0),
-        new Date(2021, 6, 1, 12, 0, 0),
-      ],
-      disabledDate(date) {
-        return date.getTime() > new Date();
-      },
       checkAll: false,
       checkedCities: [],
       cities: cityOptions,
       isIndeterminate: false,
-      tableData: [],
-
-      msg: "暂无数据",
 
       columnHeaders: [
         { index: 0, title: "电流", isShow: false },
@@ -384,58 +354,108 @@ export default {
         { index: 3, title: "电压", isShow: false },
         { index: 4, title: "温度", isShow: false },
         { index: 5, title: "频率", isShow: false },
+        { index: 6, title: "功率因数", isShow: false },
+        { index: 7, title: "谐波电流有效值", isShow: false },
+        { index: 8, title: "通讯参数", isShow: false },
+        { index: 9, title: "电压突变", isShow: false },
+      ],
+
+      table_list: [
+        {
+          name: "电流",
+          list: [
+            { name: "A相电流", value: "name" },
+            { name: "B相电流", value: "name" },
+            { name: "C相电流", value: "name" },
+          ],
+        },
+        {
+          name: "功率",
+          list: [
+            { name: "A相有功功率 kW", value: "name" },
+            { name: "A相无功功率 kVar", value: "name" },
+            { name: "B相有功功率 kW", value: "name" },
+            { name: "B相无功功率 kVar", value: "name" },
+            { name: "C相有功功率 kW", value: "name" },
+            { name: "C相无功功率 kVar", value: "name" },
+            { name: "总有功功率 kW", value: "name" },
+            { name: "总无功功率 kW", value: "name" },
+            { name: "实时需量 kW", value: "name" },
+          ],
+        },
         {
-          index: 6,
-          title: "功率因数",
-          isShow: false,
+          name: "电度",
+          list: [
+            { name: "正有功电度 kWh", value: "name" },
+            { name: "负有功电度 kWh", value: "name" },
+            { name: "正无功电度 kvarh", value: "name" },
+            { name: "负无功电度 kvarh", value: "name" },
+          ],
         },
         {
-          index: 7,
-          title: "谐波电流有效值",
-          isShow: false,
+          name: "电压",
+          list: [
+            { name: "A相电压 kV", value: "name" },
+            { name: "B相电压 kV", value: "name" },
+            { name: "C相电压 kV", value: "name" },
+            { name: "回路电压 V", value: "name" },
+            { name: "AB线电压 V", value: "name" },
+            { name: "BC线电压 V", value: "name" },
+            { name: "CA线电压 V", value: "name" },
+          ],
         },
         {
-          index: 8,
-          title: "通讯参数",
-          isShow: false,
+          name: "温度 ℃",
+          list: [
+            { name: "外接温度1", value: "name" },
+            { name: "外接温度2", value: "name" },
+            { name: "外接温度3", value: "name" },
+            { name: "外接温度4", value: "name" },
+            { name: "环境温度", value: "name" },
+          ],
         },
         {
-          index: 9,
-          title: "电压突变",
-          isShow: false,
+          name: "频率 Hz",
+          list: [{ name: "频率", value: "name" }],
+        },
+        {
+          name: "功率因数",
+          list: [
+            { name: "A相功率因数", value: "name" },
+            { name: "B相功率因数", value: "name" },
+            { name: "C相功率因数", value: "name" },
+            { name: "功率因数", value: "name" },
+          ],
+        },
+        {
+          name: "谐波电流有效值 A",
+          list: [
+            { name: "Ia总谐波电流", value: "name" },
+            { name: "Ib总谐波电流	", value: "name" },
+            { name: "Ic总谐波电流", value: "name" },
+          ],
+        },
+        {
+          name: "通讯参数",
+          list: [{ name: "设备信号强度", value: "name" }],
+        },
+        {
+          name: "电压突变 次",
+          list: [
+            { name: "电压暂升次数", value: "name" },
+            { name: "电压暂降次数	", value: "name" },
+            { name: "电压中断次数", value: "name" },
+          ],
         },
       ],
     };
   },
   mounted() {
+    this.Real_time_api();
   },
   methods: {
-    preservation() {
-      console.log(this.$refs.main.chart);
-      var url = this.$refs.main.chart.getConnectedDataURL({
-        pixelRatio: 15,
-        backgroundColor: "black",
-        excludeComponents: ["toolbox"],
-        type: "png",
-      });
-      var $a = document.createElement("a");
-      var type = "png";
-      //图片名称
-      $a.download = this.se_label + "." + type;
-      $a.target = "_blank";
-      $a.href = url;
-      if (typeof MouseEvent === "function") {
-        var evt = new MouseEvent("click", {
-          view: window,
-          bubbles: true,
-          cancelable: false,
-        });
-        $a.dispatchEvent(evt);
-      }
-    },
     //最外层tabs切换事件触发
     handleClick(tab, event) {
-      // this.Time_all();
       //   console.log(tab, event);
       //   console.log(tab.props.name)
       this.ac_content = "model";
@@ -450,21 +470,22 @@ export default {
           }
         }
       }
+      if (tab.props.name === "fourth") {
+        this.Operation_status_api();
+      }
     },
-    //实时数据 内部tabs 点击事件触发
-    handleClick1(tab, event) {
-      console.log(tab, event);
-    },
+
     //历史趋势 内部tabs 点击事件触发
     handleClick2(tab, event) {
       console.log(tab, event);
       this.se_label = tab.props.label;
     },
+
     Time_all() {
       // console.log(this.defaultTime)
       // console.log("bbbbbbb",data)
       // this.$emit("func", this.defaultTime);
-      this.tableData = [
+      this.th_tableData = [
         {
           time: "2016-05-03",
           name: "1",
@@ -617,25 +638,128 @@ export default {
           address: "2市3金沙江路 1518 弄",
           zip: 200333,
         },
-      ]
+      ];
     },
+
+    //数据报表全选按钮事件
     handleCheckAllChange(val) {
       this.checkedCities = val ? cityOptions : [];
       this.isIndeterminate = false;
     },
+    //数据报表多选按钮事件
     handleCheckedCitiesChange(value) {
       let checkedCount = value.length;
       this.checkAll = checkedCount === this.cities.length;
       this.isIndeterminate =
         checkedCount > 0 && checkedCount < this.cities.length;
     },
+    // 控制table中title盒子宽度
+    labelHead(h) {
+      let l = h.column.label.length;
+      if (l <= 6) {
+        l = l + 10;
+      }
+      let f = 16; //每个字大小，其实是每个字的比例值，大概会比字体大小差不多大一点，
+      if (h.column.label === "时间") {
+        h.column.minWidth = 100;
+      } else {
+        h.column.minWidth = f * l; //字大小乘个数即长度 ,注意不要加px像素，这里minWidth只是一个比例值，不是真正的长度 //然后将列标题放在一个div块中，注意块的宽度一定要100%，否则表格显示不完全
+      }
+      return (
+        "div",
+        { class: "table-head", style: { width: "100%" } },
+        [h.column.label]
+      );
+    },
+    //实时数据 内部tabs 点击事件触发
+    handleClick1(tab, event) {
+      // console.log(tab, event);
+      tab || event;
+      // this.Real_time_api();
+    },
+    //实时数据api请求
+    Real_time_api() {
+      var _this = this;
+      //模拟量api请求
+      function rtAnalogData() {
+        api.rtAnalogData({ siteId: 1 }).then((requset) => {
+          if (requset.status === "SUCCESS") {
+            _this.model_array = requset.data;
+          } else {
+            ElMessage.success({
+              message: requset.msg,
+              type: "success",
+            });
+          }
+        });
+      }
+      //状态量api请求
+      function rtSwitchData() {
+        api.rtSwitchData({ siteId: 1 }).then((requset) => {
+          if (requset.status === "SUCCESS") {
+            for (let i in requset.data) {
+              requset.data[i].value == 0
+                ? (requset.data[i].value = "OFF")
+                : (requset.data[i].value = "ON");
+            }
+            _this.state_array = requset.data;
+          } else {
+            ElMessage.success({
+              message: requset.msg,
+              type: "success",
+            });
+          }
+        });
+      }
+      this.ac_content === "model"
+        ? rtAnalogData()
+        : this.ac_content === "states"
+        ? rtSwitchData()
+        : "";
+    },
+    //运行状态统计api请求
+    Operation_status_api() {
+      var _this = this;
+      function LoopStatus() {
+        api.LoopStatus({ siteId: 2 }).then((requset) => {
+          // console.log(requset);
+          _this.loadLive = requset.data.LoadLive;
+          _this.month_count = requset.data.month_count;
+          _this.day_count = requset.data.day_count;
+        });
+      }
+      LoopStatus();
+    },
+    //历史趋势ehcarts保存图片
+    preservation() {
+      var url = this.$refs.main.chart.getConnectedDataURL({
+        pixelRatio: 15,
+        backgroundColor: "black",
+        excludeComponents: ["toolbox"],
+        type: "png",
+      });
+      var $a = document.createElement("a");
+      var type = "png";
+      //图片名称
+      $a.download = this.se_label + "." + type;
+      $a.target = "_blank";
+      $a.href = url;
+      if (typeof MouseEvent === "function") {
+        var evt = new MouseEvent("click", {
+          view: window,
+          bubbles: true,
+          cancelable: false,
+        });
+        $a.dispatchEvent(evt);
+      }
+    },
   },
   watch: {
     /**
      * @title 监听列显示隐藏
      */
     checkedCities(newArrayVal) {
-      newArrayVal.length <= 0 ? this.tableData=[] : ''
+      newArrayVal.length <= 0 ? (this.th_tableData = []) : "";
       // 计算为被选中的列标题数组
       var nonSelecteds = this.columnHeaders
         .filter((item) => newArrayVal.indexOf(item.title) == -1)
@@ -656,6 +780,42 @@ export default {
 };
 </script>
 
+<style>
+/* 
+  运行状态统计css样式
+*/
+.ft_content {
+  margin: 0 15px;
+}
+.ft_content div:nth-child(1) .ctn_one {
+  width: 2.675rem;
+  height: 81px;
+  border-radius: 3px;
+  box-shadow: 0 0 10px rgba(0, 244, 253, 0.7) inset;
+  background-color: rgba(8, 31, 47, 1);
+  text-align: center;
+  margin-right: 0.5rem;
+  padding: 10px;
+}
+.ft_content div:nth-child(1) .ctn_one div:nth-child(1) {
+  height: 40px;
+  line-height: 40px;
+  font-size: 0.3rem;
+  font-family: Impact Regular, Impact Regular-Regular;
+  font-weight: 400;
+  color: #00f4fd;
+}
+.ft_content div:nth-child(1) .ctn_one .one_text {
+  color: red !important;
+}
+.ft_content .ctn_time {
+  margin-top: 15px;
+}
+.ft_content .ctn_time > span {
+  margin-right: 10px;
+}
+</style>
+
 <style>
 /* 
   数据报表css样式
@@ -694,21 +854,7 @@ export default {
 #pane-third .block span {
   padding: 0 10px;
 }
-#pane-third .el-input__inner {
-  width: 414px !important;
-  height: 30px !important;
-  line-height: 30px !important;
-  background-color: transparent;
-  border: 1px solid rgba(3, 107, 119, 1);
-}
-#pane-third .el-range-input {
-  background-color: transparent;
-  color: #fff;
-}
-#pane-third .el-range-separator {
-  line-height: 20px;
-  color: #fff;
-}
+
 #pane-third .operation {
   float: right;
   margin-right: 10px;
@@ -835,6 +981,11 @@ export default {
   height: 374px !important;
   z-index: 1;
 } */
+
+/* .elTable .cell {
+  white-space: nowrap;
+  display:inline;
+} */
 </style>
 
 <style>
@@ -875,7 +1026,7 @@ export default {
   min-height: 35px !important;
   line-height: 10px;
   height: 35px;
-  margin: 5px 0.4rem 5px 0px;
+  margin: 2px 0.4rem 5px 0px;
 }
 .se-content #tab-flow {
   border-left: 1px rgba(0, 244, 253, 0.1) solid;
@@ -884,15 +1035,8 @@ export default {
 #pane-second .block {
   margin-top: 3px;
 }
-#pane-second .el-input__inner {
-  width: 414px !important;
-  height: 30px !important;
-  line-height: 30px !important;
-  background-color: transparent;
-  border: 1px solid rgba(3, 107, 119, 1);
-}
+
 #pane-second span {
-  font-size: 0.2rem;
   padding: 0 10px;
   font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
 }
@@ -900,10 +1044,6 @@ export default {
   background-color: transparent;
   color: #fff;
 }
-#pane-second .el-range-separator {
-  line-height: 20px;
-  color: #fff;
-}
 </style>
 
 <style>
@@ -945,7 +1085,12 @@ export default {
   height: 1px !important;
   background-color: rgba(0, 244, 253, 0.1) !important;
 }
+</style>
 
+<style>
+/* 
+ 实时数据css样式
+*/
 .ac-content {
   height: 100%;
 }
@@ -973,15 +1118,12 @@ export default {
   line-height: 8px;
   z-index: 10;
 }
-</style>
 
-<style>
 /* 
   模拟量css样式
  */
 .ac-content .model > div {
   width: 25%;
-  height: 580px;
   margin-top: 10px;
 }
 .ac-content .model .display {
@@ -994,6 +1136,9 @@ export default {
   text-align: right;
   width: 50%;
   color: rgba(255, 255, 255, 1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .ac-content .model .display div:nth-child(2) {
   height: 36px;
@@ -1003,15 +1148,17 @@ export default {
   text-align: left;
   padding-left: 0.7rem;
   color: rgba(1, 201, 208, 1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-</style>
 
-<style>
 /* 
   状态量css样式
  */
 .ac-content .states {
   display: flex;
+  margin-top: 10px;
 }
 .ac-content .states > div {
   width: 50%;
@@ -1022,6 +1169,13 @@ export default {
   font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
   font-weight: 400;
 }
+.ac-content .states .display .name1,
+.name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .ac-content .states .display > div:nth-child(1) {
   border-bottom: 1px solid rgba(0, 244, 253, 0.1);
   width: 100%;
@@ -1059,4 +1213,25 @@ export default {
   margin-top: 6px;
   margin-left: 0.2rem;
 }
-</style>
+</style>
+
+<style>
+/* 
+  公共时间选择器css样式
+*/
+#device_tabs .el-input__inner {
+  width: 414px !important;
+  height: 30px !important;
+  line-height: 30px !important;
+  background-color: transparent;
+  border: 1px solid rgba(3, 107, 119, 1);
+}
+#device_tabs .el-range-input {
+  background-color: transparent;
+  color: #fff;
+}
+#device_tabs .el-range-separator {
+  line-height: 20px;
+  color: #fff;
+}
+</style>

src/views/site_ehcarts/Device_StateCurve.vue

@@ -0,0 +1,221 @@
+<template>
+  <div
+    ref="statecurve"
+    :class="className"
+    :style="{ height: height, width: width }"
+  ></div>
+</template>
+<script>
+import * as echarts from "echarts";
+
+export default {
+  props: {
+    defaul_tTime: {
+      type: Array,
+    },
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "260px",
+    },
+    perData: {
+      type: Array,
+      default: () => [
+        {
+          color: "#01ACFF",
+          name: "摄像头",
+          value: [39],
+          // nAmount: 566557.14,
+        },
+      ],
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      color_XY: "rgba(0, 244, 253, 0.1)",
+      itemStyle: [
+        {
+          normal: {
+            borderColor: "rgba(0,244,253,1)",
+            borderWidth: 2,
+            color: "rgba(6, 68, 83, 1)",
+            lineStyle: {
+              width: 2, //折线宽度
+              color: "rgba(0,244,253,1)",
+            },
+          },
+        },
+        {
+          normal: {
+            borderColor: "rgba(253,143,0,1)",
+            borderWidth: 2,
+            color: "rgba(6, 68, 83, 1)",
+            lineStyle: {
+              width: 2, //折线宽度
+              color: "rgba(253,143,0,1)",
+            },
+          },
+        },
+        {
+          normal: {
+            borderColor: "rgba(0,255,18,1)",
+            borderWidth: 2,
+            color: "rgba(6, 68, 83, 1)",
+            lineStyle: {
+              width: 2, //折线宽度
+              color: "rgba(0,255,18,1)",
+            },
+          },
+        },
+      ],
+      msgFormSon: null,
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+      console.log(this.defaul_tTime);
+    });
+  },
+  beforeUnmount() {
+    window.removeEventListener("resize", this.chart);
+  },
+  methods: {
+    //次数分布折线图
+    initChart() {
+      var chart = echarts.init(this.$refs.statecurve);
+      var data = ["2021-07-01 00:00:00", "2021-07-13 16:03:00"];
+      var option;
+      option = {
+        title: [
+          {
+            text: "运行状态曲线",
+            left: "center",
+            textStyle: {
+              color: "#fff",
+              fontSize: 14,
+            },
+          },
+          {
+            text: `OFF时长：${0}分钟`,
+            left: "right",
+            padding: [0, "7", 0, 0],
+            textStyle: {
+              color: "#fff",
+              fontSize: 14,
+            },
+          },
+        ],
+        tooltip: {
+          backgroundColor: "rgba(0, 244, 253, 0.1)",
+          borderColor: "rgba(0, 244, 253, 0.3)",
+          textStyle: {
+            color: "#fff",
+          },
+          trigger: "axis",
+          axisPointer: {
+            type: "line",
+          },
+          formatter: function (params) {
+            // console.log(params);
+            var res = params[0].data[0];
+            for (let i in params) {
+              res += `
+              <div style="display:flex">
+                  <div style="width:10px;height:10px;background:${
+                    params[i].color
+                  };border-radius: 10px;margin:10px 0;"></div>
+                  <div style="padding:4px 0px 0px 10px;">${
+                    params[i].seriesName
+                  }:</div>
+                  <div style="padding:4px 0px 0px 10px;">${
+                    params[i].data[1] == 1 ? "ON" : "OFF"
+                  }</div>
+              </div>`; //可以在这个方法中做改变
+            }
+            return res;
+          },
+        },
+        xAxis: {
+          type: "time",
+          boundaryGap: false,
+          nameTextStyle: {
+            // 名称样式
+            fontSize: 12,
+            color: "#fff",
+            fontWeight: "bold",
+          },
+
+          axisLabel: {
+            textStyle: {
+              color: "#fff", //坐标值得具体的颜色
+            },
+            formatter: {
+              year: "{MM}-{dd}\n{yyyy}",
+              month: `{MM}-{dd}\n{yyyy}`,
+              day: `{MM}-{dd}\n{yyyy}`,
+              hour: "{HH}:{mm}\n{MM}-{dd}",
+              minute: "{HH}:{mm}",
+              second: "{HH}:{mm}:{ss}",
+              millisecond: "{hh}:{mm}:{ss} {SSS}",
+              none: "{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}",
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: this.color_XY,
+            },
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "10%",
+          containLabel: true,
+        },
+        yAxis: {
+          type: "value",
+          splitNumber: 1,
+          min: 0,
+          max: 1,
+          axisLabel: {
+            formatter: function (value) {
+              var texts = [];
+              if (value == 0) {
+                texts.push("OFF");
+              } else {
+                texts.push("ON");
+              }
+              return texts;
+            },
+          },
+        },
+        series: [
+          {
+            name: "回路带电/停电",
+            type: "line",
+            smooth: true,
+            data: [1, 1].map((val, ind) => {
+              return [data[ind], val];
+            }),
+          },
+        ],
+      };
+
+      chart.setOption(option);
+      window.addEventListener("resize", () => {
+        chart.resize();
+      });
+      this.chart = chart;
+    },
+  },
+};
+</script>

src/views/site_ehcarts/Device_distion.vue

@@ -0,0 +1,221 @@
+<template>
+  <div
+    ref="distion"
+    :class="className"
+    :style="{ height: height, width: width }"
+  ></div>
+</template>
+<script>
+import * as echarts from "echarts";
+
+export default {
+  props: {
+    defaul_tTime: {
+      type: Array,
+    },
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "400px",
+    },
+    perData: {
+      type: Array,
+      default: () => [
+        {
+          color: "#01ACFF",
+          name: "摄像头",
+          value: [39],
+          // nAmount: 566557.14,
+        },
+      ],
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      color_XY: "rgba(0, 244, 253, 0.1)",
+      itemStyle: [
+        {
+          normal: {
+            borderColor: "rgba(0,244,253,1)",
+            borderWidth: 2,
+            color: "rgba(6, 68, 83, 1)",
+            lineStyle: {
+              width: 2, //折线宽度
+              color: "rgba(0,244,253,1)",
+            },
+          },
+        },
+        {
+          normal: {
+            borderColor: "rgba(253,143,0,1)",
+            borderWidth: 2,
+            color: "rgba(6, 68, 83, 1)",
+            lineStyle: {
+              width: 2, //折线宽度
+              color: "rgba(253,143,0,1)",
+            },
+          },
+        },
+        {
+          normal: {
+            borderColor: "rgba(0,255,18,1)",
+            borderWidth: 2,
+            color: "rgba(6, 68, 83, 1)",
+            lineStyle: {
+              width: 2, //折线宽度
+              color: "rgba(0,255,18,1)",
+            },
+          },
+        },
+      ],
+      msgFormSon: null,
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+      console.log(this.defaul_tTime);
+    });
+  },
+  beforeUnmount() {
+    window.removeEventListener("resize", this.chart);
+  },
+  methods: {
+    //次数分布折线图
+    initChart() {
+      var chart = echarts.init(this.$refs.distion);
+      var option;
+      var data = ["2021-07-01 00:00:00", "2021-07-02 00:00:00","2021-07-03 00:00:00", "2021-07-04 00:00:00", "2021-07-05 00:00:00","2021-07-06 00:00:00", "2021-07-13 16:03:00"];
+      option = {
+        title: [
+          {
+            text: "OFF次数分布",
+            left: "center",
+            textStyle: {
+              color: "#fff",
+              fontSize: 14,
+            },
+          },
+          {
+            text: `OFF次数：${0}`,
+            left: "right",
+            padding: [0, "7", 0, 0],
+            textStyle: {
+              color: "#fff",
+              fontSize: 14,
+            },
+          },
+        ],
+        tooltip: {
+          backgroundColor: "rgba(0, 244, 253, 0.1)",
+          borderColor: "rgba(0, 244, 253, 0.3)",
+          textStyle: {
+            color: "#fff",
+          },
+          trigger: "axis",
+          axisPointer: {
+            type: "line",
+          },
+          formatter: function (params) {
+            // console.log(params);
+            var res = params[0].data[0];
+            for (let i in params) {
+              res += `
+              <div style="display:flex">
+                  <div style="width:10px;height:10px;background:${
+                    params[i].color
+                  };border-radius: 10px;margin:10px 0;"></div>
+                  <div style="padding:4px 0px 0px 10px;">${
+                    params[i].seriesName
+                  }:</div>
+                  <div style="padding:4px 0px 0px 10px;">${
+                    params[i].data[1] == 1 ? "ON" : "OFF"
+                  }</div>
+              </div>`; //可以在这个方法中做改变
+            }
+            return res;
+          },
+        },
+        xAxis: {
+          type: "time",
+          boundaryGap: false,
+          nameTextStyle: {
+            // 名称样式
+            fontSize: 12,
+            color: "#fff",
+            fontWeight: "bold",
+          },
+
+          axisLabel: {
+            textStyle: {
+              color: "#fff", //坐标值得具体的颜色
+            },
+            formatter: {
+              year: "{MM}-{dd}\n{yyyy}",
+              month: `{MM}-{dd}\n{yyyy}`,
+              day: `{MM}-{dd}\n{yyyy}`,
+              hour: "{HH}:{mm}\n{MM}-{dd}",
+              minute: "{HH}:{mm}",
+              second: "{HH}:{mm}:{ss}",
+              millisecond: "{hh}:{mm}:{ss} {SSS}",
+              none: "{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}",
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: this.color_XY,
+            },
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "10%",
+          containLabel: true,
+        },
+        yAxis: {
+          type: "value",
+          splitNumber: 1,
+          min: 0,
+          max: 1,
+          axisLabel: {
+            formatter: function (value) {
+              var texts = [];
+              if (value == 0) {
+                texts.push("OFF");
+              } else {
+                texts.push("ON");
+              }
+              return texts;
+            },
+          },
+        },
+        series: [
+          {
+            name: "回路带电/停电",
+            type: "line",
+            smooth: true,
+            data: [1, 1,1,0,1,1,1].map((val, ind) => {
+              return [data[ind], val];
+            }),
+          },
+        ],
+      };
+
+      chart.setOption(option);
+      window.addEventListener("resize", () => {
+        chart.resize();
+      });
+      this.chart = chart;
+    },
+  },
+};
+</script>

src/views/site_ehcarts/Device_motore.vue → src/views/site_ehcarts/Device_second.vue

@@ -82,7 +82,6 @@ export default {
   mounted() {
     this.$nextTick(() => {
       this.initChart();
-      // this.getMsgFormSon();
       console.log(this.defaul_tTime);
     });
   },
@@ -90,6 +89,7 @@ export default {
     window.removeEventListener("resize", this.chart);
   },
   methods: {
+    //历史趋势折线图
     initChart() {
       var chart = echarts.init(this.$refs.main);
       var option;
@@ -301,12 +301,6 @@ export default {
       });
       this.chart = chart;
     },
-    getMsgFormSon() {
-      // this.$emit("func", "aaaaaaaaaaaaaaaaaaaa");
-      console.log("aaaaaaaaaaaa");
-      // this.msgFormSon = data;
-      // console.log(this.msgFormSon);
-    },
-  },
+  }
 };
 </script>

test/index.html

@@ -6,6 +6,8 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="favicon.ico">
+    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=8e266e1ac2ad2383c7773ff504ac248f"></script>
+    <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
     <title>
         vue-webtopo-svgeditor
     </title>

test/static/config.js

@@ -1,6 +1,7 @@
 // api 请求路径
 var PLATFROM_CONFIG = {};
-PLATFROM_CONFIG.baseUrl = "http://121.40.217.77:8081/"
+// PLATFROM_CONFIG.baseUrl = "http://121.40.217.77:8081/"
+PLATFROM_CONFIG.baseUrl = "http://172.16.120.155:8010/"
 
 
 //alarming WEBSOCKET