epmet-work-pc/src/views/modules/visual/basicinfo/houseStatic/houseStatic.vue

<template>
  <div class="warning-box">
    <cpt-card>
      <div class="card-title">
        <img class="title-icon"
             src="@/assets/img/shuju/title-tip.png" />
        <div class="title-label">
          人房概览统计

        </div>
      </div>
      <div class="card-left-title">本级人房概览数据统计</div>
      <div class="card-echart">

        <div class="card-left">
          <div v-if="!dataLoading"
               class="div-chart">
            <screen-echarts-frame class="echart-wr"
                                  @myChartMethod="housePieInitOk"
                                  ref="housePieChart"></screen-echarts-frame>

            <div class="div-tip">
              <div :class="['legend_item',{'item_last':index===legendArray.length-1}]"
                   v-for="(item,index) in legendArray"
                   :key="index">
                <div class="item_name">{{item.name}}</div>
                <img :src="item.url" />

              </div>
            </div>

          </div>

          <div v-if="!dataLoading"
               class="pie-table">
            <div class="pie-table-total">
              <div class="pie-table-total-count">{{houseData.houseTotal}}</div>
              <div class="pie-table-title">房屋总数</div>
            </div>
            <div class="pie-table-line"></div>
            <div class="pie-table-total ">
              <div class="pie-table-total-count zz">{{houseData.zzHouseTotal}}</div>
              <div class="pie-table-title">自住房屋数</div>
            </div>
            <div class="pie-table-total ">
              <div class="pie-table-total-count cz">{{houseData.czHouseTotal}}</div>
              <div class="pie-table-title">出租房屋数</div>
            </div>
            <div class="pie-table-total ">
              <div class="pie-table-total-count xz">{{houseData.xzHouseTotal}}</div>
              <div class="pie-table-title">闲置房屋数</div>
            </div>
          </div>

          <div class="loading-status"
               v-if="dataLoading">
            <screen-loading>加载中</screen-loading>
          </div>

        </div>

        <div class="card-left">
          <div v-if="!dataLoading"
               class="div-chart">
            <screen-echarts-frame class="echart-wr"
                                  @myChartMethod="userPieInitOk"
                                  ref="userPieChart"></screen-echarts-frame>

            <div class="div-tip2">
              <div class="cz-tip">
                <div class="cz-tip-dot"></div>
                <span>常住人口数</span>
              </div>
              <div class="ld-tip">
                <div class="ld-tip-dot"></div>
                <span>流动人口数</span>
              </div>
            </div>

          </div>

          <div v-if="!dataLoading"
               class="pie-table">
            <div class="pie-table-total">
              <div class="pie-table-total-count">{{userData.userTotal}}</div>
              <div class="pie-table-title">居民总数</div>
            </div>
            <div class="pie-table-line"></div>
            <div class="pie-table-total ">
              <div class="pie-table-total-count zz">{{userData.czUserTotal}}</div>
              <div class="pie-table-title">常住人口数</div>
            </div>
            <div class="pie-table-total ">
              <div class="pie-table-total-count cz">{{userData.ldUserTotal}}</div>
              <div class="pie-table-title">流动人口数</div>
            </div>

          </div>

          <div class="loading-status"
               v-if="dataLoading">
            <screen-loading>加载中</screen-loading>
          </div>

        </div>
      </div>

      <div v-if="subList.length>0"
           class="card-left-title">下级人房概览数据统计</div>

      <div v-if="subList.length>0"
           class="card-table">
        <div v-for="(item,index) in subList"
             :key="index"
             :class="['table_item',index%2 === 0?'item_dark':'']">
          <div class="item_name"
               @click="hancleToSubAgency(item)">
            <img src="@/assets/img/shuju/logo1.png" />
            <span>{{item.orgName}}</span>
          </div>

          <div class="item_data">
            <div class="item_left">
              <div class="pie-table-total">
                <div class="pie-table-total-count">{{houseData.houseTotal}}</div>
                <div class="pie-table-title">房屋总数</div>
              </div>
              <div class="pie-table-line"></div>
              <div class="pie-table-total ">
                <div class="pie-table-total-count zz">{{houseData.zzHouseTotal}}</div>
                <div class="pie-table-title table-table-title">0.0%</div>
                <div class="pie-table-title table-table-title">自住房屋数</div>
              </div>
              <div class="pie-table-total ">
                <div class="pie-table-total-count cz">{{houseData.czHouseTotal}}</div>
                <div class="pie-table-title table-table-title">20%</div>
                <div class="pie-table-title table-table-title">出租房屋数</div>
              </div>
              <div class="pie-table-total ">
                <div class="pie-table-total-count xz">{{houseData.xzHouseTotal}}</div>
                <div class="pie-table-title table-table-title">99.0%</div>
                <div class="pie-table-title table-table-title">闲置房屋数</div>
              </div>
            </div>
            <div class="item_right">
              <div class="pie-table-total">
                <div class="pie-table-total-count">{{userData.userTotal}}</div>
                <div class="pie-table-title">居民总数</div>
              </div>
              <div class="pie-table-line"></div>
              <div class="pie-table-total ">
                <div class="pie-table-total-count zz">{{userData.czUserTotal}}</div>
                <div class="pie-table-title table-table-title">0.00%</div>
                <div class="pie-table-title table-table-title">常住人口数</div>
              </div>
              <div class="pie-table-total ">
                <div class="pie-table-total-count cz">{{userData.ldUserTotal}}</div>
                <div class="pie-table-title table-table-title">99.99%</div>
                <div class="pie-table-title table-table-title">流动人口数</div>
              </div>

            </div>
          </div>
        </div>
      </div>

    </cpt-card>
  </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";
