Newer
Older
BigScreenDatav / src / views / screen / mainComponents / bizStatistic.vue
<!--
 * @Description: 业务分类统计
 * @Author: 王晓颖
 * @Date: 2021-07-14 09:01:58
 -->
<template>
  <container1 title="业务分类统计">
    <a-row type="flex" justify="start" style="height:50%;margin-bottom: 0.1rem">
      <a-col v-for="item of data" :span="8" :key="item.name" style="height:100%;;padding:0.05rem">
        <gauge1 :center-text="item.name" :series-data="item.value" :color="item.color"/>
      </a-col>
    </a-row>
  </container1>
</template>

<script>
  import Container1 from "@/components/container/container1"
  import Gauge1 from "../../../components/echart/gauge/gauge1"
  export default {
    name: "bizStatistics",
    components: {Gauge1, Container1},
    data(){
      return {
        data:[
          {name:'路灯亮灯率', value:{already:34, total:100,rate:98}, color:'#009eec'},
          // {name:'地下管线监测设备报警率', value:[{already:34, total:100,rate:34}]},
          {name:'井盖报警率', value:{already:34, total:100,rate:8}, color:'#9fe6b8'},
          {name:'液位报警率', value:{already:34, total:100,rate:5}, color:'#99ccff'},
          {name:'有害气体报警率', value:{already:34, total:100,rate:2, color:'#ffdb5c'}},
          {name:'噪声报警率', value:{already:34, total:100,rate:7}, color:'#ff9f7f'},
          {name:'消防栓报警率', value:{already:34, total:100,rate:0}, color:'#fb7293'}
        ]
      }
    },
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>