代码提交

src/api/szyf.js

@@ -1,6 +1,6 @@
 import request from 'utils/request'
 
-// 科技人才列表
+// 事件处理实况
 export function getEventRate (params) {
   return request({
     url: '/api/gov/project/icEvent/yifengScreen/getEventRate',
@@ -8,3 +8,21 @@ export function getEventRate (params) {
     params
   })
 }
+
+// 事件处理实况
+export function getEventAnalysis (params) {
+  return request({
+    url: '/api/gov/project/icEvent/yifengScreen/getEventAnalysis',
+    method: 'GET',
+    params
+  })
+}
+
+// 事件处理实况
+export function statsByCategory (params) {
+  return request({
+    url: 'api/epmetuser/lingShan/helpCrowd/screen/yifengScreen/statsByCategory',
+    method: 'GET',
+    params
+  })
+}

src/views/next/dialog-module/szyf-left/eventProcessing.vue

@@ -49,6 +49,7 @@
 
 <script>
 import { mapGetters, mapActions } from 'vuex'
+import { getEventRate } from '@/api/szyf'
 export default {
   name: '',
   data () {
@@ -131,7 +132,11 @@ export default {
   },
   components: {},
   watch: {},
-  created () {},
+  created () {
+    getEventRate().then(res => {
+      console.log('getEventRate::', res)
+    })
+  },
   methods: {
     ...mapActions({
       showGlobalDialog: 'showGlobalDialog'

src/views/next/screen-content-map/cpt/szyf-map.vue

@@ -1,101 +1,98 @@
 <template>
-    <div style="width: 100% ;height: 100%;">
+  <div style="width: 100%; height: 100%">
-        <div id="myMap">
+    <div id="myMap">
-            <!-- <screen-map-header :data="headerList"></screen-map-header> -->
+      <!-- <screen-map-header :data="headerList"></screen-map-header> -->
-        </div>
+    </div>
-        <div class="mapImage">
+    <div class="mapImage">
-            <div>事件处置流程图</div>
+      <div>事件处置流程图</div>
 
-            <img src="@/assets/images/map/flow.png" alt="">
+      <img src="@/assets/images/map/flow.png" alt="" />
-        </div>
     </div>
+  </div>
 </template>
 <script>
-
+import { Scene, PolygonLayer } from "@antv/l7";
-import { Scene, PolygonLayer } from '@antv/l7'
+import { GaodeMap } from "@antv/l7-maps";
-import { GaodeMap } from '@antv/l7-maps'
+import yifengJson from "./yifeng.json";
-import yifengJson from './yifeng.json'
+import jdbandaoJson from "./jdbandao.json";
-import jdbandaoJson from './jdbandao.json'
+import chinaMap from "./chinaMap.vue";
-import chinaMap from './chinaMap.vue'
+import { mapActions } from "vuex";
-import { mapActions } from 'vuex'
+let myMap;
-let myMap
+let scene;
-let scene
+let polygonLayer;
-let polygonLayer
 export default {
-  data () {
+  data() {
     return {
       darkStyle: {
-        style: 'amap://styles/blue',
+        style: "amap://styles/blue",
         polygonColor: [
           // "rgba(255, 100, 60, 0.5)",
           // "rgba(43, 231, 253, 0.35)",
-          'rgba(0, 127, 241, .5)'
+          "rgba(0, 127, 241, .5)",
           // "rgba(255, 255, 50, 0.35)",
         ],
         lineColor: [
           // "rgba(255, 180, 150, 0.9)",
           // "rgba(43, 231, 253, 0.7)",
-          'rgba(0, 127, 241, .6)'
+          "rgba(0, 127, 241, .6)",
           // "rgba(255, 255, 50, 0.7)",
         ],
         circleColor: [
           // "rgba(255, 180, 150, 0.99)",
           // "rgba(43, 231, 253, 0.99)",
-          'rgba(0, 127, 241, 0.99)'
+          "rgba(0, 127, 241, 0.99)",
           // "rgba(255, 255, 50, 0.99)",
         ],
         textColor: [
           // "rgba(255, 100, 60, 0.99)",
           // "rgba(43, 231, 253, 0.99)",
-          'rgba(126, 187, 255, 1)'
+          "rgba(126, 187, 255, 1)",
           // "rgba(255, 255, 50, 0.99)",
         ],
-        textStrokeColor: '#fff'
+        textStrokeColor: "#fff",
       },
       lightStyle: {
-        style: 'amap://styles/blue',
+        style: "amap://styles/blue",
         polygonColor: [
           // "rgba(255, 100, 60, 0.3)",
-          'rgba(43, 231, 253, 0.3)'
+          "rgba(43, 231, 253, 0.3)",
           // "rgba(255, 255, 50, 0.3)",
         ],
         lineColor: [
           // "rgba(220, 150, 120, 0.9)",
-          'rgba(155, 212, 242, 1)'
+          "rgba(155, 212, 242, 1)",
           // "rgba(200, 200, 50, 0.9)",
         ],
         circleColor: [
           // "rgba(255, 180, 150, 0.99)",
-          'rgba(13, 181, 203, 0.8)'
+          "rgba(13, 181, 203, 0.8)",
           // "rgba(255, 255, 50, 0.99)",
         ],
         textColor: [
           // "rgba(200, 50, 10, 0.99)",
-          'rgba(0, 130, 153, 0.99)'
+          "rgba(0, 130, 153, 0.99)",
           // "rgba(120, 120, 0, 0.99)",
         ],
-        textStrokeColor: '#666'
+        textStrokeColor: "#666",
-      }
+      },
-
+    };
-    }
-  },
-  created () {
   },
-  mounted () {
+  created() {},
+  mounted() {
     this.$nextTick(() => {
-      this.init()
+      this.init();
-    })
+    });
   },
   methods: {
-    init () {
+    init() {
-      if (!yifengJson) return false
+      if (!yifengJson) return false;
       myMap = new GaodeMap({
         pitch: 40.24716321414439,
         // mapStyle: 'amap://styles/3bd5ec68d60de6542634c3e701f64523',
         style: this.darkStyle.style,
         showLabel: false,
         center: [120.220563, 36.496127],
-        token: 'fc14b42e0ca18387866d68ebd4f150c1',
+        token: "fc14b42e0ca18387866d68ebd4f150c1",
         zoom: 10,
         isHotspot: false,
         showIndoorMap: false,
@@ -103,29 +100,28 @@ export default {
         resizeEnable: true,
         doubleClickZoom: false,
         showRoad: false,
-        viewMode: '3D'
+        viewMode: "3D",
-
+      });
-      })
 
       scene = new Scene({
-        id: 'myMap',
+        id: "myMap",
         logoVisible: false,
-        map: myMap
+        map: myMap,
-      })
+      });
 
-      const data = yifengJson
+      const data = yifengJson;
-      const data1 = jdbandaoJson
+      const data1 = jdbandaoJson;
       // 画区域面积
       if (polygonLayer) {
-        scene.removeLayer(polygonLayer)
+        scene.removeLayer(polygonLayer);
       }
       polygonLayer = new PolygonLayer({
-        autoFit: true
+        autoFit: true,
       })
         .size(1000)
         .source(data1)
-        .color('name', ['rgba(0, 127, 241, .5)'])
+        .color("name", ["rgba(0, 127, 241, .5)"])
-        .shape('fill')
+        .shape("fill")
         .style({
           // opacityLinear: {
           //   enable: true, // true - false
@@ -133,18 +129,18 @@ export default {
           // },
           opacity: 0.6,
           // heightfixed: true,
-          sourceColor: '#4ee8fc',
+          sourceColor: "#4ee8fc",
-          targetColor: '#00284e'
+          targetColor: "#00284e",
-        })
+        });
-      scene.addLayer(polygonLayer)
+      scene.addLayer(polygonLayer);
       // 画区域面积
       polygonLayer = new PolygonLayer({
-        autoFit: true
+        autoFit: true,
       })
         .size(1000)
         .source(data)
-        .color('name', ['rgba(0, 127, 241, .0)'])
+        .color("name", ["rgba(0, 127, 241, .0)"])
-        .shape('fill')
+        .shape("fill")
         .style({
           // opacityLinear: {
           //   enable: true, // true - false
@@ -152,59 +148,59 @@ export default {
           // },
           opacity: 0,
           // heightfixed: true,
-          sourceColor: '#4ee8fc',
+          sourceColor: "#4ee8fc",
-          targetColor: '#00284e'
+          targetColor: "#00284e",
-        })
+        });
-      scene.addLayer(polygonLayer)
+      scene.addLayer(polygonLayer);
-      scene.on('loaded', () => {
+      scene.on("loaded", () => {});
-      })
+    },
-    }
   },
   components: { chinaMap },
   computed: {},
