ShibeiWorkPlatform_Frontend/src/views/modules/visual/basicinfo/people.vue

<template>
  <div class="g-cpt">
    <div class="g-l">
      <div class="m-people">
        <cpt-card>
          <div class="title">
            <img src="@/assets/img/shuju/title-tip.png" />
            <span>人员情况</span>
          </div>
          <div class="more" @click="showedMoreInfo=true">查看更多</div>
          <div class="ren">
            <img class="pic-ren" src="@/assets/img/shuju/people/ren.png" />
            <div class="ren-prop z-1">
              <img src="@/assets/img/shuju/people/ren-prop-1.png" />
              <span>所属网格</span>

              <div class="ren-cnt">
                <h5>所属网格：</h5>
                <p>惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺</p>
              </div>
            </div>

            <div class="ren-prop z-2">
              <img src="@/assets/img/shuju/people/ren-prop-2.png" />
              <span>人员类别</span>

              <div class="ren-cnt">
                <h5>人员类别：</h5>
                <p>惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺</p>
              </div>
            </div>

            <div class="ren-prop z-3">
              <img src="@/assets/img/shuju/people/ren-prop-3.png" />
              <span>工作单位</span>

              <div class="ren-cnt">
                <h5>工作单位：</h5>
                <p>惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺</p>
              </div>
            </div>

            <div class="ren-prop z-4">
              <img src="@/assets/img/shuju/people/ren-prop-4.png" />
              <span>志愿者类别</span>

              <div class="ren-cnt">
                <h5>志愿者类别：</h5>
                <p>惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺</p>
              </div>
            </div>

            <div class="ren-prop z-5">
              <img src="@/assets/img/shuju/people/ren-prop-5.png" />
              <span>房屋信息</span>

              <div class="ren-cnt">
                <h5>房屋信息：</h5>
                <p>惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺</p>
              </div>
            </div>

            <div class="ren-prop z-6">
              <img src="@/assets/img/shuju/people/ren-prop-6.png" />
              <span>经济状况</span>

              <div class="ren-cnt">
                <h5>经济状况：</h5>
                <p>惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺</p>
              </div>
            </div>
          </div>
        </cpt-card>
      </div>

      <div class="m-pop" v-if="showedMoreInfo">
        <div class="wrap">
          <cpt-card>
            <div class="title">
              <img src="@/assets/img/shuju/title-tip.png" />
              <span>更多信息</span>
            </div>

            <div class="btn-close" @click="showedMoreInfo=false">
              <img src="@/assets/img/shuju/people/close.png" />
            </div>

            <div class="list">
              <div class="item">所属网格：商区社区第一网格</div>
              <div class="item">所属网格：商区社区第一网格</div>
              <div class="item">所属网格：商区社区第一网格</div>
              <div class="item">所属网格：商区社区第一网格</div>
              <div class="item">所属网格：商区社区第一网格</div>
            </div>

            <div class="line"></div>

            <div class="list">
              <div class="item">所属网格：商区社区第一网格</div>
              <div class="item">所属网格：商区社区第一网格</div>
              <div class="item">所属网格：商区社区第一网格</div>
              <div class="item">所属网格：商区社区第一网格</div>
              <div class="item">所属网格：商区社区第一网格</div>
            </div>

            <div class="line"></div>

            <div class="list">
              <div class="item">所属网格：商区社区第一网格</div>
              <div class="item">所属网格：商区社区第一网格</div>
              <div class="item">所属网格：商区社区第一网格</div>
              <div class="item">所属网格：商区社区第一网格</div>
              <div class="item">所属网格：商区社区第一网格</div>
            </div>

            <div class="line"></div>

            <div class="list">
              <div class="item">所属网格：商区社区第一网格</div>
              <div class="item">所属网格：商区社区第一网格</div>
              <div class="item">所属网格：商区社区第一网格</div>
              <div class="item">所属网格：商区社区第一网格</div>
              <div class="item">所属网格：商区社区第一网格</div>
            </div>
          </cpt-card>
        </div>
      </div>

      <div class="m-relation">
        <cpt-card>
          <div class="title">
            <img src="@/assets/img/shuju/title-tip.png" />
            <span>家庭关系</span>
          </div>
          <div class="info">
            <div class="huzhu">
              <img class="huzhu-bg" src="@/assets/img/shuju/people/huzhu.png" />
              <img class="huzhu-ico" src="@/assets/img/shuju/people/huzhu-home.png" />
              <div class="huzhu-name">爱新觉罗玄烨</div>
              <p>（户主）</p>
            </div>
            <div class="rel z-zuo-2">
              <img class="rel-bg" src="@/assets/img/shuju/people/huzhu-kuang-zuo.png" />
              <img class="rel-line" src="@/assets/img/shuju/people/huzhu-line/zuo2.png" />
              <div class="rel-text">
                <span class="rel-call">妻子</span>
                <span class="rel-name">（西门吹雪）</span>
              </div>
            </div>
            <div class="rel z-you-2">
              <img class="rel-bg" src="@/assets/img/shuju/people/huzhu-kuang-you.png" />
              <img class="rel-line" src="@/assets/img/shuju/people/huzhu-line/you2.png" />
              <div class="rel-text">
                <span class="rel-call">妻子</span>
                <span class="rel-name">（西门吹雪）</span>
              </div>
            </div>

            <div class="rel z-zuo-1">
              <img class="rel-bg" src="@/assets/img/shuju/people/huzhu-kuang-zuo.png" />
              <img class="rel-line" src="@/assets/img/shuju/people/huzhu-line/zuo1.png" />
              <div class="rel-text">
                <span class="rel-call">妻子</span>
                <span class="rel-name">（西门吹雪）</span>
              </div>
            </div>

            <div class="rel z-you-1">
              <img class="rel-bg" src="@/assets/img/shuju/people/huzhu-kuang-you.png" />
              <img class="rel-line" src="@/assets/img/shuju/people/huzhu-line/you1.png" />
              <div class="rel-text">
                <span class="rel-call">妻子</span>
                <span class="rel-name">（西门吹雪）</span>
              </div>
            </div>

            <div class="rel z-zuo-3">
              <img class="rel-bg" src="@/assets/img/shuju/people/huzhu-kuang-zuo.png" />
              <img class="rel-line" src="@/assets/img/shuju/people/huzhu-line/zuo3.png" />
              <div class="rel-text">
                <span class="rel-call">妻子</span>
                <span class="rel-name">（西门吹雪）</span>
              </div>
            </div>

            <div class="rel z-you-3">
              <img class="rel-bg" src="@/assets/img/shuju/people/huzhu-kuang-you.png" />
              <img class="rel-line" src="@/assets/img/shuju/people/huzhu-line/you3.png" />
              <div class="rel-text">
                <span class="rel-call">妻子</span>
                <span class="rel-name">（西门吹雪）</span>
              </div>
            </div>
          </div>
        </cpt-card>
      </div>
    </div>
    <div class="g-r"></div>
  </div>
