<!--
 * @Description: 智慧管网报警分析-历史报警趋势
 * @Author: 王晓颖
 * @Date: 2021-07-14 16:53:48
 -->
<template>
  <container1 title="智慧管网报警分析" padding="0px">
    <div class="container">
      <div class="tabs">
        <div v-for="tab of tabList" :key="tab" :class="{'current-tab':currentTab==tab}" class="tab" @click="changeTab(tab)">
          <span class="text">{{tab}}</span>
        </div>
      </div>
      <div class="chart">
        <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";
  export default {
    name: "deviceAlarmHistory",
    components: {GradientLineChart, Container1},
    data(){
      return {
        currentTab:'井盖状态监测',
        tabList:['井盖状态监测','液位监测','有害气体监测','消防栓监测'],
        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
        seriesData:[
          // {name:'井盖状态监测仪',data:[120, 252, 101, 134, 290, 230, 110],color:'58,55,194'},
          // {name:'液位监测仪',data:[120, 222, 191, 234, 250, 200, 310],color:'109,202,23'},
          {name:'有害气体',data:[120, 252, 101, 134, 290, 230, 110],color:'0,255,204'},
          // {name:'消防栓',data:[0, 0, 1, 0, 0, 0, 0],color:'255,192,203'},
        ]
      }
    },
    mounted(){
      this.changeTab('井盖状态监测')
    },
    methods:{
      changeTab(tab){
        this.currentTab=tab
        if(tab=='井盖状态监测'){
          this.seriesData = [{name:'井盖开启',data:[0, 3, 0, 10, 3, 0, 1],color:'0,255,204'}]
        }else if(tab=='液位监测'){
          this.seriesData = [{name:'液位超限',data:[0, 3, 2, 1, 0, 0, 1],color:'58,55,194'}]
        }else if(tab=='有害气体监测'){
          this.seriesData = [{name:'有害气体超标',data:[0, 2, 0, 0, 0, 0, 1],color:'109,202,23'}]
        }else if(tab=='消防栓监测'){
          this.seriesData = [{name:'消防栓开启',data:[0, 0, 0, 1, 0, 0, 3],color:'255,192,203'}]
        }
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    .tabs{
      width:100%;
      display: flex;
      justify-content: space-between;
      .tab{
        flex:1;
        background-color: #1d2557;
        margin: 0px 2px;
        text-align: center;
        .text{
          color:#99ccff;
          font-size: 0.3rem;
          line-height: 3;
          margin: 0 auto;
          /*display:-webkit-box;*/
          /*overflow:hidden;*/
          /*text-overflow:ellipsis;*/
        }
      }
      .tab:hover{
        cursor: pointer;
      }
      .current-tab{
        border-top: 2px solid #4e91ff;
        .text{
          color:#ffffff;
          font-weight: bold;
        }
      }
    }
    .chart{
      width: 100%;
      flex:1;
      padding-top: 0.1rem;
    }
  }
</style>