拍照装置修改

src/assets/css/theme.less

@@ -275,9 +275,11 @@
   }
 }
 
+//表格样式
+
 .el-table {
-  .el-table td.el-table__cell,
+  td.el-table__cell,
-  .el-table th.el-table__cell.is-leaf {
+  th.el-table__cell.is-leaf {
     border-bottom: 1px solid #ebeef5;
   }
   .el-table__header-wrapper,
@@ -285,7 +287,7 @@
     border-top: 1px solid #ebeef5;
   }
   th.el-table__cell {
-    background: #f8f8f8;
+    background: #f8f8f8 !important;
   }
   .el-button--text {
     padding: 0px;

src/views/management/monitoringEquipment/photographicDevice/index.vue

@@ -1,86 +1,11 @@
 <template>
   <div class="photoGraphicDevice">
+    <div class="photoBox">
       <div class="photoGraphicBtnGroup">
-      <el-button type="primary" @click="handleAddPhoto()">新增</el-button>
+        <el-button type="primary" icon="el-icon-plus" @click="handleAddPhoto()"
-      <el-button type="primary" @click="handleRevisePhoto()">修改</el-button>
+          >新增</el-button
-      <el-button type="primary" @click="handleDelete()">删除</el-button>
+        >
       </div>
-    <!-- <div class="searchForm">
-      <el-form :inline="true" :model="formInline" class="demo-form-inline">
-        <el-form-item label="单位:">
-          <el-select v-model="formInline.region" placeholder="活动区域">
-            <el-option label="区域一" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="DY等级:">
-          <el-select v-model="formInline.region" placeholder="活动区域">
-            <el-option label="区域一" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="XL名称:">
-          <el-select v-model="formInline.region" placeholder="活动区域">
-            <el-option label="区域一" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="GT名称:">
-          <el-select v-model="formInline.region" placeholder="活动区域">
-            <el-option label="区域一" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="质保到期日:">
-          <el-select v-model="formInline.region" placeholder="活动区域">
-            <el-option label="区域一" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="装置类型:">
-          <el-select v-model="formInline.region" placeholder="活动区域">
-            <el-option label="区域一" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="状态:">
-          <el-select v-model="formInline.region" placeholder="活动区域">
-            <el-option label="区域一" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="设备编号:">
-          <el-select v-model="formInline.region" placeholder="活动区域">
-            <el-option label="区域一" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="单位:">
-          <el-select v-model="formInline.region" placeholder="活动区域">
-            <el-option label="区域一" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="网络类型:">
-          <el-select v-model="formInline.region" placeholder="活动区域">
-            <el-option label="区域一" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="状态:">
-          <el-input v-model="formInline.user" placeholder="审批人"></el-input>
-        </el-form-item>
-        <el-form-item label="是否已使用">
-          <el-select v-model="formInline.region" placeholder="活动区域">
-            <el-option label="区域一" value="shanghai"></el-option>
-            <el-option label="区域二" value="beijing"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="电话号码:">
-          <el-input v-model="formInline.user" placeholder="审批人"></el-input>
-        </el-form-item>
-      </el-form>
-    </div> -->
       <div class="photoGraphicTable">
         <el-table
           ref="multipleTable"
@@ -88,12 +13,30 @@
           tooltip-effect="dark"
           style="width: 100%"
           height="calc(100% - 40px)"
-        border
           @selection-change="handleSelectionChange"
           @row-click="handleRowClick"
         >
-        <el-table-column type="index" width="55"> </el-table-column>
+          <!-- <el-table-column type="index" width="55"> </el-table-column>
-        <el-table-column type="selection" width="55"> </el-table-column>
+          <el-table-column type="selection" width="55"> </el-table-column> -->
+          <el-table-column prop="displayName" label="显示名"> </el-table-column>
+          <el-table-column prop="equipName" label="装置名称"> </el-table-column>
+          <el-table-column
+            prop="cmdid"
+            label="图像监测装置ID"
+            show-overflow-tooltip
+            width="120px"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="essentialInfoVersion"
+            label="装置基本信息版本号"
+            width="140px"
+          >
+          </el-table-column>
+          <el-table-column prop="lineid" label="线路编号"> </el-table-column>
+          <el-table-column prop="model" label="装置型号"> </el-table-column>
+          <el-table-column prop="orgId" label="原始ID"> </el-table-column>
+          <el-table-column prop="towerid" label="杆塔编号"> </el-table-column>
           <el-table-column label="出厂编号">
             <template slot-scope="scope">{{ scope.row.bsIdentifier }}</template>
           </el-table-column>
@@ -104,53 +47,64 @@
             label="生产日期"
             :show-overflow-tooltip="true"
             :formatter="dateFormat"
+            width="140px"
           >
           </el-table-column>
-        <el-table-column
+
-          prop="cmdid"
-          label="图像监测装置ID"
-          show-overflow-tooltip
-        >
-        </el-table-column>
           <el-table-column
             prop="createTime"
             label="创建时间"
             :show-overflow-tooltip="true"
             :formatter="dateFormat"
+            width="140px"
           >
           </el-table-column>
-        <el-table-column prop="displayName" label="显示名"> </el-table-column>
+
-        <el-table-column prop="equipName" label="装置名称"> </el-table-column>
-        <el-table-column prop="essentialInfoVersion" label="装置基本信息版本号">
-        </el-table-column>
           <el-table-column prop="hasPan" label="是否带云台">
             <template slot-scope="scope">
               <span v-if="scope.row.hasPan == 0">否</span>
               <span v-if="scope.row.hasPan == 1">是</span>
             </template>
           </el-table-column>
-        <el-table-column prop="latitude" label="维度"> </el-table-column>
+          <!-- <el-table-column prop="latitude" label="维度"> </el-table-column>
-        <el-table-column prop="lineid" label="线路编号"> </el-table-column>
+          <el-table-column prop="longitude" label="经度"> </el-table-column> -->
-        <el-table-column prop="longitude" label="经度"> </el-table-column>
+
-        <el-table-column prop="model" label="装置型号"> </el-table-column>
-        <el-table-column prop="orgId" label="原始ID"> </el-table-column>
-        <el-table-column prop="towerid" label="杆塔编号"> </el-table-column>
           <el-table-column
             prop="updateTime"
             label="修改时间"
             :show-overflow-tooltip="true"
             :formatter="dateFormat"
+            width="140px"
           >
           </el-table-column>
           <el-table-column fixed="right" label="操作" width="200">
             <template slot-scope="scope">
-            <el-button @click="handleClick(scope.row)" type="text"
+              <el-button
+                @click.native.stop="handleRevisePhoto(scope.row)"
+                type="text"
                 >修改</el-button
               >
-            <el-button type="text">删除</el-button>
+              <el-button
+                type="text"
+                class="deleteText"
+                @click.native.stop="handleDelete(scope.row)"
+                >删除</el-button
+              >
             </template>
           </el-table-column>
         </el-table>
+        <div class="pageNation">
+          <el-pagination
+            @current-change="handleCurrentChange"
+            :current-page="page"
+            :page-size="pageSize"
+            layout=" prev, pager, next, jumper,total"
+            :total="total"
+            background
+          >
+          </el-pagination>
+        </div>
+      </div>
     </div>
     <addPhotoDialog
       :photoDialog="photoDialog"
@@ -176,6 +130,9 @@ export default {
       deleteArr: [], //删除数组
       multipleSelection: [], //当前选中数组
       formphotoInfo: {}, //弹窗传值
+      page: 1, // 当前页数
+      pageSize: 20, // 每页数量
+      total: 0, //总条数
     };
   },
   methods: {
@@ -193,7 +150,6 @@ export default {
     //点击行选中当前行
     handleRowClick(row, column, event) {
       this.$refs.multipleTable.toggleRowSelection(row);
-      // console.log(column, row, event);
     },
     //获取选中的行
     handleSelectionChange(val) {
@@ -214,19 +170,10 @@ export default {
       this.photoDialogTitle = "新增";
     },
     //修改弹窗handleRevisePhoto
-    handleRevisePhoto() {
+    handleRevisePhoto(data) {
-      if (this.multipleSelection.length !== 1) {
-        this.$message({
-          showClose: true,
-          message: "请选择要操作的记录最多只能选择一条！",
-          type: "warning",
-        });
-      } else {
       this.photoDialog = true;
       this.photoDialogTitle = "修改";
-        console.log(this.multipleSelection);
+      this.formphotoInfo = Object.assign({}, data);
-        this.formphotoInfo = Object.assign({}, this.multipleSelection[0]);
-      }
     },
     //新建弹窗取消按钮 关闭弹窗
     photoDialogClose(flag) {
@@ -235,23 +182,14 @@ export default {
         this.terminalList();
       }
       this.photoDialog = false;
+      this.formphotoInfo = {};
     },
     //删除数据
-    handleDelete() {
+    handleDelete(data) {
-      if (this.multipleSelection.length == 0) {
-        this.$message({
-          showClose: true,
-          message: "请选择要操作的记录！",
-          type: "warning",
-        });
-      } else {
-        console.log(this.multipleSelection);
-        for (let i in this.multipleSelection) {
-          console.log(i);
       this.deleteArr.push({
-            id: this.multipleSelection[i].id,
+        id: data.id,
       });
-        }
+
       console.log(this.deleteArr);
       this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
         confirmButtonText: "确定",
@@ -275,7 +213,12 @@ export default {
             message: "已取消删除",
           });
         });
-      }
+    },
+    //点击分页
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+      this.page = val;
+      //this.getTableList();
     },
   },
   created() {
@@ -288,20 +231,24 @@ export default {
   width: 100%;
   height: 100%;
   background: @color-white;
-  .photoGraphicBtnGroup {
+  width: calc(100% - 16px);
+  height: calc(100% - 32px);
   padding: 16px 8px;
+  background: @color-white;
+  .photoBox {
+    border: 1px solid #dddddd;
+    height: calc(100% - 32px);
+    padding: 16px;
+    border-radius: 4px;
   }
-  .searchForm {
+  .photoGraphicBtnGroup {
-    padding: 0px 8px;
+    display: flex;
-    .el-form {
+    justify-content: flex-end;
-      .el-form-item {
-        margin-bottom: 0px;
-      }
-    }
   }
+
   .photoGraphicTable {
-    padding: 16px 8px 0 8px;
+    margin-top: 16px;
-    height: calc(100% - 80px);
+    height: calc(100% - 48px);
   }
 }
 </style>