import screenTable from "../../components/screen-table/index";
import cptCard from "@/views/modules/visual/cpts/card";
import nextTick from "dai-js/tools/nextTick";
import screenEchartsFrame from "../../components/screen-echarts-frame";
import ScreenLoading from "@/views/modules/visual/components/screen-loading";
import { housePieOption } from './options'
import { userPieOption } from './userOptions'

import * as echarts from 'echarts';
export default {
  name: "warning-box",
  components: {
    cptCard,
    screenTable,
    screenEchartsFrame,
    ScreenLoading
  },
  data () {
    return {
      dataLoading: true,
      orgId: '',
      orgType: '',

      housePieChartS: null,
      housePieChart: '',
      housePieOption: {},
      housePieInitState: false,
      houseData: {
        orgId: '',//组织、网格、小区Id	
        orgType: '',//组织、网格、小区类型 agency  grid   village	
        houseTotal: 198000,//房屋总数	
        zzHouseTotal: 2000,//房屋自住总数	
        zzHouseRatio: '90%',//房屋自住总数占比（保留两位小数，带百分号的）	
        czHouseTotal: 30,//房屋出租总数		
        czHouseRatio: '5%',//房屋出租总数占比（保留两位小数，带百分号的）	
        xzHouseTotal: 200,//房屋闲置总数		
        xzHouseRatio: '70%',//房屋闲置总数占比（保留两位小数，带百分号的）	
      },
      houseColorArray: ['#FAC126', '#3DDA83', '#2865FA'],
      housePieData: [],

      legendArray: [
        {
          name: '自住房屋数',
          url: require('../../../../../assets/img/shuju/measure/huang@2x.png')
        },
        {
          name: '出租房屋数',
          url: require('../../../../../assets/img/shuju/measure/lv@2x.png')
        },
        {
          name: '闲置房屋数',
          url: require('../../../../../assets/img/shuju/measure/lan@2x.png')
        }
      ],

      userPieChartS: null,
      userPieChart: '',
      userPieOption: {},
      userPieInitState: false,
      userData: {
        orgId: '',//组织、网格、小区Id	
        orgType: '',//组织、网格、小区类型 agency  grid   village	
        userTotal: 198000,//居民总数	
        czUserTotal: 2000,//常住居民总数	
        czUserRatio: '90%',//常住居民总数占比	
        ldUserTotal: 30,//流动居民总数		
        ldUserRatio: '5%',//流动居民总数占比	

      },
      userColorArray: ['#1B51FF', '#00E5ED'],
      userPieData: [],

      subList: [
        {
          orgId: '',
        }
      ]

    };
  },
  async mounted () {
    this.dataLoading = true
    await this.getApiData()
    this.dataLoading = false
  },
  methods: {
    async getApiData () {


      await this.getHousechart()
      await this.getUserchart()
      await this.getSubuserhouselist()

      this.getHousePie()
      this.getUserPie()
    },
    housePieInitOk (dom) {
      console.log('pie准备好了', dom)
      this.housePieChartS = dom
      this.housePieInitState = true

    },
    userPieInitOk (dom) {
      console.log('pie准备好了', dom)
      this.userPieChartS = dom
      this.userPieInitState = true

    },


    async getHousechart (node, resolve) {
      if (this.$refs.housePieChart) {
        this.$refs.housePieChart.showLoading()
      }

      const url = "http://yapi.elinkservice.cn/mock/245/gov/org/house/housechart";
      // const url = '/gov/org/house/housechart'
      let params = {
        orgId: this.orgId,
        orgType: this.orgType
      };
      const { data, code, msg } = await requestPost(url, params);
      if (code === 0) {
        // this.houseData = data
        if (this.$refs.housePieChart) {
          this.$refs.housePieChart.hideLoading()
        }


      } else {
        this.houseData = {}
        this.$message.error(msg);
      }
    },

    getHousePie () {
      if (this.housePieInitState) {
        this.assignHousePieChart()
      } else {
        setTimeout(() => {
          this.getHousePie()
        }, 500)
      }
    },
    assignHousePieChart () {

      if (this.houseData) {
        this.$refs.housePieChart.setNoData(false)
        this.$refs.housePieChart.clear()
        this.housePieData = []

        const _that = this
        // 获取pieChart配置
        this.housePieOption = housePieOption(this.housePieChartS)
        // let maxValue = this.housePieData[0].total
        // let maxIndex = 0

        let obj1 = {
          name: '自住房屋数',
          value: 20.1,
          selected: true
        }
        let obj2 = {
          name: '出租房屋数',
          value: 20.3
        }
        let obj3 = {
          name: '闲置房屋数',
          value: 20
        }

        this.housePieData.push(obj1)
        this.housePieData.push(obj2)
        this.housePieData.push(obj3)

        this.housePieOption.title.text = this.houseData.houseTotal
        this.housePieOption.series[1].itemStyle = {
          color: function (params) {
            return _that.houseColorArray[params.dataIndex]
          }
        }

        let fun = function (params) {
          _that.clickHousePie(params.dataIndex)

        }
        this.$refs.housePieChart.handleClick(fun)
        this.clickHousePie(0)
      } else {
        this.$refs.housePieChart.setNoData(true)
      }
    },

    async getUserchart (node, resolve) {
      if (this.$refs.userPieChart) {
        this.$refs.userPieChart.showLoading()
      }
      const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icresiuser/userchart";
      // const url = '/epmetuser/icresiuser/userchart'
      let params = {
        orgId: this.orgId,
        orgType: this.orgType
      };
      const { data, code, msg } = await requestPost(url, params);
      if (code === 0) {
        // this.userData = data
        if (this.$refs.userPieChart) {
          this.$refs.userPieChart.hideLoading()
        }
      } else {
        this.userData = {}
        this.$message.error(msg);
      }
    },

    getUserPie () {
      if (this.userPieInitState) {
        this.assignUserPieChart()
      } else {
        setTimeout(() => {
          this.getUserPie()
        }, 500)
      }
    },
    assignUserPieChart () {

      if (this.userData) {
        this.$refs.userPieChart.setNoData(false)
        this.$refs.userPieChart.clear()
        this.userPieData = []

        const _that = this
        // 获取pieChart配置
        this.userPieOption = userPieOption(this.userPieChartS)
        // let maxValue = this.userPieData[0].total
        // let maxIndex = 0

        let obj1 = {
          name: '常住人口数',
          value: 20.1,
          selected: true
        }
        let obj2 = {
          name: '流动人口树',
          value: 20.3
        }

        this.userPieData.push(obj1)
        this.userPieData.push(obj2)

        this.userPieOption.title.text = this.userData.userTotal
        this.userPieOption.series[1].itemStyle = {
          color: function (params) {
            return _that.userColorArray[params.dataIndex]
          }
        }

        let fun = function (params) {
          _that.clickUserPie(params.dataIndex)

        }
        this.$refs.userPieChart.handleClick(fun)
        this.clickUserPie(0)
      } else {
        this.$refs.userPieChart.setNoData(true)
      }
    },

    async getSubuserhouselist (node, resolve) {
      const url = "http://yapi.elinkservice.cn/mock/245/gov/org/house/subuserhouselist";
      // const url = '/gov/org/house/subuserhouselist'
      let params = {
        orgId: this.orgId,
        orgType: this.orgType
      };
      const { data, code, msg } = await requestPost(url, params);
      if (code === 0) {
        this.subList = data


      } else {
      }
    },

    async clickHousePie (seriesIndex) {
      this.housePieData.forEach((element, index) => {
        if (index === seriesIndex) {
          element.label = {
            show: true,

          };
          element.labelLine = {
            show: true,
            lineStyle: {
              opacity: 1,
            }

          };
          console.log('zhilma')

        } else {
          element.label = {
            show: false,

          };
          element.labelLine = {
            show: false,
            lineStyle: {
              opacity: 0,
              color: 'rgba(255,255,255,0)'
            }

          };

        }
      });
      this.housePieOption.series[1].data = this.housePieData
      // this.$refs.housePieChart.hideLoading()
      this.$refs.housePieChart.setOption(this.housePieOption)


    },
    async clickUserPie (seriesIndex) {
      this.userPieData.forEach((element, index) => {
        if (index === seriesIndex) {
          element.label = {
            show: true,

          };
          element.labelLine = {
            show: true,
            lineStyle: {
              opacity: 1,
            }

          };
          console.log('zhilma')

        } else {
          element.label = {
            show: false,

          };
          element.labelLine = {
            show: false,
            lineStyle: {
              opacity: 0,
              color: 'rgba(255,255,255,0)'
            }

          };

        }
      });
      this.userPieOption.series[1].data = this.userPieData
      // this.$refs.userPieChart.hideLoading()
      this.$refs.userPieChart.setOption(this.userPieOption)

      // this.getTable()
    },

    hancleToSubAgency (item) {

      this.orgId = item.orgId
      this.orgType = item.orgType
      this.getApiData()

    }



  },
};
</script>

<style
  lang="scss"
  src="@/assets/scss/modules/visual/warning.scss"
  scoped
></style>
<style
  lang="scss"
  src="@/assets/scss/modules/visual/houseStatic.scss"
  scoped
></style>