feat: 穿梭框内嵌图片、日志页面自滚动、调整整体样式

src/api/modules/taais/task.ts

@@ -13,3 +13,11 @@ export const getTrainList = () => {
 export const getInferList = () => {
   return tableData.inferTableData
 }
+
+export const getTransferImgList1 = () => {
+  return tableData.transferImgList1
+}
+
+export const getTransferImgList2 = () => {
+  return tableData.transferImgList2
+}

src/assets/mock/tableData.json

@@ -51,5 +51,41 @@
       "algo3": "results0.jpg",
       "algo4": "results0.jpg"
     }
+  ],
+  "transferImgList1": [
+    {
+      "label": "input.jpg",
+      "key": "111"
+    },
+    {
+      "label": "results0.jpg",
+      "key": "112"
+    },
+    {
+      "label": "F1_curve.png",
+      "key": "113"
+    },
+    {
+      "label": "R_curve.png",
+      "key": "114"
+    }
+  ],
+  "transferImgList2": [
+    {
+      "label": "input.jpg",
+      "key": "111"
+    },
+    {
+      "label": "input.jpg",
+      "key": "112"
+    },
+    {
+      "label": "input.jpg",
+      "key": "113"
+    },
+    {
+      "label": "R_curve.png",
+      "key": "114"
+    }
   ]
 }

src/routers/modules/routerData.json

@@ -26,7 +26,7 @@
         "link": "",
         "full": false,
         "affix": true,
-        "noCache": true,
+        "noCache": false,
         "activeMenu": "/index"
       }
     },

src/views/taais/homePage/createTask.vue

@@ -1,26 +1,49 @@
 <template>
-  <dv-border-box1 ref="borderRef" style="width: 1200px; height: 800px; margin: 0 auto">
-    <div class="createTask-container">
-      <h3 class="title">{{ title }}</h3>
-      <h4 class="title2" v-if="pageIndex === 4">训练算法</h4>
-      <ProForm :items-options="items" :form-options="_options" :model="model" class="proform">
-        <template #transfer1="{ formModel }">
-          <el-transfer filterable v-model="formModel.transfer1" :data="dataT" />
-        </template>
-        <template #username1="{ formModel }">
-          <el-input v-model="formModel.username1" />
-        </template>
-      </ProForm>
-      <el-button class="btn back" v-if="pageIndex === 1" @click="onReturn()"> 返回 </el-button>
-      <el-button class="btn back" v-else @click="onBack()"> 上一步 </el-button>
-      <el-button class="btn next" type="success" @click="onNext()"> {{ nextBtnText }} </el-button>
-    </div>
-  </dv-border-box1>
+  <div class="bigBox">
+    <dv-border-box1 ref="borderRef" style="width: 1000px; height: 600px; margin: 0 auto">
+      <div class="createTask-container">
+        <h3 class="title">{{ title }}</h3>
+        <h4 class="title2" v-if="pageIndex === 4">训练算法</h4>
+        <ProForm :items-options="items" :form-options="_options" :model="model" class="proform">
+          <template #transfer1="{ formModel }">
+            <el-transfer filterable v-model="formModel.transfer1" :data="transferImg1">
+              <template #default="{ option }">
+                <el-image
+                  style="width: 50px; height: 50px"
+                  :preview-src-list="[getImageUrl(option.label)]"
+                  :src="getImageUrl(option.label)"
+                ></el-image>
+              </template>
+            </el-transfer>
+          </template>
+          <template #transfer2="{ formModel }">
+            <el-transfer filterable v-model="formModel.transfer2" :data="transferImg2">
+              <template #default="{ option }">
+                <el-image
+                  style="width: 50px; height: 50px"
+                  :preview-src-list="[getImageUrl(option.label)]"
+                  :src="getImageUrl(option.label)"
+                ></el-image>
+              </template>
+            </el-transfer>
+          </template>
+          <template #username1="{ formModel }">
+            <el-input v-model="formModel.username1" />
+          </template>
+        </ProForm>
+        <el-button class="btn back" v-if="pageIndex === 1" @click="onReturn()"> 返回 </el-button>
+        <el-button class="btn back" v-else @click="onBack()"> 上一步 </el-button>
+        <el-button class="btn" style="margin-left: -15px" v-if="pageIndex === 4" @click="onAdd()"> 增加 </el-button>
+        <el-button class="btn next" type="success" @click="onNext()"> {{ nextBtnText }} </el-button>
+      </div>
+    </dv-border-box1>
+  </div>
 </template>
 <script setup lang="tsx" name="createTask">
 import { ref, ComputedRef, computed, watch } from 'vue'
 import ProForm from '@/components/ProForm/index.vue'
 import { useRouter } from 'vue-router'
