首页优化

cirs-biz/src/main/java/com/cirs/biz/controller/TVerificationTaskController.java

@@ -126,4 +126,9 @@ public class TVerificationTaskController extends BaseController
         ExcelUtil<TVerificationTask> util = new ExcelUtil<TVerificationTask>(TVerificationTask.class);
         util.importTemplateExcel(response, "任务数据");
     }
+
+    @GetMapping("/last")
+    public AjaxResult getLastTask(){
+        return success(tVerificationTaskService.getLastTask());
+    }
 }

cirs-biz/src/main/java/com/cirs/biz/mapper/TVerificationTaskMapper.java

@@ -61,4 +61,5 @@ public interface TVerificationTaskMapper
     public int deleteTVerificationTaskByIds(Long[] ids);
 
 
+    public TVerificationTask getLastTask();
 }

cirs-biz/src/main/java/com/cirs/biz/service/ITVerificationTaskService.java

@@ -60,4 +60,6 @@ public interface ITVerificationTaskService
     public int deleteTVerificationTaskById(Long id);
 
     public String importTask(List<TVerificationTask> taskList, boolean updateSupport, String operName);
+
+    public TVerificationTask getLastTask();
 }

cirs-biz/src/main/java/com/cirs/biz/service/impl/TVerificationTaskServiceImpl.java

@@ -149,4 +149,9 @@ public class TVerificationTaskServiceImpl implements ITVerificationTaskService
         }
         return successMsg.toString();
     }
+
+    @Override
+    public TVerificationTask getLastTask() {
+        return tVerificationTaskMapper.getLastTask();
+    }
 }

cirs-biz/src/main/resources/mapper/biz/TVerificationTaskMapper.xml

@@ -43,7 +43,10 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
         <include refid="selectTVerificationTaskVo"/>
         where id = #{id}
     </select>
-        
+    <select id="getLastTask" resultMap="TVerificationTaskResult">
+        select * from t_verification_task order by id desc limit 1
+    </select>
+
     <insert id="insertTVerificationTask" parameterType="TVerificationTask" useGeneratedKeys="true" keyProperty="id">
         insert into t_verification_task
         <trim prefix="(" suffix=")" suffixOverrides=",">

cirs-ui/package.json

@@ -41,7 +41,7 @@
     "clipboard": "2.0.8",
     "core-js": "3.25.3",
     "dayjs": "^1.11.10",
-    "echarts": "5.4.0",
+    "echarts": "^5.4.0",
     "element-ui": "2.15.13",
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",

cirs-ui/src/api/biz/task.js

@@ -42,3 +42,11 @@ export function delTask(id) {
     method: 'delete'
   })
 }
+
+// 最新验证任务详细
+export function getLastTask() {
+  return request({
+    url: '/biz/task/last',
+    method: 'get'
+  })
+}

cirs-ui/src/main.js

@@ -58,6 +58,7 @@ Vue.component('FileUpload', FileUpload)
 Vue.component('ImageUpload', ImageUpload)
 Vue.component('ImagePreview', ImagePreview)
 
+
 Vue.use(directive)
 Vue.use(plugins)
 Vue.use(VueMeta)

cirs-ui/src/views/index.vue

@@ -1,21 +1,28 @@
 <template>
 
   <div class="app-container home">
-    <div style="text-align: right">
-      <el-button type="primary" @click="recommend">推荐元器件</el-button>
-    </div>
+
 
 
     <el-carousel :interval="5000" type="card" height="380px">
-      <el-carousel-item v-for="img in imgs" :key="img" >
+      <el-carousel-item >
+          <img src='@/assets/images/img4.jpg' @click="recommend" alt="图片无法加载" style="width:100%;height:100%" class="image"/>
+        <span style="position: absolute; bottom: 10px;right: 300px;font-size: 24px;font-family: 新宋体;color: #3A71A8;font-weight: bold">推荐元器件</span>
+      </el-carousel-item>
+      <el-carousel-item >
+        <img src='@/assets/images/img6.jpg' @click="task" alt="图片无法加载" style="width:100%;height:100%" class="image"/>
+        <span style="position: absolute; bottom: 10px;right: 270px;font-size: 24px;font-family: 新宋体;color: #3A71A8;font-weight: bold">验证任务详情</span>
+      </el-carousel-item>
 
-          <img :src="img" alt="图片无法加载" style="object-fit: scale-down; width:100%;height:100%" class="image"/>
+      <el-carousel-item >
+        <div style="width: 640px;height:400px;" id="piechart"></div>
 
       </el-carousel-item>
     </el-carousel>
 
-    <div align="center" style="font-size: 18px"> 评分最高的10个元器件
-    <el-row >
+    <div align="center"  style="font-size: 18px;"> 评分最高的10个元器件
+
+    <el-row class="bgimg" >
       <el-col :span="12" v-for="idx in topten.length" :key="idx" >
         <el-card :body-style="{ padding: '0px' }" style="font-size: 20px;background-color: #d3dce6">
 
@@ -48,10 +55,11 @@
         </el-card>
       </el-col>
     </el-row>
