From cab78ab6bdf6b5ea0c8e97f28e616555380b2ad5 Mon Sep 17 00:00:00 2001
From: fanluyan <754122931@qq.com>
Date: Tue, 18 Apr 2023 13:04:35 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8B=8D=E7=85=A7=E8=A3=85=E7=BD=AE=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/theme.less                     |   8 +-
 .../photographicDevice/index.vue              | 367 ++++++++----------
 2 files changed, 162 insertions(+), 213 deletions(-)

diff --git a/src/assets/css/theme.less b/src/assets/css/theme.less
index 8e49b7f..b2db8c3 100644
--- a/src/assets/css/theme.less
+++ b/src/assets/css/theme.less
@@ -275,9 +275,11 @@
   }
 }
 
+//表格样式
+
 .el-table {
-  .el-table td.el-table__cell,
-  .el-table th.el-table__cell.is-leaf {
+  td.el-table__cell,
+  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;
diff --git a/src/views/management/monitoringEquipment/photographicDevice/index.vue b/src/views/management/monitoringEquipment/photographicDevice/index.vue
index 9ea2317..a8bf606 100644
--- a/src/views/management/monitoringEquipment/photographicDevice/index.vue
+++ b/src/views/management/monitoringEquipment/photographicDevice/index.vue
@@ -1,156 +1,110 @@
 <template>
   <div class="photoGraphicDevice">
-    <div class="photoGraphicBtnGroup">
-      <el-button type="primary" @click="handleAddPhoto()">新增</el-button>
-      <el-button type="primary" @click="handleRevisePhoto()">修改</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"
-        :data="terminalTableData"
-        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="selection" width="55"> </el-table-column>
-        <el-table-column label="出厂编号">
-          <template slot-scope="scope">{{ scope.row.bsIdentifier }}</template>
-        </el-table-column>
-        <el-table-column prop="bsManufacturer" label="生产厂家">
-        </el-table-column>
-        <el-table-column
-          prop="bsProductionDate"
-          label="生产日期"
-          :show-overflow-tooltip="true"
-          :formatter="dateFormat"
-        >
-        </el-table-column>
-        <el-table-column
-          prop="cmdid"
-          label="图像监测装置ID"
-          show-overflow-tooltip
+    <div class="photoBox">
+      <div class="photoGraphicBtnGroup">
+        <el-button type="primary" icon="el-icon-plus" @click="handleAddPhoto()"
+          >新增</el-button
         >
-        </el-table-column>
-        <el-table-column
-          prop="createTime"
-          label="创建时间"
-          :show-overflow-tooltip="true"
-          :formatter="dateFormat"
+      </div>
+      <div class="photoGraphicTable">
+        <el-table
+          ref="multipleTable"
+          :data="terminalTableData"
+          tooltip-effect="dark"
+          style="width: 100%"
+          height="calc(100% - 40px)"
+          @selection-change="handleSelectionChange"
+          @row-click="handleRowClick"
         >
-        </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="lineid" 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"
-        >
-        </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
-            >
-            <el-button type="text">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
+          <!-- <el-table-column type="index" 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>
+          <el-table-column prop="bsManufacturer" label="生产厂家">
+          </el-table-column>
+          <el-table-column
+            prop="bsProductionDate"
+            label="生产日期"
+            :show-overflow-tooltip="true"
+            :formatter="dateFormat"
+            width="140px"
+          >
+          </el-table-column>
+
+          <el-table-column
+            prop="createTime"
+            label="创建时间"
+            :show-overflow-tooltip="true"
+            :formatter="dateFormat"
+            width="140px"
+          >
+          </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="longitude" 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.native.stop="handleRevisePhoto(scope.row)"
+                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() {
-      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({}, this.multipleSelection[0]);
-      }
+    handleRevisePhoto(data) {
+      this.photoDialog = true;
+      this.photoDialogTitle = "修改";
+      this.formphotoInfo = Object.assign({}, data);
     },
     //新建弹窗取消按钮 关闭弹窗
     photoDialogClose(flag) {
@@ -235,47 +182,43 @@ export default {
         this.terminalList();
       }
       this.photoDialog = false;
+      this.formphotoInfo = {};
     },
     //删除数据
-    handleDelete() {
-      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,
+    handleDelete(data) {
+      this.deleteArr.push({
+        id: data.id,
+      });
+
+      console.log(this.deleteArr);
+      this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          // 行设置向后台请求删除数据
+          deleteTerminalJoggle({ list: this.deleteArr }).then((res) => {
+            console.log(res);
+            this.terminalList(); //刷新
+          });
+          this.$message({
+            type: "success",
+            message: "删除成功!",
           });
-        }
-        console.log(this.deleteArr);
-        this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning",
         })
-          .then(() => {
-            // 行设置向后台请求删除数据
-            deleteTerminalJoggle({ list: this.deleteArr }).then((res) => {
-              console.log(res);
-              this.terminalList(); //刷新
-            });
-            this.$message({
-              type: "success",
-              message: "删除成功!",
-            });
-          })
-          .catch(() => {
-            this.$message({
-              type: "info",
-              message: "已取消删除",
-            });
+        .catch(() => {
+          this.$message({
+            type: "info",
+            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 {
-    padding: 16px 8px;
+  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 {
-    padding: 0px 8px;
-    .el-form {
-      .el-form-item {
-        margin-bottom: 0px;
-      }
-    }
+  .photoGraphicBtnGroup {
+    display: flex;
+    justify-content: flex-end;
   }
+
   .photoGraphicTable {
-    padding: 16px 8px 0 8px;
-    height: calc(100% - 80px);
+    margin-top: 16px;
+    height: calc(100% - 48px);
   }
 }
 </style>