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

<template>
  <div class="warning-box">
    <!-- 组织路由 -->
    <div class="div_top">
      <div class="router_line"></div>
      <div class="div_router">
        <span class="router_parents"
              v-for="(item,index) in runAgencyArray"
              @click="handleClickAgency(index)"
              :key="index">{{item.orgName}}<span class="arrow">></span></span>

        <span class="router_child">{{orgName}}</span>
      </div>
    </div>
    <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="orgType!=='village'">

        <div 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="handleToSubAgency(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">{{item.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 colorwhite">{{item.zzHouseTotal}}</div>
                  <div class="pie-table-title table-table-title">{{item.zzHouseRatio+'%'}}</div>
                  <div class="pie-table-title table-table-title">自住房屋数</div>
                </div>
                <div class="pie-table-total ">
                  <div class="pie-table-total-count colorwhite">{{item.czHouseTotal}}</div>
                  <div class="pie-table-title table-table-title">{{item.czHouseRatio+'%'}}</div>
                  <div class="pie-table-title table-table-title">出租房屋数</div>
                </div>
                <div class="pie-table-total ">
                  <div class="pie-table-total-count colorwhite">{{item.xzHouseTotal}}</div>
                  <div class="pie-table-title table-table-title">{{item.xzHouseRatio+'%'}}</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">{{item.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 colorwhite">{{item.czUserTotal}}</div>
                  <div class="pie-table-title table-table-title">{{item.czUserRatio+'%'}}</div>
                  <div class="pie-table-title table-table-title">常住人口数</div>
                </div>
                <div class="pie-table-total ">
                  <div class="pie-table-total-count colorwhite">{{item.ldUserTotal}}</div>
                  <div class="pie-table-title table-table-title">{{item.ldUserRatio+'%'}}</div>
                  <div class="pie-table-title table-table-title">流动人口数</div>
                </div>

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

        <div v-if="subList.length===0"
             class="no-data">

          <img src="@/assets/img/modules/visual/noData.png"
               class="no-data-img" />

        </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: '',
      orgName: this.$store.state.user.agencyName,
      // orgShowName: this.$store.state.user.agencyName,//面包屑显示当前组织名称


      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: ['#ff7800', '#00E5ED'],
      userPieData: [],

      subList: [],

      //下钻层级记录
      runNum: 0,
      runAgencyArray: [],
      selUserId: '',
      center: [],
      zoom: null,
      parentPolygon: [],

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

      this.housePieInitState = false
      this.userPieInitState = false
      this.getHousechart()
      this.getUserchart()
      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);
      }
      this.housePieInitState = true
    },

    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: this.houseData.zzHouseRatio,
          selected: true
        }
        let obj2 = {
          name: '出租房屋数',
          value: this.houseData.czHouseRatio
        }
        let obj3 = {
          name: '闲置房屋数',
          value: this.houseData.xzHouseRatio
        }

        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);
      }
      this.userPieInitState = true
    },

    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: this.userData.czUserRatio,
          selected: true
        }
        let obj2 = {
          name: '流动人口数',
          value: this.userData.ldUserRatio
        }

        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()
    },

    handleToSubAgency (item) {

      this.toSubAgency(item)


      this.getApiData()

    },

    //下钻到下一级 type点击的类型:polygon 点击多边形（分为点击组织/小区）    people 点击详情
    async toSubAgency (item) {

      this.runNum++
      let obj = {
        orgId: this.orgId,
        orgType: this.orgType,
        orgName: this.orgName,
      }

      this.runAgencyArray.push(obj)

      this.orgId = item.orgId
      this.orgType = item.orgType
      this.orgName = item.orgName


    },


    //返回所选组织
    handleClickAgency (index) {

      const cutNum = this.runAgencyArray.length - index//要减去的长度
      this.runNum = this.runNum - cutNum

      let orgData = this.runAgencyArray[index]

      for (let i = 0; i < cutNum; i++) {
        this.runAgencyArray.pop()
      }

      this.orgId = orgData.id
      this.orgType = orgData.orgType
      this.orgName = orgData.orgName

      this.getApiData()


    },

  },
};
</script>

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