增加查看设备照片列表。

src/views/base/deviceInfo-list.vue

@@ -102,6 +102,11 @@
       <!-- <el-table-column prop="unlockPassword" label="开锁密码" width="150"></el-table-column>
       <el-table-column prop="codeAddress" label="二维码地址" width="180"></el-table-column>-->
       <el-table-column prop="typeN" label="类型" width="80"></el-table-column>
+      <el-table-column label="照片库">
+        <template slot-scope="{row}">
+          <el-link type="primary" @click="handleViewPersonLib(row)">查看</el-link>
+        </template>
+      </el-table-column>
       <el-table-column label="操作" width="250">
         <template slot-scope="{row}">
           <el-row>
@@ -273,11 +278,18 @@
       :companyResult="companyResult"
       @close="onDetailModalClose"
     ></deviceInfo-map>
+    <devicePhoto-list 
+      :device="selectedDevice"
+      v-if="showPhotoListModal"
+      @close="onDevicePhotoListClose"
+      >
+    </devicePhoto-list>
   </div>
 </template>
 <script>
 import Constant from "@/constant";
 import DeviceInfoDetail from "./deviceInfo-detail";
+import DevicePhotoList from "./devicePhoto-list";
 import DeviceInfoMap from "./deviceInfo-amap";
 import deviceInfoApi from "@/api/base/deviceInfo";
 import dataDictionaryApi from "@/api/sys/dataDictionary";
@@ -342,7 +354,9 @@ export default {
         label: "name",
         children: "children"
       },
-      showMapModal: false
+      showMapModal: false,
+      showPhotoListModal: false,
+      selectedDevice: {}
     };
   },
   created() {
@@ -619,6 +633,13 @@ export default {
       this.businessKey = record.id;
       this.showMapModal = true;
     },
+    handleViewPersonLib (device){
+      this.selectedDevice = device;
+      this.showPhotoListModal = true;
+    },
+    onDevicePhotoListClose (){
+      this.showPhotoListModal = false;
+    }
   },
   mounted: function() {
     var self = this;

src/views/base/devicePhoto-list.vue

@@ -0,0 +1,182 @@
+<template>
+  <el-dialog
+    :visible.sync="showDialog"
+    :title="title"
+    :modal-append-to-body="false"
+    :append-to-body="true"
+    style="text-align:left;"
+    width="900px"
+    @close="closeDialog"
+    :close-on-click-modal="false"
+  >
+    <el-row>
+        <el-col :span="8">
+            <ul class="personlib-list">
+                <li v-for="lib in personLibs" :key="lib.Name" @click="changeLib(lib)">
+                    {{lib.Name}}({{lib.FaceNum}})
+                </li>
+            </ul>
+        </el-col>
+        <el-col :span="16">
+            <div>
+                <el-input placeholder="请输入编号" v-model="qryData" @keyup.enter.native="changePage(1)">
+                    <el-button slot="append" icon="el-icon-search" @click="changePage(1)"></el-button>
+                </el-input>
+            </div>
+            <el-table
+                :data="personList"
+                v-loading="loading"
+                :element-loading-text="loadingText"
+                style="width: 100%;min-height:400px;">
+                <el-table-column label="头像"
+                    width="60">
+                    <template slot-scope="{row}">
+                        <div style="border-radius:50%;width:48px;height:48px;overflow:hidden;">      
+                            <template v-if="row.ImageList.length>0">
+                                <img :src="'data:image/png;base64,' + row.ImageList[0].Data" style="object-fit:cover;" width="48" height="48"/>
+                            </template>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column
+                    prop="PersonName"
+                    label="姓名"
+                    width="150">
+                </el-table-column>
+                <el-table-column
+                    prop="Remarks"
+                    label="备注"
+                    width="150">
+                </el-table-column>
+                <el-table-column label="操作" width="100" fixed="right">
+                    <template slot-scope="{row}">
+                    <el-button type="danger" size="mini" @click="handleDelete(row)">删除</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <el-pagination
+                :current-page.sync="pageIndex"
+                :total="totalElements"
+                :page-size="pageSize"
+                :page-sizes="pageSizeList"
+                @current-change="changePage"
+                @size-change="pageSizeChange"
+                layout="total, sizes, prev, next, jumper"
+            ></el-pagination>
+        </el-col>
+    </el-row>
+  </el-dialog>
+</template>
+<script>
+import deviceInfoApi from "@/api/base/deviceInfo";
+
+export default {
+  name: 'devicePhotoList',
+  props: ["device"],
+  data() {
+      return {
+        showDialog: true,
+        title: "设备照片查看",
+        tableData: [],
+        personLibs: [],
+        pageSize: 5,
+        pageSizeList: [3,4,5,6],
+        pageIndex: 0,
+        totalElements: 0,        
+        loading: false,
+        loadingText: "加载中",
+        libId: 0,
+        personList: [],
+        qryData: ""
+      }
+  },
+  methods: {      
+    indexMethod(index) {
+      return (this.pageIndex - 1) * this.pageSize + (index + 1);
+    },
+    closeDialog() {
+      this.$emit("close", false);
+    },
+    changeLib(lib) {
+        this.libId = lib.ID;
+
+        this.changePage(1);
+    },
+    changePage(pageIndex) {
+        this.loading = true;
+        this.loadingText = "加载中...";
+        this.pageIndex = pageIndex;
+
+        var formData = new FormData();
+
+        formData.append("deviceNo", this.device.deviceNo);
+        formData.append("libId", this.libId);
+        formData.append("offset", (this.pageIndex - 1)*this.pageSize);
+        formData.append("limit", this.pageSize);
+        formData.append("qryType", 27);
+        formData.append("qryData", this.qryData);
+
+        deviceInfoApi.personList(formData).then(response=>{
+            this.loading = false;
+            var jsonData = response.data;
+
+            if(jsonData.result){
+                this.personList = jsonData.data.Response.Data.PersonList.PersonInfoList;
+                this.totalElements = jsonData.data.Response.Data.Total;
+            }
+        });
+    },
+    pageSizeChange(pageSize) {
+        this.pageSize = pageSize;
+        this.changePage(1);
+    },
+    handleDelete(record) {
+      var self = this;
+
+      self.$confirm("是否确认删除" + record.PersonName + "?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(() => {
+          deviceInfoApi.deletePerson(this.device.deviceNo,this.libId,record.PersonID)
+          .then(function(response) {
+            var jsonData = response.data;
+
+            if (jsonData.result) {
+              // var index = self.tableData.indexOf(record);
+              // self.tableData.splice(index, 1);
+              self.queryPersonLib();
+              self.changePage(self.pageIndex);
+
+              self.$message({
+                type: "success",
+                message: "删除成功!"
+              });
+            }
+          });
+        });
+    },
+    queryPersonLib() {
+         deviceInfoApi.personLibList(this.device.deviceNo).then(response=>{
+            var jsonData = response.data;
+            
+
+            if(jsonData.result){
+                this.personLibs = jsonData.data.Response.Data.LibList;
+            }
+        });
+    }
+  },
+  created() {
+      if(this.device!=null){
+          this.queryPersonLib();
+      }
+  }
+}
+</script>
+<style lang="scss">
+.personlib-list li{
+    line-height:30px;
+    cursor:pointer;
+}
+</style>