cirs/cirs-ui/src/views/index.vue

<template>

  <div class="app-container home">
    <el-carousel :interval="5000" type="card" height="380px">
      <el-carousel-item >
          <img src='@/assets/images/img4.png' @click="recommend" alt="图片无法加载" style="width:100%;height:100%" class="image"/>
        <span style="position: absolute; bottom: 10px;right: 300px;font-size: 30px;font-family: 新宋体;color: #3A71A8;font-weight: bold">元器件推荐</span>
      </el-carousel-item>
      <el-carousel-item >
        <img src='@/assets/images/img6.png' @click="task" alt="图片无法加载" style="width:100%;height:100%" class="image"/>
        <span style="position: absolute; bottom: 10px;right: 300px;font-size: 30px;font-family: 新宋体;color: #3A71A8;font-weight: bold">验证任务</span>
      </el-carousel-item>

      <el-carousel-item >
        <span v-if="ac===null" style="color:#FFFFFF">该任务还没有运行得到准确率和召回率</span>
        <div style="width: 640px;height:400px;" id="piechart" >

        </div>

      </el-carousel-item>
    </el-carousel>

    <div align="center"  style="font-size: 18px;">
      <div style="margin: 10px;color:rgb(255 0 0)">评分最高的10个元器件</div>
    <el-row>
      <el-col :span="11" v-for="(idx,index) in topten.length" :key="idx" :offset="index%2 > 0 ? 1 : 0">
        <el-card class="bgimg" :body-style="{ padding: '0px' }" style="font-size: 20px;background-color: revert;margin-bottom: 20px;">

          <div style="padding: 34px;">
            <p>
              <span>
                <el-button
                  type="text"
                  style="font-size:20px;color: wheat;"
                  @click="handleDetail(topten[idx-1].componentId)"
                >{{ topten[idx-1].componentName}} </el-button>
              </span>
            </p>
            <p>
              <div class="block">
                <span style="font-size: 14px;color: wheat;"> 评分：</span>
                <el-rate
                  v-model="topten[idx-1].score"
                  disabled
                  show-score
                  text-color="#ff9900"
                >
                </el-rate>
              </div>

          </div>
        </el-card>
      </el-col>
    </el-row>

    </div>
    <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" label-width="200px">
        <h2><b>元器件基本信息</b></h2>
        <el-form-item label="元器件名称" prop="componentName">
          <el-input v-model="form.componentName" readonly='true' />
        </el-form-item>
        <el-form-item label="生产厂家" prop="manufacturer">
          <el-input v-model="form.manufacturer" readonly='true' />
        </el-form-item>
        <el-form-item label="型号规格" prop="componentModel">
          <el-input v-model="form.componentModel" readonly='true' />
        </el-form-item>
        <el-form-item label="国产替代型号" prop="replaceDomesticModel">
          <el-input v-model="form.replaceDomesticModel" readonly='true' />
        </el-form-item>
        <el-form-item label="质量等级" prop="qualityGrade">
          <el-input v-model="form.qualityGrade" readonly='true' />
        </el-form-item>
        <el-form-item label="供货周期" prop="deliveryCycle">
          <el-input v-model="form.deliveryCycle" readonly='true' />
        </el-form-item>
        <el-form-item label="供货量(个/年）" prop="supplyQuantity">
          <el-input v-model="form.supplyQuantity" readonly='true' />
        </el-form-item>
        <el-form-item label="价格" prop="unitPrice">
          <el-input v-model="form.unitPrice" readonly='true' />
        </el-form-item>
        <el-form-item label="ZZKK等级" prop="zzkkLevel">
          <el-input v-model="form.zzkkLevel" readonly='true' />
        </el-form-item>
        <el-form-item label="是否在优选目录内" prop="inPreference">
          <el-input v-model="form.inPreference" readonly='true' />
        </el-form-item>
        <el-form-item label="停产断档日期" prop="shutdownDate">
          <el-date-picker clearable
                          v-model="form.shutdownDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          readonly='true'>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="封装形式" prop="encapsulationMode">
          <el-input v-model="form.encapsulationMode" readonly='true' />
        </el-form-item>
        <el-form-item label="最大正向电流IFM" prop="paramIfm" v-if="form.paramIfm!==null && form.paramIfm!==''">
          <el-input v-model="form.paramIfm" readonly='true' />
        </el-form-item>
        <el-form-item label="最大反向工作电压VRRM" prop="paramVrrm" v-if="form.paramVrrm!==null && form.paramVrrm!==''">
          <el-input v-model="form.paramVrrm" readonly='true' />
        </el-form-item>
        <el-form-item label="最大浪涌电流IFSM" prop="paramIfsm" v-if="form.paramIfsm!==null && form.paramIfsm!==''">
          <el-input v-model="form.paramIfsm" readonly='true' />
        </el-form-item>
        <el-form-item label="稳压状态下的动态电阻ZZ" prop="paramZz" v-if="form.paramZz!==null && form.paramZz!==''">
          <el-input v-model="form.paramZz" readonly='true' />
        </el-form-item>
        <el-form-item label="最大额定功率PCM" prop="paramPcm" v-if="form.paramPcm!==null && form.paramPcm!==''">
          <el-input v-model="form.paramPcm" readonly='true' />
        </el-form-item>
        <el-form-item label="最大集电极电流ICM" prop="paramIcm" v-if="form.paramIcm!==null && form.paramIcm!==''">
          <el-input v-model="form.paramIcm" readonly='true' />
        </el-form-item>
        <el-form-item label="最大集电极-基极电压VCBO" prop="paramVcbo" v-if="form.paramVcbo!==null && form.paramVcbo!==''">
          <el-input v-model="form.paramVcbo" readonly='true' />
        </el-form-item>
        <el-form-item label="集电极-发射极电压VCEO" prop="paramVceo" v-if="form.paramVceo!==null && form.paramVceo!==''">
          <el-input v-model="form.paramVceo" readonly='true' />
        </el-form-item>
        <el-form-item label="发射极-基极电压VEBO" prop="paramVebo" v-if="form.paramVebo!==null && form.paramVebo!==''">
          <el-input v-model="form.paramVebo" readonly='true' />
        </el-form-item>
        <el-form-item label="漏源电压VDSS" prop="paramVdss" v-if="form.paramVdss!==null && form.paramVdss!==''">
          <el-input v-model="form.paramVdss" readonly='true' />
        </el-form-item>
        <el-form-item label="漏极直流电流ID" prop="paramId" v-if="form.paramId!==null && form.paramId!==''">
          <el-input v-model="form.paramId" readonly='true' />
        </el-form-item>
        <el-form-item label="漏-源通态电阻RDS(on)" prop="paramRdsOn" v-if="form.paramRdsOn!==null && form.paramRdsOn!==''">
          <el-input v-model="form.paramRdsOn" readonly='true' />
        </el-form-item>
        <el-form-item label="抗静电能力" prop="antistaticCapacity">
          <el-input v-model="form.antistaticCapacity" readonly='true' />
        </el-form-item>
        <el-form-item label="抗辐照能力" prop="radiationResistance">
          <el-input v-model="form.radiationResistance" readonly='true' />
        </el-form-item>
        <el-form-item label="材料" prop="materials">
          <el-input v-model="form.materials" type="textarea" readonly='true'/>
        </el-form-item>
        <el-form-item label="工艺" prop="craft">
          <el-input v-model="form.craft" type="textarea" readonly='true' />
        </el-form-item>
        <el-form-item label="重量" prop="weight">
          <el-input v-model="form.weight" readonly='true' />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" readonly='true' />
        </el-form-item>
      </el-form>



    </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() {
    return {
      // 版本号
      currentTime:0,
      startTime:0,
      version: "1.0.0",
      form: {},
      title:'',
      topten:[],
      currentDate: new Date(),
      open:false,
      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;
        console.log(this.topten)
      })
    },
    recommend(){
      this.$router.push('/recommend')
    },
    handleDetail(id) {

      this.loading = true
      getComponent(id).then(response => {
        this.form = response.data;
        this.title = "元器件详情";

      });
      getBycomponentId(id).then(res=>{
        this.useInfoList = res.data
      })
      this.open = true;
      this.startTime = Date.now()
      this.pageviewTime.componentId = id
      // this.pageviewTime.usedBy = row.applications.toString()
      this.loading = false
    },

    //监听元器件详情dialog关闭
    closedialog(){
      // this.currentTime = Date.now()
      // this.pageviewTime.viewTime = this.currentTime - this.startTime
      // // this.pageviewTime.useScene = this.use_scene
      // // console.log(this.use_scene)
      // this.pageviewTime.searchCondition = this.searchCondition
      // addTime(this.pageviewTime).then(res=>{
      //   // 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 = 0;
        let callback = 0;
        if(this.ac!==null&&this.callback!==null){
          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{
  border: 2px solid #032d60;
  -webkit-box-shadow: #07417a 0 0 10px;
  -moz-box-shadow: #07417a 0 0 10px;
  box-shadow: inset 0 0 30px #07417a;
  position: relative;
}
.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;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }


  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color:#004d8c;
  }

}


</style>