解决页面卡顿问题,其他页面占位

src/components/screen-map-header/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="map-header">
         <div class="flex">
-            <div class="item" v-for="(item, index) in list" :key="index">
+            <div class="item" v-for="(item, index) in data" :key="index">
                 <div class="name">{{ item.name }}</div>
                 <section>
                     <span :class="{ 'num': true, 'yellow': index === 4 }">{{ item.num }}</span>
@@ -16,15 +16,14 @@
 export default {
     data() {
         return {
-            list: [
-                { name: '年平均气温', units: '°C', num: '24' },
-                { name: '年日光照', units: '小时', num: '2700' },
-                { name: '无霾期', units: '天', num: '200' },
-                { name: '年平均降水', units: '毫升', num: '687' },
-                { name: '土壤有机质', units: '含量', num: '1.5%' }
-            ]
         };
     },
+    props:{
+        data:{
+            type:Array,
+            default:()=>[]
+        }
+    },
     created() { },
     methods: {},
     components: {},

src/store/modules/map.js

@@ -4,7 +4,7 @@ export default {
     streetId: '12121212121212ab', // 锦水街道id 1215437824174608386
     communityId: '', // 社区id
     gridId: '', // 网格id
-    navId:'zdyf'//选中nav
+    navId:'sy'//选中nav
   },
   mutations: {
     set_mapLevel (state, mapLevel) {

src/views/next/screen-content-left/hsyf-left/index.vue

@@ -1,20 +1,55 @@
 <template>
-        <div  class=''></div>
+        <div>
+                <div class='card' style="height: 292px;">
+                        <screen-title>
+                                <div slot="left" class="screen-title-left">组织建设</div>
+                        </screen-title>
+
+                </div>
+                <div class='card' style="margin-top: 8px;height: 266px;">
+                        <screen-title>
+                                <div slot="left" class="screen-title-left">党员分析</div>
+                        </screen-title>
+
+                </div>
+                <div class='card m-top12' style="height: 318px;">
+                        <screen-title>
+                                <div slot="left" class="screen-title-left">党员风采</div>
+                        </screen-title>
+                        <div class="card-item-zdyf">
+                        </div>
+                </div>
+        </div>
 </template>
 
 <script>
-export  default  {
+export default {
-        data()  {
+        data() {
-                return  {};
+                return {
+
+                };
+        },
+        created() {
+        },
+        mounted() {
+
+        },
+        beforeDestroy() {
+        },
+        methods: {
         },
-        created()  {},
+        components: {},
-        methods:  {},
+        computed: {},
-        components:{},
+        watch: {},
-        computed:{},
-        watch:  {},
 }
 </script>
 
 <style lang="scss" scoped>
-    
+.card {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+
+     
+}
 </style>

src/views/next/screen-content-left/szyf-left/index.vue

@@ -1,20 +1,55 @@
 <template>
-        <div  class=''></div>
+        <div>
+                <div class='card' style="height: 292px;">
+                        <screen-title>
+                                <div slot="left" class="screen-title-left">事件处理实况</div>
+                        </screen-title>
+
+                </div>
+                <div class='card' style="margin-top: 8px;height: 266px;">
+                        <screen-title>
+                                <div slot="left" class="screen-title-left">事件处理实况</div>
+                        </screen-title>
+
+                </div>
+                <div class='card m-top12' style="height: 318px;">
+                        <screen-title>
+                                <div slot="left" class="screen-title-left">重点维稳人员</div>
+                        </screen-title>
+                        <div class="card-item-zdyf">
+                        </div>
+                </div>
+        </div>
 </template>
 
 <script>
-export  default  {
+export default {
-        data()  {
+        data() {
-                return  {};
+                return {
+
+                };
+        },
+        created() {
+        },
+        mounted() {
+
+        },
+        beforeDestroy() {
+        },
+        methods: {
         },
-        created()  {},
+        components: {},
-        methods:  {},
+        computed: {},
-        components:{},
+        watch: {},
-        computed:{},
-        watch:  {},
 }
 </script>
 
 <style lang="scss" scoped>
-    
+.card {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+
+     
+}
 </style>

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

@@ -9,17 +9,18 @@ export default {
     data() {
         return {
             seriesData: [],
-            convertData: []
+            convertData: [],
+            myChart: null
         }
     },
     mounted() {
-        this.seriesData = china.features.map(item => ({ name: item.properties.name, value: 1 })).filter(item=>item.name!='南海诸岛')
+        this.seriesData = china.features.map(item => ({ name: item.properties.name, value: 1 })).filter(item => item.name != '南海诸岛')
         this.convertData = china.features.map(item => ({ name: item.properties.name, value: item.properties.center }))
         this.initData();
     },
     methods: {
         initData() {
-            var myChart = echarts.init(document.getElementById("chinaMap"));
+            this.myChart = echarts.init(document.getElementById("chinaMap"));
             echarts.registerMap("china", china);
             let { seriesData, convertData } = this
             let option = {
@@ -123,18 +124,18 @@ export default {
                                 color: '#092550'
                             }
                         },
-                        silent: 1,
+                        // silent: 1,
                         data: convertData
                     }
                 ]
             };
-            myChart.setOption(option);
+            this.myChart.setOption(option);
-            myChart.on("click", (params) =>
+
-                this.$emit("toProvince", { fileName: params.name })
-            );
-          
         },
     },
+    beforeDestroy() {
+        this.myChart.dispose();
+    }
 };
 </script>
 

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

@@ -1,20 +1,215 @@
 <template>
-    <div class=''>1111</div>
+    <div style="width: 100% ;height: 100%;">
+        <div id="myMap">
+            <screen-map-header :data="headerList"></screen-map-header>
+        </div>
+    </div>
 </template>
-
 <script>
+import { Scene, PolygonLayer, LineLayer, } from "@antv/l7";
+import { GaodeMap } from "@antv/l7-maps";
+import yifengJson from './yifeng.json';
+import chinaMap from "./chinaMap.vue"
+import { mapActions } from 'vuex'
+let myMap;
+let scene;
+let polygonLayer;
+let lineLayer;
+let textLayer;
 export default {
     data() {
-        return {};
+        return {
+            darkStyle: {
+                style: "amap://styles/blue",
+                polygonColor: [
+                    // "rgba(255, 100, 60, 0.5)",
+                    // "rgba(43, 231, 253, 0.35)",
+                    "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(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(255, 255, 50, 0.99)",
+                ],
+                textColor: [
+                    // "rgba(255, 100, 60, 0.99)",
+                    // "rgba(43, 231, 253, 0.99)",
+                    "rgba(126, 187, 255, 1)",
+                    // "rgba(255, 255, 50, 0.99)",
+                ],
+                textStrokeColor: "#fff",
+            },
+            lightStyle: {
+                style: "amap://styles/whitesmoke",
+                polygonColor: [
+                    // "rgba(255, 100, 60, 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(200, 200, 50, 0.9)",
+                ],
+                circleColor: [
+                    // "rgba(255, 180, 150, 0.99)",
+                    "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(120, 120, 0, 0.99)",
+                ],
+                textStrokeColor: "#666",
+            },
+            headerList: [
+                { name: '镇域面积', units: '公里²', num: '199' },
+                { name: '耕地面积', units: '万亩', num: '17.4' },
+                { name: '新村', units: '个', num: '10' },
+                { name: '网格村', units: '个', num: '99' },
+                { name: '辖区人口', units: '万人', num: '9.3' }
+            ],
+        };
+    },
+    created() {
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.init();
+        })
     },
-    created() {},
+    methods: {
-    methods: {},
+        init() {
-    components:{},
+            if (!yifengJson) return false;
-    computed:{},
+            myMap = new GaodeMap({
+                pitch: 40.24716321414439,
+                mapStyle: "amap://styles/darkblue",
+                // style: styleConfig.style,
+                showLabel: false,
+                center: [120.220563, 36.496127],
+                token: "fc14b42e0ca18387866d68ebd4f150c1",
+                zoom: 7,
+                isHotspot: false,
+                showIndoorMap: false,
+                showBuildingBlock: false,
+                resizeEnable: true,
+                doubleClickZoom: false,
+                showRoad: false,
+                viewMode: "3D",
+
+            });
+          
+            scene = new Scene({
+                id: "myMap",
+                logoVisible: false,
+                map: myMap,
+            });
+            scene.on("loaded", () => {
+                this.initPolygonLayer()
+            });
+            // scene.on("click", (feature) => {
+            //     // console.log(feature);
+            // });
+        },
+        initPolygonLayer() {
+            const { darkStyle } = this;
+            let styleConfig = darkStyle;
+            let data = yifengJson
+            // 画区域面积 
+            polygonLayer = new PolygonLayer({
+                autoFit: true,
+            })
+                .size(300)
+                .source(data)
+                .color("name", styleConfig.polygonColor)
+                .shape("extrude")
+                // .shape("fill")
+                .style({
+                    opacityLinear: {
+                        enable: true, // true - false
+                        dir: "out", // in - out
+                    },
+                    opacity: 0.8,
+                    heightfixed: true,
+                    sourceColor: '#4ee8fc',
+                    targetColor: '#00284e',
+                });
+            scene.addLayer(polygonLayer);
+
+            // 画区域边 
+            lineLayer = new LineLayer({
+                zIndex: 2,
+                name: "line2",
+            })
+                .source(data)
+                .shape("line")
+                .size(1)
+                .color("name", styleConfig.lineColor)
+                .style({
+                    opacity: 1,
+                    raisingHeight: 300,
+                })
+                .animate({
+                    interval: 1, // 间隔
+                    duration: 2, // 持续时间，延时
+                    trailLength: 2, // 流线长度
+                });
+            scene.addLayer(lineLayer);
+
+            textLayer = new PolygonLayer({
+                zIndex: 20,
+            })
+                .source(data)
+                .color("name", styleConfig.textColor)
+                .shape("name", "text")
+                .size(14)
+                .style({
+                    textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-left
+                    textOffset: [0, 40], // 文本相对锚点的偏移量 [水平, 垂直]
+                    spacing: 2, // 字符间距
+                    padding: [2, 2], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
+                    stroke: styleConfig.textStrokeColor, // 描边颜色
+                    strokeWidth: 0.1, // 描边宽度
+                    strokeOpacity: 0.8,
+                    raisingHeight: 300,
+                    textAllowOverlap: true,
+                })
+                .active(true);
+            scene.addLayer(textLayer);
+            let _this = this
+            polygonLayer.on("click", (e) => {
+
+            });
+        },
+
+    },
+    components: { chinaMap },
+    computed: {},
     watch: {},
 }
 </script>
 
 <style lang="scss" scoped>
-    
+.map-header {
+    position: absolute;
+    top: 100px;
+    left: 50%;
+    transform: translate(-50%);
+    width: 745px;
+    height: 58px;
+    z-index: 10;
+}
+#myMap {
+    width: 100%;
+    height: 100%;
+}
 </style>

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

@@ -12,7 +12,7 @@
         </div>
         <div id="myMap" v-if="mapFlag == 'Amap'">
             <div v-if="mapType == 'polygon'">
-                <screen-map-header></screen-map-header>
+                <screen-map-header :data="headerList"></screen-map-header>
                 <screen-map-legeng></screen-map-legeng>
             </div>
         </div>
@@ -25,7 +25,7 @@ import yifengJson from './yifeng.json';
 import point from './point.json';
 import chinaMap from "./chinaMap.vue"
 import { mapActions } from 'vuex'
-// let myMap;
+let myMap;
 let scene;
 let circleLayerSmall;
 let roadLayer;
@@ -91,8 +91,14 @@ export default {
                 ],
                 textStrokeColor: "#666",
             },