-  watch: {}
+  watch: {},
-}
+};
 </script>
 
 <style lang="scss" scoped>
 #myMap {
-    width: 100%;
+  width: 100%;
-    height: 100%;
+  height: 100%;
 }
 
 .mapImage {
-    @include flex(column);
+  @include flex(column);
-    align-items: center;
+  align-items: center;
-    width: 879px;
+  width: 879px;
-    height: 647px;
+  height: 647px;
-    position: absolute;
+  position: absolute;
-    top: 50%;
+  top: 50%;
-    left: 50%;
+  left: 50%;
-    transform: translate(-439px, -323px);
+  user-select: none;
+  transform: translate(-439px, -323px);
 
-    div {
+  div {
-        width: 371px;
+    width: 371px;
-        height: 49px;
+    height: 49px;
-        text-align: center;
+    text-align: center;
-        background: url('~@/assets/images/map/headerBg.png') no-repeat;
+    background: url("~@/assets/images/map/headerBg.png") no-repeat;
-        background-size: 100% 100%;
+    background-size: 100% 100%;
-        color: #fff;
+    color: #fff;
-        margin-bottom: 100px;
+    margin-bottom: 100px;
-        position: relative;
+    position: relative;
 
-        &::after {
+    &::after {
-            content: '';
+      content: "";
-            display: inline-block;
+      display: inline-block;
-            width: 58px;
+      width: 58px;
-            height: 54px;
+      height: 54px;
-            position: absolute;
+      position: absolute;
-            top: 30px;
+      top: 30px;
-            left: 43%;
+      left: 43%;
-            background: url('~@/assets/images/map/down.png') no-repeat;
+      background: url("~@/assets/images/map/down.png") no-repeat;
-            background-size: 100% 100%;
+      background-size: 100% 100%;
-            animation: moveUpDown 2s infinite;
+      animation: moveUpDown 2s infinite;
-        }
     }
+  }
 }
 @keyframes moveUpDown {
   0% {
@@ -217,5 +213,4 @@ export default {
     transform: translateY(0);
   }
 }
-
 </style>