提交：1. 统计分析 功能模块前端代码(只对接能源统计接口); 2. 整改部分页面使用弹窗选择表格 的组件

src/api/iot/staistics.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function projectEnergy(query) {
+    return request({
+        url: '/iot/stat/projectEnergy',
+        method: 'get',
+        params: query
+    })
+}

src/components/EDialogTableInput/src/main.vue

@@ -2,13 +2,16 @@
   <div class="e-dialog-table-select">
     <div @click="openTableSelectDialog">
       <el-input
+        v-if="type === 'input' || !type"
         :placeholder="'点击选择' + title"
         v-model="value"
         class="input-with-select"
         :clearable="pclearable"
+        :disabled="disabled"
         :size="psize"
         suffix-icon="el-icon-caret-bottom"
       />
+      <el-button :disabled="disabled" type="primary" :size="psize" v-if="type === 'button'" @click="openTableSelectDialog">{{ '点击选择' + title }}</el-button>
     </div>
     <el-dialog
       :title="'请选择__' + title"
@@ -17,6 +20,7 @@
       top="10vh"
       class="select-table-dialog"
       :close-on-click-modal="false"
+      append-to-body
     >
       <e-dynamic-table
         v-if="selectTableShow"
@@ -90,9 +94,7 @@ export default {
       type: String,
       default: "",
     },
-    value: {
+    value: String,
-      type: String,
-    },
     localKey: {
       type: String,
       default: "ZF_RECENT_KEY",
@@ -125,6 +127,8 @@ export default {
         };
       },
     },
