样式优化

黄何裕

2024-07-30 1995e710dcf70e635c4edaa8173f8b66cd67d499

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

@@ -2,15 +2,14 @@
  <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>
        <examine-hola :startColor="'#4ea8ff'" :endColor="'#178fff'" :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';
let barChart = null;
export default {
@@ -21,21 +20,14 @@
  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' },
      ]
    }
  },
@@ -61,13 +53,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>