fdsfd

src/assets/scss/people.scss

@@ -0,0 +1,7 @@
+@import "c/config";
+@import "c/function";
+
+.m-people {
+    width: 400px;
+    // height: 400px;
+}

src/assets/scss/shuju-card.scss

@@ -0,0 +1,72 @@
+@import "c/config";
+@import "c/function";
+
+.m-card {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    padding: 11px;
+
+    .corner {
+        position: absolute;
+        display: block;
+        &.corner-1 {
+            top: 0;
+            left: 0;
+        }
+        &.corner-2 {
+            top: 0;
+            right: 0;
+        }
+        &.corner-3 {
+            bottom: 0;
+            right: 0;
+        }
+        &.corner-4 {
+            bottom: 0;
+            left: 0;
+        }
+    }
+
+    .line {
+        position: absolute;
+        display: block;
+        background-repeat: repeat;
+
+        &.line-t {
+            background-image: url(../img/shuju/card/line-t.png);
+            left: 11px;
+            right: 120px;
+            top: 0;
+            height: 11px;
+        }
+        &.line-r {
+            background-image: url(../img/shuju/card/line-r.png);
+            top: 11px;
+            bottom: 11px;
+            right: 0;
+            width: 11px;
+        }
+        &.line-b {
+            background-image: url(../img/shuju/card/line-b.png);
+            left: 11px;
+            right: 120px;
+            bottom: 0;
+            height: 11px;
+        }
+        &.line-l {
+            background-image: url(../img/shuju/card/line-l.png);
+            top: 11px;
+            bottom: 11px;
+            left: 0;
+            width: 11px;
+        }
+    }
+
+    .cnt {
+        height: 300px;
+        background-image: url(../img/shuju/card/bg.png);
+        background-repeat: repeat;
+    }
+}

src/router/index.js

@@ -97,6 +97,15 @@ export const moduleShujuRoutes = {
         isTab: true,
       },
     },
+    {
+      path: "/main-shuju/visual-basicinfo-people",
+      component: () => import("@/views/modules/visual/basicinfo/people"),
+      name: "visual-basicinfo-people",
+      meta: {
+        title: "个人详情",
+        isTab: true,
+      },
+    },
   ],
 };
 

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

@@ -0,0 +1,175 @@
+<template>
+  <div class="g-cpt">
+    <div class="g-l">
+      <div class="m-people">
+        <cpt-card>
+          哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
+        </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 {
+      centerPoint: [],//中心点位置
+      zoom: 14,//缩放范围：区14
+      minZoom: 1,//最小缩放
+
+      orgData: {},//当前组织对象
+      orgId: '',
+      orgLevel: '',
+
+      subAgencyArray: [],//下拉框数据
+
+      selPolygonId: '',//选择的多边形id
+      selPolygon: {},
+
+      //右侧列表
+      name: "",
+
+      //下钻层级记录
+      runNum: 0,
+      runAgency: [],
+
+    }
+  },
+
+    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>
+ 

src/views/modules/visual/cpts/card.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="m-card">
+    <div class="wrap">
+      <img src="@/assets/img/shuju/card/l-t.png" class="corner corner-1" />
+      <img src="@/assets/img/shuju/card/r-t.png" class="corner corner-2" />
+      <img src="@/assets/img/shuju/card/r-b.png" class="corner corner-3" />
+      <img src="@/assets/img/shuju/card/l-b.png" class="corner corner-4" />
+      <div class="line line-t"></div>
+      <div class="line line-l"></div>
+      <div class="line line-r"></div>
+      <div class="line line-b"></div>
+      <div class="cnt">
+        <solt></solt>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "shuju-card",
+  data() {
+    return {
+
+    };
+  },
+  props: {
+  },
+
+  methods: {
+
+  },
+};
+</script>
+
+<style lang="scss" src="@/assets/scss/shuju-card.scss" scoped></style>