diff --git a/src/api/monitor.js b/src/api/monitor.js
index 8fc6d6d..7a24224 100644
--- a/src/api/monitor.js
+++ b/src/api/monitor.js
@@ -83,7 +83,12 @@ export function getWaterRate(data) {
 export function getCaptureImg(data) {
   return request({
     url:
-      '/device/captureImg?deviceCode=' + data.deviceCode + '&page=' + data.page,
+      '/device/captureImg?deviceCode=' +
+      data.deviceCode +
+      '&page=' +
+      data.page +
+      '&size=' +
+      data.size,
     method: 'get',
     data,
   });
diff --git a/src/views/server/siteDetails/image.vue b/src/views/server/siteDetails/image.vue
index 6731e19..08a47e7 100644
--- a/src/views/server/siteDetails/image.vue
+++ b/src/views/server/siteDetails/image.vue
@@ -1,12 +1,18 @@
 <template>
   <div class="image-list">
-    <div v-for="img in imageData" :key="img" class="block">
-      <el-image
-        style="width: 200px; height: 200px"
-        :src="img"
-        fit="cover"
-        :preview-src-list="imageData"
-      ></el-image>
+    <div class="block">
+      <div class="block_item" :key="img" v-for="(img, index) in imageData">
+        <div class="block_text" @click="handleClick(index)">
+          {{ img.turbidity }}
+        </div>
+        <el-image
+          ref="imageRef"
+          style="width: 200px; height: 200px"
+          :src="img.img"
+          fit="cover"
+          :preview-src-list="imageList"
+        ></el-image>
+      </div>
     </div>
     <div class="page">
       <el-pagination
@@ -36,6 +42,7 @@ export default {
   data() {
     return {
       imageData: [],
+      imageList: [],
       fileUrl: baseURL + '/static/capture/',
       background: true,
       lazy: true,
@@ -44,6 +51,7 @@ export default {
       queryForm: {
         deviceCode: '',
         page: 1,
+        size: 10,
       },
     };
   },
@@ -55,6 +63,9 @@ export default {
   },
   created() {},
   methods: {
+    handleClick(index) {
+      this.$refs.imageRef[index].showViewer = true;
+    },
     showData(row) {
       this.queryForm.deviceCode = row.deviceCode;
       this.fetchData();
@@ -66,6 +77,7 @@ export default {
       //   list[i] = this.fileUrl + list[i];
       // }
       this.imageData = data.items;
+      this.imageList = data.items.map(item => item.img);
       this.total = data.total;
     },
     handleQuery() {
@@ -88,7 +100,31 @@ export default {
 .image-list {
   width: 100%;
   .block {
-    float: left;
+    .block_text {
+      position: absolute;
+      top: 80px;
+      text-align: center;
+      z-index: 1;
+      width: 200px;
+      font-weight: bold;
+      opacity: 0.7;
+      color: #fde2c2;
+      font-size: 48px;
+      transform: rotateZ(-37deg);
+      cursor: pointer;
+      font-family: serif;
+    }
+
+    .block_item {
+      margin: 0 10px;
+      position: relative;
+    }
+    .image-item {
+      position: absolute;
+    }
+
+    display: flex;
+    flex-wrap: wrap;
     margin-left: 20px;
     margin-top: 20px;
   }