+            headerList: [
+                { name: '年平均气温', units: '°C', num: '24' },
+                { name: '年日光照', units: '小时', num: '2700' },
+                { name: '无霾期', units: '天', num: '200' },
+                { name: '年平均降水', units: '毫升', num: '687' },
+                { name: '土壤有机质', units: '含量', num: '1.5%' }
+            ],
             mapType: '',
-            myMap: null
         };
     },
     created() {
@@ -119,8 +125,7 @@ export default {
             let that = this
             if (type === 'unit') {
                 this.mapFlag = 'Amap'
-                console.log(this.myMap);
+                if (!myMap) {
-                if (!this.myMap) {
                     setTimeout(() => {
                         that.init(type)
                     }, 500)
@@ -131,7 +136,7 @@ export default {
             } else if (type === 'Emap') {
                 this.mapFlag = 'Emap'
                 scene.destroy();
-                this.myMap = null
+                myMap = null
             }
         },
         toProvince() {
@@ -142,7 +147,7 @@ export default {
         },
         init(type) {
             if (!yifengJson) return false;
-            this.myMap = new GaodeMap({
+           myMap = new GaodeMap({
                 pitch: 40.24716321414439,
                 mapStyle: "amap://styles/darkblue",
                 // style: styleConfig.style,
@@ -159,11 +164,10 @@ export default {
                 viewMode: "3D",
 
             });
-            let map = this.myMap
             scene = new Scene({
                 id: "myMap",
                 logoVisible: false,
-                map: map,
+                map: myMap,
             });
             scene.on("loaded", () => {
                 if (!type) {

src/views/next/screen-content-right/home-right/index.vue

@@ -1,20 +1,55 @@
 <template>
-        <div  class=''></div>
+        <div>
+                <div class='card' style="height: 292px;">
+                        <screen-title>
+                                <div slot="left" class="screen-title-left">和美移风</div>
+                        </screen-title>
+
+                </div>
+                <div class='card' style="margin-top: 8px;height: 266px;">
+                        <screen-title>
+                                <div slot="left" class="screen-title-left">善治移风</div>
+                        </screen-title>
+
+                </div>
+                <div class='card m-top12' style="height: 318px;">
+                        <screen-title>
+                                <div slot="left" class="screen-title-left">文化移风</div>
+                        </screen-title>
+                        <div class="card-item-zdyf">
+                        </div>
+                </div>
+        </div>
 </template>
 
 <script>
-export  default  {
+export default {
-        data()  {
+        data() {
-                return  {};
+                return {
+
+                };
+        },
+        created() {
+        },
+        mounted() {
+
+        },
+        beforeDestroy() {
+        },
+        methods: {
         },
-        created()  {},
+        components: {},
-        methods:  {},
+        computed: {},
-        components:{},
+        watch: {},
-        computed:{},
-        watch:  {},
 }
 </script>
 
 <style lang="scss" scoped>
-    
+.card {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+
+     
+}
 </style>

src/views/next/screen-content-right/hsyf-right/index.vue

@@ -1,20 +1,55 @@
 <template>
-        <div  class=''></div>
+        <div>
+                <div class='card' style="height: 292px;">
+                        <screen-title>
+                                <div slot="left" class="screen-title-left">党建活动</div>
+                        </screen-title>
+
+                </div>
+                <div class='card' style="margin-top: 8px;height: 266px;">
+                        <screen-title>
+                                <div slot="left" class="screen-title-left">支部风采</div>
+                        </screen-title>
+
+                </div>
+                <div class='card m-top12' style="height: 318px;">
+                        <screen-title>
+                                <div slot="left" class="screen-title-left">党务公开</div>
+                        </screen-title>
+                        <div class="card-item-zdyf">
+                        </div>
+                </div>
+        </div>
 </template>
 
 <script>
-export  default  {
+export default {
-        data()  {
+        data() {
-                return  {};
+                return {
+
+                };
+        },
+        created() {
+        },
+        mounted() {
+
         },
-        created()  {},
+        beforeDestroy() {
-        methods:  {},
+        },
-        components:{},
+        methods: {
-        computed:{},
+        },
-        watch:  {},
+        components: {},
+        computed: {},
+        watch: {},
 }
 </script>
 
 <style lang="scss" scoped>
-    
+.card {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+
+
+}
 </style>

src/views/next/screen-content-right/szyf-right/index.vue

@@ -1,20 +1,64 @@
+<!--
+ * @Author: mk 2403457699@qq.com
+ * @Date: 2024-01-16 10:06:10
+ * @LastEditors: mk 2403457699@qq.com
+ * @LastEditTime: 2024-01-25 10:50:11
+ * @Description: 介绍一下改动了什么
+ * 
+ * 
+-->
 <template>
-        <div  class=''></div>
+        <div>
+                <div class='card' style="height: 292px;">
+                        <screen-title>
+                                <div slot="left" class="screen-title-left">服务事项分析</div>
+                        </screen-title>
+
+                </div>
+                <div class='card' style="margin-top: 8px;height: 266px;">
+                        <screen-title>
+                                <div slot="left" class="screen-title-left">事件处理实况</div>
+                        </screen-title>
+
+                </div>
+                <div class='card m-top12' style="height: 318px;">
+                        <screen-title>
+                                <div slot="left" class="screen-title-left">重点帮扶人员</div>
+                        </screen-title>
+                        <div class="card-item-zdyf">
+                        </div>
+                </div>
+        </div>
 </template>
 
 <script>
-export  default  {
+export default {
-        data()  {
+        data() {
-                return  {};
+                return {
+
+                };
+        },
+        created() {
+        },
+        mounted() {
+
+        },
+        beforeDestroy() {
+        },
+        methods: {
         },
-        created()  {},
+        components: {},
-        methods:  {},
+        computed: {},
-        components:{},
+        watch: {},
-        computed:{},
-        watch:  {},
 }
 </script>
 
 <style lang="scss" scoped>
-    
+.card {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+
+     
+}
 </style>