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 :currentLevelData="currentLevelData" />
        </div>

        <div class="m-box">
          <title-box
            :text="`${
              currentLevel === 'district'
                ? '区'
                : currentLevel === 'street'
                ? '街道'
                : currentLevel === 'community'
                ? '社区'
                : currentLevel === 'grid'
                ? '网格'
                : ''
            }图谱画像`"
          />
          <jdtphx :currentLevelData="currentLevelData" :id="orgId" />
        </div>
      </div>
      <div class="g-center">
        <div
          :class="listShow ? 'm-map' : 'g-center-open'"
          style="overflow: hidden"
        >
          <map-top
            :currentLevelData="currentLevelData"
            @changeType="changeType"
            :level="currentLevel"
          />
          <div v-if="breadList.length > 1" class="go-back" @click="goBackMap">
            <img src="~@/assets/images/shuju/overview/go-back.png" />
          </div>
          <grid-map
            ref="map"
            @clickAgency="clickAgencyItem"
            :srcGridData="orgData"
            @clickDotBtn="handleClickDotBtn"
            :level="currentLevel"
          />
        </div>
        <div class="m-box m-rybox">
          <title-box :text="`${customerName}${peopleList[peopleType]}`">
            <div class="up-style" style="width: 51%">
              <div>
                <img
                  v-if="listShow"
                  @click="upDownShow"
                  src="~@/assets/images/overview/down-icon.png"
                />
                <img
                  v-else
                  @click="upDownShow"
                  src="~@/assets/images/overview/up-icon.png"
                />
              </div>
            </div>
          </title-box>
          <jdwgy
            v-show="listShow"
            :peopleType="peopleType"
            :currentLevelData="currentLevelData"
            @setNum="setNum"
            @setPoint="setPoint"
          />
        </div>
      </div>

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

        <!-- 社区&网格-->
        <div
          v-if="currentLevel === 'community' || currentLevel === 'grid'"
          class="m-box"
        >
          <title-box text="人房数据动态更新" />
          <Tabs
            v-model="dynamicType"
            :list="dynamicTypeList"
            v-if="currentLevel === 'community'"
            @changeVal="dynamicTypeChange"
          />
          <DynamicHumanRoomData
            :currentLevelData="currentLevelData"
            v-if="dynamicType === 1"
          />
          <GridUpdateRanking
            :currentLevelData="currentLevelData"
            v-if="dynamicType === 2"
          />
        </div>
        <!-- 社区概览-->
        <div v-if="currentLevel === 'community'" class="m-box">
          <title-box text="社区满意度自查结果">
            <span class="date-span">
              <el-date-picker
                popper-class="date-current-weiyi"
                :append-to-body="false"
                v-model="sqzcDate"
                format="yyyy-MM"
                value-format="yyyy-MM"
                type="month"
                :clearable="false"
                placeholder="选择月"
              />
            </span>
          </title-box>
          <CommunityResult
            :currentLevelData="currentLevelData"
            :date="sqzcDate"
          />
        </div>
        <div v-if="currentLevel === 'community'" class="m-box">
          <title-box text="事件&回访">
            <span class="date-span">
              <el-date-picker
                popper-class="date-current-weiyi"
                :append-to-body="false"
                v-model="sjhfDate"
                format="yyyy-MM"
                value-format="yyyy-MM"
                @change="changeDate"
                type="month"
                :clearable="false"
                placeholder="选择月"
              />
            </span>
          </title-box>
          <Tabs
            v-model="eventType"
            :list="eventTypeList"
            @changeVal="eventTypeChange"
          />
          <EventAndFollowUp
            :currentLevelData="currentLevelData"
            :date="sjhfDate"
            v-if="eventType === 1"
          />
          <FollowUp
            :currentLevelData="currentLevelData"
            :date="sjhfDate"
            v-if="eventType === 2"
          />
        </div>
        <!-- 网格 -->
        <div v-if="currentLevel === 'grid'" class="m-box">
          <title-box text="社区网格数据更新情况排行">
            <span class="date-span">
              <el-date-picker
                popper-class="date-current-weiyi"
                :append-to-body="false"
                v-model="sqwggxDate"
                format="yyyy-MM"
                value-format="yyyy-MM"
                @change="changeDate"
                type="month"
                :clearable="false"
                placeholder="选择月"
              />
            </span>
          </title-box>
          <RankingGridData
            :currentLevelData="currentLevelData"
            :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 GridUpdateRanking from "@/views/dataBoard/overview/components/GridUpdateRanking.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 FollowUp from "@/views/dataBoard/overview/components/FollowUp.vue";
import Tabs from "@/views/dataBoard/satisfactionEval/components/Tabs/index.vue";

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

export default {
  name: "renfang",

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

  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: "",
      currentLevelData: {
        orgId: this.$store.state.chooseArea.chooseName.orgId,
        orgLevel: this.$store.state.chooseArea.chooseName.level,
        meta: { title: "人房总览" },
      },
      breadList: [
        {
          orgId: "",
          orgLevel: "",
          id: "",
          level: "",
          meta: { title: "人房总览" },
        },
      ],
      peopleList: {
        staffGrid: "网格员",
        staffDepartment: "单位/组织",
        staffAgency: "社区工作者",
        chief: "楼长/单元长",
        publicWelfareNum: "公益岗",
        volunteer: "志愿者",
        unit: "微网格",
        building: "楼栋",
      },
      displayedResiId: "",
      displayedHouseId: "",
      dynamicType: 1,
      dynamicTypeList: [
        {
          value: 1,
          label: "更新动态",
        },
        {
          value: 2,
          label: "网格更新排行",
        },
      ],
      eventType: 1,
      eventTypeList: [
        {
          value: 1,
          label: "12345事件",
        },
        {
          value: 2,
          label: "事件回访",
        },
      ],
      customerName: "",
      peopleType: "staffAgency",
      listShow: true,
    };
  },

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

  watch: {
    "$store.state.chooseArea.chooseName"(val) {
      if (val.orgId) {
        this.currentLevelData = {
          ...this.currentLevelData,
          ...val,
          orgLevel: val.level,
        };
        this.getMapData();
      }
    },
  },

  methods: {
    changeCustomerName() {
      this.customerName =
        localStorage.getItem("customerNameDataBoard") || "数据分析可视化平台";
    },
    changeType(e) {
      this.peopleType = e;
    },
    dynamicTypeChange(val) {
      this.dynamicType = val;
    },
    eventTypeChange(val) {
      this.eventType = val;
    },
    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) {
      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) {
      this.$refs.map.clearMarkert();
      if (item.id) {
        this.customerName = item.name || item.meta.title;
        this.currentLevelData = {
          orgId: item.id,
          orgLevel: item.level,
        };
      } else {
        this.customerName =
          localStorage.getItem("customerNameDataBoard") || "数据分析可视化平台";
        this.currentLevelData = {
          ...this.$store.state.chooseArea.chooseName,
          orgLevel: this.$store.state.chooseArea.chooseName.level,
        };
      }
      this.toBread({
        orgId: item.id,
        orgLevel: item.level,
        meta: { title: item.name },
      });
    },
    goBackMap() {
      const item = this.breadList[this.breadList.length - 2];
      this.clickAgencyItem(item);
    },
    toBread(item) {
      const { orgId } = item;
      const { breadList } = this;
      let index = breadList.findIndex((val) => val.orgId === orgId);
      if (index >= 0) {
        this.breadList = breadList.slice(0, index + 1);
      } else {
        breadList.push({ ...item, id: item.orgId, level: item.orgLevel });
        this.breadList = breadList;
      }
      this.getMapData(item.orgId, item.orgLevel);
    },

    // 点击搜索结果条目，在地图上显示点和详情弹窗
    handleClickSearchItem(item) {
      if (!item.longitude) {
        return this.$message.error("请先设置坐标");
      }
      this.$refs.map.setDotMarker(item, [
        parseFloat(item.longitude),
        parseFloat(item.latitude),
      ]);
    },
    setNum(data) {
      console.log(this.orgData, data, "111");
      // data
      let params = [];
      let org = this.orgData.children;
      org.forEach((item) => {
        data.forEach((item2) => {
          if (item2.orgId === item.id && item.coordinates) {
            params.push({
              ...item2,
              peopleType: this.peopleList[this.peopleType],
              latitude: item.latitude,
              longitude: item.longitude,
            });
          }
        })
      })
      // if (params.length) {
        this.$refs.map.setNum(params)
      // }
      if (params.length) {
        this.$refs.map.setNum(params);
      }
    },
    upDownShow() {
      this.listShow = !this.listShow;
    },
    setPoint(data) {
      // if (data) {
        this.$refs.map.setPoint(data)
      // }
    },
    //获取地图上显示的组织数据
    async getMapData(
      orgId = this.$store.state.chooseArea.chooseName.orgId,
      level = this.$store.state.chooseArea.chooseName.level
    ) {
      const url = "org_map";
      this.$http
        .post(`/gov/org/agency/maporg`, { orgId, level })
        .then(({ data: { data } }) => {
          this.orgData = data;
          this.orgId = this.orgData.id;
          console.log(this.orgId);
          this.orgLevel = this.orgData.level;
          this.currentLevel = this.orgData.agencyLevel;
          this.currentLevelData = {
            orgId: this.orgId,
            orgLevel: this.currentLevel,
          };
          this.peopleType =
            // this.currentLevel === "grid" ? "unit" : "staffAgency";
        });
    },

    //获取地图上显示的组织数据
    async 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 };
      } 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" scoped>
.up-style {
  width: 51%;
  img {
    height: 12px;
    width: 12px;
  }
  img:hover {
    cursor: pointer;
  }
}
.go-back {
  position: absolute;
  z-index: 100;
  top: 100px;
  left: 16px;
  right: 0;

  img {
    height: 36px;
    width: 36px;
  }

  img:hover {
    cursor: pointer;
  }
}
.date-current-weiyi{
  background: #000;
}
</style>
<style
  lang="scss"
  src="@/assets/scss/dataBoard/overview/index.scss"
  scoped
></style>

<style lang="scss" scoped>
.tabs {
  padding: 16px;
}
</style>