<template>
  <div id="fireDevices">
    <containerCmp :titHeader="titHeader" :index="4" :visitBoMenu="false">
      <div class="container">
        <div class="leftCmp-1">
          <div v-for="(item,index) in deviceArr" :key="index" class="leftMenu" @click="loadData">
            {{item.name}}-{{item.num}}
          </div>
        </div>
        <div class="rightCmp-1">
          <dv-border-box-7 class="barGrid" :color="boxColor">
            <lineCmp1 ref="lineCmp1"></lineCmp1>
          </dv-border-box-7>
          <dv-border-box-7 class="barGrid" :color="boxColor">
            <roseChart2 title="绑定管理员设备"></roseChart2>
          </dv-border-box-7>
          <dv-border-box-7 class="barGrid" :color="boxColor">
            <lineCmp2 title="近半年离线率" :option="option1"></lineCmp2>
          </dv-border-box-7>
          <dv-border-box-7 class="barGrid" :color="boxColor">
            <lineCmp4 ref="lineCmp4"></lineCmp4>
          </dv-border-box-7>
          <dv-border-box-7 class="barGrid" :color="boxColor">
            <lineCmp2 title="近半年告警率" :option="option2"></lineCmp2>
          </dv-border-box-7>
          <dv-border-box-7 class="barGrid" :color="boxColor">
            <lineCmp3 ref="lineCmp3"></lineCmp3>
          </dv-border-box-7>
          <dv-border-box-7 class="barGridBottom" :color="boxColor">
            <moreCmp3 ref="moreCmp3"></moreCmp3>
          </dv-border-box-7>
        </div>
      </div>
    </containerCmp>
  </div>
</template>

<script>
  import containerCmp from "./common/containerCmp.vue"
import topHeader from './components/topHeader.vue'
import lineCmp1 from "./components/lineCmp1.vue"
import lineCmp2 from "./components/lineCmp2.vue"
import lineCmp3 from "./components/lineCmp3.vue"
import lineCmp4 from "./components/lineCmp4.vue"
import moreCmp3 from "./components/moreCmp3.vue"
import roseChart2 from './components/roseChart2.vue'
import {getUserInfo} from "../../util/util.js"
export default {
  name: 'DataView2',
  components: {
    containerCmp,
    topHeader,
    lineCmp1,
    lineCmp2,
    lineCmp3,
    lineCmp4,
    moreCmp3,
    roseChart2
  },
  data () {
    return {
      titHeader:'',
      deviceArr:[{
        name:'智能烟感',
        num:417
      },{
        name:'燃气监控',
        num:6
      },{
        name:'井盖监控',
        num:2
      },{
        name:'一键告警',
        num:1
      },{
        name:'智慧路灯',
        num:2
      },{
        name:'智慧消防',
        num:2
      },{
        name:'智慧垃圾桶',
        num:2
      },{
        name:'智慧地磁',
        num:1
      },{
        name:'智能门磁',
        num:1
      }],
      deviceArr2 :[{
        name:'智能烟感',
        num: 30
      },{
        name:'燃气监控',
        num: 2
      },{
        name:'井盖监控',
        num: 0
      },{
        name:'一键告警',
        num: 0
      },{
        name:'智慧路灯',
        num: 0
      },{
        name:'智慧消防',
        num: 1
      },{
        name:'智慧垃圾桶',
        num: 0
      },{
        name:'智慧地磁',
        num: 0
      },{
        name:'智能门磁',
        num: 0
      }],
      boxColor:['rgba(3,221,255,0.2)', 'rgba(3,221,255,0.8)'],
      agencies:'',
      option1: {
        grid: {
            top: '20%',
            left: '5%',
            right: '5%',
            bottom: '20%',
            containLabel: true
        },
        legend: {
          // data: ['人员趋势'],
          // textStyle: {
          //   fill: '#fff'
          // }
        },
        xAxis: {
          data: [
            '2020/09/02', '2020/10/02', '2020/11/02', '2020/12/02', '2021/01/02',
          ],
          boundaryGap: false,
          axisLine: {
            style: {
              stroke: '#A1D5FF'
            }
          },
          axisLabel: {
            style: {
              fill: '#A1D5FF'
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          data: 'value',
          splitLine: {
            show: false
          },
          axisLine: {
            style: {
              stroke: '#A1D5FF'
            }
          },
          axisLabel: {
            style: {
              fill: '#A1D5FF'
            },
          },
          axisTick: {
            show: false
          },
        },
        series: [
          {
            data: [
              50, 40, 50,60,40
            ],
            type: 'line',
            name: '人员趋势',
            smooth: true,
            // lineArea: {
            //   show: true,
            //   gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
            // },
            linePoint: {
              radius: 4,
              style: {
                fill: 'rgba(3,221,255,0.8)'
              }
            }
          }
        ]
      },
      option2: {
        grid: {
          top:'20%',
             left: '5%',
              right: '5%',
              bottom: '20%',
            containLabel: true
        },
        legend: {
          // data: ['人员趋势'],
          // textStyle: {
          //   fill: '#fff'
          // }
        },
        xAxis: {
          data: [
            '2020/09/02', '2020/10/02', '2020/11/02', '2020/12/02', '2021/01/02',
          ],
          boundaryGap: false,
          axisLine: {
            style: {
              stroke: '#A1D5FF'
            }
          },
          axisLabel: {
            style: {
              fill: '#A1D5FF'
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          data: 'value',
          splitLine: {
            show: false
          },
          axisLine: {
            style: {
              stroke: '#A1D5FF'
            }
          },
          axisLabel: {
            style: {
              fill: '#A1D5FF'
            },
          },
          axisTick: {
            show: false
          },
        },
        series: [
          {
            data: [
              90, 80, 100,90,95
            ],
            type: 'line',
            name: '人员趋势',
            smooth: true,
            lineArea: {
              show: true,
              gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
            },
            linePoint: {
              radius: 4,
              style: {
                fill: '#00db95'
              }
            }
          }
        ]
      },
    }
  },
  mounted() {
    if(getUserInfo()){
		this.deviceArr = this.deviceArr2;
      this.titHeader = "园区设备态势"
    }else{
      this.titHeader = "数字社区设备态势"
    }
  },
  methods:{
    loadData(){
      this.$refs.lineCmp1.drawLine();
      this.$refs.lineCmp4.drawLine();
      this.$refs.lineCmp3.drawLine();
      this.$refs.moreCmp3.drawLine();
    },
  }
}
</script>
<style lang="less">
#fireDevices {
    .container{
      display: flex;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      .border-box-content{
        padding: 0!important;
      }
        .leftCmp-1{
          width: 20%;
          height: 100%;
          .leftMenu{
            padding: 0 20px;
            box-sizing: border-box;
            margin: 0 auto;
            width: 80%;
            height: 10%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            background-color: rgba(3,221,255,0.2);
            border-bottom: 1px solid #0371a0;
            cursor: pointer;
          }
          .leftMenu:hover{
            background-color: rgba(3,221,255,0);
          }
        }
        .rightCmp-1{
          display: flex;
          flex-wrap: wrap;
          width: 80%;
          height: 100%;
        }
        .barGrid{
          height: 25%;
          width: 50%;
        }
        .barGridBottom{
          height: 25%;
          width: 100%;
        }
    }

}
</style>
