底部菜单增加弹窗脚本；增加门禁弹窗；增加激光云台弹窗；调整防爆扩音弹窗

src/API/JGYT.js

@@ -20,3 +20,20 @@ export const getAlarmList = data =>
     data,
     notShowLoading: true,
   })
+
+// 获取激光云台设备列表
+export const getJGYTList = data =>
+  $http({
+    method: 'POST',
+    url: `/Leak/LaserPtz/Config/GetList`,
+    data,
+    notShowLoading: true,
+  })
+// 获取激光云台报警数据列表
+export const getJGYTAlarmList = data =>
+  $http({
+    method: 'POST',
+    url: `/Leak/LaserPtz/Alarm/GetList`,
+    data,
+    notShowLoading: true,
+  })

src/API/accessControl.js

@@ -0,0 +1,26 @@
+import $http from '@/utils/request'
+
+// 获取门禁信息
+export const getAccessInfo = data =>
+  $http({
+    method: 'POST',
+    url: '/AccessControl/Config/GetEntity',
+    data,
+    notShowLoading: true,
+  })
+// 获取门禁列表信息
+export const getAccessInfoList = data =>
+  $http({
+    method: 'POST',
+    url: '/AccessControl/Config/GetList',
+    data,
+    notShowLoading: true,
+  })
+// 获取门禁列表信息
+export const getAccessLogList = data =>
+  $http({
+    method: 'POST',
+    url: '/AccessControl/Log/GetList',
+    data,
+    notShowLoading: true,
+  })

src/store/getters.js