+import { getTransferImgList1, getTransferImgList2 } from '@/api/modules/taais/task'
 let model = {
   parameter1: 'yolov8n.pt',
   parameter2: 'yolov8n.yaml',
@@ -35,6 +58,9 @@ const router = useRouter()
 let pageIndex = ref<number>(1)
 let title = ref('目标精准捕获任务选择')
 let nextBtnText = ref('下一步')
+const transferImg1 = getTransferImgList1()
+const transferImg2 = getTransferImgList2()
+
 watch(
   () => pageIndex.value,
   value => {
@@ -69,23 +95,6 @@ watch(
   },
   { immediate: true }
 )
-const dataT = [
-  {
-    key: 1,
-    label: '社么',
-    disabled: false
-  },
-  {
-    key: 2,
-    label: 'wan',
-    disabled: false
-  },
-  {
-    key: 3,
-    label: '伊尔',
-    disabled: true
-  }
-]
 const enumData = [
   {
     label: '选项1',
@@ -364,7 +373,7 @@ let items: ProForm.ItemsOptions[] = [
   {
     formItemOptions: {
       label: '选择推理数据',
-      prop: 'transfer1',
+      prop: 'transfer2',
       show: () => {
         return pageIndex.value === 5 ? true : false
       }
@@ -555,14 +564,21 @@ let items: ProForm.ItemsOptions[] = [
     }
   }
 ]
+// 增加训练算法
+const onAdd = () => {
+  console.log('增加')
+}
+const getImageUrl = name => {
+  return new URL(`../../../assets/taaisImg/${name}`, import.meta.url).href
+}
 const onReturn = () => {
   router.push(`/index`)
 }
 let flag = ref<number>(0) //跳转到日志页面的flag,0为训练日志、1为推理日志
 const onNext = () => {
   if (pageIndex.value === 7) {
-    router.push({ path: `/logPage/${flag.value}`, query: { type: 1 } })
     pageIndex.value = 1
+    router.push({ path: `/logPage/${flag.value}`, query: { type: 1 } })
   } else {
     pageIndex.value++
   }

src/views/taais/homePage/index.scss

@@ -1,6 +1,42 @@
 .home-container {
+  width: 100%;
   height: 100%;
   min-height: 550px;
+  :deep(.card) {
+    padding: 60px 65px 60px 85px;
+  }
+}
+:deep(.card) {
+  width: 100%;
+  height: 100%;
+  background-image: url('../../../assets/taaisImg/53bg.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+
+  // color: black;
+}
+:deep(.el-table) {
+  // --el-table-border-color: transparent;
+  --el-table-border-color: #bdbdbe7b;
+
+  // --el-table-border: none;
+  --el-table-text-color: #bdbdbe;
+  --el-table-header-text-color: #bdbdbe;
+  --el-table-row-hover-bg-color: transparent;
+  --el-table-current-row-bg-color: transparent;
+  --el-table-header-bg-color: transparent;
+  --el-table-bg-color: transparent;
+  --el-table-tr-bg-color: transparent;
+
+  // --el-table-expanded-cell-bg-color: transparent;
+}
+.bigBox {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-image: url('../../../assets/taaisImg/53bg.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
 }
 %box-basic {
   width: 70%;
@@ -12,6 +48,10 @@
   @extend %box-basic;
 
   position: relative;
+  margin-top: 100px;
+  :deep(.el-transfer-panel__item) {
+    height: 60px;
+  }
   .title {
     margin: 20px;
   }
@@ -30,22 +70,26 @@
   }
 }
 .logPage-container {
-  position: relative;
-
   @extend %box-basic;
+
+  position: relative;
+  width: 90%;
+  margin-top: 50px;
   .btn {
     margin-top: 10px;
-    margin-left: 80px;
+    margin-left: 100px;
   }
   .next {
     position: absolute;
-    right: 150px;
+    right: 120px;
   }
   .log {
-    width: 80%;
+    width: 90%;
     height: 550px; /* 根据需要调整 */
     padding: 10px;
-    margin-left: 100px;
+
+    // padding-bottom: 80px;
+    margin-left: 50px;
     overflow-y: auto;
     font-family: 'Courier New', monospace;
     color: #4aff84;
@@ -55,22 +99,17 @@
     padding-left: 10px;
     margin-bottom: 5px;
     border-left: 3px solid #4aff84;
-    animation: fade-in 1s;
-  }
-
-  @keyframes fade-in {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
   }
 }
+:deep(.dv-border-box-1 .border-box-content) {
+  text-align: left;
+}
 .trainResult-container {
   @extend %box-basic;
 
+  width: 90%;
   padding: 3px 20px;
+  margin-top: 50px;
   .table {
     position: relative;
     width: 100%;

src/views/taais/homePage/index.vue

@@ -1,28 +1,30 @@
 <template>
   <div class="home-container">
-    <div class="table-box">
-      <ProTable
-        ref="proTable"
-        row-key="userId"
-        :data="taskDataList.data"
-        :indent="20"
-        :columns="columns"
-        :data-callback="dataCallback"
-        :request-auto="false"
-        :init-param="initParam"
-        :tool-button="false"
-        :search-col="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3 }"
-      >
-        <!-- 表格 header 按钮 -->
-        <template #tableHeader="">
-          <el-button type="primary" v-auth="['system:user:add']" :icon="CirclePlus" @click="createTask()"> 创建任务 </el-button>
-        </template>
-        <!-- 表格操作 -->
-        <template #operation="scope">
-          <el-button type="primary" link :icon="View" @click="openDialog(3, '任务查看', scope.row)">查看</el-button>
-        </template>
-      </ProTable>
-    </div>
+    <dv-border-box1 ref="borderRef" style="width: 100%; height: 100%; margin: 0 auto">
+      <div class="table-box">
+        <ProTable
+          ref="proTable"
+          row-key="userId"
+          :data="taskDataList.data"
+          :indent="20"
+          :columns="columns"
+          :data-callback="dataCallback"
+          :request-auto="false"
+          :init-param="initParam"
+          :tool-button="false"
+          :search-col="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3 }"
+        >
+          <!-- 表格 header 按钮 -->
+          <template #tableHeader="">
+            <el-button type="primary" v-auth="['system:user:add']" :icon="CirclePlus" @click="createTask()"> 创建任务 </el-button>
+          </template>
+          <!-- 表格操作 -->
+          <template #operation="scope">
+            <el-button type="primary" link :icon="View" @click="openDialog(3, '任务查看', scope.row)">查看</el-button>
+          </template>
+        </ProTable>
+      </div>
+    </dv-border-box1>
   </div>
 </template>
 
@@ -123,3 +125,6 @@ const columns = reactive<ColumnProps<User.ResUserList>[]>([
   { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
 ])
 </script>
+<style scoped lang="scss">
+@import './index.scss';
+</style>

src/views/taais/homePage/inferResult.vue

@@ -1,62 +1,66 @@
 <template>
-  <div class="trainResult-container">
-    <h4>推理结果</h4>
-    <div class="table">
-      <ProTable
-        ref="proTable"
-        row-key="userId"
-        :indent="20"
-        :columns="columns"
-        :tool-button="false"
-        :data="tableData"
-        :request-auto="false"
-        :init-param="initParam"
-        :search-col="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3 }"
-      >
-        <template #yuan="scope">
-          <el-image
-            style="width: 100px; height: 100px"
-            :preview-src-list="[getImageUrl(scope.row.yuan)]"
-            :src="getImageUrl(scope.row.yuan)"
-            :z-index="9999"
-          />
-        </template>
-        <template #algo1="scope">
-          <el-image
-            style="width: 100px; height: 100px"
-            :preview-src-list="[getImageUrl(scope.row.algo1)]"
-            :src="getImageUrl(scope.row.algo1)"
-            :z-index="9999"
-          />
-        </template>
-        <template #algo2="scope">
-          <el-image
-            style="width: 100px; height: 100px"
-            :preview-src-list="[getImageUrl(scope.row.algo2)]"
-            :src="getImageUrl(scope.row.algo2)"
-            :z-index="9999"
-          />
-        </template>
-        <template #algo3="scope">
-          <el-image
-            style="width: 100px; height: 100px"
-            :preview-src-list="[getImageUrl(scope.row.algo3)]"
-            :src="getImageUrl(scope.row.algo3)"
-            :z-index="9999"
-          />
-        </template>
-        <template #algo4="scope">
-          <el-image
-            style="width: 100px; height: 100px"
-            :preview-src-list="[getImageUrl(scope.row.algo3)]"
-            :src="getImageUrl(scope.row.algo4)"
-            :z-index="9999"
-          />
-        </template>
-      </ProTable>
-      <el-button class="btn" @click="goBack()"> 上一步 </el-button>
-      <el-button class="btn next" type="success" @click="goHome()"> 返回首页 </el-button>
-    </div>
+  <div class="bigBox">
+    <dv-border-box1 ref="borderRef" style="width: 1200px; height: 730px; margin: 0 auto">
+      <div class="trainResult-container">
+        <h4>推理结果</h4>
+        <div class="table">
+          <ProTable
+            ref="proTable"
+            row-key="userId"
+            :indent="20"
+            :columns="columns"
+            :tool-button="false"
+            :data="tableData"
+            :request-auto="false"
+            :init-param="initParam"
+            :search-col="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3 }"
+          >
+            <template #yuan="scope">
+              <el-image
+                style="width: 100px; height: 100px"
+                :preview-src-list="[getImageUrl(scope.row.yuan)]"
+                :src="getImageUrl(scope.row.yuan)"
+                :z-index="9999"
+              />
+            </template>
+            <template #algo1="scope">
+              <el-image
+                style="width: 100px; height: 100px"
+                :preview-src-list="[getImageUrl(scope.row.algo1)]"
+                :src="getImageUrl(scope.row.algo1)"
+                :z-index="9999"
+              />
+            </template>
+            <template #algo2="scope">
+              <el-image
+                style="width: 100px; height: 100px"
+                :preview-src-list="[getImageUrl(scope.row.algo2)]"
+                :src="getImageUrl(scope.row.algo2)"
+                :z-index="9999"
+              />
+            </template>
+            <template #algo3="scope">
+              <el-image
+                style="width: 100px; height: 100px"
+                :preview-src-list="[getImageUrl(scope.row.algo3)]"
+                :src="getImageUrl(scope.row.algo3)"
+                :z-index="9999"
+              />
+            </template>
+            <template #algo4="scope">
+              <el-image
+                style="width: 100px; height: 100px"
+                :preview-src-list="[getImageUrl(scope.row.algo4)]"
+                :src="getImageUrl(scope.row.algo4)"
+                :z-index="9999"
+              />
+            </template>
+          </ProTable>
+          <el-button class="btn" @click="goBack()"> 上一步 </el-button>
+          <el-button class="btn next" type="success" @click="goHome()"> 返回首页 </el-button>
+        </div>
+      </div>
+    </dv-border-box1>
   </div>
 </template>
 <script setup lang="tsx" name="trainResult">

src/views/taais/homePage/logPage.vue

@@ -1,18 +1,22 @@
 <template>
-  <div class="logPage-container">
-    <el-divider content-position="left">
-      <span style="font-size: 18px; font-weight: 700">{{ title }}</span>
-    </el-divider>
-    <div class="log">
-      <div class="p" v-for="(item, index) in logInfo" :key="index">{{ item }}</div>
-    </div>
-    <el-button class="btn" @click="goTrainResult()"> 上一步 </el-button>
-    <el-button type="success" v-if="over" class="btn next" @click="onResult()"> 查看结果 </el-button>
+  <div class="bigBox">
+    <dv-border-box1 ref="borderRef" style="width: 1200px; height: 700px; margin: 0 auto">
+      <div class="logPage-container">
+        <el-divider content-position="left">
+          <span style="font-size: 18px; font-weight: 700">{{ title }}</span>
+        </el-divider>
+        <div class="log">
+          <div class="p" v-for="(item, index) in logInfo" :key="index">{{ item }}</div>
+        </div>
+        <el-button class="btn" @click="goTrainResult()"> 上一步 </el-button>
+        <el-button type="primary" v-if="over" class="btn next" @click="onResult()"> 查看结果 </el-button>
+      </div>
+    </dv-border-box1>
   </div>
 </template>
 <script setup lang="tsx" name="logPage">
 import { useRouter, useRoute } from 'vue-router'
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, nextTick } from 'vue'
 import trainLog from '@/assets/mock/Untitled-1.json'
 import inferLog from '@/assets/mock/Untitled-2.json'
 const router = useRouter()
@@ -31,10 +35,16 @@ title.value = routeFlag === '0' ? '训练日志' : '推理日志'
 time.value = routeFlag === '0' ? 50 : 500
 const info = () => {
   let index = 0
+  const logContainer = document.querySelector('.log')
   timer.value = setInterval(() => {
     if (index < infoList.value.length) {
       logInfo.value.push(infoList.value[index])
       index++
+      nextTick(() => {
+        if (logContainer) {
+          logContainer.scrollTop = logContainer.scrollHeight
+        }
+      })
     } else {
       clearInterval(timer.value)
       over.value = true

src/views/taais/homePage/trainResult.vue

@@ -1,54 +1,58 @@
 <template>
-  <div class="trainResult-container">
-    <h4>算法运行及结果</h4>
-    <div class="table">
-      <ProTable
-        ref="proTable"
-        row-key="userId"
-        :indent="20"
-        :columns="columns"
-        :tool-button="false"
-        :data="tableData"
-        :request-auto="false"
-        :init-param="initParam"
-        :search-col="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3 }"
-      >
-        <template #algo1="scope">
-          <el-image
-            style="width: 100px; height: 100px"
-            :preview-src-list="[getImageUrl(scope.row.algo1)]"
-            :src="getImageUrl(scope.row.algo1)"
-            :z-index="9999"
-          />
-        </template>
-        <template #algo2="scope">
-          <el-image
-            style="width: 100px; height: 100px"
-            :preview-src-list="[getImageUrl(scope.row.algo2)]"
-            :src="getImageUrl(scope.row.algo2)"
-            :z-index="9999"
-          />
-        </template>
-        <template #algo3="scope">
-          <el-image
-            style="width: 100px; height: 100px"
-            :preview-src-list="[getImageUrl(scope.row.algo3)]"
-            :src="getImageUrl(scope.row.algo3)"
-            :z-index="9999"
-          />
-        </template>
-        <template #algo4="scope">
-          <el-image
-            style="width: 100px; height: 100px"
-            :preview-src-list="[getImageUrl(scope.row.algo4)]"
-            :src="getImageUrl(scope.row.algo4)"
-            :z-index="9999"
-          />
-        </template>
-      </ProTable>
-      <el-button class="btn" @click="goLog()"> 查看日志 </el-button>
-      <el-button class="btn next" type="success" @click="goInferLog()"> 下一步 </el-button>
-    </div>
+  <div class="bigBox">
+    <dv-border-box1 ref="borderRef" style="width: 1200px; height: 730px; margin: 0 auto">
+      <div class="trainResult-container">
+        <h4>算法运行及结果</h4>
+        <div class="table">
+          <ProTable
+            ref="proTable"
+            row-key="userId"
+            :indent="20"
+            :columns="columns"
+            :tool-button="false"
+            :data="tableData"
+            :request-auto="false"
+            :init-param="initParam"
+            :search-col="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 3 }"
+          >
+            <template #algo1="scope">
+              <el-image
+                style="width: 100px; height: 100px"
+                :preview-src-list="[getImageUrl(scope.row.algo1)]"
+                :src="getImageUrl(scope.row.algo1)"
+                :z-index="9999"
+              />
+            </template>
+            <template #algo2="scope">
+              <el-image
+                style="width: 100px; height: 100px"
+                :preview-src-list="[getImageUrl(scope.row.algo2)]"
+                :src="getImageUrl(scope.row.algo2)"
+                :z-index="9999"
+              />
+            </template>
+            <template #algo3="scope">
+              <el-image
+                style="width: 100px; height: 100px"
+                :preview-src-list="[getImageUrl(scope.row.algo3)]"
+                :src="getImageUrl(scope.row.algo3)"
+                :z-index="9999"
+              />
+            </template>
+            <template #algo4="scope">
+              <el-image
+                style="width: 100px; height: 100px"
+                :preview-src-list="[getImageUrl(scope.row.algo4)]"
+                :src="getImageUrl(scope.row.algo4)"
+                :z-index="9999"
+              />
+            </template>
+          </ProTable>
+          <el-button class="btn" @click="goLog()"> 查看日志 </el-button>
+          <el-button class="btn next" type="success" @click="goInferLog()"> 下一步 </el-button>
+        </div>
+      </div>
+    </dv-border-box1>
   </div>
 </template>
 <script setup lang="tsx" name="trainResult">