+
     </div>
-    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @close="closedialog">
+    <el-dialog v-loading="loading" :title="title" :visible.sync="open" width="800px" append-to-body @close="closedialog" >
 
-      <el-form  style="border:1px solid #C0C0C0;padding: 5px;margin: auto" ref="form" :model="form" :rules="rules" label-width="200px">
+      <el-form style="border:1px solid #C0C0C0;padding: 5px;margin: auto" ref="form" :model="form" label-width="200px">
         <h2><b>元器件基本信息</b></h2>
         <el-form-item label="元器件名称" prop="componentName">
           <el-input v-model="form.componentName" readonly='true' />
@@ -153,12 +161,15 @@
 
 
     </el-dialog>
+
   </div>
 </template>
 
 <script>
 import { get_top10} from "@/api/biz/evaluation";
 import { getComponent,getBycomponentId,addTime } from "@/api/biz/recommend";
+import {getLastTask} from '@/api/biz/task'
+import * as echarts from 'echarts'
 export default {
   name: "Index",
   data() {
@@ -172,24 +183,32 @@ export default {
       topten:[],
       currentDate: new Date(),
       open:false,
-      imgs:[
-        require('@/assets/images/img1.jpg'),
-        require('@/assets/images/img2.jpg'),
-        require('@/assets/images/img3.jpg'),
-        require('@/assets/images/img4.jpg'),
-        require('@/assets/images/img5.jpg'),
-        require('@/assets/images/img6.jpg')
-      ],
+      ac:'',
+      callback:'',
       pageviewTime:{},
+      loading:false,
+
     };
   },
   created() {
+
     this.get_top_ten()
+
+
+  },
+  mounted() {
+
+    this.myEcharts()
+
   },
   methods: {
+    task(){
+      this.$router.push('/task')
+    },
     goTarget(href) {
       window.open(href, "_blank");
     },
+
     get_top_ten(){
       get_top10().then(res=>{
         this.topten = res.data;
@@ -201,6 +220,7 @@ export default {
     },
     handleDetail(id) {
 
+      this.loading = true
       getComponent(id).then(response => {
         this.form = response.data;
         this.title = "元器件详情";
@@ -213,6 +233,7 @@ export default {
       this.startTime = Date.now()
       this.pageviewTime.componentId = id
       // this.pageviewTime.usedBy = row.applications.toString()
+      this.loading = false
     },
 
     //监听元器件详情dialog关闭
@@ -226,13 +247,120 @@ export default {
       //   // this.$modal.msgSuccess("详情浏览时间成功")
       // })
       this.open = false
+    },
+    myEcharts(){
+      getLastTask().then(res=>{
+        this.ac = res.data.accuracyRate;
+        this.callback = res.data.recallRate;
+        let chartDom = document.getElementById('piechart');
+        let myChart = echarts.init(chartDom);
+        let ac;
+        let callback;
+
+        let endidx = this.ac.indexOf('%')
+
+        ac = endidx!==-1 ? parseFloat(this.ac)/100.0 : parseFloat(this.ac);
+
+        endidx = this.callback.indexOf('%')
+        callback = endidx!==-1 ? parseFloat(this.callback)/100.0 : parseFloat(this.callback);
+
+        let option;
+        option = {
+          title: [
+            {
+              text: '任务：'+res.data.taskName,
+              left: 'center',
+              top: '6%'
+            },
+            {
+              subtext: '任务准确率',
+              left: '30%',
+              top: '75%',
+              textAlign: 'center'
+            },
+            {
+              subtext: '任务召回率',
+              left: '75%',
+              top: '75%',
+              textAlign: 'center'
+
+            },
+          ],
+          tooltip: {
+            trigger: 'item'
+          },
+          legend: {
+            orient: 'vertical',
+            left: 'left'
+          },
+          series: [
+            {
+              name: res.data.taskName,
+              type: 'pie',
+              radius: '50%',
+              center: ['30%', '50%'],
+              data: [
+                {value: (1 - ac).toFixed(4),name:'Error Rate'},
+                { value: ac.toFixed(4), name: 'Accuracy Rate' },
+
+              ],
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+              },
+
+            },
+            {
+              name: res.data.taskName,
+              type: 'pie',
+              radius: '50%',
+              center: ['75%', '50%'],
+              data: [
+                { value: callback.toFixed(4), name: 'Recall Rate' },
+                {value: (1 - callback).toFixed(4),name:'Other...'},
+
+
+              ],
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+              },
+
+            }
+          ]
+
+
+        };
+
+        myChart.setOption(option);
+
+
+
+      })
+
     }
-  }
+
+  },
+
 };
 </script>
 
 <style scoped lang="scss">
+.bgimg{
+  background-image: url('../assets/images/cardbackground.png');
+  background-size: cover;
+  padding: 20px;
+  border-radius: 20px;
+}
 .home {
+  background: radial-gradient(circle at 10% 20%, #3A71A8 0%,  rgb(239, 249, 249)90%);
+  border-radius: 20px;
   blockquote {
     padding: 10px 20px;
     margin: 0 0 20px;