@@ -11,6 +11,8 @@ const getters = {
   alarmAudio: (state) => state.globalConfig.alarmAudio,//全局报警声音
   oneKey110: (state) => state.globalConfig.oneKey110,//一键110
   soundDialog: (state) => state.globalConfig.soundDialog,//防爆扩音
+  accessControlDialog: (state) => state.globalConfig.accessControlDialog,//门禁控制
+  jgytControlDialog: (state) => state.globalConfig.jgytControlDialog,//激光云台
   personListDialog: (state) => state.globalConfig.personListDialog,//站内人员统计
   rtTag: (state) => state.globalConfig.RTTag,
   rtData: (state) => state.globalConfig.RTData,

src/store/modules/globalConfig.js

@@ -9,6 +9,8 @@ const state = {
   alarmAudio: { show: false, alarmType: "all" },
   oneKey110: { show: false, dialogMsg: {}, type: "all" },
   soundDialog: { show: false, dialogMsg: {}, type: "all" },
+  accessControlDialog: { show: false, dialogMsg: {}, type: "all" },
+  jgytControlDialog: { show: false, dialogMsg: {}, type: "all" },
   personListDialog: { show: false, dialogMsg: [], type: "all" },
   RTTag: {
     //"layer_id":["tag1","tag2"]
@@ -49,6 +51,12 @@ const mutations = {
   SET_SOUNDDIALOG(state, data) {
     state.soundDialog = data;
   },
+  SET_ACCESSCONTROLDIALOG(state, data) {
+    state.accessControlDialog = data;
+  },
+  SET_JGYTCONTROLDIALOG(state, data) {
+    state.jgytControlDialog = data;
+  },
   SET_PERSONLISTDIALOG(state, data) {
     state.personListDialog = data;
   },
@@ -158,6 +166,12 @@ const actions = {
   setSoundDialog({ commit }, data) {
     commit("SET_SOUNDDIALOG", data);
   },
+  setAccessControlDialog({ commit }, data) {
+    commit("SET_ACCESSCONTROLDIALOG", data);
+  },
+  setJGYTControlDialog({ commit }, data) {
+    commit("SET_JGYTCONTROLDIALOG", data);
+  },
   setPersonListDialog({ commit }, data) {
     commit("SET_PERSONLISTDIALOG", data);
   },

src/views/Home.vue

@@ -21,6 +21,10 @@
     <onekey-110-dialog />
     <!-- 防爆扩音弹窗 由vuex控制 -->
     <sound-dialog />
+    <!-- 门禁弹窗 由vuex控制 -->
+    <access-control-dialog />
+    <!-- 激光云台 由vuex控制 -->
+    <j-g-y-t-control-dialog />
     <!-- 人员列表弹窗 由vuex控制 -->
     <person-list-dialog />
     <!-- 全局声音播放器 由vuex控制 -->
@@ -60,6 +64,8 @@ import ContactInfoDialog from "@/views/components/emergency/ContactInfoDialog";
 import PersonListDialog from "@/views/components/dialog/PersonListDialog";
 import Onekey110Dialog from "@/views/components/dialog/Onekey110Dialog";
 import SoundDialog from "@/views/components/dialog/SoundDialog";
+import AccessControlDialog from "@/views/components/dialog/AccessControlDialog";
+import JGYTControlDialog from "@/views/components/dialog/JGYTControlDialog";
 import AlarmDetailDialog from "@/views/components/dialog/AlarmDetailDialog";
 import AlarmAudioDialog from "@/views/components/dialog/AlarmAudioDialog";
 import RiskTipDialog from "@/views/components/dialog/RiskTipDialog";
@@ -84,6 +90,8 @@ export default {
     Onekey110Dialog,
     PersonListDialog,
     SoundDialog,
+    AccessControlDialog,
+    JGYTControlDialog,
     AlarmAudioDialog,
     RiskTipDialog,
     BaseBlankDialog,

src/views/basePage/panels/Fold.vue

@@ -31,7 +31,7 @@ export default {
   watch: {
     mapMode: {
       handler(val, oldVal) {
-        console.log("mapMode", val.value, oldVal.value);
+        // console.log("mapMode", val.value, oldVal.value);
         this.updateStyle();
       },
       deep: true,
@@ -67,6 +67,15 @@ export default {
   },
   mounted() {
     this.position = this.positionFold;
+    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";
+    }
   },
   updated() {
     this.position = this.positionFold;

src/views/components/baseFooter/FooterNavigation.vue

@@ -157,7 +157,7 @@ export default {
           item.level = this.btnPositionList[index].level;
           this.btnList.push(btn);
         });
-        this.initMap();//都匀加载驾驶舱模型//托克托不需要
+        // this.initMap(); //都匀加载驾驶舱模型//托克托不需要
         // console.log(this.btnList, "按钮列表");
       } catch (err) {
         console.log(err);
@@ -192,6 +192,40 @@ export default {
         value: "3d",
       });
     },
+    openFooterDialog(type) {
+      if (type) {
+        switch (type) {
+          case "防爆扩音":
+            console.log("防爆扩音");
+            this.$store.dispatch("globalConfig/setSoundDialog", {
+              show: true,
+              dialogMsg: {},
+              type: "All",
+            });
+            break;
+          case "出入控制":
+            console.log("出入控制");
+            this.$store.dispatch("globalConfig/setAccessControlDialog", {
+              show: true,
+              dialogMsg: {},
+              type: "All",
+            });
+            break;
+          case "激光云台":
+            console.log("激光云台");
+            this.$store.dispatch("globalConfig/setJGYTControlDialog", {
+              show: true,
+              dialogMsg: {},
+              type: "All",
+            });
+            break;
+
+          default:
+            break;
+        }
+      }
+      // this.getTestList();
+    },
   },
 };
 </script>

src/views/components/dialog/AccessControlDialog.vue

@@ -0,0 +1,523 @@
+<template>
+  <base-drag-bg-dialog
+    :dialogConfig="baseDialogConfig"
+    @handleClose="closeDialog"
+  >
+    <!-- 弹窗内容 -->
+    <div class="dialog_box">
+      <!-- 内容 -->
+      <div>
+        <el-row class="access_video">
+          <el-col :span="8">
+            <div class="select">
+              <div class="select_title">
+                车辆识别1
+                <el-select
+                  value-key="id"
+                  v-model="cameraCarInfo1"
+                  style="width: 160px"
+                  size="mini"
+                  clearable
+                  placeholder="请选择摄像头"
+                  @change="exchangeVideo(1, $event)"
+                >
+                  <el-option
+                    v-for="item in cameraCarList"
+                    :key="item.id"
+                    :value="item"
+                    :label="item.name"
+                  ></el-option>
+                </el-select>
+              </div>
+            </div>
+            <div class="select_video">
+              <div class="select_video_main">
+                <video-image-window
+                  :cameraData="cameraCarInfo1"
+                  :cameraId="cameraCarInfo1.id"
+                />
+              </div>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="select">
+              <div class="select_title">
+                车辆识别2
+                <el-select
+                  value-key="id"
+                  v-model="cameraCarInfo2"
+                  style="width: 160px"
+                  size="mini"
+                  clearable
+                  placeholder="请选择摄像头"
+                  @change="exchangeVideo(2, $event)"
+                >
+                  <el-option
+                    v-for="item in cameraCarList"
+                    :key="item.id"
+                    :value="item"
+                    :label="item.name"
+                  ></el-option>
+                </el-select>
+              </div>
+            </div>
+            <div class="select_video">
+              <div class="select_video_main">
+                <video-image-window
+                  :cameraData="cameraCarInfo2"
+                  :cameraId="cameraCarInfo2.id"
+                />
+              </div>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="select">
+              <div class="select_title">
+                人脸识别
+                <el-select
+                  value-key="id"
+                  v-model="cameraFaceInfo"
+                  style="width: 160px"
+                  size="mini"
+                  clearable
+                  placeholder="请选择摄像头"
+                  @change="exchangeVideo(3, $event)"
+                >
+                  <el-option
+                    v-for="item in cameraFaceList"
+                    :key="item.id"
+                    :value="item"
+                    :label="item.name"
+                  ></el-option>
+                </el-select>
+              </div>
+            </div>
+            <div class="select_video">
+              <div class="select_video_main">
+                <video-image-window
+                  :cameraData="cameraFaceInfo"
+                  :cameraId="cameraFaceInfo.id"
+                />
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <div class="search-box">
+              <div class="search-item">
+                <span class="search-label">场站：</span>
+                <el-select
+                  value-key="id"
+                  v-model="department"
+                  style="width: 110px"
+                  size="mini"
+                  clearable
+                  placeholder="请选择场站"
+                  @change="searchData($event)"
+                >
+                  <el-option
+                    v-for="item in departmentOptions"
+                    :key="item.id"
+                    :value="item"
+                    :label="item.name"
+                  ></el-option>
+                </el-select>
+              </div>
+              <!-- <el-cascader
+                  v-model="query.departmentId"
+                  :options="departmentOptions"
+                  clearable
+                  size="mini"
+                  placeholder="请选择场站"
+                  style="width: 160px"
+                  @change="searchData()"
+                /> -->
+              <!-- <div class="search-btn2" @click="openAll">
+                <el-button size="mini" type="success">人员授权</el-button>
+              </div>
+              <div class="search-btn2" @click="closeAll">
+                <el-button size="mini" type="warning">车辆授权</el-button>
+              </div> -->
+              <!-- <div class="search-btn2" @click="openBroadcast">
+                <el-button size="mini" type="success">开门</el-button>
+              </div>
+              <div class="search-btn2" @click="closeBroadcast">
+                <el-button size="mini" type="danger">关门</el-button>
+              </div> -->
+            </div>
+            <div class="info_list">
+              <base-table-list
+                :tableConfig="tableConfig"
+                @handleClick="handleTableClick"
+              />
+            </div>
+          </el-col>
+          <el-col :span="16">
+            <div class="record_list">
+              <div class="record_title">出入门记录</div>
+              <div class="record_info">
+                <base-table-list :tableConfig="recordTableConfig" />
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+  </base-drag-bg-dialog>
+</template>
+<script>
+import BaseTableList from "@/views/components/base/BaseTableList";
+import BaseDragBgDialog from "@/views/components/base/BaseDragBgDialog.vue";
+import VideoImageWindow from "@/views/components/dialog/VideoImageWindow.vue";
+import { dealAlarm } from "@/API/common";
+import { getDepartmentByPid } from "@/API/alarm";
+import { getAccessInfoList, getAccessLogList } from "@/API/accessControl";
+import { mapGetters } from "vuex";
+export default {
+  name: "accessControlDialog",
+  components: { BaseDragBgDialog, BaseTableList, VideoImageWindow },
+  watch: {
+    "accessControlDialog.show": {
+      handler(newVal) {
+        this.baseDialogConfig.show = newVal;
+      },
+      // deep: true,
+      immediate: true,
+    },
+    dataList: {
+      handler(newValue, oldValue) {
+        this.filterKey = "";
+        this.tableConfig.tableData = newValue;
+      },
+      deep: true,
+    },
+    recordList: {
+      handler(newValue, oldValue) {
+        this.filterKey = "";
+        this.recrodTableConfig.tableData = newValue;
+      },
+      deep: true,
+    },
+  },
+  data() {
+    return {
+      BASE_URL,
+      dataList: [
+        {
+          id: "",
+          name: "",
+          buildName: "",
+        },
+      ],
+      recordList: [
+        {
+          id: "",
+          name: "",
+          eventTime: "",
+          content: "",
+        },
+      ],
+      baseDialogConfig: {
+        dialogId: "accessControlDialog",
+        show: false,
+        title: "出入门控制",
+        width: 1440,
+        height: 680,
+        center: true,
+        zIndex: 10,
+      },
+      tableConfig: {
+        needIndex: true,
+        height: 130,
+        header: [
+          { title: "名称", prop: "name", width: "" },
+          { title: "所在场站", prop: "buildName", width: "" },
+        ],
+        tableData: [],
+      },
+      recordTableConfig: {
+        needIndex: false,
+        height: 130,
+        header: [
+          { title: "设备名称", prop: "name", width: "80px" },
+          { title: "人员名称", prop: "personName", width: "100px" },
+          { title: "时间", prop: "eventTime", width: "" },
+          { title: "详细描述", prop: "content", width: "" },
+        ],
+        tableData: [],
+      },
+      cameraFaceList: [{ id: "1", name: "摄像头1" }],
+      cameraCarList: [{ id: "2", name: "摄像头2" }],
+      cameraFaceInfo: { id: "1", name: "摄像头1" },
+      cameraCarInfo1: { id: "2", name: "摄像头2" },
+      cameraCarInfo2: { id: "3", name: "摄像头3" },
+      departmentOptions: [],
+      department: {
+        id: "",
+        positioningBuildId: "",
+      },
+      query: {
+        departmentId: "",
+        buildId: "",
+      },
+    };
+  },
+  created() {},
+  computed: {
+    ...mapGetters(["accessControlDialog"]),
+  },
+  mounted() {
+    this.initAccessControlList("");
+    this.initAccessLogList();
+    // this.getDepartmentByPid();
+    this.departmentOptions = GY_STATIONS.filter((e) => e.id !== "");
+  },
+  methods: {
+    async initAccessControlList(buildId) {
+      try {
+        const params = {
+          pageSize: 100,
+          pageIndex: 1,
+          buildId: buildId,
+        };
+        const res = await getAccessInfoList(params);
+        this.dataList = res.data.content;
+        console.log("门禁列表", this.dataList);
+        //人脸识别列表
+        this.cameraFaceList = this.dataList.filter((e) => e.faceRecognition);
+        //车辆识别列表
+        this.cameraCarList = this.dataList.filter((e) => !e.faceRecognition);
+        console.log("门禁摄像头列表", this.cameraFaceList, this.cameraCarList);
+        if (this.cameraFaceList && this.cameraCarList.length > 0) {
+          this.cameraFaceInfo = this.cameraFaceList[0];
+        }
+        if (this.cameraCarList && this.cameraCarList.length > 1) {
+          this.cameraCarInfo1 = this.cameraCarList[0];
+          this.cameraCarInfo2 = this.cameraCarList[1];
+        }
+        console.log(
+          "门禁摄像头",
+          this.cameraFaceInfo,
+          this.cameraCarInfo1,
+          this.cameraCarInfo2
+        );
+      } catch (err) {
+        console.log(err);
+      }
+    },
+    async initAccessLogList() {
+      try {
+        const params = {
+          pageSize: 100,
+          pageIndex: 1,
+        };
+        const res = await getAccessLogList(params);
+        this.recordList = res.data.content;
+        // console.log("门禁事件列表", this.recordList);
+      } catch (err) {
+        console.log(err);
+      }
+    },
+    closeDialog() {
+      this.$store.dispatch("globalConfig/setAccessControlDialog", {
+        show: false,
+        dialogMsg: {},
+        type: "All",
+      });
+    },
+    async handleDeal() {
+      try {
+        await dealAlarm({
+          id: this.accessControlDialog.dialogMsg.id,
+          dealContent: this.accessControlDialog.dialogMsg.dealContent,
+        });
+        this.closeDialog();
+        // 刷新报警列表页
+      } catch (err) {
+        console.log(err);
+      }
+    },
+    handleTableClick(data, btnType) {
+      if (btnType === "open") {
+        console.log("打开", data);
+      }
+      if (btnType === "close") {
+        console.log("关闭", data);
+      }
+    },
+    async getDepartmentByPid() {
+      try {
+        const p = { id: "0" };
+        const res = await getDepartmentByPid(p);
+        let { content } = res.data;
+        content.forEach((element) => {
+          element.value = element.id;
+          element.label = element.departmentName;
+          if (element.children) {
+            element.children.forEach((element2) => {
+              element2.value = element2.id;
+              element2.label = element2.departmentName;
+            });
+          }
+        });
+        this.departmentOptions = content;
+      } catch (err) {
+        console.log(err);
+      }
+    },
+    searchData(e) {
+      console.log("事件信息", e);
+      this.filterInfo();
+    },
+    filterInfo() {
+      if (this.department.positioningBuildId) {
+        this.initAccessControlList(this.department.positioningBuildId);
+      } else {
+        this.initAccessControlList("");
+      }
+    },
+    exchangeVideo(type, e) {
+      switch (type) {
+        case 1:
+          // this.cameraCarInfo1 = this.cameraCarList.filter((c) => c.id === e);
+          break;
+        case 2:
+          // this.cameraCarInfo2 = this.cameraCarList.filter((c) => c.id === e);
+          break;
+        case 3:
+          // this.cameraFaceInfo = this.cameraFaceList.filter((c) => c.id === e);
+          break;
+
+        default:
+          break;
+      }
+    },
+    openAll() {},
+    closeAll() {},
+    openBroadcast() {},
+    closeBroadcast() {},
+    handleClose(item) {
+      let index = -1;
+      for (let i = 0; i < this.openningList.length; i++) {
+        const e = this.openningList[i];
+        if (e.label === item.label) {
+          index = i;
+          this.openningList.splice(index, 1);
+        }
+      }
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.dialog_box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  .access_video {
+    padding-left: 10px;
+    .select {
+      text-align: left;
+      font-size: 0.083333rem /* 16/192 */;
+      line-height: 30px /* 50/192 */;
+      color: #fff;
+      .select_title {
+        padding: 6px;
+      }
+    }
+    .select_list {
+      height: 66px;
+      overflow: auto;
+      max-height: 66px;
+      .select-tag {
+        margin: 2px;
+      }
+    }
+    .select_video {
+      width: 100%;
+      height: 380px;
+      padding: 2px;
+      position: relative;
+      .select_video_main {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .search-box {
+    width: 100%;
+    display: flex;
+    margin: 6px /* 10/192 */ 0;
+    color: #fff;
+    .search-item {
+      display: flex;
+      .search-label {
+        display: inline-block;
+        width: 60px;
+        font-size: 0.083333rem /* 16/192 */;
+        line-height: 30px;
+        text-align: center;
+        word-break: keep-all;
+      }
+      .search-date.el-input__inner {
+        width: 1.666667rem /* 320/192 */;
+        height: 28px;
+        border-radius: 0;
+        margin-right: 0;
+      }
+      .el-input {
+        ::v-deep .el-input__inner {
+          height: 28px;
+          border-radius: 0;
+          color: #fff;
+        }
+      }
+      .el-select {
+        margin-right: 0.052083rem /* 10/192 */;
+        ::v-deep .el-input__inner {
+          width: 0.572917rem /* 110/192 */;
+          height: 28px;
+          border-radius: 0;
+          color: #fff;
+          // padding-right: 0.182292rem /* 35/192 */;
+        }
+        ::v-deep .el-input__icon {
+          line-height: 28px;
+        }
+      }
+    }
+    .search-btn2 {
+      box-sizing: content-box;
+      text-align: center;
+      justify-content: right;
+      color: #fff;
+      font-size: 0.072917rem /* 14/192 */;
+      cursor: pointer;
+      border-radius: 0;
+      margin-left: 10px;
+      &:hover {
+        border-color: #ccc;
+      }
+      img {
+        width: 0.083333rem /* 16/192 */;
+        height: 0.083333rem /* 16/192 */;
+      }
+    }
+  }
+  .info_list {
+  }
+  .record_list {
+    margin-left: 4px;
+    text-align: left;
+    font-size: 0.083333rem /* 16/192 */;
+    line-height: 30px /* 50/192 */;
+    color: #fff;
+    .record_title {
+      padding: 6px;
+    }
+    .record_info {
+    }
+  }
+}
+</style>

src/views/components/dialog/JGYTControlDialog/VideoControl.vue

@@ -0,0 +1,289 @@
+<template>
+  <div class="videoControl-container">
+    <div class="comm-open">
+      {{ commOpenning ? "允许操作" : "禁止操作" }}
+      <el-switch
+        style="display: block; margin: 4px"
+        v-model="commOpenning"
+        active-color="#13ce66"
+        inactive-color="#ff4949"
+      >
+      </el-switch>
+    </div>
+    <div class="comm-panel">
+      <div
+        class="btn-box"
+        v-for="item of commandConfig.direction"
+        :key="item.type"
+      >
+        <el-button
+          type="primary"
+          :icon="`el-icon-${item.type}`"
+          size="mini"
+          @mousedown.native="changePtzCommParam(item.command, false)"
+          @mouseup.native="changePtzCommParam(item.command, true)"
+        ></el-button>
+      </div>
+    </div>
+    <div class="zoom-panel">
+      <div class="btn-box" v-for="item of commandConfig.zoom" :key="item.type">
+        <el-button
+          type="primary"
+          :icon="`el-icon-${item.type}`"
+          size="mini"
+          @mousedown.native="changePtzCommParam(item.command, false)"
+          @mouseup.native="changePtzCommParam(item.command, true)"
+        ></el-button>
+      </div>
+    </div>
+    <div class="form_box">
+      <el-form label-width="70px" size="small">
+        <el-form-item label="速度" prop="speed" class="form_info">
+          <el-select
+            class="myInput"
+            size="mini"
+            v-model="speed"
+            placeholder="请选择速度"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in Array.from(
+                { length: 10 },
+                (item, index) => index + 1
+              )"
+              :key="item"
+              :label="item"
+              :value="item"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="预置点" prop="presetIndex" class="form_info">
+          <el-select
+            class="myInput"
+            size="mini"
+            v-model="presetIndex"
+            placeholder="请选择预置点"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in Array.from(
+                { length: 255 },
+                (item, index) => index + 1
+              )"
+              :key="item"
+              :label="item"
+              :value="item"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <div class="btn_box">
+          <el-button type="primary" size="mini" @click="changePtzPresetParam(8)"
+            >设置</el-button
+          >
+          <el-button
+            type="primary"
+            size="mini"
+            @click="changePtzPresetParam(39)"
+            >转到</el-button
+          >
+        </div>
+        <!-- <el-form-item label="时间" prop="startTime">
+          <el-date-picker class="myInput" size="mini" v-model="startTime" type="datetime" placeholder="选择日期时间" style="width: 100%"></el-date-picker>
+        </el-form-item>
+        <div class="btn_box">
+          <el-button type="primary" size="mini" @click="changePlayTypeParam(true)" :disabled="!startTime">回放</el-button>
+          <el-button type="primary" size="mini" @click="changePlayTypeParam(false)" :disabled="!startTime">实时</el-button>
+        </div> -->
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+import Dayjs from "dayjs";
+export default {
+  name: "VideoControl",
+  props: {
+    curVideoData: {
+      type: Object,
+      require: true,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      // 视频控制相关 start
+      commandConfig: {
+        //视频控制开关配置
+        direction: [
+          //方向
+          { type: "top-left", name: "左上", command: 25 },
+          { type: "top", name: "上", command: 21 },
+          { type: "top-right", name: "右上", command: 26 },
+          { type: "back", name: "左", command: 23 },
+          { type: "rank", name: "中", command: 0 },
+          { type: "right", name: "右", command: 24 },
+          { type: "bottom-left", name: "左下", command: 27 },
+          { type: "bottom", name: "下", command: 22 },
+          { type: "bottom-right", name: "右下", command: 28 },
+        ],
+        zoom: [
+          //放大缩小
+          { type: "zoom-in", name: "放大", command: 11 },
+          { type: "zoom-out", name: "缩小", command: 12 },
+        ],
+      },
+      startTime: null,
+      speed: 5,
+      presetIndex: 1,
+      // 视频控制 end
+      commOpenning: false,
+    };
+  },
+  mounted() {},
+  methods: {
+    changePtzCommParam(comm, stop) {
+      if (!this.commOpenning) {
+        stop && this.$message.warning("请先开启操作许可！");
+        return;
+      }
+      if (!comm) return;
+      if (!this.curVideoData.id) {
+        stop && this.$message.warning("请先选择视频窗口！");
+        return;
+      }
+      let param = {
+        id: this.curVideoData.id,
+        ptzCommand: comm,
+        ptzStop: stop,
+        ptzSpeed: this.speed,
+        canControl: this.curVideoData.ptzEnable,
+      };
+      this.$EventBus.$emit("updateSendParam", param);
+    },
+    changePtzPresetParam(comm) {
+      if (!this.commOpenning) {
+        stop && this.$message.warning("请先开启操作许可！");
+        return;
+      }
+      if (!comm) return;
+      if (!this.curVideoData.id) {
+        this.$message.warning("请先选择视频窗口！");
+        return;
+      }
+      let param = {
+        id: this.curVideoData.id,
+        ptzPreset: comm,
+        ptzPresetIndex: this.presetIndex,
+        canControl: this.curVideoData.ptzEnable,
+      };
+      this.$EventBus.$emit("updateSendParam", param);
+    },
+    /**
+     * state  true代表回放模式
+     */
+    changePlayTypeParam(state) {
+      if (!this.commOpenning) {
+        stop && this.$message.warning("请先开启操作许可！");
+        return;
+      }
+      let param = { id: this.curVideoData.id };
+      if (!this.curVideoData.id) {
+        this.$message.warning("请先选择视频窗口！");
+        return;
+      }
+      if (state) {
+        if (!this.startTime) {
+          this.$message.warning("请选择回放开始时间！");
+          return;
+        }
+        param["startTime"] = Dayjs(this.startTime).format(
+          "YYYY-MM-DD HH:mm:ss"
+        );
+      }
+      this.$EventBus.$emit("updateSendParam", param, true);
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.videoControl-container {
+  width: 100%;
+  .comm-open {
+    padding: 6px 6px 6px 16px;
+    text-align: left;
+    font-size: 0.083333rem /* 16/192 */;
+    line-height: 30px /* 50/192 */;
+    color: #fff;
+    display: flex;
+    height: 43px;
+  }
+  .comm-panel {
+    width: 184px;
+    margin: 0 auto;
+    display: flex;
+    flex-wrap: wrap;
+    .el-button {
+      background: #007ccc;
+      border-color: #007ccc;
+    }
+  }
+  .zoom-panel {
+    width: 122px;
+    margin: 0 auto;
+    display: flex;
+    .el-button {
+      background: #007ccc;
+      border-color: #007ccc;
+    }
+  }
+  .btn-box {
+    flex-shrink: 0;
+    width: 60px;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .form_box {
+    width: 100%;
+    padding: 10px 0;
+    ::v-deep .form_info .el-form-item__label {
+      color: rgb(255, 255, 255);
+    }
+    ::v-deep .el-form {
+      width: 100%;
+      .myInput {
+        .el-input__inner {
+          // width: 110px;
+          height: 30px;
+          border-radius: 0;
+          background: rgba(0, 20, 23, 0.2);
+          border: 0.5px solid #5bd6ff;
+          color: #5bd6ff;
+          // padding-right: 35px;
+        }
+        .el-input__inner:focus {
+          border: 0.5px solid #5bd6ff !important;
+        }
+        .el-input.is-focus .el-input__inner {
+          border: 0.5px solid #5bd6ff !important;
+        }
+        .el-input__suffix {
+          right: 5px;
+        }
+        .el-input__icon {
+          line-height: 30px;
+        }
+      }
+      .btn_box {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 12px;
+      }
+    }
+  }
+}
+</style>

src/views/components/dialog/JGYTControlDialog/index.vue

@@ -0,0 +1,453 @@
+<template>
+  <base-drag-bg-dialog
+    :dialogConfig="baseDialogConfig"
+    @handleClose="closeDialog"
+  >
+    <!-- 弹窗内容 -->
+    <div class="dialog_box">
+      <!-- 内容 -->
+      <div class="detail-table-box">
+        <el-row>
+          <el-col :span="8">
+            <div class="search-box">
+              <div class="search-item">
+                <span class="search-label">场站：</span>
+                <el-select
+                  value-key="id"
+                  v-model="department"
+                  style="width: 110px"
+                  size="mini"
+                  clearable
+                  placeholder="请选择场站"
+                  @change="searchData($event)"
+                >
+                  <el-option
+                    v-for="item in departmentOptions"
+                    :key="item.id"
+                    :value="item"
+                    :label="item.name"
+                  ></el-option>
+                </el-select>
+              </div>
+              <!-- <div class="search-btn2" @click="openAll">
+                <el-button size="mini" type="success">人员授权</el-button>
+              </div>
+              <div class="search-btn2" @click="closeAll">
+                <el-button size="mini" type="warning">车辆授权</el-button>
+              </div> -->
+              <!-- <div class="search-btn2" @click="openBroadcast">
+                  <el-button size="mini" type="success">开门</el-button>
+                </div>
+                <div class="search-btn2" @click="closeBroadcast">
+                  <el-button size="mini" type="danger">关门</el-button>
+                </div> -->
+            </div>
+            <div class="info_list">
+              <base-table-list
+                :tableConfig="tableConfig"
+                @handleClick="handleTableClick"
+              />
+            </div>
+          </el-col>
+          <el-col class="jgyt_video" :span="12">
+            <div class="select">
+              <div class="select_title">
+                泄漏检测
+                <el-select
+                  value-key="id"
+                  v-model="cameraInfo"
+                  style="width: 220px"
+                  size="mini"
+                  clearable
+                  placeholder="请选择摄像头"
+                  @change="exchangeVideo()"
+                >
+                  <el-option
+                    v-for="item in cameraList"
+                    :key="item.id"
+                    :value="item"
+                    :label="item.name"
+                  ></el-option>
+                </el-select>
+              </div>
+            </div>
+            <div class="select_video">
+              <div class="select_video_main">
+                <video-image-window
+                  :cameraData="cameraInfo"
+                  :cameraId="cameraInfo.id"
+                />
+              </div>
+            </div>
+          </el-col>
+          <el-col :span="4">
+            <video-control :curVideoData="cameraInfo" />
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <div class="record_list">
+              <div class="record_title">告警记录</div>
+              <div class="record_info">
+                <base-table-list :tableConfig="recordTableConfig" />
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+  </base-drag-bg-dialog>
+</template>
+  <script>
+import BaseTableList from "@/views/components/base/BaseTableList";
+import BaseDragBgDialog from "@/views/components/base/BaseDragBgDialog.vue";
+import VideoImageWindow from "@/views/components/dialog/VideoImageWindow.vue";
+import { dealAlarm } from "@/API/common";
+import { getDepartmentByPid } from "@/API/alarm";
+import { getJGYTList, getJGYTAlarmList } from "@/API/JGYT";
+import { mapGetters } from "vuex";
+import VideoControl from "./VideoControl";
+export default {
+  name: "jgytControlDialog",
+  components: {
+    BaseDragBgDialog,
+    BaseTableList,
+    VideoImageWindow,
+    VideoControl,
+  },
+  watch: {
+    "jgytControlDialog.show": {
+      handler(newVal) {
+        this.baseDialogConfig.show = newVal;
+      },
+      // deep: true,
+      immediate: true,
+    },
+    dataList: {
+      handler(newValue, oldValue) {
+        this.filterKey = "";
+        this.tableConfig.tableData = newValue;
+      },
+      deep: true,
+    },
+    recordList: {
+      handler(newValue, oldValue) {
+        this.filterKey = "";
+        this.recrodTableConfig.tableData = newValue;
+      },
+      deep: true,
+    },
+  },
+  data() {
+    return {
+      BASE_URL,
+      dataList: [
+        {
+          id: "",
+          name: "",
+          departmentName: "",
+        },
+      ],
+      recordList: [
+        {
+          id: "",
+          name: "",
+          eventTime: "",
+          content: "",
+        },
+      ],
+      baseDialogConfig: {
+        dialogId: "jgytControlDialog",
+        show: false,
+        title: "泄漏检测",
+        width: 1250,
+        height: 680,
+        center: true,
+        zIndex: 10,
+      },
+      tableConfig: {
+        needIndex: true,
+        height: 300,
+        header: [
+          { title: "名称", prop: "name", width: "" },
+          { title: "所在场站", prop: "departmentName", width: "" },
+        ],
+        tableData: [],
+      },
+      recordTableConfig: {
+        needIndex: true,
+        height: 118,
+        header: [
+          { title: "名称", prop: "laserPtzName", width: "80px" },
+          { title: "浓度", prop: "concentration", width: "80px" },
+          { title: "记录描述", prop: "content", width: "" },
+          { title: "时间", prop: "startTime", width: "80px" },
+        ],
+        tableData: [],
+      },
+      cameraList: [{ id: "1", name: "摄像头1" }],
+      cameraInfo: {
+        id: "1",
+      },
+      departmentOptions: [],
+      department: {
+        id: "",
+        positioningBuildId: "",
+      },
+      query: {
+        departmentId: "",
+      },
+    };
+  },
+  created() {},
+  computed: {
+    ...mapGetters(["jgytControlDialog"]),
+  },
+  mounted() {
+    this.initJGYTList("");
+    this.initJGYTAlarmList("");
+    // this.getDepartmentByPid();
+    this.departmentOptions = GY_STATIONS.filter((e) => e.id !== "");
+  },
+  methods: {
+    async initJGYTList(buildId) {
+      try {
+        const params = {
+          pageSize: 100,
+          pageIndex: 1,
+          buildId: buildId,
+        };
+        const res = await getJGYTList(params);
+        this.dataList = res.data.content;
+        console.log("激光云台列表", this.dataList);
+        this.cameraList = this.dataList.map((e) => e.camera);
+        if (this.cameraList && this.cameraList.length > 0) {
+          this.cameraInfo = this.cameraList[0];
+        }
+        console.log("激光云台摄像头列表", this.cameraList, this.cameraInfo);
+      } catch (err) {
+        console.log(err);
+      }
+    },
+    async initJGYTAlarmList(buildId) {
+      try {
+        const params = {
+          pageSize: 100,
+          pageIndex: 1,
+          buildId: buildId,
+        };
+        const res = await getJGYTAlarmList(params);
+        this.recordList = res.data.content;
+        this.recordTableConfig.tableData = this.recordList;
+        console.log("激光云台报警列表", this.recordList);
+      } catch (err) {
+        console.log(err);
+      }
+    },
+    closeDialog() {
+      this.$store.dispatch("globalConfig/setJGYTControlDialog", {
+        show: false,
+        dialogMsg: {},
+        type: "All",
+      });
+    },
+    async handleDeal() {
+      try {
+        await dealAlarm({
+          id: this.jgytControlDialog.dialogMsg.id,
+          dealContent: this.jgytControlDialog.dialogMsg.dealContent,
+        });
+        this.closeDialog();
+        // 刷新报警列表页
+      } catch (err) {
+        console.log(err);
+      }
+    },
+    handleTableClick(data, btnType) {
+      if (btnType === "open") {
+        console.log("打开", data);
+      }
+      if (btnType === "close") {
+        console.log("关闭", data);
+      }
+    },
+    async getDepartmentByPid() {
+      try {
+        const p = { id: "0" };
+        const res = await getDepartmentByPid(p);
+        let { content } = res.data;
+        content.forEach((element) => {
+          element.value = element.id;
+          element.label = element.departmentName;
+          if (element.children) {
+            element.children.forEach((element2) => {
+              element2.value = element2.id;
+              element2.label = element2.departmentName;
+            });
+          }
+        });
+        this.departmentOptions = content;
+      } catch (err) {
+        console.log(err);
+      }
+    },
+    searchData(e) {
+      console.log("事件信息", e);
+      this.filterInfo();
+    },
+    filterInfo() {
+      if (this.department.positioningBuildId) {
+        this.initJGYTList(this.department.positioningBuildId);
+      } else {
+        this.initJGYTList("");
+      }
+    },
+    exchangeVideo() {},
+    openAll() {},
+    closeAll() {},
+    openBroadcast() {},
+    closeBroadcast() {},
+    handleClose(item) {
+      let index = -1;
+      for (let i = 0; i < this.openningList.length; i++) {
+        const e = this.openningList[i];
+        if (e.label === item.label) {
+          index = i;
+          this.openningList.splice(index, 1);
+        }
+      }
+    },
+  },
+};
+</script>
+  <style lang="less" scoped>
+.dialog_box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  .search-box {
+    width: 100%;
+    display: flex;
+    margin: 6px /* 10/192 */ 0;
+    color: #fff;
+    .search-item {
+      display: flex;
+      .search-label {
+        display: inline-block;
+        width: 60px;
+        font-size: 0.083333rem /* 16/192 */;
+        line-height: 30px;
+        text-align: center;
+        word-break: keep-all;
+      }
+      .search-date.el-input__inner {
+        width: 1.666667rem /* 320/192 */;
+        height: 28px;
+        border-radius: 0;
+        margin-right: 0;
+      }
+      .el-input {
+        ::v-deep .el-input__inner {
+          height: 28px;
+          border-radius: 0;
+          color: #fff;
+        }
+      }
+      .el-select {
+        margin-right: 0.052083rem /* 10/192 */;
+        ::v-deep .el-input__inner {
+          width: 0.572917rem /* 110/192 */;
+          height: 28px;
+          border-radius: 0;
+          color: #fff;
+          // padding-right: 0.182292rem /* 35/192 */;
+        }
+        ::v-deep .el-input__icon {
+          line-height: 28px;
+        }
+      }
+    }
+    .search-btn2 {
+      box-sizing: content-box;
+      text-align: center;
+      justify-content: right;
+      color: #fff;
+      font-size: 0.072917rem /* 14/192 */;
+      cursor: pointer;
+      border-radius: 0;
+      margin-left: 10px;
+      &:hover {
+        border-color: #ccc;
+      }
+      img {
+        width: 0.083333rem /* 16/192 */;
+        height: 0.083333rem /* 16/192 */;
+      }
+    }
+  }
+  .select {
+    text-align: left;
+    font-size: 0.083333rem /* 16/192 */;
+    line-height: 30px /* 50/192 */;
+    color: #fff;
+    .select_title {
+      padding: 6px 6px 6px 16px;
+    }
+  }
+  .jgyt_video {
+    padding-left: 10px;
+    .select {
+      text-align: left;
+      font-size: 0.083333rem /* 16/192 */;
+      line-height: 30px /* 50/192 */;
+      color: #fff;
+      .select_title {
+        padding: 6px;
+      }
+    }
+    .select_list {
+      height: 66px;
+      overflow: auto;
+      max-height: 66px;
+      .select-tag {
+        margin: 2px;
+      }
+    }
+    .select_video {
+      width: 100%;
+      height: 400px;
+      position: relative;
+      .select_video_main {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .tag_info {
+      text-align: left;
+      font-size: 0.083333rem /* 16/192 */;
+      line-height: 30px /* 50/192 */;
+      color: #fff;
+      position: relative;
+      .tag {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .info_list {
+  }
+  .record_list {
+    margin-left: 4px;
+    text-align: left;
+    font-size: 0.083333rem /* 16/192 */;
+    line-height: 30px /* 50/192 */;
+    color: #fff;
+    .record_title {
+      padding: 6px;
+    }
+    .record_info {
+    }
+  }
+}
+</style>
+  

src/views/components/dialog/SoundDialog.vue

@@ -2,25 +2,96 @@
   <base-drag-bg-dialog
     :dialogConfig="baseDialogConfig"
     @handleClose="closeDialog"
-    @onActivated="onActivated"
   >
     <!-- 弹窗内容 -->
     <div class="dialog_box">
       <!-- 内容 -->
       <div class="detail-table-box">
         <el-row>
-          <el-col :span="14">
+          <el-col :span="13">
+            <div class="search-box">
+              <div class="search-item">
+                <span class="search-label">场站：</span>
+                <el-cascader
+                  v-model="query.departmentId"
+                  :options="departmentOptions"
+                  :props="{ checkStrictly: true }"
+                  clearable
+                  size="mini"
+                  placeholder="请选择场站"
+                  style="width: 160px"
+                  @change="searchData()"
+                />
+              </div>
+              <div class="search-btn2" @click="openAll">
+                <el-button size="mini" type="success">全部打开</el-button>
+              </div>
+              <div class="search-btn2" @click="closeAll">
+                <el-button size="mini" type="warning">全部关闭</el-button>
+              </div>
+              <div class="search-btn2" @click="openBroadcast">
+                <el-button size="mini" type="success">广播</el-button>
+              </div>
+              <div class="search-btn2" @click="closeBroadcast">
+                <el-button size="mini" type="danger">停止广播</el-button>
+              </div>
+            </div>
+          </el-col>
+          <el-col :span="11">
+            <div class="select">
+              <div class="select_title">已打开防爆扩音</div>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="13">
             <base-table-list
               :tableConfig="tableConfig"
               @handleClick="handleTableClick"
             />
           </el-col>
-          <el-col class="fbky" :span="10">
+          <el-col class="fbky" :span="11">
+            <div class="select_list">
+              <el-tag
+                class="select-tag"
+                v-for="item in openningList"
+                size="medium"
+                :key="item.label"
+                :type="item.type"
+                closable
+                @close="handleClose(item)"
+              >
+                {{ item.label }}
+              </el-tag>
+            </div>
             <div class="select">
-              <div class="select_title">已打开扩音</div>
-              <div class="select_list"></div>
+              <div class="select_title">
+                防爆扩音现场监视
+                <el-select
+                  v-model="cameraInfo"
+                  style="width: 160px"
+                  size="mini"
+                  clearable
+                  placeholder="请选择摄像头"
+                  @change="exchangeVideo()"
+                >
+                  <el-option
+                    v-for="item in cameraList"
+                    :key="item.id"
+                    :value="item"
+                    :label="item.name"
+                  ></el-option>
+                </el-select>
+              </div>
+            </div>
+            <div class="select_video">
+              <div class="select_video_main">
+                <video-image-window
+                  :cameraData="cameraInfo"
+                  :cameraId="cameraInfo.id"
+                />
+              </div>
             </div>
-            <div class="map"></div>
           </el-col>
         </el-row>
       </div>
@@ -30,12 +101,14 @@
 <script>
 import BaseTableList from "@/views/components/base/BaseTableList";
 import BaseDragBgDialog from "@/views/components/base/BaseDragBgDialog.vue";
+import VideoImageWindow from "@/views/components/dialog/VideoImageWindow.vue";
 import { dealAlarm } from "@/API/common";
+import { getDepartmentByPid } from "@/API/alarm";
 import { getElementList } from "@/API/visual";
 import { mapGetters } from "vuex";
 export default {
   name: "soundDialog",
-  components: { BaseDragBgDialog, BaseTableList },
+  components: { BaseDragBgDialog, BaseTableList, VideoImageWindow },
   watch: {
     "soundDialog.show": {
       handler(newVal) {
@@ -65,8 +138,8 @@ export default {
         dialogId: "soundDialog",
         show: false,
         title: "防爆扩音",
-        width: 1240,
-        height: 540,
+        width: 1250,
+        height: 640,
         center: true,
         zIndex: 10,
       },
@@ -89,10 +162,31 @@ export default {
         tableData: [],
         rowClick: this.location,
       },
+      openningList: [
+        { type: "", label: "设备一" },
+        { type: "", label: "设备二" },
+        { type: "", label: "设备三" },
+        { type: "", label: "设备四" },
+        { type: "", label: "设备五" },
+        { type: "", label: "设备六" },
+        { type: "", label: "设备七" },
+        { type: "", label: "设备八" },
+        { type: "", label: "设备九" },
+        { type: "", label: "设备十" },
+      ],
+      cameraList: [{ id: "1", name: "摄像头1" }],
+      cameraInfo: {
+        id: "1",
+      },
+      departmentOptions: [],
+      query: {
+        departmentId: "",
+      },
     };
   },
   created() {
     this.initSoundList();
+    this.getDepartmentByPid();
   },
   computed: {
     ...mapGetters(["soundDialog"]),
@@ -152,11 +246,45 @@ export default {
       //   },
       // });
     },
-    onActivated() {
-      // console.log("aaa");
-      this.$nextTick(() => {
-        this.$refs.dealContent.focus();
-      });
+    async getDepartmentByPid() {
+      try {
+        const p = { id: "0" };
+        const res = await getDepartmentByPid(p);
+        let { content } = res.data;
+        content.forEach((element) => {
+          element.value = element.id;
+          element.label = element.departmentName;
+          if (element.children) {
+            element.children.forEach((element2) => {
+              element2.value = element2.id;
+              element2.label = element2.departmentName;
+            });
+          }
+        });
+        this.departmentOptions = content;
+      } catch (err) {
+        console.log(err);
+      }
+    },
+    searchData() {
+      this.pageConfig.pageNo = 1;
+      this.filterInfo();
+    },
+    filterInfo() {},
+    exchangeVideo() {},
+    openAll() {},
+    closeAll() {},
+    openBroadcast() {},
+    closeBroadcast() {},
+    handleClose(item) {
+      let index = -1;
+      for (let i = 0; i < this.openningList.length; i++) {
+        const e = this.openningList[i];
+        if (e.label === item.label) {
+          index = i;
+          this.openningList.splice(index, 1);
+        }
+      }
     },
   },
 };
@@ -166,83 +294,102 @@ export default {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
-  .dialog_content_box {
-    height: 2.083333rem /* 400/192 */;
-    padding: 0.104167rem /* 20/192 */ 0;
-    box-sizing: border-box;
+  .search-box {
+    width: 100%;
+    display: flex;
+    margin: 6px /* 10/192 */ 0;
     color: #fff;
-    .detail-box {
-      .el-row {
-        margin-top: 0.052083rem /* 10/192 */;
-        line-height: 0.145833rem /* 28/192 */;
-        .detail-label {
-          vertical-align: top;
-          display: inline-block;
-          width: 0.520833rem /* 100/192 */;
-          text-align: right;
-          padding-right: 0.052083rem /* 10/192 */;
-        }
-        .el-input {
-          width: 1.302083rem /* 250/192 */;
-          height: 0.145833rem /* 28/192 */;
-        }
-        .el-textarea {
-          width: 3.385417rem /* 650/192 */;
-        }
-
-        .image-box {
-          display: inline-block;
-          max-width: 1.666667rem /* 320/192 */;
-          height: 0.9375rem /* 180/192 */;
-          .el-image {
-            height: 100%;
-          }
-        }
-      }
-      .btn-box {
-        width: 100%;
-        height: 0.15625rem /* 30/192 */;
+    .search-item {
+      display: flex;
+      .search-label {
+        display: inline-block;
+        width: 60px;
+        font-size: 14px;
+        line-height: 28px;
         text-align: center;
-        position: absolute;
-        bottom: 0.15625rem /* 30/192 */;
-        left: 50%;
-        transform: translate(-50%, 0);
-        .el-button {
-          width: 0.40625rem /* 78/192 */;
-          height: 0.145833rem /* 28/192 */;
-          box-sizing: border-box;
-          margin-top: 0.015625rem /* 3/192 */;
-          color: #fff;
-          padding: 0;
-          border-color: #fff9de;
+        word-break: keep-all;
+      }
+      .search-date.el-input__inner {
+        width: 1.666667rem /* 320/192 */;
+        height: 28px;
+        border-radius: 0;
+        margin-right: 0;
+      }
+      .el-input {
+        ::v-deep .el-input__inner {
+          height: 28px;
           border-radius: 0;
-          &:hover {
-            border-color: #ccc;
-          }
+          color: #fff;
         }
-        .btn-handle.el-button {
-          // background: url('../../../../assets/out/imgs/popup/button_bg.png') center no-repeat;
-          background: rgba(4, 42, 47, 0.6);
+      }
+      .el-select {
+        margin-right: 0.052083rem /* 10/192 */;
+        ::v-deep .el-input__inner {
+          width: 0.572917rem /* 110/192 */;
+          height: 28px;
+          border-radius: 0;
+          color: #fff;
+          // padding-right: 0.182292rem /* 35/192 */;
         }
-        .btn-cancel.el-button {
-          background: rgba(13, 35, 64, 0.1);
+        ::v-deep .el-input__icon {
+          line-height: 28px;
         }
       }
     }
+    .search-btn2 {
+      box-sizing: content-box;
+      text-align: center;
+      justify-content: right;
+      color: #fff;
+      font-size: 0.072917rem /* 14/192 */;
+      cursor: pointer;
+      border-radius: 0;
+      margin-left: 10px;
+      &:hover {
+        border-color: #ccc;
+      }
+      img {
+        width: 0.083333rem /* 16/192 */;
+        height: 0.083333rem /* 16/192 */;
+      }
+    }
+  }
+  .select {
+    text-align: left;
+    font-size: 0.083333rem /* 16/192 */;
+    line-height: 30px /* 50/192 */;
+    color: #fff;
+    .select_title {
+      padding: 6px 6px 6px 16px;
+    }
   }
   .fbky {
+    padding-left: 10px;
     .select {
       text-align: left;
       font-size: 0.083333rem /* 16/192 */;
       line-height: 30px /* 50/192 */;
       color: #fff;
       .select_title {
-        padding-left: 10px;
+        padding: 6px;
       }
-      .select_list {
+    }
+    .select_list {
+      height: 66px;
+      overflow: auto;
+      max-height: 66px;
+      .select-tag {
+        margin: 2px;
       }
     }
-    .map {
+    .select_video {
+      width: 100%;
+      height: 440px;
+      position: relative;
+      .select_video_main {
+        width: 100%;
+        height: 100%;
+      }
     }
   }
 }

vue.config.js

@@ -22,7 +22,9 @@ module.exports = {
         // target: 'http://11.100.46.218:8080/prod-api/', // 贵都匀现场
         // target: 'http://11.100.46.220:8080/prod-api/', // 贵州现场
         // target: 'http://192.168.1.10:8080/prod-api/', // 贵州现场
-        target: 'http://192.168.195.134:8080/prod-api/', // 贵州现场
+        target: 'http://192.168.18.219:22102/prod-api/', // 都匀转发
+        // target: 'http://192.168.18.219:22100/prod-api/', // 托克托转发
+        // target: 'http://192.168.195.134:8080/prod-api/', // 贵州现场
         // target: 'http://172.168.0.62:8080/prod-api/', // 托克托现场
         // target: 'http://192.168.195.136:8080/prod-api/', // 托克托本地
         // target: 'http://192.168.1.10:8080/prod-api/', // 贵州现场
@@ -43,7 +45,9 @@ module.exports = {
         // target: "http://localhost:8000/model/", // 济北综合站现场服务器
         // target: 'http://11.100.46.220:8081/model/', //贵阳模型服务器
         // target: 'http://192.168.1.10:8081/model/', //贵阳模型服务器
-        target: 'http://192.168.195.134:8081/model/', //贵阳模型服务器
+        target: 'http://192.168.18.219:22101/model/', //托克托模型服务器转发
+        // target: 'http://192.168.18.219:22103/model/', //都匀模型服务器转发
+        // target: 'http://192.168.195.134:8081/model/', //模型服务器
         // target: 'http://172.168.0.62:8081/model/', //托克托模型现场服务器
         // target: 'http://192.168.195.136:8081/model/', //托克托模型服务器
         changeOrigin: true,