epmet-work-pc-chengyang/src/views/dataBoard/renfang/index.vue

<template>
  <div class="g-row">
    <div class="g-left">
      <div class="m-box">
        <div class="box-title">
          <img
            src="~@/assets/images/shuju/main/card-title-bg-480.png"
            class="box-title-bg"
          />
          <div class="box-title-txt">房屋概览</div>
        </div>

        <div class="m-subbox">
          <fwgl :orgId="orgData.id"></fwgl>
        </div>
      </div>

      <div class="m-box">
        <div class="box-title">
          <img
            src="~@/assets/images/shuju/main/card-title-bg-480.png"
            class="box-title-bg"
          />
          <div class="box-title-txt">居民概览</div>
        </div>

        <div class="m-subbox">
          <jmgl :orgId="orgData.id"></jmgl>
        </div>
      </div>
    </div>

    <div class="g-center">
      <div class="m-map">
        <div class="m-per">
          <div class="item">
            <img
              class="item-icon"
              src="~@/assets/images/shuju/renfang/index/per/lnr.png"
            />
            <div class="item-info">
              <div>老年人</div>
              <div>
                <b>10.22</b>
                %
              </div>
            </div>
          </div>
          <div class="item">
            <img
              class="item-icon"
              src="~@/assets/images/shuju/renfang/index/per/qsn.png"
            />
            <div class="item-info">
              <div>青少年</div>
              <div>
                <b>10.22</b>
                %
              </div>
            </div>
          </div>
          <div class="item">
            <img
              class="item-icon"
              src="~@/assets/images/shuju/renfang/index/per/zyz.png"
            />
            <div class="item-info">
              <div>志愿者</div>
              <div>
                <b>10.22</b>
                %
              </div>
            </div>
          </div>
          <div class="item">
            <img
              class="item-icon"
              src="~@/assets/images/shuju/renfang/index/per/dy.png"
            />
            <div class="item-info">
              <div>党员</div>
              <div>
                <b>10.22</b>
                %
              </div>
            </div>
          </div>
          <div class="item">
            <img
              class="item-icon"
              src="~@/assets/images/shuju/renfang/index/per/syry.png"
            />
            <div class="item-info">
              <div>失业人员</div>
              <div>
                <b>10.22</b>
                %
              </div>
            </div>
          </div>
        </div>

        <grid-map
          v-if="orgData.id"
          @clickAgency="clickAgencyItem"
          :srcGridData="orgData"
        />
      </div>

      <div class="m-box m-cate">
        <div class="box-title">
          <img
            src="~@/assets/images/shuju/main/card-title-bg-800.png"
            class="box-title-bg"
          />
          <div class="box-title-txt">居民分类分析</div>

          <div class="box-title-btn">
            <img src="~@/assets/images/shuju/renfang/index/znyc.png" />
            <span>智能预测</span>
          </div>
        </div>

        <div class="list">
          <div
            class="item"
            :key="item.code"
            v-for="(item, index) in warningData"
          >
            <div>{{ ("0" + (index + 1)).substr(-2) }}.</div>
            <div class="item-name">{{ item.name }}</div>
            <div class="item-count">
              <b>{{ item.count }}</b> 人
            </div>
            <div class="item-progress">
              <b :style="{ width: item.count + '%' }"></b>
            </div>
            <div class="item-per">
              <span>较上月</span>
              <img
                v-if="false"
                src="~@/assets/images/shuju/renfang/index/up.png"
              />
              <img v-else src="~@/assets/images/shuju/renfang/index/down.png" />
              <b>{{ item.count }}</b>
              <span>人</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="g-right">
      <div class="m-box">
        <div class="box-title">
          <img
            src="~@/assets/images/shuju/main/card-title-bg-480.png"
            class="box-title-bg"
          />
          <div class="box-title-txt">人口分析</div>
        </div>

        <div class="m-subbox">
          <rkfx :orgId="orgData.id"></rkfx>
        </div>
      </div>

      <div class="m-box">
        <div class="box-title">
          <img
            src="~@/assets/images/shuju/main/card-title-bg-480.png"
            class="box-title-bg"
          />
          <div class="box-title-txt">人口预警</div>
        </div>

        <div class="m-subbox">
          <rkyj :orgId="orgData.id"></rkyj>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import gridMap from "@/views/dataBoard/cpts/map/index";
import fwgl from "@/views/dataBoard/renfang/cpts/fwgl";
import jmgl from "@/views/dataBoard/renfang/cpts/jmgl";
import rkfx from "@/views/dataBoard/renfang/cpts/rkfx";
import rkyj from "@/views/dataBoard/renfang/cpts/rkyj";
import { requestPost } from "@/js/dai/request";
import getQueryPara from "dai-js/modules/getQueryPara";

export default {
  components: { gridMap, fwgl, jmgl, rkfx, rkyj },

  data() {
    return {
      orgData: {}, //当前组织对象
      orgId: "",
      orgLevel: "",
      subAgencyArray: [],

      warningData: [],
    };
  },
  async mounted() {
    const queryOrgId = getQueryPara("orgId");
    const queryOrgLevel = getQueryPara("orgLevel");
    console.log("orgId", queryOrgId);
    if (queryOrgId) {
      this.orgId = queryOrgId;
      this.orgLevel = queryOrgLevel || "agency";
    }

    //加载组织数据
    await this.loadOrgData();
    this.getWarningList();
  },
  methods: {
    //加载组织数据
    async getWarningList() {
      const url = "/epmetuser/statsresiwarn/list";
      let params = {
        id: this.orgData.id,
        level: "agency",
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.warningData = data.map((item) => {
          return {
            code: item.columnName,
            name: item.label,
            count: item.count,
            const: "const",
          };
        });
      } 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.orgData.id;
        this.orgLevel = this.orgData.level;
        if (data.children && data.children.length > 0) {
          this.subAgencyArray = data.children;
        } else {
          this.subAgencyArray = [];
        }
      } else {
        this.$message.error(msg);
      }
    },
  },
};
</script>

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