feat: 预测结果示例

src/views/ml/PredictionAll.vue

@@ -36,7 +36,11 @@
           </template>
         </el-table-column>
         <el-table-column prop="finishTime" label="完成时间"></el-table-column>
-        <el-table-column prop="exampleData" label="预测结果示例"></el-table-column>
+        <el-table-column label="预测结果示例">
+          <template #default="scope">
+              <el-button type="text" class="yellow" @click="handleExample(scope.row.exampleData)">预测结果示例</el-button>
+          </template>
+        </el-table-column>
         <el-table-column label="操作" width="180" align="center">
           <template #default="scope">
             <div v-if="scope.row.predictionState === 'SUCCESS'">
@@ -66,6 +70,25 @@
       </template>
     </el-dialog>
 
+    <el-dialog v-model="exampleVisible" title="预测结果示例" width="50%">
+      <el-table
+          :data="exampleArr" border class="table"
+          header-cell-class-name="table-header"
+      >
+          <el-table-column v-for="(i,index) in exampleHead" :label="exampleHead[index]" >
+            <template #default="scope">
+              {{scope.row[index]}}
+            </template>
+          </el-table-column>
+      </el-table>
+      <template #footer>
+          <span class="dialog-footer">
+            <el-button @click="exampleVisible = false">取消</el-button>
+            <el-button type="primary" @click="exampleVisible = false" style="margin-left: 10px"> 确认 </el-button>
+          </span>
+      </template>
+    </el-dialog>
+
   </div>
 </template>
 
@@ -78,13 +101,39 @@ export default {
   name: "PredictionAll",
   setup(){
     const tableData = ref([]);
+    let exampleVisible =ref(false)
+    let exampleHead = ref([])
+    let exampleArr = ref([])
+
+    const handleExample = (example) => {
+      const arrAll = example.split('\n')
+      const arrValue = []
+      const reg=new RegExp("\"","g")
+      exampleHead.value = ((JSON.stringify(arrAll[0])+"")
+          .replace(reg,"")
+          .replace("{","")
+          .replace("}","")
+          .replace("[","")
+          .split(","))
+      for (let i=1;i<arrAll.length-1;i++){
+        const temp = ((JSON.stringify(arrAll[i])+"")
+            .replace(reg,"")
+            .replace("{","")
+            .replace("}","")
+            .replace("[","")
+            .split(","))
+        arrValue.push(temp)
+      }
+      arrValue.push(['...'])
+      exampleArr.value = arrValue
+      exampleVisible.value = true
+    }
 
     const getPage = () => {
       const payload={
         userId: localStorage.getItem("ms_userId")
       }
       getPredictionAll(payload).then(res => {
-        console.log( res.result)
         tableData.value=res.result;
       })
     }
@@ -127,6 +176,10 @@ export default {
       tableData,
       fileName,
       downloadVisible,
+      exampleVisible,
+      exampleHead,
+      exampleArr,
+      handleExample,
       getPage,
       handleDownload,
       download,

src/views/ml/PredictionList.vue

@@ -36,7 +36,11 @@
         </template>
       </el-table-column>
       <el-table-column prop="finishTime" label="完成时间"></el-table-column>
-      <el-table-column prop="exampleData" label="预测结果示例"></el-table-column>
+      <el-table-column label="预测结果示例">
+        <template #default="scope">
+          <el-button type="text" class="yellow" @click="handleExample(scope.row.exampleData)">预测结果示例</el-button>
+        </template>
+      </el-table-column>
       <el-table-column label="操作" width="180" align="center">
         <template #default="scope">
           <div v-if="scope.row.predictionState === 'SUCCESS'">
@@ -66,6 +70,25 @@
     </template>
   </el-dialog>
 
+  <el-dialog v-model="exampleVisible" title="预测结果示例" width="50%">
+    <el-table
+        :data="exampleArr" border class="table"
+        header-cell-class-name="table-header"
+    >
+      <el-table-column v-for="(i,index) in exampleHead" :label="exampleHead[index]" >
+        <template #default="scope">
+          {{scope.row[index]}}
+        </template>
+      </el-table-column>
+    </el-table>
+    <template #footer>
+          <span class="dialog-footer">
+            <el-button @click="exampleVisible = false">取消</el-button>
+            <el-button type="primary" @click="exampleVisible = false" style="margin-left: 10px"> 确认 </el-button>
+          </span>
+    </template>
+  </el-dialog>
+
 </div>
 </template>
 
@@ -80,6 +103,9 @@ export default {
   setup(){
     const route=useRoute()
     const tableData = ref([]);
+    let exampleVisible =ref(false)
+    let exampleHead = ref([])
+    let exampleArr = ref([])
 
     const getPage = () => {
       const payload={
@@ -125,12 +151,39 @@ export default {
         }
       })
     }
+    const handleExample = (example) => {
+      const arrAll = example.split('\n')
+      const arrValue = []
+      const reg=new RegExp("\"","g")
+      exampleHead.value = ((JSON.stringify(arrAll[0])+"")
+          .replace(reg,"")
+          .replace("{","")
+          .replace("}","")
+          .replace("[","")
+          .split(","))
+      for (let i=1;i<arrAll.length-1;i++){
+        const temp = ((JSON.stringify(arrAll[i])+"")
+            .replace(reg,"")
+            .replace("{","")
+            .replace("}","")
+            .replace("[","")
+            .split(","))
+        arrValue.push(temp)
+      }
+      arrValue.push(['...'])
+      exampleArr.value = arrValue
+      exampleVisible.value = true
+    }
 
     return {
       route,
       tableData,
       fileName,
       downloadVisible,
+      exampleVisible,
+      exampleHead,
+      exampleArr,
+      handleExample,
       getPage,
       handleDownload,
       download,