实时监控

src/utils/api/index.js

@@ -130,6 +130,15 @@ export function getTerminalPhotoListJoggle(data) {
     data,
   });
 }
+//获取通道的接口
+
+export function getChannelListJoggle(data) {
+  return request({
+    url: "/test/getChannelList",
+    method: "post",
+    data,
+  });
+}
 
 //线路信息管理接口数据
 //1.线路列表信息

src/views/realTimeMonitor/index.vue

@@ -8,10 +8,10 @@
       <el-tree
         :data="lineTreeData"
         :props="defaultProps"
-        :expand-on-click-node="false"
         ref="tree"
         node-key="id"
         highlight-current
+        :default-expand-all="true"
         @node-click="handleNodeClick"
         :current-node-key="currentNodekey"
       >
@@ -20,13 +20,38 @@
     <!-- <router-view></router-view> -->
     <!-- 中心内容 -->
 
-    <picturemain :photoData="photoData" v-if="showBigPic"></picturemain>
+    <!-- <picturemain :photoData="photoData" v-if="showBigPic"></picturemain> -->
     <!-- 带参数的中心内容右侧参数区 -->
-    <div class="picSetBox" v-else>
+    <div class="picSetBox">
       <div class="swiperBox">
-        <carouselChart></carouselChart>
+        {{ terminalPhoto }}
+        <div class="pic" v-for="item in terminalPhoto">
+          <img :src="item.path" style="width: 100%; height: 100%" alt="" />
         </div>
-      <paramArea></paramArea>
+
+        <!-- <carouselChart></carouselChart> -->
+      </div>
+      <div class="parameterArea">
+        <div class="monitorItemBox">
+          <h3>检测项 通道</h3>
+          <div class="btnBox">
+            <el-select
+              v-model="channelValue"
+              placeholder="请选择"
+              @change="changeChannelId"
+            >
+              <el-option
+                v-for="item in channelOption"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+      </div>
+      <!-- <paramArea></paramArea> -->
     </div>
   </div>
 </template>
@@ -34,6 +59,7 @@
 <script>
 import {
   getLineTreeListJoggle,
+  getChannelListJoggle,
   getTerminalPhotoListJoggle,
 } from "@/utils/api/index";
 import carouselChart from "../components/carouselChart.vue";
@@ -50,9 +76,6 @@ export default {
   },
   data() {
     return {
-      photoData: "",
-      childData: "",
-      currentNodekey: "",
       showBigPic: true,
       defaultKey: "",
       lineTreeData: [],
@@ -62,6 +85,11 @@ export default {
         label: "name",
       },
       currentNodekey: "", //默认选中的节点树,
+      channelId: "", //通道id
+      channelList: "", //通道数据
+      channelOption: [], //通道分类
+      channelValue: "",
+      terminalPhoto: [], //获取拍照装置当前数据
     };
   },
   watch: {},
@@ -70,7 +98,6 @@ export default {
   created() {
     this.getLineTreeList();
   },
-
   methods: {
     //获取左侧树结构
     getLineTreeList() {
@@ -80,9 +107,12 @@ export default {
           this.lineTreeData = res.data.list;
           console.log(this.lineTreeData);
           if (this.lineTreeData.length > 0) {
-            this.currentNodekey = this.lineTreeData[0].id;
+            this.currentNodekey = this.lineTreeData[0].id; //第一个数据
             this.$nextTick(() => {
               this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
+              console.log(this.currentNodekey);
+              this.channelId = this.currentNodekey;
+              this.getChannelList(this.channelId);
             });
           }
         })
@@ -90,14 +120,65 @@ export default {
           console.log(err); //代码错误、请求失败捕获
         });
     },
