<template>
  <div class="module-corner row zhjt-manageLight" style="margin:0">
    <div>
      <div class="col-50" v-for="(value,index) in manageLight" :key="index">
        <LitterTitle :title="value.title" />
        <div style="margin: 0 1% 0 3%;">
          <div :id="'echart-manageLight-box'+(index+1)">
            <EchartLineNoY
              :id="value.data.id"
              :width="value.data.width"
              :height="value.data.height"
              :legend="value.data.legend"
              :xAxisData="value.data.xAxisData"
              :yAxisData="value.data.yAxisData"
            />
          </div>
        </div>
      </div>
    </div>
    <Corner2 />
  </div>
</template>
<script>
import Corner2 from '@/components/Corner2'
import LitterTitle from '@/components/title/LitterTitle'
import EchartLineNoY from '@/components/echart/EchartLineNoY'
export default {
  components: {
    Corner2,
    LitterTitle,
    EchartLineNoY
  },
  data () {
    return {
      manageLight: [
        {
          title: '路灯数量',
          data: {
            id: 'echart-manageLight1',
            width: 0,
            height: 0,
            xAxisData: ['9.24', '9.24', '9.24', '9.24', '9.24', '9.24', '9.24'],
            yAxisData: [
              {name: '总数量', data: [855, 1078, 856, 865, 990, 782, 1210], color: '213,50,35'}
            ]
          }
        },
        {
          title: '路灯故障率',
          data: {
            id: 'echart-manageLight2',
            width: 0,
            height: 0,
            xAxisData: ['9.24', '9.24', '9.24', '9.24', '9.24', '9.24', '9.24'],
            yAxisData: [
              {name: '总数量', data: [855, 1078, 856, 865, 990, 782, 1210], color: '3,179,177'}
            ]
          }
        },
        {
          title: '能耗(千瓦时)',
          data: {
            id: 'echart-manageLight3',
            width: 0,
            height: 0,
            xAxisData: ['9.24', '9.24', '9.24', '9.24', '9.24', '9.24', '9.24'],
            yAxisData: [
              {name: '总数量', data: [855, 1078, 856, 865, 990, 782, 1210], color: '216,50,218'}
            ]
          }
        }
      ]
    }
  },
  mounted () {
    // 获取路灯数
    this.callEchart('echart-manageLight-box1', this.manageLight[0].data, 2.3)
    this.getLampNum()
    // 城管路灯故障率
    this.callEchart('echart-manageLight-box2', this.manageLight[1].data, 2.3)
    this.getBreakNum()
    // 路灯能耗（千瓦时）
    this.callEchart('echart-manageLight-box3', this.manageLight[2].data, 2.3)
    this.getLampConsume()
  },
  methods: {
    // 获取城管路灯-路灯数
    getLampNum () {
      let params = {
        appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
        id: '155',
        flag: '97',
        format: 'json',
        param_dsid: '1103'
      }
      this.request({
        url: '/platformbigdata/modelservlet',
        method: 'get',
        params
      }).then(res => {
        let xAxisData = []
        let yAxisData = []
        res.data.forEach(item => {
          xAxisData.push(item.RQTIME.slice(5, 10))
          yAxisData.push(item.LDL)
        })
        this.manageLight[0].data.xAxisData = xAxisData
        this.manageLight[0].data.yAxisData[0].data = yAxisData
        this.callEchart('echart-manageLight-box1', this.manageLight[0].data, 2.3)
      })
    },
    // 获取城管路灯-路灯故障率
    getBreakNum () {
      let params = {
        appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
        id: '155',
        flag: '97',
        format: 'json',
        param_dsid: '1101'
      }
      this.request({
        url: '/platformbigdata/modelservlet',
        method: 'get',
        params
      }).then(res => {
        let xAxisData = []
        let yAxisData = []
        res.data.forEach(item => {
          xAxisData.push(item.RQTIME.slice(5, 10))
          yAxisData.push(item.LDGZL)
        })
        this.manageLight[1].data.xAxisData = xAxisData
        this.manageLight[1].data.yAxisData[0].data = yAxisData
        this.callEchart('echart-manageLight-box2', this.manageLight[1].data, 2.3)
      })
    },
    // 获取城管路灯-路灯能耗（千瓦时）
    getLampConsume () {
      let params = {
        appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
        id: '155',
        flag: '97',
        format: 'json',
        param_dsid: '1102'
      }
      this.request({
        url: '/platformbigdata/modelservlet',
        method: 'get',
        params
      }).then(res => {
        let xAxisData = []
        let yAxisData = []
        res.data.forEach(item => {
          xAxisData.push(item.RQTIME.slice(5, 10))
          yAxisData.push(item.LDNH)
        })
        this.manageLight[2].data.xAxisData = xAxisData
        this.manageLight[2].data.yAxisData[0].data = yAxisData
        this.callEchart('echart-manageLight-box3', this.manageLight[2].data, 2.3)
      })
    },
    callEchart (idBox, data, offset) {
      const _width = document.getElementById(idBox).clientWidth
      this.$set(data, 'width', _width)
      this.$set(data, 'height', _width / offset)
    }
  }
}
</script>

<style scoped>
.row{
  width: 100%;
  overflow: hidden;
  margin: 0.07rem 0;
}
.col-50{
  width: 50%;
  float: left;
}
.zhjt-manageLight{
  padding: .05rem .02rem;
}
</style>
<style>
.zhjt-manageLight .litter-title img{
  height: .05rem;
  margin-top: .02rem;
}
</style>