<!--
 * @Description: 路灯-历史报警趋势
 * @Author: 王晓颖
 * @Date: 2021-07-15 17:46:41
 -->
<template>
  <container1 title="路灯运行情况">
    <div style="width: 100%;height: 100%;padding: 0.1rem; 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.5rem">
            <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.5rem">
            <img :src="require('@/assets/img/main_screen/pipe-alarm.png')" class="icon"/>
          </span>
        </simple-block>
      </div>
      <div style="width: 100%;height: 100%;">
        <gradient-line-chart :x-axis-data="xAxisData" :series-data="seriesData"/>
      </div>
    </div>
  </container1>
</template>

<script>
  import Container1 from "@/components/container/container1"
  import GradientLineChart from "@/components/echart/lineChart/gradientLineChart";
  import SimpleBlock from "../../../components/block/simpleBlock2";
  export default {
    name: "lampAlarmHistory",
    components: {SimpleBlock, GradientLineChart, Container1},
    data(){
      return {
        data1: {name:'路灯单灯监测仪总数', value:'9981', unit:'个',icon:'setting'},
        data2: {name:'路灯报警', value:'81', unit:'次',icon:'alert'},
        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
        seriesData:[
          {name:'单灯控制器',data:[120, 252, 101, 134, 290, 230, 110],color:'0,191,255'}
        ]
      }
    },
  }
</script>

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