epmet-work-pc/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-search">
        <div class="btn" @click="searchModule.displayedCard = true">
          <img
            src="~@/assets/images/shuju/renfang/index/search/btn-bg.png"
            class="btn-bg"
          />
          <img
            src="~@/assets/images/shuju/renfang/index/search/btn-bg-hover.png"
            class="btn-bg-hover"
          />
          <span>点击搜索</span>
        </div>

        <div class="card" v-show="searchModule.displayedCard">
          <div class="card-input">
            <div class="card-btn">
              <img
                src="~@/assets/images/shuju/renfang/index/search/search.png"
              />
            </div>

            <input
              type="text"
              placeholder="输入关键词搜索"
              @key.enter="handleSearch"
              v-model="searchModule.keyword"
            />

            <div class="i-div"></div>

            <div class="card-btn" @click="searchModule.displayedCard = false">
              <img
                src="~@/assets/images/shuju/renfang/index/search/close.png"
              />
            </div>
          </div>
          <div class="card-show">
            <div class="card-tabs">
              <div
                :class="{ 'z-on': searchModule.resultTab == 'all' }"
                @click="searchModule.resultTab = 'all'"
              >
                全部
              </div>
              <div
                :class="{ 'z-on': searchModule.resultTab == 'resi' }"
                @click="searchModule.resultTab = 'resi'"
              >
                居民
              </div>
              <div
                :class="{ 'z-on': searchModule.resultTab == 'all' }"
                @click="searchModule.resultTab = 'all'"
              >
                小区
              </div>
              <div
                :class="{ 'z-on': searchModule.resultTab == 'all' }"
                @click="searchModule.resultTab = 'all'"
              >
                楼栋
              </div>
              <div
                :class="{ 'z-on': searchModule.resultTab == 'all' }"
                @click="searchModule.resultTab = 'all'"
              >
                房屋
              </div>
            </div>

            <div class="card-list" v-if="searchModule.result.length > 0">
              <div
                class="card-item"
                :key="item.id"
                v-for="item in searchModule.result"
              >
                <span>{{ item.title }}</span>
                <img
                  src="~@/assets/images/shuju/renfang/index/search/arrow.png"
                  class="i-arrow"
                />
                <img
                  src="~@/assets/images/shuju/renfang/index/search/arrow-on.png"
                  class="i-arrow z-on"
                />
              </div>
            </div>

            <div class="card-empty" v-else>
              <img src="~@/assets/images/shuju/renfang/index/empty.png" />
              <span>没有找到搜索结果～</span>
            </div>
          </div>
        </div>
      </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>
            <img src="~@/assets/images/shuju/renfang/index/i-hint.png" />
          </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 m-szsq">
          <szsq :orgId="orgData.id"></szsq>
        </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 m-rkyj">
          <rkyj :orgId="orgData.id"></rkyj>
        </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">
          <rkfx :orgId="orgData.id"></rkfx>
        </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 szsq from "@/views/dataBoard/renfang/cpts/szsq";
import { requestPost } from "@/js/dai/request";
import getQueryPara from "dai-js/modules/getQueryPara";

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

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

      warningData: [],

      searchModule: {
        displayedCard: false,
        keyword: "",
        resultTab: "all", // all resi
        result: [
          {
            id: 1,
            title: "四季景园",
          },
          {
            id: 11,
            title: "四季景园-四号楼",
          },
          {
            id: 1111,
            title: "四季景园-四号楼-1单元",
          },
          {
            id: 111111,
            title: "四季景园-四号楼-1单元-101",
          },
          {
            id: 12342,
            title: "四季景园-2单元",
          },
          {
            id: 133,
            title: "四季景园-2单元-2号楼-201",
          },
          {
            id: 122,
            title: "四季景园2",
          },
          {
            id: 1312,
            title: "四季景园4",
          },
        ],
      },
    };
  },
  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: {
    handleSearch() {
      console.log(this.searchModule);
    },

    //加载组织数据
    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>