更新图片展示

admin/src/views/land_plant/edit.vue

@@ -72,7 +72,7 @@
     </el-select>
 </el-form-item>
                 <el-form-item label="种植图片" prop="pic">
-    <material-picker v-model="formData.pic" :limit="4" />
+    <material-picker :limit="4" />
 </el-form-item>
                 <el-form-item label="播种时间" prop="plant_date">
     <el-date-picker 

admin/src/views/land_plant/index.vue

@@ -81,7 +81,7 @@
       <span>{{ row.plant_date ? timeFormat(row.plant_date, 'yyyy-mm-dd hh:MM:ss') : '' }}</span>
     </template>
 </el-table-column>
-                    <el-table-column label="操作" width="200" align="center" fixed="right">
+                    <el-table-column label="操作" width="300" align="center" fixed="right">
                         <template #default="{ row }">
                             <el-button
                                 v-perms="['land.land_plant/edit']"
@@ -91,6 +91,10 @@
                             >
                                 编辑
                             </el-button>
+                            <el-button type="primary" link @click="handleDetail(row)"
+                            >
+                                种植图片
+                            </el-button>
                             <el-button v-perms="['land.land_plant_action/lists']" type="primary" link >
                                 <router-link
                                     :to="{
@@ -121,6 +125,22 @@
         </el-card>
         <edit-popup v-if="showEdit" ref="editRef" :dict-data="dictData" @success="getLists" @close="showEdit = false" />
     </div>
+
+    <el-dialog v-model="dialogPicVisible" title="种植图片" center>
+        <div style="display: inline-block; margin: 12px" v-for="img in detailData.picData" :key="img">
+            <el-image
+                style="width: 200px; height: 200px"
+                :src="img"
+                :zoom-rate="1.2"
+                :max-scale="5"
+                :min-scale="0.2"
+                :preview-src-list="detailData.picData"
+                :initial-index="4"
+                fit="cover"
+                center
+            />
+        </div>
+    </el-dialog>
 </template>
 
 <script lang="ts" setup name="landPlantLists">
@@ -172,6 +192,22 @@ const { pager, getLists, resetParams, resetPage } = usePaging({
     params: queryParams
 })
 
+const dialogPicVisible = ref(false)
+const detailData = reactive({
+    picData: [] as any[]
+})
+
+// 详情
+const handleDetail = (data: any) => {
+    detailData.picData = []
+    const picList = JSON.parse(data.pic)
+    for (const key in picList) {
+        detailData.picData.unshift(picList[key])
+    }
+    console.log(detailData.picData)
+    dialogPicVisible.value = true
+}
+
 // 添加
 const handleAdd = async () => {
     showEdit.value = true

admin/src/views/monitor_alarm/index.vue

@@ -53,7 +53,7 @@
 </el-table-column>
                     <el-table-column label="操作" width="140" align="center" fixed="right">
                         <template #default="{ row }">
-                            <el-button text @click="handleDetail(row)"
+                            <el-button type="primary" link @click="handleDetail(row)"
                             >
                                 详情
                             </el-button>
@@ -97,8 +97,8 @@ const editRef = shallowRef<InstanceType<typeof EditPopup>>()
 // 是否显示编辑框
 const showEdit = ref(false)
 
-var device_id = query.device_id
-if (typeof(device_id) == 'undefined') {
+let device_id = query.device_id
+if (typeof device_id == 'undefined') {
     device_id = ''
 }