<template>
  <div class="module-corner row zhjt-dataAnalysis">
    <div>
      <div class="col-30" v-for="(value,index) in dataAnalysis" :key="index">
        <LitterTitle :title="value.title" />
        <div style="margin: 0 1% 0 3%;">
          <div :id="'echart-dataAnalysis-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 {
      dataAnalysis: [
        {
          title: '拥堵排名',
          data: {
            id: 'echart-dataAnalysis1',
            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-dataAnalysis2',
            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-dataAnalysis3',
            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'}
            ]
          }
        },
        {
          title: '违法排名',
          data: {
            id: 'echart-dataAnalysis4',
            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: '242,92,33'}
            ]
          }
        },
        {
          title: '公交站人流量',
          data: {
            id: 'echart-dataAnalysis5',
            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: '33,140,254'}
            ]
          }
        },
        {
          title: '其他',
          data: {
            id: 'echart-dataAnalysis6',
            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: '28,254,0'}
            ]
          }
        }
      ]
    }
  },
  mounted () {
    // 获取数据分析-停车场流量
    this.getParkedData()
    // 获取数据分析-违法排名
    this.getIllegalRanking()
    this.callEchart('echart-dataAnalysis-box1', this.dataAnalysis[0].data, 2.3)
    this.callEchart('echart-dataAnalysis-box2', this.dataAnalysis[1].data, 2.3)
    this.callEchart('echart-dataAnalysis-box3', this.dataAnalysis[2].data, 2.3)
    this.callEchart('echart-dataAnalysis-box4', this.dataAnalysis[3].data, 2.3)

    this.callEchart('echart-dataAnalysis-box5', this.dataAnalysis[4].data, 2.3)
    this.callEchart('echart-dataAnalysis-box6', this.dataAnalysis[5].data, 2.3)
  },
  methods: {
    // 获取数据分析-停车场流量
    getParkedData () {
      let params = {
        appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
        id: '155',
        flag: '97',
        format: 'json',
        param_dsid: '1054'
      }
      this.request({
        url: '/platformbigdata/modelservlet',
        method: 'get',
        params
      }).then(res => {
        let xAxisData = []
        let yAxisData = []
        res.data.forEach(item => {
          xAxisData.push(item.停车场名称)
          yAxisData.push(item.车流量)
        })
        this.dataAnalysis[2].data.xAxisData = xAxisData
        this.dataAnalysis[2].data.yAxisData[0].data = yAxisData
        this.callEchart('echart-dataAnalysis-box3', this.dataAnalysis[2].data, 2.3)
      })
    },
    // 获取数据分析-违法排名
    getIllegalRanking () {
      let params = {
        appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
        id: '155',
        flag: '97',
        format: 'json',
        param_dsid: '1096'
      }
      this.request({
        url: '/platformbigdata/modelservlet',
        method: 'get',
        params
      }).then(res => {
        let xAxisData = []
        let yAxisData = []
        res.data.forEach(item => {
          xAxisData.push(item.NAME)
          yAxisData.push(item.SCALE)
        })
        this.dataAnalysis[3].data.xAxisData = xAxisData
        this.dataAnalysis[3].data.yAxisData[0].data = yAxisData
        this.callEchart('echart-dataAnalysis-box4', this.dataAnalysis[3].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-30{
  width: 33%;
  float: left;
}
.zhjt-dataAnalysis{
  padding: .05rem .02rem;
}
</style>
<style>
.zhjt-dataAnalysis .litter-title img{
  height: .05rem;
  margin-top: .02rem;
}
</style>