稍微更改一下数据

gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue

 <!--
  * @Author: your name
  * @Date: 2022-03-25 17:15:31
- * @LastEditTime: 2022-03-28 13:59:56
+ * @LastEditTime: 2022-03-28 14:24:41
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue
@@ -52,17 +52,15 @@ export default {
       addStartNum: 3,
       filterList: [
         { value: "加气站", count: 100, type: 1 },
-        { value: "加气站1", count: 100, type: 2 },
-        { value: "加气站2", count: 100, type: 3 },
-        { value: "加气站3", count: 100, type: 4 },
-        { value: "加气站4", count: 100, type: 5 },
-        { value: "加气站5", count: 100, type: 6 },
-        { value: "加气站7", count: 100, type: 7 },
+        { value: "门站", count: 100, type: 2 },
+        { value: "调压站", count: 100, type: 3 },
+        { value: "储备站", count: 100, type: 4 },
+        { value: "气化站", count: 100, type: 5 },
       ],
-      deviceTypeArr: [1, 2, 3, 4, 5, 6, 7],
+      deviceTypeArr: [1, 2, 3, 4, 5],
       czList: [
         {
-          deviceName: "加气站a",
+          deviceName: "加气站",
           state: 1,
           a: 25,
           b: 56,
@@ -74,7 +72,7 @@ export default {
           type: 1,
         },
         {
-          deviceName: "加气站b",
+          deviceName: "门站",
           state: 1,
           a: 25,
           b: 56,
@@ -86,7 +84,7 @@ export default {
           type: 2,
         },
         {
-          deviceName: "加气站c",
+          deviceName: "调压站",
           state: 1,
           a: 25,
           b: 56,
@@ -98,7 +96,7 @@ export default {
           type: 3,
         },
         {
-          deviceName: "加气站d",
+          deviceName: "储备站",
           state: 1,
           a: 25,
           b: 56,
@@ -110,7 +108,7 @@ export default {
           type: 4,
         },
         {
-          deviceName: "加气站e",
+          deviceName: "气化站",
           state: 1,
           a: 25,
           b: 56,
@@ -119,10 +117,10 @@ export default {
           e: 56,
           image: "",
           show: true,
-          type: 4,
+          type: 5,
         },
         {
-          deviceName: "加气站f",
+          deviceName: "气化站",
           state: 1,
           a: 25,
           b: 56,
@@ -131,10 +129,10 @@ export default {
           e: 56,
           image: "",
           show: true,
-          type: 4,
+          type: 5,
         },
         {
-          deviceName: "加气站g",
+          deviceName: "储备站",
           state: 1,
           a: 25,
           b: 56,

gassafetyprogress-web/src/views/regulation/device/index.vue

 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
       <el-form-item label="设备名称" prop="deviceName">
         <el-input
           v-model="queryParams.deviceName"
@@ -19,18 +25,26 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-<!--      <el-form-item label="所在地址" prop="deviceAddr">-->
-<!--        <el-input-->
-<!--          v-model="queryParams.deviceAddr"-->
-<!--          placeholder="请输入所在地址"-->
-<!--          clearable-->
-<!--          size="small"-->
-<!--          @keyup.enter.native="handleQuery"-->
-<!--        />-->
-<!--      </el-form-item>-->
+      <!--      <el-form-item label="所在地址" prop="deviceAddr">-->
+      <!--        <el-input-->
+      <!--          v-model="queryParams.deviceAddr"-->
+      <!--          placeholder="请输入所在地址"-->
+      <!--          clearable-->
+      <!--          size="small"-->
+      <!--          @keyup.enter.native="handleQuery"-->
+      <!--        />-->
+      <!--      </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-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>
 
@@ -43,7 +57,8 @@
           size="mini"
           @click="handleAdd"
           v-hasPermi="['device:device:add']"
-        >新增</el-button>
+          >新增</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -54,7 +69,8 @@
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['device:device:edit']"
-        >修改</el-button>
+          >修改</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -65,7 +81,8 @@
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['device:device:remove']"
-        >删除</el-button>
+          >删除</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -76,50 +93,81 @@
           :loading="exportLoading"
           @click="handleExport"
           v-hasPermi="['device:device:export']"
-        >导出</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="deviceList" @selection-change="handleSelectionChange">
+    <el-table
+      v-loading="loading"
+      :data="deviceList"
+      @selection-change="handleSelectionChange"
+    >
       <el-table-column type="selection" width="55" align="center" />
-<!--      <el-table-column label="设备id" align="center" prop="deviceId" />-->
-      <el-table-column label="照片" align="center"  >
-        <template scope="List">
-              <img :src="List.row.iconUrl" width="100px">
+      <!--      <el-table-column label="设备id" align="center" prop="deviceId" />-->
+      <el-table-column label="照片" align="center">
+        <template slot-scope="List">
+          <img :src="List.row.iconUrl" width="100px" />
         </template>
       </el-table-column>
       <el-table-column label="设备名称" align="center" prop="deviceName">
-        <span slot-scope="scope" v-if="scope.row.deviceName">{{scope.row.deviceName}}</span>
+        <span slot-scope="scope" v-if="scope.row.deviceName">{{
+          scope.row.deviceName
+        }}</span>
         <span v-else>-</span>
       </el-table-column>
       <el-table-column label="设备编号" align="center" prop="deviceCode">
-        <span slot-scope="scope" v-if="scope.row.deviceCode">{{scope.row.deviceCode}}</span>
+        <span slot-scope="scope" v-if="scope.row.deviceCode">{{
+          scope.row.deviceCode
+        }}</span>
         <span v-else>-</span>
       </el-table-column>
       <el-table-column label="所在地址" align="center" prop="deviceAddr">
-        <span slot-scope="scope" v-if="scope.row.deviceAddr">{{scope.row.deviceAddr}}</span>
+        <span slot-scope="scope" v-if="scope.row.deviceAddr">{{
+          scope.row.deviceAddr
+        }}</span>
         <span v-else>-</span>
       </el-table-column>
-      <el-table-column label="设备型号" align="center" prop="deviceModel" >
-        <span slot-scope="scope" v-if="scope.row.deviceModel">{{scope.row.deviceModel}}</span>
+      <el-table-column label="设备型号" align="center" prop="deviceModel">
+        <span slot-scope="scope" v-if="scope.row.deviceModel">{{
+          scope.row.deviceModel
+        }}</span>
         <span v-else>-</span>
       </el-table-column>
-      <el-table-column label="设备类型" align="center" prop="deviceType" >
-        <span slot-scope="scope" v-if="scope.row.deviceType">{{scope.row.deviceType}}</span>
+      <el-table-column label="设备类型" align="center" prop="deviceType">
+        <span slot-scope="scope" v-if="scope.row.deviceType">{{
+          scope.row.deviceType
+        }}</span>
         <span v-else>-</span>
       </el-table-column>
-      <el-table-column label="权属单位名称" align="center" prop="beyondEnterpriseName" >
-        <span slot-scope="scope" v-if="scope.row.beyondEnterpriseName">{{scope.row.beyondEnterpriseName}}</span>
+      <el-table-column
+        label="权属单位名称"
+        align="center"
+        prop="beyondEnterpriseName"
+      >
+        <span slot-scope="scope" v-if="scope.row.beyondEnterpriseName">{{
+          scope.row.beyondEnterpriseName
+        }}</span>
         <span v-else>-</span>
       </el-table-column>
-      <el-table-column label="安装时间" align="center" prop="installationTime" width="180">
+      <el-table-column
+        label="安装时间"
+        align="center"
+        prop="installationTime"
+        width="180"
+      >
         <template slot-scope="scope">
-          <span v-if="scope.row.installationTime">{{ parseTime(scope.row.installationTime, '{y}-{m}-{d}') }}</span>
+          <span v-if="scope.row.installationTime">{{
+            parseTime(scope.row.installationTime, "{y}-{m}-{d}")
+          }}</span>
           <span v-else>-</span>
         </template>
       </el-table-column>
-      <el-table-column label="照片" align="center"  >
+      <el-table-column label="照片" align="center">
         <template slot-scope="List">
           <span
             class="dbtn"
@@ -131,7 +179,11 @@
           <span v-else>-</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
         <template slot-scope="scope">
           <el-button
             size="mini"
@@ -139,31 +191,42 @@
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['device:device:edit']"
-          >修改</el-button>
+            >修改</el-button
+          >
           <el-button
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['device:device:remove']"
-          >删除</el-button>
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
 
     <pagination
-      v-show="total>0"
+      v-show="total > 0"
       :total="total"
       :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
 
-
     <!--选择关联设备弹出框-->
-   <el-dialog title="选择关联设备"  width="1100px"  :visible.sync="dialogTableVisible"   formLabelWidth="160px">
+    <el-dialog
+      title="选择关联设备"
+      width="1100px"
+      :visible.sync="dialogTableVisible"
+      formLabelWidth="160px"
+    >
       <template>
-      <el-form :model="dateQueryParams" ref="queryForm" :inline="true" v-show="showSearch" >
+        <el-form
+          :model="dateQueryParams"
+          ref="queryForm"
+          :inline="true"
+          v-show="showSearch"
+        >
           <el-form-item label="设备名称" prop="deviceName">
             <el-input
               v-model="dateQueryParams.deviceName"
@@ -192,8 +255,19 @@
             />
           </el-form-item>
           <el-form-item>
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryData">搜索</el-button>
-          <el-button icon="el-icon-refresh" size="mini" @click="resetQueryDate">重置</el-button>
+            <el-button
+              type="primary"
+              icon="el-icon-search"
+              size="mini"
+              @click="handleQueryData"
+              >搜索</el-button
+            >
+            <el-button
+              icon="el-icon-refresh"
+              size="mini"
+              @click="resetQueryDate"
+              >重置</el-button
+            >
           </el-form-item>
         </el-form>
 
@@ -206,19 +280,20 @@
               size="mini"
               @click="dialogFormVisible = true"
               v-hasPermi="['device:device:add']"
-          >新增</el-button>
+              >新增</el-button
+            >
           </el-col>
-<!--        <el-col :span="1.5">-->
-<!--          <el-button-->
-<!--            type="success"-->
-<!--            plain-->
-<!--            icon="el-icon-edit"-->
-<!--            size="mini"-->
-<!--            :disabled="single"-->
-<!--            @click="handleUpdate"-->
-<!--            v-hasPermi="['device:device:edit']"-->
-<!--          >修改</el-button>-->
-<!--        </el-col>-->
+          <!--        <el-col :span="1.5">-->
+          <!--          <el-button-->
+          <!--            type="success"-->
+          <!--            plain-->
+          <!--            icon="el-icon-edit"-->
+          <!--            size="mini"-->
+          <!--            :disabled="single"-->
+          <!--            @click="handleUpdate"-->
+          <!--            v-hasPermi="['device:device:edit']"-->
+          <!--          >修改</el-button>-->
+          <!--        </el-col>-->
           <el-col :span="1.5">
             <el-button
               type="danger"
@@ -228,30 +303,54 @@
               :disabled="multiple"
               @click="deleteListDetailInfo"
               v-hasPermi="['device:device:remove']"
-          >删除</el-button>
+              >删除</el-button
+            >
           </el-col>
-<!--        <el-col :span="1.5">-->
-<!--          <el-button-->
-<!--            type="warning"-->
-<!--            plain-->
-<!--            icon="el-icon-download"-->
-<!--            size="mini"-->
-<!--            :loading="exportLoading"-->
-<!--            @click="handleExport"-->
-<!--            v-hasPermi="['device:device:export']"-->
-<!--          >导出</el-button>-->
-<!--        </el-col>-->
-        <right-toolbar :showSearch.sync="showSearch" @queryTable="getDataList"></right-toolbar>
+          <!--        <el-col :span="1.5">-->
+          <!--          <el-button-->
+          <!--            type="warning"-->
+          <!--            plain-->
+          <!--            icon="el-icon-download"-->
+          <!--            size="mini"-->
+          <!--            :loading="exportLoading"-->
+          <!--            @click="handleExport"-->
+          <!--            v-hasPermi="['device:device:export']"-->
+          <!--          >导出</el-button>-->
+          <!--        </el-col>-->
+          <right-toolbar
+            :showSearch.sync="showSearch"
+            @queryTable="getDataList"
+          ></right-toolbar>
         </el-row>
-      <el-table v-loading="loadings" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" max-height="250" @selection-change="tableDataSelectionChange">
-        <el-table-column type="selection" width="55"  align="center"></el-table-column>
+        <el-table
+          v-loading="loadings"
+          ref="multipleTable"
+          :data="tableData"
+          tooltip-effect="dark"
+          style="width: 100%"
+          max-height="250"
+          @selection-change="tableDataSelectionChange"
+        >
+          <el-table-column
+            type="selection"
+            width="55"
+            align="center"
+          ></el-table-column>
           <el-table-column label="设备名称" align="center" prop="deviceName" />
           <el-table-column label="设备型号" align="center" prop="deviceModel" />
           <el-table-column label="设备类型" align="center" prop="deviceType" />
-        <el-table-column label="探测介质" align="center" prop="detectionMedium" />
+          <el-table-column
+            label="探测介质"
+            align="center"
+            prop="detectionMedium"
+          />
           <el-table-column label="物联网编号" align="center" prop="iotNo" />
           <el-table-column label="备注" align="center" prop="remarksn" />
-        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <el-table-column
+            label="操作"
+            align="center"
+            class-name="small-padding fixed-width"
+          >
             <template slot-scope="scope">
               <el-button
                 size="mini"
@@ -259,32 +358,46 @@
                 icon="el-icon-delete"
                 @click="deleteDetailInfo(scope.row)"
                 v-hasPermi="['device:device:remove']"
-            >删除</el-button>
+                >删除</el-button
+              >
             </template>
           </el-table-column>
         </el-table>
         <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="insertListDetailInfo">提 交</el-button>
-        <el-button @click="dialogTableVisible=false">取 消</el-button>
+          <el-button type="primary" @click="insertListDetailInfo"
+            >提 交</el-button
+          >
+          <el-button @click="dialogTableVisible = false">取 消</el-button>
         </div>
       </template>
     </el-dialog>
 
-
     <!--添加关联设备弹出框-->
     <el-dialog title="添加关联设备" :visible.sync="dialogFormVisible">
-      <el-form ref="formDetailInfo" :model="formDetailInfo" :rules="formDetailInfoRules" label-width="95px" style="height: 230px">
-
+      <el-form
+        ref="formDetailInfo"
+        :model="formDetailInfo"
+        :rules="formDetailInfoRules"
+        label-width="95px"
+        style="height: 230px"
+      >
         <el-row>
           <el-col :span="11">
             <el-form-item label="设备名称" prop="deviceName">
-            <el-input v-model="formDetailInfo.deviceName" placeholder="请输入设备名称" autocomplete="off"></el-input>
+              <el-input
+                v-model="formDetailInfo.deviceName"
+                placeholder="请输入设备名称"
+                autocomplete="off"
+              ></el-input>
             </el-form-item>
           </el-col>
 
           <el-col :span="11">
             <el-form-item label="设备型号" prop="deviceModel">
-           <el-input v-model="formDetailInfo.deviceModel" placeholder="请输入设备型号" />
+              <el-input
+                v-model="formDetailInfo.deviceModel"
+                placeholder="请输入设备型号"
+              />
             </el-form-item>
           </el-col>
         </el-row>
@@ -292,7 +405,10 @@
         <el-row>
           <el-col :span="11">
             <el-form-item label="设备类型" prop="deviceType">
-            <el-select v-model="formDetailInfo.deviceType" placeholder="请选择设备类型">
+              <el-select
+                v-model="formDetailInfo.deviceType"
+                placeholder="请选择设备类型"
+              >
                 <el-option label="压力表" value="1" />
                 <el-option label="流量计" value="2" />
                 <el-option label="探测器" value="3" />
@@ -301,49 +417,64 @@
           </el-col>
 
           <el-col :span="11">
-         <el-form-item label="物联网编号" prop="iotNo" >
-                <el-input v-model="formDetailInfo.iotNo" placeholder="请输入物联网编号" />
+            <el-form-item label="物联网编号" prop="iotNo">
+              <el-input
+                v-model="formDetailInfo.iotNo"
+                placeholder="请输入物联网编号"
+              />
             </el-form-item>
           </el-col>
         </el-row>
 
         <el-row>
           <el-col :span="22">
-          <el-form-item label="探测介质" prop="detectionMedium" >
-            <el-input v-model="formDetailInfo.detectionMedium" placeholder="请输入探测介质" />
+            <el-form-item label="探测介质" prop="detectionMedium">
+              <el-input
+                v-model="formDetailInfo.detectionMedium"
+                placeholder="请输入探测介质"
+              />
             </el-form-item>
           </el-col>
         </el-row>
 
-
         <el-row>
           <el-col :span="22">
             <el-form-item label="备注" prop="remarksn">
-                <el-input v-model="formDetailInfo.remarksn" type="textarea" placeholder="请输入备注" />
+              <el-input
+                v-model="formDetailInfo.remarksn"
+                type="textarea"
+                placeholder="请输入备注"
+              />
             </el-form-item>
           </el-col>
         </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="addDetailInfo">提 交</el-button>
-        <el-button @click="dialogFormVisible=false">取 消</el-button>
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
       </div>
     </el-dialog>
 
-
     <!-- 添加或修改设备信息对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="780px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="120px">
         <el-row>
           <el-col :span="11">
             <el-form-item label="设备名称" prop="deviceName">
-          <el-input v-model="form.deviceName" placeholder="请输入设备名称" />
+              <el-input
+                v-model="form.deviceName"
+                placeholder="请输入设备名称"
+              />
             </el-form-item>
           </el-col>
 
           <el-col :span="11">
             <el-form-item label="设备编号" prop="deviceCode">
-          <el-input v-model="form.deviceCode" placeholder="请输入设备编号" :disabled="true"/>
+              <el-input
+                v-model="form.deviceCode"
+                placeholder="请输入设备编号"
+                :disabled="true"
+              />
             </el-form-item>
           </el-col>
         </el-row>
@@ -351,13 +482,19 @@
         <el-row>
           <el-col :span="11">
             <el-form-item label="所在地址" prop="deviceAddr">
-          <el-input v-model="form.deviceAddr" placeholder="请输入所在地址" />
+              <el-input
+                v-model="form.deviceAddr"
+                placeholder="请输入所在地址"
+              />
             </el-form-item>
           </el-col>
 
           <el-col :span="11">
             <el-form-item label="设备型号" prop="deviceModel">
-          <el-input v-model="form.deviceModel" placeholder="请输入设备型号" />
+              <el-input
+                v-model="form.deviceModel"
+                placeholder="请输入设备型号"
+              />
             </el-form-item>
           </el-col>
         </el-row>
@@ -374,27 +511,38 @@
 
           <el-col :span="11">
             <el-form-item label="权属单位" prop="beyondEnterpriseId">
-          <el-select v-model="form.beyondEnterpriseId"  placeholder="请在下拉框中选择权属单位" maxlength="255" :disabled="false" clearable>
-            <el-option v-for="item in test" :key="item.enterpriseId" :label="item.enterpriseName" :value="item.enterpriseId">
+              <el-select
+                v-model="form.beyondEnterpriseId"
+                placeholder="请在下拉框中选择权属单位"
+                maxlength="255"
+                :disabled="false"
+                clearable
+              >
+                <el-option
+                  v-for="item in test"
+                  :key="item.enterpriseId"
+                  :label="item.enterpriseName"
+                  :value="item.enterpriseId"
+                >
                 </el-option>
               </el-select>
             </el-form-item>
           </el-col>
         </el-row>
 
-<!--        <el-row>-->
-<!--        <el-col :span="11">-->
-<!--        <el-form-item label="经度" prop="longitude">-->
-<!--          <el-input  v-model="form.longitude" placeholder="请输入经度" />-->
-<!--        </el-form-item>-->
-<!--        </el-col>-->
+        <!--        <el-row>-->
+        <!--        <el-col :span="11">-->
+        <!--        <el-form-item label="经度" prop="longitude">-->
+        <!--          <el-input  v-model="form.longitude" placeholder="请输入经度" />-->
+        <!--        </el-form-item>-->
+        <!--        </el-col>-->
 
-<!--        <el-col :span="11">-->
-<!--        <el-form-item label="纬度" prop="latitude">-->
-<!--          <el-input  v-model="form.latitude" placeholder="请输入纬度" />-->
-<!--        </el-form-item>-->
-<!--        </el-col>-->
-<!--        </el-row>-->
+        <!--        <el-col :span="11">-->
+        <!--        <el-form-item label="纬度" prop="latitude">-->
+        <!--          <el-input  v-model="form.latitude" placeholder="请输入纬度" />-->
+        <!--        </el-form-item>-->
+        <!--        </el-col>-->
+        <!--        </el-row>-->
 
         <el-row>
           <el-col :span="21">
@@ -403,10 +551,12 @@
                 <el-input v-model="form.longitude" placeholder="请输入经度" />
               </el-col>
               <el-col :span="9" style="margin-left: 15px">
-                <el-input v-model="form.latitude" placeholder="请输入纬度"/>
+                <el-input v-model="form.latitude" placeholder="请输入纬度" />
               </el-col>
               <el-col :span="3" style="margin-left: 35px">
-                <el-button type="primary" plain @click="MapdialogFun">选择经纬度</el-button>
+                <el-button type="primary" plain @click="MapdialogFun"
+                  >选择经纬度</el-button
+                >
               </el-col>
             </el-form-item>
           </el-col>
@@ -419,7 +569,8 @@
                 listType="picture"
                 @resFun="getFileInfo"
                 @remove="listRemove"
-                :fileArr="fileList">
+                :fileArr="fileList"
+              >
               </FileUpload>
             </el-form-item>
           </el-col>
@@ -442,22 +593,28 @@
         <el-row>
           <el-col :span="11">
             <el-form-item label="安装时间" prop="installationTime">
-             <el-date-picker clearable size="small"
+              <el-date-picker
+                clearable
+                size="small"
                 v-model="form.installationTime"
                 type="date"
                 value-format="yyyy-MM-dd"
-              placeholder="选择安装时间">
+                placeholder="选择安装时间"
+              >
               </el-date-picker>
             </el-form-item>
           </el-col>
 
           <el-col :span="11">
             <el-form-item label="最后巡检时间" prop="inspectionTime">
-           <el-date-picker clearable size="small"
+              <el-date-picker
+                clearable
+                size="small"
                 v-model="form.inspectionTime"
                 type="date"
                 value-format="yyyy-MM-dd"
-            placeholder="选择最后巡检时间">
+                placeholder="选择最后巡检时间"
+              >
               </el-date-picker>
             </el-form-item>
           </el-col>
@@ -466,36 +623,64 @@
         <el-row>
           <el-col :span="22">
             <el-form-item label="备注" prop="remarks">
-              <el-input v-model="form.remarks" type="textarea" placeholder="请输入备注" />
+              <el-input
+                v-model="form.remarks"
+                type="textarea"
+                placeholder="请输入备注"
+              />
             </el-form-item>
           </el-col>
         </el-row>
       </el-form>
       <div class="tableTitle">
-        <img :src="relationImg" style="width: 24px; height: 25px;position: relative; left: -339px; top: -12px;"/>
+        <img
+          :src="relationImg"
+          style="
+            width: 24px;
+            height: 25px;
+            position: relative;
+            left: -339px;
+            top: -12px;
+          "
+        />
         <span class="midText">关联设备</span>
       </div>
-      <el-table v-loading="loadings" ref="multipleTable" :data="DetailInfoList" tooltip-effect="dark" style="width: 100%" max-height="250" @selection-change="tableDataSelectionChange">
+      <el-table
+        v-loading="loadings"
+        ref="multipleTable"
+        :data="DetailInfoList"
+        tooltip-effect="dark"
+        style="width: 100%"
+        max-height="250"
+        @selection-change="tableDataSelectionChange"
+      >
         <el-table-column label="设备名称" align="center" prop="deviceName" />
         <el-table-column label="设备型号" align="center" prop="deviceModel" />
         <el-table-column label="设备类型" align="center" prop="deviceType" />
         <el-table-column label="物联网编号" align="center" prop="iotNo" />
         <el-table-column label="备注" align="center" prop="remarksn" />
-        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <el-table-column
+          label="操作"
+          align="center"
+          class-name="small-padding fixed-width"
+        >
           <template slot-scope="scope">
             <el-button
               size="mini"
               type="text"
               icon="el-icon-delete"
-              @click="deleteDataListilInfo(scope.row,scope.$index)"
+              @click="deleteDataListilInfo(scope.row, scope.$index)"
               v-hasPermi="['device:device:remove']"
-            >删除</el-button>
+              >删除</el-button
+            >
           </template>
         </el-table-column>
       </el-table>
 
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary"  @click="selectDataListInfo">选择关联设备</el-button>
+        <el-button type="primary" @click="selectDataListInfo"
+          >选择关联设备</el-button
+        >
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
@@ -512,9 +697,24 @@
 
 
 <script>
-import { listDevice, getDevice, delDevice, addDevice, updateDevice, exportDevice, selectTEnterprise,getDdeviceDetailInfo,addDetailInfos,deleteDetailInfo,deleteeListDetailInfo,selectDetailInfoList,deleteDeviceDetailInfo,updateDetailInfoLists} from "@/api/regulation/device";
-import GetPos from '@/components/GetPos';
-import FileUpload from '@/components/FileSuperviseUpload';
+import {
+  listDevice,
+  getDevice,
+  delDevice,
+  addDevice,
+  updateDevice,
+  exportDevice,
+  selectTEnterprise,
+  getDdeviceDetailInfo,
+  addDetailInfos,
+  deleteDetailInfo,
+  deleteeListDetailInfo,
+  selectDetailInfoList,
+  deleteDeviceDetailInfo,
+  updateDetailInfoLists,
+} from "@/api/regulation/device";
+import GetPos from "@/components/GetPos";
+import FileUpload from "@/components/FileSuperviseUpload";
 export default {
   name: "Device",
   components: {
@@ -523,16 +723,16 @@ export default {
   },
   data() {
     return {
-      relationImg: require('@/assets/project/relation.png'),
+      relationImg: require("@/assets/project/relation.png"),
       //头像
       fileList: [],
       /**弹出层*/
       //下级设备数据数组
       tableData: [],
       //存储已被选中的下级数据id
-      DetailInfoListId :[],
+      DetailInfoListId: [],
       //存储已经选中的下级关联数据
-      DetailInfoList:[],
+      DetailInfoList: [],
       multipleSelection: [],
       dialogTableVisible: false,
       dialogFormVisible: false,
@@ -541,41 +741,43 @@ export default {
       devicePos: [],
       /**--------------地图使用数据---------------*/
       form: {
-        name: '',
-        region: '',
-        date1: '',
-        date2: '',
+        name: "",
+        region: "",
+        date1: "",
+        date2: "",
         delivery: false,
         type: [],
-        resource: '',
-        desc: '',
+        resource: "",
+        desc: "",
       },
-      formLabelWidth: '120px',
+      formLabelWidth: "120px",
       /*添加关联设备*/
-      formDetailInfo:{
-        relationDeviceDetailId:'',
-        deviceName: '',
-        deviceModel:'',
-        deviceType:'',
-        iotNo:'',
-        detectionMedium:'',
-        remarksn:''
+      formDetailInfo: {
+        relationDeviceDetailId: "",
+        deviceName: "",
+        deviceModel: "",
+        deviceType: "",
+        iotNo: "",
+        detectionMedium: "",
+        remarksn: "",
       },
       /*动态添加输入框*/
       dynamicValidateForm: {
-        domains: [{
-          deviceName: '',
-          deviceModel:'',
-          deviceType:'',
-          iotNo:'',
-          remarksn:''
-        }],
+        domains: [
+          {
+            deviceName: "",
+            deviceModel: "",
+            deviceType: "",
+            iotNo: "",
+            remarksn: "",
+          },
+        ],
       },
 
       // 遮罩层
       loading: true,
       //下级数据的遮罩层
-      loadings:true,
+      loadings: true,
       // 导出遮罩层
       exportLoading: false,
       // 选中数组
@@ -589,7 +791,7 @@ export default {
       // 总条数
       total: 0,
       //下级关联设备条数
-      detailTotal:0,
+      detailTotal: 0,
       // 设备信息表格数据
       deviceList: [],
       // 弹出层标题
@@ -611,7 +813,7 @@ export default {
         iotNo: null,
       },
       //下级参数
-      detailInfoParams:{
+      detailInfoParams: {
         pageNum: 1,
         pageSize: 10,
       },
@@ -639,19 +841,19 @@ export default {
         ],
       },
       //关联设备下级数据 表单校验
-      formDetailInfoRules:{
-        deviceName:[
+      formDetailInfoRules: {
+        deviceName: [
           { required: true, message: "请输入设备名称", trigger: "blur" },
           { min: 0, max: 20, message: "长度20位", trigger: "blur" },
         ],
-        deviceModel:[
+        deviceModel: [
           { required: true, message: "请输入设备型号", trigger: "blur" },
           { min: 0, max: 20, message: "长度20位", trigger: "blur" },
         ],
-        deviceType:[
+        deviceType: [
           { required: true, message: "请选择设备类型", trigger: "blur" },
         ],
-        iotNo:[
+        iotNo: [
           { required: true, message: "请输入联网编号", trigger: "blur" },
           { min: 0, max: 20, message: "长度20位", trigger: "blur" },
         ],
@@ -663,18 +865,18 @@ export default {
   },
   methods: {
     /**上传头像*/
-    getFileInfo(res){
+    getFileInfo(res) {
       this.form.dealPlan = res.fileName;
       this.form.iconUrl = res.url;
-      this.form.burl=res.burl;
+      this.form.burl = res.burl;
       this.fileList.push({
         name: res.fileName,
         url: uploadfile,
-        burl:res.burl,
+        burl: res.burl,
       });
     },
     checkFile(url) {
-      window.open(url,'_blank');
+      window.open(url, "_blank");
     },
     listRemove(e) {
       this.form.dealPlan = "";
@@ -682,21 +884,19 @@ export default {
     },
     /** 查询设备信息列表 */
     getList() {
-
       this.loading = true;
-      listDevice(this.queryParams).then(response => {
+      listDevice(this.queryParams).then((response) => {
         this.deviceList = response.rows;
         this.total = response.total;
         this.loading = false;
       });
-
     },
     /**查询下级数据列表方法*/
-    getDataList(){
+    getDataList() {
       this.loadings = true;
       // console.log(this.dateQueryParams)
       //查询下级设备数据
-      getDdeviceDetailInfo(this.dateQueryParams).then(response => {
+      getDdeviceDetailInfo(this.dateQueryParams).then((response) => {
         //下级设备数据 到时候换成下级数据
         this.tableData = response.rows;
         this.detailTotal = response.total;
@@ -733,7 +933,7 @@ export default {
         updateTime: null,
         isDel: null,
         remarks: null,
-        relationDeviceType:'1',
+        relationDeviceType: "1",
       };
       this.resetForm("form");
     },
@@ -743,7 +943,7 @@ export default {
       this.getList();
     },
     /** 下级数据搜索*/
-    handleQueryData(){
+    handleQueryData() {
       this.getDataList();
     },
     /** 重置按钮操作 */
@@ -752,39 +952,39 @@ export default {
       this.handleQuery();
     },
     /** 下级数据重置按钮操作  搜索框重置*/
-    resetQueryDate(){
-      this.dateQueryParams={
+    resetQueryDate() {
+      this.dateQueryParams = {
         deviceName: null,
         deviceModel: null,
         iotNo: null,
-      }
+      };
       this.getDataList();
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.deviceId)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
+      this.ids = selection.map((item) => item.deviceId);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
     },
     //关联数据多选框选中数据
-    tableDataSelectionChange(selection){
-      this.ids = selection.map(item => item.relationDeviceDetailId)
-      this.datalist=selection.map(item => item)
+    tableDataSelectionChange(selection) {
+      this.ids = selection.map((item) => item.relationDeviceDetailId);
+      this.datalist = selection.map((item) => item);
       //按钮 非选中禁用
-      this.single = selection.length!==1
-      this.multiple = !selection.length
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
     },
     /** 新增按钮操作 */
     handleAdd() {
       //查询企业名称下拉框数据
-      selectTEnterprise().then(response => {
+      selectTEnterprise().then((response) => {
         this.test = response.data;
       });
       //清空关联设备数据
-      this.DetailInfoList=''
+      this.DetailInfoList = "";
       this.loadings = true;
       //查询下级设备数据
-      getDdeviceDetailInfo(this.dateQueryParams).then(response => {
+      getDdeviceDetailInfo(this.dateQueryParams).then((response) => {
         //下级设备数据 到时候换成下级数据
         this.tableData = response.rows;
         this.detailTotal = response.total;
@@ -798,28 +998,28 @@ export default {
     /** 修改按钮操作 */
     handleUpdate(row) {
       //查询企业名称下拉框数据
-      selectTEnterprise().then(response => {
+      selectTEnterprise().then((response) => {
         this.test = response.data;
       });
-      const deviceId = row.deviceId || this.ids
-      var tDeviceInfon={
-        id:deviceId,
-        relationDeviceType:'1'
-      }
+      const deviceId = row.deviceId || this.ids;
+      var tDeviceInfon = {
+        id: deviceId,
+        relationDeviceType: "1",
+      };
       //查询关联设备信息数据
-      selectDetailInfoList(JSON.stringify(tDeviceInfon)).then(response => {
+      selectDetailInfoList(JSON.stringify(tDeviceInfon)).then((response) => {
         this.DetailInfoList = response.rows;
         this.loadings = false;
       });
 
       this.reset();
 
-      getDevice(deviceId).then(response => {
+      getDevice(deviceId).then((response) => {
         this.form = response.data;
         //图片回显
         if (this.form.iconUrl) {
           this.fileList.push({
-            name: '照片',
+            name: "照片",
             url: this.form.iconUrl,
           });
         }
@@ -832,205 +1032,226 @@ export default {
     handleDelete(row) {
       const deviceIds = row.deviceId || this.ids;
       // const deviceIds = row.relationDeviceDetailId || this.ids;
-      this.$confirm('是否确认删除设备信息编号为"' + deviceIds + '"的数据项?', "警告", {
+      this.$confirm(
+        '是否确认删除设备信息编号为"' + deviceIds + '"的数据项?',
+        "警告",
+        {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
-          type: "warning"
-        }).then(function() {
+          type: "warning",
+        }
+      )
+        .then(function () {
           return delDevice(deviceIds);
-        }).then(() => {
+        })
+        .then(() => {
           this.getList();
           this.msgSuccess("删除成功");
-        }).catch(() => {});
+        })
+        .catch(() => {});
     },
     /** 导出按钮操作 */
     handleExport() {
       const queryParams = this.queryParams;
-      this.$confirm('是否确认导出所有设备信息数据项?', "警告", {
+      this.$confirm("是否确认导出所有设备信息数据项?", "警告", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
-          type: "warning"
-        }).then(() => {
+        type: "warning",
+      })
+        .then(() => {
           this.exportLoading = true;
           return exportDevice(queryParams);
-        }).then(response => {
+        })
+        .then((response) => {
           this.download(response.msg);
           this.exportLoading = false;
-        }).catch(() => {});
+        })
+        .catch(() => {});
     },
     /**动态添加输入框方法*/
     addDomain() {
       this.dynamicValidateForm.domains.push({
-        deviceName: '',
-        deviceModel:'',
-        deviceType:'',
-        iotNo:'',
-        remarksn:'',
+        deviceName: "",
+        deviceModel: "",
+        deviceType: "",
+        iotNo: "",
+        remarksn: "",
       });
     },
     /**动态删除输入框方法*/
     removeDomain(item) {
-      var index = this.dynamicValidateForm.domains.indexOf(item)
+      var index = this.dynamicValidateForm.domains.indexOf(item);
       if (index !== -1) {
-        this.dynamicValidateForm.domains.splice(index, 1)
+        this.dynamicValidateForm.domains.splice(index, 1);
       }
     },
     /**提交数据方法*/
     submitForm() {
-        this.$refs["form"].validate(valid => {
+      this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.deviceId != null) {
-              updateDevice(this.form).then(response => {
+            updateDevice(this.form).then((response) => {
               this.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
-              if ( this.datalist !=null){
-                this.form.relationDeviceType='1';
-                var tDeviceInfon={
-                  tDeviceInfo:this.form,
-                  tDeviceInfoS:this.datalist
-                }
+            if (this.datalist != null) {
+              this.form.relationDeviceType = "1";
+              var tDeviceInfon = {
+                tDeviceInfo: this.form,
+                tDeviceInfoS: this.datalist,
+              };
               //重新绑定修改后的关联设备
-                updateDetailInfoLists(JSON.stringify(tDeviceInfon)).then(response => {
+              updateDetailInfoLists(JSON.stringify(tDeviceInfon)).then(
+                (response) => {
                   this.open = false;
                   this.getList();
-                });
+                }
+              );
             }
           } else {
-
             if (valid) {
               //获取已经选中的下级设备id
               const deviceIds = this.ids;
               // alert(deviceIds)
-                  this.form.relationDeviceType='1';
-                  var tDeviceInfon={
-                    tDeviceInfo:this.form,
-                    tDeviceInfoS:this.datalist
-                  }
-                  addDevice(JSON.stringify(tDeviceInfon)).then(response => {
+              this.form.relationDeviceType = "1";
+              var tDeviceInfon = {
+                tDeviceInfo: this.form,
+                tDeviceInfoS: this.datalist,
+              };
+              addDevice(JSON.stringify(tDeviceInfon)).then((response) => {
                 this.msgSuccess("新增成功");
                 this.open = false;
                 this.getList();
               });
             } else {
-                  console.log('error submit!!');
+              console.log("error submit!!");
               return false;
             }
-
           }
         }
       });
-
     },
     /**关联设备添加方法*/
-    addDetailInfo(){
-      this.$refs["formDetailInfo"].validate(valid => {
+    addDetailInfo() {
+      this.$refs["formDetailInfo"].validate((valid) => {
         if (valid) {
-          addDetailInfos(this.formDetailInfo).then(response => {
+          addDetailInfos(this.formDetailInfo).then((response) => {
             // this.tableData.push(this.formDetailInfo)
             //关闭弹出层
             this.dialogFormVisible = false;
             //数据表单重置
-            this.formDetailInfo={
+            this.formDetailInfo = {
               deviceName: null,
-              deviceModel:null,
-              deviceType:null,
-              iotNo:null,
-              remarksn:null
+              deviceModel: null,
+              deviceType: null,
+              iotNo: null,
+              remarksn: null,
             };
             this.getDataList();
             this.msgSuccess("新增成功");
           });
         }
-
       });
     },
     /**关联设备单条删除方法*/
-    deleteDetailInfo(row){
+    deleteDetailInfo(row) {
       const deviceIds = row.relationDeviceDetailId;
-      this.$confirm('是否确认删除设备信息编号为"' + deviceIds + '"的数据项?', "警告", {
+      this.$confirm(
+        '是否确认删除设备信息编号为"' + deviceIds + '"的数据项?',
+        "警告",
+        {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
-        type: "warning"
-      }).then(function() {
+          type: "warning",
+        }
+      )
+        .then(function () {
           return deleteDetailInfo(deviceIds);
-      }).then(() => {
+        })
+        .then(() => {
           // this.tableData.splice(index,1);
           this.getDataList();
           this.msgSuccess("删除成功");
-      }).catch(() => {});
+        })
+        .catch(() => {});
     },
     /**关联设备已经选中数据删除方法*/
-    deleteDataListilInfo(row,index){
+    deleteDataListilInfo(row, index) {
       const deviceIds = row.relationDeviceDetailId;
       //判断form表单是否有id来验证是修改的删除还是添加的删除
       if (this.form.deviceId != null) {
-        deleteDeviceDetailInfo(deviceIds).then(response => {
+        deleteDeviceDetailInfo(deviceIds).then((response) => {
           this.msgSuccess("删除成功");
-          this.DetailInfoList.splice(index,1);
+          this.DetailInfoList.splice(index, 1);
         });
-      }else {
-        this.DetailInfoList.splice(index,1);
+      } else {
+        this.DetailInfoList.splice(index, 1);
         this.msgSuccess("删除成功");
       }
-
     },
     /**
      * 批量删除关联设备方法
      * @param row
      */
-    deleteListDetailInfo(row){
+    deleteListDetailInfo(row) {
       const deviceIds = this.ids;
-      this.$confirm('是否确认删除设备信息编号为"' + deviceIds + '"的数据项?', "警告", {
+      this.$confirm(
+        '是否确认删除设备信息编号为"' + deviceIds + '"的数据项?',
+        "警告",
+        {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
-        type: "warning"
-      }).then(function() {
+          type: "warning",
+        }
+      )
+        .then(function () {
           return deleteeListDetailInfo(deviceIds);
-      }).then(() => {
+        })
+        .then(() => {
           this.getDataList();
           this.msgSuccess("删除成功");
-      }).catch(() => {});
+        })
+        .catch(() => {});
     },
     /**添加关联设备与设备绑定的数据  （存储到数组中）*/
-    insertListDetailInfo(row){
+    insertListDetailInfo(row) {
       //获取已经选中的下级设备id
       const deviceIds = this.ids;
-      const li=this.datalist;
+      const li = this.datalist;
       if (this.form.deviceId != null) {
         //修改
-          this.DetailInfoList=this.DetailInfoList.concat(this.datalist)
+        this.DetailInfoList = this.DetailInfoList.concat(this.datalist);
         //添加到数组中 以便下次使用
         this.DetailInfoListId.push(deviceIds);
         // alert(this.DetailInfoListId)
-          this.dialogTableVisible=false
+        this.dialogTableVisible = false;
         this.msgSuccess("添加成功");
-        }else {
+      } else {
         //添加
         // this.DetailInfoList.push(this.datalist)
         //清空数组数据   将之前的数据清空
         this.DetailInfoListId.splice(row);
-          this.DetailInfoList=this.datalist;
+        this.DetailInfoList = this.datalist;
         //添加到数组中 以便下次使用
         this.DetailInfoListId.push(deviceIds);
         // alert(this.DetailInfoListId)
-          this.dialogTableVisible=false
+        this.dialogTableVisible = false;
         this.msgSuccess("添加成功");
       }
     },
     /**
      * 选择关联设备查询方法
      */
-    selectDataListInfo(){
+    selectDataListInfo() {
       //查询下级设备数据
-      getDdeviceDetailInfo(this.dateQueryParams).then(response => {
+      getDdeviceDetailInfo(this.dateQueryParams).then((response) => {
         //下级设备数据 到时候换成下级数据
         this.tableData = response.rows;
         this.detailTotal = response.total;
         this.loadings = false;
         //打开选择关联设备弹出框
-        this.dialogTableVisible = true
+        this.dialogTableVisible = true;
       });
     },
 
@@ -1052,18 +1273,18 @@ export default {
      * 经纬度 选择
      * @param res
      */
-    getPath(res){
+    getPath(res) {
       console.log("res", res);
       console.log(this.form.longitude, this.form.latitude);
       //确认选择经纬度
       this.form.longitude = res[0];
       this.form.latitude = res[1];
-    }
-  }
+    },
+  },
 };
 </script>
 <style>
-  .dbtn {
+.dbtn {
   display: inline-block;
   line-height: normal;
   padding-left: 2px;
@@ -1073,12 +1294,12 @@ export default {
   border-style: solid;
   border-width: 0;
   color: rgb(48, 180, 107);
-  }
-  .dbtn:hover {
+}
+.dbtn:hover {
   border-width: 1px;
   border-color: rgb(48, 180, 107);
-  }
-  .tableTitle {
+}
+.tableTitle {
   position: relative;
   margin: 24px auto;
   width: 600px;
@@ -1087,12 +1308,12 @@ export default {
   text-align: center;
   font-size: 16px;
   color: rgba(101, 101, 101, 1);
-  }
-  .midText {
+}
+.midText {
   position: absolute;
   left: 3%;
   background-color: #ffffff;
   padding: 0 15px;
   transform: translateX(-50%) translateY(-50%);
-  }
+}
 </style>