+    type: String,
+    disabled: Boolean,
   },
 	data() {
 		return {
@@ -165,9 +169,13 @@ export default {
 			this.$emit("input", result[this.showFileName] || '');
 			this.$emit('change', result);
       this.selectResult = null;
+      this.$forceUpdate();
 		},
 		// 开启 筛选表格
     openTableSelectDialog() {
+      if(this.disabled) {
+        return;
+      }
       this.selectResult = null;
       this.selectTableShow = true;
     },
@@ -212,5 +220,10 @@ export default {
     padding: 10px 20px;
   }
 }
+.select-table-dialog {
+  .el-dialog__body {
+    padding: 10px 20px;
+  }
+}
 
 </style>

src/views/iot/device/index.vue

@@ -14,17 +14,6 @@
         v-show="showSearch"
         label-width="68px"
       >
-        <!-- <el-form-item label="所属型号" prop="modelId">
-          <el-select v-model="queryParams.modelId"  placeholder="所属型号" clearable size="small" @change="handleQuery">
-            <el-option
-              :label="doct.modelName"
-              v-for="doct in queryModelOpt"
-              :key="doct.modelId"
-              :value="doct.modelId"
-            />
-          </el-select>
-        </el-form-item>-->
-
         <el-form-item label="型号名称" prop="modelName">
           <el-input
             v-model="queryParams.modelName"
@@ -262,10 +251,15 @@
     >
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="所属型号：" prop="modelId">
-          <el-input
+          <e-dialog-table-input
+            :table="selectModelTable"
+            :refurbishFun="listModel"
+            showFileName="modelName"
+            fileName="modelId,modelName,deviceType,prodKey"
             v-model="form.modelName"
-            placeholder="点击选择型号"
+            title="型号"
-            @focus="openModelTableSelectDialog()"
+            psize="small"
+            @change="handleModelDialogEvent"
           />
         </el-form-item>
 
@@ -291,10 +285,15 @@
           prop="parentId"
           v-if="form.deviceType === 'MINIATURE_BREAKER'"
         >
-          <el-input
+          <e-dialog-table-input
+            :table="selectDeviceTable"
+            :refurbishFun="listDevice"
+            showFileName="deviceName"
+            fileName="deviceId,deviceName"
             v-model="form.parentName"
-            placeholder="点击选择父设备"
+            title="设备"
-            @focus="openTableSelectDialog()"
+            psize="small"
+            @change="handleDeviceDialogEvent"
           />
         </el-form-item>
 
@@ -330,7 +329,14 @@
           />
         </el-form-item>
 
-        <el-form-item label="设备标签：" v-if="form.deviceType !== 'VIDEO_CONTROLLER' &&　form.deviceType !== 'GATEWAY_CONTROLLER'" prop="deviceTag">
+        <el-form-item
+          label="设备标签："
+          v-if="
+            form.deviceType !== 'VIDEO_CONTROLLER' &&
+            form.deviceType !== 'GATEWAY_CONTROLLER'
+          "
+          prop="deviceTag"
+        >
           <el-select
             v-model="form.deviceTag"
             filterable
@@ -364,41 +370,6 @@
         <el-button size="mini" @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
-
-    <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
       :class="
         componectVal === 'GatewayDetail'
@@ -427,10 +398,10 @@ import {
   disassociateChild,
 } from "@/api/iot/device";
 import { listModel, getModel } from "@/api/iot/model";
-import SelectTableWrap from "@/components/SelectTable/index";
 import DetailsWrap from "./profile/details";
 import ParamWrap from "@/components/ParamWrap/deviceParam";
 import GatewayDetail from "@/views/profile/DeviceDetailsView/index";
+import EDialogTableInput from "@/components/EDialogTableInput";
 const deviceStatusOpt = {
   ONLINE: "在线",
   OFFLINE: "离线",
@@ -442,24 +413,216 @@ const lineTypeOpt = {
   BRANCH: "支路",
 };
 
+const selectModelTable = {
+  otherOption: {
+    tableType: "model",
+  },
+  queryOption: {
+    disable: false,
+    labelWidth: "68px",
+    params: {
+      protocolType: "",
+      modelName: "",
+    },
+    inline: true,
+    queryChilds: [
+      {
+        style: "",
+        placeholder: "型号名称",
+        clearable: true,
+        label: "型号名称",
+        type: "input",
+        key: "modelName",
+        size: "small",
+        value: "",
+      },
+      {
+        style: "",
+        placeholder: "协议类型",
+        clearable: true,
+        label: "协议类型",
+        type: "select",
+        key: "protocolType",
+        size: "small",
+        value: "",
+        options: [
+          // {
+          //   key: "IOTOS",
+          //   label: "iot平台",
+          //   value: "IOTOS"
+          // },
+          // {
+          //   key: "ONENET",
+          //   label: "ONENET",
+          //   value: "ONENET"
+          // },
+          {
+            key: "OFFICIAL",
+            label: "官方平台",
+            value: "OFFICIAL",
+          },
+        ],
+        optionKey: {
+          key: "key",
+          label: "label",
+          value: "value",
+        },
+      },
+    ],
+  },
+  tableOption: {
+    loading: false,
+    rowKey: "deviceId",
+    selection: false,
+    maxHeight: "45vh",
+    childs: [
+      {
+        style: "",
+        label: "厂商名称",
+        type: "",
+        prop: "vendorName",
+        align: "left",
+        width: "200",
+        "show-overflow-tooltip": false,
+        tempType: "span",
+      },
+      {
+        style: "",
+        label: "型号名称",
+        type: "",
+        prop: "modelName",
+        align: "left",
+        width: "200",
+        "show-overflow-tooltip": false,
+        tempType: "span",
+      },
+      {
+        style: "",
+        label: "设备类型",
+        type: "",
+        prop: "deviceTypeName",
+        align: "left",
+        width: "120",
+        "show-overflow-tooltip": false,
+        tempType: "span",
+      },
+      {
+        style: "",
+        label: "产品PK",
+        type: "",
+        prop: "prodKey",
+        align: "left",
+        width: "",
+        "show-overflow-tooltip": false,
+        tempType: "span",
+      },
+      {
+        style: "",
+        label: "产品密钥",
+        type: "",
+        prop: "prodSecret",
+        align: "left",
+        width: "",
+        "show-overflow-tooltip": false,
+        tempType: "span",
+      },
+    ],
+  },
+};
+const selectDeviceTable = {
+  otherOption: {
+    tableType: "device",
+  },
+  queryOption: {
+    disable: false,
+    labelWidth: "68px",
+    params: {
+      deviceName: "",
+      deviceType: "GATEWAY_CONTROLLER",
+    },
+    inline: true,
+    queryChilds: [
+      {
+        style: "",
+        placeholder: "设备名称",
+        clearable: true,
+        label: "设备名称",
+        type: "input",
+        key: "deviceName",
+        size: "small",
+        value: "",
+      },
+    ],
+  },
+  tableOption: {
+    loading: false,
+    rowKey: "deviceId",
+    selection: false,
+    maxHeight: "45vh",
+    childs: [
+      {
+        style: "",
+        label: "所属型号",
+        type: "",
+        prop: "modelName",
+        align: "left",
+        width: "",
+        "show-overflow-tooltip": false,
+        tempType: "span",
+      },
+      {
+        style: "",
+        label: "设备名称",
+        type: "",
+        prop: "deviceName",
+        align: "left",
+        width: "",
+        "show-overflow-tooltip": false,
+        tempType: "span",
+      },
+      {
+        style: "",
+        label: "设备Key",
+        type: "",
+        prop: "deviceKey",
+        align: "left",
+        width: "",
+        "show-overflow-tooltip": false,
+        tempType: "span",
+      },
+      {
+        style: "",
+        label: "创建时间",
+        type: "time",
+        prop: "createTime",
+        align: "center",
+        width: "160",
+        "show-overflow-tooltip": false,
+        tempType: "span",
+      },
+    ],
+    tableList: {
+      type: Array,
+    },
+  },
+};
+
 export default {
   name: "systemDevice",
   components: {
-    SelectTableWrap,
     DetailsWrap,
     ParamWrap,
     GatewayDetail,
+    EDialogTableInput,
   },
   data() {
     return {
       deviceStatusOpt,
+      selectModelTable,
+      selectDeviceTable,
       lineTypeOpt,
       sourceId: "",
       componectVal: "",
-      selectTableShow: false,
-      tableSelectOption: {},
-      selectResult: {},
-      queryModelOpt: [],
       // 遮罩层
       loading: true,
       // 选中数组
@@ -519,7 +682,7 @@ export default {
         ],
         deviceTag: [
           { required: true, message: "设备标签不能为空", trigger: "change" },
-        ]
+        ],
       },
       deviceTypeList: {},
       deviceTagList: [],
@@ -530,6 +693,20 @@ export default {
     this.init();
   },
   methods: {
+    listModel,
+    listDevice,
+    handleModelDialogEvent(e) {
+      this.getModelInfoById(e.modelId);
+      this.form.modelId = e.modelId;
+      this.form.modelName = e.modelName;
+      this.form.deviceType = e.deviceType;
+      this.form.prodKey = e.prodKey;
+      this.deviceTypeChange(this.form.deviceType);
+    },
+    handleDeviceDialogEvent(e) {
+      this.form.parentId = e.deviceId;
+      this.form.parentName = e.deviceName;
+    },
     // 字典状态字典翻译
     statusFormat(row, column) {
       return this.selectDictLabel(this.deviceTagList, row.deviceTag);
@@ -542,7 +719,6 @@ export default {
         this.deviceTagList = response.data;
       });
       this.getDeviceTypeList();
-      this.initGetModelList();
       this.getList();
     },
     sortChange(column) {
@@ -572,309 +748,12 @@ export default {
       }
       this.componectVal = "";
     },
-    // 打开厂商选择窗口 ——表格
-    openModelTableSelectDialog() {
-      this.selectResult = {};
-      this.tableSelectOption = {
-        otherOption: {
-          tableType: "model",
-        },
-        queryOpt: {
-          disable: false,
-          labelWidth: "68px",
-          params: {
-            protocolType: "",
-            modelName: "",
-          },
-          page: {
-            pageSize: 10,
-            pageNum: 1,
-            total: 0,
-          },
-          inline: true,
-          queryChilds: [
-            {
-              style: "",
-              placeholder: "型号名称",
-              clearable: true,
-              label: "型号名称",
-              type: "input",
-              key: "modelName",
-              size: "small",
-              value: "",
-            },
-            {
-              style: "",
-              placeholder: "协议类型",
-              clearable: true,
-              label: "协议类型",
-              type: "select",
-              key: "protocolType",
-              size: "small",
-              value: "",
-              options: [
-                // {
-                //   key: "IOTOS",
-                //   label: "iot平台",
-                //   value: "IOTOS"
-                // },
-                // {
-                //   key: "ONENET",
-                //   label: "ONENET",
-                //   value: "ONENET"
-                // },
-                {
-                  key: "OFFICIAL",
-                  label: "官方平台",
-                  value: "OFFICIAL",
-                },
-              ],
-              optionKey: {
-                key: "key",
-                label: "label",
-                value: "value",
-              },
-            },
-          ],
-        },
-        tableOpt: {
-          loading: false,
-          rowKey: "deviceId",
-          selection: false,
-          maxHeight: "45vh",
-          childs: [
-            {
-              style: "",
-              label: "厂商名称",
-              type: "",
-              prop: "vendorName",
-              align: "left",
-              width: "200",
-              "show-overflow-tooltip": false,
-              tempType: "span",
-            },
-            {
-              style: "",
-              label: "型号名称",
-              type: "",
-              prop: "modelName",
-              align: "left",
-              width: "200",
-              "show-overflow-tooltip": false,
-              tempType: "span",
-            },
-            {
-              style: "",
-              label: "设备类型",
-              type: "",
-              prop: "deviceTypeName",
-              align: "left",
-              width: "120",
-              "show-overflow-tooltip": false,
-              tempType: "span",
-            },
-            {
-              style: "",
-              label: "产品PK",
-              type: "",
-              prop: "prodKey",
-              align: "left",
-              width: "",
-              "show-overflow-tooltip": false,
-              tempType: "span",
-            },
-            {
-              style: "",
-              label: "产品密钥",
-              type: "",
-              prop: "prodSecret",
-              align: "left",
-              width: "",
-              "show-overflow-tooltip": false,
-              tempType: "span",
-            },
-          ],
-          tableList: {
-            type: Array,
-          },
-        },
-        tableList: [],
-      };
-      this.selectTableShow = true;
-    },
-    // 打开设备选择窗口 ——表格
-    openTableSelectDialog() {
-      this.selectResult = {};
-      this.tableSelectOption = {
-        otherOption: {
-          tableType: "device",
-        },
-        queryOpt: {
-          disable: false,
-          labelWidth: "68px",
-          params: {
-            deviceName: "",
-            deviceType: "GATEWAY_CONTROLLER",
-            // parentId: '0'
-          },
-          page: {
-            pageSize: 10,
-            pageNum: 1,
-            total: 0,
-          },
-          inline: true,
-          queryChilds: [
-            {
-              style: "",
-              placeholder: "设备名称",
-              clearable: true,
-              label: "设备名称",
-              type: "input",
-              key: "deviceName",
-              size: "small",
-              value: "",
-            },
-          ],
-        },
-        tableOpt: {
-          loading: false,
-          rowKey: "deviceId",
-          selection: false,
-          maxHeight: "45vh",
-          childs: [
-            {
-              style: "",
-              label: "所属型号",
-              type: "",
-              prop: "modelName",
-              align: "left",
-              width: "",
-              "show-overflow-tooltip": false,
-              tempType: "span",
-            },
-            {
-              style: "",
-              label: "设备名称",
-              type: "",
-              prop: "deviceName",
-              align: "left",
-              width: "",
-              "show-overflow-tooltip": false,
-              tempType: "span",
-            },
-            {
-              style: "",
-              label: "设备Key",
-              type: "",
-              prop: "deviceKey",
-              align: "left",
-              width: "",
-              "show-overflow-tooltip": false,
-              tempType: "span",
-            },
-            {
-              style: "",
-              label: "创建时间",
-              type: "time",
-              prop: "createTime",
-              align: "center",
-              width: "160",
-              "show-overflow-tooltip": false,
-              tempType: "span",
-            },
-          ],
-          tableList: {
-            type: Array,
-          },
-        },
-        tableList: [],
-      };
-      this.selectTableShow = true;
-    },
-    // 查询回调
-    childGetList(data) {
-      if (data.otherOption.tableType === "device") {
-        this.deviceChildList(data);
-      } else if (data.otherOption.tableType === "model") {
-        this.modelChildList(data);
-      }
-    },
-    initGetModelList() {
-      listModel({
-        pageNum: 1,
-        pageSize: 99999,
-      }).then((response) => {
-        this.queryModelOpt = response.rows;
-      });
-    },
-    modelChildList(data) {
-      listModel(Object.assign(data.page, data.param, { selected: 1 })).then(
-        (response) => {
-          this.tableSelectOption.tableList = response.rows;
-          this.tableSelectOption.queryOpt.page.total = Number(response.total);
-        }
-      );
-    },
-    deviceChildList(data) {
-      listDevice(Object.assign(data.page, data.param, { selected: 1 })).then(
-        (response) => {
-          this.tableSelectOption.tableList = response.rows;
-          this.tableSelectOption.queryOpt.page.total = Number(response.total);
-        }
-      );
-    },
     // 根据 型号id 获取 型号详情
     getModelInfoById(modelId) {
       getModel(modelId).then((res) => {
         this.$refs.paramWrap.setList(res.data.paramList || []);
       });
     },
-    // 点击或者双击数据回调
-    returnEvent(data) {
-      if (data.type === "dblclick") {
-        if (data.otherOption.tableType === "device") {
-          this.form.parentId = data.value.deviceId;
-          this.form.parentName = data.value.deviceName;
-        } else if (data.otherOption.tableType === "model") {
-          this.getModelInfoById(data.value.modelId);
-          this.form.modelId = data.value.modelId;
-          this.form.modelName = data.value.modelName;
-          this.form.deviceType = data.value.deviceType;
-          this.form.prodKey = data.value.prodKey;
-          this.deviceTypeChange(this.form.deviceType);
-        }
-        this.selectTableShow = false;
-      } else if (data.type === "click") {
-        this.selectResult = {};
-        if (data.otherOption.tableType === "device") {
-          this.selectResult.parentId = data.value.deviceId;
-          this.selectResult.parentName = data.value.deviceName;
-        } else if (data.otherOption.tableType === "model") {
-          this.selectResult.modelId = data.value.modelId;
-          this.selectResult.modelName = data.value.modelName;
-          this.selectResult.deviceType = data.value.deviceType;
-          // this.selectResult.paramList = data.value.paramList;
-          this.selectResult.prodKey = data.value.prodKey;
-        }
-        this.selectResult.tableType = data.otherOption.tableType;
-      }
-    },
-    // 点击确定按钮
-    resuleClick() {
-      if (this.selectResult.tableType === "device") {
-        this.form.parentId = this.selectResult.parentId;
-        this.form.parentName = this.selectResult.parentName;
-      } else if (this.selectResult.tableType === "model") {
-        this.form.modelId = this.selectResult.modelId;
-        this.form.prodKey = this.selectResult.prodKey;
-        this.form.modelName = this.selectResult.modelName;
-        this.form.deviceType = this.selectResult.deviceType;
-        this.deviceTypeChange(this.form.deviceType);
-        this.getModelInfoById(this.selectResult.modelId);
-        // this.$refs.paramWrap.setList(this.selectResult.paramList || []);
-      }
-      this.selectTableShow = false;
-    },
     deviceTypeChange(val) {
       if (val !== "MINIATURE_BREAKER") {
         this.form.parentId = 0;
@@ -916,7 +795,7 @@ export default {
         paramList: [],
         deviceKey: "",
         lineType: undefined,
-        deviceTag: '',
+        deviceTag: "",
       };
       this.resetForm("form");
     },

src/views/iot/project/index.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="app-container iot-project">
-    <component :is="componectVal" :sourceId="sourceId" @linkToTable="linkToTable"></component>
+    <component
+      :is="componectVal"
+      :sourceId="sourceId"
+      @linkToTable="linkToTable"
+    ></component>
 
     <div v-show="componectVal === ''">
       <el-form
@@ -20,7 +24,12 @@
           />
         </el-form-item>
         <el-form-item label="项目类型" prop="industry">
-          <el-select v-model="queryParams.industry" placeholder="请选择项目类型" clearable size="small">
+          <el-select
+            v-model="queryParams.industry"
+            placeholder="请选择项目类型"
+            clearable
+            size="small"
+          >
             <el-option
               v-for="dict in projectTypeOptions"
               :key="dict.dictValue"
@@ -30,8 +39,16 @@
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+          <el-button
-          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            type="primary"
+            icon="el-icon-search"
+            size="mini"
+            @click="handleQuery"
+            >搜索</el-button
+          >
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+            >重置</el-button
+          >
         </el-form-item>
       </el-form>
 
@@ -44,15 +61,19 @@
             size="mini"
             @click="handleAdd"
             v-hasPermi="['iot:project:add']"
-          >新增</el-button>
+            >新增</el-button
+          >
         </el-col>
-        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        <right-toolbar
+          :showSearch.sync="showSearch"
+          @queryTable="getList"
+        ></right-toolbar>
       </el-row>
 
       <el-table
         v-loading="loading"
         :data="projectList"
-        :default-sort="{prop: 'createTime', order: 'descending'}"
+        :default-sort="{ prop: 'createTime', order: 'descending' }"
         @sort-change="sortChange"
       >
         <el-table-column
@@ -62,7 +83,12 @@
           :index="indexFormatter"
           width="80px"
         ></el-table-column>
-        <el-table-column label="项目名称" width="200px" align="left" prop="projectName" />
+        <el-table-column
+          label="项目名称"
+          width="200px"
+          align="left"
+          prop="projectName"
+        />
         <el-table-column
           label="项目类型"
           align="center"
@@ -70,8 +96,13 @@
           :formatter="statusFormat"
           prop="industry"
         />
-        <el-table-column label="行政区划" align="left" width="250" prop="regionalismFullName" />
+        <el-table-column
-        <el-table-column label="项目地址" align="left" prop="projectAddress" >
+          label="行政区划"
+          align="left"
+          width="250"
+          prop="regionalismFullName"
+        />
+        <el-table-column label="项目地址" align="left" prop="projectAddress">
           <template slot-scope="scope">
             <span class="lay-table-textarea" :title="scope.row.projectAddress">
               {{ scope.row.projectAddress }}
@@ -97,21 +128,24 @@
               type="text"
               icon="el-icon-search"
               @click="handleDetails(scope.row)"
-            >详情</el-button>
+              >详情</el-button
+            >
             <el-button
               size="mini"
               type="text"
               icon="el-icon-edit"
               @click="handleUpdate(scope.row)"
               v-hasPermi="['iot:project:edit']"
-            >修改</el-button>
+              >修改</el-button
+            >
             <el-button
               size="mini"
               type="text"
               icon="el-icon-delete"
               @click="handleDelete(scope.row)"
               v-hasPermi="['iot:project:remove']"
-            >删除</el-button>
+              >删除</el-button
+            >
           </template>
         </el-table-column>
       </el-table>
@@ -125,23 +159,37 @@
       />
 
       <!-- 添加或修改项目对话框 -->
-      <dialog-template :title="title" :visible="open" @close="open = false"
+      <dialog-template
-          class="eldialog-wrap"
+        :title="title"
-          
+        :visible="open"
-          width="720px"
+        @close="open = false"
+        class="eldialog-wrap"
+        width="720px"
+      >
+        <el-form
+          ref="form"
+          :model="form"
+          :rules="rules"
+          label-width="100px"
+          slot="dialog-center"
         >
-
-        <el-form ref="form" :model="form" :rules="rules" label-width="100px" slot="dialog-center">
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="项目名称:" prop="projectName">
-                <el-input v-model="form.projectName" placeholder="请输入项目名称" />
+                <el-input
+                  v-model="form.projectName"
+                  placeholder="请输入项目名称"
+                />
               </el-form-item>
             </el-col>
 
             <el-col :span="12">
               <el-form-item label="项目类型:" prop="industry">
-                <el-select v-model="form.industry" style="width: 100%;" placeholder="请选择项目类型">
+                <el-select
+                  v-model="form.industry"
+                  style="width: 100%"
+                  placeholder="请选择项目类型"
+                >
                   <el-option
                     v-for="dict in projectTypeOptions"
                     :key="dict.dictValue"
@@ -153,11 +201,19 @@
             </el-col>
           </el-row>
 
-          <el-form-item label="电价合同:" >
+          <el-form-item label="电价合同:">
-            <el-input v-model="form.contractName" suffix-icon="el-icon-caret-bottom"  @focus="inputFocusContract()" placeholder="请输入电价合同" />
+            <e-dialog-table-input
+              :table="selectPriceTable"
+              :refurbishFun="listContract"
+              showFileName="contractName"
+              fileName="contractId,contractName"
+              v-model="form.contractName"
+              title="合同"
+              psize="small"
+              @change="handleProiceDialogEvent"
+            />
           </el-form-item>
 
-
           <el-form-item label="行政区划" prop="regionalismId">
             <!-- <el-input v-model="form.regionalismId" placeholder="请输入行政区划代码" /> -->
             <treeselect
@@ -173,13 +229,21 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="项目经度" prop="projectLng">
-                <el-input v-model="form.projectLng" disabled placeholder="请输入项目经度" />
+                <el-input
+                  v-model="form.projectLng"
+                  disabled
+                  placeholder="请输入项目经度"
+                />
               </el-form-item>
             </el-col>
 
             <el-col :span="12">
               <el-form-item label="项目纬度" prop="projectLat">
-                <el-input v-model="form.projectLat" disabled placeholder="请输入项目纬度" />
+                <el-input
+                  v-model="form.projectLat"
+                  disabled
+                  placeholder="请输入项目纬度"
+                />
               </el-form-item>
             </el-col>
           </el-row>
@@ -200,24 +264,28 @@
                     trigger="manual"
                     v-model="visible"
                   >
-                    <i slot="reference" class="el-icon-map-location" @click="mapClick"></i>
+                    <i
+                      slot="reference"
+                      class="el-icon-map-location"
+                      @click="mapClick"
+                    ></i>
                     <!-- 地图模块选择和设置 -->
                     <slot>
                       <el-row>
                         <el-col :span="7">
-                          <span>经度：{{mapForm.lng}}</span>
+                          <span>经度：{{ mapForm.lng }}</span>
                         </el-col>
                         <el-col :span="7">
-                          <span>纬度：{{mapForm.lat}}</span>
+                          <span>纬度：{{ mapForm.lat }}</span>
                         </el-col>
                         <el-col :span="10">
-                          <span>地址：{{mapForm.address}}</span>
+                          <span>地址：{{ mapForm.address }}</span>
                         </el-col>
                       </el-row>
 
                       <shop-location
                         v-if="visible === true"
-                        style="height: 300px;"
+                        style="height: 300px"
                         :mapCenter="mapCenter"
                         :draggable="true"
                         @mapEvent="mapEvent"
@@ -232,9 +300,11 @@
                           align-items: center;
                           justify-content: flex-end;
                           margin-top: 5px;
-                          "
+                        "
                       >
-                        <el-button type="primary" @click="mapSureClick">确 定</el-button>
+                        <el-button type="primary" @click="mapSureClick"
+                          >确 定</el-button
+                        >
                         <el-button @click="visible = false">取 消</el-button>
                       </div>
                     </slot>
@@ -247,60 +317,54 @@
           <el-row :gutter="20">
             <el-col :span="12">
               <el-form-item label="联系方式1" prop="contacts1">
-                <el-input v-model="form.contacts1" placeholder="请输入联系方式1" />
+                <el-input
+                  v-model="form.contacts1"
+                  placeholder="请输入联系方式1"
+                />
               </el-form-item>
             </el-col>
 
             <el-col :span="12">
               <el-form-item label="联系方式2" prop="contacts2">
-                <el-input v-model="form.contacts2" placeholder="请输入联系方式2" />
+                <el-input
+                  v-model="form.contacts2"
+                  placeholder="请输入联系方式2"
+                />
               </el-form-item>
             </el-col>
 
             <el-col :span="12">
               <el-form-item label="联系方式3" prop="contacts3">
-                <el-input v-model="form.contacts3" placeholder="请输入联系方式3" />
+                <el-input
+                  v-model="form.contacts3"
+                  placeholder="请输入联系方式3"
+                />
               </el-form-item>
             </el-col>
           </el-row>
 
-          <el-form-item label="总路设备:" >
+          <el-form-item label="总路设备:">
-            <el-input v-model="form.projectDeviceName" suffix-icon="el-icon-caret-bottom"  @focus="openTableSelectDialog()" placeholder="请输入总路设备" />
+            <e-dialog-table-input
+              :table="selectDeviceTable"
+              :refurbishFun="listDevice"
+              showFileName="deviceName"
+              fileName="deviceId,deviceName"
+              v-model="form.projectDeviceName"
+              title="设备"
+              psize="small"
+              @change="handleDeviceDialogEvent"
+            />
           </el-form-item>
         </el-form>
         <div slot="dialog-footer" class="dialog-footer">
-          <el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
+          <el-button size="mini" type="primary" @click="submitForm"
+            >确 定</el-button
+          >
           <el-button size="mini" @click="cancel">取 消</el-button>
         </div>
-        </dialog-template>
+      </dialog-template>
-
-
     </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="resultClick">确 定</el-button>
-        <el-button size="mini" @click="() =>{selectTableShow = false}">取 消</el-button>
-      </div>
-    </el-dialog>
-
     <!-- <div class="to-home-wrap2" @click="linkToTable" v-show="componectVal !== ''">
       <el-button icon="el-icon-d-arrow-left" title="返回列表" circle>返回列表</el-button>
     </div> -->
@@ -314,25 +378,172 @@ import {
   delProject,
   addProject,
   updateProject,
-  exportProject
+  exportProject,
 } from "@/api/iot/project";
-import {
+import { listDevice } from "@/api/iot/device";
-  listDevice
+import { listContract } from "@/api/iot/contract";
-} from "@/api/iot/device";
-import {
-  listContract
-} from "@/api/iot/contract";
 import { listRegionalism } from "@/api/system/regionalism";
 import { initMap, gjzCode } from "@/utils/latlngFromAddress.js";
 import ShopLocation from "@/components/Amap/components/shopLocation/index";
 import DetailsWrap from "./profile/details";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-import SelectTableWrap from "@/components/SelectTable/index";
 import DialogTemplate from "@/components/DialogTemplate/index";
 
+import EDialogTableInput from "@/components/EDialogTableInput";
+
 /////、、、、、、、、、、、、、、、、、、、、
-import DetailsWrapNew from './profileV2/details'
+import EDetailsWrap from "./profileV2/details";
+
+const selectDeviceTable = {
+  otherOption: {
+    tableType: "device",
+  },
+  queryOption: {
+    disable: false,
+    labelWidth: "68px",
+    params: {
+      deviceName: "",
+      parentId: 0,
+      deviceType: "MINIATURE_BREAKER",
+    },
+    inline: true,
+    queryChilds: [
+      {
+        style: "",
+        placeholder: "设备名称",
+        clearable: true,
+        label: "设备名称",
+        type: "input",
+        key: "deviceName",
+        size: "small",
+        value: "",
+      },
+    ],
+  },
+  tableOption: {
+    loading: false,
+    rowKey: "deviceId",
+    selection: false,
+    maxHeight: "45vh",
+    childs: [
+      {
+        style: "",
+        label: "所属型号",
+        type: "",
+        prop: "modelName",
+        align: "left",
+        width: "",
+        "show-overflow-tooltip": false,
+        tempType: "span",
+      },
+      {
+        style: "",
+        label: "设备名称",
+        type: "",
+        prop: "deviceName",
+        align: "left",
+        width: "",
+        "show-overflow-tooltip": false,
+        tempType: "span",
+      },
+      {
+        style: "",
+        label: "设备Key",
+        type: "",
+        prop: "deviceKey",
+        align: "left",
+        width: "",
+        "show-overflow-tooltip": false,
+        tempType: "span",
+      },
+      {
+        style: "",
+        label: "创建时间",
+        type: "time",
+        prop: "createTime",
+        align: "center",
+        width: "160",
+        "show-overflow-tooltip": false,
+        tempType: "span",
+      },
+    ],
+  },
+};
+
+const selectPriceTable = {
+  otherOption: {
+    tableType: "project",
+  },
+  queryOption: {
+    disable: false,
+    labelWidth: "68px",
+    params: {
+      contractName: "",
+      modelCode: "",
+    },
+    page: {
+      pageSize: 10,
+      pageNum: 1,
+      total: 0,
+    },
+    inline: true,
+    queryChilds: [
+      {
+        style: "",
+        placeholder: "合同名称",
+        clearable: true,
+        label: "合同名称",
+        type: "input",
+        key: "contractName",
+        size: "small",
+        value: "",
+      },
+    ],
+  },
+  tableOption: {
+    loading: false,
+    rowKey: "deviceId",
+    selection: false,
+    maxHeight: "45vh",
+    childs: [
+      {
+        style: "",
+        label: "合同名称",
+        type: "",
+        prop: "contractName",
+        align: "left",
+        width: "",
+        "show-overflow-tooltip": false,
+        tempType: "span",
+      },
+      {
+        style: "",
+        label: "计价类型",
+        type: "",
+        prop: "contractType",
+        align: "left",
+        width: "",
+        "show-overflow-tooltip": false,
+        tempType: "strType",
+        option: {
+          PEAK_VALLEY: "峰谷时段计价",
+          LADDER: "阶梯计价",
+        },
+      },
+      {
+        style: "",
+        label: "状态",
+        type: "",
+        prop: "status",
+        align: "left",
+        width: "",
+        "show-overflow-tooltip": false,
+        tempType: "text1",
+      },
+    ],
+  },
+};
 
 export default {
   name: "Project",
@@ -340,12 +551,14 @@ export default {
     ShopLocation,
     Treeselect,
     DetailsWrap,
-    SelectTableWrap,
+    EDetailsWrap,
-    DetailsWrapNew,
+    DialogTemplate,
-    DialogTemplate
+    EDialogTableInput,
   },
   data() {
     return {
+      selectPriceTable,
+      selectDeviceTable,
       selectTableShow: false,
       tableSelectOption: {},
       selectResult: {},
@@ -377,35 +590,35 @@ export default {
         projectAddress: null,
         projectStatus: null,
         orderByColumn: "createTime",
-        isAsc: "desc"
+        isAsc: "desc",
       },
       // 表单参数
       form: {},
       // 表单校验
       rules: {
         projectName: [
-          { required: true, message: "项目名称不能为空", trigger: "blur" }
+          { required: true, message: "项目名称不能为空", trigger: "blur" },
         ],
         industry: [
-          { required: true, message: "项目类型不能为空", trigger: "blur" }
+          { required: true, message: "项目类型不能为空", trigger: "blur" },
         ],
         regionalismId: [
-          { required: true, message: "行政区划不能为空", trigger: "change" }
+          { required: true, message: "行政区划不能为空", trigger: "change" },
         ],
         projectAddress: [
-          { required: true, message: "项目地址不能为空", trigger: "change" }
+          { required: true, message: "项目地址不能为空", trigger: "change" },
         ],
         projectLng: [
-          { required: true, message: "经度不能为空", trigger: "change" }
+          { required: true, message: "经度不能为空", trigger: "change" },
         ],
         projectLat: [
-          { required: true, message: "纬度不能为空", trigger: "change" }
+          { required: true, message: "纬度不能为空", trigger: "change" },
-        ]
+        ],
       },
       projectTypeOptions: [],
       mapCenter: {
         lng: 119.459889,
-        lat: 25.98974
+        lat: 25.98974,
       },
       baiduMapKey: "N05AG95Umzs3fouk6WpFqtGxcDlw0fRn",
       zoom: 15,
@@ -417,255 +630,36 @@ export default {
       regionalismOption: [],
       componectVal: "",
       sourceId: "",
-      userType: ''
+      userType: "",
     };
   },
   created() {
-    if (this.$route.query['projectId']) {
+    if (this.$route.query["projectId"]) {
-      this.handleDetails(this.$route.query)
+      this.handleDetails(this.$route.query);
     }
-    this.getDicts("project_industry").then(response => {
+    this.getDicts("project_industry").then((response) => {
       this.projectTypeOptions = response.data;
     });
     this.getList();
     this.getTreeselect();
   },
   methods: {
-     // 打开设备选择窗口 ——表格
+    listContract,
-    openTableSelectDialog() {
+    listDevice,
-      this.selectResult = {};
+    handleProiceDialogEvent(e) {
-      this.tableSelectOption = {
+      this.form.contractId = e.contractId;
-        otherOption: {
+      this.form.contractName = e.contractName;
-          tableType: "device"
+      this.$forceUpdate();
-        },
-        queryOpt: {
-          disable: false,
-          labelWidth: "68px",
-          params: {
-            deviceName: "",
-            modelId: "",
-            parentId: 0,
-            deviceType: "MINIATURE_BREAKER"
-          },
-          page: {
-            pageSize: 10,
-            pageNum: 1,
-            total: 0
-          },
-          inline: true,
-          queryChilds: [
-            {
-              style: "",
-              placeholder: "设备名称",
-              clearable: true,
-              label: "设备名称",
-              type: "input",
-              key: "deviceName",
-              size: "small",
-              value: ""
-            }
-          ]
-        },
-        tableOpt: {
-          loading: false,
-          rowKey: "deviceId",
-          selection: false,
-          maxHeight: "45vh",
-          childs: [
-            {
-              style: "",
-              label: "所属型号",
-              type: "",
-              prop: "modelName",
-              align: "left",
-              width: "",
-              "show-overflow-tooltip": false,
-              tempType: "span"
-            },
-            {
-              style: "",
-              label: "设备名称",
-              type: "",
-              prop: "deviceName",
-              align: "left",
-              width: "",
-              "show-overflow-tooltip": false,
-              tempType: "span"
-            },
-            {
-              style: "",
-              label: "设备Key",
-              type: "",
-              prop: "deviceKey",
-              align: "left",
-              width: "",
-              "show-overflow-tooltip": false,
-              tempType: "span"
-            },
-            {
-              style: "",
-              label: "创建时间",
-              type: "time",
-              prop: "createTime",
-              align: "center",
-              width: "160",
-              "show-overflow-tooltip": false,
-              tempType: "span"
-            }
-          ],
-          tableList: {
-            type: Array
-          }
-        },
-        tableList: []
-      };
-      this.selectTableShow = true;
     },
-    // 开启 电价合同选择的 弹窗
+    handleDeviceDialogEvent(e) {
-    inputFocusContract() {
+      this.form.projectDevice = e.deviceId;
-      this.selectResult = {};
+      this.form.projectDeviceName = e.deviceName;
-      this.tableSelectOption = {
+      this.$forceUpdate();
-        otherOption: {
-          tableType: "model"
-        },
-        queryOpt: {
-          disable: false,
-          labelWidth: "68px",
-          params: {
-            contractName: "",
-            modelCode: ""
-          },
-          page: {
-            pageSize: 10,
-            pageNum: 1,
-            total: 0
-          },
-          inline: true,
-          queryChilds: [
-            {
-              style: "",
-              placeholder: "合同名称",
-              clearable: true,
-              label: "合同名称",
-              type: "input",
-              key: "contractName",
-              size: "small",
-              value: ""
-            }
-          ]
-        },
-        tableOpt: {
-          loading: false,
-          rowKey: "deviceId",
-          selection: false,
-          maxHeight: "45vh",
-          childs: [
-            {
-              style: "",
-              label: "合同名称",
-              type: "",
-              prop: "contractName",
-              align: "left",
-              width: "",
-              "show-overflow-tooltip": false,
-              tempType: "span"
-            },
-            {
-              style: "",
-              label: "计价类型",
-              type: "",
-              prop: "contractType",
-              align: "left",
-              width: "",
-              "show-overflow-tooltip": false,
-              tempType: "strType",
-              option: {
-                PEAK_VALLEY: "峰谷时段计价",
-                LADDER: "阶梯计价"
-              }
-            },
-            {
-              style: "",
-              label: "状态",
-              type: "",
-              prop: "status",
-              align: "left",
-              width: "",
-              "show-overflow-tooltip": false,
-              tempType: "text1"
-            }
-          ],
-          tableList: {
-            type: Array
-          }
-        },
-        tableList: []
-      };
-      this.selectTableShow = true;
-    },
-    // 查询回调
-    childGetList(data) {
-      if (data.otherOption.tableType === "device") {
-        this.deviceChildList(data);
-      } else if (data.otherOption.tableType === "model") {
-        this.getListContract(data);
-      }
-    },
-    // 电价合同查询
-    getListContract(data) {
-      listContract(Object.assign(data.page, data.param, { selected: 1 })).then(
-        response => {
-          this.tableSelectOption.tableList = response.rows;
-          this.tableSelectOption.queryOpt.page.total = Number(response.total);
-        }
-      );
-    },
-    deviceChildList(data) {
-      listDevice(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) {
-      if (data.type === "dblclick") {
-        if (data.otherOption.tableType === "device") {
-          this.form.projectDevice = data.value.deviceId;
-          this.form.projectDeviceName = data.value.deviceName;
-        } else if (data.otherOption.tableType === "model") {
-          this.form.contractId = data.value.contractId;
-          this.form.contractName = data.value.contractName;
-        }
-        this.selectTableShow = false;
-      } else if (data.type === "click") {
-        this.selectResult = {};
-        if (data.otherOption.tableType === "device") {
-          this.selectResult.projectDevice = data.value.deviceId;
-          this.selectResult.projectDeviceName = data.value.deviceName;
-        } else if (data.otherOption.tableType === "model") {
-          this.selectResult.contractId = data.value.contractId;
-          this.selectResult.contractName = data.value.contractName;
-        }
-        this.selectResult.tableType = data.otherOption.tableType;
-      }
-    },
-    // 点击确定按钮
-    resultClick() {
-      if (this.selectResult.tableType === "device") {
-        this.form.projectDevice = this.selectResult.projectDevice;
-        this.form.projectDeviceName = this.selectResult.projectDeviceName;
-      } else if (this.selectResult.tableType === "model") {
-        this.form.contractId = this.selectResult.contractId;
-        this.form.contractName = this.selectResult.contractName;
-      }
-      this.selectTableShow = false;
     },
     sortChange(column) {
       const sort = {
         isAsc: column.order === "descending" ? "desc" : "asc",
-        orderByColumn: column.prop
+        orderByColumn: column.prop,
       };
       this.queryParams = Object.assign(this.queryParams, sort);
       this.handleQuery();
@@ -677,12 +671,12 @@ export default {
     },
     handleDetails(row) {
       this.sourceId = row.projectId;
-      this.componectVal = "DetailsWrapNew";
+      this.componectVal = "EDetailsWrap";
     },
     // 跳转详情页
     linkToTable() {
-      if (this.$route.query['projectId']) {
+      if (this.$route.query["projectId"]) {
-        this.$router.push('/project/project')
+        this.$router.push("/project/project");
       }
       this.componectVal = "";
     },
@@ -692,12 +686,12 @@ export default {
     },
     /** 查询行政区划下拉树结构 */
     getTreeselect() {
-      listRegionalism().then(response => {
+      listRegionalism().then((response) => {
         this.regionalismOption = [];
         const data = {
           regionalismId: 0,
           regionalismName: "中国",
-          children: []
+          children: [],
         };
         data.children = this.handleTree(
           response.data,
@@ -715,13 +709,13 @@ export default {
       return {
         id: node.regionalismId,
         label: node.regionalismName,
-        children: node.children
+        children: node.children,
       };
     },
     regionalismChange(val) {
       this.mapCenter = {
         lng: val.stationLng,
-        lat: val.stationLat
+        lat: val.stationLat,
       };
       this.form.projectLng = val.stationLng;
       this.form.projectLat = val.stationLat;
@@ -751,7 +745,7 @@ export default {
       } else {
         this.mapCenter = {
           lng: 119.459889,
-          lat: 25.98974
+          lat: 25.98974,
         };
         this.mapForm.lng = 119.459889;
         this.mapForm.lat = 25.98974;
@@ -774,7 +768,7 @@ export default {
         gjzCode(this.form.projectAddress, this, {
           form: "form",
           lat: "shopLat",
-          lng: "shopLng"
+          lng: "shopLng",
         });
       }
     },
@@ -782,7 +776,7 @@ export default {
     /** 查询项目列表 */
     getList() {
       this.loading = true;
-      listProject(this.queryParams).then(response => {
+      listProject(this.queryParams).then((response) => {
         this.projectList = response.rows;
         this.total = response.total;
         this.loading = false;
@@ -802,7 +796,7 @@ export default {
         projectAddress: null,
         projectLng: null,
         projectLat: null,
-        projectDevice: '',
+        projectDevice: "",
       };
       this.resetForm("form");
     },
@@ -818,7 +812,7 @@ export default {
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.projectId);
+      this.ids = selection.map((item) => item.projectId);
       this.single = selection.length !== 1;
       this.multiple = !selection.length;
     },
@@ -832,7 +826,7 @@ export default {
     handleUpdate(row) {
       this.reset();
       const projectId = row.projectId || this.ids;
-      getProject(projectId).then(response => {
+      getProject(projectId).then((response) => {
         this.form = response.data;
         this.open = true;
         this.title = "修改项目";
@@ -840,16 +834,16 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate(valid => {
+      this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.projectId != null) {
-            updateProject(this.form).then(response => {
+            updateProject(this.form).then((response) => {
               this.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            addProject(this.form).then(response => {
+            addProject(this.form).then((response) => {
               this.msgSuccess("新增成功");
               this.open = false;
               this.getList();
@@ -864,9 +858,9 @@ export default {
       this.$confirm("是否删除该选项?", "警告", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
-        type: "warning"
+        type: "warning",
       })
-        .then(function() {
+        .then(function () {
           return delProject(projectIds);
         })
         .then(() => {
@@ -880,16 +874,16 @@ export default {
       this.$confirm("是否确认导出所有项目数据项?", "警告", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
-        type: "warning"
+        type: "warning",
       })
-        .then(function() {
+        .then(function () {
           return exportProject(queryParams);
         })
-        .then(response => {
+        .then((response) => {
           this.download(response.msg);
         });
-    }
+    },
-  }
+  },
 };
 </script>
 <style lang="scss">

src/views/iot/statistics/chain/index.vue

@@ -0,0 +1,311 @@
+<template>
+  <div class="app-container el-compared-container">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="项目名称" prop="projectName">
+        <e-dialog-table-input
+          :table="selectTable"
+          :refurbishFun="listProject"
+          showFileName="projectName"
+          fileName="projectId,projectName"
+          v-model="queryParams.projectName"
+          :preference="true"
+          title="项目"
+          psize="small"
+          @change="handleDialogEvent"
+        />
+      </el-form-item>
+
+      <el-form-item label="时间" prop="time">
+        <el-date-picker v-model="time" type="month" placeholder="选择年">
+        </el-date-picker>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
+      </el-form-item>
+    </el-form>
+
+    <div class="main-echarts">
+      <e-echarts-bar
+        ref="echartsLineTrend"
+        :styles="echartsOption.styles"
+        :colorList="echartsOption.colorList"
+        :eId="echartsOption.eId"
+        :option="resultOption"
+      ></e-echarts-bar>
+    </div>
+
+    <div class="main-table">
+      <el-table v-loading="loading" :data="tableList">
+        <el-table-column
+          type="index"
+          label="序号"
+          align="center"
+          :index="
+            (val) => {
+              return val + 1 + (queryParams.pageNum - 1) * queryParams.pageSize;
+            }
+          "
+          width="80px"
+        ></el-table-column>
+        <el-table-column label="项目名称" align="left" prop="projectName" />
+        <el-table-column label="日期" align="left" prop="projectName" />
+        <el-table-column label="本期用量" align="center" prop="industry" />
+        <el-table-column label="同期用量" align="center" prop="electric">
+          <template slot-scope="scope">
+            <span class="lay-table-textarea">{{
+              Number(scope.row.electric).toFixed(2) || "--"
+            }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="增长值" align="center" prop="coal">
+          <template slot-scope="scope">
+            <span class="lay-table-textarea">{{
+              Number(scope.row.coal).toFixed(2) || "--"
+            }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="增长率" align="center" prop="coal">
+          <template slot-scope="scope">
+            <span class="lay-table-textarea">{{
+              Number(scope.row.coal).toFixed(2) || "--"
+            }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import { listProject } from "@/api/iot/project";
+import EDialogTableInput from "@/components/EDialogTableInput";
+import EEchartsBar from "@/components/Echarts/EEchartsBar";
+const selectTable = {
+  otherOption: {
+    tableType: "project",
+  },
+  queryOption: {
+    disable: false,
+    labelWidth: "68px",
+    params: {
+      projectName: "",
+    },
+    inline: true,
+    queryChilds: [
+      {
+        style: "",
+        placeholder: "项目名称",
+        clearable: true,
+        label: "项目名称",
+        type: "input",
+        key: "projectName",
+        size: "small",
+        value: "",
+      },
+    ],
+  },
+  tableOption: {
+    loading: false,
+    rowKey: "projectId",
+    selection: false,
+    maxHeight: "45vh",
+    childs: [
+      {
+        style: "",
+        label: "项目名称",
+        type: "",
+        prop: "projectName",
+        align: "left",
+        width: "200",
+        "show-overflow-tooltip": false,
+        tempType: "span",
+      },
+      {
+        style: "",
+        label: "行政区划",
+        type: "",
+        prop: "regionalismFullName",
+        align: "left",
+        width: "200",
+        "show-overflow-tooltip": false,
+        tempType: "span",
+      },
+      {
+        style: "",
+        label: "项目地址",
+        type: "",
+        prop: "projectAddress",
+        align: "left",
+        width: "",
+        "show-overflow-tooltip": false,
+        tempType: "span",
+      },
+      {
+        style: "",
+        label: "创建时间",
+        type: "",
+        prop: "createTime",
+        align: "left",
+        width: "160",
+        "show-overflow-tooltip": false,
+        tempType: "span",
+      },
+    ],
+  },
+};
+
+export default {
+  name: "StatisticsCompared",
+  components: {
+    EDialogTableInput,
+    EEchartsBar,
+  },
+  data() {
+    return {
+      selectTable,
+      total: 0,
+      queryParams: {
+        projectName: "",
+        pageNum: 1,
+        pageSize: 10,
+      },
+      time: "",
+      resultOption: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "2%",
+          bottom: "2%",
+          top: '2%',
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+            axisTick: {
+              alignWithLabel: true,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "Kwh",
+            position: "left",
+            alignTicks: true,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#1890FF",
+              },
+            },
+            axisLabel: {
+              formatter: "{value}",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "去年",
+            type: "bar",
+            barWidth: "30%",
+            data: [
+              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
+              3.3,
+            ],
+          },
+          {
+            name: "同期",
+            type: "bar",
+            barWidth: "30%",
+            data: [
+              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
+              2.3,
+            ],
+          },
+        ],
+      },
+      echartsOption: {
+        styles: "width: 100%; height: 100%;",
+        colorList: ["#1890FF", "#EE6666", "#FFCC00"],
+        eId: "statisticsComparedEchartsBar",
+      },
+      loading: false,
+      tableList: [],
+    };
+  },
+  created() {
+    this.time = new Date();
+    this.getList();
+  },
+  methods: {
+    listProject,
+    updateEcharts() {
+      if (this.$refs.echartsLineTrend) {
+        this.$refs.echartsLineTrend.updateEchart();
+      }
+    },
+    handleDialogEvent(e) {
+      this.handleQuery();
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.time = this.parseTime(new Date(), "{y}:01:01 00:00:00");
+      this.handleQuery();
+    },
+    getList() {
+      // console.log(this.time)
+      // console.log('compared-getList:', Object.assign(this.queryParams, {
+      //   time: this.parseTime(this.time, '{y}:01:01 00:00:00')
+      // }))
+    },
+  },
+};
+</script>
+<style lang="scss">
+.el-compared-container {
+  .main-echarts {
+    height: 350px;
+    width: 100%;
+    margin: 10px 0;
+  }
+  .main-table {
+    width: 100%;
+    margin-top: 20px;
+  }
+}
+</style>

src/views/iot/statistics/compared/index.vue

@@ -0,0 +1,312 @@
+<template>
+  <div class="app-container el-compared-container">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="项目名称" prop="projectName">
+        <e-dialog-table-input
+          :table="selectTable"
+          :refurbishFun="listProject"
+          type="input"
+          showFileName="projectName"
+          fileName="projectId,projectName"
+          v-model="queryParams.projectName"
+          :preference="true"
+          title="项目"
+          psize="small"
+          @change="handleDialogEvent"
+        />
+      </el-form-item>
+
+      <el-form-item label="时间" prop="time">
+        <el-date-picker v-model="time" type="year" placeholder="选择年">
+        </el-date-picker>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
+      </el-form-item>
+    </el-form>
+
+    <div class="main-echarts">
+      <e-echarts-bar
+        ref="echartsLineTrend"
+        :styles="echartsOption.styles"
+        :colorList="echartsOption.colorList"
+        :eId="echartsOption.eId"
+        :option="resultOption"
+      ></e-echarts-bar>
+    </div>
+
+    <div class="main-table">
+      <el-table v-loading="loading" :data="tableList">
+        <el-table-column
+          type="index"
+          label="序号"
+          align="center"
+          :index="
+            (val) => {
+              return val + 1 + (queryParams.pageNum - 1) * queryParams.pageSize;
+            }
+          "
+          width="80px"
+        ></el-table-column>
+        <el-table-column label="项目名称" align="left" prop="projectName" />
+        <el-table-column label="日期" align="left" prop="projectName" />
+        <el-table-column label="本期用量" align="center" prop="industry" />
+        <el-table-column label="同期用量" align="center" prop="electric">
+          <template slot-scope="scope">
+            <span class="lay-table-textarea">{{
+              Number(scope.row.electric).toFixed(2) || "--"
+            }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="增长值" align="center" prop="coal">
+          <template slot-scope="scope">
+            <span class="lay-table-textarea">{{
+              Number(scope.row.coal).toFixed(2) || "--"
+            }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="增长率" align="center" prop="coal">
+          <template slot-scope="scope">
+            <span class="lay-table-textarea">{{
+              Number(scope.row.coal).toFixed(2) || "--"
+            }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import { listProject } from "@/api/iot/project";
+import EDialogTableInput from "@/components/EDialogTableInput";
+import EEchartsBar from "@/components/Echarts/EEchartsBar";
+const selectTable = {
+  otherOption: {
+    tableType: "project",
+  },
+  queryOption: {
+    disable: false,
+    labelWidth: "68px",
+    params: {
+      projectName: "",
+    },
+    inline: true,
+    queryChilds: [
+      {
+        style: "",
+        placeholder: "项目名称",
+        clearable: true,
+        label: "项目名称",
+        type: "input",
+        key: "projectName",
+        size: "small",
+        value: "",
+      },
+    ],
+  },
+  tableOption: {
+    loading: false,
+    rowKey: "projectId",
+    selection: false,
+    maxHeight: "45vh",
+    childs: [
+      {
+        style: "",
+        label: "项目名称",
+        type: "",
+        prop: "projectName",
+        align: "left",
+        width: "200",
+        "show-overflow-tooltip": false,
+        tempType: "span",
+      },
+      {
+        style: "",
+        label: "行政区划",
+        type: "",
+        prop: "regionalismFullName",
+        align: "left",
+        width: "200",
+        "show-overflow-tooltip": false,
+        tempType: "span",
+      },
+      {
+        style: "",
+        label: "项目地址",
+        type: "",
+        prop: "projectAddress",
+        align: "left",
+        width: "",
+        "show-overflow-tooltip": false,
+        tempType: "span",
+      },
+      {
+        style: "",
+        label: "创建时间",
+        type: "",
+        prop: "createTime",
+        align: "left",
+        width: "160",
+        "show-overflow-tooltip": false,
+        tempType: "span",
+      },
+    ],
+  },
+};
+
+export default {
+  name: "StatisticsCompared",
+  components: {
+    EDialogTableInput,
+    EEchartsBar,
+  },
+  data() {
+    return {
+      selectTable,
+      total: 0,
+      queryParams: {
+        projectName: "",
+        pageNum: 1,
+        pageSize: 10,
+      },
+      time: "",
+      resultOption: {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "2%",
+          bottom: "2%",
+          top: '2%',
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+            axisTick: {
+              alignWithLabel: true,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "Kwh",
+            position: "left",
+            alignTicks: true,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#1890FF",
+              },
+            },
+            axisLabel: {
+              formatter: "{value}",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "去年",
+            type: "bar",
+            barWidth: "30%",
+            data: [
+              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
+              3.3,
+            ],
+          },
+          {
+            name: "同期",
+            type: "bar",
+            barWidth: "30%",
+            data: [
+              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
+              2.3,
+            ],
+          },
+        ],
+      },
+      echartsOption: {
+        styles: "width: 100%; height: 100%;",
+        colorList: ["#1890FF", "#EE6666", "#FFCC00"],
+        eId: "statisticsComparedEchartsBar",
+      },
+      loading: false,
+      tableList: [],
+    };
+  },
+  created() {
+    this.time = new Date();
+    this.getList();
+  },
+  methods: {
+    listProject,
+    updateEcharts() {
+      if (this.$refs.echartsLineTrend) {
+        this.$refs.echartsLineTrend.updateEchart();
+      }
+    },
+    handleDialogEvent(e) {
+      this.handleQuery();
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.time = this.parseTime(new Date(), "{y}:01:01 00:00:00");
+      this.handleQuery();
+    },
+    getList() {
+      console.log(this.queryParams)
+      // console.log('compared-getList:', Object.assign(this.queryParams, {
+      //   time: this.parseTime(this.time, '{y}:01:01 00:00:00')
+      // }))
+    },
+  },
+};
+</script>
+<style lang="scss">
+.el-compared-container {
+  .main-echarts {
+    height: 350px;
+    width: 100%;
+    margin: 10px 0;
+  }
+  .main-table {
+    width: 100%;
+    margin-top: 20px;
+  }
+}
+</style>

src/views/iot/statistics/energy/index.vue

@@ -0,0 +1,153 @@
+<template>
+<div class="app-container">
+    <el-form
+        :model="queryParams"
+        ref="queryForm"
+        :inline="true"
+        label-width="68px"
+      >
+        <el-form-item label="项目名称" prop="projectName">
+          <el-input
+            v-model="queryParams.projectName"
+            placeholder="请输入项目名称"
+            clearable
+            size="small"
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+
+				<el-form-item label="时间" prop="time">
+					<el-date-picker
+						v-model="time"
+						size="small"
+						type="datetimerange"
+						range-separator="至"
+						class="form-input"
+						start-placeholder="开始时间"
+						end-placeholder="结束时间"
+						@change="timeChange"
+						placeholder="选择时间范围"
+					></el-date-picker>
+				</el-form-item>
+        
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+
+			<el-table
+        v-loading="loading"
+        :data="tableList"
+      >
+			<!--  :default-sort="{prop: 'createTime', order: 'descending'}"
+        @sort-change="sortChange" -->
+        <el-table-column
+          type="index"
+          label="序号"
+          align="center"
+          :index="(val) => {
+						return ( val + 1 + (queryParams.pageNum - 1) * queryParams.pageSize )
+					}"
+          width="80px"
+        ></el-table-column>
+				<el-table-column label="项目ID" align="left" prop="projectName" />
+        <el-table-column label="项目名称" align="left" prop="projectName" />
+        <el-table-column label="电用量 (kwh)" align="center" prop="electric" >
+          <template slot-scope="scope">
+            <span class="lay-table-textarea">{{  Number(scope.row.electric).toFixed(2) || '--' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="水用量 (吨)" align="center" prop="electric" >
+          <template slot-scope="scope">
+            <span class="lay-table-textarea">{{  Number(scope.row.electric).toFixed(2) || '--' }}</span>
+          </template>
+        </el-table-column>
+         <el-table-column label="气用量 (m³)" align="center" prop="electric" >
+          <template slot-scope="scope">
+            <span class="lay-table-textarea">{{  Number(scope.row.electric).toFixed(2) || '--' }}</span>
+          </template>
+        </el-table-column>
+				<el-table-column label="碳排放 (吨)" align="center" prop="coal" >
+          <template slot-scope="scope">
+            <span class="lay-table-textarea">{{ Number(scope.row.coal).toFixed(2) || '--' }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+
+			 <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+</div>
+</template>
+<script>
+import { projectEnergy } from '@/api/iot/staistics'
+export default {
+	name: 'EStatisticsEnergy',
+	data() {
+		return {
+			total: 0,
+			queryParams: {
+				projectName: '',
+				pageNum: 1,
+				pageSize: 10,
+				ed: '',
+				sd: ''
+			},
+			time: [],
+			loading: false,
+			tableList: []
+
+		}
+	},
+	created() {
+		this.getList();
+	},
+	methods: {
+		timeChange(val) {
+      if (val) {
+        this.queryParams.sd = this.parseTime(val[0], '{y}:{m}:{d} {h}:{i}:{s}');
+				this.queryParams.ed = this.parseTime(val[1], '{y}:{m}:{d} {h}:{i}:{s}');
+      } else {
+        this.queryParams.sd = "";
+        this.queryParams.ed = "";
+      }
+			this.handleQuery();
+    },
+		sortChange(column) {
+      const sort = {
+        isAsc: column.order === "descending" ? "desc" : "asc",
+        orderByColumn: column.prop
+      };
+      this.queryParams = Object.assign(this.queryParams, sort);
+      this.handleQuery();
+    },
+
+		/** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+			this.queryParams.sd = "";
+      this.queryParams.ed = "";
+			this.time = [];
+      this.handleQuery();
+    },
+		getList() {
+			this.loading = true;
+			projectEnergy(Object.assign(this.queryParams)).then(res => {
+				this.tableList = res.rows;
+				this.total = res.total;
+				this.loading = false;
+			})
+		},
+	},
+}
+</script>

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

@@ -12,6 +12,7 @@
           ref="querySelectInput"
           @EventResult="eventResult($event)"
         ></select-input>
+
       </el-form-item>
       <el-form-item label="摄像头名称" prop="videoName">
         <el-input
@@ -31,22 +32,6 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <!-- <el-form-item label="状态" prop="videoStatus">
-        <el-select
-          v-model="queryParams.videoStatus"
-          placeholder="请选择站点状态"
-          size="mini"
-          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"
@@ -117,7 +102,12 @@
         width="200"
         prop="deviceName"
       />
-      <el-table-column label="站点名称" align="left" width="210" prop="siteName" />
+      <el-table-column
+        label="站点名称"
+        align="left"
+        width="210"
+        prop="siteName"
+      />
 
       <el-table-column label="站点通道" align="left" width="200" prop="devId" />
       <el-table-column
@@ -126,13 +116,11 @@
         width="200"
         prop="devChannel"
       />
-      <el-table-column
+      <el-table-column label="摄像头地址" prop="videoAddress" align="left">
-        label="摄像头地址"
-        prop="videoAddress"
-        align="left"
-      >
         <template slot-scope="scope">
-          <span class="lay-table-textarea">{{ scope.row.videoAddress || '--'}}</span>
+          <span class="lay-table-textarea">{{
+            scope.row.videoAddress || "--"
+          }}</span>
         </template>
       </el-table-column>
 
@@ -222,26 +210,32 @@
         <el-row :gutter="20">
           <el-col :span="12">
             <el-form-item label="摄像头名称" prop="videoName">
-              <el-input
+              <e-dialog-table-input
                 :disabled="tempType === 'distri'"
+                :table="selectDevieTable"
+                :refurbishFun="unbindVideoDev"
+                showFileName="deviceName"
+                fileName="deviceKey,deviceName"
                 v-model="form.videoName"
-                type="text"
+                title="摄像头设备"
-                maxlength="30"
+                psize="small"
-                placeholder="请输入摄像头名称"
+                @change="handleDeviceDialogEvent"
-                suffix-icon="el-icon-arrow-down"
-                @focus="openTableSelectDeviceDialog()"
               />
             </el-form-item>
           </el-col>
 
           <el-col :span="12">
             <el-form-item label="站点名称" prop="siteName">
-              <el-input
+              <e-dialog-table-input
-                v-model="form.siteName"
                 :disabled="tempType === 'distri'"
-                placeholder="点击选择站点"
+                :table="selectSiteTable"
-                suffix-icon="el-icon-arrow-down"
+                :refurbishFun="listSite"
-                @focus="openTableSelectDialog()"
+                showFileName="siteName"
+                fileName="recordId,devId,siteLng,siteLat,siteAddress,siteName"
+                v-model="form.siteName"
+                title="站点"
+                psize="small"
+                @change="handleSiteDialogEvent"
               />
             </el-form-item>
           </el-col>
@@ -292,23 +286,6 @@
               <el-input v-model="form.sortNum" placeholder="请输入排序" />
             </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-row>
 
         <el-row :gutter="20">
@@ -424,47 +401,6 @@
             </el-form-item>
           </el-col>
         </el-row>
-
-        <!-- <el-row :gutter="20">
-          <el-col :span="24">
-            <el-form-item label="分配角色">
-              <el-select
-                style="width: 100%"
-                v-model="roleIds"
-                multiple
-                placeholder="请选择"
-              >
-                <el-option
-                  v-for="item in roleOptions"
-                  :key="item.roleId"
-                  :label="item.roleName"
-                  :value="item.roleId"
-                ></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-        </el-row> -->
-
-        <!-- <el-row :gutter="20">
-          <el-col :span="24">
-            <el-form-item label="选择用户" prop="videoLat">
-              <el-select
-                v-model="form.tenantId"
-                style="width: 100%"
-                filterable
-                placeholder="请选择"
-              >
-                <el-option
-                  v-for="item in tenantList"
-                  :key="item.tenantId"
-                  :label="item.tenantName"
-                  :value="item.tenantId"
-                >
-                </el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-        </el-row> -->
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" size="mini" @click="submitForm"
@@ -474,40 +410,6 @@
       </div>
     </el-dialog>
 
-    <el-dialog
-      :title="selectDialogTitle"
-      :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>
-
     <!-- 摄像头导入对话框 -->
     <el-dialog
       :title="upload.title"
@@ -557,19 +459,23 @@
 </template>
 
 <script>
-import { listInfo, getInfo, delInfo, addInfo, updateInfo, unbindVideoDev } from "@/api/video/camera";
+import {
+  listInfo,
+  getInfo,
+  delInfo,
+  addInfo,
+  updateInfo,
+  unbindVideoDev,
+} from "@/api/video/camera";
 import { getUser } from "@/api/system/user";
 import { listSite } from "@/api/iot/site";
 import { initMap, gjzCode } from "@/utils/latlngFromAddress";
 import { listTenant } from "@/api/system/tenant";
-
-import SelectTableWrap from "@/components/SelectTable/index";
 import ShopLocation from "@/components/Amap/components/shopLocation/index";
 import SelectInput from "../profile/SelectInput/index";
+
+import EDialogTableInput from "@/components/EDialogTableInput";
 import { getToken } from "@/utils/auth";
-// import {
-//   listDevice,
-// } from "@/api/iot/device";
 
 const joinTypeOpt = {
   CAMERA: "摄像头直连",
@@ -580,17 +486,179 @@ const serverTypeOpt = {
   QI_NIU: "七牛",
 };
 
+const selectDevieTable = {
+  otherOption: {
+    tableType: "device",
+  },
+  queryOption: {
+    disable: false,
+    labelWidth: "68px",
+    params: {
+      deviceName: "",
+      deviceType: "VIDEO_MONITOR",
+    },
+    inline: true,
+    queryChilds: [
+      {
+        style: "",
+        placeholder: "设备名称",
+        clearable: true,
+        label: "设备名称",
+        type: "input",
+        key: "deviceName",
+        size: "small",
+        value: "",
+      },
+    ],
+  },
+  tableOption: {
+    loading: false,
+    rowKey: "recordId",
+    selection: false,
+    maxHeight: "45vh",
+    childs: [
+      {
+        style: "",
+        label: "设备名称",
+        type: "",
+        prop: "deviceName",
+        align: "center",
+        width: "200",
+        "show-overflow-tooltip": false,
+        tempType: "span",
+      },
+      {
+        style: "",
+        label: "站点通道",
+        type: "",
+        prop: "deviceId",
+        align: "center",
+        width: "",
+        "show-overflow-tooltip": false,
+        tempType: "tagStatus",
+      },
+      {
+        style: "",
+        label: "设备Key",
+        type: "",
+        prop: "deviceKey",
+        align: "left",
+        width: "200",
+        "show-overflow-tooltip": false,
+        tempType: "span",
+      },
+      {
+        style: "",
+        label: "设备类型",
+        type: "",
+        prop: "deviceTypeName",
+        align: "left",
+        width: "120",
+        "show-overflow-tooltip": false,
+        tempType: "span",
+      },
+      {
+        style: "",
+        label: "创建时间",
+        type: "",
+        prop: "createTime",
+        align: "center",
+        width: "",
+        "show-overflow-tooltip": false,
+        tempType: "span",
+      },
+    ],
+  },
+};
+
+const selectSiteTable = {
+        otherOption: {
+          tableType: "site",
+        },
+        queryOption: {
+          disable: false,
+          labelWidth: "68px",
+          params: {
+            siteName: "",
+            siteStatus: "0",
+          },
+          inline: true,
+          queryChilds: [
+            {
+              style: "",
+              placeholder: "站点名称",
+              clearable: true,
+              label: "站点名称",
+              type: "input",
+              key: "siteName",
+              size: "small",
+              value: "",
+            },
+          ],
+        },
+        tableOption: {
+          loading: false,
+          rowKey: "recordId",
+          selection: false,
+          maxHeight: "45vh",
+          childs: [
+            {
+              style: "",
+              label: "站点名称",
+              type: "",
+              prop: "siteName",
+              align: "left",
+              width: "",
+              "show-overflow-tooltip": false,
+              tempType: "span",
+            },
+            {
+              style: "",
+              label: "项目名称",
+              type: "",
+              prop: "projectName",
+              align: "left",
+              width: "",
+              "show-overflow-tooltip": false,
+              tempType: "span",
+            },
+            {
+              style: "",
+              label: "状态",
+              type: "",
+              prop: "siteStatus",
+              align: "center",
+              width: "",
+              "show-overflow-tooltip": false,
+              tempType: "tagStatus",
+            },
+            {
+              style: "",
+              label: "创建时间",
+              type: "",
+              prop: "createTime",
+              align: "center",
+              width: "",
+              "show-overflow-tooltip": false,
+              tempType: "span",
+            },
+          ],
+        },
+      };
+
 export default {
   name: "Info",
   components: {
-    SelectTableWrap,
     ShopLocation,
     SelectInput,
+    EDialogTableInput,
   },
   data() {
     return {
       joinTypeOpt,
       serverTypeOpt,
+      selectDevieTable,
+      selectSiteTable,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -669,15 +737,23 @@ export default {
             trigger: "blur",
           },
         ],
-        siteName: [{ required: true, message: "站点不能为空, 请选择", trigger: "blur" }],
+        siteName: [
-        videoProtocol: [{ required: true, message: "接入协议不能为空", trigger: "blur" }],
+          { required: true, message: "站点不能为空, 请选择", trigger: "blur" },
-        videoLng: [{ required: true, message: "经度不能为空", trigger: "blur" }],
+        ],
-        videoLat: [{ required: true, message: "纬度不能为空", trigger: "blur" }],
+        videoProtocol: [
+          { required: true, message: "接入协议不能为空", trigger: "blur" },
+        ],
+        videoLng: [
+          { required: true, message: "经度不能为空", trigger: "blur" },
+        ],
+        videoLat: [
+          { required: true, message: "纬度不能为空", trigger: "blur" },
+        ],
         // serverType: [{ required: true, message: "服务类型不能为空", trigger: "blur" }],
-        joinType: [{ required: true, message: "接入方式不能为空", trigger: "blur" }],
+        joinType: [
+          { required: true, message: "接入方式不能为空", trigger: "blur" },
+        ],
       },
-      selectTableShow: false,
-      tableSelectOption: {},
       selectResult: {},
       // 地图 弹窗
       visible: false,
@@ -700,17 +776,28 @@ export default {
           dictValue: "GUN_MACHINE",
         },
       ],
-      // 角色列表
-      roleOptions: [],
       roleIds: [],
-      selectDialogTitle: ''
+      selectDialogTitle: "",
     };
   },
   created() {
     this.getList();
-    this.getRole();
   },
   methods: {
+    unbindVideoDev,
+    listSite,
+    handleDeviceDialogEvent(e) {
+      this.form.videoName = e.deviceName;
+      this.form.devChannel = e.deviceKey;
+    },
+    handleSiteDialogEvent(e) {
+      this.form.siteId = e.recordId;
+      this.form.devId = e.devId;
+      this.form.videoLng = e.siteLng;
+      this.form.videoLat = e.siteLat;
+      this.form.videoAddress = e.siteAddress;
+      this.form.siteName = e.siteName;
+    },
     eventResult(...data) {
       this.queryParams.siteId = data[0].val;
       this.getList();
@@ -734,7 +821,7 @@ export default {
       this.mapForm.lng = data.lng;
       this.mapForm.lat = data.lat;
       this.mapForm.address = data.address;
-      console.log('map-event--', data)
+      console.log("map-event--", data);
       this.$forceUpdate();
     },
     // 使用地图方式定位
@@ -777,269 +864,6 @@ export default {
         });
       }
     },
-    /**
-     * 选择摄像头设备
-     */
-    openTableSelectDeviceDialog() {
-      this.selectResult = {};
-      this.selectDialogTitle = '选择设备'
-      this.tableSelectOption = {
-        otherOption: {
-          tableType: "device",
-        },
-        queryOpt: {
-          disable: false,
-          labelWidth: "68px",
-          params: {
-            deviceName: "",
-            deviceType: "VIDEO_MONITOR",
-          },
-          page: {
-            pageSize: 10,
-            pageNum: 1,
-            total: 0,
-          },
-          inline: true,
-          queryChilds: [
-            {
-              style: "",
-              placeholder: "设备名称",
-              clearable: true,
-              label: "设备名称",
-              type: "input",
-              key: "deviceName",
-              size: "small",
-              value: "",
-            },
-          ],
-        },
-        tableOpt: {
-          loading: false,
-          rowKey: "recordId",
-          selection: false,
-          maxHeight: "45vh",
-          childs: [
-            {
-              style: "",
-              label: "设备名称",
-              type: "",
-              prop: "deviceName",
-              align: "center",
-              width: "200",
-              "show-overflow-tooltip": false,
-              tempType: "span",
-            },
-            {
-              style: "",
-              label: "站点通道",
-              type: "",
-              prop: "deviceId",
-              align: "center",
-              width: "",
-              "show-overflow-tooltip": false,
-              tempType: "tagStatus",
-            },
-            {
-              style: "",
-              label: "设备Key",
-              type: "",
-              prop: "deviceKey",
-              align: "left",
-              width: "200",
-              "show-overflow-tooltip": false,
-              tempType: "span",
-            },
-            {
-              style: "",
-              label: "设备类型",
-              type: "",
-              prop: "deviceTypeName",
-              align: "left",
-              width: "120",
-              "show-overflow-tooltip": false,
-              tempType: "span",
-            },
-            {
-              style: "",
-              label: "创建时间",
-              type: "",
-              prop: "createTime",
-              align: "center",
-              width: "",
-              "show-overflow-tooltip": false,
-              tempType: "span",
-            },
-          ],
-          tableList: {
-            type: Array,
-          },
-        },
-        tableList: [],
-      };
-      this.selectTableShow = true;
-    },
-    // 开启 筛选表格
-    openTableSelectDialog() {
-      this.selectResult = {};
-      this.selectDialogTitle = '选择站点'
-      this.tableSelectOption = {
-        otherOption: {
-          tableType: "site",
-        },
-        queryOpt: {
-          disable: false,
-          labelWidth: "68px",
-          params: {
-            siteName: "",
-            siteStatus: "0",
-          },
-          page: {
-            pageSize: 10,
-            pageNum: 1,
-            total: 0,
-          },
-          inline: true,
-          queryChilds: [
-            {
-              style: "",
-              placeholder: "站点名称",
-              clearable: true,
-              label: "站点名称",
-              type: "input",
-              key: "siteName",
-              size: "small",
-              value: "",
-            },
-          ],
-        },
-        tableOpt: {
-          loading: false,
-          rowKey: "recordId",
-          selection: false,
-          maxHeight: "45vh",
-          childs: [
-            {
-              style: "",
-              label: "站点名称",
-              type: "",
-              prop: "siteName",
-              align: "left",
-              width: "",
-              "show-overflow-tooltip": false,
-              tempType: "span",
-            },
-            {
-              style: "",
-              label: "项目名称",
-              type: "",
-              prop: "projectName",
-              align: "left",
-              width: "",
-              "show-overflow-tooltip": false,
-              tempType: "span",
-            },
-            {
-              style: "",
-              label: "状态",
-              type: "",
-              prop: "siteStatus",
-              align: "center",
-              width: "",
-              "show-overflow-tooltip": false,
-              tempType: "tagStatus",
-            },
-            {
-              style: "",
-              label: "创建时间",
-              type: "",
-              prop: "createTime",
-              align: "center",
-              width: "",
-              "show-overflow-tooltip": false,
-              tempType: "span",
-            },
-          ],
-          tableList: {
-            type: Array,
-          },
-        },
-        tableList: [],
-      };
-      this.selectTableShow = true;
-    },
-    // 查询回调
-    childGetList(data) {
-      if (data.otherOption.tableType === "site") {
-        this.getSiteChildList(data);
-      } else if (data.otherOption.tableType === "device") {
-        this.getDeviceChildList(data);
-      }
-    },
-    // 查詢 设备列表 接口
-    getDeviceChildList(data) {
-      unbindVideoDev(Object.assign(JSON.parse(JSON.stringify(data.page)), JSON.parse(JSON.stringify(data.param)))).then(res => {
-        this.tableSelectOption.tableList = res.rows;
-        this.tableSelectOption.queryOpt.page.total = Number(res.total);
-      })
-    },
-    // 查询站点列表接口
-    getSiteChildList(data) {
-      listSite(data.page, data.param).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 === "site") {
-          this.form.siteId = data.value.recordId;
-          this.form.devId = data.value.devId;
-          this.form.videoLng = data.value.siteLng;
-          this.form.videoLat = data.value.siteLat;
-          this.form.videoAddress = data.value.siteAddress;
-          this.form.siteName = data.value.siteName;
-        } else if (data.otherOption.tableType === "device") {
-          this.form.videoName = data.value.deviceName;
-          this.form.devChannel = data.value.deviceKey;
-          // this.form.device = data.value.deviceKey;
-        }
-        this.selectTableShow = false;
-      } else if (data.type === "click") {
-        if (data.otherOption.tableType === "site") {
-          this.selectResult = {
-            siteId: data.value.recordId,
-            devId: data.value.devId,
-            videoLng: data.value.videoLng,
-            videoLat: data.value.videoLat,
-            videoAddress: data.value.siteAddress,
-            siteName: data.value.siteName,
-          };
-        } else if (data.otherOption.tableType === "device") {
-          this.selectResult = {
-            videoName: data.value.deviceName,
-            devChannel:  data.value.deviceKey,
-          }
-        }
-        this.selectResult.tableType = data.otherOption.tableType;
-      }
-    },
-    // 点击确定按钮
-    resuleClick() {
-      if (this.selectResult.tableType === "site") {
-        this.form.siteId = this.selectResult.siteId;
-        this.form.devId = this.selectResult.devId;
-        this.form.videoLng = this.selectResult.videoLng;
-        this.form.videoLat = this.selectResult.videoLat;
-        this.form.videoAddress = this.selectResult.videoAddress;
-        this.form.siteName = this.selectResult.siteName;
-      } else if (this.selectResult.tableType === "device") {
-        this.form.videoName = this.selectResult.videoName;
-        this.form.devChannel = this.selectResult.deviceKey;
-      }
-      this.selectTableShow = false;
-    },
     /** 查询监控详情列表 */
     getList() {
       this.loading = true;
@@ -1086,7 +910,7 @@ export default {
     /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryForm");
-      if(this.$refs.querySelectInput) {
+      if (this.$refs.querySelectInput) {
         this.$refs.querySelectInput.close();
       }
       this.handleQuery();
@@ -1130,7 +954,7 @@ export default {
       this.tempType = "distri";
       this.reset();
       // this.getTenantList();
-      const recordId = row.recordId
+      const recordId = row.recordId;
       getInfo(recordId).then((response) => {
         this.form = response.data;
         this.open = true;
@@ -1236,13 +1060,6 @@ export default {
         }
       });
     },
-    /** 查询角色 */
-    getRole() {
-      getUser().then((res) => {
-        this.roleOptions = res.roles;
-        this.roleOptions.splice(0, 1);
-      });
-    },
   },
 };
 </script>

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

@@ -1,6 +1,11 @@
 <template>
   <div class="app-container video-site">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      :inline="true"
+      label-width="68px"
+    >
       <el-form-item label="站点名称" prop="siteName">
         <el-input
           v-model="queryParams.siteName"
@@ -10,30 +15,6 @@
         />
       </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
@@ -53,17 +34,6 @@
           >新增</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
@@ -71,45 +41,56 @@
       :data="siteList"
       @selection-change="handleSelectionChange"
     >
-      <!-- <el-table-column type="selection" width="55" align="center" /> -->
       <el-table-column
-          type="index"
+        type="index"
-          label="序号"
+        label="序号"
-          align="center"
+        align="center"
-          :index="indexFormatter"
+        :index="indexFormatter"
-          width="80px"
+        width="80px"
-        ></el-table-column>
+      ></el-table-column>
 
-      <el-table-column label="站点名称" align="left" width="200" prop="siteName" />
+      <el-table-column
-      <!-- <el-table-column
+        label="站点名称"
-        label="行政区划"
         align="left"
-        width="180"
+        width="200"
-        prop="regionalismFullName"
+        prop="siteName"
-      /> -->
+      />
-      <el-table-column label="项目名称" align="left" width="150" prop="projectName" />
+      <el-table-column
-      <el-table-column label="站点地址" align="left" prop="siteAddress" >
+        label="项目名称"
+        align="left"
+        width="150"
+        prop="projectName"
+      />
+      <el-table-column label="站点地址" align="left" prop="siteAddress">
         <template slot-scope="scope">
-          <span :title="scope.row.siteAddress" class="lay-table-textarea">{{ scope.row.siteAddress || '--'}}</span>
+          <span :title="scope.row.siteAddress" class="lay-table-textarea">{{
+            scope.row.siteAddress || "--"
+          }}</span>
         </template>
       </el-table-column>
-      <!-- <el-table-column label="站点状态" align="center" width="100" prop="siteStatus">
+      <el-table-column
-        <template slot-scope="scope">
+        label="接入协议"
-          <div class="list-row">
+        align="left"
-            <span class="notice-item" :class="noticeState(scope.row.siteStatus)"></span>
+        width="100"
-            <span
+        prop="videoProtocol"
-              class="notice-text"
+      />
-              v-text="scope.row.siteStatus === '1' ? '在线' : '离线'"
-            ></span>
-          </div>
-        </template>
-      </el-table-column> -->
-      <el-table-column label="接入协议" align="left" width="100" prop="videoProtocol" />
       <el-table-column label="站点通道" align="left" width="200" prop="devId" />
-      <el-table-column label="设备编码" align="left" width="150" prop="devCode" />
+      <el-table-column
-      <el-table-column label="创建时间" align="center" prop="createTime" width="160">
+        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>
+          <span>{{
+            parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{i}:{s}")
+          }}</span>
         </template>
       </el-table-column>
       <el-table-column
@@ -161,10 +142,15 @@
           <el-row :gutter="20" v-show="tempType !== 'distri'">
             <el-col :span="24">
               <el-form-item label="所属项目" prop="projectName">
-                <el-input
+                <e-dialog-table-input
+                  :table="selectProjectTable"
+                  :refurbishFun="listProject"
+                  showFileName="projectName"
+                  fileName="projectId,projectName,projectLat,projectLng,projectAddress"
                   v-model="form.projectName"
-                  placeholder="点击选择厂商"
+                  title="项目"
-                  @focus="handleOpenTableSelect()"
+                  psize="small"
+                  @change="handleDialogEvent"
                 />
               </el-form-item>
             </el-col>
@@ -201,14 +187,6 @@
           <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-switch
                   size="mini"
                   v-model="form.https"
@@ -219,7 +197,7 @@
                   active-color="#13ce66"
                   inactive-color="#dcdfe6"
                   class="e-switch-c"
-                  >
+                >
                 </el-switch>
               </el-form-item>
             </el-col>
@@ -240,31 +218,26 @@
                 </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-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-input
+                  v-model="form.siteLat"
+                  disabled
+                  placeholder="请输入站点纬度"
+                />
               </el-form-item>
             </el-col>
           </el-row>
@@ -324,7 +297,9 @@
                           margin-top: 5px;
                         "
                       >
-                        <el-button type="primary" @click="mapSureClick">确 定</el-button>
+                        <el-button type="primary" @click="mapSureClick"
+                          >确 定</el-button
+                        >
                         <el-button @click="visible = false">取 消</el-button>
                       </div>
                     </slot>
@@ -334,14 +309,22 @@
             </el-col>
           </el-row>
 
-          <el-form-item label="站点通道" prop="devId" v-show="tempType !== 'distri'">
+          <el-form-item
+            label="站点通道"
+            prop="devId"
+            v-show="tempType !== 'distri'"
+          >
             <el-input
               v-model="form.devId"
               :disabled="tempType === 'distri'"
               placeholder="请输入站点通道"
             />
           </el-form-item>
-          <el-form-item label="设备编码" prop="devCode" v-show="tempType !== 'distri'">
+          <el-form-item
+            label="设备编码"
+            prop="devCode"
+            v-show="tempType !== 'distri'"
+          >
             <el-input
               v-model="form.devCode"
               :disabled="tempType === 'distri'"
@@ -363,17 +346,26 @@
             <!-- <template> -->
             <el-col :span="12">
               <el-form-item label="七牛访问秘钥" prop="qnAccessKey">
-                <el-input v-model="form.qnAccessKey" placeholder="请输入七牛访问秘钥" />
+                <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-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-input
+                  v-model="form.qnNamespaceId"
+                  placeholder="请输入七牛空间ID"
+                />
               </el-form-item>
             </el-col>
             <el-col :span="12">
@@ -423,63 +415,113 @@
           </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 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
+  listSite,
-} from "@/api/iot/project";
+  getSite,
+  delSite,
+  addSite,
+  updateSite,
+} from "@/api/iot/site";
+import { listProject } from "@/api/iot/project";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import { initMap, gjzCode } from "@/utils/latlngFromAddress";
 import ShopLocation from "@/components/Amap/components/shopLocation/index";
-import SelectTableWrap from "@/components/SelectTable/index";
+import EDialogTableInput from "@/components/EDialogTableInput";
-import { serviceApiDesc } from '@/config/dvr.config'
+import { serviceApiDesc } from "@/config/dvr.config";
 const serverTypeOpt = {
   SRS: "SRS",
   QI_NIU: "七牛",
-  M7S:"M7S"
+  M7S: "M7S",
+};
+const selectProjectTable = {
+  otherOption: {
+    tableType: "project",
+  },
+  queryOption: {
+    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: "",
+      },
+    ],
+  },
+  tableOption: {
+    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",
+      },
+    ],
+  },
 };
 
 export default {
@@ -487,12 +529,13 @@ export default {
   components: {
     Treeselect,
     ShopLocation,
-    SelectTableWrap,
+    EDialogTableInput,
   },
   data() {
     return {
       serverTypeOpt,
       serviceApiDesc,
+      selectProjectTable,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -537,24 +580,42 @@ export default {
             message: "格式不正确; (a-Z , 0-9) 组合 6 - 45个字符",
           },
         ],
-        projectName: [{ required: true, message: "项目名称不能为空", trigger: "change" }],
+        projectName: [
-        siteName: [{ required: true, message: "站点名称不能为空", trigger: "blur" }],
+          { required: true, message: "项目名称不能为空", trigger: "change" },
-        videoProtocol: [{ required: true, message: "接入协议不能为空", trigger: "blur" }],
+        ],
-        serverType: [{ required: true, message: "服务类型不能为空", trigger: "blur" }],
+        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" }],
+        qnSecretKey: [
+          { required: true, message: "七牛秘钥不能为空", trigger: "blur" },
+        ],
         qnNamespaceId: [
           { required: true, message: "七牛空间ID不能为空", trigger: "blur" },
         ],
-        qnHost: [{ required: true, message: "七牛host不能为空", trigger: "blur" }],
+        qnHost: [
-        qnPort: [{ required: true, message: "七牛port不能为空", trigger: "blur" }],
+          { required: true, message: "七牛host不能为空", trigger: "blur" },
-        m7sHost: [{ required: true, message: "ip地址不能为空", 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" }]
+        m7sVersion: [
+          { required: true, message: "服务版本不能为空", trigger: "blur" },
+        ],
       },
       // 地图 弹窗
       visible: false,
@@ -591,149 +652,20 @@ export default {
       this.videoProtocolOptions = response.data;
     });
     this.getList();
-    // this.getRegionalisTree();
   },
   methods: {
+    listProject,
     indexFormatter(val) {
       return (
         val + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
       );
     },
-    // 打开 表单选择 弹窗
+    handleDialogEvent(e) {
-    handleOpenTableSelect() {
+      this.form.projectId = e.projectId;
-      this.selectResult = {};
+      this.form.projectName = e.projectName;
-      this.tableSelectOption = {
+      this.form.siteLat = e.projectLat;
-        otherOption: {
+      this.form.siteLng = e.projectLng;
-          tableType: "project",
+      this.form.siteAddress = e.projectAddress;
-        },
-        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 = "";
@@ -818,19 +750,6 @@ export default {
         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 = {
@@ -877,7 +796,7 @@ export default {
         updateBy: undefined,
         updateTime: undefined,
         remark: undefined,
-        m7sVersion: 'v3',
+        m7sVersion: "v3",
         https: false,
         serverType: "M7S",
       };
@@ -961,8 +880,8 @@ export default {
           return delSite(recordIds);
         })
         .then((data) => {
-          if (data.msg === 'ok') {
+          if (data.msg === "ok") {
-            this.msgSuccess('删除成功');
+            this.msgSuccess("删除成功");
           } else {
             this.msgError(data.msg);
           }