feat:巡检功能增加关联设备

weapp/package/inspectionInput/inspectionInput.js

@@ -13,7 +13,7 @@ Page({
         address: '', // 当前位置
         imgUrl: getApp().globalData.imgUrl,
         checkItems: [], // 检查项
-        inspectContent: {}, // 巡检内容
+        inspectContentArr: [], // 巡检内容
         isCommitting: false,
         /*** 扫码巡检 ***/
         planList: null, // 巡检计划列表
@@ -61,21 +61,41 @@ Page({
     },
 
     // 获取巡检模板
-    getPatrolTemplate (templateId) {
+    getPatrolTemplate(templateId, pointDevices = []) {
         Request.get(getPatrolTemplate(templateId)).then(res => {
             const checkItems = res.rows[0].checkItems;
-            const inspectContent = {};
+            let inspectContentArr = [];
-            for (const c of checkItems) {
+            // 有绑定设备的点位，每个设备都要检查各个检查项
-                inspectContent[c.name] = {
+            if (pointDevices.length) {
+                pointDevices.forEach(device => {
+                    inspectContentArr.push({
+                        deviceName: device.device.name,
+                        deviceId: device.deviceId,
+                        checkItems: checkItems.map(c => ({
+                            id: `${device.deviceId}-${c.id}`,
+                            name: c.name,
                             isNormal: null,
                             msgInp: null,
                             level: null,
                             imgs: [],
-                };
+                        }))
+                    })
+                });
+            } else {
+                inspectContentArr.push({
+                    checkItems: checkItems.map(c => ({
+                        id: c.id,
+                        name: c.name,
+                        isNormal: null,
+                        msgInp: null,
+                        level: null,
+                        imgs: [],
+                    }))
+                })
             }
             this.setData({
                 checkItems,
-                inspectContent,
+                inspectContentArr: inspectContentArr,
             })
         })
     },
@@ -90,11 +110,12 @@ Page({
         });
 
         const curPlan = this.data.planList[e.detail.columns[0].index];
+        const nextItemData = curPlan.points.find(p => p.id == this.data.scenePointId)
         this.setData({
             dataList: curPlan,
-            itemData: curPlan.points.find(p => p.id == this.data.scenePointId)
+            itemData: nextItemData
         });
-        this.getPatrolTemplate(curPlan.templateId);
+        this.getPatrolTemplate(curPlan.templateId, nextItemData.pointDevices);
     },
 
     onPickerCancel(e) {
@@ -142,40 +163,41 @@ Page({
 
     handleChangeTwo(e) {
         const isNormal = e.detail === 'normal';
-        const inspectContent = this.data.inspectContent;
+        const { deviceidx, itemidx } = e.currentTarget.dataset;
-        inspectContent[e.currentTarget.dataset.item].isNormal = isNormal;
+        let nextInspectContentArr = this.data.inspectContentArr;
+
+        nextInspectContentArr[deviceidx].checkItems[itemidx].isNormal = isNormal;
         if (isNormal) { // 清除异常数据
-            inspectContent[e.currentTarget.dataset.item].msgInp = null;
+            nextInspectContentArr[deviceidx].checkItems[itemidx].msgInp = null;
-            inspectContent[e.currentTarget.dataset.item].level = null;
+            nextInspectContentArr[deviceidx].checkItems[itemidx].level = null;
-            inspectContent[e.currentTarget.dataset.item].imgs = [];
+            nextInspectContentArr[deviceidx].checkItems[itemidx].imgs = [];
         }
-        this.setData({
+        this.setData({ inspectContentArr: nextInspectContentArr })
-            inspectContent,
-        })
     },
 
     handleChangeThree(e) {
-        const inspectContent = this.data.inspectContent;
+        const { deviceidx, itemidx } = e.currentTarget.dataset;
-        inspectContent[e.currentTarget.dataset.item].level = e.detail;
+        let nextInspectContentArr = this.data.inspectContentArr;
-        this.setData({
+
-            inspectContent
+        nextInspectContentArr[deviceidx].checkItems[itemidx].level = e.detail;
-        })
+        this.setData({ inspectContentArr: nextInspectContentArr })
     },
 
     // 巡查详情
     bindInput: function (e) {
-        const inspectContent = this.data.inspectContent;
+        const { deviceidx, itemidx } = e.currentTarget.dataset;
-        inspectContent[e.currentTarget.dataset.item].msgInp = e.detail.value;
+        let nextInspectContentArr = this.data.inspectContentArr;
-        this.setData({
+
-            inspectContent
+        nextInspectContentArr[deviceidx].checkItems[itemidx].msgInp = e.detail.value;
-        })
+        this.setData({ inspectContentArr: nextInspectContentArr })
     },
 
     // 上传图片
     chooseImg: function (e) { // 这里是选取图片的方法
+        const { deviceidx, itemidx } = e.currentTarget.dataset;
         const that = this;
         let pics = [];
-        const detailPics = that.data.inspectContent[e.currentTarget.dataset.item].imgs;
+        const detailPics = that.data.inspectContentArr[deviceidx].checkItems[itemidx].imgs;
         if (detailPics.length >= 20) {
             wx.showToast({
                 title: '最多选择20张图片上传',
@@ -203,16 +225,16 @@ Page({
                     }
                     pics.push(imgs[i].tempFilePath)
                 }
-                that.uploadimg({
+                that.uploadImg({
                     url: getApp().globalData.webUrl + '_upload/attachments/project', // 图片上传的接口
                     path: pics, // 选取的图片的地址数组
-                }, e.currentTarget.dataset.item);
+                }, deviceidx, itemidx);
             },
         })
     },
 
     //多张图片上传
-    uploadimg: function (data, itemName) {
+    uploadImg: function (data, deviceidx, itemidx) {
         wx.showLoading({
             title: '上传中...',
             mask: true,
@@ -221,7 +243,7 @@ Page({
             i = data.i ? data.i : 0,
             success = data.success ? data.success : 0,
             fail = data.fail ? data.fail : 0;
-        let imgs = that.data.inspectContent[itemName].imgs;
+        let imgs = that.data.inspectContentArr[deviceidx].checkItems[itemidx].imgs;
         wx.uploadFile({
             url: data.url,
             filePath: data.path[i],
@@ -232,19 +254,15 @@ Page({
                 let str = JSON.parse(resp.data) // 返回的结果，可能不同项目结果不一样
                 str = str.uploaded
                 if (imgs.length >= 20) {
-                    const inspectContent = that.data.inspectContent;
+                    let nextInspectContentArr = that.data.inspectContentArr;
-                    inspectContent[itemName].imgs = imgs;
+                    nextInspectContentArr[deviceidx].checkItems[itemidx].imgs = imgs;
-                    that.setData({
+                    that.setData({ inspectContentArr: nextInspectContentArr });
-                        inspectContent,
-                    });
                     return false;
                 } else {
                     imgs.push(str);
-                    const inspectContent = that.data.inspectContent;
+                    let nextInspectContentArr = that.data.inspectContentArr;
-                    inspectContent[itemName].imgs = imgs;
+                    nextInspectContentArr[deviceidx].checkItems[itemidx].imgs = imgs;
-                    that.setData({
+                    that.setData({ inspectContentArr: nextInspectContentArr });
-                        inspectContent,
-                    })
                 }
             },
             fail: (res) => {
@@ -260,7 +278,7 @@ Page({
                     data.i = i;
                     data.success = success;
                     data.fail = fail;
-                    that.uploadimg(data, itemName); // 递归，回调自己
+                    that.uploadImg(data, deviceidx, itemidx); // 递归，回调自己
                 }
             }
         });
@@ -268,22 +286,19 @@ Page({
 
     // 删除图片
     deleteImg: function (e) {
-        let imgs = this.data.inspectContent[e.currentTarget.dataset.item].imgs;
+        const { deviceidx, itemidx, index } = e.currentTarget.dataset;
-        const index = e.currentTarget.dataset.index;
+        let imgs = this.data.inspectContentArr[deviceidx].checkItems[itemidx].imgs;
         imgs.splice(index, 1);
-        const inspectContent = this.data.inspectContent;
+        let nextInspectContentArr = this.data.inspectContentArr;
-        inspectContent[e.currentTarget.dataset.item].imgs = imgs;
+        nextInspectContentArr[deviceidx].checkItems[itemidx].imgs = imgs;
-        this.setData({
+        this.setData({ inspectContentArr: nextInspectContentArr })
-            inspectContent
-        });
     },
 
     // 预览图片
     previewImg: function (e) {
-        // 获取当前图片的下标
+        const { deviceidx, itemidx, index } = e.currentTarget.dataset;
-        const index = e.currentTarget.dataset.index;
         // 所有图片
-        const imgs = this.data.inspectContent[e.currentTarget.dataset.item].imgs;
+        const imgs = this.data.inspectContentArr[deviceidx].checkItems[itemidx].imgs;
         const newImgs = imgs.map(i => this.data.imgUrl + i);
         wx.previewImage({
             // 当前显示图片
@@ -307,12 +322,11 @@ Page({
         if (that.data.isCommitting) { return }
         let {
             itemData,
-            inspectContent,
+            inspectContentArr,
             dataList,
             address
         } = that.data;
         let alarm = false;
-
         if (!address) {
             wx.showToast({
                 title: '请获取当前位置',
@@ -321,9 +335,10 @@ Page({
             })
             return;
         }
-
+        let reportArr = inspectContentArr.map(d => ({ ...d, alarm: false }));
-        for (const item in inspectContent) {
+        for (const [index, device] of inspectContentArr.entries()) {
-            if (inspectContent[item].isNormal === null) {
+            for (const item of device.checkItems) {
+                if (item.isNormal === null) {
                     wx.showToast({
                         title: '请填写完整',
                         icon: 'none',
@@ -331,7 +346,7 @@ Page({
                     })
                     return;
                 }
-            if ((!inspectContent[item].isNormal) && (!inspectContent[item].level || !inspectContent[item].msgInp)) {
+                if ((!item.isNormal) && (!item.level || !item.msgInp)) {
                     wx.showToast({
                         title: '异常项必须输入巡查详情和选择严重等级',
                         icon: 'none',
@@ -339,8 +354,10 @@ Page({
                     })
                     return;
                 }
-            if (inspectContent[item].isNormal === false) {
+                if (item.isNormal === false) {
-                alarm = true;
+                    alarm = true; // 巡检记录异常
+                    reportArr[index].alarm = true; // 设备异常
+                }
             }
         }
         const { id, name, departmentId, deptName } = wx.getStorageSync('userInfo');
@@ -353,7 +370,7 @@ Page({
                 project: dataList.project,
                 frequency: dataList.frequency,
                 itemData: itemData,
-                inspectContent,
+                inspectContent: reportArr,
                 address: address
             },
             alarm,
@@ -398,7 +415,7 @@ Page({
                 dataList,
                 itemData
             })
-            that.getPatrolTemplate(dataList.templateId);
+            that.getPatrolTemplate(dataList.templateId, itemData.pointDevices);
         }
     },
 

weapp/package/inspectionInput/inspectionInput.wxml

@@ -1,8 +1,24 @@
 <!-- package/inspectionInput/inspectionInput.wxml -->
 <view class="popBox">
   <view wx:if="{{planList}}">
-    <t-cell class="block" title="选择巡检计划" arrow hover note="{{planListText}}" bind:click="onPlanListPicker" />
+    <t-cell
-    <t-picker visible="{{planListVisible}}" value="{{planListValue}}" data-key="planList" title="选择巡检计划" cancelBtn="取消" confirmBtn="确认" bindchange="onPickerChange" bindcancel="onPickerCancel">
+      class="block"
+      title="选择巡检计划"
+      arrow
+      hover
+      note="{{planListText}}"
+      bind:click="onPlanListPicker"
+    />
+    <t-picker
+      visible="{{planListVisible}}"
+      value="{{planListValue}}"
+      data-key="planList"
+      title="选择巡检计划"
+      cancelBtn="取消"
+      confirmBtn="确认"
+      bindchange="onPickerChange"
+      bindcancel="onPickerCancel"
+    >
       <t-picker-item options="{{planList}}" format></t-picker-item>
     </t-picker>
   </view>
@@ -24,36 +40,113 @@
     </view>
   </view>
   <view class="divider" />
-  <view wx:for="{{checkItems}}" wx:key="id">
+
+  <!-- 渲染巡检内容 -->
+  <view
+    wx:for="{{inspectContentArr}}"
+    wx:key="deviceId"
+    wx:for-item="device"
+    wx:for-index="deviceidx"
+  >
+    <view wx:if="{{device.deviceName}}" class="flex flex-start" style="height: 40px"
+      >{{device.deviceName}}</view
+    >
+    <view wx:for="{{device.checkItems}}" wx:key="id" wx:for-index="itemidx">
       <view class="flex-between">
         <view class="item-name">{{item.name}}：</view>
-      <van-radio-group style="padding:10px 15px;" data-item="{{item.name}}" bindchange="handleChangeTwo">
+        <van-radio-group
-        <van-radio style="margin-right: 20px;" class="radio-text" color="#1979ff" name="normal">正常</van-radio>
+          style="padding:10px 15px;"
+          data-deviceidx="{{deviceidx}}"
+          data-itemidx="{{itemidx}}"
+          bindchange="handleChangeTwo"
+        >
+          <van-radio style="margin-right: 20px;" class="radio-text" color="#1979ff" name="normal"
+            >正常</van-radio
+          >
           <van-radio class="radio-text" checked-color="#CC0000" name="abnormal">异常</van-radio>
         </van-radio-group>
       </view>
       <view class="divider" />
-    <van-radio-group class="flex-end" style="padding:10px 15px;" data-item="{{item.name}}" bindchange="handleChangeThree" wx:if="{{inspectContent[item.name].isNormal === false}}">
+      <van-radio-group
-      <van-radio style="margin-right: 20px;" class="radio-text" checked-color="#FF9900" name="轻微">轻微</van-radio>
+        class="flex-end"
-      <van-radio style="margin-right: 20px;" class="radio-text" checked-color="#FF3300" name="中度">中度</van-radio>
+        style="padding:10px 15px;"
+        data-deviceidx="{{deviceidx}}"
+        data-itemidx="{{itemidx}}"
+        bindchange="handleChangeThree"
+        wx:if="{{item.isNormal === false}}"
+      >
+        <van-radio
+          style="margin-right: 20px;"
+          class="radio-text"
+          checked-color="#FF9900"
+          name="轻微"
+          >轻微</van-radio
+        >
+        <van-radio
+          style="margin-right: 20px;"
+          class="radio-text"
+          checked-color="#FF3300"
+          name="中度"
+          >中度</van-radio
+        >
         <van-radio class="radio-text" checked-color="#990000" name="严重">严重</van-radio>
       </van-radio-group>
-    <textarea class="textarea" placeholder="请输入巡查详情" maxlength="-1" wx:if="{{inspectContent[item.name].isNormal === false}}" data-item="{{item.name}}" bindinput="bindInput"></textarea>
+      <textarea
-    <view class="weui-uploader" style="padding: 20rpx 30rpx;overflow-y:scroll;" wx:if="{{inspectContent[item.name].isNormal === false}}">
+        class="textarea"
+        placeholder="请输入巡查详情"
+        maxlength="-1"
+        wx:if="{{item.isNormal === false}}"
+        data-deviceidx="{{deviceidx}}"
+        data-itemidx="{{itemidx}}"
+        bindinput="bindInput"
+      />
+      <view
+        class="weui-uploader"
+        style="padding: 20rpx 30rpx;overflow-y:scroll;"
+        wx:if="{{item.isNormal === false}}"
+      >
         <view class="img-v weui-uploader__bd" style="overflow:hidden;">
-        <view class='pic' wx:for="{{inspectContent[item.name].imgs}}" wx:for-item="img" wx:key="*this">
+          <view
-          <image class='weui-uploader__img showImg' src="{{imgUrl + img}}" data-index="{{index}}" data-item="{{item.name}}" mode="aspectFill" bindtap="previewImg">
+            class="pic"
-            <icon type='cancel' class="delete-btn" data-index="{{index}}" data-item="{{item.name}}" catchtap="deleteImg"></icon>
+            wx:for="{{item.imgs}}"
+            wx:for-item="img"
+            wx:key="*this"
+          >
+            <image
+              class="weui-uploader__img showImg"
+              src="{{imgUrl + img}}"
+              data-index="{{index}}"
+              data-deviceidx="{{deviceidx}}"
+              data-itemidx="{{itemidx}}"
+              mode="aspectFill"
+              bindtap="previewImg"
+            >
+              <icon
+                type="cancel"
+                class="delete-btn"
+                data-index="{{index}}"
+                data-deviceidx="{{deviceidx}}"
+                data-itemidx="{{itemidx}}"
+                catchtap="deleteImg"
+              />
             </image>
           </view>
           <!-- 用来提示用户上传图片 -->
-        <view class="weui-uploader__input-box pic" data-item="{{item.name}}" bindtap="chooseImg">
+          <view
+            class="weui-uploader__input-box pic"
+            data-item="{{item.name}}"
+            data-deviceidx="{{deviceidx}}"
+            data-itemidx="{{itemidx}}"
+            bindtap="chooseImg"
+          >
             <image class="upload" src="/images/upload.png" />
           </view>
         </view>
       </view>
       <view class="divider" />
     </view>
+  </view>
+
   <view class="btnBox">
     <view class="cancel" bindtap="bindCancel">取消</view>
     <view class="submit" bindtap="addPatrolRecord">提交</view>

weapp/package/polling/inspectionRecordDetail/inspectionRecordDetail.js

@@ -1,4 +1,5 @@
 // package/inspectionRecord/inspectionRecordDetail/inspectionRecordDetail.js
+const moment = require("../../../utils/moment");
 Page({
 
   /**
@@ -7,21 +8,34 @@ Page({
   data: {
     dataList: '',
     imgUrl: getApp().globalData.imgUrl,
-    activeValues: []
+    activeValues: [],
+    multiActiveValues: [],
+    // 1.1 版本(2023-10-18)之前 dataList.points.inspectContent 为 Object, 1.1版本因增加点位关联设备改为 Array
+    priorToV1_1: false,
   },
 
-  handleChange(e) {
+  handleCollapseChange(e) {
-    this.setData({
+    this.setData({ activeValues: e.detail });
-      activeValues: e.detail,
+  },
-    });
+
+  handleMultiCollapseChange(e) {
+    const { deviceidx } = e.currentTarget.dataset;
+    let nextMultiActiveValues = this.data.multiActiveValues;
+    nextMultiActiveValues[deviceidx] = e.detail;
+    this.setData({ multiActiveValues: nextMultiActiveValues });
   },
 
   // 预览图片
   previewImg: function (e) {
     // 获取当前图片的下标
-    const index = e.currentTarget.dataset.index;
+    const { index, deviceidx, itemidx } = e.currentTarget.dataset;
     // 所有图片
-    const imgs = this.data.dataList.points.inspectContent[e.currentTarget.dataset.key].imgs;
+    let imgs = []
+    if (this.data.priorToV1_1) {
+      imgs = this.data.dataList.points.inspectContent[e.currentTarget.dataset.key].imgs;
+    } else {
+      imgs = this.data.dataList.points.inspectContent[deviceidx].checkItems[itemidx].imgs;
+    }
     const newImgs = imgs.map(i => this.data.imgUrl + i);
     wx.previewImage({
       current: newImgs[index],
@@ -35,7 +49,16 @@ Page({
   onLoad(options) {
     const that = this;
     const data = JSON.parse(decodeURIComponent(options.data))
-    that.setData({ dataList: data })
+    const priorToV1_1 = moment(data.inspectionTime).isBefore(moment('2023-10-18'))
+    let nextMultiActiveValues = []
+    if (!priorToV1_1) {
+      nextMultiActiveValues = data.points.inspectContent.map(c => ([]))
+    }
+    that.setData({
+      dataList: data,
+      priorToV1_1,
+      nextMultiActiveValues,
+    })
   },
 
   /**

weapp/package/polling/inspectionRecordDetail/inspectionRecordDetail.wxml

@@ -7,35 +7,119 @@
     <van-cell size="large" title="巡检频次：" value="{{dataList.points.frequency}}" />
     <van-cell size="large" title="上次巡检日期：" value="{{dataList.lastInspectionTime}}" />
     <van-cell size="large" title="本次巡检日期：" value="{{dataList.inspectionTime}}" />
-    <van-cell size="large" title="巡检结果：" value="{{dataList.alarm ? '异常' : '正常'}}" style="--cell-value-color: {{dataList.alarm ? '#FF0000' : '#006BE3'}}" />
+    <van-cell
+      size="large"
+      title="巡检结果："
+      value="{{dataList.alarm ? '异常' : '正常'}}"
+      style="--cell-value-color: {{dataList.alarm ? '#FF0000' : '#006BE3'}}"
+    />
     <van-cell size="large" title="当前点位：" value="{{dataList.points.itemData.name}}" />
-    <van-cell size="large" title="当前位置：" value="{{dataList.points.address}}" title-width="80px" />
+    <van-cell
+      size="large"
+      title="当前位置："
+      value="{{dataList.points.address}}"
+      title-width="80px"
+    />
   </van-cell-group>
+
   <view style="margin-top: 16px">
-    <van-collapse value="{{ activeValues }}" bind:change="handleChange">
+    <block wx:if="{{ priorToV1_1 }}">
-      <view wx:for="{{dataList.points.inspectContent}}" wx:key="key" wx:for-index="key" wx:for-item="value">
+      <van-collapse value="{{ activeValues }}" bind:change="handleCollapseChange">
+        <view
+          wx:for="{{dataList.points.inspectContent}}"
+          wx:key="key"
+          wx:for-index="key"
+          wx:for-item="value"
+        >
           <van-collapse-item
             title="{{key}}"
             value="{{value.isNormal ? '正常' : '异常'}}"
             style="--cell-value-color: {{value.isNormal ? '#006BE3' : '#FF0000'}}; --collapse-item-title-disabled-color: #323233"
             disabled="{{value.isNormal}}"
           >
-          <view class='content'>
+            <view class="content">
-            <view class='title'>描述：</view>
+              <view class="title">描述：</view>
-            <view class='value'>{{value.msgInp || '--'}}</view>
+              <view class="value">{{value.msgInp || '--'}}</view>
             </view>
-          <view class='content'>
+            <view class="content">
-            <view class='title'>异常等级：</view>
+              <view class="title">异常等级：</view>
-            <view class='value'>{{value.level || '--'}}</view>
+              <view class="value">{{value.level || '--'}}</view>
             </view>
-          <view class='content'>巡检图片：</view>
+            <view class="content">巡检图片：</view>
             <view class="img-v weui-uploader__bd" style="overflow:hidden;">
-            <view class='pic' wx:for="{{value.imgs}}" wx:for-item="item" wx:key="*this">
+              <view class="pic" wx:for="{{value.imgs}}" wx:for-item="item" wx:key="*this">
-              <image class='weui-uploader__img showImg' src="{{imgUrl + item}}" data-img="{{imgUrl + item}}" data-index="{{index}}" data-key="{{key}}" mode="aspectFill" bindtap="previewImg"></image>
+                <image
+                  class="weui-uploader__img showImg"
+                  src="{{imgUrl + item}}"
+                  data-img="{{imgUrl + item}}"
+                  data-index="{{index}}"
+                  data-key="{{key}}"
+                  mode="aspectFill"
+                  bindtap="previewImg"
+                ></image>
               </view>
             </view>
           </van-collapse-item>
         </view>
       </van-collapse>
+    </block>
+    <block wx:else>
+      <view
+        wx:for="{{dataList.points.inspectContent}}"
+        wx:for-item="device"
+        wx:for-index="deviceidx"
+        style="margin-top: 16px"
+      >
+        <van-collapse
+          value="{{ multiActiveValues[deviceidx] }}"
+          data-deviceidx="{{deviceidx}}"
+          bind:change="handleMultiCollapseChange"
+        >
+          <view
+            wx:if="{{device.deviceName}}"
+            class="flex flex-between"
+            style="padding: 8px 16px 0; background: #fff"
+          >
+            <view>{{device.deviceName}}</view>
+            <view style="color: {{device.alarm ? '#FF0000' : '#006BE3'}};">
+              {{device.alarm ? '异常': '正常'}}
+            </view>
+          </view>
+          <view wx:for="{{device.checkItems}}" wx:for-index="itemidx">
+            <van-collapse-item
+              title="{{item.name}}"
+              value="{{item.isNormal ? '正常' : '异常'}}"
+              style="--cell-value-color: {{item.isNormal ? '#006BE3' : '#FF0000'}}; --collapse-item-title-disabled-color: #323233"
+              disabled="{{item.isNormal}}"
+            >
+              <view class="content">
+                <view class="title">描述：</view>
+                <view class="value">{{item.msgInp || '--'}}</view>
+              </view>
+              <view class="content">
+                <view class="title">异常等级：</view>
+                <view class="value">{{item.level || '--'}}</view>
+              </view>
+              <view class="content">巡检图片：</view>
+              <view class="img-v weui-uploader__bd" style="overflow:hidden;">
+                <view class="pic" wx:for="{{item.imgs}}" wx:for-item="img" wx:key="*this">
+                  <image
+                    class="weui-uploader__img showImg"
+                    src="{{imgUrl + img}}"
+                    data-img="{{imgUrl + img}}"
+                    data-index="{{index}}"
+                    data-key="{{key}}"
+                    data-deviceidx="{{deviceidx}}"
+                    data-itemidx="{{itemidx}}"
+                    mode="aspectFill"
+                    bindtap="previewImg"
+                  ></image>
+                </view>
+              </view>
+            </van-collapse-item>
+          </view>
+        </van-collapse>
+      </view>
+    </block>
   </view>
 </view>