feat:考核数据

ZhangXianQiang

2024-03-19 60930863e57b14c4d852cdae1ec3d270e8deda95

feat:考核数据

 src/views/screen/components/screen-examine/components/examine-chart.vue

@@ -1,61 +1,73 @@
<template>
  <div class="chart-container">
    <div class="rank-chart" ref="rankChart"></div>
    <div class="rank-chart">
      <div class="hola-item" v-for="item in dataList" :key="item.id">
        <examine-hola :startColor="'#02C77E'" :endColor="'#017770'" :centerValue="item.value"
          :bottomTitle="item.name"></examine-hola>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import ExamineHola from './examine-hola.vue';
let barChart = null;
export default {
  name: 'ExamineChart',
  components: {
    ExamineHola
  },
  data() {
    return {

      dataList: [
        {id: 1,name: '平台在线率', value: 60},
        {id: 2,name: '一机一档合格率', value: 20},
        {id: 3,name: '档案考核比', value: 60},
        {id: 4,name: '点位在线率', value: 40},
        {id: 5,name: '录像可用率', value: 80},
        {id: 6,name: '重点点位录像可用率', value: 20},
        {id: 7,name: '标注正确率', value: 24},
        {id: 8,name: '视图库对接稳定性', value: 25},
        {id: 9,name: '信息采集准确率', value: 75},
        {id: 10,name: '车辆卡口设备时钟准确性', value: 12},
        {id: 11,name: '设备抓拍图片时钟准确性', value: 82},
        {id: 12,name: '人脸卡口信息采集准确率', value: 13},
        {id: 13,name: '设备抓拍图片合格性', value: 91},
        {id: 14,name: '设备抓拍图片时钟准确性', value: 12},
        {id: 15,name: '平台在线率', value: 42},
      ]
    }
  },

  methods: {
    initChart() {
      const options = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      }
      barChart.setOption(options,true);
    }


  },
  mounted() {
    barChart = echarts.init(this.$refs.rankChart);

    this.initChart();
  },
  beforeDestroy() {
    if (lineChart) {
      barChart.dispose();
    }
  },

}
</script>

<style lang="scss" scoped>
.chart-container {
  width: 100%;
  height: 400px;
  height: 100%;

  .rank-chart {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: space-between;

    .hola-item {
      flex-shrink: 0;
      width: 180px;
      height: 150px;
      color: #008000
    }
  }
}
</style>

 src/views/screen/components/screen-examine/components/examine-hola.vue

New file
@@ -0,0 +1,157 @@
<template>
  <!-- 进度条类型组件 -->
  <div class="progressChart">
    <div class="chart" id="progressChart" ref="chartRef"></div>
    <label class="bottom le-0-font">{{ bottomTitle }}</label>
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      series: [
        {
          type: 'gauge', // 仪表盘类型
          name: '系列名称', // 用于tooltip的显示
          startAngle: 90, // 仪表盘开始角度（设置背景圆的角度）
          endAngle: -270, // 仪表盘结束角度
          center: ['50%', '50%'], // 中心点（圆心坐标）
          radius: '100%', // 圆大小（仪表盘半径）
          clockwise: true, // 仪表盘刻度是否是顺时针增长
          // 仪表盘轴线相关配置
          axisLine: {
            show: true,
            roundCap: false, // 两端显示成圆形（背景环）
            clip: false, // 是否裁剪超出部分
            // 设置背景圆环样式
            lineStyle: {
              width: 10, // 圆环宽度
              color: [[1, '#002865']] // 圆环背景色
            }
          },
          // 仪表盘指针
          pointer: {
            show: false
          },
          // 进度设置
          progress: {
            show: true,
            overlap: false, // 多组数据时进度条是否重叠
            roundCap: true, // 是否在两端显示成圆形
            clip: false, // 是否裁掉超出部分
            // 进度条样式
            itemStyle: {
              borderWidth: 0,
              shadowColor: '',
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: this.startColor // 0% 处的颜色  '#02C77E'
                  },
                  {
                    offset: 1,
                    color: this.endColor // 100% 处的颜色  '#017770'
                  }
                ],
                global: false // 缺省为 false
              }
            }
          },
          // 仪表盘分割线
          splitLine: {
            show: false
          },
          // 刻度样式
          axisTick: {
            show: false
          },
          // 刻度标签
          axisLabel: {
            show: false
          },
          title: {
            show: false,
            fontSize: 24
          },
          detail: {
            // width: 50,
            // height: 14,
            fontSize: 14,
            color: 'auto'
          },
          data: [
            {
              value: this.centerValue,
              name: '345',
              title: {},
              detail: {
                // 中心title设置
                offsetCenter: ['0%', '0%'],
                color: '#01F8FF',
                formatter: '{value}%'
                // borderColor: '#01F8FF',
                // borderRadius: 20,
                // borderWidth: 1,
              }
            }
          ],
        }
      ]
    }
  },
  setup() { },
  props: {
    startColor: {
      type: String,
      default: ''
    },
    endColor: {
      type: String,
      default: ''
    },
    centerValue: {
      type: [Number, String],
      default: 0
    },
    bottomTitle: {
      type: String,
      default: ''
    }
  },
  methods: {},
  created() { },
  mounted() {
    let myChart = echarts.init(this.$refs['chartRef']) // 使用Id无法实现
    myChart.setOption({
      series: this.series
    })
  }
}
</script>
<style lang="scss" scoped>
.progressChart {
  width: 100%;
  height: 100%;

  .chart {
    width: 100%;
    height: 75%;
  }

  .bottom {
    display: inline-block;
    width: 100%;
    color: #01f8ff;
    text-align: center;
    font-size: 16px;
    margin-top: 10px;
  }
}
</style>

 src/views/screen/components/screen-examine/index.vue

@@ -1,10 +1,10 @@
<template>
  <div class="examine-container">
    <wrapper-title :title="'考核成绩数据'"></wrapper-title>
    <wrapper-title :title="'考核数据'"></wrapper-title>
    <div class="examine-content">
      <div class="examine-wrapper">
        <examine-table class="wrapper-item"></examine-table>
        <examine-chart class="wrapper-item"></examine-chart>
        <!-- <examine-table class="wrapper-item"></examine-table> -->
      </div>
    </div>
  </div>
@@ -39,6 +39,7 @@
  position: relative;

  .examine-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;