'202206241432'

src/api/site/Device_motore.js

@@ -59,4 +59,13 @@ export default {
             params: params
         })
     },
+
+    // 当前设备下拉数据
+    deviceListTwo(params) {
+        return request({
+            url: `device/deviceListTwo`,
+            method: 'GET',
+            params: params
+        })
+    },
 }

src/assets/css/index.css

@@ -175,11 +175,11 @@ header {
 
 /* el-select 下拉框 样式 */
 
-.select-trigger .el-input__suffix {
+.select .select-trigger .el-input__suffix {
     line-height: 1rem !important;
 }
 
-.select-trigger .el-input--suffix .el-input__inner {
+.select .select-trigger .el-input--suffix .el-input__inner {
     margin-top: 0.2rem;
     width: 2rem !important;
     height: 0.375rem !important;
@@ -190,18 +190,18 @@ header {
     border-radius: 0px !important;
 }
 
-.select-trigger .el-input--suffix .el-input__icon {
+.select .select-trigger .el-input--suffix .el-input__icon {
     width: 0.3125rem;
     line-height: 0.375rem !important;
 }
 
-.select-trigger .el-input--suffix .el-select__caret {
+.select .select-trigger .el-input--suffix .el-select__caret {
     color: #4BF4F9 !important;
     font-size: 0.175rem !important;
 }
 
-.select-trigger .el-input__prefix,
-.select-trigger .el-input__suffix {
+.select .select-trigger .el-input__prefix,
+.select .select-trigger .el-input__suffix {
     top: -0.30rem !important;
 }
 

src/views/site/Device_motore.vue

@@ -16,48 +16,51 @@
     >
       <el-tabs v-model="activeName" @tab-click="handleClick" id="device_tabs">
         <el-tab-pane label="实时数据" name="first">
-          <el-tabs
-            v-model="ac_content"
-            @tab-click="handleClick1"
-            class="ac-content"
-          >
-            <el-tab-pane
-              label="模拟量"
-              name="model"
-              style="display: flex"
-              class="model"
-            >
-              <div v-for="(all, index) in 4" :key="index">
-                <div
-                  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"
-                >
-                  <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"
+          <el-tabs v-model="ac_content" class="ac-content">
+            <el-tab-pane label="模拟量" name="model">
+              <div class="model" style="display: flex">
+                <div v-for="(all, index) in 4" :key="index">
+                  <div
+                    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.value }}</div>
-                  </el-tooltip>
+                    <el-tooltip
+                      :disabled="tooltipDisabled"
+                      effect="dark"
+                      :content="arr.name"
+                      placement="top"
+                    >
+                      <div
+                        @mouseenter="spanMouseenter($event)"
+                        @mouseleave="spanMouseenter($event)"
+                      >
+                        {{ arr.name }}
+                      </div>
+                    </el-tooltip>
+                    <el-tooltip
+                      :disabled="tooltipDisabled"
+                      effect="dark"
+                      :content="arr.value"
+                      placement="top"
+                    >
+                      <div
+                        @mouseenter="spanMouseenter($event)"
+                        @mouseleave="spanMouseenter($event)"
+                      >
+                        {{ arr.value }}
+                      </div>
+                    </el-tooltip>
+                  </div>
                 </div>
               </div>
             </el-tab-pane>
@@ -89,6 +92,39 @@
               </div>
             </el-tab-pane>
           </el-tabs>
+
+          <div
+            style="
+              position: absolute;
+              top: 0;
+              left: 0;
+              z-index: 10;
+              color: #00f4fd;
+              font-weight: 400;
+              font-size: 0.2rem;
+              height: 34px;
+              line-height: 34px;
+              padding-left: 15px;
+            "
+          >
+            <span>当前设备：</span>
+            <el-select
+              v-model="deviceSelectValue"
+              @change="el_select"
+              placeholder="请选择"
+              popper-class="menu_select deviceSelect"
+              id="deviceSelect"
+              filterable
+            >
+              <el-option
+                v-for="(item, index) in deviceSelectOptions"
+                :key="index"
+                :label="item.deviceName"
+                :value="item.deviceCode"
+              >
+              </el-option>
+            </el-select>
+          </div>
           <el-button
             type="primary"
             class="primary"
@@ -113,8 +149,9 @@
               >保存为图片</el-button
             >
           </el-tabs>
+
           <div class="block">
-            <span>选择时间范围 :</span>
+            <span style="padding: 0 15px">选择时间范围 :</span>
             <el-date-picker
               @change="HistoricalCurve_api($store.state.siteId)"
               v-model="se_defaultTime"
@@ -122,9 +159,28 @@
               start-placeholder="开始日期"
               end-placeholder="结束日期"
               range-separator="~"
+              id="seDateTime"
               :disabledDate="disabledDate"
             >
             </el-date-picker>
+
+            <span style="padding-left: 15px">当前设备：</span>
+            <el-select
+              v-model="deviceSelectValue"
+              @change="el_select"
+              placeholder="请选择"
+              popper-class="deviceSelect"
+              id="seDeviceSelect"
+              filterable
+            >
+              <el-option
+                v-for="(item, index) in deviceSelectOptions"
+                :key="index"
+                :label="item.deviceName"
+                :value="item.deviceCode"
+              >
+              </el-option>
+            </el-select>
           </div>
         </el-tab-pane>
         <el-tab-pane label="数据报表" name="third" style="top: 2px">
@@ -307,11 +363,7 @@ export default {
     devicedistion,
     deviceStateCurve,
   },
-  computed: {
-    increment() {
-      return this.$store.state.siteId;
-    },
-  },
+
   data() {
     return {
       activeName: "first", //最外层tabs切换name
@@ -355,10 +407,24 @@ export default {
         { index: 8, title: "通讯参数", isShow: false },
         { index: 9, title: "电压突变", isShow: false },
       ], //数据报表->控制table表格是否显示隐藏
+
+      deviceSelectOptions: [],
+      deviceSelectValue: "",
+
+      tooltipDisabled: true,
     };
   },
   mounted() {},
   methods: {
+    //tooltip提示
+    spanMouseenter(ev) {
+      if (ev.target.clientWidth < ev.target.scrollWidth) {
+        this.tooltipDisabled = false;
+      } else {
+        this.tooltipDisabled = true;
+      }
+    },
+
     //最外层tabs切换事件触发
     handleClick(tab, event) {
       this.th_tableData = [];
@@ -376,12 +442,6 @@ export default {
       }
       this.If_tabs_api(this.$store.state.siteId);
     },
-    //实时数据 内部tabs 点击事件触发
-    handleClick1(tab, event) {
-      // console.log(tab, event);
-      tab || event;
-      this.If_tabs_api(this.$store.state.siteId);
-    },
     //历史趋势 内部tabs 点击事件触发
     handleClick2(tab, event) {
       tab || event;
@@ -403,6 +463,28 @@ export default {
       this.isIndeterminate =
         checkedCount > 0 && checkedCount < this.cities.length;
     },
+    //设备下拉change事件
+    el_select(val) {
+      this.If_tabs_api(this.$store.state.siteId);
+      this.deviceSelectValue = val;
+    },
+
+    /**
+     * @设备下拉api请求
+     */
+    DeviceListTwoApi() {
+      api
+        .deviceListTwo({ siteId: this.$store.state.siteId })
+        .then((requset) => {
+          if (requset.status === "SUCCESS") {
+            this.deviceSelectOptions = requset.data;
+            this.deviceSelectValue = requset.data[0].deviceCode;
+            this.If_tabs_api(this.$store.state.siteId);
+          } else {
+            ElMessage.error(requset.msg);
+          }
+        });
+    },
     /**
      * @数据报表api请求
      */
@@ -461,19 +543,22 @@ export default {
      */
     Real_time_api(siteid) {
       var _this = this;
+
       //模拟量api请求
-      function rtAnalogData() {
-        api.rtAnalogData({ siteId: siteid }).then((requset) => {
+      api
+        .rtAnalogData({ siteId: siteid, deviceCode: _this.deviceSelectValue })
+        .then((requset) => {
           if (requset.status === "SUCCESS") {
             _this.model_array = requset.data;
           } else {
             ElMessage.error(requset.msg);
           }
         });
-      }
+
       //状态量api请求
-      function rtSwitchData() {
-        api.rtSwitchData({ siteId: siteid }).then((requset) => {
+      api
+        .rtSwitchData({ siteId: siteid, deviceCode: _this.deviceSelectValue })
+        .then((requset) => {
           if (requset.status === "SUCCESS") {
             for (let i in requset.data) {
               requset.data[i].value == 0
@@ -485,12 +570,6 @@ export default {
             ElMessage.error(requset.msg);
           }
         });
-      }
-      this.ac_content === "model"
-        ? rtAnalogData()
-        : this.ac_content === "states"
-        ? rtSwitchData()
-        : "";
     },
     /**
      * @运行状态统计api请求
@@ -541,6 +620,7 @@ export default {
           startTime: time[0],
           endTime: time[1],
           queryType: _this.se_content,
+          deviceCode: _this.deviceSelectValue,
         })
         .then((requset) => {
           if (requset.status === "SUCCESS") {
@@ -607,11 +687,11 @@ export default {
     /**
      * @监听vuex存储值变化 用于调用api
      */
-    increment: {
+    "$store.state.siteId": {
       immediate: true, // 首次加载的时候执行函数
       deep: true, // 深入观察,监听数组值，对象属性值的变化
       handler: function () {
-        this.If_tabs_api(this.$store.state.siteId);
+        this.DeviceListTwoApi();
       },
     },
     /**
@@ -888,7 +968,8 @@ export default {
 }
 
 #pane-second span {
-  padding: 0 10px;
+  padding: 0 0px;
+  /* padding: 0 10px; */
   font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
 }
 #pane-second .el-range-input {
@@ -1066,14 +1147,106 @@ export default {
 }
 </style>
 
+<style lang="less">
+/**
+  公共数据下拉选择器css样式
+ */
+.deviceSelect .el-popper__arrow::before {
+  border-top-color: transparent !important;
+  border-left-color: transparent !important;
+  background: rgba(0, 244, 253, 1) !important;
+}
+.el-select__popper {
+  background-color: #082333 !important;
+}
+
+.deviceSelect {
+  border: 1px solid rgba(3, 107, 119, 1) !important;
+  > div {
+    border: transparent !important;
+  }
+}
+.el-select-dropdown__item.selected {
+  color: rgba(0, 244, 253, 1) !important;
+}
+.el-select-dropdown__item {
+  color: #fff !important;
+  padding: 0 20px !important;
+  text-align: center !important;
+}
+.el-select-dropdown__item:hover {
+  background: rgba(0, 244, 253, 0.2) !important;
+}
+.el-scrollbar__view {
+  background: rgba(0, 244, 253, 0) !important;
+}
+.deviceSelect .el-scrollbar {
+  width: 2rem;
+}
+</style>
+
 <style>
+/**
+  实时数据下拉选择器css样式
+ */
+#deviceSelect {
+  width: 160px !important;
+  height: 34px !important;
+  line-height: 34px !important;
+  background-color: transparent;
+  border: 1px solid rgba(3, 107, 119, 1);
+  margin: 0px;
+  color: #4bf4f9 !important;
+}
+
+#pane-first .select-trigger .el-input__suffix {
+  line-height: 34px !important;
+}
+
+#pane-first .select-trigger .el-input__prefix,
+#pane-first .select-trigger .el-input__suffix {
+  top: -4.2px !important;
+}
+
+#pane-first .select-trigger .el-input--suffix .el-select__caret {
+  color: rgba(3, 107, 119, 1) !important;
+  font-size: 0.175rem !important;
+}
+
+/**
+  历史趋势下拉选择器css样式
+*/
+#seDeviceSelect {
+  width: 160px !important;
+  height: 30px !important;
+  line-height: 30px !important;
+  background-color: transparent;
+  border: 1px solid rgba(3, 107, 119, 1);
+  margin: 0px;
+  color: #fff;
+}
+
+#pane-second .select-trigger .el-input__suffix {
+  line-height: 30px !important;
+}
+
+#pane-second .select-trigger .el-input__prefix,
+#pane-second .select-trigger .el-input__suffix {
+  top: -4.2px !important;
+}
+
+#pane-second .select-trigger .el-input--suffix .el-select__caret {
+  color: rgba(3, 107, 119, 1) !important;
+  font-size: 0.175rem !important;
+}
+
 /* 
   公共时间选择器css样式
 */
 #device_tabs .el-input__inner {
-  width: 414px !important;
-  height: 30px !important;
-  line-height: 30px !important;
+  width: 414px;
+  height: 30px;
+  line-height: 30px;
   background-color: transparent;
   border: 1px solid rgba(3, 107, 119, 1);
 }

src/views/site/Power_diagram.vue

@@ -94,7 +94,7 @@ export default {
               }
               _this.svgLists.push(val);
             });
-            this.testF();
+            _this.testF();
           } else {
             ElMessage.error("当前站点下无可查看配电图,即将为您跳转到编辑页！");
             _this.editChart();
@@ -130,11 +130,61 @@ export default {
         (f) => f.type == "CircuitBreakerSvg"
       );
 
+      //找出所有长方形
+      let rectSvgList = this.svgLists.filter((f) => f.type == "RectSvg");
+
+      //找出所有连接线
+      let connLineSvgList = this.svgLists.filter(
+        (f) => f.type == "ConnLineSvg"
+      );
+
+      //找出所有连接线-横线
+      let connHorizontalLineSvgList = this.svgLists.filter(
+        (f) => f.type == "ConnHorizontalLineSvg"
+      );
+
+      //找出所有连接线-竖线
+      let connVerticalLineSvgList = this.svgLists.filter(
+        (f) => f.type == "ConnVerticalLineSvg"
+      );
+
+      connVerticalLineSvgList.forEach((connVerticalLineSvg) => {
+        if (connVerticalLineSvg.variableValue === "0") {
+          connVerticalLineSvg.svgColor = "#FFFFFF";
+        } else if (connVerticalLineSvg.variableValue === "1") {
+          connVerticalLineSvg.svgColor = "#FF0000";
+        }
+      });
+
+      connHorizontalLineSvgList.forEach((connHorizontalLineSvg) => {
+        if (connHorizontalLineSvg.variableValue === "0") {
+          connHorizontalLineSvg.svgColor = "#FFFFFF";
+        } else if (connHorizontalLineSvg.variableValue === "1") {
+          connHorizontalLineSvg.svgColor = "#FF0000";
+        }
+      });
+
+      connLineSvgList.forEach((connLineSvg) => {
+        if (connLineSvg.variableValue === "0") {
+          connLineSvg.svgColor = "#FFFFFF";
+        } else if (connLineSvg.variableValue === "1") {
+          connLineSvg.svgColor = "#FF0000";
+        }
+      });
+
+      rectSvgList.forEach((rectSvg) => {
+        if (rectSvg.variableValue === "0") {
+          rectSvg.svgColor = "#00FF00";
+        } else if (rectSvg.variableValue === "1") {
+          rectSvg.svgColor = "#FF0000";
+        }
+      });
+
       anyWireBreakList.forEach((anyWireBreak) => {
-        if (anyWireBreak.variableValue == "0") {
+        if (anyWireBreak.variableValue === "0") {
           anyWireBreak.type = "WireBreakOnSvg";
           anyWireBreak.svgColor = "#00FF00";
-        } else if (anyWireBreak.variableValue == "1") {
+        } else if (anyWireBreak.variableValue === "1") {
           anyWireBreak.type = "WireBreakOffSvg";
           anyWireBreak.svgColor = "#FF0000";
         }
@@ -147,6 +197,14 @@ export default {
           anyCircuitBreaker.svgColor = "#FF0000";
         }
       });
+
+      // this.svgLists.forEach((el) => {
+      //   if (el.variableValue === "0") {
+      //     el.svgColor = "#00FF00";
+      //   } else if (el.variableValue == "1") {
+      //     el.svgColor = "#FF0000";
+      //   }
+      // });
     },
     editChart() {
       this.$router.push({
@@ -159,6 +217,15 @@ export default {
     //销毁定时器
     clearInterval(this.setInterval);
   },
+  watch: {
+    "$store.state.siteId": {
+      deep: true,
+      handler() {
+        this.getHookupComponentComplete();
+        this.Interface();
+      },
+    },
+  },
 };
 </script>
 <style scoped lang="less">

src/views/site_ehcarts/Device_second.vue

@@ -174,6 +174,50 @@ export default {
             },
           },
         },
+        {
+          normal: {
+            borderColor: "rgba(84,112,198,1)",
+            borderWidth: 2,
+            color: "rgba(6, 68, 83, 1)",
+            lineStyle: {
+              width: 2, //折线宽度
+              color: "rgba(84,112,198,1)",
+            },
+          },
+        },
+        {
+          normal: {
+            borderColor: "rgba(145,204,117,1)",
+            borderWidth: 2,
+            color: "rgba(6, 68, 83, 1)",
+            lineStyle: {
+              width: 2, //折线宽度
+              color: "rgba(145,204,117,1)",
+            },
+          },
+        },
+        {
+          normal: {
+            borderColor: "rgba(250,200,88,1)",
+            borderWidth: 2,
+            color: "rgba(6, 68, 83, 1)",
+            lineStyle: {
+              width: 2, //折线宽度
+              color: "rgba(250,200,88,1)",
+            },
+          },
+        },
+        {
+          normal: {
+            borderColor: "rgba(238,102,102,1)",
+            borderWidth: 2,
+            color: "rgba(6, 68, 83, 1)",
+            lineStyle: {
+              width: 2, //折线宽度
+              color: "rgba(238,102,102,1)",
+            },
+          },
+        },
       ],
       msgFormSon: null,
       data: [],
@@ -268,6 +312,7 @@ export default {
           },
         },
         legend: {
+          type: "scroll", //设置超出滚动
           //   orient: "vertical",
           bottom: 0,
           right: "auto",