前端代码提交

src/views/data-visible/image-identification/index.vue

@@ -14,8 +14,7 @@
                 :key="item.value"
                 :label="item.label"
                 :value="item.value"
-              >
-              </el-option>
+              />
             </el-select>
           </div>
           <div class="custom-menu">
@@ -34,25 +33,44 @@
         </div>
       </el-col>
       <el-col :xs="16" :sm="16" :md="18" :lg="20">
-        <el-form
-          :model="form"
-        >
-          <el-form-item label="宽度:">20cm</el-form-item>
-        </el-form>
-        <el-timeline>
-          <el-timeline-item
-            v-for="(image, index) in images"
-            :key="index"
-            :timestamp="image.step"
-          >
-            <el-image
-              style="width: 400px; height: 400px"
-              :src="image.url"
-              fit="contain"
-              :preview-src-list="[image.url]"
-            />
-          </el-timeline-item>
-        </el-timeline>
+        <div class="demo-image__preview">
+          <el-row>
+            <descriptions
+              label-position="top"
+              label-width="80px"
+              style="margin-left: 30px"
+            >
+              <descriptions-item label="标准尺寸" value="">
+                <div style="font-weight: bold;color:blue">240mm</div>
+              </descriptions-item>
+              <descriptions-item label="故障尺寸" value="">
+                <div style="font-weight: bold;color:red">230mm</div>
+              </descriptions-item>
+            </descriptions>
+            <descriptions
+              label-position="top"
+              label-width="80px"
+              style="margin-left: 30px"
+            >
+              <descriptions-item label="当前尺寸" value="">
+                <div style="font-weight: bold;color:green">232mm</div>
+              </descriptions-item>
+              <descriptions-item label="采集时间" value="">
+                <div style="font-weight: bold;color:green">2020-08-08 12:31</div>
+              </descriptions-item>
+            </descriptions>
+          </el-row>
+          <el-row style="margin-top: 100px">
+            <el-col v-for="(item,index) in images" :key="index" :span="6" style="text-align: center">
+              <div style="font-weight: bold;">{{ item.step }}</div>
+              <el-image
+                style="width: 240px; height: 180px;margin: 10px auto"
+                :src="item.url"
+                :preview-src-list="srcList"
+              />
+            </el-col>
+          </el-row>
+        </div>
       </el-col>
     </el-row>
   </el-card>
@@ -75,6 +93,12 @@ export default {
       deviceType: null,
       deviceTypeList: [],
       deviceInstanceList: [],
+      srcList: [
+        step1,
+        step2,
+        step3,
+        step4
+      ],
       images: [
         {
           content: '活动按期开始',