epmet-oper-gov/src/views/modules/visual/command/cpts/popup.vue

<template>
  <div class="m-pop" v-show="!hidden">
    <div class="info">
      <div v-if="placeType === 'resi' || placeType === 'special_resi'">
        <div class="info-title">居民信息</div>
        <div class="item">
          姓名：
          <span>{{ info.icUserName || "--" }}</span>
        </div>
        <div class="item">
          所属网格：
          <span>{{ info.gridName || "--" }}</span>
        </div>
        <div class="item">
          所属小区：
          <span>{{ info.villageName || "--" }}</span>
        </div>
        <div class="item">
          本地户籍：
          <span>{{ info.isBdhjShow || "--" }}</span>
        </div>

        <div class="item">
          手机：
          <span>{{ info.mobile || "--" }}</span>
        </div>
        <div class="item">
          性别：
          <span>{{ info.genderShow || "--" }}</span>
        </div>
        <div class="item">
          身份证号：
          <span>{{ info.idCard || "--" }}</span>
        </div>

        <div class="item">
          工作单位：
          <span>{{ info.gzdw || "--" ? info.gzdw : "--" }}</span>
        </div>
        <div class="item">
          人户状况：
          <span>{{ info.rhzkShow || "--" }}</span>
        </div>
        <div class="item">
          人员类别：
          <span>{{ info.resiCategoryNames || "--" }}</span>
        </div>
        <div class="operate">
          <div @click="handleClickBtn('watch-resi')" class="btn">查看更多</div>
          <div @click="handleClickBtn('create-demand')" class="btn">
            发布需求
          </div>
        </div>
      </div>

      <div v-if="placeType === 'dangerous_chemicals'">
        <div class="info-title">企业信息</div>
        <div class="item">
          企业名称：
          <span>{{ info.name || "--" }}</span>
        </div>
        <div class="item">
          企业类型：
          <span>{{ info.categoryName || "--" }}</span>
        </div>
        <div class="item">
          周边安全距离：
          <span>{{ info.safeDistance || "--" }}</span>
        </div>
        <div class="item">
          危化品种类：
          <span>{{ info.dangerTypeName || "--" }}</span>
        </div>
        <div class="item">
          负责人：
          <span>{{ info.principalName || "--" }}</span>
        </div>
        <div class="item">
          联系电话：
          <span>{{ info.principalMobile || "--" }}</span>
        </div>
        <div class="item">
          经营地址：
          <span>{{ info.address || "--" }}</span>
        </div>
        <div class="item">
          备注：
          <span>{{ info.remark || "--" }}</span>
        </div>
      </div>

      <div
        v-if="
          placeType === 'public_service' ||
          placeType === 'city_management' ||
          placeType === 'superior_resource'
        "
      >
        <div class="info-title">场所信息</div>
        <div class="item">
          场所名称：
          <span>{{ info.name || "--" }}</span>
        </div>
        <div class="item">
          场所分类：
          <span>{{ info.categoryName || "--" }}</span>
        </div>
        <div class="item">
          占地面积：
          <span>{{ info.areaCovered || "--" }}</span>
        </div>
        <div class="item">
          容纳人数：
          <span>{{ info.capacity || "--" }}</span>
        </div>
        <div class="item">
          地址：
          <span>{{ info.address || "--" }}</span>
        </div>
      </div>

      <div v-if="placeType === 'event'">
        <div class="info-title">难点痛点</div>
        <div class="item">
          所属网格：
          <span>{{ info.gridName || "--" }}</span>
        </div>
        <div class="item">
          发生时间：
          <span>{{ info.happenTime || "--" }}</span>
        </div>
        <div class="item">
          事件内容：
          <span>{{ info.eventContent || "--" }}</span>
        </div>

        <div
          v-if="info.imageList && info.imageList.length > 0"
          class="info-prop"
        >
          <span>图片：</span>
          <div class="item-pics">
            <img
              :src="src"
              :key="src"
              style="width: 100px; height: 100px; padding-right: 10px"
              v-for="src in info.imageList"
              @click="watchImg(src)"
            />
          </div>
        </div>

        <div
          v-if="info.voiceList && info.voiceList.length > 0"
          class="info-prop"
        >
          <span>音频：</span>
          <div class="item-pics">
            <audio controls>
              <source
                :src="item.url"
                type=""
                :key="item.url"
                v-for="item in info.voiceList"
              />
            </audio>
          </div>
        </div>

        <div class="item">
          反映渠道：
          <span>{{ info.sourceTypeName || "--" }}</span>
        </div>
        <div class="item">
          地址：
          <span>{{ info.address || "--" }}</span>
        </div>
        <div class="item">
          报事人：
          <span>{{ info.name || "--" }}</span>
        </div>
        <div class="item">
          手机号：
          <span>{{ info.mobile || "--" }}</span>
        </div>
        <div class="item">
          身份证号：
          <span>{{ info.idCard || "--" }}</span>
        </div>

        <div class="operate">
          <div @click="handleClickBtn('watch-event')" class="btn">查看详情</div>
        </div>
      </div>

      <div v-if="placeType === 'community_org'">
        <div class="info-title">组织信息</div>
        <div class="item">
          组织名称：
          <span>{{ info.organizationName || "--" }}</span>
        </div>
        <div class="item">
          组织分类：
          <span>{{ info.categoryName || "--" }}</span>
        </div>
        <div class="item">
          组织人数：
          <span>{{ info.organizationPersonCount || "--" }}</span>
        </div>
        <div class="item">
          组织成员：
          <span>{{ info.organizationPersonnelShow || "--" }}</span>
        </div>
        <div class="item">
          服务事项：
          <span>{{ info.serviceItem || "--" }}</span>
        </div>
        <div class="item">
          负责人：
          <span>{{ info.principalName || "--" }}</span>
        </div>
        <div class="item">
          联系电话：
          <span>{{ info.principalPhone || "--" }}</span>
        </div>
        <div class="item">
          创建时间：
          <span>{{ info.organizationCreatedTime || "--" }}</span>
        </div>
      </div>

      <div v-if="placeType === 'group_rent'">
        <div class="info-title">房屋信息</div>
        <div class="item">
          房屋名称：
          <span>{{ info.houseName || "--" }}</span>
        </div>
        <div class="item">
          房屋类型：
          <span>{{ info.houseTypeName || "--" }}</span>
        </div>
        <div class="item">
          房屋用途：
          <span>{{ info.purposeName || "--" }}</span>
        </div>
        <div class="item">
          房屋状态：
          <span>{{ info.rentName || "--" }}</span>
        </div>
        <div class="item">
          房主姓名：
          <span>{{ info.ownerName || "--" }}</span>
        </div>
        <div class="item">
          联系方式：
          <span>{{ info.ownerPhone || "--" }}</span>
        </div>
        <div class="item">
          房主身份证：
          <span>{{ info.ownerIdCard || "--" }}</span>
        </div>
      </div>

      <div v-if="placeType === 'enterprise_patrol'">
        <div class="info-title">企事业信息</div>
        <div class="item">
          场所类型：
          <span>{{ info.placeTypeName || "--" }}</span>
        </div>
        <div class="item">
          场所区域：
          <span>{{ info.gridName || "--" }}</span>
        </div>
        <div class="item">
          场所名称：
          <span>{{ info.placeOrgName || "--" }}</span>
        </div>
        <div class="item">
          场所地址：
          <span>{{ info.address || "--" }}</span>
        </div>
        <div class="item">
          规模：
          <span>{{ info.scale || "--" }}</span>
        </div>
        <div class="item">
          负责人：
          <span>{{ info.personInCharge || "--" }}</span>
        </div>
        <div class="item">
          联系电话：
          <span>{{ info.mobile || "--" }}</span>
        </div>
      </div>

      <div v-if="placeType === 'party_unit'">
        <div class="info-title">联建单位信息</div>
        <div class="item">
          单位名称：
          <span>{{ info.unitName || "--" }}</span>
        </div>
        <div class="item">
          分类：
          <span>{{ info.typeName || "--" }}</span>
        </div>
        <div class="item">
          服务事项：
          <span>{{ info.serviceMatterListShow || "--" }}</span>
        </div>
        <div class="item">
          联系人：
          <span>{{ info.contact || "--" }}</span>
        </div>
        <div class="item">
          联系电话：
          <span>{{ info.contactMobile || "--" }}</span>
        </div>
        <div class="item">
          在职党员：
          <span>{{ info.memberCount || "--" }}</span>
        </div>
        <div class="item">
          备注：
          <span>{{ info.remark || "--" }}</span>
        </div>
        <div class="item">
          地理位置：
          <span>{{ info.address || "--" }}</span>
        </div>
      </div>

      <div v-if="placeType === 'grid'">
        <div class="operate">
          <div @click="handleClickBtn('create-service')" class="btn">
            发起服务
          </div>
        </div>
      </div>

      <div v-if="placeType === 'list'">
        <div class="info-title">列表</div>
        <div class="list">
          <div
            class="item"
            @click="handleClickListItem(item)"
            :key="'list' + item.id"
            v-for="(item, index) in list"
          >
            {{ index + 1 }}、{{ item.content }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";

export default {
  name: "popup",

  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
  },

  data() {
    return {
      hidden: true,
      placeType: "",
      info: {},
      list: [],
    };
  },

  computed: {},
  watch: {},

  mounted() {},

  methods: {
    handleClickBtn(type) {
      this.$emit("operate", type, this.info);
    },

    handleClickListItem(item) {
      console.log("handleClickListItem", item);
      this.$emit("clickListItem", item);
    },

    async show(item) {
      console.log("-----------------show");
      const { placeType, latitude, longitude } = item;
      if (!placeType) {
        return false;
      }
      if (!latitude || !longitude) {
        this.$message.warning("请先完善坐标位置");
        return false;
      }

      if (placeType === "list") {
        this.list = item.dataList;
      }

      if (placeType === "resi" || placeType === "special_resi") {
        await this.loadResi(item);
      }
      if (placeType === "public_service") {
        //公共服务图层
        await this.loadPublicService(item);
      }
      if (placeType === "dangerous_chemicals") {
        //重点危化品企业
        await this.loadDangerousChemicals(item);
      }
      if (placeType === "event") {
        //难点痛点
        await this.loadEvent(item);
      }
      if (placeType === "city_management") {
        //城市管理图层
        await this.loadCityManagement(item);
      }
      if (placeType === "community_org") {
        //社区自组织
        await this.loadCommunityOrg(item);
      }
      if (placeType === "superior_resource") {
        //优势资源
        await this.loadSuperiorResource(item);
      }
      if (placeType === "group_rent") {
        //群租房
        await this.loadGroupRent(item);
      }

      if (placeType === "party_unit") {
        //来自联建单位的机关直属部门
        await this.loadPartyUnit(item);
      }
      if (placeType === "enterprise_patrol") {
        //来自企事业查询的
        await this.loadEnterprisePartrol(item);
      }
      this.placeType = item.placeType;
      this.hidden = false;
      return true;
    },

    async loadResi(info) {
      const url = "/epmetuser/icresiuser/resi-brief/" + info.id;
      // const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/distribution"

      let params = {};

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

      if (code === 0) {
        data.icUserName = data.icUserName ? data.icUserName : "--";
        data.gridName = data.gridName ? data.gridName : "--";
        data.villageName = data.villageName ? data.villageName : "--";
        data.mobile = data.mobile ? data.mobile : "--";
        data.idCard = data.idCard ? data.idCard : "--";
        data.birthday = data.birthday ? data.birthday : "--";
        data.contacts = data.contacts ? data.contacts : "--";
        data.contactsMobile = data.contactsMobile ? data.contactsMobile : "--";

        data.isBdhjShow = data.isBdhj
          ? data.isBdhj === "0"
            ? "否"
            : "是"
          : "--";
        data.genderShow = data.gender
          ? data.gender === "0"
            ? "女"
            : "男"
          : "--";
        if (data.rhzk === "rhyz") {
          data.rhzkShow = "人户一致";
        } else if (data.rhzk === "rzhbz") {
          data.rhzkShow = "人在户不在";
        } else if (data.rhzk === "hzrbz") {
          data.rhzkShow = "户在人不在";
        } else {
          data.rhzkShow = "--";
        }

        let categoriesArray = [];

        for (let key in data.volunteerCategories) {
          categoriesArray.push(data.volunteerCategories[key]);
        }

        if (categoriesArray.length > 0) {
          data.categories = categoriesArray.join(",");
        } else {
          data.categories = "--";
        }
        this.info = JSON.parse(JSON.stringify(data));
      } else {
        this.$message.error(msg);
      }
    },

    async loadPublicService(info) {
      const url = "/gov/org/icPublicService/detail";
      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/icPublicService/detail"

      let params = {
        icPublicServiceId: info.id,
      };

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

      if (code === 0) {
        data.name = data.name ? data.name : "--";
        data.categoryName = data.categoryName ? data.categoryName : "--";
        data.areaCovered = data.areaCovered
          ? data.areaCovered + "平方公里"
          : "--";
        data.capacity = data.capacity ? data.capacity : "--";
        data.address = data.address ? data.address : "--";

        this.info = JSON.parse(JSON.stringify(data));
      } else {
        this.$message.error(msg);
      }
    },

    async loadEvent(info) {
      const url = "/gov/project/icEvent/detail";
      //const url = "http://yapi.elinkservice.cn/mock/245/api/gov/project/icEvent/processAnalysis/eventDetail/" + this.eventId;

      const { data, code, msg } = await requestPost(url, {
        icEventId: info.id,
      });

      if (code === 0) {
        this.info = JSON.parse(JSON.stringify(data));
      } else {
        this.$message.error(msg);
      }
    },

    async loadDangerousChemicals(info) {
      const url = "/gov/org/icDangerousChemicals/detail";
      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/icDangerousChemicals/detail"

      let params = {
        icDangerousChemicalsId: info.id,
      };

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

      if (code === 0) {
        data.name = data.name ? data.name : "--";
        data.categoryName = data.categoryName ? data.categoryName : "--";
        data.safeDistance = data.safeDistance ? data.safeDistance : "--";
        data.dangerTypeName = data.dangerTypeName ? data.dangerTypeName : "--";
        data.principalName = data.principalName ? data.principalName : "--";
        data.principalMobile = data.principalMobile
          ? data.principalMobile
          : "--";
        data.address = data.address ? data.address : "--";
        data.remark = data.remark ? data.remark : "--";

        this.info = JSON.parse(JSON.stringify(data));
      } else {
        this.$message.error(msg);
      }
    },

    async loadCityManagement(info) {
      const url = "/gov/org/icCityManagement/detail";
      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/icCityManagement/detail"

      let params = {
        icCityManagementId: info.id,
      };

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

      if (code === 0) {
        data.name = data.name ? data.name : "--";
        data.categoryName = data.categoryName ? data.categoryName : "--";
        data.areaCovered = data.areaCovered
          ? data.areaCovered + "平方公里"
          : "--";
        data.capacity = data.capacity ? data.capacity : "--";
        data.address = data.address ? data.address : "--";

        this.info = JSON.parse(JSON.stringify(data));
      } else {
        this.$message.error(msg);
      }
    },

    async loadCommunityOrg(info) {
      // const url = "/gov/org/icCityManagement/detail"
      const url =
        "/heart/iccommunityselforganization/community-self-org-detail/" +
        info.id;

      let params = {};

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

      if (code === 0) {
        data.orgPersonArray = [];
        data.organizationPersonnel.forEach((element) => {
          let orgPersonnel =
            element.personName + "(" + element.personPhone + ")";
          data.orgPersonArray.push(orgPersonnel);
        });

        data.organizationPersonnelShow = data.orgPersonArray.join(",");

        this.info = JSON.parse(JSON.stringify(data));
      } else {
        this.$message.error(msg);
      }
    },

    async loadSuperiorResource(info) {
      const url = "/gov/org/icSuperiorResource/detail";
      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/icSuperiorResource/detail"

      let params = {
        icSuperiorResourceId: info.id,
      };

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

      if (code === 0) {
        data.name = data.name ? data.name : "--";
        data.categoryName = data.categoryName ? data.categoryName : "--";
        data.areaCovered = data.areaCovered
          ? data.areaCovered + "平方公里"
          : "--";
        data.capacity = data.capacity ? data.capacity : "--";
        data.address = data.address ? data.address : "--";

        this.info = JSON.parse(JSON.stringify(data));
      } else {
        this.$message.error(msg);
      }
    },

    async loadEnterprisePartrol(info) {
      const url = "/gov/org/enterprise/detail/" + info.id;
      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/enterprise/detail"

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

      if (code === 0) {
        // debugger

        this.info = JSON.parse(JSON.stringify(data));
      } else {
        this.$message.error(msg);
      }
    },
    async loadGroupRent(info) {
      const url = "/gov/org/ichouse/" + info.id;

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

      if (code === 0) {
        // debugger

        this.info = JSON.parse(JSON.stringify(data));
      } else {
        this.$message.error(msg);
      }
    },
    async loadPartyUnit(info) {
      const url = "/heart/icpartyunit/detail";
      // const url = 'http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/detail'
      let params = {
        id: info.id,
      };

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

      if (code === 0) {
        if (!data.serviceMatterList || !Array.isArray(data.serviceMatterList)) {
          data.serviceMatterList = [];
        } else {
          data.serviceMatterListShow = data.serviceMatterNameList.join(",");
        }

        this.info = JSON.parse(JSON.stringify(data));
      } else {
        this.$message.error(msg);
      }
    },

    async requestList() {
      const url = "/data/aggregator/coverage/analysis/resourceCategories";
      let params = {
        agencyId: this.orgId,
      };

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

      if (code === 0) {
        this.menuList = data.map((item) => {
          item.selected = false;
          item.folded = true;
          item.categories.forEach((subitem) => {
            subitem.selected = false;
          });
          item.placeTypesInAnalysis.forEach((subitem) => {
            subitem.selected = false;
            subitem.folded = true;
            subitem.categories.forEach((granditem) => {
              granditem.selected = false;
            });
          });
          return item;
        });
      } else {
        this.$message.error(msg);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/c/config";
@import "@/assets/scss/c/function";
@import "@/assets/scss/modules/visual/c/common";

.m-pop {
  @include scrollBar2;
  width: 380px;
  color: #333;
  font-size: 14px;
  line-height: 20px;
  max-height: 600px;
  overflow-y: auto;

  .info {
    .info-title {
      margin-bottom: 10px;
      font-size: 16px;
      font-weight: bold;
    }

    .item-pics {
      display: flex;
      margin: 20px 0;
      img {
        display: block;
        width: 32%;
        height: 90px;
        margin-right: 9px;
        object-fit: cover;
      }
    }
  }
  .item {
    @include toe;
  }

  .operate {
    display: flex;
  }

  .btn {
    margin-top: 20px;
    margin-right: 20px;
    width: 100px;
    line-height: 30px;
    border: 1px solid #eee;
    text-align: center;
  }
}
</style>