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 text="街道介绍" />
          <Jdjs />
        </div>

        <div class="m-box">
          <Title text="街道图谱画像" />
          <Jdtphx />
        </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 text="XX街道网格员" />
          <jdwgy />
        </div>
      </div>

      <div class="g-right">
        <div class="m-box">
          <Title text="人房数据统计" />
          <rfsjtj />
        </div>

        <div class="m-box">
          <Title text="各社区人房数据更新排行">
            <span class="date-span">
              <el-date-picker
                v-model="rfphDate"
                format="yyyy-MM"
                value-format="yyyy-MM"
                @change="change"
                type="month"
                :clearable="false"
                placeholder="选择月"
              >
              </el-date-picker>
            </span>
          </Title>
          <sqrfph />
        </div>
        <div class="m-box">
          <Title text="各社区12345投诉事件统计">
            <span class="date-span">
              <el-date-picker
                v-model="rfphDate"
                format="yyyy-MM"
                value-format="yyyy-MM"
                @change="change"
                type="month"
                :clearable="false"
                placeholder="选择月"
              >
              </el-date-picker>
            </span>
          </Title>
          <sq12345 />
        </div>
      </div>

      <cpt-loading v-show="false" />
    </div>
  </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 Title 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 { requestPostBi } from "@/js/dai/request-bipass";
import { requestPost } from "@/js/dai/request";
import getQueryPara from "dai-js/modules/getQueryPara";

function iniGetPerInfo() {
  return {
    unemployed_ratio: "--",
    crowd_ratio: "--",
    volunteer_ratio: "--",
    month_update_ratio: "--",
    aged_ratio: "--",
    teenagers_ratio: "--",
  };
}

export default {
  name: "renfang",

  components: {
    gridMap,
    cptLoading,
    cptBread,
    Title,
    Jdjs,
    Jdtphx,
    mapTop,
    jdwgy,
    rfsjtj,
    sqrfph,
    sq12345,
  },

  data() {
    return {
      loading: false,
      rfphDate: "2023-03",
      orgData: {
        children: [],
      }, //当前组织对象
      orgId: "",
      orgLevel: "",
      breadList: [
        {
          orgId: "",
          orgLevel: "",
          meta: { title: "人房总览" },
        },
      ],

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

  mounted() {
    const queryOrgId = getQueryPara("orgId");
    const queryOrgLevel = getQueryPara("orgLevel");
    this.init(queryOrgId, queryOrgLevel);
  },

  watch: {},

  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.loadOrgData();
      await this.getMapData();
      await this.getSubMapData();
      this.getResiCategoryData();
      this.getPerInfo();

      this.loading = true;
    },

    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('clickAgencyItem(item)::',item);
      this.toBread({
        orgId: item.id,
        orgLevel: item.level,
        meta: { title: item.name },
      });
    },

    toBread(item) {
      console.log("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() {
      console.log("=========================getMapData");
      const url = "org_map";

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

      if (code === 0) {
        console.log("data::", data);
        let info = data[0];
        this.orgData = {
          ...info,
          id: info.org_id,
          name: info.org_name,
          latitude: parseFloat(info.latitude),
          longitude: parseFloat(info.longitude),
          coordinates: info.coordinates || "",
          children: [],
        };
        this.orgId = this.orgData.org_id;
        this.orgLevel = this.orgData.level;
      } else {
        this.$message.error(msg);
      }
    },

    //获取地图上显示的组织数据
    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>