From 8ef6c262afb282773fb592e6d257a75c1bb0801d Mon Sep 17 00:00:00 2001
From: jiangyy <jiang478938504@126.com>
Date: Wed, 8 Dec 2021 17:50:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=98=E7=BA=BF=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../visual/communityGovern/processAnalyze.vue |  29 +-
 .../communityGovern/processLineOption.js      |  69 ++-
 .../communityGovern/processPieOption.js       |  57 +-
 .../visual/communityGovern/resibuzz.vue       |  12 -
 .../components/screen-map/basicInfoMain.vue   | 523 ++++++++++++++++++
 5 files changed, 648 insertions(+), 42 deletions(-)
 create mode 100644 src/views/modules/visual/components/screen-map/basicInfoMain.vue

diff --git a/src/views/modules/visual/communityGovern/processAnalyze.vue b/src/views/modules/visual/communityGovern/processAnalyze.vue
index 86b0d733..1517c453 100644
--- a/src/views/modules/visual/communityGovern/processAnalyze.vue
+++ b/src/views/modules/visual/communityGovern/processAnalyze.vue
@@ -95,6 +95,7 @@ export default {
       lineColorArray: [],
       lineData: [820, 932, 901, 934, 1290, 1330, 1320],
 
+      pieChartS: null,
       pieChart: '',
       pieOption: {},
       pieInitState: false,
@@ -227,8 +228,9 @@ export default {
       }
     },
 
