From 9739da7c4947eb8a3b83fbc0426d855cdc6ee235 Mon Sep 17 00:00:00 2001
From: fanluyan <754122931@qq.com>
Date: Thu, 17 Aug 2023 14:31:54 +0800
Subject: [PATCH] =?UTF-8?q?=E6=89=8B=E6=9C=BA=E7=AB=AF=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                |   18 +-
 src/components/common/Home.vue             |  200 +++
 src/components/common/Sidebar.vue          |    3 +
 src/main.js                                |    2 +-
 src/router/index.js                        |    9 +-
 src/views/realTimeMonitor/mobile_index.vue | 1470 --------------------
 6 files changed, 224 insertions(+), 1478 deletions(-)
 delete mode 100644 src/views/realTimeMonitor/mobile_index.vue

diff --git a/src/App.vue b/src/App.vue
index 5866cd2..cdd49d8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,14 +4,24 @@
   </div>
 </template>
 <script>
-import DevicePixelRatio from "./components/common/devicePixelRatio";
 export default {
   name: "App",
   data() {
-    return {};
+    return {
+      pageScreen: window.innerWidth,
+    };
+  },
+  mounted() {
+    this.pageWidth();
+  },
+  methods: {
+    pageWidth() {
+      console.log(this.pageScreen);
+      window.addEventListener("resize", () => {
+        this.pageScreen = window.innerWidth;
+      });
+    },
   },
-  mounted() {},
-  methods: {},
   created() {
     //new DevicePixelRatio().init();
   },
diff --git a/src/components/common/Home.vue b/src/components/common/Home.vue
index 87173be..72d5767 100644
--- a/src/components/common/Home.vue
+++ b/src/components/common/Home.vue
@@ -46,4 +46,204 @@ export default {
     box-sizing: border-box;
   }
 }
+@media (max-width: 900px) {
+  .greenStyle .header {
+    // background: #000;
+    width: 100%;
+    height: 40px;
+    font-size: 12px;
+    .logo {
+      display: none;
+    }
+    .el-menu-item {
+      padding: 0 10px;
+    }
+    .el-menu-item [class^="el-icon-"] {
+      width: 12px;
+    }
+    .sidebar .el-menu--horizontal .el-menu-item {
+      height: 40px;
+      line-height: 40px;
+
+      font-size: 12px;
+      i {
+        font-size: 12px;
+      }
+    }
+    .sidebar .el-menu--horizontal .el-submenu .el-submenu__title {
+      height: 40px;
+      line-height: 40px;
+      font-size: 12px;
+      i {
+        font-size: 12px;
+      }
+    }
+    .header-user-con {
+      height: 40px;
+      .user-avator {
+        margin-left: 4px;
+        img {
+          width: 20px;
+          height: 20px;
+        }
+      }
+      .user-avator {
+        //display: none;
+      }
+    }
+    .header-right {
+      padding-right: 12px;
+    }
+  }
+  .content-box {
+    top: 41px;
+    //首页
+    .stritleEchartsPage {
+      .el-card .el-card__body {
+        padding: 8px;
+        height: calc(100% - 16px);
+      }
+      .echart-top {
+        .box-card {
+          h3 {
+            font-size: 12px;
+            line-height: 20px;
+          }
+          .bottomM {
+            p {
+              padding: 1.5%;
+              margin: 1.5%;
+              span {
+                font-size: 12px !important;
+              }
+            }
+          }
+          .chartClass {
+            zoom: 0.5;
+          }
+          .dateBox {
+            top: 8px;
+            right: 8px;
+            .el-input__inner {
+              height: 20px;
+              line-height: 20px;
+            }
+            .el-input__icon {
+              line-height: 20px;
+            }
+          }
+        }
+      }
+    }
+    //realMonitor实时监控
+    .realMonitor {
+      .monitor-container {
+        .sideBar {
+          width: 200px;
+          .radioFilter {
+            .refresh {
+              display: none;
+            }
+          }
+        }
+        .picSetBox {
+          .parameterArea {
+            width: 180px;
+            .setTimebtn .buttonGroup .el-button {
+              width: 84px;
+            }
+            .setfocalLength {
+              .selectChannel {
+                .labelname {
+                  font-size: 12px;
+                }
+              }
+              .buttonGroup .el-button {
+                width: 84px;
+              }
+            }
+          }
+        }
+        .el-date-editor.el-input,
+        .el-date-editor.el-input__inner {
+          width: 174px;
+        }
+      }
+      .infoDialog {
+        .el-dialog {
+        }
+      }
+      .setTimeDialog {
+        .el-dialog {
+          width: 80% !important;
+          margin-top: 15vh !important;
+        }
+      }
+    }
+    //realTimeSearch历史图片
+    .realTimeSearch {
+      height: auto;
+      .searchMain {
+        .searchBox {
+          .el-form-item__label {
+            font-size: 12px;
+          }
+          .el-select {
+            width: 100px;
+          }
+          .el-date-editor.el-input,
+          .el-date-editor.el-input__inner {
+            width: 188px;
+          }
+        }
+      }
+      .pictureBox {
+        height: 100%;
+        overflow: auto;
+        .imgList {
+          width: calc((100% - 50px) / 3);
+          height: auto;
+          margin: 2px;
+          .bigpic {
+            position: relative;
+            img {
+              height: auto;
+            }
+            .caption {
+              position: absolute;
+              bottom: 0px;
+              background: #169e8ca1;
+              width: calc(100% - 8px);
+              padding: 4px;
+              .infoTop {
+                color: #fff;
+                font-size: 12px;
+              }
+              .infoBottom {
+                color: #fff;
+              }
+            }
+          }
+        }
+      }
+    }
+    //告警处理
+    .alarmHandBox {
+      height: auto;
+    }
+    .lineInformation,
+    .towerinfobox,
+    .camerChannel,
+    .photoGraphicDevice,
+    .deviceInformation,
+    .deviceReport,
+    .globalBox {
+      height: auto;
+      .el-dialog {
+        width: 100% !important;
+        margin-top: 120px !important;
+      }
+    }
+  }
+}
 </style>
diff --git a/src/components/common/Sidebar.vue b/src/components/common/Sidebar.vue
index c62495f..3315bd7 100644
--- a/src/components/common/Sidebar.vue
+++ b/src/components/common/Sidebar.vue
@@ -328,6 +328,9 @@ export default {
       height: 70px;
       line-height: 70px;
     }
