Merge branch 'dev' of gitlab.suntrayoa.com:geqilin/energyai_vue into dev

src/pages/eq/hall/components/enTable.vue

-<template>
-  <div class="en-table">
-    <el-table
-      border
-      stripe
-      :data="tableData"
-      style="width: 100%"
-      :header-cell-style="{
-        background: 'rgba(0, 151, 255, 0.08)',
-        color: '#333333',
-      }"
-    >
-      <el-table-column align="center" label="序号" width="100">
-        <template slot-scope="scope">
-          {{ scope.$index + 1 }}
-        </template>
-      </el-table-column>
-      <template v-for="(item, index) in tableColums">
-        <el-table-column
-          :key="index"
-          :prop="item.prop"
-          :label="item.label"
-          :width="item.width"
-          :align="item.align"
-        >
-
-        </el-table-column>
-      </template>
-      <el-table-column align="center" label="操作" width="100" v-if="isShowOp">
-        <template slot-scope="scope">
-          <el-button type="text" size="small">编辑</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <div
-      style="
-        display: flex;
-        justify-content: flex-end;
-        align-items: center;
-        line-height: 3;
-      "
-    >
-      <div style=" ;" class="record-color marg_r_18">共34860条记录</div>
-      <div class="record-color marg_r_8">共20页</div>
-      <div class="record-color">每页显示</div>
-      <el-pagination layout="sizes, prev, pager, next" background :total="1000">
-      </el-pagination>
-    </div>
-  </div>
-</template>
-
-<script >
-export default {
-  name: "enTable",
-  props: ["tableData", "tableColums",'isShowOp'],
-  data() {
-    return {};
-  },
-};
-</script>
-<style  lang="scss">
-.record-color {
-  color: #0097ff;
-}
-.marg_r_18 {
-  margin-right: 18px;
-}
-.marg_r_8 {
-  margin-right: 8px;
-}
-.en-table{
-  .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li{
-    margin: 0 !important;
-  }
-}
-</style>

src/pages/eq/hall/components/hallModal.vue

+<template>
+  <el-dialog title="编辑" :visible.sync="hallModalVisible" :append-to-body="true">
+    <el-form >
+      <el-form-item label="设定频率：" :label-width="formLabelWidth">
+        <el-input size="mini" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item label="启动控制：" :label-width="formLabelWidth">
+             <el-switch ></el-switch>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" >
+      <el-button @click="cancelhandle">取 消</el-button>
+      <el-button type="primary" @click="cancelhandle">确 定</el-button>
+    </div>
+  </el-dialog>
+  
+</template>
+<script lang="ts">
+export default {
+  name: "hallModal",
+  props: ["hallModalVisible"],
+  data() {
+    return {
+        formLabelWidth:'120px',
+    };
+  },
+  methods:{
+    cancelhandle(){
+        this.$emit('cancelhandle')
+    }
+  }
+};
+</script>

src/pages/eq/hall/page.vue

 <template>
   <div class="hall full-height">
     <cardList cardListTitle="候车大厅控制">
-      <div slot="content" style="padding: 24px 28px 20px 23px">
+      <div slot="content" >
         <div>
-          <el-row>
+        
             <el-form :inline="true" :model="formData" label-width="100">
-              <el-col :md="14" :lg="13">
+                <el-row>
+              <el-col :span="12">
                 <el-form-item label="定时功能启止时间：">
                   <el-date-picker
+                  size="mini"
                     style="width: 200px"
                     type="date"
                     placeholder=""
@@ -15,6 +17,7 @@
                   </el-date-picker>
                   <span style="padding: 0 10px">至</span>
                   <el-date-picker
+                    size="mini"
                     style="width: 200px"
                     type="date"
                     placeholder=""
@@ -22,14 +25,13 @@
                   </el-date-picker>
                 </el-form-item>
               </el-col>
-              <el-col :md="12" :lg="4">
+              <el-col :span="4">
                 <el-form-item label="定时设定按钮：">
                   <el-switch active-color="#0097FF" inactive-color="#ff4949">
                   </el-switch>
                 </el-form-item>
               </el-col>
-
-              <el-col :md="12" :lg="5">
+              <el-col :span="5">
                 <el-form-item label="温度设定：">
                   <el-input
                     style="width: 124px"
@@ -40,6 +42,9 @@
                   <!-- <el-button type="primary" >查询</el-button> -->
                 </el-form-item>
               </el-col>
+             
+               </el-row>
+               <el-row>
                   <el-col :md="12" :lg="4">
                 <el-form-item label="节能模式：">
                   <el-switch
@@ -51,41 +56,60 @@
 
               <el-col :md="12" :lg="10">
                 <el-form-item label="">
-                  <el-button type="" size="small">编辑</el-button>
-                  <el-button type="" size="small">自然通风</el-button>
-                  <el-button type="" size="small">机械通风</el-button>
-                  <el-button type="" size="small">供暖</el-button>
+                  <el-button type="primary" size="mini">编辑</el-button>
+                  <el-button type="primary" size="mini">自然通风</el-button>
+                  <el-button type="primary" size="mini">机械通风</el-button>
+                  <el-button type="primary" size="mini">供暖</el-button>
                 </el-form-item>
               </el-col>
-            </el-form>
                </el-row>
+            </el-form>
+         
         </div>
         <!-- tabs -->
         <div style="margin-bottom: 20px">
-           <en-tabs :tabList="tabList"></en-tabs>
+           <!-- <en-tabs :tabList="tabList"></en-tabs> -->
+            <div>
+          <el-tabs class="en-tabs" v-model="activeTab" >
+            <el-tab-pane
+              :label="item.label"
+              :name="item.value"
+              v-for="(item, index) in tabList"
+              :key="index"
+            ></el-tab-pane>
+          </el-tabs>
+        </div>
         </div>
         <!-- table  -->
-        <enTable :tableData="tableData" :tableColums="tableColums" isShowOp="true"></enTable>
+        <enTable v-on:handleBtnClick="handleBtnClick" :tableData="tableData" :tableColums="tableColums" :isShowOp="true" isShowPage="true">
+          <template v-slot:operation='scope'>
+           <el-button type="text" @click="hallModalVisible=true">编辑</el-button>
+         
+         </template>
+        </enTable>
       </div>
     </cardList>
+  <hall-modal v-on:cancelhandle="cancelhandle" :hallModalVisible="hallModalVisible"></hall-modal>
+    hallModalVisible
   </div>
 </template>
 <script>
