<!--
 * @Description: 管网安全度测评
 * @Author: 王晓颖
 * @Date: 2021-07-15 11:17:46
 -->
<template>
  <container1 title="管网运行状态">
    <div style="width: 100%;height: 100%;padding: 0.05rem; display: flex;justify-content: flex-end">
      <div style="width:40%;height:100%;display: flex; flex-direction: column; justify-content: center">
        <simple-block :data="data1" style="height:40%;width:100%">
          <span style="margin-right:0.3rem">
            <img :src="require('@/assets/img/main_screen/pipe-device.png')" class="icon"/>
            <!--<a-icon type="setting" theme="twoTone" :style="{fontSize:'0.8rem'}"/>-->
          </span>
        </simple-block>
        <simple-block :data="data2" style="height:40%;width:100%">
          <span style="margin-right:0.3rem">
            <img :src="require('@/assets/img/main_screen/pipe-alarm.png')" class="icon"/>
          </span>
        </simple-block>
      </div>
      <div style="width:55%;height:100%">
        <radar1 title="" :cdata="radar" :indicator="radarIndicator"/>
      </div>
    </div>
  </container1>
</template>

<script>
  import Container1 from "@/components/container/container1"
  import Radar1 from "@/components/echart/radar/radar1"
  import SimpleBlock from "@/components/block/simpleBlock2";
  export default {
    name: "PipeSafety",
    components: {SimpleBlock, Radar1, Container1},
    data(){
      return {
        data1: {name:'管网监控设备总数', value:'157', unit:'个',icon:'setting'},
        data2: {name:'管网报警数', value:'7', unit:'次',icon:'alert'},
        radar: [
          {name:'管线健康度', data:[9,7,6,7,8], color:'#28f8de', shadowColor:'rgba(0,0,0,.2)' },
        ],
        radarIndicator:[
          { name: "监控覆盖", max: 10 },
          { name: "井盖情况", max: 10 },
          { name: "液位情况", max: 10 },
          { name: "开挖情况", max: 10 },
          { name: "有害气体", max: 10 }
        ]
      }
    },
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.icon{
   width:1.1rem;
   height:1.1rem;
 }
</style>