<template>
  <panel-container>
    <modular-layout type="roundCorner">
      <panel-title-1>产业经济</panel-title-1>
    <div class="Modular_main">
      <div>
        <vue-scroll>
          <div class="row">
            <div class="col-35">
              <TitleThree title="用户注册数" />
              <div class="module-corner Modular_left">
                <EarthViews :data="userNum" height=".92rem" />
                <Corner2 />
              </div>
            </div>
            <div class="col-30">
              <TitleThree title="公共资源接入数" />
              <div class="Modular_left public_resource">
                <DataList :data="public_resource" :title="['类别','数量']" />
              </div>

            </div>
            <div class="col-35">
              <TitleThree title="在线用户数" />
              <div id="onlineUser_box" class="Modular_right">
                <EchartBar1Color
                  :id="onlineUser.id"
                  :width="onlineUser.width"
                  :height="onlineUser.height"
                  :xAxisData="onlineUser.xAxisData"
                  :seriesData="onlineUser.seriesData"
                />
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-30">
              <TitleThree title="缴费" />
              <div class="Modular_left pay">
                <DataList :data="pay" :title="['类别','金额']" />
              </div>
            </div>
            <div class="col-35">
              <TitleThree title="信息发布" />
              <div class="Modular_left">
                <div class="module-corner">
                  <EarthViews :data="infoIssue" height=".92rem" />
                  <Corner2 />
                </div>
              </div>
            </div>
            <div class="col-35">
              <TitleThree title="交易量" />
              <div id="businessAmount_box" class="Modular_right">
                <EchartBar1Color
                  :id="businessAmount.id"
                  :width="businessAmount.width"
                  :height="businessAmount.height"
                  :xAxisData="businessAmount.xAxisData"
                  :seriesData="businessAmount.seriesData"
                />
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-50">
              <TitleThree title="资源订单数" />
              <div class=" Modular_left">
                <div id="echart-resourceOrder-box">
                  <EchartLine
                    :id="resourceOrder.id"
                    :width="resourceOrder.width"
                    :height="resourceOrder.height"
                    :unit="resourceOrder.unit"
                    :legend="resourceOrder.legend"
                    :xAxisData="resourceOrder.xAxisData"
                    :yAxisData="resourceOrder.yAxisData"
                  />
                </div>
              </div>
              <!-- <TitleThree title="用户活跃度" />
              <div class="Modular_left">
                <UserActive />
              </div> -->
            </div>
            <div class="col-50">
              <TitleThree title="用户活跃度" />
              <div class="Modular_left Modular_right">
                <div id="userActive_box">
                  <EchartBar1
                    :id="userActive.id"
                    :width="userActive.width"
                    :height="userActive.height"
                    :xAxisData="userActive.xAxisData"
                    :seriesData="userActive.seriesData"
                  />
                </div>
              </div>
            </div>
          </div>
        </vue-scroll>
      </div>
    </div>
    </modular-layout>
  </panel-container>
</template>