+    //获取通道的接口
+    getChannelList(id) {
+      getChannelListJoggle({ termid: id })
+        .then((res) => {
+          console.log(res);
+          this.channelList = res.data.list;
+          this.getTerminalPhotoList(
+            this.channelList[0].id,
+            this.channelList[0].termId
+          ); //获取图片列表是传当前设备的 id 和termid
+          this.channelList.forEach((item) => {
+            this.channelOption.push({
+              label: item.channelName,
+              value: item.id,
+              termid: item.termId,
+            });
+          }); // 选择通道一通道二select框
+          this.channelValue = this.channelOption[0].label; //默认选中第一个
+          console.log(this.channelOption);
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
     //获取图片
-    getTerminalPhotoList() {},
+    getTerminalPhotoList(id, termId) {
+      getTerminalPhotoListJoggle({
+        channelid: id,
+        pageindex: 1,
+        pagesize: 1,
+        terminalid: termId,
+      })
+        .then((res) => {
+          console.log(res);
+          this.terminalPhoto = res.data.list;
+          console.log(this.terminalPhoto);
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    //切换通道
+    changeChannelId(val) {
+      console.log(val);
+      let channelObj = {};
+      channelObj = this.channelOption.find(function (i) {
+        return i.value === val;
+      });
+      console.log(channelObj);
+      this.getTerminalPhotoList(val, channelObj.termid);
+    },
     //点击获取当前点击的tree数据
     handleNodeClick(data, node) {
       console.log(data, node);
       if (data.list) {
         this.$refs.tree.setCurrentKey(data.list[0].id);
       }
+      this.channelId = data.id; //获取当前点击的id
+      this.getChannelList(this.channelId);
     },
   },
 };
@@ -110,10 +191,6 @@ export default {
   background: #2d8cf0 !important;
 }
 
-.el-tree-node > .el-tree-node__content:hover {
-  background-color: #c1ddf0;
-}
-
 .monitor-container {
   display: flex;
   height: 100%;

src/views/realTimeMonitor/paramArea.vue

@@ -3,19 +3,51 @@
     <div class="timeBox"></div>
     <div class="monitorItemBox">
       <h3>检测项</h3>
-            <el-button type="primary" v-for="(item, index) in MonitorItem" :key="index" icon="el-icon-thumb">{{ item.name }}</el-button>
+      <div class="btnBox">
+        <el-button
+          type="primary"
+          v-for="(item, index) in MonitorItem"
+          :key="index"
+          icon="el-icon-thumb"
+          >{{ item.name }}</el-button
+        >
+      </div>
     </div>
     <div class="monitorPointBox">
       <h3>监拍点</h3>
-            <el-button type="primary" v-for="(item, index) in MonitorPoint" :key="index" icon="el-icon-thumb">{{ item.name }}</el-button>
+      <div class="btnBox">
+        <el-button
+          type="primary"
+          v-for="(item, index) in MonitorPoint"
+          :key="index"
+          icon="el-icon-thumb"
+          >{{ item.name }}</el-button
+        >
+      </div>
     </div>
     <div class="actionItem">
       <h3>操作项</h3>
-            <el-button type="primary" v-for="(item, index) in actionItem" :key="index" icon="el-icon-thumb">{{ item.name }}</el-button>
+      <div class="btnBox">
+        <el-button
+          type="primary"
+          v-for="(item, index) in actionItem"
+          :key="index"
+          icon="el-icon-thumb"
+          >{{ item.name }}</el-button
+        >
+      </div>
     </div>
     <div class="configItem">
       <h3>配置项</h3>
-            <el-button type="primary" v-for="(item, index) in configItem" :key="index" icon="el-icon-thumb">{{ item.name }}</el-button>
+      <div class="btnBox">
+        <el-button
+          type="primary"
+          v-for="(item, index) in configItem"
+          :key="index"
+          icon="el-icon-thumb"
+          >{{ item.name }}</el-button
+        >
+      </div>
     </div>
   </div>
 </template>
@@ -27,125 +59,125 @@ export default {
       //检测项
       MonitorItem: [
         {
-                    name: '图片视频'
+          name: "图片视频",
         },
         {
-                    name: '测温'
+          name: "测温",
         },
         {
-                    name: '微气象'
+          name: "微气象",
         },
         {
-                    name: '倾斜监测'
+          name: "倾斜监测",
         },
         {
-                    name: '风偏监测'
+          name: "风偏监测",
         },
         {
-                    name: '覆冰检测'
+          name: "覆冰检测",
         },
         {
-                    name: '实时视频'
+          name: "实时视频",
         },
         {
-                    name: '弧垂'
+          name: "弧垂",
         },
         {
-                    name: '电压检测'
-                }
+          name: "电压检测",
+        },
       ],
       //监拍点
       MonitorPoint: [
         {
-                    name: '小号侧'
+          name: "小号侧",
         },
         {
-                    name: '大号侧'
-                }
+          name: "大号侧",
+        },
       ],
       //操作项
       actionItem: [
         {
-                    name: '主动拍照'
+          name: "主动拍照",
         },
         {
-                    name: '主动录像'
+          name: "主动录像",
         },
         {
-                    name: '声光报警'
+          name: "声光报警",
         },
         {
-                    name: '图片调阅'
+          name: "图片调阅",
         },
         {
-                    name: '微信推送'
+          name: "微信推送",
         },
         {
-                    name: '历史图片'
+          name: "历史图片",
         },
         {
-                    name: '线缆绘制'
+          name: "线缆绘制",
         },
         {
-                    name: '清除绘制'
+          name: "清除绘制",
         },
         {
-                    name: '主动巡检'
+          name: "主动巡检",
         },
         {
-                    name: '指令集'
+          name: "指令集",
         },
         {
-                    name: '开启雨刮'
+          name: "开启雨刮",
         },
         {
-                    name: '喊话'
+          name: "喊话",
         },
         {
-                    name: '上一设备'
+          name: "上一设备",
         },
         {
-                    name: '下一设备'
+          name: "下一设备",
         },
         {
-                    name: '返回'
+          name: "返回",
         },
         {
-                    name: '历史对比'
+          name: "历史对比",
         },
         {
-                    name: '图片标记'
+          name: "图片标记",
         },
         {
-                    name: '主动巡航'
-                }
+          name: "主动巡航",
+        },
       ],
       //配置项
       configItem: [
         {
-                    name: '设置分组'
+          name: "设置分组",
         },
         {
-                    name: '隐患类型'
+          name: "隐患类型",
         },
         {
-                    name: '地图查看'
+          name: "地图查看",
         },
         {
-                    name: '监拍点信息'
+          name: "监拍点信息",
         },
         {
-                    name: '告警级别'
+          name: "告警级别",
         },
         {
-                    name: '设备信息'
+          name: "设备信息",
         },
         {
-                    name: '设置漏告'
-                }
-            ]
+          name: "设置漏告",
+        },
+      ],
     };
-    }
+  },
 };
 </script>
 <style lang="less">
@@ -156,22 +188,19 @@ export default {
   .monitorPointBox,
   .actionItem,
   .configItem {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
     border: 1px solid @border-color-base;
-        //padding-top: 16px;
-        position: relative;
-        padding: 24px 16px 16px 16px;
+    padding: 8px 16px 8px 16px;
     margin-bottom: 32px;
     h3 {
-            position: absolute;
       font-size: 16px;
-            top: -14px;
-            left: 7px;
+      margin-bottom: 8px;
       background: transparent;
       color: @color-text-regular;
     }
+    .btnBox {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
       .el-button {
         width: 84px;
         padding: 6px 0px;
@@ -181,7 +210,7 @@ export default {
       .el-button + .el-button {
         margin-left: 0px;
       }
-      
+    }
   }
 }
 </style>