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" alt="图片无法加载" style="width:100%;height:100%" class="image" @click="recommend">
        <span style="position: absolute; bottom: 10px;right: 250px;font-size: 30px;font-family: 新宋体;color: rgb(84 242 161);font-weight: bold">元器件推荐</span>
      </el-carousel-item>
      <el-carousel-item>
        <img src="@/assets/images/img7.png" alt="图片无法加载" style="width:100%;height:100%" class="image" @click="task">
        <span style="position: absolute; bottom: 10px;right: 250px;font-size: 30px;font-family: 新宋体;color: rgb(84 242 161);font-weight: bold">长稳评分</span>
      </el-carousel-item>
      <el-carousel-item>
        <span v-if="ac===null" style="color:#FFFFFF">该任务还没有运行得到准确率和召回率</span>
        <div id="piechart" style="width: 640px;height:400px;" />
      </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 v-for="(idx,index) in topten.length" :key="idx" :span="11" :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: #f7ba2a;"
                    @click="handleDetail(topten[idx-1].componentId)"
                  >{{ topten[idx-1].componentName }} </el-button>
                </span>
              </p>
              <div class="block">
                <span style="font-size: 14px;color: #f7ba2a;"> 评分：</span>
                <el-rate
                  v-model="topten[idx-1].score"
                  disabled
                  show-score
                  text-color="#ff9900"
                />
              </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 ref="form" style="border:1px solid #C0C0C0;padding: 5px;margin: auto" :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
            v-model="form.shutdownDate"
            clearable
            type="date"
            value-format="yyyy-MM-dd"
            readonly="true"
          />
        </el-form-item>
        <el-form-item label="封装形式" prop="encapsulationMode">
          <el-input v-model="form.encapsulationMode" readonly="true" />
        </el-form-item>
        <el-form-item v-if="form.paramIfm!==null && form.paramIfm!==''" label="最大正向电流IFM" prop="paramIfm">
          <el-input v-model="form.paramIfm" readonly="true" />
        </el-form-item>
        <el-form-item v-if="form.paramVrrm!==null && form.paramVrrm!==''" label="最大反向工作电压VRRM" prop="paramVrrm">
          <el-input v-model="form.paramVrrm" readonly="true" />
        </el-form-item>
        <el-form-item v-if="form.paramIfsm!==null && form.paramIfsm!==''" label="最大浪涌电流IFSM" prop="paramIfsm">
          <el-input v-model="form.paramIfsm" readonly="true" />
        </el-form-item>
        <el-form-item v-if="form.paramZz!==null && form.paramZz!==''" label="稳压状态下的动态电阻ZZ" prop="paramZz">
          <el-input v-model="form.paramZz" readonly="true" />
        </el-form-item>
        <el-form-item v-if="form.paramPcm!==null && form.paramPcm!==''" label="最大额定功率PCM" prop="paramPcm">
          <el-input v-model="form.paramPcm" readonly="true" />
        </el-form-item>
        <el-form-item v-if="form.paramIcm!==null && form.paramIcm!==''" label="最大集电极电流ICM" prop="paramIcm">
          <el-input v-model="form.paramIcm" readonly="true" />
        </el-form-item>
        <el-form-item v-if="form.paramVcbo!==null && form.paramVcbo!==''" label="最大集电极-基极电压VCBO" prop="paramVcbo">
          <el-input v-model="form.paramVcbo" readonly="true" />
        </el-form-item>
        <el-form-item v-if="form.paramVceo!==null && form.paramVceo!==''" label="集电极-发射极电压VCEO" prop="paramVceo">
          <el-input v-model="form.paramVceo" readonly="true" />
        </el-form-item>
        <el-form-item v-if="form.paramVebo!==null && form.paramVebo!==''" label="发射极-基极电压VEBO" prop="paramVebo">
          <el-input v-model="form.paramVebo" readonly="true" />
        </el-form-item>
        <el-form-item v-if="form.paramVdss!==null && form.paramVdss!==''" label="漏源电压VDSS" prop="paramVdss">
          <el-input v-model="form.paramVdss" readonly="true" />
        </el-form-item>
        <el-form-item v-if="form.paramId!==null && form.paramId!==''" label="漏极直流电流ID" prop="paramId">
          <el-input v-model="form.paramId" readonly="true" />
        </el-form-item>
        <el-form-item v-if="form.paramRdsOn!==null && form.paramRdsOn!==''" label="漏-源通态电阻RDS(on)" prop="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('/marking')
    },
    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
        const chartDom = document.getElementById('piechart')
        const 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,
              textStyle: {
                color: 'rgb(84 242 161)'
              },
              left: 'center',
              top: '6%'
            },
            {
              left: '30%',
              top: '78%',
              textAlign: 'center',
              text: '任务准确率',
              textStyle: {
                fontSize :15,
                color: '#43CD80'
              }
            },
            {

              left: '75%',
              top: '78%',
              textAlign: 'center',
              text: '任务召回率',
              textStyle: {
                fontSize :15,
                color: '#43CD80'
              }


            }
          ],
          tooltip: {
            trigger: 'item',
            formatter: '{b} : {d}%<br/>'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            textStyle: {

              color: '#fff'
            }
          },
          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' }

              ],
              label: {
                show: true, // 显示标签
                position: 'inside', // 在饼图内部显示标签
                formatter: '{b}：{d}%'
              },
              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...' }

              ],
              label: {
                show: true, // 显示标签
                position: 'inside', // 在饼图内部显示标签
                formatter: '{b}：{d}%'
              },
              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 #cad1db91;
  -webkit-box-shadow: #cad1db 0 0 10px;
  -moz-box-shadow: #cad1db 0 0 10px;
  box-shadow: inset 0 0 30px #cad1db;
  position: relative;
}
.home {
  background: radial-gradient(circle at 10% 20%, #ffffff 0%, #e6e9ed 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>