-import cardList from "../../home/compontents/cardList";
-import enTable from "./components/enTable";
-import enTabs from './components/enTabs'
+import cardList from "../../components/cardList";
+import enTable from "../../components/enTable";
+import enTabs from '../../components/enTabs'
+import hallModal from './components/hallModal'
 const tableColums = [
   {
     align: "center",
     prop: "A",
     label: "设备名称",
-    width: 132,
+    width: 112,
   },
   {
     align: "center",
     prop: "B",
     label: "设备描述",
-    width: 112,
+    // width: 112,
   },
   {
     align: "center",
@@ -224,12 +248,13 @@ export default {
     cardList,
     enTable,
     enTabs,
+    hallModal,
   },
   data() {
     return {
       tableColums,
       tableData,
-     
+     activeTab:'01',
       formData: {},
       tabList: [
         {
@@ -249,21 +274,32 @@ export default {
           label: " 水泵",
         },
       ],
-      
+      hallModalVisible:false,
     };
   },
   methods: {
+     cancelhandle(){
+        this.$nextTick(()=>{
+           this.hallModalVisible = false
+        })
       
      },
+     handleBtnClick(){
+       this.hallModalVisible = true
+     }
+  },
 };
 </script>
 <style lang="scss" >
 .hall {
   height: 100%;
-   padding:10px 10px 40px 10px;
+   padding:0px 0 40px 0px;
   .el-input__inner {
     height: 30px;
   }
+  .el-form-item{
+    margin-bottom: 10px;
+  }
   .el-form-item__label {
     padding: 0;
   }

src/pages/eq/office/config.js

+ export const  tableColumsOne = [
+    {
+      align: "center",
+      prop: "A",
+      label: "设备名称",
+      width: 132,
+    },
+    {
+      align: "center",
+      prop: "B",
+      label: "设备位置",
+      // width: 112,
+    },
+    {
+      align: "center",
+      prop: "C",
+      label: "控制方式",
+      width: 132,
+    },
+    {
+      align: "center",
+      prop: "D",
+      label: "能耗统计",
+      width: 182,
+    },
+    
+    {
+      align: "center",
+      prop: "E",
+      label: "设备编号",
+      width: 132,
+    },
+  ];
+
+  export const tableDataOne = [
+    {
+      A: "多联空调A1",
+      B: "左侧办公房屋",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLW-A1'
+    },
+    {
+      A: "多联空调A2",
+      B: "左侧办公房屋",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLW-A1'
+    },
+    {
+      A: "多联空调A3",
+      B: "左侧办公房屋",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLW-A1'
+    },
+    {
+      A: "多联空调A4",
+      B: "左侧办公房屋",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLW-A1'
+    },
+    {
+      A: "多联空调A5",
+      B: "左侧办公房屋",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLW-A1'
+    },
+    {
+      A: " 多联空调A4",
+      B: "左侧办公房屋",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLW-A1'
+    },
+    {
+      A: " 多联空调A4",
+      B: "左侧办公房屋",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLW-A1'
+    },
+    {
+      A: " 多联空调A4",
+      B: "右侧办公房屋",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLW-A1'
+    },
+    {
+      A: " 多联空调A4",
+      B: "右侧办公房屋",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLW-A1'
+    },
+    {
+      A: "多联空调A10",
+      B: "右侧办公房屋",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLW-A1'
+    },
+    {
+      A: "多联空调A",
+      B: "左侧办公房屋",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLW-A1'
+    },
+  ];
+
+  export const tableDataTwo = [
+    {
+      A: "多联新风",
+      B: "屋面",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLX-1'
+    },
+    {
+      A: "多联新风",
+      B: "屋面",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLX-1'
+    },
+    {
+      A: "多联新风",
+      B: "屋面",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLX-1'
+    },
+    {
+      A: "多联新风",
+      B: "屋面",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLX-1'
+    },
+    {
+      A: "多联新风",
+      B: "屋面",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLX-1'
+    },
+    {
+      A: " 多联新风",
+      B: "屋面",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLW-A1'
+    },
+    {
+      A: " 多联新风",
+      B: "屋面",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLX-1'
+    },
+    {
+      A: " 多联新风",
+      B: "屋面",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLX-1'
+    },
+    {
+      A: " 多联新风",
+      B: "屋面",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLX-1'
+    },
+    {
+      A: "多联新风",
+      B: "屋面",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLX-1'
+    },
+    {
+      A: "多联新风",
+      B: "屋面",
+      C: "开/关/设定温度",
+      D: "今日用电量/本月用电量",
+      E:'DLX-1'
+    },
+  ];
+
+ 
+  export const tableDataThree = [
+    {
+      A: "机房空调",
+      B: "通信机械室",
+      C: "显示状态",
+      D: "今日用电量/本月用电量",
+      E:'JK-1'
+    },
+    {
+      A: "机房空调",
+      B: "通信机械室",
+      C: "显示状态",
+      D: "今日用电量/本月用电量",
+      E:'JK-1'
+    },
+    {
+      A: "机房空调",
+      B: "通信机械室",
+      C: "显示状态",
+      D: "今日用电量/本月用电量",
+      E:'JK-1'
+    },
+    {
+      A: "机房空调",
+      B: "通信机械室",
+      C: "显示状态",
+      D: "今日用电量/本月用电量",
+      E:'JK-1'
+    },
+    {
+      A: "机房空调",
+      B: "通信机械室",
+      C: "显示状态",
+      D: "今日用电量/本月用电量",
+      E:'JK-1'
+    },
+    {
+      A: " 机房空调",
+      B: "通信机械室",
+      C: "显示状态",
+      D: "今日用电量/本月用电量",
+      E:'JK-1'
+    },
+    {
+      A: " 机房空调",
+      B: "通信机械室",
+      C: "显示状态",
+      D: "今日用电量/本月用电量",
+      E:'JK-1'
+    },
+    {
+      A: " 机房空调",
+      B: "通信机械室",
+      C: "显示状态",
+      D: "今日用电量/本月用电量",
+      E:'JK-1'
+    },
+    {
+      A: " 机房空调",
+      B: "右侧办公房屋",
+      C: "显示状态",
+      D: "今日用电量/本月用电量",
+      E:'JK-1'
+    },
+    {
+      A: "信息机房",
+      B: "右侧办公房屋",
+      C: "显示状态",
+      D: "今日用电量/本月用电量",
+      E:'JK-1'
+    },
+    {
+      A: "信息机房",
+      B: "左侧办公房屋",
+      C: "显示状态",
+      D: "今日用电量/本月用电量",
+      E:'JK-1'
+    },
+  ];
+  
+  export const tableDataFour = [
+    {
+      A: "排风机",
+      B: "售票厅",
+      C: "开/关",
+      D: "今日用电量/本月用电量",
+      E:'PF-B5'
+    },
+    {
+      A: "排风机",
+      B: "消防泵房",
+      C: "开/关",
+      D: "今日用电量/本月用电量",
+      E:'PF-B4'
+    },
+    {
+      A: "排风机",
+      B: "车站备品间",
+      C: "开/关",
+      D: "今日用电量/本月用电量",
+      E:'厕所排风机1#'
+    },
+    {
+      A: "排风机",
+      B: "候车厅公共卫生间",
+      C: "开/关",
+      D: "今日用电量/本月用电量",
+      E:'厕所排风机2#'
+    },
+    {
+      A: "排风机",
+      B: "出站通道公共卫生间",
+      C: "开/关",
+      D: "今日用电量/本月用电量",
+      E:'厕所排风机3#'
+    },
+    {
+      A: " 换气扇",
+      B: "吸氧间",
+      C: "开/关",
+      D: "今日用电量/本月用电量",
+      E:'JK-1'
+    },
+    {
+      A: " 换气扇",
+      B: "吸氧间",
+      C: "开/关",
+      D: "今日用电量/本月用电量",
+      E:'JK-1'
+    },
+    {
+      A: " 换气扇",
+      B: "吸氧间",
+      C: "开/关",
+      D: "今日用电量/本月用电量",
+      E:'JK-1'
+    },
+    {
+      A: " 换气扇",
+      B: "吸氧间",
+      C: "开/关",
+      D: "今日用电量/本月用电量",
+      E:'JK-1'
+    },
+    {
+      A: "换气扇",
+      B: "站长室",
+      C: "开/关",
+      D: "今日用电量/本月用电量",
+      E:'JK-1'
+    },
+    {
+      A: "换气扇",
+      B: "VIP候车室",
+      C: "开/关",
+      D: "今日用电量/本月用电量",
+      E:'JK-1'
+    },
+  ];
+  
\ No newline at end of file

src/pages/eq/office/page.vue

 <template>
-  <div class="office-area-control" style=" padding:10px 10px 40px 10px;">
+  <div class="office-area-control" style="padding:0 0 40px 0">
     <cardList cardListTitle="办公区域控制">
-      <div slot="content" style="padding: 24px 28px 20px 23px">
-        <enTabs :tabList="officeTabList"></enTabs>
+      <div slot="content" >
+        <!-- <enTabs :tabList="officeTabList"></enTabs> -->
+         <el-tabs class="en-tabs" v-model="activeTab" >
+            <el-tab-pane
+              :label="item.label"
+              :name="item.value"
+              v-for="(item, index) in officeTabList"
+              :key="index"
+            ></el-tab-pane>
+          </el-tabs>
         <div style="margin-top: 20px"></div>
-        <en-table :tableData="tableData" :tableColums="tableColums" isShowOp="true"> </en-table>
+        <en-table :tableData="tableData" :tableColums="tableColums" :isShowOp="true" isShowPage="true"> 
+          <template v-slot:operation='scope'>
+           <el-button type="text">编辑</el-button>
+         </template>
+        </en-table>
       </div>
     </cardList>
   </div>
 </template>
 <script >
-const tableColums = [
-  {
-    align: "center",
-    prop: "A",
-    label: "设备名称",
-    width: 132,
-  },
-  {
-    align: "center",
-    prop: "B",
-    label: "设备描述",
-    width: 112,
-  },
-  {
-    align: "center",
-    prop: "C",
-    label: "运行状态",
-    width: 132,
-  },
-  {
-    align: "center",
-    prop: "D",
-    label: "当前频率",
-    width: 132,
-  },
-  {
-    align: "center",
-    prop: "E",
-    label: "故障报警",
-    width: 132,
-  },
-  {
-    align: "center",
-    prop: "F",
-    label: "说明",
-    width: 132,
-  },
-  {
-    align: "center",
-    prop: "G",
-    label: "设备编号",
-    width: 132,
-  },
-];
-const tableData = [
-  {
-    A: "A",
-    B: "YA01254N51",
-    C: "正常",
-    D: "110Hz",
-    E: "",
-    F: "说明",
-    G: "QY0001",
-  },
-  {
-    A: "A",
-    B: "YA01254N51",
-    C: "正常",
-    D: "110Hz",
-    E: "",
-    F: "说明",
-    G: "QY0001",
-  },
-  {
-    A: "A",
-    B: "YA01254N51",
-    C: "正常",
-    D: "110Hz",
-    E: "",
-    F: "说明",
-    G: "QY0001",
-  },
-  {
-    A: "A",
-    B: "YA01254N51",
-    C: "正常",
-    D: "110Hz",
-    E: "",
-    F: "说明",
-    G: "QY0001",
-  },
-  {
-    A: "A",
-    B: "YA01254N51",
-    C: "正常",
-    D: "110Hz",
-    E: "",
-    F: "说明",
-    G: "QY0001",
-  },
-  {
-    A: "A",
-    B: "YA01254N51",
-    C: "正常",
-    D: "110Hz",
-    E: "",
-    F: "说明",
-    G: "QY0001",
-  },
-  {
-    A: "A",
-    B: "YA01254N51",
-    C: "正常",
-    D: "110Hz",
-    E: "",
-    F: "说明",
-    G: "QY0001",
-  },
-  {
-    A: "A",
-    B: "YA01254N51",
-    C: "正常",
-    D: "110Hz",
-    E: "",
-    F: "说明",
-    G: "QY0001",
-  },
-  {
-    A: "A",
-    B: "YA01254N51",
-    C: "正常",
-    D: "110Hz",
-    E: "",
-    F: "说明",
-    G: "QY0001",
-  },
-  {
-    A: "A",
-    B: "YA01254N51",
-    C: "正常",
-    D: "110Hz",
-    E: "",
-    F: "说明",
-    G: "QY0001",
-  },
-  {
-    A: "A",
-    B: "YA01254N51",
-    C: "正常",
-    D: "110Hz",
-    E: "",
-    F: "说明",
-    G: "QY0001",
-  },
-];
-import cardList from "../../home/compontents/cardList";
-import enTabs from "../hall/components/enTabs";
-import enTable from "../hall/components/enTable";
+// const tableColums = [
+//   {
+//     align: "center",
+//     prop: "A",
+//     label: "设备名称",
+//     width: 132,
+//   },
+//   {
+//     align: "center",
+//     prop: "B",
+//     label: "设备位置",
+//     // width: 112,
+//   },
+//   {
+//     align: "center",
+//     prop: "C",
+//     label: "控制方式",
+//     width: 132,
+//   },
+//   {
+//     align: "center",
+//     prop: "D",
+//     label: "能耗统计",
+//     width: 132,
+//   },
+//   // {
+//   //   align: "center",
+//   //   prop: "E",
+//   //   label: "故障报警",
+//   //   width: 132,
+//   // },
+//   // {
+//   //   align: "center",
+//   //   prop: "F",
+//   //   label: "说明",
+//   //   width: 132,
+//   // },
+//   {
+//     align: "center",
+//     prop: "G",
+//     label: "设备编号",
+//     width: 132,
+//   },
+// ];
+// const tableData = [
+//   {
+//     A: "A",
+//     B: "YA01254N51",
+//     C: "正常",
+//     D: "110Hz",
+//     E: "",
+//     F: "说明",
+//     G: "QY0001",
+//   },
+//   {
+//     A: "A",
+//     B: "YA01254N51",
+//     C: "正常",
+//     D: "110Hz",
+//     E: "",
+//     F: "说明",
+//     G: "QY0001",
+//   },
+//   {
+//     A: "A",
+//     B: "YA01254N51",
+//     C: "正常",
+//     D: "110Hz",
+//     E: "",
+//     F: "说明",
+//     G: "QY0001",
+//   },
+//   {
+//     A: "A",
+//     B: "YA01254N51",
+//     C: "正常",
+//     D: "110Hz",
+//     E: "",
+//     F: "说明",
+//     G: "QY0001",
+//   },
+//   {
+//     A: "A",
+//     B: "YA01254N51",
+//     C: "正常",
+//     D: "110Hz",
+//     E: "",
+//     F: "说明",
+//     G: "QY0001",
+//   },
+//   {
+//     A: "A",
+//     B: "YA01254N51",
+//     C: "正常",
+//     D: "110Hz",
+//     E: "",
+//     F: "说明",
+//     G: "QY0001",
+//   },
+//   {
+//     A: "A",
+//     B: "YA01254N51",
+//     C: "正常",
+//     D: "110Hz",
+//     E: "",
+//     F: "说明",
+//     G: "QY0001",
+//   },
+//   {
+//     A: "A",
+//     B: "YA01254N51",
+//     C: "正常",
+//     D: "110Hz",
+//     E: "",
+//     F: "说明",
+//     G: "QY0001",
+//   },
+//   {
+//     A: "A",
+//     B: "YA01254N51",
+//     C: "正常",
+//     D: "110Hz",
+//     E: "",
+//     F: "说明",
+//     G: "QY0001",
+//   },
+//   {
+//     A: "A",
+//     B: "YA01254N51",
+//     C: "正常",
+//     D: "110Hz",
+//     E: "",
+//     F: "说明",
+//     G: "QY0001",
+//   },
+//   {
+//     A: "A",
+//     B: "YA01254N51",
+//     C: "正常",
+//     D: "110Hz",
+//     E: "",
+//     F: "说明",
+//     G: "QY0001",
+//   },
+// ];
+import cardList from "../../components/cardList";
+import enTabs from "../../components/enTabs";
+import enTable from "../../components/enTable";
+import { tableDataOne,tableColumsOne ,tableDataTwo,tableDataThree,tableDataFour} from './config'
+
 export default {
   name: "officeAreaControl",
   components: {
@@ -165,10 +179,12 @@ export default {
     enTabs,
     enTable,
   },
+  
   data() {
     return {
-      tableData,
-      tableColums,
+      activeTab:'01',
+      tableData:tableDataOne,
+      tableColums:tableColumsOne,
       officeTabList: [
         {
           value: "01",
@@ -189,5 +205,27 @@ export default {
       ],
     };
   },
+  watch:{
+    activeTab(val){
+       switch (val){
+         case '01':
+         this.tableColums = tableColumsOne
+         this.tableData = tableDataOne
+         break;
+          case '02':
+         this.tableColums = tableColumsOne
+         this.tableData = tableDataTwo
+         break;
+          case '03':
+         this.tableColums = tableColumsOne
+         this.tableData = tableDataThree
+         break;
+          case '04':
+         this.tableColums = tableColumsOne
+         this.tableData = tableDataFour
+         break;
+       }
+    }
+  }
 };
 </script>

src/pages/eq/view/index.vue

+<template lang="pug">
+  <div class="ol_point">
+    <el-container style='padding-left:0px;'>
+      <el-aside width='333px' style='height:825px;'>
+          <el-card class = "tree-container">
+            <div class="ol_point_left_top">
+              <div class="ol_point_left_topL">
+                <div>资源列表</div>
+              </div>
+              //- <div style="float:right; margin:5px 5px 0 5px">
+              //-   <el-button type="text" size="mini" icon='el-icon-shoucang' @click="treeDataOffClick()"></el-button>
+              //- </div>
+              <div class="ol_point_left_topR">
+                <el-input suffix-icon="el-icon-search" size="small" v-model="searchInput" clearable></el-input>
+              </div>
+            </div>
+            <el-tree class="dic_tree" :data="treeData" ref='tree' :accordion='true' :highlight-current='true' :props="defaultProps" :filter-node-method="filterNode" :default-expand-all='false' @node-click="handleNodeClick" :default-expanded-keys='defaultExpandedKeys' :node-key='nodeKey' >
+              <span class="custom-tree-node" style='width:100%;line-height: 18px;' slot-scope="{ node, data }">
+                <span v-if="node.data.level == 3" class="el-icon-zhandian  xa-icon"></span>
+                <span v-if="node.data.level == 4 && node.data.iconB" class="el-icon-wq-treeIcon1  xa-icon"></span>
+                <span v-if="node.data.level == 4 && !node.data.iconB" class="el-icon-wq-treeIcon  xa-icon"></span>
+                <span v-if="node.data.level == 5 && node.data.name == '视频监控'" class="el-icon-shipin  xa-icon"></span>
+                <span v-if="node.data.level == 5 && node.data.name == '出入口控制'" class="el-icon-churukoukongzhi  xa-icon"></span>
+                <span v-if="node.data.level == 5 && node.data.name == '入侵报警'" class="el-icon-ruqinbaojing  xa-icon"></span>
+                <span v-if="node.data.level == 5 && node.data.name == '安全检查'" class="el-icon-anquanjiancha  xa-icon"></span>
+                <span v-if="node.data.level == 6 && node.data.isDefence" class="el-icon-fangqukuang7  xa-icon"></span>
+                <span v-if="node.data.level == 6 && !node.data.isDefence" :class="node.data.icon+'7'" class='xa-icon'></span>
+                <span v-if="node.data.level == 7 " :class="node.data.icon+'7'" class='xa-icon'></span>
+                <span style="position: relative;" v-if="node.label.indexOf('在线') == -1 && node.label.indexOf('离线') == -1">&nbsp;{{node.label}}<span style="width:25px; height:16px; position: absolute;left: -46px;top: -3px;"></span></span>
+                <span style="position: relative;" v-if="node.label.indexOf('在线') > -1">&nbsp;{{node.label.substring(0,node.label.length - 4)}}<span style='color:green;'>[在线]</span><span style="width:25px; height:16px; position: absolute;left: -46px;top: -3px;"></span></span>
+                <span style="position: relative;" v-if="node.label.indexOf('离线') > -1">&nbsp;{{node.label.substring(0,node.label.length - 4)}}<span style='color:red;'>[离线]</span><span style="width:25px; height:16px; position: absolute;left: -46px;top: -3px;"></span></span>
+                <span style="float:right;">
+                  <el-button style="padding:0;" v-if="activeName == 2 && node.data.level == 6" type='text' icon="el-icon-delete" @click="treeDataDeleteClick(node,data)" ></el-button>
+                </span>
+                span(v-if=" node.data.iconB" class='el-icon-my-treeFlag')
+              </span>
+            </el-tree>
+            <!-- <span class="el-icon-shousuo"></span> -->
+          </el-card>
+      </el-aside>
+
+      <el-main style="padding:0px;height:825px;">
+        <el-card>
+          <div class="ol_point_right_button">
+            <el-row :span="24" style='padding-top:5px;'>
+                <el-col :md='14' :sm="5" class='tier-btn'>
+                    <el-button type="primary" size="small" plain :class="[checkedData.tierId===item.id?'active-tier':'']" style="float:left;margin-left:10px;" v-for="item in mapList" :key='item.id' @click="changeMap(item)">{{item.name}}</el-button>
+                </el-col>
+                <el-col :md='10' :sm="5">
+                  <div style="float:right;">
+                    <div :class="item.value" style="margin:5px 5px 0 0;" :title="item.name" v-for="item in iconNameListBottom" @click="iconClick(item)"></div>
+                  </div>
+                </el-col>
+            </el-row>
+          </div>
+            //-   <div class="ol_point_right_button_r">
+            //-       <div :class="[transformationSta == 1?'on':'']" @click="transformation(1)">2D</div>
+            //-       <div :class="[transformationSta == 2?'on':'']" @click="transformation(2)">3D</div>
+            //-   </div>
+          <div v-show="transformationSta==1">
+            <el-row style="padding-bottom:15px;height:780px;background:#fff;" :span="24">
+              <el-col class="resource-container" :style="obj" ref="drag">
+                <div id="map" class="map" ref='map'  style="width: 100%;height: 720px;position:relative;"></div>
+              </el-col>
+            </el-row>
+          </div>
+          <div class="map_right">
+            <div>
+              <iframe :src="src" ref="iframe"></iframe>
+            </div>
+          </div>
+        </el-card>
+      </el-main>
+      <query-detail v-if='queryDetailVisible' ref='queryDetail' @closeQ="closeQueryDetailVisible"></query-detail>
+      <no-query-detail v-if='noQueryDetailVisible' ref='noQueryDetail' @closeQ="closeNoQueryDetailVisible"></no-query-detail>
+    </el-container>
+  </div>
+
+</template>
+
+<script>
+import QueryDetail from './query-detail'
+import NoQueryDetail from './no-query-detail'
+import { getUUID } from '@/util'
+import Vue from 'vue'
+
+import 'ol/ol.css'
+import { Map, View, layer, Markers } from 'ol'
+import { Projection, Transform } from 'ol/proj'
+import { getCenter } from 'ol/extent'
+import overviewmap from 'ol/control/OverviewMap'
+import ImageLayer from 'ol/layer/Image'
+import ImageStatic from 'ol/source/ImageStatic'
+import { control } from 'ol/control/Control'
+import Zoom from 'ol/control/Zoom'
+import { DoubleClickZoom, Select } from 'ol/interaction'
+// 图上图标相关
+import OlFeature from 'ol/Feature'
+import OlGeomPoint from 'ol/geom/Point'
+import OlLayerVector from 'ol/layer/Vector'
+import OlSourceVector from 'ol/source/Vector'
+import OlStyleStyle from 'ol/style/Style'
+import OlStyleIcon from 'ol/style/Icon'
+import LineString from 'ol/geom/LineString'
+import Polygon from 'ol/geom/Polygon'
+
+// 用来添加相关文字描述的
+import { Text, Fill, Stroke, Circle, Style } from 'ol/style'
+
+import { mapState, mapGetters, mapActions } from 'vuex'
+
+let that
+export default {
+  name: 'sys-user',
+  filters: {
+    ellipsis(value) {
+      if (!value) return ''
+      if (value.length > 20) {
+        return value.slice(0, 20) + '...'
+      }
+      return value
+    }
+  },
+  data() {
+    return {
+      imgLayerList: [],
+      controlList: [],
+      imgurl: '',
+      transformationSta: 1,
+      isCollapse: true,
+      urlPath: window.CONFIG.urlPath,
+      dataListLoading: false,
+      dataListSelections: [],
+      addOrUpdateVisible: false,
+      queryDetailVisible: false,
+      noQueryDetailVisible: false,
+      treeData: [],
+      listArr: [],
+      defaultExpandedKeys: [],
+      iconNameListBottom: [],
+      defaultProps: {
+        children: 'children',
+        label: 'name',
+        level1: 'level'
+      },
+      nodeKey: 'id',
+      station: {}, //当前选择的站点
+      mapList: [], //当前站点的所有层
+      stationMap: {}, //当前选择的层
+      clickItem: {},
+      checkedData: {
+        stationId: '',
+        stationName: '',
+        tierId: '',
+        tierName: '',
+        resourceId: '',
+        sId: localStorage.getItem('stationId')
+      },
+      currentNode: {},
+      dragAble: false,
+      list: [],
+      obj: 'pointer-events:initial',
+      editable: false,
+      activeName: '1',
+      searchInput: '',
+      src: window.CONFIG.bimPath,
+      regionMouse: {
+        x: 0,
+        y: 0,
+        w: 0,
+        h: 0,
+        status: false
+      },
+      vectorLayer: [],
+      lineVectorLayer: [],
+      resolutions: [],
+      code: ''
+    }
+  },
+  components: {
+    QueryDetail,
+    NoQueryDetail
+  },
+  watch: {
+    searchInput(val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  created() {
+    that = this
+    this.initTreeStationMap()
+    this.initResourceTypeDicList()
+  },
+  methods: {
+    // 初始化地图
+    initMap(url) {
+      this.resolutions = []
+      let mapList = this.mapList
+      //   let mapsrcList = []
+      //   if (mapList != null && mapList.length > 0) {
+      //     mapsrcList = mapList.map((e) => e.readPath)
+      //   }
+      this.imgurl = url
+      // 计算静态地图映射到地图上的范围
+      let extent = [-1100, 110, 1460, 820]
+
+      let projection = new Projection({
+        // 投影
+        code: 'xkcd-image',
+        units: 'pixels',
+        extent: extent
+      })
+      if (mapList.length > 0) {
+        for (var i = 0; i < mapList.length; i++) {
+          let layerItem = new ImageLayer({
+            id: mapList[i].id,
+            source: new ImageStatic({
+              url: mapList[i].readPath, //这里添加静态图片的地址
+              projection: projection,
+              imageExtent: extent
+            }),
+            visible: false
+          })
+          this.imgLayerList.push(layerItem)
+
+          let controlItem = new overviewmap({
+            className: 'ol-overviewmap myOverview', //鹰眼控件样式
+            // 在鹰眼中加载相同坐标系下不同数据源的图层
+            layers: [
+              new ImageLayer({
+                source: new ImageStatic({
+                  url: mapList[i].readPath, //这里添加静态图片的地址
+                  projection: projection,
+                  imageExtent: extent
+                })
+              })
+            ],
+            collapseLabel: '\u00BB', //鹰眼控件展开时功能按钮上的标识
+            label: '\u00AB', //鹰眼控件折叠时功能按钮上的标识
+            collapsed: false //初始为展开方式
+          })
+          this.controlList.push(controlItem)
+
+          let resolutionItem = 1
+          this.resolutions.push(resolutionItem)
+        }
+      }
+
+      let zoomControl = new Zoom({
+        delta: 0.2,
+        zoomInTipLabel: '',
+        zoomOutTipLabel: ''
+      })
+      // 大图
+      this.map = new Map({
+        target: 'map',
+        layers: this.imgLayerList,
+        controls: [zoomControl],
+        resolutions: this.resolutions,
+        view: new View({
+          projection: projection,
+          center: getCenter([0, 0, 0, 0]), // 获取范围的中心坐标。
+          zoom: 2.5,
+          maxZoom: 5.0,
+          minZoom: 1.5,
+          extent: [-1100, -100, 2000, 1000] //[minX, minY, maxX, maxY] 控制拖动
+        })
+      })
+      // 删除默认的双击事件
+      const dblClickInteraction = this.map
+        .getInteractions()
+        .getArray()
+        .find((interaction) => {
+          return interaction instanceof DoubleClickZoom
+        })
+      this.map.removeInteraction(dblClickInteraction)
+      //将鹰眼控件加载到map中
+      this.map.addControl(this.controlList[0])
+
+      //点击事件
+      this.changeVectorLayer(this.list)
+
+      this.map.on('click', function(evt) {
+        let feature = evt.map.forEachFeatureAtPixel(evt.pixel, function(
+          feature
+        ) {
+          return feature
+        })
+        if (feature) {
+          for (let i in that.list) {
+            let style = that.getPointStyle(
+              that.list[i].imageSrc + '.png',
+              that.list[i].name
+            )
+            let style2 = that.getPointStyle(
+              that.list[i].imageSrc + '2.png',
+              that.list[i].name,
+              0.3
+            )
+            //获取feature对象
+            let feature_ = that.vectorLayer
+              .getSource()
+              .getFeatureById(that.list[i].id)
+            //获取红外对射或者振动光纤第二个点的feature对象
+            let featureEnd = that.vectorLayer
+              .getSource()
+              .getFeatureById(that.list[i].key + 'end')
+            if (feature_) {
+              if (feature_ === feature || featureEnd === feature) {
+                //修改选中样式
+                feature_.setStyle(style2)
+                if (featureEnd) {
+                  featureEnd.setStyle(style2)
+                }
+                that.pointListClick(that.list[i])
+              } else {
+                //清除选中以外的样式
+                feature_.setStyle(style)
+                if (featureEnd) {
+                  featureEnd.setStyle(style)
+                }
+              }
+            }
+          }
+        }
+      })
+    },
+    mapClick(feature, item, flag) {
+      //默认样式
+      let style = this.getPointStyle(item.imageSrc + '.png', item.name)
+      //选中样式
+      let style2 = this.getPointStyle(item.imageSrc + '2.png', item.name, 0.3)
+      //获取feature对象
+      let feature_ = this.vectorLayer.getSource().getFeatureById(item.id)
+      //获取红外对射或者振动光纤第二个点的feature对象
+      let featureEnd = this.vectorLayer
+        .getSource()
+        .getFeatureById(item.key + 'end')
+      if (feature_) {
+        if (feature_ === feature || featureEnd === feature) {
+          //console.log(feature_)
+          //修改选中样式
+          feature_.setStyle(style2)
+          if (featureEnd) {
+            featureEnd.setStyle(style2)
+          }
+        } else {
+          //清除选中以外的样式
+          feature_.setStyle(style)
+          if (featureEnd) {
+            featureEnd.setStyle(style)
+          }
+        }
+      } else {
+        //获取新增的feature对象
+        let newFeature = this.vectorLayer.getSource().getFeatureById(item.key)
+        //获取红外对射或者振动光纤第二个点的feature对象
+        let newFeatureEnd = this.vectorLayer
+          .getSource()
+          .getFeatureById(item.key + 'end')
+        if (newFeature) {
+          if (newFeature === feature || newFeatureEnd === feature) {
+            newFeature.setStyle(style2)
+            if (newFeatureEnd) {
+              newFeatureEnd.setStyle(style2)
+            }
+          } else {
+            //清除选中以外的样式
+            newFeature.setStyle(style)
+            if (newFeatureEnd) {
+              newFeatureEnd.setStyle(style)
+            }
+          }
+        }
+      }
+    },
+    getPointStyle(src, name, zoom) {
+      let style = new OlStyleStyle({
+        image: new OlStyleIcon({
+          anchor: [0.5, 0.5],
+          scale: zoom || 0.4,
+          //rotation:0 旋转度
+          src: require('@/assets/images/' + src)
+        }),
+        text: new Text({
+          text: name, // 添加文字描述
+          font: '14px font-size', // 设置字体大小
+          fill: new Fill({
+            // 设置字体颜色
+            color: 'black'
+          }),
+          offsetY: 30 // 设置文字偏移量
+        })
+      })
+      return style
+    },
+    clearLayer() {
+      if (this.map) {
+        this.map.removeLayer(this.vectorLayer)
+        this.map.removeLayer(this.lineVectorLayer)
+        this.map.removeInteraction(this.modify)
+        return false
+      } else {
+        return true
+      }
+    },
+    changeVectorLayer(list) {
+      if (list) {
+        this.list = list
+      } else {
+        this.clearLayer()
+      }
+      if (this.clearLayer()) return
+      this.lineVectorLayer = new OlLayerVector({
+        source: new OlSourceVector({
+          features: []
+        }),
+        style: new OlStyleStyle({
+          stroke: new Stroke({
+            color: '#409EFF',
+            width: 3
+          })
+        })
+      })
+      this.map.addLayer(this.lineVectorLayer)
+
+      let lineLastArr = []
+      let featuresArr = []
+      for (let i in list) {
+        if (list[i].imageSrc) {
+          //振动光纤和红外线对射
+          if (
+            list[i].type === 'e670524ecb9e4a03b8ddbc7d91a63b1b' ||
+            list[i].type === '4f69755dbc0c45e49c142857286c5669'
+          ) {
+            let lineFeatures = []
+            lineFeatures.push([list[i].xlongit, list[i].ylat])
+            lineFeatures.push([list[i].xpoint, list[i].ypoint])
+            this.lineVectorLayer
+              .getSource()
+              .addFeature(new OlFeature(new LineString(lineFeatures)))
+            lineLastArr.push(list[i])
+          }
+          featuresArr.push(this.getFeature(list[i].xlongit, list[i].ylat))
+          let style = this.getPointStyle(
+            list[i].imageSrc + '.png',
+            this.list[i].name
+          )
+          featuresArr[i].setStyle(style)
+          featuresArr[i].setId(list[i].id)
+        } else {
+          continue
+        }
+      }
+
+      let LinefeaturesArr = []
+      for (let i in lineLastArr) {
+        LinefeaturesArr.push(
+          this.getFeature(lineLastArr[i].xpoint, lineLastArr[i].ypoint)
+        )
+        let style = this.getPointStyle(
+          lineLastArr[i].imageSrc + '.png',
+          lineLastArr[i].name
+        )
+        LinefeaturesArr[i].setStyle(style)
+        LinefeaturesArr[i].setId(lineLastArr[i].key + 'end')
+        this.list.push(lineLastArr[i])
+      }
+
+      this.vectorLayer = new OlLayerVector({
+        source: new OlSourceVector({
+          features: featuresArr.concat(LinefeaturesArr)
+        })
+      })
+      this.map.addLayer(this.vectorLayer)
+    },
+    getFeature(x, y) {
+      return new OlFeature({
+        type: 'icon',
+        geometry: new OlGeomPoint([x, y])
+      })
+    },
+    // 树节点过滤
+    filterNode(value, data) {
+      if (!value) return true
+      return data.name.indexOf(value) !== -1
+    },
+    handleClick(tab) {
+      //左侧tab切换
+      if (tab) {
+        this.activeName = tab
+      }
+      if (this.activeName == 1) {
+        this.initTreeStationMap()
+      } else {
+        this.initTreeStationMap(true)
+      }
+    },
+    treeDataDeleteClick(node, data) {
+      this.$confirm('确认取消该收藏?', '取消收藏', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+        closeOnClickModal: false
+      }).then(() => {
+        //左侧tree取消收藏按钮
+        // console.log(node)
+        // console.log(node.parent.childNodes.length, '节点长度')
+        // console.log(data)
+        let len = node.parent.childNodes.length
+        let pid = data.pid
+        let tid = data.tierId
+
+        this.$http({
+          url: this.$http.adornUrlEq('/liEnshrine/delete'),
+          method: 'post',
+          data: {
+            resourceId: node.data.id,
+            stationId: this.checkedData.sId
+          }
+        }).then((data) => {
+          if (data && data.code === 0) {
+            this.$message.success('取消收藏成功1111')
+            // this.defaultExpandedKeys = [this.treeData[0].id]
+            this.initTreeStationMap(true)
+            if (len > 1) {
+              this.defaultExpandedKeys = [pid]
+            } else {
+              this.defaultExpandedKeys = [tid]
+            }
+          }
+        })
+      })
+    },
+    treeDataOffClick() {
+      //左侧tree收藏按钮
+      let node = this.$refs.tree.getCurrentNode()
+      // console.log(node)
+      if (node.level !== 6) {
+        this.$message.warning('只能收藏资源点或防区')
+        return
+      }
+      let dForm = {}
+      if (node.isDefence && node.level == 6) {
+        //如果是防区
+        dForm = {
+          resourceId: node.id,
+          byx1: '1',
+          stationId: this.checkedData.sId
+        }
+      } else {
+        dForm = {
+          resourceId: node.id,
+          stationId: this.checkedData.sId
+        }
+      }
+      this.$http({
+        url: this.$http.adornUrlEq('/liEnshrine/save'),
+        method: 'post',
+        data: dForm
+      }).then((data) => {
+        if (data && data.code === 0) {
+          if (data.msg === '收藏成功') {
+            this.$message.success(data.msg)
+          } else {
+            this.$message.warning(data.msg)
+          }
+        }
+      })
+    },
+    pointListClick(item) {
+      //监视器列表点击
+      //关闭其他窗口
+      // this.closeNoQueryDetailVisible()
+      if (this.transformationSta === 1) {
+        if (
+          item.type === 'b6af764f2a6e454490a6b1b3c9057e57' ||
+          item.type === 'ece0b8b2db27411886254e81134988a3'
+        ) {
+          // console.log('1')
+          this.queryDetail(item.id)
+        } else {
+          // console.log('2')
+          this.noQueryDetail(item.id)
+        }
+        // console.log('subCode', item.subCode, typeof (item.subCode))
+        // switch (item.subCode) {
+        //   case '01' :
+        //     //视频监控
+        //     this.queryDetail01Visible = true
+        //     this.$nextTick(() => {
+        //       this.$refs.queryDetail01.init(item.id, this.checkedData.sId)
+        //     })
+        //     break
+        //   case '02' :
+        //     //出入口控制
+        //     this.queryDetail02Visible = true
+        //     this.$nextTick(() => {
+        //       this.$refs.queryDetail02.init(item.id, this.checkedData.sId)
+        //     })
+        //     break
+        //   case '03' :
+        //     //入侵报警
+        //     this.queryDetail03Visible = true
+        //     this.$nextTick(() => {
+        //       this.$refs.queryDetail03.init(item.id, this.checkedData.sId)
+        //     })
+        //     break
+        //   case '04' :
+        //     //安全检查
+        //     this.queryDetail04Visible = true
+        //     this.$nextTick(() => {
+        //       this.$refs.queryDetail04.init(item.id, this.checkedData.sId)
+        //     })
+        //     break
+        //   case '05' :
+        //     //电子巡更
+        //     this.queryDetail05Visible = true
+        //     this.$nextTick(() => {
+        //       this.$refs.queryDetail05.init(item.id, this.checkedData.sId)
+        //     })
+        //     break
+        // }
+      }
+      this.activeChooseResourceBox(item.id)
+      this.defaultExpandedKeys = [item.id]
+      // this.$refs.tree.setCurrentKey(item.id)
+    },
+    //初始化站点下的资源点
+    initTreeStationMap() {
+      this.$http({
+        url: this.$http.adornUrl('/liResource/getTreeList'),
+        method: 'post',
+        data: {
+          stationId: this.checkedData.sId,
+          name: this.searchInput
+        }
+      })
+        .then((data) => {
+          if (data && data.code === 0) {
+            this.treeData = data.tree
+            console.log('data:', this.treeData)
+            if (this.treeData && this.treeData.length > 0) {
+              Vue.set(this.treeData[0], 'iconB', true)
+            }
+            return data
+          }
+        })
+        .then((data) => {
+          if (
+            this.checkedData.sId &&
+            this.treeData &&
+            this.treeData.length > 0
+          ) {
+            // this.defaultExpandedKeys = [data.nodes[0].id]
+          }
+          this.initStation(this.checkedData.sId)
+        })
+    },
+    initResourceTypeDicList() {
+      this.$http({
+        url: this.$http.adornUrl('/sysDictionary/getResourceTypeDicList'),
+        method: 'get',
+        params: { stationId: this.checkedData.sId }
+      }).then((data) => {
+        if (data && data.code === 0) {
+          this.iconNameListBottom = JSON.parse(JSON.stringify(data.list))
+          this.iconNameListBottom.forEach((res) => {
+            res.value += '3'
+          })
+        }
+      })
+    },
+    iconClick(item) {
+      this.iconNameListBottom.forEach((res) => {
+        if (res.id === item.id) {
+          if (
+            res.value.substring(res.value.length - 1, res.value.length) != 4
+          ) {
+            res.value = res.value.substring(0, res.value.length - 1) + '4'
+          }
+        } else {
+          if (
+            res.value.substring(res.value.length - 1, res.value.length) == 4
+          ) {
+            res.value = res.value.substring(0, res.value.length - 1) + '3'
+          }
+        }
+      })
+
+      if (
+        this.currentNode.level == 5 ||
+        (this.currentNode.level == 6 && this.currentNode.isDefence)
+      ) {
+        this.list = []
+        this.currentNode.children.forEach((el) => {
+          if (item === null || (item != null && item.id === el.type)) {
+            this.list.push(el)
+          }
+        })
+
+        this.list.forEach((res) => {
+          Vue.set(res, 'active', false)
+        })
+      } else {
+        this.showResourceByMapId(item)
+      }
+      this.clickItem = item
+      this.changeVectorLayer(this.list)
+    },
+    initStation(id) {
+      this.$http({
+        url: this.$http.adornUrl(`/liStation/getId/${id}`),
+        method: 'get',
+        params: this.$http.adornParams()
+      })
+        .then((data) => {
+          if (data && data.code === 0) {
+            this.station = data.bean
+            this.mapList = data.bean.mapList
+            if (this.mapList && this.treeData) {
+              this.mapList.forEach((element) => {
+                element.readPath = this.urlPath + element.filePath
+              })
+              this.checkedData.stationId = this.station.id
+              this.checkedData.stationName = this.station.stationName
+              this.checkedData.tierId = !this.mapList[0]
+                ? ''
+                : this.mapList[0].id
+              if (!this.checkedData.tierId) {
+                return
+              }
+              this.isFlag(this.treeData, this.checkedData.tierId)
+              if (this.treeData[0]) {
+                this.$refs.tree.setCurrentNode(this.treeData[0].children[0])
+                this.defaultExpandedKeys = [this.checkedData.tierId]
+                this.checkedData.tierName = this.mapList[0].name
+                this.stationMap = this.mapList[0]
+              }
+            }
+          }
+        })
+        .then(() => {
+          if (!this.checkedData.tierId) {
+            return
+          }
+          this.showResourceByMapId(null)
+          if (!this.map) {
+            this.initMap()
+            this.imgLayerList[0].setVisible(true) //初始第一个显示
+          } else {
+            this.changeVectorLayer(this.list)
+          }
+        })
+    },
+    isFlag(data, id) {
+      data.forEach((res) => {
+        if (res.id === id) {
+          Vue.set(res, 'iconB', true)
+        } else {
+          Vue.set(res, 'iconB', false)
+        }
+        if (res.children) {
+          this.isFlag(res.children, id)
+        }
+      })
+    },
+    // 改变层级和鹰眼图
+    changeImgControl(id) {
+      //   console.log('mapid', id)
+      let srcIndex = this.imgLayerList.findIndex((e) => {
+        return e.values_.id == id
+      })
+      this.map.removeControl(this.controlList[srcIndex])
+      this.map.addControl(this.controlList[srcIndex])
+      for (var k = 0; k < this.imgLayerList.length; k++) {
+        if (this.imgLayerList[k].values_.id == id) {
+          this.imgLayerList[k].setVisible(true)
+        } else {
+          this.imgLayerList[k].setVisible(false)
+        }
+      }
+    },
+    addBox(obj) {
+      this.boxVectorLayer = new OlLayerVector({
+        source: new OlSourceVector({
+          features: []
+        }),
+        style: new OlStyleStyle({
+          stroke: new Stroke({
+            color: '#409EFF',
+            width: 2
+          }),
+          fill: new Fill({
+            color: 'rgba(0, 0, 255, 0.1)'
+          })
+        })
+      })
+      this.map.addLayer(this.boxVectorLayer)
+      //创建矩形对象
+      let start = [obj.xpoint, obj.ypoint]
+      let end = [obj.xlongit, obj.ylat]
+      let boxFeature = new OlFeature({
+        geometry: new Polygon([
+          [start, [start[0], end[1]], end, [end[0], start[1]], start]
+        ])
+      })
+      boxFeature.setId(obj.id + 'box')
+      this.boxVectorLayer.getSource().addFeature(boxFeature)
+    },
+    //线路资源点树节点点击事件
+    handleNodeClick(node) {
+      // console.log(node)
+      this.currentNode = node
+      let name = node.name
+      let id = node.id
+      this.isFlag(this.treeData, id)
+      if (node.level !== 7) {
+        this.regionMouse = {
+          x: 0,
+          y: 0,
+          w: 0,
+          h: 0,
+          status: false
+        }
+      }
+      //每次选择节点都先清空资源位
+      console.log('选中节点的层级', node)
+      if (node.level === 4) {
+        this.map.removeLayer(this.boxVectorLayer)
+        //层级
+        this.checkedData.tierId = id
+        this.checkedData.tierName = name
+        this.checkedData.stationId = node.stationId
+        this.stationMap = node
+        // console.log('选中节点的层级id', this.tierId)
+        this.showResourceByMapId(null)
+        this.changeImgControl(id)
+        this.changeVectorLayer(this.list)
+      } else if (node.level === 5) {
+        this.map.removeLayer(this.boxVectorLayer)
+        //资源点类型
+        this.list = []
+        if (node.children) {
+          node.children.forEach((res) => {
+            this.list.push(res)
+          })
+        }
+
+        this.checkedData.tierId = node.tierId
+        this.mapList.forEach((res) => {
+          if (res.id === node.tierId) {
+            this.stationMap = res
+          }
+        })
+
+        this.list.forEach((res) => {
+          Vue.set(res, 'active', false)
+        })
+        this.changeImgControl(node.tierId)
+        this.changeVectorLayer(this.list)
+      } else if (node.level === 6) {
+        this.map.removeLayer(this.boxVectorLayer)
+        //资源点
+        let subNode = this.$refs.tree.getNode(node.tierId + node.type).data
+        // console.log('当前要选中的层级节点', subNode)
+        this.list = []
+        subNode.children.forEach((res) => {
+          this.list.push(res)
+        })
+        this.list.forEach((res) => {
+          Vue.set(res, 'active', false)
+        })
+        this.changeVectorLayer(this.list)
+
+        // 点亮对应的marker
+        let feature = this.vectorLayer.getSource().getFeatureById(id)
+        if (feature) {
+          for (let i in this.list) {
+            if (feature.id_ == that.list[i].id) {
+              this.listItem = that.list[i]
+            }
+            //flag为ture打开详情或者编辑页面
+            this.mapClick(feature, that.list[i], false)
+          }
+        }
+        this.checkedData.resourceId = id
+        this.checkedData.tierId = node.tierId
+
+        this.activeChooseResourceBox(id)
+        this.pointListClick(node)
+        this.changeImgControl(node.tierId)
+      }
+
+      this.iconNameListBottom.forEach((res) => {
+        if (res.id === this.clickItem.id) {
+          if (
+            res.value.substring(res.value.length - 1, res.value.length) == 4
+          ) {
+            res.value = res.value.substring(0, res.value.length - 1) + '3'
+          }
+        }
+      })
+    },
+    setStyle(item) {
+      //选中样式
+      let style2 = this.getPointStyle(item.imageSrc + '2.png', item.name, 0.3)
+      let feature_ = this.vectorLayer.getSource().getFeatureById(item.id)
+      feature_.setStyle(style2)
+      let featureEnd = this.vectorLayer
+        .getSource()
+        .getFeatureById(item.key + 'end')
+      if (featureEnd) {
+        featureEnd.setStyle(style2)
+      }
+    },
+    //激活选中资源点位节点
+    activeChooseResourceBox(id, level) {
+      this.list.forEach((res) => {
+        if (res.id === id) {
+          Vue.set(res, 'active', true)
+        } else {
+          Vue.set(res, 'active', false)
+        }
+      })
+    },
+    //切换层级
+    changeMap(map) {
+      this.map.removeLayer(this.boxVectorLayer)
+
+      // 切换openlayer
+      // console.log(this.map)
+      //图层缩放级别设置为默认
+      this.map.getView().setZoom(1)
+      // console.log(this.imgLayerList)
+      this.changeImgControl(map.id)
+      this.currentNode = this.$refs.tree.getNode(map.id).data
+      // console.log('当前要选中的节点', this.currentNode)
+      //将选中的层级树节点设置为选中
+
+      this.$refs.tree.setCurrentNode(this.currentNode)
+      // this.defaultExpandedKeys = [this.currentNode.id]
+      this.defaultExpandedKeys = [map.id]
+      this.isFlag(this.treeData, this.currentNode.id)
+      // console.log('当前要选中的节点2', this.currentNode)
+      this.checkedData.tierId = map.id
+      this.checkedData.tierName = map.name
+      this.stationMap = map
+
+      this.iconNameListBottom.forEach((res) => {
+        if (res.id === this.clickItem.id) {
+          if (
+            res.value.substring(res.value.length - 1, res.value.length) == 4
+          ) {
+            res.value = res.value.substring(0, res.value.length - 1) + '3'
+          }
+        }
+      })
+      this.showResourceByMapId(null)
+      this.changeVectorLayer(this.list)
+    },
+    //根据层级id展示当前层级所有的资源点
+    showResourceByMapId(item) {
+      let tierNode = this.$refs.tree.getNode(this.checkedData.tierId).data
+      // console.log('当前要选中的层级节点', tierNode.children)
+      this.list = []
+      //this.list = tierNode.children[0].children || []
+
+      if (tierNode && tierNode.children) {
+        tierNode.children.forEach((type) => {
+          type.children.forEach((res) => {
+            if (item === null || (item != null && item.id === res.type)) {
+              this.list.push(res)
+            }
+          })
+        })
+      }
+      this.list.forEach((res) => {
+        Vue.set(res, 'active', false)
+      })
+    },
+    //详情
+    queryDetail(id) {
+      this.queryDetailVisible = true
+      this.noQueryDetailVisible = false
+      this.$nextTick(() => {
+        this.$refs.queryDetail.init(id, this.checkedData.sId)
+      })
+    },
+    noQueryDetail(id) {
+      this.noQueryDetailVisible = true
+      this.queryDetailVisible = false
+      this.$nextTick(() => {
+        this.$refs.noQueryDetail.init(id, this.checkedData.sId)
+      })
+    },
+    closeQueryDetailVisible() {
+      this.queryDetailVisible = false
+    },
+    closeNoQueryDetailVisible() {
+      this.noQueryDetailVisible = false
+    },
+    transformation(now) {
+      //2D3D转换
+      this.transformationSta = now
+      // console.log('当前节点', this.currentNode)
+      // console.log(this.mapList)
+
+      if (now == 1) {
+        if (this.currentNode.level == 6) {
+          this.$nextTick(() => {
+            // console.log(22222222222)
+            this.changeImgControl(this.currentNode.tierId)
+          })
+        } else if (
+          this.currentNode.level == 5 ||
+          this.currentNode.level == 6 ||
+          this.currentNode.level == 7
+        ) {
+          this.$nextTick(() => {
+            // console.log(3333333333333)
+            this.changeImgControl(this.currentNode.tierId)
+          })
+        }
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.dic_tree {
+  background: #f4f4f4;
+  font-size: 14px;
+  transform: translateX(-6px);
+  // margin-top: 20px;
+}
+.dic_tree /deep/ .el-tree-node__content {
+  padding-left: 0px !important;
+}
+
+.dic_tree /deep/ .el-tree-node {
+  position: relative;
+  padding-left: 16px;
+}
+
+.dic_tree /deep/ .el-tree-node__children {
+  padding-left: 8px;
+}
+
+.dic_tree /deep/ .el-tree-node :last-child:before {
+  height: 38px;
+}
+
+.dic_tree /deep/ .el-tree > .el-tree-node:before {
+  border-left: none;
+}
+
+.tree-container /deep/ .el-tree > .el-tree-node:after {
+  border-top: none;
+}
+
+.dic_tree /deep/ .el-tree-node:before {
+  content: '';
+  left: -4px;
+  position: absolute;
+  right: auto;
+  border-width: 1px;
+}
+
+.dic_tree /deep/ .el-tree-node:after {
+  content: '';
+  left: -4px;
+  position: absolute;
+  right: auto;
+  border-width: 1px;
+}
+
+.dic_tree /deep/ .el-tree-node:before {
+  border-left: 1px dashed #bfbfbf;
+  bottom: 0px;
+  height: 100%;
+  top: -26px;
+  width: 1px;
+}
+
+.dic_tree /deep/ .el-tree-node:after {
+  border-top: 1px dashed #bfbfbf;
+  height: 20px;
+  top: 12px;
+  width: 35px;
+  // background: red;
+  position: absolute;
+  z-index: 1;
+}
+.tree-container /deep/ .el-tree > .el-tree-node:after {
+  border-top: none;
+}
+
+.tree-container {
+  /* 树的parent，样式自定 */
+}
+.dic_tree /deep/ .el-tree-node__expand-icon.expanded {
+  transform: rotate(0deg);
+  -webkit-transform: rotate(0deg);
+}
+.dic_tree /deep/ .el-icon-caret-right:before {
+  background: url('../../../assets/images/add.png');
+
+  content: '';
+  display: block;
+  width: 18px;
+  height: 18px;
+  font-size: 18px;
+  background-size: 18px;
+  // background:skyblue;
+}
+.dic_tree
+  /deep/
+  .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
+  background: url('../../../assets/images/sub.png');
+  content: '';
+  display: block;
+  width: 18px;
+  height: 18px;
+  font-size: 18px;
+  background-size: 18px;
+  // background:skyblue;
+}
+.dic_tree /deep/.el-tree-node__content > .el-tree-node__expand-icon {
+  padding: 0 2px 0 0;
+}
+
+.dic_tree /deep/.el-tree-node__expand-icon.is-leaf::before {
+  opacity: 0;
+}
+.dic_tree /deep/.is-leaf.el-tree-node__expand-icon.el-icon-caret-right {
+  // margin-left: -15px !important;
+}
+</style>
+
+<style lang="scss">
+// openlayer 样式
+.resource-container {
+  .ol-overviewmap {
+    left: 89%;
+  }
+}
+</style>
+<style lang="scss">
+.resource-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  border: 0px solid black;
+  overflow: auto;
+  .span-box {
+    font-size: 12px;
+    border-radius: 5px;
+    position: absolute;
+  }
+}
+
+.tier-btn {
+  .active-tier {
+    background-color: #409eff;
+    color: #ffffff;
+  }
+}
+.ol_point {
+  .regionDiv {
+    background: #35aff8;
+    opacity: 0.5;
+    z-index: 10;
+  }
+  .el-tree {
+    background: #f4f4f4;
+    font-size: 12px;
+    overflow-y: auto;
+    height: 750px;
+  }
+  .el-card__body {
+    padding: 0;
+  }
+  .el-card {
+    height: 99%;
+    background: #f4f4f4;
+  }
+  .el-tree {
+    padding: 20px 20px 0 0px;
+  }
+  .el-tree--highlight-current
+    .el-tree-node.is-current
+    > .el-tree-node__content {
+    background-color: #f4f4f4 !important;
+    color: #fff !important;
+    .el-button--text {
+      color: #fff;
+    }
+    .custom-tree-node {
+      background-color: #35aff8 !important;
+    }
+  }
+
+  .ol_point_left_top {
+    height: 50px;
+    background: #e1edf4;
+    padding-left: 10px;
+    .ol_point_left_topL {
+      height: 40px;
+      padding-top: 10px;
+      float: left;
+      div {
+        height: 40px;
+        float: left;
+        padding: 0 10px 0 10px;
+        line-height: 40px;
+        cursor: pointer;
+        font-size: 14px;
+        border: 1px solid transparent;
+
+        span {
+          color: #35aff8;
+        }
+      }
+      div.on {
+        background: #fff;
+        border: 1px solid #c3c3c3;
+        border-bottom: none;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+      }
+    }
+    .ol_point_left_topR {
+      float: right;
+      margin-top: 10px;
+      .el-input {
+        width: 109px;
+      }
+    }
+  }
+  .ol_point_right_button {
+    height: 50px;
+    width: 100%;
+    background: #e3e4e6;
+    border-bottom: 1px solid #ccc;
+    ol_point_right_button_l {
+      margin-left: 20px;
+    }
+    .el-button--primary.is-plain {
+      margin-top: 5px;
+      background: #ced1d6;
+      border: none;
+      color: #656565;
+    }
+    .tier-btn .active-tier {
+      background-color: #409eff;
+      color: #ffffff;
+    }
+    .el-button.is-plain:hover {
+      background: #fff;
+      border-color: #32a5ea;
+      color: #32a5ea;
+    }
+  }
+  .ol_point_right_button_r {
+    position: absolute;
+    right: 20px;
+    top: 60px;
+    width: 95px;
+    height: 26px;
+    z-index: 10;
+    font-size: 12px;
+    line-height: 25px;
+    overflow: hidden;
+    border-radius: 13px;
+    background: #ced1d6;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    box-shadow: 0px 1px 0px 1px rgba(255, 255, 255, 0.25),
+      0px 2px 4px 0px rgba(0, 0, 0, 0.1);
+    div {
+      width: 46px;
+      height: 24px;
+      float: left;
+      text-align: center;
+      cursor: pointer;
+    }
+    div.on {
+      background: #45b5f8;
+      color: #fff;
+      border-radius: 13px;
+      border: 1px solid rgba(23, 41, 71, 0.5);
+      box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.3),
+        0px 2px 0px 0px rgba(255, 255, 255, 0.15);
+    }
+  }
+  .map_right {
+    margin-top: 50px;
+    iframe {
+      width: 1600px;
+      height: 680px;
+    }
+  }
+}
+.ol-overviewmap .ol-overviewmap-map {
+  height: 110px !important;
+}
+</style>

src/pages/eq/view/no-query-detail.vue

+<template lang="pug">
+  <div class="animation">
+    <div class='info-title'>当前资源点关联摄像头
+      <el-button icon="el-icon-close" style="float:right;" type="text" @click="closeQueryDetailVisible"></el-button>
+    </div>
+    <div style="height:40px; width:100%;padding-top:10px">
+      <div style="width:80px; float:left; line-height:40px; padding-left:10px;">关联监控:</div>
+      <div style="float:left">
+        <el-select v-model="camera" placeholder="请选择" @change="cameraChange">
+          <el-option v-for="item in dataForm.list" :key="item.id" :label="item.name" :value="item.id"></el-option>
+        </el-select>
+      </div>
+    </div>
+    <div class='info-video'>
+      <img v-if="video1 == 0" class="video" src="@/assets/images/videoImg.png" alt="">
+      <video v-if="video1 == 1" class="video" ref="video" muted autoplay controls></video>
+    </div>
+    <div class="info-form">
+      <div class="operate">
+        <div class="btns">
+          <img v-show="imgUrl == ''" src="@/assets/images/btns.png" alt="">
+          <img v-show="imgUrl == 's'" src="@/assets/images/s.png" alt="">
+          <img v-show="imgUrl == 'x'" src="@/assets/images/x.png" alt="">
+          <img v-show="imgUrl == 'z'" src="@/assets/images/z.png" alt="">
+          <img v-show="imgUrl == 'y'" src="@/assets/images/y.png" alt="">
+          <img v-show="imgUrl == 'ys'" src="@/assets/images/ys.png" alt="">
+          <img v-show="imgUrl == 'yx'" src="@/assets/images/yx.png" alt="">
+          <img v-show="imgUrl == 'zs'" src="@/assets/images/zs.png" alt="">
+          <img v-show="imgUrl == 'zx'" src="@/assets/images/zx.png" alt="">
+          <div class="fx">方向</div>
+          <div class="zs" @mousedown="clickPTZControl(25,0,'zs')" @mouseup="clickPTZControl(25,1)" title="云台左上">
+          </div>
+          <div class="s" @mousedown="clickPTZControl(21,0,'s')" @mouseup="clickPTZControl(21,1)" title="云台上仰">
+          </div>
+          <div class="ys" @mousedown="clickPTZControl(26,0,'ys')" @mouseup="clickPTZControl(26,1)" title="云台右上">
+          </div>
+          <div class="y" @mousedown="clickPTZControl(24,0,'y')" @mouseup="clickPTZControl(24,1)" title="云台右转">
+          </div>
+          <div class="yx" @mousedown="clickPTZControl(28,0,'yx')" @mouseup="clickPTZControl(24,1)" title="云台右下">
+          </div>
+          <div class="x" @mousedown="clickPTZControl(22,0,'x')" @mouseup="clickPTZControl(22,1)" title="云台下转">
+          </div>
+          <div class="zx" @mousedown="clickPTZControl(27,0,'zx')" @mouseup="clickPTZControl(27,1)" title="云台左下">
+          </div>
+          <div class="z" @mousedown="clickPTZControl(23,0,'z')" @mouseup="clickPTZControl(23,1)" title="云台左转">
+          </div>
+        </div>
+        <div class="ytBox ytBox2">
+          <div class="bbBtn">
+            <div @mousedown="clickPTZControl(11,0,'right')" @mouseup="clickPTZControl(11,1,'right')" title="变倍+">
+              <img v-show="imgRightUrl11" src="@/assets/images/r1.png" alt="">
+              <img v-show="!imgRightUrl11" src="@/assets/images/r1b.png" alt="">
+            </div>
+            <div @mousedown="clickPTZControl(12,0,'right')" @mouseup="clickPTZControl(12,1,'right')" title="变倍-">
+              <img v-show="imgRightUrl12" src="@/assets/images/r2.png" alt="">
+              <img v-show="!imgRightUrl12" src="@/assets/images/r2b.png" alt="">
+            </div>
+          </div>
+          <div class="bbBtn">
+            <div @mousedown="clickPTZControl(13,0,'right')" @mouseup="clickPTZControl(13,1,'right')" title="变焦+">
+              <img v-show="imgRightUrl13" src="@/assets/images/r3.png" alt="">
+              <img v-show="!imgRightUrl13" src="@/assets/images/r3b.png" alt="">
+            </div>
+            <div @mousedown="clickPTZControl(14,0,'right')" @mouseup="clickPTZControl(14,1,'right')" title="变焦-">
+              <img v-show="imgRightUrl14" src="@/assets/images/r4.png" alt="">
+              <img v-show="!imgRightUrl14" src="@/assets/images/r4b.png" alt="">
+            </div>
+          </div>
+          <div class="bbBtn">
+            <div @mousedown="clickPTZControl(15,0,'right')" @mouseup="clickPTZControl(15,1,'right')" title="光圈+">
+              <img v-show="imgRightUrl15" src="@/assets/images/r5.png" alt="">
+              <img v-show="!imgRightUrl15" src="@/assets/images/r5b.png" alt="">
+            </div>
+            <div @mousedown="clickPTZControl(16,0,'right')" @mouseup="clickPTZControl(16,1,'right')" title="光圈-">
+              <img v-show="imgRightUrl16" src="@/assets/images/r6.png" alt="">
+              <img v-show="!imgRightUrl16" src="@/assets/images/r6b.png" alt="">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class='info-title'>监控点信息</div>
+    <div class='info-form'>
+      <div class="quDetailM">
+        <p class="leftP">线路站点&nbsp;:&nbsp;&nbsp;<span>{{dataForm.lineStation}}</span></p>
+      </div>
+      <div class="quDetailM">
+        <p class="leftP">资源点名称&nbsp;:&nbsp;&nbsp;{{dataForm.name}}</p>
+      </div>
+      <div class="quDetailM">
+        <p class="leftP">资源点类型&nbsp;:&nbsp;&nbsp;{{dataForm.typeName}}</p>
+      </div>
+      <div class="quDetailM">
+        <p class="leftP">资源点编码&nbsp;:&nbsp;&nbsp;{{dataForm.code}}</p>
+      </div>
+      <div class="quDetailM">
+        <p class="leftP">资源点状态&nbsp;:&nbsp;&nbsp;{{dataForm.status==1?'正常':'异常'}}</p>
+      </div>
+      <div class="quDetailM">
+        <p class="leftP">部署位置&nbsp;:&nbsp;&nbsp;{{dataForm.deployLocation}}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import { isAuth } from '../../../util'
+export default {
+  computed: {
+    ...mapState('d2admin/user', ['info'])
+  },
+  data() {
+    return {
+      video1: 0,
+      stationId: localStorage.getItem('stationId'),
+      //11=焦距变大，12=焦距变小，13=焦点前调，14=焦点后调，15=光圈扩大，16=光圈扩小
+      //21=上仰，22=下俯，23=左转，24=右转，25=左上，26=右上，27=左下，28=右下，29=自动扫描
+      actionList: [
+        '',
+        '',
+        '',
+        '',
+        '',
+        '',
+        '',
+        '',
+        '',
+        '',
+        '',
+        '变倍+',
+        '变倍-',
+        '变焦+',
+        '变焦-',
+        '光圈+',
+        '光圈-',
+        '',
+        '',
+        '',
+        '',
+        '上仰',
+        '下俯',
+        '左转',
+        '右转',
+        '左上',
+        '右上',
+        '左下',
+        '右下',
+        '自动扫描'
+      ],
+      imgUrl: '',
+      imgRightUrl11: false,
+      imgRightUrl12: false,
+      imgRightUrl13: false,
+      imgRightUrl14: false,
+      imgRightUrl15: false,
+      imgRightUrl16: false,
+      monitorList: [
+        {
+          value: '1',
+          label: '监控1'
+        },
+        {
+          value: '2',
+          label: '监控2'
+        }
+      ],
+      monitorValue: '监控1',
+      videoSrc: '',
+      clickFlag: false,
+      camera: '',
+      cameraCur: {},
+      restaurants: [],
+      dataForm: {
+        id: 0,
+        name: '',
+        type: 1,
+        lineId: '',
+        lineName: '',
+        stationId: '',
+        stationName: '',
+        tierId: '',
+        subSystem: '',
+        code: '',
+        subCode: '',
+        addressCode: '',
+        port: '',
+        username: '',
+        password: '',
+        remark: '',
+        status: 1
+      }
+    }
+  },
+  created() {},
+  methods: {
+    init(id, stationId) {
+      this.clickFlag = false
+      this.dataForm.id = id
+      // this.stationId = stationId
+      this.cameraCur = {}
+      this.camera = ''
+      this.initResource()
+      this.dataForm.operatorName = this.info.name
+    },
+    initResource() {
+      this.video1 = 0 //初始化显示默认图片
+      this.$http({
+        url: this.$http.adornUrlEq(
+          `/liResource/getResourceDetails/${this.dataForm.id}`
+        ),
+        method: 'get',
+        params: this.$http.adornParams()
+      }).then((data) => {
+        if (data && data.code === 0) {
+          this.dataForm = data.bean
+          if (this.dataForm.list && this.dataForm.list.length > 0) {
+            this.cameraCur = this.dataForm.list[0]
+            // console.log(this.cameraCur, '---------')
+            this.camera = this.cameraCur.id
+            this.video1 = 1
+            this.$http({
+              url: this.$http.adornUrlEq('/camera/camerasPlay'),
+              method: 'post',
+              data: {
+                id: this.cameraCur.id,
+                stationId: this.cameraCur.stationId,
+                userId: localStorage.getItem('userId'),
+                levelType: 1,
+                controlType: 3
+              }
+            }).then((data) => {
+              if (data && data.code === 0) {
+                //视频直播
+                var src = data.url
+                //视频连接
+                if (flvjs.isSupported()) {
+                  this.flvPlayer = flvjs.createPlayer({
+                    type: 'flv',
+                    enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js
+                    isLive: true, //直播模式
+                    hasAudio: false, //关闭音频
+                    hasVideo: true,
+                    stashInitialSize: 128,
+                    enableStashBuffer: false, //播放flv时，设置是否启用播放缓存，只在直播起作用。
+                    url: src
+                  })
+                  this.$nextTick(function() {
+                    this.flvPlayer.attachMediaElement(this.$refs.video)
+                    try {
+                      this.flvPlayer.load()
+                      // this.flvPlayer.play()
+                    } catch (error) {
+                      console.log(error)
+                    }
+                  })
+                }
+              }
+            })
+          }
+        }
+      })
+    },
+    closeQueryDetailVisible() {
+      this.$emit('closeQ')
+    },
+    clickPTZControl(ptz, dwStop, img) {
+      // console.log(this.camera)
+      if (
+        !this.camera ||
+        (this.cameraCur.type !== 'ece0b8b2db27411886254e81134988a3' &&
+          (ptz < 11 || ptz > 16))
+      ) {
+        return
+      }
+      if (!isAuth('ol:demo:corona')) {
+        this.$message({
+          type: 'warning',
+          message: '没有操作权限，请联系管理员',
+          duration: 1000
+        })
+        return
+      }
+
+      if (img && img != 'right') {
+        this.imgUrl = img
+      }
+      if (dwStop) {
+        this.imgUrl = ''
+      }
+      if (img && img == 'right') {
+        this['imgRightUrl' + ptz] = true
+      }
+      if (dwStop && img == 'right') {
+        this['imgRightUrl' + ptz] = false
+      }
+      this.$http({
+        url: this.$http.adornUrlEq('/camera/ptzControl'),
+        method: 'post',
+        data: {
+          resourceId: this.cameraCur.id,
+          stationId: this.cameraCur.stationId,
+          userId: localStorage.getItem('userId'),
+          levelType: 1,
+          controlType: 3,
+          ip: this.cameraCur.addressCode, //ip地址
+          port: this.cameraCur.port, //端口
+          username: this.cameraCur.username, //账号
+          password: this.cameraCur.password, //密码
+          channel: this.cameraCur.byx1, //通道
+          stream: 'main', //主码流
+          dwPtzCommand: ptz, //云台控制命令
+          dwStop: dwStop //云台控制0开始和1结束
+        }
+      }).then((data) => {
+        if (data && data.code === 0) {
+          if (dwStop == 0) {
+            //云台控制0开始和1结束
+            this.saveLog(1, ptz) // 执行结果 成功 1  失败 2
+            this.$message.success(data.msg)
+          }
+        } else {
+          if (dwStop == 0) {
+            //云台控制0开始和1结束
+            this.saveLog(2, ptz) // 执行结果 成功 1  失败 2
+            this.$message.error(data.msg)
+          }
+        }
+      })
+    },
+    //调用日志保存记录操作指令
+    saveLog(result, ptz) {
+      this.$http({
+        url: this.$http.adornUrlEq('/orVideoMonitor/save'),
+        method: 'post',
+        data: {
+          source: 1,
+          actionName: this.actionList[ptz],
+          resourceId: this.cameraCur.id,
+          stationId: this.stationId,
+          type: this.cameraCur.type,
+          result: result
+        }
+      }).then((data) => {})
+    },
+    cameraChange(id) {
+      if (id) {
+        this.camera = id
+        this.dataForm.list.forEach((res) => {
+          if (res.id === id) {
+            this.cameraCur = res
+          }
+        })
+        if (this.flvPlayer) {
+          this.flvPlayer.pause()
+          this.flvPlayer.unload()
+          this.flvPlayer.detachMediaElement()
+          this.flvPlayer.destroy()
+          this.flvPlayer = null
+        }
+        this.$http({
+          url: this.$http.adornUrlEq('/camera/camerasPlay'),
+          method: 'post',
+          data: {
+            id: this.cameraCur.id,
+            stationId: this.cameraCur.stationId,
+            userId: localStorage.getItem('userId'),
+            levelType: 1,
+            controlType: 3
+          }
+        }).then((data) => {
+          if (data && data.code === 0) {
+            //视频直播
+            var src = data.url
+            //视频连接
+            if (flvjs.isSupported()) {
+              this.flvPlayer = flvjs.createPlayer({
+                type: 'flv',
+                enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js
+                isLive: true, //直播模式
+                hasAudio: false, //关闭音频
+                hasVideo: true,
+                stashInitialSize: 128,
+                enableStashBuffer: false, //播放flv时，设置是否启用播放缓存，只在直播起作用。
+                url: src
+              })
+              this.$nextTick(function() {
+                this.flvPlayer.attachMediaElement(this.$refs.video)
+                try {
+                  this.flvPlayer.load()
+                  // this.flvPlayer.play()
+                } catch (error) {
+                  console.log(error)
+                }
+              })
+            }
+          }
+        })
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.el-table__header {
+  width: 100% !important;
+}
+.el-table__body {
+  width: 100% !important;
+}
+.info-title {
+  line-height: 40px;
+  height: 40px;
+  padding: 0 20px;
+  background-color: #e1edf4;
+  border-bottom: 1px solid #cccccc;
+  font-size: 16px;
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+}
+.info-video {
+  padding: 10px;
+  height: 160px;
+}
+.info-form {
+  padding: 10px;
+}
+.info-block {
+  border: 1px solid #cccccc;
+}
+.el-select {
+  width: 100%;
+}
+.video {
+  width: 100%;
+  height: 180px;
+}
+.animation {
+  animation: myfirst 1s;
+  position: absolute;
+  top: 50px;
+  right: 0;
+  width: 330px;
+  background-color: #f4f4f4;
+  z-index: 11;
+  border: 1px solid rgba(195, 195, 195, 1);
+  box-shadow: 0 2px 8px 8px rgba(0, 0, 0, 0.2);
+}
+@keyframes myfirst {
+  from {
+    right: -500px;
+  }
+  to {
+    right: 0;
+  }
+}
+.quDetailM {
+  width: 100%;
+}
+.leftP {
+  height: 30px;
+  line-height: 30px;
+  margin: 0;
+  width: 100%;
+  font-size: 14px;
+  span {
+    color: #46b6f9;
+  }
+}
+.operate {
+  padding: 5px 0;
+  font-size: 14px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 1);
+  border-image: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0.5),
+      rgba(213, 213, 213, 0.5),
+      rgba(255, 255, 255, 0.5),
+      rgba(218, 218, 218, 0.5),
+      rgba(255, 255, 255, 0.5)
+    )
+    2 2;
+  border-radius: 10px;
+  overflow: hidden;
+  display: flex;
+  justify-content: flex-start;
+  .btns {
+    width: 194px;
+    height: 194px;
+    position: relative;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+    div {
+      cursor: pointer;
+      padding: 10px;
+    }
+    .s {
+      position: absolute;
+      top: 10px;
+      left: 75px;
+      width: 24px;
+      height: 24px;
+    }
+    .x {
+      position: absolute;
+      bottom: 10px;
+      left: 75px;
+      width: 24px;
+      height: 24px;
+    }
+    .z {
+      position: absolute;
+      top: 75px;
+      left: 10px;
+      width: 24px;
+      height: 24px;
+    }
+    .y {
+      position: absolute;
+      top: 75px;
+      right: 10px;
+      width: 24px;
+      height: 24px;
+    }
+    .zs {
+      position: absolute;
+      top: 32px;
+      left: 32px;
+      width: 24px;
+      height: 24px;
+    }
+    .zx {
+      position: absolute;
+      bottom: 32px;
+      left: 32px;
+      width: 24px;
+      height: 24px;
+    }
+    .ys {
+      position: absolute;
+      top: 32px;
+      right: 32px;
+      width: 24px;
+      height: 24px;
+    }
+    .yx {
+      position: absolute;
+      bottom: 32px;
+      right: 32px;
+      width: 24px;
+      height: 24px;
+    }
+    .fx {
+      position: absolute;
+      padding: 0;
+      cursor: default;
+      top: 50%;
+      left: 50%;
+      width: 65px;
+      height: 65px;
+      background: #ececec;
+      border-radius: 50%;
+      line-height: 65px;
+      text-align: center;
+      color: #969696;
+      transform: translate(-50%, -50%);
+    }
+  }
+  .ytBox {
+    width: 90px;
+    font-size: 16px;
+    padding: 10px 0 10px 0;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    .mllx {
+      display: flex;
+      justify-content: space-between;
+      width: 90%;
+      span {
+        line-height: 40px;
+        text-align: center;
+        width: 35%;
+      }
+    }
+    .bbBtn {
+      height: 40px;
+      display: flex;
+      margin-left: 10px;
+      justify-content: flex-start;
+      div {
+        width: 40px;
+        height: 40px;
+        cursor: pointer;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+
+.el-icon-wq-r1 {
+  background: url(~@/assets/images/r1.png) center no-repeat;
+  background-size: 65%;
+}
+.el-icon-wq-r1:before {
+  content: '';
+  font-size: 16px;
+}
+.el-icon-wq-r2 {
+  background: url(~@/assets/images/r2.png) center no-repeat;
+  background-size: 65%;
+}
+.el-icon-wq-r2:before {
+  content: '';
+  font-size: 16px;
+}
+.el-icon-wq-r3 {
+  background: url(~@/assets/images/r3.png) center no-repeat;
+  background-size: 65%;
+}
+.el-icon-wq-r3:before {
+  content: '';
+  font-size: 16px;
+}
+.el-icon-wq-r5 {
+  background: url(~@/assets/images/r5.png) center no-repeat;
+  background-size: 65%;
+}
+.el-icon-wq-r5:before {
+  content: '';
+  font-size: 16px;
+}
+.el-icon-wq-r6 {
+  background: url(~@/assets/images/r6.png) center no-repeat;
+  background-size: 65%;
+}
+.el-icon-wq-r6:before {
+  content: '';
+  font-size: 16px;
+}
+
+.el-icon-wq-r1b {
+  background: url(~@/assets/images/r1b.png) center no-repeat;
+  height: 35px;
+  width: 35px;
+  background-size: 65%;
+}
+.el-icon-wq-r1b:before {
+  content: '';
+  font-size: 16px;
+}
+.el-icon-wq-r2b {
+  background: url(~@/assets/images/r2b.png) center no-repeat;
+  height: 35px;
+  width: 35px;
+  background-size: 65%;
+}
+.el-icon-wq-r2b:before {
+  content: '';
+  font-size: 16px;
+}
+.el-icon-wq-r3b {
+  background: url(~@/assets/images/r3b.png) center no-repeat;
+  height: 35px;
+  width: 35px;
+  background-size: 65%;
+}
+.el-icon-wq-r3b:before {
+  content: '';
+  font-size: 16px;
+}
+.el-icon-wq-r5b {
+  background: url(~@/assets/images/r5b.png) center no-repeat;
+  height: 35px;
+  width: 35px;
+  background-size: 65%;
+}
+.el-icon-wq-r5b:before {
+  content: '';
+  font-size: 16px;
+}
+.el-icon-wq-r6b {
+  background: url(~@/assets/images/r6b.png) center no-repeat;
+  height: 35px;
+  width: 35px;
+  background-size: 65%;
+}
+.el-icon-wq-r6b:before {
+  content: '';
+  font-size: 16px;
+}
+</style>
+<style lang="scss">
+.instuctions_content {
+  table {
+    th {
+      background: #eef8ff !important;
+      color: #333333 !important;
+    }
+  }
+}
+</style>

src/pages/eq/view/query-detail.vue

+<template lang="pug">
+  <div class="animation">
+    <div class='info-title'>当前摄像头
+      <el-button icon="el-icon-close" style="float:right;" type="text" @click="closeQueryDetailVisible"></el-button>
+    </div>
+    <div class='info-video'>
+      <video class="video" ref="video" muted autoplay controls></video>
+      //- <video class="video" :src="videoSrc" controls="controls"></video>
+    </div>
+    <div class="info-form">
+      <div class="operate" >
+        <div class="btns">
+          <img v-show="imgUrl == ''" src="@/assets/images/btns.png" alt="">
+          <img v-show="imgUrl == 's'" src="@/assets/images/s.png" alt="">
+          <img v-show="imgUrl == 'x'" src="@/assets/images/x.png" alt="">
+          <img v-show="imgUrl == 'z'" src="@/assets/images/z.png" alt="">
+          <img v-show="imgUrl == 'y'" src="@/assets/images/y.png" alt="">
+          <img v-show="imgUrl == 'ys'" src="@/assets/images/ys.png" alt="">
+          <img v-show="imgUrl == 'yx'" src="@/assets/images/yx.png" alt="">
+          <img v-show="imgUrl == 'zs'" src="@/assets/images/zs.png" alt="">
+          <img v-show="imgUrl == 'zx'" src="@/assets/images/zx.png" alt="">
+          <div class="fx">方向</div>
+          <div class="zs" @mousedown="clickPTZControl(25,0,'zs')" @mouseup="clickPTZControl(25,1)" title="云台左上">
+          </div>
+          <div class="s" @mousedown="clickPTZControl(21,0,'s')" @mouseup="clickPTZControl(21,1)" title="云台上仰">
+          </div>
+          <div class="ys" @mousedown="clickPTZControl(26,0,'ys')" @mouseup="clickPTZControl(26,1)" title="云台右上">
+          </div>
+          <div class="y" @mousedown="clickPTZControl(24,0,'y')" @mouseup="clickPTZControl(24,1)" title="云台右转">
+          </div>
+          <div class="yx" @mousedown="clickPTZControl(28,0,'yx')" @mouseup="clickPTZControl(24,1)" title="云台右下">
+          </div>
+          <div class="x" @mousedown="clickPTZControl(22,0,'x')" @mouseup="clickPTZControl(22,1)" title="云台下转">
+          </div>
+          <div class="zx" @mousedown="clickPTZControl(27,0,'zx')" @mouseup="clickPTZControl(27,1)" title="云台左下">
+          </div>
+          <div class="z" @mousedown="clickPTZControl(23,0,'z')" @mouseup="clickPTZControl(23,1)" title="云台左转">
+          </div>
+        </div>
+        <div class="ytBox ytBox2">
+          <div class="bbBtn">
+            <div @mousedown="clickPTZControl(11,0,'right')" @mouseup="clickPTZControl(11,1,'right')" title="变倍+">
+              <img v-show="imgRightUrl11" src="@/assets/images/r1.png" alt="">
+              <img v-show="!imgRightUrl11" src="@/assets/images/r1b.png" alt="">
+            </div>
+            <div @mousedown="clickPTZControl(12,0,'right')" @mouseup="clickPTZControl(12,1,'right')" title="变倍-">
+              <img v-show="imgRightUrl12" src="@/assets/images/r2.png" alt="">
+              <img v-show="!imgRightUrl12" src="@/assets/images/r2b.png" alt="">
+            </div>
+          </div>
+          <div class="bbBtn">
+            <div @mousedown="clickPTZControl(13,0,'right')" @mouseup="clickPTZControl(13,1,'right')" title="变焦+">
+              <img v-show="imgRightUrl13" src="@/assets/images/r3.png" alt="">
+              <img v-show="!imgRightUrl13" src="@/assets/images/r3b.png" alt="">
+            </div>
+            <div @mousedown="clickPTZControl(14,0,'right')" @mouseup="clickPTZControl(14,1,'right')" title="变焦-">
+              <img v-show="imgRightUrl14" src="@/assets/images/r4.png" alt="">
+              <img v-show="!imgRightUrl14" src="@/assets/images/r4b.png" alt="">
+            </div>
+          </div>
+          <div class="bbBtn">
+            <div @mousedown="clickPTZControl(15,0,'right')" @mouseup="clickPTZControl(15,1,'right')" title="光圈+">
+              <img v-show="imgRightUrl15" src="@/assets/images/r5.png" alt="">
+              <img v-show="!imgRightUrl15" src="@/assets/images/r5b.png" alt="">
+            </div>
+            <div @mousedown="clickPTZControl(16,0,'right')" @mouseup="clickPTZControl(16,1,'right')" title="光圈-">
+              <img v-show="imgRightUrl16" src="@/assets/images/r6.png" alt="">
+              <img v-show="!imgRightUrl16" src="@/assets/images/r6b.png" alt="">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class='info-title'>监控点信息</div>
+    <div class='info-form'>
+      <div class="quDetailM">
+        <p class="leftP">线路站点&nbsp;:&nbsp;&nbsp;<span>{{dataForm.lineStation}}</span></p>
+      </div>
+      <div class="quDetailM">
+        <p class="leftP">资源点名称&nbsp;:&nbsp;&nbsp;{{dataForm.name}}</p>
+      </div>
+      <div class="quDetailM">
+        <p class="leftP">资源点类型&nbsp;:&nbsp;&nbsp;{{dataForm.typeName}}</p>
+      </div>
+      <div class="quDetailM">
+        <p class="leftP">资源点编码&nbsp;:&nbsp;&nbsp;{{dataForm.code}}</p>
+      </div>
+      <div class="quDetailM">
+        <p class="leftP">资源点状态&nbsp;:&nbsp;&nbsp;{{dataForm.status==1?'正常':'异常'}}</p>
+      </div>
+      <div class="quDetailM">
+        <p class="leftP">部署位置&nbsp;:&nbsp;&nbsp;{{dataForm.deployLocation}}</p>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import { isAuth } from '../../../util'
+export default {
+  computed: {
+    ...mapState('d2admin/user', [
+      'info'
+    ])
+  },
+  data () {
+    return {
+      //11=焦距变大，12=焦距变小，13=焦点前调，14=焦点后调，15=光圈扩大，16=光圈扩小
+      //21=上仰，22=下俯，23=左转，24=右转，25=左上，26=右上，27=左下，28=右下，29=自动扫描
+      actionList: ['', '', '', '', '', '', '', '', '', '', '', '变倍+', '变倍-', '变焦+', '变焦-', '光圈+', '光圈-', '', '', '', '',
+        '上仰', '下俯', '左转', '右转', '左上', '右上', '左下', '右下', '自动扫描'],
+      imgUrl: '',
+      imgRightUrl11: false,
+      imgRightUrl12: false,
+      imgRightUrl13: false,
+      imgRightUrl14: false,
+      imgRightUrl15: false,
+      imgRightUrl16: false,
+      videoSrc: '',
+      clickFlag: false,
+      visible: false,
+      sysOrgList: [],
+      dataListSelections: [],
+      lineList: [],
+      stationList: [],
+      typeList: [],
+      systemList: [],
+      tierList: [],
+      dataForm: {
+        id: 0,
+        name: '',
+        type: 1,
+        lineId: '',
+        lineName: '',
+        stationId: localStorage.getItem('stationId'),
+        stationName: '',
+        tierId: '',
+        subSystem: '',
+        code: '',
+        subCode: '',
+        addressCode: '',
+        port: '',
+        username: '',
+        password: '',
+        remark: '',
+        status: 1
+      },
+      ontclick: 'pointer-events: none;',
+      flvPlayer: null
+    }
+  },
+  created () {
+
+  },
+  methods: {
+    init (id, stationId) {
+      this.visible = true
+      this.clickFlag = false
+      this.dataForm.id = id
+      this.stationId = stationId
+      this.initResource()
+      this.dataForm.operatorName = this.info.name
+    },
+    initResource () {
+      this.$http({
+        url: this.$http.adornUrlEq(`/liResource/getResourceDetails/${this.dataForm.id}`),
+        method: 'get',
+        params: this.$http.adornParams()
+      }).then(data => {
+        if (data && data.code === 0) {
+          this.dataForm = data.bean
+          //如果当前设备摄像头为离线状态，则不加载画面
+          if(data.bean.byx2 == 0 && this.flvPlayer){//资源点状态(0=离线，1=在线)
+            this.flvPlayer.pause()
+            this.flvPlayer.unload()
+            this.flvPlayer.detachMediaElement()
+            this.flvPlayer.destroy()
+            this.flvPlayer = null
+            return
+          }else if(data.bean.byx2 == 0 && !this.flvPlayer){
+            return
+          }else if(this.flvPlayer){
+            this.flvPlayer.pause()
+            this.flvPlayer.unload()
+            this.flvPlayer.detachMediaElement()
+            this.flvPlayer.destroy()
+            this.flvPlayer = null
+          }
+          this.$http({
+            url: this.$http.adornUrlEq('/camera/camerasPlay'),
+            method: 'post',
+            data: {
+              id: data.bean.id,
+              stationId: data.bean.stationId,
+              userId: localStorage.getItem('userId'),
+              levelType: 1,
+              controlType: 3
+            }
+          }).then(data => {
+            if (data && data.code === 0) {
+              this.videoSrc = data.url
+              //视频连接
+              this.flvPlayer = null
+              if (flvjs.isSupported()) {
+                this.flvPlayer = flvjs.createPlayer({
+                  type: 'flv',
+                  enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js
+                  isLive: true, //直播模式
+                  hasAudio: false, //关闭音频
+                  hasVideo: true,
+                  stashInitialSize: 128,
+                  enableStashBuffer: false, //播放flv时，设置是否启用播放缓存，只在直播起作用。
+                  url: this.videoSrc
+                })
+                this.$nextTick(function () {
+                  this.flvPlayer.attachMediaElement(this.$refs.video)
+                  this.flvPlayer.load()
+                })
+              }
+            }
+          })
+        }
+      })
+    },
+    closeQueryDetailVisible () {
+      this.$emit('closeQ')
+    },
+    clickPTZControl (ptz, dwStop, img) {
+      if (this.dataForm.type !== 'ece0b8b2db27411886254e81134988a3' && (ptz < 11 || ptz > 16)) {
+        return
+      }
+      if (!isAuth('ol:demo:corona')) {
+        this.$message({
+          type: 'warning',
+          message: '没有操作权限，请联系管理员',
+          duration: 1000
+        })
+        return
+      }
+      if (img && img != 'right') {
+        this.imgUrl = img
+      }
+      if (dwStop) {
+        this.imgUrl = ''
+      }
+      if (img && img == 'right') {
+        this['imgRightUrl' + ptz] = true
+      }
+      if (dwStop && img == 'right') {
+        this['imgRightUrl' + ptz] = false
+      }
+      this.$http({
+        url: this.$http.adornUrlEq('/camera/ptzControl'),
+        method: 'post',
+        data: {
+          resourceId: this.dataForm.id,
+          stationId: this.dataForm.stationId,
+          userId: localStorage.getItem('userId'),
+          levelType: 1,
+          controlType: 3,
+          ip: this.dataForm.addressCode, //ip地址
+          port: this.dataForm.port, //端口
+          username: this.dataForm.username, //账号
+          password: this.dataForm.password, //密码
+          channel: this.dataForm.byx1, //通道
+          stream: 'main', //主码流
+          dwPtzCommand: ptz, //云台控制命令
+          dwStop: dwStop //云台控制0开始和1结束
+        }
+      }).then(data => {
+        // console.log(11)
+        // console.log(data)
+        if (data && data.code === 0) {
+          if (dwStop == 0) { //云台控制0开始和1结束
+            this.saveLog(1, ptz)// 执行结果 成功 1  失败 2
+            this.$message.success(data.msg)
+          }
+        } else {
+          if (dwStop == 0) { //云台控制0开始和1结束
+            this.saveLog(2, ptz)// 执行结果 成功 1  失败 2
+            this.$message.error(data.msg)
+          }
+        }
+      })
+    },
+    //调用日志保存记录操作指令
+    saveLog (result, ptz) {
+      this.$http({
+        url: this.$http.adornUrlEq('/orVideoMonitor/save'),
+        method: 'post',
+        data: {
+          source: 1,
+          actionName: this.actionList[ptz],
+          resourceId: this.dataForm.id,
+          stationId: this.stationId,
+          type: this.dataForm.type,
+          result: result
+        }
+      }).then(data => {
+
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.el-table__header {
+  width: 100% !important;
+}
+.el-table__body {
+  width: 100% !important;
+}
+.info-title {
+  line-height: 40px;
+  height: 40px;
+  padding: 0 20px;
+  background-color: #e1edf4;
+  border-bottom: 1px solid #cccccc;
+  font-size: 16px;
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+}
+.info-video {
+  padding: 10px;
+  height: 175px;
+}
+.info-form {
+  padding: 10px;
+}
+.info-block {
+  border: 1px solid #cccccc;
+}
+.el-select {
+  width: 100%;
+}
+.video {
+  width: 310px;
+  height: 175px;
+}
+.animation {
+  animation: myfirst 1s;
+  position: absolute;
+  right: 0;
+  top: 50px;
+  width: 330px;
+  background-color: #f4f4f4;
+  z-index: 999;
+  border: 1px solid rgba(195, 195, 195, 1);
+  box-shadow: 0 2px 8px 8px rgba(0, 0, 0, 0.2);
+}
+@keyframes myfirst {
+  from {
+    right: -500px;
+  }
+  to {
+    right: 0;
+  }
+}
+.quDetailM {
+  width: 100%;
+}
+.leftP {
+  height: 30px;
+  line-height: 30px;
+  margin: 0;
+  width: 100%;
+  font-size: 14px;
+  span {
+    color: #46b6f9;
+  }
+}
+.operate {
+  padding: 5px 0;
+  font-size: 14px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 1);
+  border-image: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0.5),
+      rgba(213, 213, 213, 0.5),
+      rgba(255, 255, 255, 0.5),
+      rgba(218, 218, 218, 0.5),
+      rgba(255, 255, 255, 0.5)
+    )
+    2 2;
+  border-radius: 10px;
+  overflow: hidden;
+  display: flex;
+  justify-content: flex-start;
+  .btns {
+    width: 194px;
+    height: 194px;
+    position: relative;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+    div {
+      cursor: pointer;
+      padding: 10px;
+    }
+    .s {
+      position: absolute;
+      top: 10px;
+      left: 75px;
+      width: 24px;
+      height: 24px;
+    }
+    .x {
+      position: absolute;
+      bottom: 10px;
+      left: 75px;
+      width: 24px;
+      height: 24px;
+    }
+    .z {
+      position: absolute;
+      top: 75px;
+      left: 10px;
+      width: 24px;
+      height: 24px;
+    }
+    .y {
+      position: absolute;
+      top: 75px;
+      right: 10px;
+      width: 24px;
+      height: 24px;
+    }
+    .zs {
+      position: absolute;
+      top: 32px;
+      left: 32px;
+      width: 24px;
+      height: 24px;
+    }
+    .zx {
+      position: absolute;
+      bottom: 32px;
+      left: 32px;
+      width: 24px;
+      height: 24px;
+    }
+    .ys {
+      position: absolute;
+      top: 32px;
+      right: 32px;
+      width: 24px;
+      height: 24px;
+    }
+    .yx {
+      position: absolute;
+      bottom: 32px;
+      right: 32px;
+      width: 24px;
+      height: 24px;
+    }
+    .fx {
+      position: absolute;
+      padding: 0;
+      cursor: default;
+      top: 50%;
+      left: 50%;
+      width: 65px;
+      height: 65px;
+      background: #ececec;
+      border-radius: 50%;
+      line-height: 65px;
+      text-align: center;
+      color: #969696;
+      transform: translate(-50%, -50%);
+    }
+  }
+  .ytBox {
+    width: 90px;
+    font-size: 16px;
+    padding: 10px 0 10px 0;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    .mllx {
+      display: flex;
+      justify-content: space-between;
+      width: 90%;
+      span {
+        line-height: 40px;
+        text-align: center;
+        width: 35%;
+      }
+    }
+    .bbBtn {
+      height: 40px;
+      display: flex;
+      margin-left: 10px;
+      justify-content: flex-start;
+      div {
+        width: 40px;
+        height: 40px;
+        cursor: pointer;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/home/page.vue

@@ -22,7 +22,7 @@
       </div>
     </div>
      <div class="home-page-content" >
-<el-row :gutter="14" >
+<el-row :gutter="12" >
   <el-col :span="16" >
     <card-list :cardListTitle="cardListLeftTitle">
       <div slot="right">
@@ -107,7 +107,7 @@
       </div>
     </card-list>
   </el-col>
-  <el-col :span="8">
+  <el-col :span="8" style="padding-left:0">
     <card-list :cardListTitle="cardListRightTitle" >
       <div slot="content">
           <my-pies></my-pies>  
@@ -120,9 +120,9 @@
 </template>
 
 <script>
-import cardList from "./compontents/cardList";
-import energyTotalCharts from "./compontents/energyTotalCharts";
-import myPies from "./compontents/myPies";
+import cardList from "../components/cardList";
+import energyTotalCharts from "../components/energyTotalCharts";
+import myPies from "../components/myPies";
 // import CardList from './compontents/cardList.vue';
 export default {
   name: "home",
@@ -194,29 +194,30 @@ export default {
   },
 };
 </script>
-
 <style lang="scss" scoped>
 @import "~@/assets/style/public.scss";
 .home-page {
   height: 100%;
   width: 100%;
-  padding:10px 10px 40px 10px;
+  padding:0px 0px 40px 0px;
   // overflow: auto;
   &-top {
+      margin: 20px;
     margin-bottom: 24px;
     .f-group {
       width: 100%;
       display: flex;
           .f-item {
             box-sizing: border-box;
-      width: calc(20% - 19px);
+      width: calc(20% - 18px);
         height: 216px;
       margin-right: 24px;
       padding-top: 40px;
       background-color: #fff;
       text-align: center;
     
-      box-shadow: 4px 0px 4px 0px rgba(0, 0, 0, 0.05);
+      // box-shadow: 4px 0px 4px 0px rgba(0, 0, 0, 0.05);
+        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
       img {
         width: 50px;
         height: 50px;
@@ -246,6 +247,7 @@ export default {
 
   }
   .home-page-content {
+    margin: 20px;
     .date-text {
       padding-right: 20px;
       font-size: 14px;
@@ -259,6 +261,7 @@ export default {
     }
 
     .content-wrap {
+      // margin: 20px;
       .energy-save-mode-wrap {
         // width: ;
         box-sizing: border-box;

src/pages/kb/indoor/index.vue

@@ -14,18 +14,18 @@ card-warp(title="室内气象数据" height='45px' showBackground )
                 el-button(type='primary' size='mini') 查询
         .data-warp
             div.data-item
-                p.type 温度
-                p.color-blue
+                div.type 温度
+                div.color-blue
                     span.num 37
                     span.unit ℃
             div.data-item
-                p.type 湿度
-                p.color-cyan
+                div.type 湿度
+                div.color-cyan
                     span.num 25
                     span.unit %RH
             div.data-item()
-                p.type   CO2
-                p.color-green
+                div.type   CO2
+                div.color-green
                     span.num 17
                     span.unit PPM
         el-table(size="mini" :data='dataList'   stripe v-loading='dataListLoading'  style='width: 100%;' :header-cell-style="{ background: '#EEF8FF', color: '#333333' }")
@@ -113,21 +113,19 @@ components: {
         border: 1px solid #ECECEC;
         box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
         .type{
-            height: 19px;
             font-size: 18px;
             font-family: Microsoft YaHei;
             font-weight: 400;
             color: #333333;
-            line-height: 60px;
-
+            padding-top: 38px;
         }
         .num{
-            height: 28px;
             font-size: 36px;
             font-family: PingFang SC;
             font-weight: 600;
             color: #21ACFC;
-            line-height: 60px;
+            padding-top: 12px;
+
         }
         .unit{
             height: 15px;

src/pages/kb/outdoor/index.vue

@@ -12,9 +12,9 @@ card-warp(title="室外气象数据" height='45px' showBackground )
                 el-button(type='primary' size='mini') 查询
         .data-warp
             div.data-item(v-for='item in typeList')
-                p.type {{item.type}}
-                p.color-blue
-                    span.num mock
+                div.type {{item.type}}
+                div.color-blue
+                    span.num sss
                     span.unit 11
         div.clearfix
             el-button(size='mini' type='primary' style='float:right;margin-bottom:10px;' @click='toggle') 图形 / 列表
@@ -149,24 +149,21 @@ export default {
         border: 1px solid #ECECEC;
         box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
         .type{
-            height: 19px;
             font-size: 18px;
             font-family: Microsoft YaHei;
             font-weight: 400;
             color: #333333;
-            line-height: 60px;
+            padding-top: 38px;
 
         }
             .num{
-            height: 28px;
                 font-size: 36px;
                 font-family: PingFang SC;
                 font-weight: 600;
                 color: #21ACFC;
-            line-height: 60px;
+                // padding-top: 26px;
             }
             .unit{
-            height: 15px;
                 font-size: 18px;
                 font-family: Microsoft YaHei;
                 font-weight: 400;

src/pages/kb/power/components/historyDataModal.vue

+<template>
+  <el-dialog
+    title="历史数据"
+    :visible.sync="historyDataModalVisible"
+    :append-to-body="true"
+  >
+    <el-form :inline="true">
+      <el-form-item label="设备名称：" :label-width="formLabelWidth">
+        <el-input size="mini" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item label="设备编号：" :label-width="formLabelWidth">
+        <el-input size="mini" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item label="数据起止阶段：" :label-width="formLabelWidth">
+        <el-date-picker style="width:157px" size="mini" type="date" placeholder="">
+        </el-date-picker>
+        <span style="padding:0 10px">至</span>
+        <el-date-picker style="width:157px"  size="mini" type="date" placeholder="">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item >
+        <el-button size='mini' type="primary" icon="el-icon-search" >查询</el-button>
+         <el-button size='mini' type="primary" icon="el-icon-download">导出</el-button>
+      </el-form-item>
+      
+    </el-form>
+    <enTable :tableData="historyData" :tableColums="tableColums"></enTable>
+    <div slot="footer">
+      <el-button @click="cancelhandle">取 消</el-button>
+      <el-button type="primary" @click="cancelhandle">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script >
+import enTable from '../../../components/enTable'
+const historyData = [
+
+]
+const tableColums = [
+    {
+        label:'功率',
+        prop:'qq',
+        width:200,
+        align:'center'
+    },
+      {
+        label:'设备状态',
+        prop:'ww',
+        width:200,
+        align:'center'
+    },
+      {
+        label:'采集时间',
+        prop:'ee',
+        // width:200,
+        align:'center'
+    }
+]
+export default {
+  name: "historyDataModal",
+  props: ["historyDataModalVisible"],
+  components:{
+      enTable
+  },
+  data() {
+    return {
+      formLabelWidth: "110px",
+      historyData,
+      tableColums,
+    };
+  },
+  methods: {
+    cancelhandle() {
+      this.$emit("cancelhandle");
+    },
+  },
+};
+</script>

src/pages/kb/power/components/statisticPicTableModal.vue

+<template>
+  <el-dialog
+    title="统计图表"
+    :visible.sync="statisticModalVisible"
+    :append-to-body="true"
+  >
+    <el-form :inline="true">
+      <el-form-item label="设备名称：" label-width="formLabelWidth">
+        <el-input size="mini" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item label="设备编号：" label-width="formLabelWidth">
+        <el-input size="mini" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item label="数据起止阶段：" label-width="formLabelWidth">
+        <el-date-picker
+          style="width: 157px"
+          size="mini"
+          type="date"
+          placeholder=""
+        >
+        </el-date-picker>
+        <span style="padding: 0 10px">至</span>
+        <el-date-picker
+          style="width: 157px"
+          size="mini"
+          type="date"
+          placeholder=""
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button size="mini" type="primary" icon="el-icon-search"
+          >查询</el-button
+        >
+      </el-form-item>
+    </el-form>
+    <div id="categoryId" style="height: 200px"></div>
+    <div slot="footer">
+      <el-button @click="cancelhandlePic">取 消</el-button>
+      <el-button type="primary" @click.stop="cancelhandlePic">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script lang="ts">
+export default {
+  name: "statisticPicTableModal",
+  props: ["statisticModalVisible"],
+  data() {
+    return {
+      formLabelWidth: "120px",
+      category: null,
+    };
+  },
+  // watch: {
+  //   statisticModalVisible(value) {
+  //     if (value) {
+  //     }
+  //   },
+  // },
+
+  mounted() {
+    setTimeout(() => {
+      this.initCategory();
+    }, 3000);
+  },
+  methods: {
+    cancelhandlePic() {
+      this.$emit("cancelhandlePic");
+    },
+    initCategory() {
+      let gId = document.getElementById("categoryId");
+      this.category = this.$echarts.init(gId);
+      const option = {
+        xAxis: {
+          type: "category",
+          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            data: [150, 230, 224, 218, 135, 147, 260],
+            type: "line",
+          },
+        ],
+      };
+      this.category.setOption(option);
+    },
+  },
+};
+</script>

src/pages/kb/power/page.vue

@@ -2,12 +2,23 @@
   <div class="use-electro-data">
     <cardList cardListTitle="用电数据">
       <div slot="right">
-        <i class="el-icon-menu"></i>
+        <!-- <i class="el-icon-menu"></i> -->
+        <el-button size="mini" @click="toEnergyPage" type="primary">综合图形</el-button>
       </div>
-      <div slot="content" style="padding: 24px 28px 20px 23px">
-        <enTabs :tabList="electroTabList" ></enTabs>
-        <div style="margin-top:15px">
-          <el-form :inline="true" :model="formInline"  style="text-align:center"> 
+      <div slot="content">
+        <!-- <enTabs ></enTabs> -->
+        <div>
+          <el-tabs class="en-tabs" v-model="activeTab" >
+            <el-tab-pane
+              :label="item.label"
+              :name="item.value"
+              v-for="(item, index) in electroTabList"
+              :key="index"
+            ></el-tab-pane>
+          </el-tabs>
+        </div>
+        <div>
+          <el-form :inline="true">
             <el-row>
               <el-col :span="7">
                 <el-form-item label="设备名称：">
@@ -29,23 +40,44 @@
               </el-col>
               <el-col :span="3">
                 <el-form-item>
-                  <el-button icon="el-icon-search" size="mini" type="primary" @click="onSubmit">查询</el-button>
+                  <el-button icon="el-icon-search" size="mini" type="primary"
+                    >查询</el-button
+                  >
                 </el-form-item>
               </el-col>
             </el-row>
           </el-form>
         </div>
 
-        <enTable :tableColums="tableColums" :tableData="tableData" isShowOp="true"></enTable>
+        <enTable
+          :tableColums="tableColums"
+          :tableData="tableData"
+          :isShowOp="true"
+          isShowPage="true"
+        >
+         <template v-slot:operation='scope'>
+           <el-button type="text" @click="openHistoryHandle">历史数据</el-button>
+            <el-button type="text" @click="openPicTHandle">统计图表</el-button>
+         </template>
+        </enTable>
       </div>
     </cardList>
+    <history-data-modal
+      :historyDataModalVisible="historyDataModalVisible"
+      v-on:cancelhandle="cancelhandle"
+    ></history-data-modal>
+    <statistic-pic-table-modal
+      :statisticModalVisible="statisticModalVisible"
+      v-on:cancelhandlePic="cancelhandlePic"
+    ></statistic-pic-table-modal>
   </div>
 </template>
 <script >
-
-import cardList from "../../home/compontents/cardList";
-import enTabs from "../../eq/hall/components/enTabs";
-import enTable from "../../eq/hall/components/enTable";
+import cardList from "../../components/cardList";
+import enTabs from "../../components/enTabs";
+import enTable from "../../components/enTable";
+import historyDataModal from "./components/historyDataModal";
+import statisticPicTableModal from "./components/statisticPicTableModal";
 const tableColums = [
   {
     align: "center",
@@ -82,9 +114,6 @@ const tableColums = [
     prop: "E",
     label: "设备状态",
   },
-
-  
-  
 ];
 const tableData = [
   {
@@ -193,9 +222,14 @@ export default {
     cardList,
     enTabs,
     enTable,
+    historyDataModal,
+    statisticPicTableModal,
   },
   data() {
     return {
+      activeTab: "01",
+      historyDataModalVisible: false,
+      statisticModalVisible: false,
       tableColums,
       tableData,
       electroTabList: [
@@ -218,15 +252,43 @@ export default {
       ],
     };
   },
+  
+  methods: {
+    cancelhandle() {
+      this.$nextTick(() => {
+        this.historyDataModalVisible = false;
+      });
+    },
+    cancelhandlePic() {
+      this.$nextTick(() => {
+        this.statisticModalVisible = false;
+      });
+    },
+
+    openHistoryHandle(){
+          this.historyDataModalVisible = true;
+    },
+   openPicTHandle(){
+     this.$nextTick(()=>{
+        this.statisticModalVisible = true;
+     })
+      
+   },
+   toEnergyPage(){
+     this.$router.push({
+       path:'/analysis/energy'
+     })
+   },
+  },
 };
 </script>
 <style  lang="scss">
-.use-electro-data{
-   padding:10px 10px 40px 10px;
-   .el-form-item{
+.use-electro-data {
+  padding: 0px 0 40px 0px;
+  .el-form-item {
     margin-bottom: 15px;
     margin-top: 15px;
-}
+  }
 }
 
 </style>
\ No newline at end of file

src/router/routes.js

@@ -42,7 +42,8 @@ const frameIn = [
     component: layoutHeaderAside,
     children: (pre => [
       { path: 'hall', name: `${pre}hall`, component: () => import('@/pages/eq/hall'), meta: { ...meta, title: '候车大厅控制' } },
-      { path: 'office', name: `${pre}office`, component: () => import('@/pages/eq/office'), meta: { ...meta, title: '办公区域控制' } }
+      { path: 'office', name: `${pre}office`, component: () => import('@/pages/eq/office'), meta: { ...meta, title: '办公区域控制' } },
+      { path: 'view', name: `${pre}view`, component: () => import('@/pages/eq/view'), meta: { ...meta, title: '设备概览' } }
     ])('eq-')
   },