实时监控

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>
+
+        <!-- <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>
+      <!-- <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

@@ -1,187 +1,216 @@
 <template>
-    <div class="parameterArea">
-        <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>
-        <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>
-        <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>
-        <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>
+  <div class="parameterArea">
+    <div class="timeBox"></div>
+    <div class="monitorItemBox">
+      <h3>检测项</h3>
+      <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>
+      <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>
+      <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>
+      <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>
 
 <script>
 export default {
-    data() {
-        return {
-            //检测项
-            MonitorItem: [
-                {
-                    name: '图片视频'
-                },
-                {
-                    name: '测温'
-                },
-                {
-                    name: '微气象'
-                },
-                {
-                    name: '倾斜监测'
-                },
-                {
-                    name: '风偏监测'
-                },
-                {
-                    name: '覆冰检测'
-                },
-                {
-                    name: '实时视频'
-                },
-                {
-                    name: '弧垂'
-                },
-                {
-                    name: '电压检测'
-                }
-            ],
-            //监拍点
-            MonitorPoint: [
-                {
-                    name: '小号侧'
-                },
-                {
-                    name: '大号侧'
-                }
-            ],
-            //操作项
-            actionItem: [
-                {
-                    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: '设置漏告'
-                }
-            ]
-        };
-    }
+  data() {
+    return {
+      //检测项
+      MonitorItem: [
+        {
+          name: "图片视频",
+        },
+        {
+          name: "测温",
+        },
+        {
+          name: "微气象",
+        },
+        {
+          name: "倾斜监测",
+        },
+        {
+          name: "风偏监测",
+        },
+        {
+          name: "覆冰检测",
+        },
+        {
+          name: "实时视频",
+        },
+        {
+          name: "弧垂",
+        },
+        {
+          name: "电压检测",
+        },
+      ],
+      //监拍点
+      MonitorPoint: [
+        {
+          name: "小号侧",
+        },
+        {
+          name: "大号侧",
+        },
+      ],
+      //操作项
+      actionItem: [
+        {
+          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: "设置漏告",
+        },
+      ],
+    };
+  },
 };
 </script>
 <style lang="less">
 .parameterArea {
-    width: 300px;
-    padding: 16px 8px;
-    .monitorItemBox,
-    .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;
-        margin-bottom: 32px;
-        h3 {
-            position: absolute;
-            font-size: 16px;
-            top: -14px;
-            left: 7px;
-            background: transparent;
-            color: @color-text-regular;
-        }
-        .el-button {
-            width: 84px;
-            padding: 6px 0px;
-            font-size: 12px;
-            margin-bottom: 8px;
-        }
-        .el-button + .el-button {
-            margin-left: 0px;
-        }
-      
+  width: 300px;
+  padding: 16px 8px;
+  .monitorItemBox,
+  .monitorPointBox,
+  .actionItem,
+  .configItem {
+    border: 1px solid @border-color-base;
+    padding: 8px 16px 8px 16px;
+    margin-bottom: 32px;
+    h3 {
+      font-size: 16px;
+      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;
+        font-size: 12px;
+        margin-bottom: 8px;
+      }
+      .el-button + .el-button {
+        margin-left: 0px;
+      }
     }
+  }
 }
-</style>
+</style>