提交：视频管理——站点管理 ，项目管理——漏电流图标和表格的显示代码。

src/api/iot/project_new.js

@@ -145,3 +145,21 @@ export function projectElectricityTable(query) {
     params: query
   });
 }
+
+// 查询 漏电流 图表
+export function projectLeakageChart(query) {
+  return request({
+    url: "/iot/project/monitor/leakageTable",
+    method: "get",
+    params: query
+  });
+}
+
+// 查询 漏电流 列表
+export function projectLeakageTable(query) {
+  return request({
+    url: "/iot/project/monitor/leakageList",
+    method: "get",
+    params: query
+  });
+}

src/api/iot/site.js

@@ -0,0 +1,56 @@
+import request from '@/utils/request'
+import { preventRepeatFu } from "@/utils/hciot";
+
+// 查询站点监控列表
+export function listSite(query) {
+  return request({
+    url: '/monitor/site/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询站点监控详细
+export function getSite(siteId) {
+  return request({
+    url: '/monitor/site/' + siteId,
+    method: 'get'
+  })
+}
+
+// 新增站点监控
+export function addSite(data) {
+  preventRepeatFu(true)
+  return request({
+    url: '/monitor/site',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改站点监控
+export function updateSite(data) {
+  preventRepeatFu(true)
+  return request({
+    url: '/monitor/site',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除站点监控
+export function delSite(siteId) {
+  return request({
+    url: '/monitor/site/' + siteId,
+    method: 'delete'
+  })
+}
+
+// 实时监控树形
+export function siteTree(data) {
+  return request({
+    url: '/monitor/site/tree',
+    method: 'get',
+    params: data
+  })
+}

src/components/Echarts/EEchartsBar.vue

@@ -37,6 +37,7 @@ export default {
   methods: {
     updateEchart() {
       if (this.chart) {
+        this.chart.dispose();
         this.chart = null;
       }
       this.drawBar();
@@ -46,6 +47,7 @@ export default {
         this.chart = echarts.init(document.getElementById(this.eId));
       }
       this.chart.setOption(this.option);
+      this.chart.resize();
     }
   },
   watch: {

src/components/Echarts/EEchartsLine.vue

@@ -37,6 +37,7 @@ export default {
   methods: {
     updateEchart() {
       if (this.chart) {
+        this.chart.dispose();
         this.chart = null;
       }
       this.drawLine();
@@ -46,6 +47,7 @@ export default {
         this.chart = echarts.init(document.getElementById(this.eId));
       }
       this.chart.setOption(this.option);
+      this.chart.resize();
     }
   },
   watch: {

src/config/dvr.config.js

@@ -0,0 +1,10 @@
+
+export const serviceApi = {
+  v3: '/api/gb28181/',
+  v4: '/gb28181/api/'
+}
+
+export const serviceApiDesc = {
+  v3: 'V3',
+  v4: 'V4'
+}

src/views/iot/project/profileV2/AlarmManage/index.vue

@@ -118,7 +118,7 @@
           width="150"
           prop="recordId"
         >
-        <template slot-scope="scope">
+          <template slot-scope="scope">
             <span class="lay-table-textarea" :title="scope.row.recordId">
               {{ scope.row.recordId }}
             </span>

src/views/iot/project/profileV2/DeviceManage/index.vue

@@ -37,7 +37,7 @@
                   justify-content: space-evenly;
                 "
               >
-                <el-button type="text" @click="handleTabReduction">全选</el-button>
+                <el-button type="text" size="mini" @click="handleTabReduction">全选</el-button>
                 <el-button type="primary" size="mini" @click="handleTabScreen"
                   >确定</el-button
                 >

src/views/iot/project/profileV2/EnergyManage/EEnergyLoad.vue

@@ -72,6 +72,12 @@ export default {
       type: String,
       require: true,
     },
+    isFoldRight: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    }
   },
   components: {
     EEchartsLine,
@@ -268,6 +274,17 @@ export default {
         this.init();
       }
     },
+    isFoldRight() {
+      if(this.$refs.echartsLineTwoYearsLoad) {
+        this.$refs.echartsLineTwoYearsLoad.updateEchart()
+      }
+      if (this.$refs.echartsLineTwoWeeksLoad) {
+        this.$refs.echartsLineTwoWeeksLoad.updateEchart();
+      }
+      if (this.$refs.echartsLineTwoDaysLoad) {
+        this.$refs.echartsLineTwoDaysLoad.updateEchart();
+      }
+    },
   },
   created() {
     this.init();

src/views/iot/project/profileV2/SafetyTemplate/EDebuff.vue

@@ -138,7 +138,6 @@ import {
   projectAbnormalRecordTable,
   projectAbnormalRecordExport,
 } from "@/api/iot/project_new";
-import { downloadFile } from '@/utils/hciot'
 export default {
   name: "EDebuff",
   props: {
@@ -154,6 +153,12 @@ export default {
       type: String,
       require: true,
     },
+    isFoldRight: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    }
   },
   watch: {
     sourceId(val) {

src/views/iot/project/profileV2/SafetyTemplate/ELeakageCurrent.vue

@@ -60,7 +60,7 @@
             v-model="queryParams.deviceId"
             placeholder="输入设备号"
           ></el-input>
-          <el-button type="primary" @click="init" size="small">查询</el-button>
+          <el-button type="primary" @click="handleQuery" size="small">查询</el-button>
         </div>
         <!-- <div class="other-print">
           <i class="el-icon-printer"></i>
@@ -70,7 +70,7 @@
 
     <div class="e-alarm-echarts">
       <e-echarts-line
-        ref="echartsLineTrend"
+        ref="echartsLineLeakage"
         :styles="echartsOption.styles"
         :colorList="echartsOption.colorList"
         :eId="echartsOption.eId"
@@ -116,7 +116,7 @@
           prop="lineType"
         >
           <template slot-scope="scope">
-            <span class="lay-table-textarea" :title="scope.row.lineType == '0' ">
+            <span class="lay-table-textarea" :title="scope.row.lineType == '0'">
               {{ scope.row.lineType ? "总路" : "支路" }}
             </span>
           </template>
@@ -148,7 +148,7 @@
               type="text"
               @click="handleDetails(scope.row)"
             >
-              <i class="iocnfont icontubiao-zhuzhuangtu"></i>
+              <i class="iconfont icontubiao-zhuzhuangtu"></i>
               历史趋势</el-button
             >
           </template>
@@ -163,11 +163,27 @@
         @pagination="getDeviceRecordTable"
       />
     </div>
+    <el-dialog append-to-body :title="dialogTitle" :visible="dialogOpen" width="800px" @close="() => { dialogOpen = false }">
+      <div style="height: 100%; width: 100%;">
+        <e-leakage-detail v-if="dialogOpen" :sourceId="sourceId" :tempType="tempType" :deviceId="deviceId"></e-leakage-detail>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" size="mini" @click="() => { dialogOpen = false }"
+          >取 消</el-button
+        >
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
 import EEchartsLine from "@/components/Echarts/EEchartsLine";
 import * as echarts from "echarts";
+import DialogTemplate from "@/components/DialogTemplate";
+import {
+  projectLeakageChart,
+  projectLeakageTable,
+} from "@/api/iot/project_new";
+import ELeakageDetail from './ELeakageDetail'
 export default {
   name: "ELeakageCurrent",
   props: {
@@ -179,16 +195,21 @@ export default {
       type: [Number, String],
       require: true,
     },
-    tempType: {
+    isFoldRight: {
-      type: String,
+      type: Boolean,
-      require: true,
+      default: () => {
-    },
+        return false
+      }
+    }
   },
   components: {
-    EEchartsLine
+    EEchartsLine,
+    DialogTemplate,
+    ELeakageDetail
   },
   data() {
     return {
+      tempType: 'A1002,B1002',
       time: "",
       queryParams: {
         timeType: "day",
@@ -202,10 +223,12 @@ export default {
       echartsOption: {
         styles: "width: 100%; height: 100%;",
         colorList: ["#EE6666", "#FFCC00"],
-        eId: "trendEchartsLine",
+        eId: "leakageEchartsLine",
       },
       title: "24小时报警情况",
       typeName: "alarm",
+      dialogTitle: "历史趋势",
+      dialogOpen: false,
       resultOption: {
         color: ["#EE6666", "#FFC900"],
         title: {
@@ -216,8 +239,7 @@ export default {
           trigger: "axis",
         },
         legend: {
-          top: 5,
+          bottom: 0,
-          right: 5,
           data: ["预警", "报警"],
           textStyle: {
             color: "#344567",
@@ -228,7 +250,7 @@ export default {
         grid: {
           left: "20",
           right: "20",
-          bottom: "5",
+          bottom: "35",
           top: 30,
           containLabel: true,
         },
@@ -243,7 +265,7 @@ export default {
           axisLabel: {
             show: true,
             textStyle: {
-              color: "#fff",
+              color: "#606266",
             },
           },
         },
@@ -255,7 +277,7 @@ export default {
           axisLabel: {
             show: true,
             textStyle: {
-              color: "#fff",
+              color: "#606266",
             },
           },
         },
@@ -286,12 +308,17 @@ export default {
       total: 0,
       tableList: [],
       tableLoading: false,
+      dialogParams: {},
+      deviceId: ''
     };
   },
   created() {
     this.init();
   },
   watch: {
+    isFoldRight() {
+      this.updateEcharts()
+    },
     sourceId(val) {
       if (val !== null && val !== undefined) {
         this.init();
@@ -299,73 +326,89 @@ export default {
     },
   },
   methods: {
+    handleDetails(row) {
+      this.deviceId = row.deviceId;
+      this.dialogOpen = true;
+    },
     init() {
       this.time =
         this.queryParams.timeType === "day"
           ? this.parseTime(new Date(), "{y}-{m}-{d} 00:00:00")
           : this.parseTime(new Date(), "{y}-{m}-01 00:00:00");
+      this.handleQuery();
+    },
+    handleQuery() {
+      this.pageParams.pageNum = 1;
+      this.time =
+        this.queryParams.timeType === "day"
+          ? this.parseTime(new Date(this.time), "{y}-{m}-{d} 00:00:00")
+          : this.parseTime(new Date(this.time), "{y}-{m}-01 00:00:00");
       this.getDeviceRecordEcharts();
       this.getDeviceRecordTable();
     },
     // 查询 图表 数据
     getDeviceRecordEcharts() {
-      // projectAlarmRecordEcharts(
+      let params = JSON.parse(JSON.stringify(this.queryParams));
-      //   Object.assign(this.queryParams, {
+      projectLeakageChart(
-      //     projectId: this.sourceId,
+        Object.assign(params, {
-      //     time: this.time,
+          projectId: this.sourceId,
-      //     typeCodes: this.tempType,
+          time: this.time,
-      //   })
+          typeCode: this.tempType,
-      // ).then((res) => {
+        })
-      //   this.resultOption.xAxis.data = res.data["name"];
+      ).then((res) => {
-      //   this.resultOption.legend.data = Object.keys(res.data).filter(v => { v !== 'name' })
+        this.resultOption.xAxis.data = res.data["name"];
-      //   var list = Object.keys(res.data).map((v) => {
+        this.resultOption.legend.data = Object.keys(res.data).filter((v) => {
-      //     if (v !== "name") {
+          v !== "name";
-      //       return {
+        });
-      //         name: v,
+        var list = Object.keys(res.data).map((v) => {
-      //         type: "line",
+          if (v !== "name") {
-      //         smooth: false,
+            return {
-      //         symbolSize: 2,
+              name: v,
-      //         markPoint: {
+              type: "line",
-      //           symbolSize: 35,
+              smooth: false,
-      //           data: [
+              symbolSize: 2,
-      //             { type: "max", name: "Max" },
+              markPoint: {
-      //             { type: "min", name: "Min" },
+                symbolSize: 35,
-      //           ],
+                data: [
-      //         },
+                  { type: "max", name: "Max" },
-      //         label: {
+                  { type: "min", name: "Min" },
-      //           show: false,
+                ],
-      //           formatter: function (params) {
+              },
-      //             return echarts.format.formatTime("yyyy-MM-dd", params.value);
+              label: {
-      //           },
+                show: false,
-      //           backgroundColor: "#7581BD",
+                formatter: function (params) {
-      //         },
+                  return echarts.format.formatTime("yyyy-MM-dd", params.value);
-      //         data: res.data[v],
+                },
-      //       };
+                backgroundColor: "#7581BD",
-      //     }
+              },
-      //   });
+              data: res.data[v],
-      //   this.resultOption.series = [...list];
+            };
-      //   this.updateEcharts();
+          }
-      // });
+        });
+        this.resultOption.series = [...list];
+        this.updateEcharts();
+      });
     },
     // 查询 表格 数据
     getDeviceRecordTable() {
       this.tableLoading = true;
       this.tableLoading = false;
-      // projectAlarmRecordTable(
+      projectLeakageTable(
-      //   Object.assign(this.queryParams, {
+        Object.assign(this.queryParams, {
-      //     projectId: this.sourceId,
+          projectId: this.sourceId,
-      //     time: this.time,
+          time: this.time,
-      //     typeCodes: this.tempType,
+          typeCode: this.tempType,
-      //   })
+        })
-      // ).then((res) => {
+      ).then((res) => {
-      //   this.tableList = res.rows;
+        this.tableList = res.rows;
-      //   this.tableLoading = false;
+        this.tableLoading = false;
-      //   this.total = res.total;
+        this.total = res.total;
-      // });
+      });
     },
     // 类型发生变化根据新数据刷新 图表信息
     updateEcharts() {
-      this.$refs.echartsLineTrend.updateEchart();
+      this.$refs.echartsLineLeakage.updateEchart();
+      this.$forceUpdate();
     },
   },
 };

src/views/iot/project/profileV2/SafetyTemplate/index.vue

@@ -189,6 +189,12 @@ export default {
       type: String,
       require: true,
     },
+    isFoldRight: {
+      type: Boolean,
+      default: () => {
+        return false
+      }
+    }
   },
   components: { EEchartsLine },
   data() {
@@ -271,6 +277,9 @@ export default {
     };
   },
   watch: {
+    isFoldRight() {
+      this.updateEcharts()
+    },
     sourceId(val) {
       if (val !== null && val !== undefined) {
         this.handleQuery();
@@ -376,7 +385,9 @@ export default {
     },
     // 类型发生变化根据新数据刷新 图表信息
     updateEcharts() {
-      this.$refs.echartsLineTrend.updateEchart();
+      if (this.$refs.echartsLineTrend) {
+        this.$refs.echartsLineTrend.updateEchart();
+      };
     },
   },
 };

src/views/iot/project/profileV2/details.vue

@@ -73,6 +73,7 @@
             :projectTypeOptions="projectTypeOptions"
             :sourceId="stateSourceId"
             :tempType="activeType"
+            :isFoldRight="isFoldRight"
           ></component>
         </div>
       </div>
@@ -178,7 +179,7 @@ export default {
             },
             {
               label: "漏电流",
-              key: "ELeakageCurrent",
+              key: "leakage",
               template: "ELeakageCurrent",
             },
             {
@@ -208,17 +209,17 @@ export default {
             },
             {
               label: "过流过载",
-              key: "A003,B003",
+              key: "A003,A013,B003,B009",
               template: "ESafetyTemplate",
             },
             {
               label: "电弧报警",
-              key: "A003,B003",
+              key: "A014,B010",
               template: "ESafetyTemplate",
             },
             {
               label: "三相报警",
-              key: "A003,B003",
+              key: "A015,B011",
               template: "ESafetyTemplate",
             },
             {

src/views/iot/video/site/index.vue

@@ -0,0 +1,993 @@
+<template>
+  <div class="app-container video-site">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
+      <el-form-item label="站点名称" prop="siteName">
+        <el-input
+          v-model="queryParams.siteName"
+          placeholder="请输入站点名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+
+      <!-- <el-form-item label="行政区划" prop="regionalismId">
+        <treeselect
+          :disable-branch-nodes="true"
+          v-model="queryParams.regionalismId"
+          :options="regionalismOption"
+          :normalizer="normalizer"
+          placeholder="行政区划"
+          style="width: 200px"
+        />
+      </el-form-item> -->
+      <el-form-item label="站点状态" prop="siteStatus">
+        <el-select
+          v-model="queryParams.siteStatus"
+          placeholder="请选择站点状态"
+          clearable
+        >
+          <el-option
+            v-for="dict in statusOptions"
+            :key="dict.dictValue"
+            :label="dict.dictLabel"
+            :value="dict.dictValue"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['iot:site:add']"
+          >新增</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['iot:site:remove']"
+          >删除</el-button
+        >
+      </el-col>
+    </el-row>
+
+    <el-table
+      v-loading="loading"
+      :data="siteList"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="站点名称" align="left" width="150" prop="siteName" />
+      <!-- <el-table-column
+        label="行政区划"
+        align="left"
+        width="180"
+        prop="regionalismFullName"
+      /> -->
+      <el-table-column label="项目名称" align="left" width="150" prop="projectName" />
+      <el-table-column label="站点地址" align="left" prop="siteAddress" />
+      <el-table-column label="站点状态" align="center" width="100" prop="siteStatus">
+        <template slot-scope="scope">
+          <div class="list-row">
+            <span class="notice-item" :class="noticeState(scope.row.siteStatus)"></span>
+            <span
+              class="notice-text"
+              v-text="scope.row.siteStatus === '1' ? '在线' : '离线'"
+            ></span>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="接入协议" align="left" width="150" prop="videoProtocol" />
+      <el-table-column label="设备ID" align="left" width="200" prop="devId" />
+      <el-table-column label="设备编码" align="left" width="150" prop="devCode" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="160">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{i}:{s}") }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+        width="200"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['iot:site:edit']"
+            >修改</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['iot:site:remove']"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改站点监控对话框 -->
+    <div class="eldialog-div">
+      <el-dialog
+        class="n-dialog"
+        :title="title"
+        :visible.sync="open"
+        width="750px"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+      >
+        <el-form ref="form" :model="form" :rules="rules" label-width="110px">
+          <el-row :gutter="20" v-show="tempType !== 'distri'">
+            <el-col :span="24">
+              <el-form-item label="所属项目" prop="projectName">
+                <el-input
+                  v-model="form.projectName"
+                  placeholder="点击选择厂商"
+                  @focus="handleOpenTableSelect()"
+                />
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="12">
+              <el-form-item label="站点名称" prop="siteName">
+                <el-input
+                  :disabled="tempType === 'distri'"
+                  v-model="form.siteName"
+                  placeholder="请输入站点名称"
+                />
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="12">
+              <el-form-item label="接入协议" prop="videoProtocol">
+                <el-select
+                  :disabled="tempType === 'distri'"
+                  v-model="form.videoProtocol"
+                  placeholder="请输入接入协议"
+                  clearable
+                  style="width: 100%"
+                >
+                  <el-option
+                    v-for="dict in videoProtocolOptions"
+                    :key="dict.dictValue"
+                    :label="dict.dictLabel"
+                    :value="dict.dictValue"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" v-show="tempType !== 'distri'">
+            <el-col :span="12">
+              <el-form-item label="启用https" prop="https">
+                <el-switch
+                  v-model="form.https"
+                  active-color="#13ce66"
+                  inactive-color="#ff4949"
+                  :active-value="true"
+                  :inactive-value="false"
+                >
+                </el-switch>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="服务类型" prop="serverType">
+                <el-select
+                  :disabled="tempType === 'distri'"
+                  v-model="form.serverType"
+                  placeholder="请选择服务类型"
+                  style="width: 100%"
+                >
+                  <el-option
+                    v-for="(itemKey, itemVal) in serverTypeOpt"
+                    :key="itemKey"
+                    :label="itemKey"
+                    :value="itemVal"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <!-- <el-col :span="24">
+              <el-form-item label="行政区划" prop="regionalismId">
+                <treeselect
+                  :disabled="tempType === 'distri'"
+                  @select="regionalismChange"
+                  :disable-branch-nodes="true"
+                  v-model="form.regionalismId"
+                  :options="regionalismOption"
+                  :normalizer="normalizer"
+                  placeholder="请选择上级行政区划"
+                />
+              </el-form-item>
+            </el-col> -->
+          </el-row>
+
+          <el-row :gutter="20" v-show="tempType !== 'distri'">
+            <el-col :span="12">
+              <el-form-item label="站点经度" prop="siteLng">
+                <el-input v-model="form.siteLng" disabled placeholder="请输入站点经度" />
+              </el-form-item>
+            </el-col>
+
+            <el-col :span="12">
+              <el-form-item label="站点纬度" prop="siteLat">
+                <el-input v-model="form.siteLat" disabled placeholder="请输入站点纬度" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row v-show="tempType !== 'distri'">
+            <el-col :span="24">
+              <el-form-item label="站点地址" prop="siteAddress">
+                <el-input
+                  v-model="form.siteAddress"
+                  @blur="mapAddressFromPoint"
+                  :disabled="tempType === 'distri'"
+                  placeholder="请输入站点地址"
+                >
+                  <el-popover
+                    slot="suffix"
+                    placement="left-start"
+                    title="地图选择坐标"
+                    width="730"
+                    trigger="manual"
+                    v-model="visible"
+                  >
+                    <i
+                      slot="reference"
+                      class="el-icon-map-location"
+                      @click="mapClick"
+                    ></i>
+                    <!-- 地图模块选择和设置 -->
+                    <slot>
+                      <el-row>
+                        <el-col :span="7">
+                          <span>经度：{{ mapForm.lng }}</span>
+                        </el-col>
+                        <el-col :span="7">
+                          <span>纬度：{{ mapForm.lat }}</span>
+                        </el-col>
+                        <el-col :span="10">
+                          <span>地址：{{ mapForm.address }}</span>
+                        </el-col>
+                      </el-row>
+
+                      <shop-location
+                        v-if="visible === true"
+                        style="height: 300px"
+                        :mapCenter="mapCenter"
+                        :draggable="true"
+                        @mapEvent="mapEvent"
+                        :zoom="zoom"
+                      />
+
+                      <div
+                        style="
+                          width: 100%;
+                          height: 50px;
+                          display: flex;
+                          align-items: center;
+                          justify-content: flex-end;
+                          margin-top: 5px;
+                        "
+                      >
+                        <el-button type="primary" @click="mapSureClick">确 定</el-button>
+                        <el-button @click="visible = false">取 消</el-button>
+                      </div>
+                    </slot>
+                  </el-popover>
+                </el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-form-item label="设备ID" prop="devId" v-show="tempType !== 'distri'">
+            <el-input
+              v-model="form.devId"
+              :disabled="tempType === 'distri'"
+              placeholder="请输入设备ID"
+            />
+          </el-form-item>
+          <el-form-item label="设备编码" prop="devCode" v-show="tempType !== 'distri'">
+            <el-input
+              v-model="form.devCode"
+              :disabled="tempType === 'distri'"
+              placeholder="请输入设备编码"
+            />
+          </el-form-item>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="排序" prop="sortNum">
+                <el-input v-model="form.sortNum" placeholder="请输入排序" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row
+            :gutter="20"
+            v-if="tempType !== 'distri' && form.serverType === 'QI_NIU'"
+          >
+            <!-- <template> -->
+            <el-col :span="12">
+              <el-form-item label="七牛访问秘钥" prop="qnAccessKey">
+                <el-input v-model="form.qnAccessKey" placeholder="请输入七牛访问秘钥" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="七牛秘钥" prop="qnSecretKey">
+                <el-input v-model="form.qnSecretKey" placeholder="请输入七牛秘钥" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="七牛空间ID" prop="qnNamespaceId">
+                <el-input v-model="form.qnNamespaceId" placeholder="请输入七牛空间ID" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="七牛host" prop="qnHost">
+                <el-input v-model="form.qnHost" placeholder="请输入七牛host" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="七牛port" prop="qnPort">
+                <el-input v-model="form.qnPort" placeholder="请输入七牛port" />
+              </el-form-item>
+            </el-col>
+            <!-- </template> -->
+          </el-row>
+          <el-row
+            :gutter="20"
+            v-if="tempType !== 'distri' && form.serverType === 'M7S'"
+          >
+            <el-col :span="12">
+              <el-form-item label="版本" prop="m7sVersion">
+                <el-select
+                  v-model="form.m7sVersion"
+                  placeholder="请选择版本"
+                  style="width: 100%"
+                >
+                  <el-option
+                    v-for="(itemKey, itemVal) in serviceApiDesc"
+                    :key="itemKey"
+                    :label="itemKey"
+                    :value="itemVal"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <!-- <template> -->
+            <el-col :span="12">
+              <el-form-item label="IP地址" prop="m7sHost">
+                <el-input v-model="form.m7sHost" placeholder="请输入IP地址" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="端口" prop="m7sPort">
+                <el-input v-model="form.m7sPort" placeholder="请输入端口" />
+              </el-form-item>
+            </el-col>
+            <!-- </template> -->
+          </el-row>
+        </el-form>
+        <div slot="footer" class="dialog-footer form-button-div">
+          <el-button type="primary" size="mini" @click="submitForm">确 定</el-button>
+          <el-button size="mini" @click="cancel">取 消</el-button>
+        </div>
+      </el-dialog>
+    </div>
+
+    <el-dialog
+      title="选择"
+      :visible.sync="selectTableShow"
+      width="75%"
+      top="10vh"
+      class="select-table-dialog"
+      :close-on-click-modal="false"
+    >
+      <select-table-wrap
+        v-if="selectTableShow"
+        :tableOption="tableSelectOption.tableOpt"
+        :queryOption="tableSelectOption.queryOpt"
+        :tableList="tableSelectOption.tableList"
+        @parentGetList="childGetList($event)"
+        :otherOption="tableSelectOption.otherOption"
+        @returnEvent="returnEvent($event)"
+      />
+
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" type="primary" @click="resuleClick"
+          >确 定</el-button
+        >
+        <el-button
+          size="mini"
+          @click="
+            () => {
+              selectTableShow = false;
+            }
+          "
+          >取 消</el-button
+        >
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listSite, getSite, delSite, addSite, updateSite } from "@/api/iot/site";
+import {
+  listProject
+} from "@/api/iot/project";
+import { initMap, gjzCode } from "@/utils/latlngFromAddress";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import ShopLocation from "@/components/Amap/components/shopLocation/index";
+import SelectTableWrap from "@/components/SelectTable/index";
+import { serviceApiDesc } from '@/config/dvr.config'
+const serverTypeOpt = {
+  SRS: "SRS",
+  QI_NIU: "七牛",
+  M7S:"M7S"
+};
+
+export default {
+  name: "Site",
+  components: {
+    Treeselect,
+    ShopLocation,
+    SelectTableWrap,
+  },
+  data() {
+    return {
+      serverTypeOpt,
+      serviceApiDesc,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 总条数
+      total: 0,
+      // 站点监控表格数据
+      siteList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        siteName: undefined,
+        regionalismId: undefined,
+        siteStatus: undefined,
+        createTime: undefined,
+        updateTime: undefined,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        devId: [
+          { required: true, message: "设备ID不能为空", trigger: "blur" },
+          {
+            pattern: /^[0-9]{20}$/,
+            message: "格式不正确; 纯数字 组合20个字符",
+          },
+        ],
+        devCode: [
+          { required: true, message: "设备编码不能为空", trigger: "blur" },
+          {
+            pattern: /^[A-Z a-z]{1}[A-Z a-z 0-9 \- ]{5,45}$/,
+            message: "格式不正确; (a-Z , 0-9) 组合 6 - 45个字符",
+          },
+        ],
+        projectName: [{ required: true, message: "项目名称不能为空", trigger: "change" }],
+        siteName: [{ required: true, message: "站点名称不能为空", trigger: "blur" }],
+        videoProtocol: [{ required: true, message: "接入协议不能为空", trigger: "blur" }],
+        serverType: [{ required: true, message: "服务类型不能为空", trigger: "blur" }],
+        siteLng: [{ required: true, message: "经度不能为空", trigger: "blur" }],
+        siteLat: [{ required: true, message: "纬度不能为空", trigger: "blur" }],
+        qnAccessKey: [
+          { required: true, message: "七牛访问秘钥不能为空", trigger: "blur" },
+        ],
+        qnSecretKey: [{ required: true, message: "七牛秘钥不能为空", trigger: "blur" }],
+        qnNamespaceId: [
+          { required: true, message: "七牛空间ID不能为空", trigger: "blur" },
+        ],
+        qnHost: [{ required: true, message: "七牛host不能为空", trigger: "blur" }],
+        qnPort: [{ required: true, message: "七牛port不能为空", trigger: "blur" }],
+        m7sHost: [{ required: true, message: "ip地址不能为空", trigger: "blur" }],
+        m7sPort: [{ required: true, message: "端口不能为空", trigger: "blur" }],
+        m7sVersion: [{ required: true, message: "服务版本不能为空", trigger: "blur" }]
+      },
+      // 地图 弹窗
+      visible: false,
+      BMap: null,
+      mapCenter: {
+        lng: 119.459889,
+        lat: 25.98974,
+      },
+      zoom: 15,
+      mapForm: {},
+      // 行政划分树选项
+      regionalismOption: [],
+      // 状态数据字典
+      videoProtocolOptions: [],
+      statusOptions: [
+        {
+          dictValue: "0",
+          dictLabel: "离线",
+        },
+        {
+          dictValue: "1",
+          dictLabel: "在线",
+        },
+      ],
+      tenantList: [],
+      tempType: "",
+      selectTableShow: false,
+      tableSelectOption: {},
+      selectResult: {},
+    };
+  },
+  created() {
+    this.getDicts("video_protocol").then((response) => {
+      this.videoProtocolOptions = response.data;
+    });
+    this.getList();
+    // this.getRegionalisTree();
+  },
+  methods: {
+    // 打开 表单选择 弹窗
+    handleOpenTableSelect() {
+      this.selectResult = {};
+      this.tableSelectOption = {
+        otherOption: {
+          tableType: "project",
+        },
+        queryOpt: {
+          disable: false,
+          labelWidth: "68px",
+          params: {
+            projectName: '',
+          },
+          page: {
+            pageSize: 10,
+            pageNum: 1,
+            total: 0,
+          },
+          inline: true,
+          queryChilds: [
+            {
+              style: "",
+              placeholder: "项目名称",
+              clearable: true,
+              label: "项目名称",
+              type: "input",
+              key: "projectName",
+              size: "small",
+              value: "",
+            },
+          ],
+        },
+        tableOpt: {
+          loading: false,
+          rowKey: "projectId",
+          selection: false,
+          maxHeight: "45vh",
+          childs: [
+            {
+              style: "",
+              label: "项目名称",
+              type: "",
+              prop: "projectName",
+              align: "left",
+              width: "",
+              "show-overflow-tooltip": false,
+              tempType: "span",
+            },
+            {
+              style: "",
+              label: "行政区划",
+              type: "",
+              prop: "regionalismFullName",
+              align: "left",
+              width: "250",
+              "show-overflow-tooltip": false,
+              tempType: "span",
+            },
+            {
+              style: "",
+              label: "项目地址",
+              type: "",
+              prop: "projectAddress",
+              align: "left",
+              width: "250",
+              "show-overflow-tooltip": false,
+              tempType: "span",
+            },
+            {
+              style: "",
+              label: "创建时间",
+              type: "",
+              prop: "createTime",
+              align: "left",
+              width: "160",
+              "show-overflow-tooltip": false,
+              tempType: "span",
+            },
+          ],
+          tableList: {
+            type: Array,
+          },
+        },
+        tableList: [],
+      };
+      this.selectTableShow = true;
+    },
+    // 查询回调
+    childGetList(data) {
+      if (data.otherOption.tableType === "project") {
+        this.handleQueryProject(data);
+      }
+    },
+    // 查询项目列表
+    handleQueryProject(data) {
+      listProject(Object.assign(data.page, data.param, { selected: 1 })).then(
+        (response) => {
+          this.tableSelectOption.tableList = response.rows;
+          this.tableSelectOption.queryOpt.page.total = Number(response.total);
+        }
+      );
+    },
+    // 点击或者双击数据回调
+    returnEvent(data) {
+      this.selectResult = {};
+      if (data.type === "dblclick") {
+        if (data.otherOption.tableType === "project") {
+          this.form.projectId = data.value.projectId;
+          this.form.projectName = data.value.projectName;
+          this.form.siteLat = data.value.projectLat;
+          this.form.siteLng = data.value.projectLng;
+          this.form.siteAddress = data.value.projectAddress;
+        }
+        this.selectTableShow = false;
+      } else if (data.type === "click") {
+        if (data.otherOption.tableType === "project") {
+          this.selectResult.projectId = data.value.projectId;
+          this.selectResult.projectName = data.value.projectName;
+          this.selectResult.siteLat = data.value.projectLat;
+          this.selectResult.siteLng = data.value.projectLng;
+          this.selectResult.siteAddress = data.value.projectAddress;
+        }
+        this.selectResult.tableType = data.otherOption.tableType;
+      }
+    },
+    // 点击确定按钮
+    resuleClick() {
+      if (this.selectResult.tableType === "project") {
+        this.form.projectId = this.selectResult.projectId;
+        this.form.projectName = this.selectResult.projectName;
+        this.form.siteLat = this.selectResult.projectLat;
+        this.form.siteLng = this.selectResult.projectLng;
+        this.form.siteAddress = this.selectResult.projectAddress;
+      }
+      this.selectTableShow = false;
+    },
+    noticeState(state) {
+      let className = "";
+      switch (state) {
+        case "1":
+          className = "online";
+          break;
+        case "0":
+          className = "outline";
+          break;
+        default:
+          className = "outline";
+      }
+      return className;
+    },
+    // 字典状态字典翻译
+    statusFormat(row, column) {
+      return this.selectDictLabel(this.videoProtocolOptions, row.status);
+    },
+    // 地图方法
+    handler({ BMap, map }) {
+      //地图
+      this.BMap = BMap;
+      this.map = map;
+      this.mapLoading = false;
+      // this.getPointByIp()
+    },
+    mapEvent(data) {
+      this.mapForm.lng = data.lng;
+      this.mapForm.lat = data.lat;
+      this.mapForm.address = data.address;
+      this.$forceUpdate();
+    },
+    // 使用地图方式定位
+    mapClick() {
+      if (this.form.siteLng && this.form.siteLat) {
+        this.mapCenter.lng = this.form.siteLng;
+        this.mapCenter.lat = this.form.siteLat;
+        this.mapForm.lng = this.form.siteLng;
+        this.mapForm.lat = this.form.siteLat;
+        this.mapForm.address = this.form.siteAddress;
+      } else {
+        this.mapCenter = {
+          lng: 119.459889,
+          lat: 25.98974,
+        };
+        this.mapForm.lng = 119.459889;
+        this.mapForm.lat = 25.98974;
+        this.mapForm.address = "";
+      }
+      this.visible = !this.visible;
+    },
+    // 地图显示窗口 确认
+    mapSureClick() {
+      // 确认的时候将值赋值给form表单并且关闭地图
+      this.form.siteAddress = this.mapForm.address
+        ? this.mapForm.address
+        : this.form.siteAddress;
+      this.form.siteLng = this.mapForm.lng;
+      this.form.siteLat = this.mapForm.lat;
+      this.visible = false;
+    },
+    // 地图地址选择
+    mapAddressFromPoint() {
+      if (this.form.siteAddress) {
+        // geoCode(this.form.siteAddress, this, { form: 'form', lat: 'shopLat', lng: 'shopLng' })
+        gjzCode(this.form.siteAddress, this, {
+          form: "form",
+          lat: "shopLat",
+          lng: "shopLng",
+        });
+      }
+    },
+    /** 转换行政划分数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.regionalismId,
+        label: node.regionalismName,
+        children: node.children,
+      };
+    },
+    /** 查询行政区划下拉树结构 */
+    // getRegionalisTree() {
+    //   listRegionalism().then((response) => {
+    //     this.regionalismOption = [];
+    //     const data = {
+    //       regionalismId: 0,
+    //       regionalismName: "中国",
+    //       children: [],
+    //     };
+    //     data.children = this.handleTree(response.data, "regionalismId", "parentId");
+    //     this.regionalismOption.push(data);
+    //   });
+    // },
+    // 行政区划 下拉变化
+    regionalismChange(val) {
+      this.mapCenter = {
+        lng: val.stationLng,
+        lat: val.stationLat,
+      };
+      this.form.siteLng = val.stationLng;
+      this.form.siteLat = val.stationLat;
+    },
+    /** 查询站点监控列表 */
+    getList() {
+      this.loading = true;
+      if (this.queryParams.siteStatus === "") {
+        this.queryParams.siteStatus = null;
+      }
+      listSite(this.queryParams).then((response) => {
+        this.siteList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        recordId: undefined,
+        siteCode: undefined,
+        siteName: undefined,
+        regionalismId: undefined,
+        siteAddress: undefined,
+        siteLng: undefined,
+        siteLat: undefined,
+        siteStatus: "0",
+        videoProtocol: undefined,
+        devId: undefined,
+        devCode: undefined,
+        tenantId: undefined,
+        createBy: undefined,
+        createTime: undefined,
+        updateBy: undefined,
+        updateTime: undefined,
+        remark: undefined,
+        m7sVersion: 'v3',
+        https: false,
+        serverType: "M7S",
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map((item) => item.recordId);
+      this.single = selection.length != 1;
+      this.multiple = !selection.length;
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.tempType = "create";
+      this.open = true;
+      this.title = "添加站点监控";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      this.tempType = "update";
+      const recordId = row.recordId || this.ids;
+      getSite(recordId).then((response) => {
+        this.form = response.data;
+        // this.form.https = response.data["https"]
+        //   ? response.data["https"].toString()
+        //   : "false";
+        this.open = true;
+        this.title = "修改站点监控";
+      });
+    },
+    /** 提交按钮 */
+    submitForm: function () {
+      console.log(this.form);
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          if (this.form.recordId != undefined) {
+            updateSite(this.form).then((response) => {
+              if (response.code === 200) {
+                this.msgSuccess("修改成功");
+                this.open = false;
+                this.getList();
+              }
+            });
+          } else {
+            addSite(this.form).then((response) => {
+              if (response.code === 200) {
+                this.msgSuccess("新增成功");
+                this.open = false;
+                this.getList();
+              }
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const recordIds = row.recordId || this.ids;
+      this.$confirm(
+        // '是否确认删除站点监控编号为"' + recordIds + '"的数据项?',
+        "是否删除该选项（删除后该站点下的所有摄像头将会被删除）",
+        "警告",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      )
+        .then(function () {
+          return delSite(recordIds);
+        })
+        .then(() => {
+          this.getList();
+          this.msgSuccess("删除成功");
+        })
+        .catch(function () {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download(
+        "iot/site/export",
+        {
+          ...this.queryParams,
+        },
+        `iot_site.xlsx`
+      );
+    },
+  },
+};
+</script>
+<style lang="scss">
+.video-site {
+  .n-dialog {
+    .el-dialog__body {
+      padding: 20px;
+      padding-bottom: 0px;
+    }
+    .el-dialog__header {
+      border-bottom: 1px solid #747373;
+    }
+    .el-dialog__footer {
+      border-top: 1px solid #747373;
+    }
+  }
+  .list-row {
+    .notice-item {
+      display: inline-block;
+      width: 6px;
+      height: 6px;
+      border-radius: 6px;
+    }
+    .on {
+      background: rgb(77, 189, 218);
+    }
+    .online {
+      background: rgb(99, 194, 112);
+    }
+    .outline {
+      background: #e55130;
+    }
+    .undeloda {
+      background: #d3d5d5;
+    }
+    .notice-text {
+      margin-left: 6px;
+      margin-right: 8px;
+    }
+  }
+}
+</style>