图片预览

package-lock.json

@@ -12,6 +12,7 @@
         "@vitejs/plugin-vue": "^2.3.1",
         "array-to-tree": "^3.3.2",
         "axios": "^0.21.1",
+        "echarts": "^5.3.3",
         "element-plus": "^1.0.2-beta.52",
         "moment": "^2.29.3",
         "vite": "2.6.13",
@@ -928,6 +929,15 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "node_modules/echarts": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.3.3.tgz",
+      "integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.3.2"
+      }
+    },
     "node_modules/element-plus": {
       "version": "1.0.2-beta.71",
       "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-1.0.2-beta.71.tgz",
@@ -3402,6 +3412,11 @@
         "glob": "^7.1.2"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
     "node_modules/tunnel-agent": {
       "version": "0.6.0",
       "resolved": "https://registry.npmmirror.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
@@ -3818,6 +3833,14 @@
       "engines": {
         "node": ">=12"
       }
+    },
+    "node_modules/zrender": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.3.2.tgz",
+      "integrity": "sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
     }
   },
   "dependencies": {
@@ -4569,6 +4592,15 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.3.3.tgz",
+      "integrity": "sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==",
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "5.3.2"
+      }
+    },
     "element-plus": {
       "version": "1.0.2-beta.71",
       "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-1.0.2-beta.71.tgz",
@@ -6460,6 +6492,11 @@
         "glob": "^7.1.2"
       }
     },
+    "tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
     "tunnel-agent": {
       "version": "0.6.0",
       "resolved": "https://registry.npmmirror.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
@@ -6790,6 +6827,14 @@
       "resolved": "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-20.2.9.tgz",
       "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
       "dev": true
+    },
+    "zrender": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.3.2.tgz",
+      "integrity": "sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==",
+      "requires": {
+        "tslib": "2.3.0"
+      }
     }
   }
 }

src/types/api/tairead/index.ts

@@ -61,5 +61,6 @@ export interface TAireadModel {
     reviewTime: string;
     reviewValue: number;
     taskReviewId: string;
+    src:string;
     srcList: string[];
 }

src/views/workdata/workingdata/index.vue

@@ -30,22 +30,6 @@
               :header-cell-style="{ background: '#606266', color: '#FFFFFF' }">
               <el-table-column fixed type="index" width="50" align="center" />
               <el-table-column fixed prop="deviceSn" label="设备SN" header-align="center" width="120" />
-              <!-- <el-table-column label="数据准确性" header-align="center" width="100">
-                <template #default="scope">
-                  <el-space direction="vertical" alignment="start">
-                    <el-tag size="small">完整：<span style="color: blue">{{
-                        tool.formatPercent(scope.row.dataAccuracy)
-                    }}</span> </el-tag>
-                    <el-tag size="small">读数：<span style="color: blue">{{
-                        tool.formatPercent(scope.row.dataAccuracy)
-                    }}</span>
-                    </el-tag>
-                    <el-tag size="small">原始：<span style="color: green">{{
-                        tool.formatPercent(scope.row.originaldataAccuracy)
-                    }}</span></el-tag>
-                  </el-space>
-                </template>
-              </el-table-column> -->
               <el-table-column label="时间" header-align="center" width="180">
                 <template #default="scope">
                   <el-space direction="vertical" alignment="start">
@@ -62,7 +46,7 @@
               <el-table-column label="图片" header-align="center" width="150">
                 <template #default="scope">
                   <div style="display: flex; align-items: center">
-                    <el-image :preview-src-list="scope.row.srcList" />
+                    <el-image :src="scope.row.src" :preview-src-list="scope.row.srcList" />
                   </div>
                 </template>
               </el-table-column>
@@ -182,16 +166,18 @@ const queryList = () => {
         if (flag === "1") {
           const pageData = res as PageResult<TAireadModel[]>;
           const list = [] as TAireadModel[];
-          // pageData.list.forEach(element => {
-          //    element.srcList=[];
-          //   if (element.smallJpgUrl) {
-          //     element.srcList.push(element.smallJpgUrl);
-          //   }
+          pageData.list.forEach(element => {
+            element.srcList = [];
+            if (element.smallJpgUrl) {
+              element.src = element.smallJpgUrl;
+              element.srcList.push(element.smallJpgUrl);
+            }
 
-          //   if (element.bigJpgRul) {
-          //     element.srcList.push(element.smallJpgUrl);
-          //   }
-          // });
+            if (element.bigJpgRul) {
+              element.src = element.bigJpgRul;
+              element.srcList.push(element.bigJpgRul);
+            }
+          });
           state.tableData = pageData.list;
           state.total = pageData.total;
         } else {
@@ -210,8 +196,8 @@ const queryList = () => {
 };
 
 const handleClick = (tab: any) => {
-  if (tab.index === 1) {
-
+  if (tab.index === "1") {
+    init();
   }
 };