Merge branch 'dev-shuju' of http://git.elinkit.com.cn:7070/r/epmet-oper-gov into dev-shuju

src/assets/scss/modules/visual/processAnalyze.scss

@@ -122,6 +122,7 @@
   }
   .echart-line {
     margin-top: 10px;
+    height: 100%;
   }
 }
 .g-count {
@@ -244,7 +245,7 @@
   text-align: center;
   position: relative;
   width: 500px;
-  // height: 100%;
+  height: 100%;
   box-sizing: border-box;
 }
 

src/views/modules/visual/communityGovern/cpt/project-info.vue

@@ -581,7 +581,7 @@ export default {
       const { data, code, msg } = await requestPost(url, {
         categoryCodeList: this.categoryCodes,
         userId: this.userId,
-
+        projectId: this.projectIdCopy
       });
 
       if (code === 0) {

src/views/modules/visual/communityGovern/processAnalyze.vue

@@ -249,6 +249,8 @@ export default {
       await this.getLineChart()
       await this.loadProjectlist()
 
+      this.assignData()
+
     },
 
     assignData () {
@@ -485,6 +487,7 @@ export default {
     },
 
     assignLineChart () {
+
       this.lineOption = lineOption()
       this.$refs.lineChart.setOption(this.lineOption, true)
       this.$refs.lineChart.setOption({

src/views/modules/visual/components/screen-echarts-frame/index.vue

@@ -1,10 +1,9 @@
 <template>
   <div>
-    <div v-show="!noData"
+    <div class="screenEchartsFrame"
-         class="screenEchartsFrame"
          ref="screenEchartsFrame"></div>
-    <screen-nodata v-if="noData"
+    <!-- <screen-nodata v-if="noData"
-                   class="nodata"></screen-nodata>
+                   class="nodata"></screen-nodata> -->
   </div>
 </template>
 

src/views/modules/visual/components/screen-map/index.vue

@@ -3,8 +3,15 @@
     <div class="div_map"
          id="map"
          ref="map">
-      <!-- <div id="map"
+    </div>
-             class="map"></div> -->
+    <div id="popup"
+         style="display: none;"
+         class="ol-popup">
+      <a href="#"
+         id="popup-closer"
+         class="ol-popup-closer"></a>
+      <div id="popup-content"
+           class="popup-content"></div>
     </div>
   </div>
 </template>
@@ -28,6 +35,7 @@ import { getDistance } from 'ol/sphere';
 
 import { mapGetters } from "vuex";
 import { Loading } from 'element-ui'; //引入Loading服务
+
 import { requestPost } from "@/js/dai/request";
 
 
@@ -81,7 +89,8 @@ const vueGis = {
       centerPoint: [],//中心点位置
       zoom: 14,//缩放范围：区14
       minZoom: 1,//最小缩放
-
+      overlay: null,
+      showPopup: false,
       mapInfo: {
 
       },
@@ -172,6 +181,13 @@ const vueGis = {
         this.loadIcon()
       }
 
+      if (this.isAddOpenlay) {
+        //初始化icon图层
+        this.addOverlay()
+      }
+
+
+      this.addMapClick()
 
     },
 
@@ -365,8 +381,6 @@ const vueGis = {
       return (distance < max || distance === max)
 
 
-
-
       // debugger
       //   return 
       // var wgs84Sphere = new ol.Sphere(6378137); 
@@ -405,21 +419,8 @@ const vueGis = {
         //目标加载到map中
       })
 
-      let that = this
-      map.on('singleclick', function (e) {
-        const feature = map.forEachFeatureAtPixel(e.pixel, function (feature) {
-          return feature;
-        });
-        if (feature) {
-          console.log(feature)
-          that.$emit('clickFeature', feature)
-
-        }
 
 
-
-      })
-
       //去除双击放大效果
       const dblClickInteraction = map
         .getInteractions()
@@ -454,7 +455,6 @@ const vueGis = {
 
     },
 
-
     //初始化多边形标注图层
     initPolygonLayer () {
       polygonSource = new VectorSource({
@@ -542,6 +542,83 @@ const vueGis = {
       // });
     },
 
+    //添加覆盖层
+    addOverlay () {
+      // 使用变量存储弹窗所需的 DOM 对象
+      var container = document.getElementById("popup");
+      var closer = document.getElementById("popup-closer");
+      var content = document.getElementById("popup-content");
+
+      // 创建一个弹窗 Overlay 对象
+      this.overlay = new Overlay({
+        element: container, //绑定 Overlay 对象和 DOM 对象的
+        autoPan: true, // 定义弹出窗口在边缘点击时候可能不完整 设置自动平移效果
+        autoPanAnimation: {
+          duration: 250 //自动平移效果的动画时间 9毫秒
+        },
+        zIndex: 100
+      });
+      // 将弹窗添加到 map 地图中
+      map.addOverlay(this.overlay);
+      let _that = this;
+
+      /**
+       * 为弹窗添加一个响应关闭的函数
+       */
+      closer.onclick = function () {
+        _that.overlay.setPosition(undefined);
+        closer.blur();
+        return false;
+      };
+    },
+
+    //注册地图点击事件
+    addMapClick () {
+      let _that = this
+
+
+      map.on("click", function (evt) {
+        const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
+          return feature;
+        });
+        if (feature) {
+          console.log(feature)
+          if (_that.clickType === 'back') {
+
+            _that.$emit('clickFeature', feature)
+
+
+          } else if (_that.clickType === 'popup') {
+            _that.$emit('clickFeature', feature)
+            // _that.overlay.getElement().parentNode.style.display = 'block'
+            // _that.overlay.getElement().parentNode.parentNode.style.display = 'block'
+
+            // content.innerHTML = `
+            //     <p>你点击了这里：</p>
+            //     <p>经纬度：<p><code> </code> <p>
+            //     <p>坐标：</p>X：&nbsp;&nbsp; Y: `;
+            // _that.overlay.setPosition(evt.coordinate); //把 overlay 显示到指定的 x,y坐标
+
+
+          } else {
+            console.log('此处没有标注')
+          }
+
+        }
+
+      });
+    },
+
+    handleShowPopup (showData, coordinate) {
+      console.log(this.overlay.getElement())
+      this.overlay.getElement().style.display = 'block'
+      this.overlay.getElement().parentNode.style.display = 'block'
+      this.overlay.getElement().parentNode.parentNode.style.display = 'block'
+      var content = document.getElementById("popup-content");
+
+      content.innerHTML = showData;
+      this.overlay.setPosition(coordinate); //把 overlay 显示到指定的 x,y坐标
+    },
 
     //取随机数
     getRndBetween (lowerLimit, upperLimit) {
@@ -582,6 +659,17 @@ const vueGis = {
     showIconLayer: {
       type: Boolean,
       default: false
+    },
+    //是否添加弹出框图层
+    isAddOpenlay: {
+      type: Boolean,
+      default: false
+    },
+
+    //点击地图事件类型,back:返回，popup:弹出层
+    clickType: {
+      type: String,
+      default: 'back'
     }
 
   },
@@ -623,4 +711,51 @@ export default vueGis;
 .ol-overlaycontainer-stopevent {
   display: none;
 }
+.ol-popup {
+  position: absolute;
+  background-color: #1257c9;
+  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
+  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
+  padding: 15px;
+  border-radius: 10px;
+  border: 1px solid #1257c9;
+  bottom: 12px;
+  left: -50px;
+  text-align: left;
+}
+.ol-popup:after,
+.ol-popup:before {
+  top: 100%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+.ol-popup:after {
+  border-top-color: 1257c9;
+  border-width: 10px;
+  left: 48px;
+  margin-left: -10px;
+}
+.ol-popup:before {
+  border-top-color: #1257c9;
+  border-width: 11px;
+  left: 48px;
+  margin-left: -11px;
+}
+.ol-popup-closer {
+  text-decoration: none;
+  position: absolute;
+  top: 2px;
+  right: 8px;
+}
+.popup-content {
+  width: 300px;
+}
+.ol-popup-closer:after {
+  content: "✖";
+  color: rgba(1, 17, 104, 1);
+}
 </style>   

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

@@ -297,6 +297,7 @@ export default {
 
 <style lang="scss" scoped>
 .analyse-container {
+  color: #fff;
   .analyse-wr {
     display: flex;
     align-items: center;
@@ -552,6 +553,7 @@ export default {
   justify-content: center;
   align-items: center;
   height: 100%;
+  color: #fff;
   text-align: center;
   line-height: 100%;
 }

src/views/modules/visual/measure/service.vue

@@ -514,6 +514,7 @@ export default {
         this.categoryCode = code
         const _arr = this.selectAgency[this.selectAgency.length - 1].split('-')
         const orgType = _arr[1] !== 'grid' ? 'agency': 'grid'
+        this.pageNo = 1
         this.getServiceList(_arr[0], orgType, code)
       }
     },
@@ -536,11 +537,15 @@ export default {
     pageSizeChangeHandleNew(val) {
       this.pageNo = 1;
       this.pageSize = val;
-      this.handleCascader(this.selectAgency)
+      const _arr = this.selectAgency[this.selectAgency.length - 1].split('-')
+      const orgType = _arr[1] !== 'grid' ? 'agency': 'grid'
+      this.getServiceList(_arr[0], orgType, this.categoryCode)
     },
     pageCurrentChangeHandleNew(val) {
       this.pageNo = val;
-      this.handleCascader(this.selectAgency)
+      const _arr = this.selectAgency[this.selectAgency.length - 1].split('-')
+      const orgType = _arr[1] !== 'grid' ? 'agency': 'grid'
+      this.getServiceList(_arr[0], orgType, this.categoryCode)
     },
   },
 };

src/views/modules/visual/measure/volunteer.vue

@@ -74,8 +74,10 @@
       <div class="card-map">
         <screen-map class="map"
                     ref="map"
-                    @clickFeature="clickProject"
+                    @clickFeature="clickMapVolunteer"
-                    :showIconLayer="true"></screen-map>
+                    :showIconLayer="true"
+                    :clickType="'popup'"
+                    :isAddOpenlay="true"></screen-map>
       </div>
       <div class="map-tips">
 
@@ -319,8 +321,8 @@ export default {
             color: 'rgba(250, 193, 38, 1)'
           }
         }]
-        this.vPersonal = [ ...arr ]
+        this.vPersonal = [...arr]
-        this.vCount = [ ...arr1 ]
+        this.vCount = [...arr1]
         this.vpTotal = data.volunteerTotal
         this.vcTotal = data.serviceTotal
         this.initCharts(data.volunteerTotal, arr)
@@ -438,8 +440,88 @@ export default {
     },
 
     //点击项目
-    clickProject (feature) {
+    async clickMapVolunteer (feature) {
       console.log('标注信息', feature.values_.properties)
+      if (!feature.values_.properties.info.icResiUserId) {
+        return false
+      }
+      const info = feature.values_.properties.info
+      const url = "/epmetuser/icresiuser/resi-brief/" + info.icResiUserId
+      // const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/distribution"
+
+      let params = {}
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        let coordinate = [info.longitude, info.latitude]
+        data.gridName = data.gridName ? data.gridName : '--'
+        data.villageName = data.villageName ? data.villageName : '--'
+        data.icUserName = data.icUserName ? data.icUserName : '--'
+        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' ? '女' : '男' : '--'
+        let categoriesArray = []
+
+        for (let key in data.volunteerCategories) {
+          categoriesArray.push(data.volunteerCategories[key])
+
+        }
+
+
+        if (categoriesArray.length > 0) {
+          data.categories = categoriesArray.join(',')
+        } else {
+          data.categories = '--'
+        }
+
+        let showData = `
+                <div style='font-size:16px; color:#FFFFFF;'>居民信息</div>
+                <div style='font-size:12px; color:#FFFFFF;margin-top:10px'>所属网格：
+                  <span>`+ data.gridName + `</span>
+                </div>
+                <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>所属小区：
+                  <span>`+ data.villageName + `</span>
+                </div>
+                <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>本地户籍：
+                  <span>`+ data.isBdhjShow + `</span>
+                </div>
+                <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>姓名：
+                  <span>`+ data.icUserName + `</span>
+                </div> 
+                <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>手机：
+                  <span>`+ data.mobile + `</span>
+                </div> 
+                <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>性别：
+                  <span>`+ data.genderShow + `</span>
+                </div> 
+                <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>身份证号：
+                  <span>`+ data.idCard + `</span>
+                </div> 
+                <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>出生日期：
+                  <span>`+ data.birthday + `</span>
+                </div> 
+                <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>联系人：
+                  <span>`+ data.contacts + `</span>
+                </div> 
+                <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>联系人手机：
+                  <span>`+ data.contactsMobile + `</span>
+                </div> 
+                <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>志愿者类别：
+                  <span>`+ data.categories + `</span>
+                </div> 
+                `
+        // console.log(showData)
+        this.$refs.map.handleShowPopup(showData, coordinate)
+
+      } else {
+        this.$message.error(msg)
+      }
     },
   },
 };
@@ -566,12 +648,15 @@ export default {
 }
 
 .map-tips {
-  width: 700px;
+  width: 100%;
   display: flex;
-  // justify-content: start;
+  // justify-content: center;
+  align-items: center;
   flex-wrap: wrap;
-  padding-top: 10px;
+  box-sizing: border-box;
-  padding-bottom: 20px;
+  padding: 6px 0 0 100px;
+  // padding-top: 10px;
+  // padding-bottom: 10px;
 
   .map-tips-item {
     display: flex;
@@ -596,7 +681,7 @@ export default {
 }
 
 .card-wr-map {
-  height: calc(100vh - 150px);
+  // height: calc(100vh - 120px);
   text-align: center;
 
   .card-map {