驾驶舱监视页面，报警，风险统计，风险提示按不同场站监视数据切换；监视页面收起展开按钮与功能同步

public/js/config.js

@@ -132,7 +132,7 @@ const MQTT_CONFIG = {
     // 'Positioning/#',
     'Alarm/List',
     'Message/New',
-    // 'Fire/#',
+    'Fire/#',
     'Perimeter/#',
     'LaserPtz/#',
     'Risk/New',
@@ -143,15 +143,15 @@ const MQTT_CONFIG = {
 }
 //后台管理根路径
 const ISMSAdminWeb = {
-  path: "http://localhost:9528/#/",
+  // path: "http://localhost:9528/#/",
   // path: "http://11.100.46.218:8080/#/",
-  // path: `http://192.168.195.134:8080/#/`,
+  path: `http://192.168.195.134:8080/#/`,
   // path: `http://${window.location.hostname}:8080/#/`,
 }
 
 //都匀调度系统access_key配置
 ACCESS_KEY = ''
-SECRET_KEY = '' 
+SECRET_KEY = ''
 //房顶配置
 const MODEL_ROOF_LIST = [{ model: 'JHFSZ', part: ['门卫室-顶', '办公区屋顶'] }]
 
@@ -618,7 +618,7 @@ const GY_STATIONS = [
     id: '657316479015854080',
     name: '都匀输气站',
     code: 'DYSQZ',
-    buildId: '657317980832538625',
+    buildId: '657317980832538624',
     positioningBuildId: '002001',
     direction: 'right',
     position: [106.62632139900707, 26.650595691076745, 1.4650695463064403],
@@ -655,6 +655,7 @@ const GY_STATIONS = [
     layers: ['周界', '泄漏', '摄像头'],
   },
   {
+    id: '',
     name: '荔波首站',
     code: 'LBSZ',
     buildId: '',
@@ -738,6 +739,8 @@ const GY_JGYT_CONFIG = [
       {
         id: '101',
         name: '都匀站',
+        departmentId: '657316479015854080',
+        buildId: '657317980832538624',
         children: [
           {
             id: '1',
@@ -750,6 +753,8 @@ const GY_JGYT_CONFIG = [
       {
         id: '102',
         name: '独山首站',
+        departmentId: '657316587124039680',
+        buildId: '657318879332147200',
         children: [
           {
             id: '2',
@@ -768,6 +773,8 @@ const GY_JGYT_CONFIG = [
       {
         id: '103',
         name: '凯口站',
+        departmentId: '657316533462114304',
+        buildId: '657318695416111104',
         children: [
           {
             id: '4',
@@ -780,6 +787,8 @@ const GY_JGYT_CONFIG = [
       {
         id: '104',
         name: '云雾首站',
+        departmentId: '657316634284793856',
+        buildId: '657319107443564544',
         children: [
           {
             id: '5',

public/js/mapModeConfig.js

@@ -1,5 +1,5 @@
 const MAP_MODE_LIST = {
-  home: {
+  "home": {
     perspective: {
       destination: {
         x: -1860663.5421133842,

src/store/getters.js

@@ -30,6 +30,7 @@ const getters = {
   layerDetailDialog: (state) => state.dialog.layerDetailDialog,
 
   //模型部分
+  departmentId: (state) => state.model.departmentId,
   buildId: (state) => state.model.buildId,
   buildInfo: (state) => state.model.buildInfo,
   modelList: (state) => state.model.modelList,

src/store/modules/model.js

@@ -2,6 +2,7 @@ import { getBuildEntity } from '@/API/model'
 import { cloneDeep } from 'lodash-es'
 const state = {
   //当前场景对应的建筑id
+  departmentId: '',
   buildId: '',
   buildInfo: {},
   // 建筑id对应的模型列表，对应数据库
@@ -11,6 +12,10 @@ const state = {
   underGround: false,
 }
 const mutations = {
+  SET_DEPARTMENTID(state, data) {
+    state.departmentId = data
+    // console.log(data);
+  },
   SET_BUILDID(state, data) {
     state.buildId = data
     // console.log(data);
@@ -37,6 +42,9 @@ const mutations = {
   },
 }
 const actions = {
+  setDepartmentId({ commit }, data) {
+    commit('SET_DEPARTMENTID', data)
+  },
   setBuildId({ commit }, data) {
     commit('SET_BUILDID', data)
   },
@@ -59,6 +67,16 @@ const actions = {
           const resData = res.data || {}
           commit('SET_BUILD_INFO', resData)
           commit('SET_BUILDID', buildId)
+          for (let i = 0; i < GY_STATIONS.length; i++) {
+            const e = GY_STATIONS[i];
+            if (e.buildId && e.buildId === buildId) {
+              commit('SET_DEPARTMENTID', e.id)
+            }
+          }
+          if (buildId == '654044537953460225') {
+            commit('SET_DEPARTMENTID', '')
+
+          }
           // 缓存中存入buildId
           localStorage.setItem('buildId', buildId)
           resolve(resData)

src/utils/webRTU.js

@@ -0,0 +1,2 @@
+import { rtcHelperWithLogging } from './plugins/tr-webrtc.min.js';
+let rtcHelper = rtcHelperWithLogging;

src/views/alarm/alarmList/index.vue

@@ -612,6 +612,7 @@ export default {
               ? this.query.departmentId[this.query.departmentId.length - 1]
               : "",
         };
+        // console.log("报警记录查询参数", params);
         const res = await getAlarmDataList(params);
         let alarmData = res.data.content;
         // alarmData.push({

src/views/basePage/index.vue

@@ -126,6 +126,13 @@
         <risk-hint />
       </div>
     </transition>
+    <!-- 中右侧面板 -->
+    <transition
+      enter-active-class="animated fadeInRight"
+      leave-active-class="animated fadeOutRight"
+    >
+      <fold :positionFold="position" @position="getPosition" />
+    </transition>
     <!-- 右侧面板 -->
     <transition
       enter-active-class="animated fadeInRight"
@@ -185,6 +192,7 @@ import {
   ModelViewToolbarDialog,
   AlarmMapDialog,
 } from "./components/dialog/index";
+import Fold from "./panels/Fold";
 import Overview from "./panels/Overview";
 import RiskStatistics from "./panels/RiskStatistics";
 import RiskHint from "./panels/RiskHint";
@@ -212,6 +220,10 @@ export default {
       },
       alarmLiveData: [],
       fullScreen: false,
+      position: {
+        isopen: true,
+        issprh: false,
+      },
     };
   },
   components: {
@@ -234,6 +246,7 @@ export default {
     ModelViewToolbarDialog,
     AlarmMapDialog,
     // ...comObj,
+    Fold,
     Overview,
     RiskStatistics,
     RiskHint,
@@ -341,6 +354,9 @@ export default {
     this.$store.dispatch("globalConfig/clearSwitchConfig");
   },
   methods: {
+    getPosition(data) {
+      this.position = data;
+    },
     openDialog,
     setMapMode(newValue) {
       console.log(newValue.value);

src/views/basePage/mixins/MapEvent.js

@@ -121,7 +121,7 @@ export default {
               //打开站点模型
               console.log(data)
               this.$store.dispatch('model/setBuildInfoByBuildId', data.buildId)
-              this.$store.dispatch('globalConfig/setMapMode', { value: '3d' })
+              // this.$store.dispatch('globalConfig/setMapMode', { value: '3d' })
             }
             //点击了建筑名称，打开建筑内人员情况
             else if (type === 'buildingPerson') {

src/views/basePage/panels/Fold.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="fold transition">
+    <div
+      class="openFold"
+      :class="[mapMode.value === 'home' ? 'isno' : 'isyes']"
+      @click="clickOpen"
+    >
+      <span>
+        {{ mapMode.value === "home" ? "收起面板" : "展开面板" }}
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { mapGetters } from "vuex";
+export default {
+  props: { positionFold: Object },
+  data() {
+    return {
+      position: {
+        left: 490,
+        right: 490,
+        isopen: true,
+        issprh: false,
+      },
+    };
+  },
+  computed: {
+    ...mapGetters(["mapMode"]),
+  },
+  watch: {
+    mapMode: {
+      handler(val, oldVal) {
+        console.log("mapMode", val.value, oldVal.value);
+        this.updateStyle();
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    updateStyle() {
+      this.position.isopen = !this.position.isopen;
+      if (this.mapMode.value === "home") {
+        let main = document.querySelector(".fold");
+        main.style.transform = `translateX(0px)`;
+        main.style.transition = "transform 1s ease";
+      } else {
+        let main = document.querySelector(".fold");
+        main.style.transform = `translateX(470px)`;
+        main.style.transition = "transform 1s ease";
+      }
+      var param = {
+        isopen: this.position.isopen,
+        issprh: this.position.issprh,
+      };
+      this.$emit("position", param);
+    },
+    clickOpen() {
+      if (this.mapMode) {
+        if (this.mapMode.value === "home") {
+          this.$store.dispatch("globalConfig/setMapMode", { value: "3d" });
+        } else if (this.mapMode.value === "3d") {
+          this.$store.dispatch("globalConfig/setMapMode", { value: "home" });
+        }
+      }
+    },
+  },
+  mounted() {
+    this.position = this.positionFold;
+  },
+  updated() {
+    this.position = this.positionFold;
+  },
+};
+</script>
+<style lang="less" scoped>
+.fold {
+  position: absolute;
+  z-index: 99;
+  width: 140px;
+  // height: 200px;
+  top: 106px;
+  right: 450px;
+  //   background: #000;
+  .openFold {
+    pointer-events: auto;
+    cursor: pointer;
+    width: 140px;
+    height: 45px;
+    background-repeat: no-repeat;
+    background-size: cover;
+    text-align: center;
+    line-height: 45px;
+    span {
+      font-size: 14px;
+      font-weight: 700;
+      background-image: linear-gradient(180deg, #ffffff, #419aff);
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+    }
+  }
+}
+.isno {
+  background-image: url(~@/assets/imgs/fold/button_收起面板_sel.png);
+}
+.isyes {
+  background-image: url(~@/assets/imgs/fold/button_收起面板_pre.png);
+}
+</style>

src/views/basePage/panels/IntelligentVideo/index.vue

@@ -16,178 +16,215 @@
 </template>
 
 <script>
-import BaseTitle from '../BaseTitle.vue'
-import VideoWindow from './videoWindow.vue'
+import { divide } from "lodash-es";
+import BaseTitle from "../BaseTitle.vue";
+import VideoWindow from "./videoWindow.vue";
+import { mapGetters } from "vuex";
 export default {
-  name: 'IntelligentVideo',
+  name: "IntelligentVideo",
   components: { BaseTitle, VideoWindow },
   data() {
     return {
       videoData: {
-        id: '593102253968072704',
-        name: '吴圩站',
-        type: 'wxz',
+        id: "593102253968072704",
+        name: "吴圩站",
+        type: "wxz",
         ptzEnable: true,
-        tags: { ndTag: 'ND', gqTag: 'GQ' },
+        tags: { ndTag: "ND", gqTag: "GQ" },
       },
       curStation: {},
       stationList: [
         //初始化泄漏报警骨架
         {
-          id: '1',
-          name: '贵阳作业区',
+          id: "1",
+          name: "贵阳作业区",
           children: [
             {
-              id: '101',
-              name: '贵阳站',
+              id: "101",
+              name: "贵阳站",
               children: [
                 {
-                  id: '1',
-                  name: '云台1',
-                  ndTag: 'ND',
+                  id: "1",
+                  name: "云台1",
+                  ndTag: "ND",
                 },
                 {
-                  id: '2',
-                  name: '云台2',
-                  ndTag: 'ND',
+                  id: "2",
+                  name: "云台2",
+                  ndTag: "ND",
                 },
                 {
-                  id: '3',
-                  name: '云台3',
-                  ndTag: 'ND',
+                  id: "3",
+                  name: "云台3",
+                  ndTag: "ND",
                 },
               ],
             },
             {
-              id: '102',
-              name: '白云站',
+              id: "102",
+              name: "白云站",
               children: [
                 {
-                  id: '4',
-                  name: '云台1',
-                  ndTag: 'ND',
+                  id: "4",
+                  name: "云台1",
+                  ndTag: "ND",
                 },
               ],
             },
           ],
         },
         {
-          id: '2',
-          name: '都匀作业区',
+          id: "2",
+          name: "都匀作业区",
           children: [
             {
-              id: '201',
-              name: '都匀站',
+              id: "201",
+              name: "都匀站",
               children: [
                 {
-                  id: '20101',
-                  name: '云台1',
+                  id: "20101",
+                  name: "云台1",
                 },
               ],
             },
             {
-              id: '202',
-              name: '独山首站',
+              id: "202",
+              name: "独山首站",
               children: [
                 {
-                  id: '20201',
-                  name: '云台1',
+                  id: "20201",
+                  name: "云台1",
                 },
                 {
-                  id: '20202',
-                  name: '云台2',
+                  id: "20202",
+                  name: "云台2",
                 },
               ],
             },
             {
-              id: '203',
-              name: '凯口站',
+              id: "203",
+              name: "凯口站",
               children: [
                 {
-                  id: '20301',
-                  name: '云台1',
+                  id: "20301",
+                  name: "云台1",
                 },
               ],
             },
             {
-              id: '204',
-              name: '云雾首站',
+              id: "204",
+              name: "云雾首站",
               children: [
                 {
-                  id: '20401',
-                  name: '云台1',
+                  id: "20401",
+                  name: "云台1",
                 },
               ],
             },
           ],
         },
       ],
-    }
+      list: [],
+      dId: "",
+    };
   },
   computed: {
+    ...mapGetters(["departmentId"]),
     topData() {
-      let arr = []
-      let leng = this.curStation?.children?.length || 0
+      let arr = [];
+      let leng = this.curStation?.children?.length || 0;
       if (leng === 0) {
-        arr = []
+        arr = [];
       }
       // 一个的时候只显示上半部分，下半隐藏
       // 两个的时候，上下都显示
       else if (leng <= 2) {
-        arr = [this.curStation.children[0]]
+        arr = [this.curStation.children[0]];
       }
       // 大于2个的时候，上面左右结构，下面显示其余
       else {
-        arr = [this.curStation.children[0], this.curStation.children[1]]
+        arr = [this.curStation.children[0], this.curStation.children[1]];
       }
-      return arr
+      return arr;
     },
     bottomData() {
-      let arr = []
-      let leng = this.curStation?.children?.length || 0
+      let arr = [];
+      let leng = this.curStation?.children?.length || 0;
       if (leng <= 1) {
         // 一个的时候只显示上半部分，下半隐藏
-        arr = []
+        arr = [];
       }
       // 两个的时候，上下各显示一个
       else if (leng == 2) {
-        arr = [this.curStation.children[1]]
+        arr = [this.curStation.children[1]];
       }
       // 大于两个，上面显示两个，下面显示其余
       else {
-        arr = this.curStation.children.slice(2)
+        arr = this.curStation.children.slice(2);
       }
-      return arr
+      return arr;
     },
   },
   created() {
-    this.stationList = GY_JGYT_CONFIG
-    this.curStation = this.getCurStation('1')
-    console.log('curStation', this.curStation)
+    this.init();
+  },
+  watch: {
+    departmentId(newVal) {
+      console.log("部门id信息", newVal, this.list);
+      this.dId = newVal;
+      if (this.dId === "") {
+        this.init();
+      } else {
+        setTimeout(() => {
+          for (let i = 0; i < this.list[0].children.length; i++) {
+            const e = this.list[0].children[i];
+            if (e.departmentId === this.dId) {
+              this.stationList[0].children = [this.list[0].children[i]];
+            }
+          }
+          this.curStation = this.getCurStation("1");
+        }, 200);
+      }
+      console.log("场站云台列表", this.stationList);
+    },
   },
   methods: {
+    init() {
+      this.list = GY_JGYT_CONFIG;
+      if (this.list.length > 0) {
+        this.stationList = [
+          {
+            id: this.list[0].id,
+            name: this.list[0].name,
+            children: [this.list[0].children[0]],
+          },
+        ];
+      }
+      this.curStation = this.getCurStation("1");
+      console.log("curStation", this.curStation);
+    },
     getCurStation(id) {
-      let obj = {}
-      const find = arr => {
-        arr.forEach(item => {
+      let obj = {};
+      const find = (arr) => {
+        arr.forEach((item) => {
           if (item.id === id) {
-            obj.id = item.id
-            obj.name = item.name
-            obj.type = item.type
-            obj.ptzEnable = item.ptzEnable
-            obj.tags = item.tags
-            obj.children = item.children
+            obj.id = item.id;
+            obj.name = item.name;
+            obj.type = item.type;
+            obj.ptzEnable = item.ptzEnable;
+            obj.tags = item.tags;
+            obj.children = item.children;
           } else if (item.children && item.children.length) {
-            find(item.children)
+            find(item.children);
           }
-        })
-      }
+        });
+      };
 
-      find(this.stationList)
-      return obj
+      find(this.stationList);
+      return obj;
     },
   },
-}
+};
 </script>
 
 <style lang="less" scoped>

src/views/basePage/panels/Overview.vue

@@ -35,6 +35,7 @@
 import BaseTitle from "./BaseTitle.vue";
 import Dayjs from "dayjs";
 import { getAlarmDataList } from "@/API/alarm";
+import { mapGetters } from "vuex";
 export default {
   name: "Overview",
   components: { BaseTitle },
@@ -117,12 +118,25 @@ export default {
         //   level: "024000",
         // },
       },
+      dId: "",
     };
   },
+  computed: {
+    ...mapGetters(["departmentId"]),
+  },
   mounted() {
     this.getAlarmDataList();
     // this.startMqtt();
   },
+  watch: {
+    departmentId(newVal) {
+      console.log("部门id信息", newVal);
+      this.dId = newVal;
+      setTimeout(() => {
+        this.getAlarmDataList();
+      }, 200);
+    },
+  },
   methods: {
     startMqtt() {
       const topics = [
@@ -193,6 +207,7 @@ export default {
         dateRange: "24H",
         dealStatus,
         confirmStatus,
+        departmentId: this.dId,
       };
       const query = JSON.stringify(p)
         .replace("{", "")
@@ -226,7 +241,7 @@ export default {
           ).format(),
           key: "",
           tag: "",
-          departmentId: "",
+          departmentId: this.dId ? this.dId : "",
         };
         const res = await getAlarmDataList(params);
         let alarmData = res.data.content;

src/views/basePage/panels/RiskHint.vue

@@ -45,6 +45,7 @@ import BaseTitle from "./BaseTitle.vue";
 import VueSeamless from "vue-seamless-scroll";
 import Dayjs from "dayjs";
 import { getAlarmDataList } from "@/API/alarm";
+import { mapGetters } from "vuex";
 export default {
   name: "",
   components: { BaseTitle, VueSeamless },
@@ -61,7 +62,7 @@ export default {
         singleHeight: 78,
         waitTime: 2000,
       },
-
+      dId: "",
       riskColors: {
         ["306001"]: { name: "重大级别", color: "#FF3636" },
         ["306002"]: { name: "较大级别", color: "#FF9F00" },
@@ -99,11 +100,22 @@ export default {
       ],
     };
   },
-  computed: {},
+  computed: {
+    ...mapGetters(["departmentId"]),
+  },
   mounted() {
     this.getAlarmDataList();
     this.startMqtt();
   },
+  watch: {
+    departmentId(newVal) {
+      console.log("部门id信息", newVal);
+      this.dId = newVal;
+      setTimeout(() => {
+        this.getAlarmDataList();
+      }, 200);
+    },
+  },
   methods: {
     Dayjs,
     async getAlarmDataList() {
@@ -125,7 +137,7 @@ export default {
           ).format(),
           key: "",
           tag: "",
-          departmentId: "",
+          departmentId: this.dId,
         };
         const res = await getAlarmDataList(params);
         let alarmData = res.data.content;

src/views/components/baseHeader/left.vue

@@ -274,6 +274,7 @@ export default {
     setShouldAnimation,
     test3() {
       console.log("防爆扩音");
+      // this.getTestList();
       this.$store.dispatch("globalConfig/setSoundDialog", {
         show: true,
         dialogMsg: {},
@@ -290,7 +291,6 @@ export default {
     },
     test2() {
       console.log("一键报警");
-      this.getTestList();
       this.$store.dispatch("globalConfig/setOneKey110", {
         show: true,
         dialogMsg: {},

src/views/components/dialog/SoundDialog.vue

@@ -8,10 +8,21 @@
     <div class="dialog_box">
       <!-- 内容 -->
       <div class="detail-table-box">
-        <base-table-list
-          :tableConfig="tableConfig"
-          @handleClick="handleTableClick"
-        />
+        <el-row>
+          <el-col :span="14">
+            <base-table-list
+              :tableConfig="tableConfig"
+              @handleClick="handleTableClick"
+            />
+          </el-col>
+          <el-col class="fbky" :span="10">
+            <div class="select">
+              <div class="select_title">已打开扩音</div>
+              <div class="select_list"></div>
+            </div>
+            <div class="map"></div>
+          </el-col>
+        </el-row>
       </div>
     </div>
   </base-drag-bg-dialog>
@@ -54,7 +65,7 @@ export default {
         dialogId: "soundDialog",
         show: false,
         title: "防爆扩音",
-        width: 640,
+        width: 1240,
         height: 540,
         center: true,
         zIndex: 10,
@@ -219,5 +230,20 @@ export default {
       }
     }
   }
+  .fbky {
+    .select {
+      text-align: left;
+      font-size: 0.083333rem /* 16/192 */;
+      line-height: 30px /* 50/192 */;
+      color: #fff;
+      .select_title {
+        padding-left: 10px;
+      }
+      .select_list {
+      }
+    }
+    .map {
+    }
+  }
 }
 </style>