<script>
import EarthViews from '@/components/EarthViews'
import Corner2 from '@/components/Corner2'
import DataList from '@/components/DataList'
import Legend from '@/components/echart/Legend'
import LitterTitle from '@/components/title/LitterTitle'
import UserActive from './components/UserActive'
import EchartLine from '@/components/echart/EchartLine'
import EchartBar1Color from '@/components/echart/EchartBar1Color'
import EchartBar1 from '@/components/echart/EchartBar1'
export default {
  components: {
    EarthViews,
    Corner2,
    DataList,
    Legend,
    LitterTitle,
    UserActive,
    EchartLine,
    EchartBar1Color,
    EchartBar1
  },
  data () {
    return {
      userNum: [],
      // 公共资源接入数
      public_resource: [],
      // 在线用户数
      onlineUser: {
        id: 'onlineUser_id',
        width: 0,
        height: 0,
        xAxisData: [],
        seriesData: []
      },
      // 资源订单数
      resourceOrder: {
        id: 'echart-resourceOrder',
        width: 0,
        height: 0,
        unit: '笔',
        xAxisData: [],
        yAxisData: [
          {name: '笔数', data: [], color: '62,162,255'}
        ]
      },
      // 缴费
      pay: [],
      // 信息发布
      infoIssue: [],
      // 交易量
      businessAmount: {
        id: 'businessAmount_id',
        width: 0,
        height: 0,
        xAxisData: [],
        seriesData: []
      },
      // 用户活跃度
      userActive: {
        id: 'userActive',
        width: 0,
        height: 0,
        xAxisData: [],
        seriesData: []
      }
    }
  },
  mounted () {
    // 用户数
    this.getUserNum()
    // 公共资源接入数
    this.getPublicResource()
    // 在线用户数
    this.getOnlineUser()
    // 资源订单数
    this.getResourceOrder()
    // 缴费
    this.getPay()
    // 信息发布
    this.getInfoIssue()
    // 交易量
    this.getBusinessAmount()
    // 用户活跃度
    this.getUserActive()
  },
  methods: {
    // 用户数
    getUserNum () {
      // debugger
      let params = {
        appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
        id: '155',
        flag: '97',
        format: 'json',
        param_dsid: '1053'
      }
      this.request({
        url: '/platformbigdata/modelservlet',
        method: 'get',
        params
      }).then(res => {
        // debugger
        let arr = []
        let total = 0
        res.data.forEach((item, index) => {
          arr.push({name: item.LX + '数', num: item.SL})
          total += Number(item.SL)
        })
        arr.splice(1, 0, {name: '总用户数', num: total})
        this.userNum = [...arr]
      })
    },
    // 公共资源接入数
    getPublicResource () {
      let params = {
        appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
        id: '155',
        flag: '97',
        format: 'json',
        param_dsid: '1051'
      }
      this.request({
        url: '/platformbigdata/modelservlet',
        method: 'get',
        params
      }).then(res => {
        let arr = []
        res.data.forEach((item, index) => {
          arr.push({ name: item.LX, num: item.SL, unit: '（' + item.SLDW + '）'})
        })
        this.public_resource = arr
      })
    },
    // 在线用户数
    getOnlineUser () {
      let params = {
        appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
        id: '155',
        flag: '97',
        format: 'json',
        param_dsid: '1071'
      }
      this.request({
        url: '/platformbigdata/modelservlet',
        method: 'get',
        params
      }).then(res => {
        if (res.ret_code == 200) {
          let xAxisData = []
          let seriesData = []
          res.data.forEach(item => {
            xAxisData.push(item.RQ)
            seriesData.push(item.SL)
          })
          this.onlineUser.xAxisData = xAxisData
          this.onlineUser.seriesData = seriesData
          this.callEchart('onlineUser_box', this.onlineUser, 1.38)
        }
      })
    },
    // 资源订单数
    getResourceOrder () {
      let params = {
        appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
        id: '155',
        flag: '97',
        format: 'json',
        param_dsid: '1069'
      }
      this.request({
        url: '/platformbigdata/modelservlet',
        method: 'get',
        params
      }).then(res => {
        if (res.ret_code == 200) {
          let xAxisData = []
          let yAxisData = []
          res.data.forEach(item => {
            xAxisData.push(item.LX)
            yAxisData.push(item.SL)
          })
          this.resourceOrder.xAxisData = xAxisData
          this.resourceOrder.yAxisData[0].data = yAxisData
          setTimeout(() => {
            this.callEchart('echart-resourceOrder-box', this.resourceOrder, 2.1)
          }, 200)
        }
      })
    },
    // 缴费
    getPay () {
      let params = {
        appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
        id: '155',
        flag: '97',
        format: 'json',
        param_dsid: '1073'
      }
      this.request({
        url: '/platformbigdata/modelservlet',
        method: 'get',
        params
      }).then(res => {
        let arr = []
        res.data.forEach((item, index) => {
          arr.push({ name: item.LX, num: item.JE, unit: '（' + item.JEDW + '）'})
        })
        this.pay = arr
      })
    },
    // 信息发布
    getInfoIssue () {
      let params = {
        appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
        id: '155',
        flag: '97',
        format: 'json',
        param_dsid: '1068'
      }
      this.request({
        url: '/platformbigdata/modelservlet',
        method: 'get',
        params
      }).then(res => {
        let arr = []
        res.data.forEach((item, index) => {
          arr.push({name: item.LX, num: item.SL})
        })
        this.infoIssue = [...arr]
      })
    },
    // 交易量
    getBusinessAmount () {
      let params = {
        appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
        id: '155',
        flag: '97',
        format: 'json',
        param_dsid: '1072'
      }
      this.request({
        url: '/platformbigdata/modelservlet',
        method: 'get',
        params
      }).then(res => {
        if (res.ret_code == 200) {
          let xAxisData = []
          let seriesData = []
          res.data.forEach(item => {
            xAxisData.push(item.RQ)
            seriesData.push(item.SL)
          })
          this.businessAmount.xAxisData = xAxisData
          this.businessAmount.seriesData = seriesData
          this.callEchart('businessAmount_box', this.businessAmount, 1.39)
        }
      })
    },
    // 用户活跃度
    getUserActive () {
      let params = {
        appkey: '53a21bdd-626a-4b3b-9170-0c79498193e6',
        id: '155',
        flag: '97',
        format: 'json',
        param_dsid: '1071'
      }
      this.request({
        url: '/platformbigdata/modelservlet',
        method: 'get',
        params
      }).then(res => {
        let xAxisData = []
        let seriesData = []
        res.data.forEach(item => {
          xAxisData.push(item.RQ)
          seriesData.push(item.SL)
        })
        this.userActive.xAxisData = xAxisData
        this.userActive.seriesData = seriesData
        this.callEchart('userActive_box', this.userActive, 1.95)
      })
    },
    callEchart (idBox, data, offset) {
      const _width = document.getElementById(idBox).clientWidth
      this.$set(data, 'width', _width)
      this.$set(data, 'height', _width / offset)
    }
  }
}

</script>

<style scoped>
.panel-container{
  width: 100%;
  height: 100%;
  overflow: auto;
}
/* 盒子 */
.row{
  width: 100%;
  overflow: hidden;
  margin: 0.07rem 0;
}
.row-flex{
  display:flex;
  justify-content:space-between;
}
.col-33{
  width: 33%;
  float: left;
}

.col-65{
  width: 65%;
  float: left;
}
.col-30{
  width: 30%;
  float: left;
}
.col-35{
  width: 35%;
  float: left;
}
.col-50{
  width: 50%;
  float: left;
}

</style>
<style>
/* 撑开 */
.page-IPass .public_resource .dataList{
  min-height: 1.02rem;
}
.page-IPass .pay .dataList{
  min-height: 1.02rem;
}
</style>