xiangpei
2024-08-15 cdcd42c6e24b6ede604fab2e9437bbd34930fc23
src/views/screen/components/screen-examine/components/examine-chart.vue
@@ -1,52 +1,157 @@
<template>
  <div class="chart-container">
    <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
        class="hola-item"
        v-for="item in dataType == 'car' ? dataListA : dataList"
        :key="item.id"
      >
        <examine-hola
          :startColor="'#124ae4'"
          :endColor="'#99b3fd'"
          :centerValue="item.value"
          :bottomTitle="item.name"
          :routerPath="item.routerUrl"
        ></examine-hola>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import ExamineHola from './examine-hola.vue';
import ExamineHola from "./examine-hola.vue";
let barChart = null;
export default {
  name: 'ExamineChart',
  name: "ExamineChart",
  components: {
    ExamineHola
    ExamineHola,
  },
  props: {
    dataType: {
      type: String,
      default: "",
    },
  },
  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},
      ]
    }
        {
          id: 1,
          name: "平台在线率",
          value: 60,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
        {
          id: 2,
          name: "一机一档合格率",
          value: 20,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
        {
          id: 3,
          name: "档案考核比",
          value: 60,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
        {
          id: 4,
          name: "点位在线率",
          value: 40,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
        {
          id: 5,
          name: "录像可用率",
          value: 80,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
        {
          id: 6,
          name: "重点点位录像可用率",
          value: 20,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
        {
          id: 7,
          name: "重点点位录像可用率",
          value: 20,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
        {
          id: 8,
          name: "重点点位录像可用率",
          value: 20,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
      ],
      dataListA: [
        {
          id: 1,
          name: "平台在线率",
          value: 60,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
        {
          id: 2,
          name: "一机一档合格率",
          value: 20,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
        {
          id: 3,
          name: "档案考核比",
          value: 60,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
        {
          id: 4,
          name: "点位在线率",
          value: 40,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
        {
          id: 5,
          name: "录像可用率",
          value: 80,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
        {
          id: 6,
          name: "重点点位录像可用率",
          value: 20,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
        {
          id: 7,
          name: "重点点位录像可用率",
          value: 20,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
        {
          id: 8,
          name: "重点点位录像可用率",
          value: 20,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
        {
          id: 9,
          name: "重点点位录像可用率",
          value: 20,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
        {
          id: 10,
          name: "重点点位录像可用率",
          value: 20,
          routerUrl: "/car/vehicle-data-monitor/index",
        },
      ],
    };
  },
  methods: {
  },
  mounted() {
  }
}
  methods: {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
@@ -61,13 +166,14 @@
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: space-between;
    padding: 20px 0;
    box-sizing: border-box;
    .hola-item {
      flex-shrink: 0;
      width: 180px;
      height: 150px;
      color: #008000
      width: 150px;
      height: 120px;
    }
  }
}
</style>
</style>