</template>

<script>
import { Loading } from 'element-ui'; //引入Loading服务
import { requestPost } from "@/js/dai/request";
import cptCard from "@/views/modules/visual/cpts/card";

export default {
  name: 'HomeMap',
  data () {
    return {
      showedMoreInfo: false
    }
  },

    props: {

    vueFlag: {
      type: String,
      default: "alarm"
    }
  },
  computed: {

    mapHeight () {

      return this.clientHeight - 120;

    },
    // zoom: {
    //   get () {
    //     //根据不同屏幕分辨率，控制zoom大小
    //     if (this.clientHeight < 900) {
    //       return 2.3
    //     } else {
    //       return 2.8
    //     }
    //   },
    //   set (value) {
    //   }
    // },

  },
  components: {
    cptCard
  },
  async mounted () {
    

  },
  methods: {
    handleSearch () {

    },

    //加载组织数据
    async loadOrgData () {
      const url = "/gov/org/agency/maporg"
      // const url = "http://yapi.elinkservice.cn/mock/245/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.runAgency.push(data)

        if (data.children && data.children.length > 0) {
          this.subAgencyArray = data.children

        }

      } else {
        this.$message.error(msg)
      }

    },

    //加载当前园区的标注
    loadPolygon (subAgencyArray) {
      polygonSource.clear()//清空变电站标注

      let featureData = []//标注数据
      if (subAgencyArray && subAgencyArray.length > 0) {//判断是否存在下级标注
        let oneData = {}

        subAgencyArray.forEach(agencyItem => {

          if (agencyItem.coordinates && agencyItem.coordinates !== '') {//如果有坐标
            oneData = {
              type: 'Feature',
              id: agencyItem.id,
              properties: {
                id: agencyItem.id,
                level: agencyItem.level,
                name: agencyItem.name
              },
              geometry: {
                type: 'Polygon',
                coordinates: [],
              },
            }
            let coorArray = agencyItem.coordinates.split(',')//坐标数组

            let itemArray = []//单个点位的[lon,lat]，数组
            let polygonArray = []//整个多边形的[[lon,lat],[lon,lat],[lon,lat]]数组

            coorArray.forEach((item, index) => {
              itemArray.push(item)
              if (index % 2 == 0) {//偶

              } else {//奇
                polygonArray.push(itemArray)
                itemArray = []
              }

            });
            oneData.geometry.coordinates.push(polygonArray)
            featureData.push(oneData)
          }

        });

      }

      if (featureData && featureData.length > 0) {
        var geojsonObject = {
          'type': 'FeatureCollection',
          'features': featureData
        };
        let feature = (new GeoJSON()).readFeatures(geojsonObject)
        polygonSource.addFeatures(feature)

      }

    },
  }
};
</script>

<style lang="scss" src="@/assets/scss/people.scss" scoped></style>