+    .el-submenu__title {
+      padding: 0 10px;
+    }
     .el-dropdown-menu__item,
     .el-menu-item,
     .el-submenu__title {
diff --git a/src/main.js b/src/main.js
index d37e768..be03894 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,7 +2,7 @@ import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
-//import "./utils/rem";
+
 //引入element-ui
 import "../src/assets/css/theme/index.css"; //l绿色主题
 import ElementUI from "element-ui";
diff --git a/src/router/index.js b/src/router/index.js
index d97ccea..c022ffc 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,7 +1,7 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
-import MobilePage from "../views/realTimeMonitor/mobile_index.vue";
-import PCPage from "../views/realTimeMonitor/index.vue";
+// import MobilePage from "../views/realTimeMonitor/mobile_index.vue";
+// import PCPage from "../views/realTimeMonitor/index.vue";
 Vue.use(VueRouter);
 
 const routes = [
@@ -30,7 +30,10 @@ const routes = [
 
       {
         path: "/realTimeMonitor",
-        component: window.innerWidth < 768 ? MobilePage : PCPage,
+        component: () =>
+          import(
+            /* webpackChunkName: "home" */ "../views/realTimeMonitor/index.vue"
+          ),
         meta: {
           title: "实时监控",
           permission: true,
diff --git a/src/views/realTimeMonitor/mobile_index.vue b/src/views/realTimeMonitor/mobile_index.vue
deleted file mode 100644
index 4100cd7..0000000
--- a/src/views/realTimeMonitor/mobile_index.vue
+++ /dev/null
@@ -1,1470 +0,0 @@
-<template>
-  <div class="mobile_realTimeMonitor">
-    <div class="monitor-container">
-      <!-- 左侧数据列表树 -->
-      <div class="sideBar">
-        <div class="searchBar">
-          <el-input
-            placeholder="输入关键字进行过滤"
-            v-model="filterText"
-            prefix-icon="el-icon-search"
-          >
-          </el-input>
-        </div>
-        <div class="deviceNum">
-          <el-statistic title="装置在线 / 总数">
-            <template slot="formatter">
-              （<span>{{ onlineNum ? onlineNum : 0 }}</span> /
-              <span>{{ totalNum ? totalNum : 0 }}</span
-              >）
-            </template>
-          </el-statistic>
-        </div>
-        <div class="radioFilter">
-          <el-radio-group v-model="zzradio" @input="getRadio">
-            <el-radio :label="-1">全部</el-radio>
-            <el-radio :label="1">在线</el-radio>
-            <el-radio :label="0">离线</el-radio>
-          </el-radio-group>
-          <el-button
-            class="refresh"
-            @click="getLineTreeStatus"
-            type="text"
-            icon="el-icon-refresh-right"
-            >刷新</el-button
-          >
-        </div>
-        <el-tree
-          ref="tree"
-          :data="lineTreeData"
-          :props="defaultProps"
-          node-key="id"
-          default-expand-all
-          highlight-current
-          :expand-on-click-node="false"
-          :filter-node-method="filterNode"
-          :current-node-key="currentNodekey"
-          @node-click="handleNodeClick"
-        >
-          <span class="custom-tree-node" slot-scope="{ node, data }">
-            <span v-if="node.level === 1">
-              <span
-                class="iconfont icon-dianli"
-                style="margin-right: 6px"
-              ></span>
-              <span>{{ node.label }} </span>
-            </span>
-            <span v-else-if="node.level === 2">
-              <span
-                class="iconfont icon-dianlihangye"
-                style="margin-right: 6px"
-              >
-              </span>
-              <span>{{ node.label }} </span>
-            </span>
-            <span v-else>
-              <span
-                class="iconfont icon-shexiangtoulixian"
-                v-if="data.onlinestatus == 0"
-                :class="data.onlinestatus == 0 ? 'disconnect' : ''"
-                style="margin-right: 6px"
-              ></span>
-              <span
-                class="iconfont icon-shexiangtou-lixian"
-                v-else
-                :class="data.onlinestatus == 0 ? 'disconnect' : ''"
-                style="margin-right: 6px"
-              ></span>
-              <span
-                :id="data.id"
-                :class="data.onlinestatus == 0 ? 'disconnect' : ''"
-                >{{ node.label }}</span
-              >
-            </span>
-            <!-- <span :class="data.onlinestatus == 0 ? 'disconnect' : ''"
-              >{{ node.level }}---{{ node.label }}</span
-            > -->
-          </span>
-        </el-tree>
-      </div>
-      <div class="resize" title="收缩侧边栏"></div>
-
-      <div class="picSetBox previewBox" v-show="LineFlag">
-        <!-- 预览图页面 -->
-        <previewContain
-          ref="previewRef"
-          :previewData="previewData"
-        ></previewContain>
-      </div>
-      <!-- 带参数的中心内容右侧参数区 -->
-      <div class="picSetBox" v-show="towerFlag">
-        <div class="swiperBox" v-loading="swiperLoading">
-          <div class="title">
-            <el-breadcrumb separator="/">
-              <el-breadcrumb-item> {{ towertitle }}</el-breadcrumb-item>
-            </el-breadcrumb>
-          </div>
-          <carouselChart
-            ref="carouselpic"
-            :terminalPhoto="terminalPhoto"
-            v-if="terminalPhoto.length > 0"
-          ></carouselChart>
-          <!--  -->
-        </div>
-        <div class="parameterArea">
-          <div class="zzbox">
-            {{ zzCmdid }}
-          </div>
-          <div class="paramsDate">
-            <h3>日历快速查询</h3>
-            <el-date-picker
-              v-model="dateValue"
-              type="date"
-              placeholder="选择日期"
-              format="yyyy 年 MM 月 dd 日"
-              :picker-options="pickerOptions"
-              @change="changedate"
-              :clearable="false"
-            >
-            </el-date-picker>
-          </div>
-          <div class="monitorItemBox">
-            <h3>选择通道监拍点</h3>
-            <el-select
-              v-model="selectChannelValue"
-              placeholder="请选择通道"
-              @change="changeChannelId"
-              ref="multiSelect"
-            >
-              <el-option
-                v-for="item in channelListOption"
-                :key="item.value"
-                :label="
-                  item.alias !== null && item.alias !== ''
-                    ? item.alias
-                    : item.label
-                "
-                :value="item.value"
-              >
-                {{
-                  item.alias !== null && item.alias !== ""
-                    ? item.alias
-                    : item.label
-                }}
-              </el-option>
-            </el-select>
-          </div>
-          <div class="setTimebtn">
-            <h3>操作项</h3>
-            <div class="buttonGroup">
-              <el-dropdown trigger="click" @command="handleCommandpic">
-                <el-button type="primary" :loading="btnpicloading">
-                  主动拍照<i class="el-icon-arrow-down el-icon--right"></i>
-                </el-button>
-                <el-dropdown-menu slot="dropdown" class="picdropStyle">
-                  <el-dropdown-item
-                    :command="item.value"
-                    v-for="(item, index) in channelOption"
-                    :key="index"
-                    >{{
-                      item.alias !== null && item.alias !== ""
-                        ? item.alias
-                        : item.label
-                    }}</el-dropdown-item
-                  >
-                </el-dropdown-menu>
-              </el-dropdown>
-              <el-dropdown trigger="click" @command="handleCommandvideo">
-                <el-button type="primary" :loading="btnvideoloading">
-                  主动录像<i class="el-icon-arrow-down el-icon--right"></i>
-                </el-button>
-                <el-dropdown-menu slot="dropdown" class="videodropStyle">
-                  <el-dropdown-item
-                    :command="item.value"
-                    v-for="(item, index) in channelOption"
-                    :key="index"
-                    >{{
-                      item.alias !== null && item.alias !== ""
-                        ? item.alias
-                        : item.label
-                    }}</el-dropdown-item
-                  >
-                </el-dropdown-menu>
-              </el-dropdown>
-
-              <el-button type="primary" @click="handleShowInfo">
-                装置信息</el-button
-              >
-              <el-button type="primary" @click.native.stop="handleSetSchedule()"
-                >拍照时间表</el-button
-              >
-
-              <el-dropdown
-                class="dropgps"
-                trigger="click"
-                @command="handleCommandWarn"
-              >
-                <el-button type="primary">
-                  声光报警<i class="el-icon-arrow-down el-icon--right"></i>
-                </el-button>
-                <el-dropdown-menu slot="dropdown" class="gpsdropStyle">
-                  <el-dropdown-item command="open">开启</el-dropdown-item>
-                  <el-dropdown-item command="close">关闭</el-dropdown-item>
-                </el-dropdown-menu>
-              </el-dropdown>
-              <!-- 线缆显示 -->
-              <el-dropdown
-                class="dropgps"
-                trigger="click"
-                @command="handleCommandLine"
-              >
-                <el-button type="primary">
-                  线缆显示<i class="el-icon-arrow-down el-icon--right"></i>
-                </el-button>
-                <el-dropdown-menu slot="dropdown" class="gpsdropStyle">
-                  <el-dropdown-item command="open">开启</el-dropdown-item>
-                  <el-dropdown-item command="close">关闭</el-dropdown-item>
-                </el-dropdown-menu>
-              </el-dropdown>
-              <!-- 获取gps位置 -->
-              <el-button type="primary" @click.native.stop="handleShowGPS()"
-                >获取GPS位置</el-button
-              >
-              <!-- gps开关 -->
-              <el-dropdown
-                class="dropgps"
-                trigger="click"
-                @command="handleCommandGps"
-              >
-                <el-button type="primary">
-                  GPS开关<i class="el-icon-arrow-down el-icon--right"></i>
-                </el-button>
-                <el-dropdown-menu slot="dropdown" class="gpsdropStyle">
-                  <el-dropdown-item command="open">开启GPS</el-dropdown-item>
-                  <el-dropdown-item command="close">关闭GPS</el-dropdown-item>
-                </el-dropdown-menu>
-              </el-dropdown>
-              <el-button type="primary" @click="handlehistoryPic">
-                历史图片</el-button
-              >
-            </div>
-          </div>
-          <div
-            class="setfocalLength"
-            v-if="zzprotocol == '65286' || zzhaspan == 1"
-          >
-            <h3>焦距调节</h3>
-            <div class="selectChannel">
-              <span class="labelname">选择通道</span>
-              <el-select
-                v-model="channelarrValue"
-                placeholder="请选择通道"
-                @change="changeChannelarrValue"
-                ref="multiSelect"
-              >
-                <el-option
-                  v-for="item in channelOption"
-                  :key="item.value"
-                  :label="
-                    item.alias !== null && item.alias !== ''
-                      ? item.alias
-                      : item.label
-                  "
-                  :value="item.value"
-                >
-                  {{
-                    item.alias !== null && item.alias !== ""
-                      ? item.alias
-                      : item.label
-                  }}
-                </el-option>
-              </el-select>
-            </div>
-            <div class="buttonGroup">
-              <el-button
-                type="primary"
-                icon="el-icon-zoom-in"
-                @click="amplify()"
-                >放大</el-button
-              >
-              <el-button
-                type="primary"
-                icon="el-icon-zoom-out"
-                @click="reduce()"
-                >缩小</el-button
-              >
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <setschedule ref="setschedule_ref"></setschedule>
-    <info-dialog ref="infodialog_ref"></info-dialog>
-    <gps-position ref="gpsdialog_ref"></gps-position>
-  </div>
-</template>
-<script>
-import {
-  getdyTreeListJoggle,
-  getChannelByTermidJoggle,
-  getTerminalPhotoListJoggle,
-  getTermStatus,
-  alarmMarkJoggle,
-  takePicJoggle,
-  getTakePicPhotoStatusJoggle,
-  getTakePicStatusJoggle,
-  setTermGPSJoggle,
-  updateTermCamera,
-} from "@/utils/api/index";
-import previewContain from "./previewContain.vue";
-import carouselChart from "../components/carouselChart.vue";
-import setschedule from "./components/setschedule.vue";
-import infoDialog from "./components/infoDialog.vue";
-import gpsPosition from "./components/gpsPosition.vue";
-import { number } from "echarts";
-export default {
-  components: {
-    previewContain,
-    carouselChart,
-    setschedule,
-    infoDialog,
-    gpsPosition,
-  },
-  data() {
-    return {
-      btnpicloading: false,
-      btnvideoloading: false,
-      onlinestatus: "", //设备状态啊
-      onlineNum: "", //在线数
-      totalNum: "", //装置总数
-      selectData: "", //点击选中的数据
-      type: "", //选中的类型
-      lineTreeData: [],
-      filterText: "",
-      searchName: "",
-      defaultProps: {
-        //指定参数格式回显数据
-        children: "list",
-        label: "name",
-      },
-      currentNodekey: "", //默认选中的节点树,
-      previewData: [], //预览图数据
-      page: 1, // 当前页数
-      treetimer: null, //轮询状态timer
-      LineFlag: true,
-      towerFlag: false, //判断是否是图片list
-      towertitle: "", //装置杆塔信息
-      terminalPhoto: [], //获取装置当前图片数据
-      nopicPath: require("@/assets/img/nopic.jpg"),
-      swiperLoading: false,
-      zzCmdid: "",
-      zztermId: "",
-      zzprotocol: "", //装置规约
-      zzhaspan: "", //是否带云台
-      dateValue: "", //选择日期
-      pickerOptions: {
-        disabledDate(date) {
-          return date.getTime() > Date.now(); // 禁用大于今天的日期
-        },
-      },
-      channelListOption: [], //通道内容
-      channelOption: [], //主动拍照通道
-      channelarr: [],
-      channelarrValue: null,
-      selectChannelValue: null, //选中的通道
-      channelId: "", //选中的通道id
-      btnpicloading: false, //主动拍照按钮loading
-      requestId: "", //请求拍照返回的requestid
-      picTime: "", //请求拍照返回的时间
-      timer: null, //获取最新图片
-      i: 0, //获取最新图片
-      CurrentData: "", //历史图片当前选中数据
-
-      statusNum: 0, //查询下发状态
-      statusTimer: null, //查询下发状态
-      selectDyId: "", //获取当前选中的电压线路等信息
-      selectLineId: "",
-      selectTowerId: "",
-      currentData: "", //保存选中的数据
-      zzradio: -1,
-    };
-  },
-  watch: {
-    filterText(val) {
-      console.log(val);
-      this.$refs.tree.filter(val);
-      console.log(this.$refs.tree);
-    },
-  },
-  computed: {},
-  mounted() {
-    this.dragControllerDiv();
-    this.getDateTime();
-  },
-  created() {
-    //获取日期
-    this.zzradio =
-      JSON.parse(localStorage.getItem("radio")) !== null
-        ? JSON.parse(localStorage.getItem("radio"))
-        : -1;
-    this.getRadio();
-    this.getLineTreeList();
-    this.treetimer = window.setInterval(() => {
-      setTimeout(this.getLineTreeStatus(), 0);
-    }, 300000);
-  },
-  methods: {
-    //获取当前选中的radio
-    getRadio() {
-      console.log(this.zzradio);
-      localStorage.setItem("radio", JSON.stringify(this.zzradio));
-      this.getLineTreeStatus();
-    },
-    //获取当前时间
-    getDateTime() {
-      console.log(new Date());
-      this.dateValue = new Date().getTime();
-      console.log(this.dateValue);
-    },
-    // //选择时间
-    // changedate() {
-    //   console.log(this.dateValue);
-    // },
-    //点击当前选中的treenode
-    handleNodeClick(data) {
-      this.clearfun();
-      console.log(data);
-      this.selectData = data;
-      this.zztermId = data.id;
-      this.zzprotocol = data.protocol;
-      this.zzhaspan = data.hasPan;
-      this.CurrentData = data;
-      //this.previewData = data;
-      if (data.dyValue) {
-        this.LineFlag = true;
-        this.towerFlag = false;
-        console.log("电压");
-        this.type = 1;
-        //this.getPicList(data.id, this.type);
-        this.$refs.previewRef.getPicList(data.id, this.type, this.page);
-      } else if (data.bsManufacturer) {
-        this.LineFlag = true;
-        this.towerFlag = false;
-        console.log("线路");
-        this.type = 2;
-        this.$refs.previewRef.getPicList(data.id, this.type, this.page);
-        //this.getPicList(data.id, this.type);
-      } else {
-        console.log("杆塔");
-        this.LineFlag = false;
-        this.towerFlag = true;
-        this.towertitle = data.name;
-        this.zzCmdid = data.cmdid;
-        this.getChannelList(data.id);
-
-        // this.getTerminalPhotoList(id, date, data.id);
-      }
-      localStorage.setItem("currentData", JSON.stringify(this.selectData));
-    },
-    //轮询获取装置状态
-    getLineTreeStatus() {
-      console.log("11111111");
-      console.log(this.filterText);
-      if (this.filterText !== "") {
-        this.$refs.tree.filter(this.filterText);
-      } else {
-        getdyTreeListJoggle({ type: this.zzradio })
-          .then((res) => {
-            console.log(res);
-            this.lineTreeData = res.data.list;
-
-            this.$nextTick(() => {
-              this.$refs.tree.setCurrentKey(this.selectData.id); //一定要加这个选中了否则样式没有出来
-            });
-          })
-          .catch((err) => {
-            console.log(err); //代码错误、请求失败捕获
-          });
-      }
-    },
-    //树状图搜索
-    filterNode(value, data, node) {
-      //console.log(value, data, node);
-      this.filterText = value;
-      console.log(this.filterText);
-      // 如果什么都没填全部匹配全部返回
-      if (!value) return true;
-      this.searchName = data.name + data.cmdid;
-      //console.log(this.searchName);
-      // 如果传入的value和data中的label相同，匹配成功
-      if (this.searchName.indexOf(value) !== -1) {
-        return true;
-      }
-    },
-    //获取左侧树结构
-    getLineTreeList() {
-      console.log(this.zzradio);
-      getdyTreeListJoggle({ type: this.zzradio })
-        .then((res) => {
-          console.log(res);
-          this.lineTreeData = res.data.list;
-          console.log(this.lineTreeData);
-
-          this.onlineNum = res.data.onlineNum;
-          this.totalNum = res.data.totalNum;
-          this.currentData = JSON.parse(localStorage.getItem("currentData"));
-          console.log(this.currentData);
-          if (this.lineTreeData[0].list[0].list.length > 0) {
-            console.log("diyici");
-            if (
-              this.currentData !== null &&
-              Object.keys(this.currentData).length !== 0
-            ) {
-              console.log("aaa");
-              this.currentNodekey = this.currentData.id;
-              this.handleNodeClick(this.currentData);
-            } else {
-              console.log("diyici");
-              this.selectData = this.lineTreeData[0]; //第一个选中的数据
-              this.currentNodekey = this.lineTreeData[0].id; //第一个数据
-              this.type = 1;
-              this.newCurrentId = this.lineTreeData[0].id;
-              this.previewData = this.lineTreeData[0]; //预览图数据
-              this.channelId = this.currentNodekey;
-              this.$refs.previewRef.getPicList(
-                this.currentNodekey,
-                this.type,
-                this.page
-              );
-            }
-
-            this.$nextTick(() => {
-              this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
-            });
-          }
-          // if (this.zzradio == -1) {
-          //   this.lineTreeData = this.lineTreeData;
-          // } else if (this.zzradio == 1) {
-          //   //在线
-          //   var data = JSON.parse(JSON.stringify(this.lineTreeData));
-          //   console.log(data);
-          //   const filterId = (data, id) => {
-          //     if (!Array.isArray(data)) {
-          //       return data;
-          //     }
-          //     return data.filter((item) => {
-          //       if ("list" in item) {
-          //         item.list = filterId(item.list, id);
-          //       }
-          //       return item.onlinestatus !== 0;
-          //     });
-          //   };
-          //   const filtredData = filterId(data);
-          //   console.log(filtredData);
-          //   this.lineTreeData = filtredData;
-          // } else if (this.zzradio == 0) {
-          //   //离线
-          //   var data = JSON.parse(JSON.stringify(this.lineTreeData));
-          //   console.log(data);
-          //   const filterId = (data, id) => {
-          //     if (!Array.isArray(data)) {
-          //       return data;
-          //     }
-          //     return data.filter((item) => {
-          //       if ("list" in item) {
-          //         item.list = filterId(item.list, id);
-          //       }
-          //       return item.onlinestatus !== 1;
-          //     });
-          //   };
-          //   const filtredData = filterId(data);
-          //   console.log(filtredData);
-          //   this.lineTreeData = filtredData;
-          // }
-        })
-        .catch((err) => {
-          console.log(err); //代码错误、请求失败捕获
-        });
-    },
-
-    //获取通道的接口
-    getChannelList(id) {
-      getChannelByTermidJoggle({ termid: id })
-        .then((res) => {
-          console.log(res);
-          this.channelList = res.data.list;
-          this.channelarr = res.data.list;
-          if (this.channelList.length == 0) {
-            console.log("没有通道");
-            this.getTerminalPhotoList(-1, this.dateValue, this.zztermId); //获取图片列表是传当前设备的 id 和termid
-          } else {
-            console.log(this.channelList);
-            this.channelOption = [];
-
-            this.channelList.forEach((item) => {
-              this.channelOption.push({
-                label: item.channelname,
-                value: item.channelid,
-                termid: item.termId,
-                alias: item.alias,
-              });
-            }); // 选择通道一通道二select框
-            console.log(this.channelOption);
-            this.channelListOption = [];
-            this.channelListOption.push({
-              label: "全部",
-              value: -1,
-              termid: "",
-              alias: "",
-            });
-            this.channelList.forEach((item) => {
-              this.channelListOption.push({
-                label: item.channelname,
-                value: item.channelid,
-                termid: item.termId,
-                alias: item.alias,
-              });
-            });
-            this.selectChannelValue = this.channelListOption[0].value; //默认选中所有通道
-            this.channelarrValue = this.channelOption[0].value;
-            this.getTerminalPhotoList(
-              this.selectChannelValue,
-              this.dateValue,
-              this.channelList[0].termId
-            ); //获取图片列表是传当前设备的 id 和termid
-            this.selectDyId = res.data.dyId;
-            this.selectLineId = res.data.lineId;
-            this.selectTowerId = res.data.towerId;
-          }
-        })
-        .catch((err) => {
-          console.log(err); //代码错误、请求失败捕获
-        });
-    },
-    //切换通道
-    changeChannelId(val) {
-      console.log(val);
-      this.getTerminalPhotoList(val, this.dateValue, this.zztermId);
-    },
-    //焦距切换通道
-    changeChannelarrValue(val) {
-      console.log(val);
-    },
-    //选择时间
-    changedate() {
-      console.log(this.dateValue.getTime());
-      console.log(this.zztermId);
-      this.getTerminalPhotoList(
-        this.selectChannelValue,
-        this.dateValue,
-        this.zztermId
-      );
-    },
-    //获取图片
-    getTerminalPhotoList(id, date, termId) {
-      this.btnpicloading = false;
-      this.btnvideoloading = false;
-      this.clearfun();
-      this.terminalPhoto = [];
-      console.log(id, date, termId);
-      this.swiperLoading = true;
-      getTerminalPhotoListJoggle({
-        channelid: id,
-        time: date,
-        terminalid: termId,
-      })
-        .then((res) => {
-          console.log(res);
-          this.swiperLoading = false;
-          if (res.data.list.length == 0) {
-            this.terminalPhoto = [
-              {
-                path: this.nopicPath,
-                termId: termId,
-                mediatype: 0,
-              },
-            ];
-          } else {
-            this.terminalPhoto = res.data.list;
-          }
-        })
-        .catch((err) => {
-          console.log(err); //代码错误、请求失败捕获
-        });
-    },
-    //点击图片列表执行函数
-    jumpTowerPic(data) {
-      console.log("我是从子组件过来的数据");
-      console.log(data);
-      this.LineFlag = false;
-      this.towerFlag = true;
-      this.zzCmdid = data.cmdid;
-      this.towertitle = data.towername;
-      this.zztermId = data.termid;
-      this.selectChannelValue = data.channnelname;
-      this.$refs.tree.setCurrentKey(this.zztermId); //一定要加这个选中了否则样式没有出来
-      this.selectedRegion(this.zztermId);
-      if (data.photoTime == "" || data.photoTime == null) {
-        this.getDateTime();
-      } else {
-        this.dateValue = data.photoTime;
-      }
-      console.log(this.selectChannelValue);
-      // this.getChannelList(this.zztermId);
-      getChannelByTermidJoggle({ termid: this.zztermId })
-        .then((res) => {
-          console.log(res);
-          this.channelList = res.data.list;
-          console.log(this.channelList);
-          this.channelOption = [];
-          this.channelList.forEach((item) => {
-            this.channelOption.push({
-              label: item.channelname,
-              value: item.channelid,
-              termid: item.termId,
-              alias: item.alias,
-            });
-          }); // 选择通道一通道二select框
-          console.log(this.channelOption);
-          this.channelListOption = [];
-          this.channelListOption.push({
-            label: "全部",
-            value: -1,
-            termid: "",
-            alias: "",
-          });
-          this.channelList.forEach((item) => {
-            this.channelListOption.push({
-              label: item.channelname,
-              value: item.channelid,
-              termid: item.termId,
-              alias: item.alias,
-            });
-          });
-          this.selectChannelValue = data.channnelname;
-          this.getTerminalPhotoList(
-            data.channelid,
-            this.dateValue,
-            this.zztermId
-          ); //获取图片列表是传当前设备的 id 和termid
-        })
-        .catch((err) => {
-          console.log(err); //代码错误、请求失败捕获
-        });
-      //this.getTerminalPhotoList(data.channelid, this.dateValue, this.zztermId);
-    },
-    selectedRegion(id) {
-      console.log("滚动到选中定位的位置");
-      // 通过Id获取到对应的dom元素
-      const node = document.getElementById(id);
-      setTimeout(() => {
-        if (node) {
-          this.$nextTick(() => {
-            // 通过scrollIntoView方法将对应的dom元素定位到可见区域 【block: 'center'】这个属性是在垂直方向居中显示
-            console.log(node);
-            node.scrollIntoView({ block: "center" });
-          });
-        }
-      }, 100);
-    },
-    //主动拍照
-    handleCommandpic(command) {
-      console.log(command);
-      getTermStatus({ termId: this.zztermId }).then((res) => {
-        console.log(res);
-        if (res.data.isonline) {
-          takePicJoggle({
-            captureType: 0,
-            channel: command,
-            termId: this.zztermId,
-            preset: 255,
-          })
-            .then((res) => {
-              console.log(res);
-              this.requestId = res.data.requestId; //获取requestid 判断装置是否下发
-              this.picTime = res.data.taketime; //获取时间 判断获取最新图片
-              console.log(this.requestId);
-              console.log(this.picTime);
-              this.btnpicloading = true;
-              this.statusTimer = window.setInterval(() => {
-                this.getTakePicStatus(res.data);
-                this.statusNum++;
-              }, 3000);
-            })
-            .catch((err) => {
-              console.log(err); //代码错误、请求失败捕获
-            });
-        } else {
-          this.$message({
-            duration: 1500,
-            showClose: true,
-            message: "装置下线，发送指令失败",
-            type: "error",
-          });
-        }
-      });
-    },
-    //主动拍视频
-    handleCommandvideo(command) {
-      console.log(command);
-      this.clearfun();
-      getTermStatus({ termId: this.zztermId }).then((res) => {
-        console.log(res);
-        if (res.data.isonline) {
-          takePicJoggle({
-            captureType: 1,
-            channel: command,
-            termId: this.zztermId,
-            preset: 255,
-          })
-            .then((res) => {
-              console.log(res);
-              this.requestId = res.data.requestId; //获取requestid 判断装置是否下发
-              this.picTime = res.data.taketime; //获取时间 判断获取最新视频
-              console.log(this.requestId);
-              this.btnvideoloading = true;
-              this.getTakePicStatus(res.data);
-              this.statusTimer = window.setInterval(() => {
-                this.getTakePicStatus(res.data);
-                this.statusNum++;
-              }, 2000);
-            })
-            .catch((err) => {
-              console.log(err); //代码错误、请求失败捕获
-            });
-        } else {
-          this.$message({
-            duration: 1500,
-            showClose: true,
-            message: "装置下线，发送指令失败",
-            type: "error",
-          });
-        }
-      });
-    },
-
-    //获取装置是否下发状态
-    getTakePicStatus(data) {
-      console.log(data);
-      getTakePicStatusJoggle({
-        requestid: data.requestId,
-        termId: this.zztermId,
-        photoTime: new Date(data.taketime).getTime(),
-      })
-        .then((res) => {
-          console.log(res);
-          //res.data  0 状态未知  1 成功 2失败
-          if (
-            res.data.cmaStatus == 0 &&
-            res.data.picStatus == false &&
-            this.statusNum >= 5
-          ) {
-            this.statusNum = 0;
-            clearInterval(this.statusTimer);
-            this.statusTimer = null;
-            this.btnpicloading = false;
-            this.btnvideoloading = false;
-            this.$message({
-              duration: 1500,
-              showClose: true,
-              message: "下发指令超时，请重试！",
-              type: "warning",
-            });
-          } else if (res.data.cmaStatus == 1 || res.data.picStatus == true) {
-            this.statusNum = 0;
-            this.btnpicloading = false;
-            this.btnvideoloading = false;
-            clearInterval(this.statusTimer);
-            this.statusTimer = null;
-            this.$message({
-              duration: 1500,
-              showClose: true,
-              message: "下发指令成功！",
-              type: "success",
-            });
-            this.timer = window.setInterval(() => {
-              this.newPicApi();
-              this.i++;
-            }, 8000);
-          } else if (res.data.cmaStatus == 2) {
-            this.statusNum = 0;
-            this.btnpicloading = false;
-            this.btnvideoloading = false;
-            clearInterval(this.statusTimer);
-            this.statusTimer = null;
-            this.$message({
-              duration: 1500,
-              showClose: true,
-              message: "下发指令失败！",
-              type: "error",
-            });
-          }
-        })
-        .catch((err) => {
-          console.log(err); //代码错误、请求失败捕获
-        });
-    },
-    //获取最新图片
-    newPicApi() {
-      getTakePicPhotoStatusJoggle({
-        photoTime: new Date(this.picTime).getTime(),
-        termId: this.zztermId,
-        requestid: this.requestId,
-      }).then((res) => {
-        console.log(res.data);
-        // // console.log(this.i);
-        if (res.data == true && this.i < 10) {
-          console.log(res.data);
-          this.i = 0;
-          clearInterval(this.timer);
-          this.timer = null;
-          this.btnpicloading = false;
-          this.btnvideoloading = false;
-          this.getTerminalPhotoList(
-            this.selectChannelValue,
-            this.dateValue,
-            this.zztermId
-          ); //获取图片列表是传当前设备的 id 和termid
-          this.$message({
-            duration: 1500,
-            showClose: true,
-            message: "已返回最新图片！",
-            type: "success",
-          });
-          console.log("返回最新图片");
-        } else if (res.data == false && this.i > 10) {
-          this.i = 0;
-          clearInterval(this.timer);
-          this.timer = null;
-        }
-      });
-    },
-    //声光报警开启关闭
-    handleCommandWarn(command) {
-      switch (command) {
-        case "open": //开启
-          this.handleWarn(1);
-          break;
-        case "close": //关闭
-          this.handleWarn(0);
-          break;
-      }
-    },
-    //声光报警
-    handleWarn(val) {
-      console.log("声光报警");
-      console.log(this.zztermId);
-      this.clearfun();
-      getTermStatus({ termId: this.zztermId }).then((res) => {
-        console.log(res);
-        if (res.data.isonline) {
-          alarmMarkJoggle({
-            cmdId: this.zzCmdid,
-            ctrl: val,
-            termId: this.zztermId,
-          })
-            .then((res) => {
-              console.log(res);
-              if (res.code == 200) {
-                if (val == 1) {
-                  this.$message({
-                    duration: 1500,
-                    showClose: true,
-                    message: "声光报警开启成功",
-                    type: "success",
-                  });
-                } else {
-                  this.$message({
-                    duration: 1500,
-                    showClose: true,
-                    message: "声光报警关闭成功",
-                    type: "success",
-                  });
-                }
-              }
-            })
-            .catch((err) => {
-              this.$message({
-                duration: 1500,
-                showClose: true,
-                message: "声光报警操作失败",
-                type: "error",
-              });
-            });
-        } else {
-          this.$message({
-            duration: 1500,
-            showClose: true,
-            message: "装置下线，发送指令失败",
-            type: "error",
-          });
-        }
-      });
-    },
-    //设置时间表
-    handleSetSchedule() {
-      this.clearfun();
-      this.$refs.setschedule_ref.display();
-      this.$refs.setschedule_ref.getSingleAccess(
-        this.zztermId,
-        this.zzCmdid,
-        this.zzprotocol
-      );
-      this.$refs.setschedule_ref.deviceList();
-    },
-    //线缆显示
-    handleCommandLine(command) {
-      this.clearfun();
-      switch (command) {
-        case "open": //开启
-          this.$refs.carouselpic.openline();
-          break;
-        case "close": //关闭
-          this.$refs.carouselpic.handelClear();
-          break;
-      }
-    },
-    //装置信息handleShowInfo
-    handleShowInfo() {
-      this.clearfun();
-      getTermStatus({ termId: this.zztermId }).then((res) => {
-        console.log(res);
-        if (res.data.isonline) {
-          this.$refs.infodialog_ref.display(this.zztermId, this.zzCmdid);
-          this.$refs.infodialog_ref.getinfo();
-          //this.$refs.infodialog_ref.getListData(this.channelId, this.cmdid);
-        } else {
-          this.$message({
-            duration: 1500,
-            showClose: true,
-            message: "装置下线，发送指令失败",
-            type: "error",
-          });
-        }
-      });
-    },
-    //获取GPS位置
-    handleShowGPS() {
-      this.clearfun();
-      this.$refs.gpsdialog_ref.display(this.zzCmdid, this.zztermId);
-      this.$refs.gpsdialog_ref.getgpssql();
-    },
-    //切换gps开启关闭
-    handleCommandGps(command) {
-      switch (command) {
-        case "open": //开启
-          this.changeGPS(1, this.zzCmdid);
-          break;
-        case "close": //关闭
-          this.changeGPS(0, this.zzCmdid);
-          break;
-      }
-    },
-    changeGPS(val, cmdid) {
-      console.log(val, cmdid);
-      this.clearfun();
-      setTermGPSJoggle({ gpsstatus: val, cmdId: cmdid })
-        .then((res) => {
-          console.log(res);
-          if (val == 0) {
-            this.$message({
-              duration: 1500,
-              message: "GPS已关闭",
-              type: "warning",
-              showClose: true,
-            });
-          } else {
-            this.$message({
-              duration: 1500,
-              message: "成功开启GPS",
-              type: "success",
-              showClose: true,
-            });
-          }
-        })
-        .catch((err) => {
-          console.log(err); //代码错误、请求失败捕获
-        });
-    },
-    //历史图片跳转
-    handlehistoryPic() {
-      //console.log(this.CurrentData);
-
-      console.log(this.selectDyId, this.selectLineId, this.selectTowerId);
-      console.log(this.zzCmdid, this.selectChannelValue);
-
-      if (typeof this.dateValue == "number") {
-        console.log(this.dateValue);
-        console.log(new Date(new Date().toLocaleDateString()).getTime());
-        // var newDateValue = this.dateValue.toString();
-        // this.dateValue = newDateValue.slice(0, -3) + "000";
-        this.dateValue = new Date(new Date().toLocaleDateString()).getTime();
-        console.log(1689782400000);
-      } else {
-        this.dateValue = this.dateValue.getTime();
-      }
-
-      this.$router.push({
-        path: "/realTimeSearch",
-        query: {
-          dyId: this.selectDyId,
-          lineId: this.selectLineId,
-          towerId: this.selectTowerId,
-          termId: this.zztermId,
-          cmdId: this.zzCmdid,
-          channelId: this.selectChannelValue,
-          date: this.dateValue,
-        },
-      });
-      // sessionStorage.setItem("keyPath", " realTimeSearch");
-      this.clearfun();
-    },
-    //拖拽
-    dragControllerDiv() {
-      var resize = document.getElementsByClassName("resize");
-      var left = document.getElementsByClassName("sideBar");
-      var mid = document.getElementsByClassName("picSetBox");
-      var box = document.getElementsByClassName("monitor-container");
-      for (let i = 0; i < resize.length; i++) {
-        // 鼠标按下事件
-        resize[i].onmousedown = function (e) {
-          //颜色改变提醒
-          resize[i].style.background = "#128071";
-          var startX = e.clientX;
-          resize[i].left = resize[i].offsetLeft;
-          // 鼠标拖动事件
-          document.onmousemove = function (e) {
-            var endX = e.clientX;
-            var moveLen = resize[i].left + (endX - startX); // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
-            var maxT = box[i].clientWidth - resize[i].offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
-
-            if (moveLen < 290) moveLen = 290; // 左边区域的最小宽度为32px
-            if (moveLen > maxT - 600) moveLen = maxT - 600; //右边区域最小宽度为150px
-
-            resize[i].style.left = moveLen; // 设置左侧区域的宽度
-
-            for (let j = 0; j < left.length; j++) {
-              left[j].style.width = moveLen + "px";
-              mid[j].style.width = box[i].clientWidth - moveLen - 3 + "px";
-            }
-          };
-          // 鼠标松开事件
-          document.onmouseup = function (evt) {
-            //颜色恢复
-            resize[i].style.background = "#dcdfe6";
-            document.onmousemove = null;
-            document.onmouseup = null;
-            resize[i].releaseCapture && resize[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
-          };
-          resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
-          return false;
-        };
-      }
-    },
-    clearfun() {
-      console.log("清除轮询");
-      this.statusNum = 0;
-      this.i = 0;
-      //销毁主动拍照
-      clearInterval(this.statusTimer);
-      this.statusTimer = null;
-      if (this.timer) {
-        console.log(this.timer);
-        clearInterval(this.timer);
-        this.timer = null;
-      } //利用vue的生命周期函数
-    },
-    //焦距放大缩小
-    amplify() {
-      getTermStatus({ termId: this.zztermId }).then((res) => {
-        console.log(res);
-        if (res.data.isonline) {
-          updateTermCamera({
-            termId: this.zztermId,
-            channelId: this.channelarrValue,
-            type: 6,
-          })
-            .then((res) => {})
-            .catch();
-          //this.$refs.infodialog_ref.getListData(this.channelId, this.cmdid);
-        } else {
-          this.$message({
-            duration: 1500,
-            showClose: true,
-            message: "装置下线，发送指令失败",
-            type: "error",
-          });
-        }
-      });
-      console.log(this.channelarrValue, this.zztermId);
-    },
-    //焦距缩小
-    reduce() {
-      getTermStatus({ termId: this.zztermId }).then((res) => {
-        console.log(res);
-        if (res.data.isonline) {
-          updateTermCamera({
-            termId: this.zztermId,
-            channelId: this.channelarrValue,
-            type: 7,
-          })
-            .then((res) => {})
-            .catch();
-          //this.$refs.infodialog_ref.getListData(this.channelId, this.cmdid);
-        } else {
-          this.$message({
-            duration: 1500,
-            showClose: true,
-            message: "装置下线，发送指令失败",
-            type: "error",
-          });
-        }
-      });
-    },
-  },
-
-  destroyed() {
-    //销毁左侧树状图
-    clearInterval(this.treetimer);
-    this.treetimer = null;
-    //销毁主动拍照
-    clearInterval(this.statusTimer);
-    this.statusTimer = null;
-    if (this.timer) {
-      console.log(this.timer);
-      clearInterval(this.timer);
-      this.timer = null;
-    } //利用vue的生命周期函数
-  },
-};
-</script>
-<style lang="less">
-.mobile_realTimeMonitor {
-  width: calc(100% - 0px);
-  height: calc(100% - 12px);
-  padding: 12px 0px 0px 0px;
-  background: #ffffff;
-  .monitor-container {
-    display: flex;
-    height: 100%;
-    box-sizing: border-box;
-    background: @color-white;
-    border: 1px solid #dddddd;
-    border-radius: 4px;
-    .sideBar {
-      width: 300px;
-      //border-right: 1px solid @border-color-base;
-      display: flex;
-      flex-direction: column;
-      padding: 16px 0px;
-      .searchBar {
-        width: 94%;
-        margin: 0 auto;
-        margin-bottom: 8px;
-      }
-      .deviceNum {
-        width: 94%;
-        margin: 0 auto;
-        margin-bottom: 8px;
-        height: 20px;
-        line-height: 20px;
-        font-size: 12px;
-        .el-statistic {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          .head {
-          }
-          .con {
-            color: #169e8c;
-          }
-        }
-      }
-      .radioFilter {
-        width: 94%;
-        margin: 0 auto;
-        margin-bottom: 8px;
-        font-size: 12px;
-        display: flex;
-        justify-content: space-around;
-        .refresh {
-        }
-        .el-radio-group {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          .el-radio {
-            margin-right: 16px;
-          }
-        }
-      }
-      .el-tree {
-        overflow-y: auto;
-        overflow-x: hidden;
-        .el-tree-node__content {
-          height: 32px;
-          font-size: 12px;
-        }
-        .custom-tree-node {
-          color: #333;
-          overflow: hidden;
-          span {
-            display: flex;
-            display: inline-table;
-            overflow: hidden;
-          }
-        }
-      }
-
-      .el-tree--highlight-current
-        .el-tree-node.is-current
-        > .el-tree-node__content {
-        // 设置颜色
-        color: #fff;
-        background: #169e8c;
-        .custom-tree-node {
-          color: #fff;
-          //overflow: hidden;
-          span {
-            display: flex;
-            //overflow: hidden;
-            .iconfont {
-              //width: 30px;
-              display: inline-table;
-            }
-          }
-        }
-      }
-
-      .disconnect {
-        color: #d3d3d3;
-      }
-    }
-    /*拖拽区div样式*/
-    .resize {
-      cursor: col-resize;
-      float: left;
-      position: relative;
-      background-color: #dcdfe6;
-      width: 3px;
-      height: 100%;
-      /*拖拽区鼠标悬停样式*/
-      &:hover {
-        background-color: #169e8c;
-      }
-    }
-
-    .picSetBox {
-      display: flex;
-      width: 100%;
-      height: 100%;
-      //background: #fcc;
-      flex: 1;
-      overflow: hidden;
-      border-left: 1px solid @border-color-base;
-      .swiperBox {
-        -webkit-box-flex: 1;
-        -ms-flex: 1;
-        flex: 1;
-        width: auto;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-        .title {
-          height: 32px;
-          padding-left: 12px;
-          line-height: 32px;
-          color: #fff;
-          font-size: 12px;
-          //background-color: #169e8cb0;
-          background: linear-gradient(180deg, #4cdbc8 10%, #128071 100%);
-          .el-breadcrumb {
-            line-height: 32px;
-            color: #fff !important;
-            font-size: 14px;
-            height: 32px;
-            .el-breadcrumb__inner,
-            .el-breadcrumb__separator {
-              color: #fff !important;
-            }
-          }
-        }
-      }
-      .parameterArea {
-        width: 220px;
-        padding: 0px 8px;
-        border-left: 1px solid #dcdfe6;
-        position: relative;
-        overflow-y: auto;
-        .zzbox {
-          height: 32px;
-          line-height: 32px;
-          color: #169e8c;
-          font-size: 14px;
-          font-weight: normal;
-          //margin-bottom: 16px;
-          //background-color: #169e8cb0;
-        }
-        .paramsDate,
-        .monitorItemBox,
-        .setTimebtn,
-        .setfocalLength {
-          margin-bottom: 16px;
-          position: relative;
-          h3 {
-            font-size: 14px;
-            font-weight: normal;
-            color: @color-text-primary;
-            margin-bottom: 8px;
-          }
-        }
-        .setTimebtn {
-          .buttonGroup {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-between;
-            .el-button {
-              margin-bottom: 8px;
-              width: 104px;
-            }
-            .el-button + .el-button {
-              margin-left: 0px;
-            }
-          }
-        }
-        .setfocalLength {
-          .selectChannel {
-            display: flex;
-            align-items: center;
-            margin-bottom: 12px;
-            .labelname {
-              font-size: 14px;
-              margin-right: 4px;
-              width: 80px;
-              color: #666;
-            }
-          }
-          .buttonGroup {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-between;
-            .el-button {
-              margin-bottom: 8px;
-              width: 104px;
-            }
-            .el-button + .el-button {
-              margin-left: 0px;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-.picdropStyle,
-.videodropStyle,
-.gpsdropStyle {
-  width: 104px;
-  margin-top: 0px !important;
-}
-</style>