-    pieInitOk () {
+    pieInitOk (dom) {
       console.log('pie准备好了')
+      this.pieChartS = dom
       this.pieInitState = true
 
     },
@@ -252,10 +254,11 @@ export default {
 
       const _that = this
       // this.$refs.pieChart.showLoading()
-      //  const url ="/gov/issue/issue/resibuzz-leftpiechart";
-      const url = "http://yapi.elinkservice.cn/mock/245/gov/issue/issue/resibuzz-leftpiechart";
+      //  const url ="/data/aggregator/project/projectmonthincr";
+      const url = "http://yapi.elinkservice.cn/mock/245/data/aggregator/project/projectmonthincr";
       let params = {
         agencyId: this.agencyId,
+        dateId: this.dateId,
       };
 
       const { data, code, msg } = await requestPost(url, params);
@@ -263,14 +266,28 @@ export default {
       if (code === 0) {
         // 获取pieChart配置
         this.lineOption = lineOption()
+        let xaxis = []
+        let totalIndexData = []
         if (data && data.length > 0) {
+          data.forEach(item => {
+            xaxis.push(item.type)
+            totalIndexData.push(item.value)
+          });
           // this.lineData = data
 
         } else {
-          this.lineData = [0]
+
         }
+        this.$refs.lineChart.setOption(this.lineOption, true)
+        this.$refs.lineChart.setOption({
+          xAxis: { data: xaxis },
+          series: [
+            { data: totalIndexData },
+
+          ]
+        }, true)
+
 
-        this.$refs.lineChart.setOption(this.lineOption)
       } else {
         this.$message.error(msg);
       }
@@ -295,7 +312,7 @@ export default {
       // this.$refs.pieChart.showLoading()
 
       // 获取pieChart配置
-      this.pieOption = pieOption()
+      this.pieOption = pieOption(this.pieChartS)
 
       this.pieData.forEach(item => {
         this.pieTotal = this.pieTotal + item.value
diff --git a/src/views/modules/visual/communityGovern/processLineOption.js b/src/views/modules/visual/communityGovern/processLineOption.js
index 0d094b5c..ef7dec01 100644
--- a/src/views/modules/visual/communityGovern/processLineOption.js
+++ b/src/views/modules/visual/communityGovern/processLineOption.js
@@ -1,21 +1,76 @@
-
+import * as echarts from 'echarts'
 export function lineOption () {
 
   return {
+   
     xAxis: {
       type: 'category',
-      boundaryGap: false,
-      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+      // boundaryGap: false,
+      axisLabel: {
+        color: '#8ec7dc',
+        fontSize: 16
+      },
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#0c4b59'
+        }
+      }
     },
     yAxis: {
-      type: 'value'
+      nameTextStyle: {
+        color: '#8ec7dc',
+        fontSize: 18
+      },
+      splitNumber: 4,
+      minInterval: 1,
+      show: true,
+      type: 'value',
+      axisLabel: {
+        color: '#8ec7dc',
+        fontSize: 18
+      },
+      axisTick: {
+        show: false
+      },
+      splitLine: {
+        lineStyle: {
+          color: ['#145968'],
+          type: 'dotted'
+        }
+      },
+      axisLine: {
+        show: true,
+        symbol: ['none', 'arrow'],
+        symbolOffset: [0, 15],
+        lineStyle: {
+          color: '#0c4b59'
+        }
+      }
     },
     series: [
       {
-        data: [820, 932, 901, 934, 1290, 1330, 1320],
+        name: '项目数',
         type: 'line',
-        areaStyle: {}
-      }
+        barWidth: 15,
+        areaStyle: {},
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(
+            0, 1, 0, 0,
+            [
+              { offset: 0, color: 'rgba(121, 55, 255, 0)' },
+              { offset: 1, color: '#6339FF' }
+            ]
+          )
+        }
+      },
+      // {
+      //   data: [820, 932, 901, 934, 1290, 1330, 1320],
+      //   type: 'line',
+      //   areaStyle: {}
+      // }
     ]
 
   }
diff --git a/src/views/modules/visual/communityGovern/processPieOption.js b/src/views/modules/visual/communityGovern/processPieOption.js
index a58528b7..0ab2bfd2 100644
--- a/src/views/modules/visual/communityGovern/processPieOption.js
+++ b/src/views/modules/visual/communityGovern/processPieOption.js
@@ -1,5 +1,5 @@
 
-export function pieOption () {
+export function pieOption (_charts) {
 const center= ['50%', '200px']
   return {
     title: {
@@ -85,33 +85,56 @@ const center= ['50%', '200px']
         left: 'center',
         width: 400,
         label: {
-           position: 'outer',
-          // alignTo: 'edge',
-          formatter: '{a|{c}}\n\n{name|{b}}',
-          // minMargin: 100,
-          // edgeDistance: 0,
-          // lineHeight: 20,
+          // show: false,
+          position: 'outside',
+          alignTo: 'edge',
+          // formatter: '{a|{c}}\n\n{name|{b}}',
+          formatter: '{a|{c}}\n{r|}\n{name|{b}}',
+          minMargin: 5,
+          edgeDistance: 1,
+          lineHeight: 15,
           color: '#fff',
           fontSize: 12,
-           distanceToLabelLine: -60,
+          // distanceToLabelLine: -60,
           rich: {
+            name: {
+              padding: [0, 6, 0, 6]
+            },
             a: {
-              fontSize: '30px',
-              color: ' #00F5FE',
-              
+              fontSize: 30,
+              color: '#fff',
+              padding: [0, 6, 6, 6]
             },
-            b: {
-              lineHeight: 0,
-              fontSize: '20px',
-              color: ' #FFFFFF'
-
+            r: {
+              backgroundColor: 'auto',
+              borderRadius: 6,
+              width: 6,
+              height: 6,
+              // padding: [3, 3, 0, -12]
             }
           }
         },
         labelLine: {
+          show: false,
           smooth: 0.2,
           length: 30,
-          length2: 90
+          length2: 0,
+          maxSurfaceAngle: 80
+        },
+        labelLayout: function (params) {
+          
+          const isLeft = params.labelRect.x < _charts.getWidth() / 2;
+          const points = params.labelLinePoints;
+          // Update the end point.
+          if (points) {
+            points[2][0] = isLeft
+            ? params.labelRect.x
+            : params.labelRect.x + params.labelRect.width;
+          }
+          
+          return {
+            labelLinePoints: points
+          };
         },
         itemStyle: {
            color:function(params) {
diff --git a/src/views/modules/visual/communityGovern/resibuzz.vue b/src/views/modules/visual/communityGovern/resibuzz.vue
index 9032eed2..8b7406b6 100644
--- a/src/views/modules/visual/communityGovern/resibuzz.vue
+++ b/src/views/modules/visual/communityGovern/resibuzz.vue
@@ -318,18 +318,6 @@ export default {
 
           };
           console.log('zhilma')
-          // element.labelLayout = (params) => {
-          //   const isLeft = params.labelRect.x < this.pieChartS.getWidth() / 2;
-          //   const points = params.labelLinePoints;
-          //   console.log('isLeft', isLeft, points)
-          //   // Update the end point.
-          //   points[2][0] = isLeft
-          //     ? params.labelRect.x
-          //     : params.labelRect.x + params.labelRect.width;
-          //   return {
-          //     labelLinePoints: points
-          //   };
-          // }
 
         } else {
           element.label = {
diff --git a/src/views/modules/visual/components/screen-map/basicInfoMain.vue b/src/views/modules/visual/components/screen-map/basicInfoMain.vue
new file mode 100644
index 00000000..6f48ebd4
--- /dev/null
+++ b/src/views/modules/visual/components/screen-map/basicInfoMain.vue
@@ -0,0 +1,523 @@
+<template>
+  <div style="position: relative">
+
+    <div class="div_map"
+         id="map"
+         ref="map">
+      <!-- <div id="map"
+             class="map"></div> -->
+    </div>
+
+  </div>
+
+</template>
+
+<script>
+import 'ol/ol.css'
+import { Map, View } from 'ol'
+import TileLayer from 'ol/layer/Tile.js';
+import XYZ from 'ol/source/XYZ.js';
+import VectorLayer from 'ol/layer/Vector.js';
+import VectorSource from 'ol/source/Vector.js';
+import GeoJSON from 'ol/format/GeoJSON.js';
+import Point from "ol/geom/Point.js";
+import Feature from "ol/Feature.js";
+import Overlay from 'ol/Overlay';
+import { defaults as defaultInteractions, Select, DoubleClickZoom } from 'ol/interaction.js';
+import { getCenter, boundingExtent } from 'ol/extent.js';
+import { Circle as CircleStyle, Icon, Fill, Stroke, Style, Text } from 'ol/style.js';
+
+import { mapGetters } from "vuex";
+import { Loading } from 'element-ui'; //引入Loading服务
+import { requestPost } from "@/js/dai/request";
+
+
+
+let loading;//加载动画
+
+let map;
+let mapView;
+let gaodeMapLayer;//背景地图图层
+let polygonLayer;//变电站标注图层
+let iconLayer; // icon标注图层
+let iconSource; // icon
+let polygonSource;//变电站标注多边形
+let select;//选中标注
+
+
+//url图标
+
+let iconUrlArray = [
+  'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png',
+  'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a775d15e62374350b80e5cdf1912a4eb.png',
+  'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/884efcf6d6b44224a7fda599dd1b14cb.png'
+];
+let textColorArray = [
+  'rgba(236, 69, 4, 0.66)',
+  'rgba(0, 146, 238, 0.75)',
+  'rgba(238, 151, 0, 0.8)'
+];
+let polygonColorArray = [
+  'rgba(210, 2, 2, 0.24)',
+  'rgba(43, 231, 253, 0.25)',
+  'rgba(183, 185, 0, 0.16)'
+];
+//变电站标注的文字样式
+var createTextStyle = function (feature) {
+  return new Text({
+    textAlign: undefined,
+    font: "18px Arial",
+    //fontFamily: "Courier New, monospace",
+    // fontWeight: "bold",
+    text: feature.values_.name,
+    backgroundFill: new Fill({
+      // color: 'rgba(0, 146, 238, 0.75)'
+      color: textColorArray[feature.values_.index - 1]
+    }),
+    padding: [4, 10, 4, 10],
+    //text: "变电站名称",
+    fill: new Fill({ color: "#ffffff" }),
+    // stroke: new Stroke({ color: "#ffffff", width: 3 }),
+    offsetY: -30,
+    offsetX: -50,
+    overflow: true,
+  });
+};
+
+//变电站标注样式
+
+var polygonStyleFunction = (function () {
+  return function (feature) {
+    return new Style({
+      fill: new Fill({
+        // color: [255, 255, 255, 0.3]
+        color: polygonColorArray[feature.values_.index - 1]
+      }),
+      stroke: new Stroke({
+        color: polygonColorArray[feature.values_.index - 1],
+        width: 3
+      }),
+
+      text: createTextStyle(feature)
+    });;
+  };
+})()
+
+const vueGis = {
+  name: 'HomeMap',
+  data () {
+    return {
+      centerPoint: [],//中心点位置
+      zoom: 14,//缩放范围：区14
+      minZoom: 1,//最小缩放
+
+      orgData: {},//当前组织对象
+      orgId: '',
+      orgLevel: '',
+
+      subAgencyArray: [],//下拉框数据
+      iconCoordinators: [],
+      currentCoordinate: null,
+      overlay: null,
+
+      //右侧搜索
+      searchName: "",
+
+      //右侧列表
+      listData: [],//得到的数据
+      listDatashow: [],//处理成一行两列的数据
+
+      //下钻层级记录
+      runNum: 0,
+      runAgencyArray: [],
+      selUserId: '',
+
+
+    }
+  },
+  async mounted () {
+    //加载组织数据
+    await this.loadOrgData()
+
+    //初始化地图
+    this.initMap()
+
+    //添加标注图层
+    this.addPolygonLayer()
+
+    //添加icontuceng
+    this.addIconLayer()
+
+    //加载当前园区的标注
+    this.loadPolygon(this.subAgencyArray)
+
+
+
+  },
+  methods: {
+
+    //刷新地图
+    async refreshMap (isRefreshView) {
+
+      //加载组织数据
+      await this.loadOrgData()
+
+      //加载当前园区的标注
+      await this.loadPolygon(this.subAgencyArray)
+
+      //重置地图中心点
+      if (isRefreshView) {
+        this.setMapLocation()
+        mapView.setCenter(this.centerPoint);
+        mapView.setZoom(this.zoom);
+      }
+
+
+    },
+
+
+    //加载组织数据
+    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)
+      }
+
+    },
+
+    //加载当前园区的标注
+    loadPolygon (subAgencyArray) {
+      polygonSource.clear()//清空多边形标注
+      iconSource.clear()//清空多边形标注
+
+      let featureData = []//标注数据
+      if (subAgencyArray && subAgencyArray.length > 0) {//判断是否存在下级标注
+        let oneData = {}
+
+        subAgencyArray.forEach(agencyItem => {
+
+          if (agencyItem.coordinates && agencyItem.coordinates !== '') {//如果有坐标
+            let urlNum = this.getRndBetween(1, 3)
+
+            oneData = {
+              type: 'Feature',
+              id: agencyItem.id,
+              properties: {
+                id: agencyItem.id,
+                level: agencyItem.level,
+                name: agencyItem.name,
+                index: urlNum//颜色随机的索引
+              },
+              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)
+
+        let iconFeatures = [];
+        feature.forEach(oneIcon => {
+
+          var extent = boundingExtent(oneIcon.getGeometry().getCoordinates()[0]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy]
+          // var center = getCenter(extent);   //获取边界区域的中心位置
+          //添加标注
+          let x = (parseFloat(extent[0]) + parseFloat(extent[2])) / 2
+          let y = (parseFloat(extent[1]) + parseFloat(extent[3])) / 2
+
+          let oneArray = [x, y]
+          this.iconCoordinators.push(oneArray)
+          // debugger
+          //视频监控样式
+          let oneCctv = new Feature({
+            geometry: new Point([x, y]),
+            id: oneIcon.id_,
+            properties: {
+              type: "icon",
+              id: oneIcon.id_
+            }
+          });
+
+          let iconStyle = new Style({
+            image: new Icon({
+              // anchor: [0.5, 0.5],
+              // imgSize: [32, 32],
+              scale: 0.5,
+              // src: "/img/largeScreen/icon_camra.png"
+              // src: "https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png"
+              src: iconUrlArray[oneIcon.values_.index - 1]
+            })
+          });
+
+          oneCctv.setStyle(iconStyle);
+          iconFeatures.push(oneCctv);
+
+        });
+
+        iconSource.addFeatures(iconFeatures);
+      }
+
+      // this.addGif()
+
+    },
+    //设置地图定位的中心点和缩放级别
+    setMapLocation () {
+      this.centerPoint = []
+
+      if (this.orgData.longitude && this.orgData.latitude) {
+        this.centerPoint.push(this.orgData.longitude)
+        this.centerPoint.push(this.orgData.latitude)
+      }
+
+      this.setZoom(this.orgData.agencyLevel)
+    },
+
+    //根据组织层级设置缩放级别
+    setZoom (agencyLevel) {
+      if (agencyLevel === 'district') {
+        this.zoom = 14
+      } else if (agencyLevel === 'street') {
+        this.zoom = 15
+      } else if (agencyLevel === 'community') {
+        this.zoom = 16
+      }
+
+    },
+
+    initMap () {
+      this.setMapLocation()
+
+      gaodeMapLayer = new TileLayer({
+        title: "地图",
+        source: new XYZ({
+          //指定url瓦片
+          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
+          wrapX: true//x方向平铺，也可以选择false
+        }),
+        zIndex: 20
+      });
+
+      mapView = new View({
+        //中心点坐标
+        center: this.centerPoint,
+        // projection: 'EPSG:3857',
+        projection: 'EPSG:4326',
+        zoom: this.zoom,
+        minZoom: this.minZoom
+      })
+
+      //初始化map和地图底图
+      //创建地图容器
+      map = new Map({
+        layers: [gaodeMapLayer],
+        //加载瓦片图层数据
+        view: mapView,
+        target: 'map'
+        //目标加载到map中
+      })
+
+      map.on('singleclick', function (e) {
+        // console.log(e.coordinate)
+        // console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326'));
+      })
+
+      //去除双击放大效果
+      const dblClickInteraction = map
+        .getInteractions()
+        .getArray()
+        .find(interaction => {
+          return interaction instanceof DoubleClickZoom;
+        });
+      map.removeInteraction(dblClickInteraction);
+
+    },
+
+    //添加变电站标注图层
+    addPolygonLayer () {
+      polygonSource = new VectorSource({
+        //features: (new GeoJSON()).readFeatures(geojsonObject)
+      });
+
+      polygonLayer = new VectorLayer({
+        source: polygonSource,
+        style: polygonStyleFunction,
+        zIndex: 50
+      });
+
+      //选中多边形后的样式
+      var overlayStyle = (function () {
+
+        return function (feature) {
+          var styles = {};
+          styles['Polygon'] = [
+            new Style({
+              stroke: new Stroke({
+                color: '#ec9000',
+                width: 2
+              })
+            }),
+
+            new Style({
+              fill: new Fill({
+                color: 'rgba(0, 0, 255, 0.1)'
+              })
+            }),
+            new Style({
+              text: createTextStyle(feature)
+            })
+          ];
+          styles['MultiPolygon'] = styles['Polygon'];
+          return styles[feature.getGeometry().getType()];
+        };
+      })();
+
+      select = new Select({
+        style: overlayStyle
+      });
+
+
+      map.addLayer(polygonLayer)
+      map.addInteraction(select);
+
+
+
+    },
+
+    addIconLayer () {
+      iconSource = new VectorSource({
+        //features: (new GeoJSON()).readFeatures(geojsonObject)
+      });
+
+      iconLayer = new VectorLayer({
+        source: iconSource,
+        zIndex: 70
+      });
+
+      map.addLayer(iconLayer);
+
+    },
+
+    //取随机数
+    getRndBetween (lowerLimit, upperLimit) {
+      return Math.floor(Math.random() * (upperLimit - lowerLimit + 1)) + lowerLimit;
+    },
+
+    //开启加载动画
+    startLoading () {
+      loading = Loading.service({
+        lock: true, //是否锁定
+        text: '正在加载……', //加载中需要显示的文字
+        background: 'rgba(0,0,0,.7)' //背景颜色
+      });
+
+    },
+
+    //结束加载动画
+    endLoading () {
+      //clearTimeout(timer);
+      if (loading) {
+        loading.close();
+      }
+    },
+  },
+  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) {
+    //   }
+    // },
+    ...mapGetters(["clientHeight"])
+
+  },
+  components: {},
+}
+export default vueGis;
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/basicInfoMain.scss"
+  scoped
+></style>
+
+<style lang="scss" >
+.div_content {
+  .ol-viewport {
+    border-radius: 5px;
+  }
+}
+.ol-overlaycontainer-stopevent {
+  display: none;
+}
+
+.el-scrollbar__wrap {
+  overflow-x: hidden !important;
+}
+</style>   
\ No newline at end of file