epmet-work-pc/src/views/dataBoard/overview/index.vue

<template>
  <div>
    <cpt-bread
        @tap="clickBreadItem"
        v-if="breadList.length > 1"
        :bread-list="breadList"
    />
    <div class="g-row">
      <div class="g-left">
        <div class="m-box">
          <title-box :text="`${
            currentLevel === 'district'?'区':
            currentLevel === 'street'?'街道':
          currentLevel === 'community'?'社区':
          currentLevel === 'grid'?'网格':''
          }介绍`"/>
          <jdjs/>
        </div>

        <div class="m-box">
          <title-box :text="`${
            currentLevel === 'district'?'区':
            currentLevel === 'street'?'街道':
          currentLevel === 'community'?'社区':
          currentLevel === 'grid'?'网格':''
          }图谱画像`"/>
          <jdtphx :id="orgId"/>
        </div>
      </div>

      <div class="g-center">
        <div class="m-map">
          <map-top/>
          <grid-map
              ref="map"
              @clickAgency="clickAgencyItem"
              :srcGridData="orgData"
              @clickDotBtn="handleClickDotBtn"
          />
        </div>
        <div class="m-box m-rybox">
          <title-box text="XX街道网格员"/>
          <jdwgy/>
        </div>
      </div>

      <div class="g-right">
        <div class="m-box">
          <title-box text="人房数据统计"/>
          <rfsjtj/>
        </div>
        <!-- 街道概览 -->
        <div v-if="currentLevel === 'street' || currentLevel === 'district'" class="m-box">
          <title-box text="各社区人房数据更新排行">
            <span class="date-span">
              <el-date-picker
                  v-model="rfphDate"
                  format="yyyy-MM"
                  value-format="yyyy-MM"
                  @change="changeDate"
                  type="month"
                  :clearable="false"
                  placeholder="选择月"
              >
              </el-date-picker>
            </span>
          </title-box>
          <sqrfph :date="rfphDate"/>
        </div>
        <div v-if="currentLevel === 'street' || currentLevel === 'district'" class="m-box">
          <title-box text="各社区12345投诉事件统计">
            <span class="date-span">
              <el-date-picker
                  v-model="sq12345Date"
                  format="yyyy-MM"
                  value-format="yyyy-MM"
                  type="month"
                  :clearable="false"
                  placeholder="选择月"
              />
            </span>
          </title-box>
          <sq12345 :date="sq12345Date"/>
        </div>

        <!-- 社区&网格-->
        <div v-if="currentLevel === 'community' || currentLevel === 'grid'" class="m-box">
          <title-box text="人房数据动态更新"/>
          <DynamicHumanRoomData/>
        </div>
        <!-- 社区概览-->
        <div v-if="currentLevel === 'community'" class="m-box">
          <title-box text="社区满意度自查结果">
            <span class="date-span">
              <el-date-picker
                  v-model="sqzcDate"
                  format="yyyy-MM"
                  value-format="yyyy-MM"
                  type="month"
                  :clearable="false"
                  placeholder="选择月"
              />
            </span>
          </title-box>
          <CommunityResult :date="sqzcDate"/>
        </div>
        <div v-if="currentLevel === 'community'" class="m-box">
          <title-box text="事件&回访">
            <span class="date-span">
              <el-date-picker
                  v-model="sjhfDate"
                  format="yyyy-MM"
                  value-format="yyyy-MM"
                  @change="changeDate"
                  type="month"
                  :clearable="false"
                  placeholder="选择月"
              />
            </span>
          </title-box>
          <EventAndFollowUp :date="sjhfDate"/>
        </div>
        <!-- 网格 -->
        <div v-if="currentLevel === 'grid'" class="m-box">
          <title-box text="社区网格数据更新情况排行">
            <span class="date-span">
              <el-date-picker
                  v-model="sqwggxDate"
                  format="yyyy-MM"
                  value-format="yyyy-MM"
                  @change="changeDate"
                  type="month"
                  :clearable="false"
                  placeholder="选择月"
              />
            </span>
          </title-box>
          <RankingGridData :date="sqwggxDate"/>
        </div>

      </div>
    </div>

    <cpt-loading v-show="false"/>
  </div>
</template>

<script>
import gridMap from "@/views/dataBoard/cpts/map/index";
import cptBread from "@/views/dataBoard/renfang/cpts/bread";
import cptLoading from "@/views/dataBoard/cpts/loading";
import titleBox from "@/views/dataBoard/satisfactionEval/components/Title";
import jdjs from "@/views/dataBoard/overview/components/jdjs.vue";
import jdtphx from "@/views/dataBoard/overview/components/jdtphx.vue";
import mapTop from "@/views/dataBoard/overview/components/map-top.vue";
import jdwgy from "@/views/dataBoard/overview/components/jdwgy.vue";
import rfsjtj from "@/views/dataBoard/overview/components/rfsjtj.vue";
import sqrfph from "@/views/dataBoard/overview/components/sqrfph.vue";
import sq12345 from "@/views/dataBoard/overview/components/sq12345.vue";

import DynamicHumanRoomData from "@/views/dataBoard/overview/components/DynamicHumanRoomData.vue";
import CommunityResult from "@/views/dataBoard/overview/components/CommunityResult.vue";
import EventAndFollowUp from "@/views/dataBoard/overview/components/EventAndFollowUp.vue";
import RankingGridData from "@/views/dataBoard/overview/components/RankingGridData.vue";


import {requestPostBi} from "@/js/dai/request-bipass";
import {requestPost} from "@/js/dai/request";
import getQueryPara from "dai-js/modules/getQueryPara";

export default {
  name: "renfang",

  components: {
    gridMap,
    cptLoading,
    cptBread,
    titleBox,
    jdjs,
    jdtphx,
    mapTop,
    jdwgy,
    rfsjtj,
    sqrfph,
    sq12345,
    DynamicHumanRoomData,
    CommunityResult,
    EventAndFollowUp,
    RankingGridData
  },

  data() {
    return {
      loading: false,
      rfphDate: this.$moment().format('YYYY-MM'),
      sq12345Date: this.$moment().format('YYYY-MM'),
      sqzcDate: this.$moment().format('YYYY-MM'),
      sjhfDate: this.$moment().format('YYYY-MM'),
      sqwggxDate: this.$moment().format('YYYY-MM'),
      orgData: {
        children: [],
      }, //当前组织对象
      orgId: "",
      orgLevel: "",
      currentLevel: "",
      breadList: [
        {
          orgId: "",
          orgLevel: "",
          meta: {title: "人房总览"},
        },
      ],

      displayedResiId: "",
      displayedHouseId: "",
    };
  },

  mounted() {
    // const queryOrgId = getQueryPara("orgId");
    // const queryOrgLevel = getQueryPara("orgLevel");
    // this.init(queryOrgId, queryOrgLevel);
    if(this.$store.state.chooseArea.chooseName.orgId) {
      this.getMapData()
    }
  },

  watch: {
    "$store.state.chooseArea.chooseName"(val){
      this.getMapData()
    }
  },

  methods: {
    async init(queryOrgId, queryOrgLevel) {
      if (queryOrgId) {
        this.orgId = queryOrgId;
        this.orgLevel = queryOrgLevel || "agency";
      } else {
        this.orgId = this.$store.state.user.agencyId;
        this.orgLevel = "agency";
      }

      //加载组织数据
      this.loading = false;
      await this.getMapData();
      // await this.getSubMapData();

      this.loading = true;
    },
    changeDate(e) {
      this.rfphDate = e;
    },
    handleClickDotBtn(type, info) {
      console.log("handleClickDotBtn", type, info);
      if (type == "watch-resi") {
        this.displayedResiId = info.user_id;
      } else if (type == "watch-house") {
        this.displayedHouseId = info.house_id;
      }
    },

    clickBreadItem({item}) {
      this.toBread(item);
    },

    clickAgencyItem(item) {
      console.log(item, 'item')
      this.toBread({
        orgId: item.id,
        orgLevel: item.level,
        meta: {title: item.name},
      });
      this.getMapData(item.id,item.level)
    },

    toBread(item) {
      const {orgId} = item;
      const {breadList} = this;
      let index = breadList.findIndex((val) => val.orgId === orgId);
      // return console.log(item, breadList, index);
      if (index >= 0) {
        this.breadList = breadList.slice(0, index + 1);
      } else {
        breadList.push(item);
        this.breadList = breadList;
      }
      this.init(item.orgId, item.orgLevel);
    },

    // 点击搜索结果条目，在地图上显示点和详情弹窗
    handleClickSearchItem(item) {
      console.log("handleClickSearchItem", item);
      if (!item.longitude) {
        return this.$message.error("请先设置坐标");
      }
      this.$refs.map.setDotMarker(item, [
        parseFloat(item.longitude),
        parseFloat(item.latitude),
      ]);
    },

    //获取地图上显示的组织数据
    async getMapData(orgId=this.$store.state.chooseArea.chooseName.orgId,level=this.$store.state.chooseArea.chooseName.level) {
      console.log("=========================getMapData");
      const url = "org_map";
      this.$http.post(`/gov/org/agency/maporg`, {orgId, level}).then(({data: {data}}) => {
        console.log(data,'datadatadata')
        this.orgData = data;
        this.orgId = this.orgData.org_id;
        this.orgLevel = this.orgData.level;
        this.currentLevel = this.orgData.agencyLevel;
        console.log(this.orgData, 'orgData')
      })
    },

    //获取地图上显示的组织数据
    async getSubMapData() {
      console.log("=========================getSubMapData");
      const url = "sub_org_map";

      const {data, code, msg} = await requestPostBi(
          url,
          {
            queryParam: {
              org_id: this.orgId,
            },
          },
          {
            // mockId: 61831860,
          }
      );

      if (code === 0) {
        const {orgData} = this;
        orgData.children = data.map((item) => {
          return {
            ...item,
            id: item.org_id,
            name: item.org_name,
            latitude: parseFloat(item.latitude),
            longitude: parseFloat(item.longitude),
            coordinates: item.coordinates || "",
          };
        });
        this.orgData = {...orgData};
        console.log(
            "==========================getSubMapData:result",
            this.orgData
        );
      } else {
        this.$message.error(msg);
      }
    },

    //加载组织数据
    async loadOrgData() {
      const url = "/gov/org/agency/maporg";
      let params = {
        orgId: this.orgId,
        level: this.orgLevel,
      };

      const {data, code, msg} = await requestPost(url, params);
      if (code === 0) {
        this.orgData = data;
        this.orgId = this.orgId;
        this.orgLevel = this.orgData.level;
      } else {
        this.$message.error(msg);
      }
    },
    handelClickRkfxPei(val) {
      console.log(val);
    },
  },
};
</script>

<style
    lang="scss"
    src="@/assets/scss/dataBoard/overview/index.scss"
    scoped
></style>