更换了路由

src/router/index.js

@@ -52,13 +52,8 @@ export const constantRoutes = [{
         component: () =>
             import('@/views/viewer.vue'),
         hidden: true
-    }
-    , {
-        path: '/overview1',
-        component: () =>
-            import('@/views/viewer1.vue'),
-        hidden: true
-    }, {
+    },
+    {
         path: '/checkmodel',
         component: () =>
             import('@/views/checkmodel'),

src/views/viewer.vue

@@ -1,8 +1,10 @@
 <template>
     <div v-show="flag">
+        <datePicker @deteChange="deteChange"></datePicker>
+        <ser-center></ser-center>
         <JSYD />
         <TDSC />
-        <HYSY />
+        <HYSY ref="hysy_ref" />
         <TDSY />
         <GDBH />
         <STXF />
@@ -12,22 +14,27 @@
 
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+import serCenter from './cockpitNew1/serCenter';
+import JSYD from './cockpitNew1/jsyd';
+import TDSC from './cockpitNew1/tdsc';
+import HYSY from './cockpitNew1/hysy';
+import TDSY from './cockpitNew1/tdsy';
+import GDBH from './cockpitNew1/gdbh';
+import STXF from './cockpitNew1/stxf';
+import WPJG from './cockpitNew1/wpjg';
+import datePicker from './cockpitNew1/datePicker.vue';
+import xzqh from "../../static/data/460200_full.json";
+import SerCenter from './cockpitNew1/serCenter.vue';
 
-// import JSYD from './homepage/jsyd.vue';
-import JSYD from './cockpitNew/jsyd';
-import TDSC from './cockpitNew/tdsc';
-import HYSY from './cockpitNew/hysy';
-import TDSY from './cockpitNew/tdsy';
-import GDBH from './cockpitNew/gdbh';
-import STXF from './cockpitNew/stxf';
-import WPJG from './cockpitNew/wpjg';
 import { cockpitInfo } from '@/api/cockpit'
 
 export default {
-    components: { JSYD, TDSC, HYSY, TDSY, GDBH, STXF, WPJG },
+    components: { serCenter, JSYD, TDSC, HYSY, TDSY, GDBH, STXF, WPJG, datePicker, SerCenter },
     data() {
         return {
-            flag: true
+            flag: true,
+            xzqh_color_click: "rgba(46, 177, 251, 0.6)",
+            xzqh_color: "rgba(10, 95, 152, 0.5)",
         };
     },
     //监听属性 类似于data概念
@@ -37,8 +44,185 @@ export default {
     //方法集合
     methods: {
         switch() {
+            console.log("switch", "asdasd");
+
             this.flag = !this.flag;
 
+        },
+        deteChange(date) {
+
+        },
+        async hysyq(address) {
+            // 选中xzqh查询
+            let obj = {
+                beginTime: '20240101',
+                endTime: '20240501',
+                jscType: 'jsc_hysyq_ztsh',
+                id: address
+            };
+            let data = await cockpitInfo(obj);
+
+            let obg_text = {
+                xzqhdm_number: data.data[0].xzqhdm_number,
+                zhmj: data.data[0].zhmj,
+
+            }
+            console.log(obg_text, "obg_echart");
+
+            store.setCockpitHysyText(obg_text);
+
+            // 图表数据
+            let obj_echart = {
+                beginTime: '20240101',
+                endTime: '20240501',
+                jscType: 'jsc_hysyq_yelx',
+                id: address
+            };
+            let data_echart = await cockpitInfo(obj_echart);
+
+            let obg_echart = {
+                x: data_echart.data.map(item => item.yhlx_name),
+                bar: data_echart.data.map(item => item.zhmj)
+
+            }
+
+            store.setCockpitHysyEchart(obg_echart);
+
+
+            this.$refs.hysy_ref["getRenKou"]();
+
+            // getRenKou();
+
+            console.log(address, "address");
+        },
+        async pick_xzqh() {
+            const that = this;
+            const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
+            handler.setInputAction(async event => {
+                let pickObj = viewer.scene.pick(event.position);
+                var position = viewer.scene.pickPosition(event.position);
+
+                if (!position)//点击到地球之外
+                    return false;
+                var cartographic = Cesium.Cartographic.fromCartesian(position);
+
+
+                let longitude = Cesium.Math.toDegrees(cartographic.longitude);
+                let latitude = Cesium.Math.toDegrees(cartographic.latitude);
+                let height = cartographic.height;
+                let heading = viewer.scene.camera.heading;
+                let pitch = viewer.scene.camera.pitch;
+                if (!pickObj)//未获取实体
+                    return false;
+                // console.log(longitude, latitude, height);
+                if (!pickObj) {
+                    return false;
+                }
+
+                if (!position) {
+                    position = Cesium.Cartesian3.fromDegrees(0, 0, 0);
+                }
+
+
+                if (Cesium.defined(pickObj)) {
+
+
+
+                    if (pickObj.id && pickObj.id instanceof Cesium.Entity) {//点击entity
+
+                        if (pickObj.id.properties.hasProperty('name')) {
+                            const name = pickObj.id.properties.name.getValue();
+                            const address = pickObj.id.properties.adcode.getValue();
+                            const center = pickObj.id.properties.centroid.getValue();
+
+                            // 选中状态
+                            pickObj.id.polygon._material.color = Cesium.Color.fromCssColorString(that.xzqh_color_click);
+                            pickObj.id.polygon.extrudedHeight = 850;
+
+                            // 恢复其他状态
+                            viewer.entities.values.forEach((res) => {
+
+                                if (res.properties.name._value != name) {
+                                    // console.log(res.properties.name._value, "其他的");
+                                    // console.log(res);
+                                    res.polygon._material.color = Cesium.Color.fromCssColorString(that.xzqh_color)
+                                    res.polygon.extrudedHeight = 450;
+
+                                }
+                            })
+                            // 驾驶舱海域使用权
+                            that.hysyq(address);
+
+                        } else {
+
+                        }
+
+                    }
+
+
+
+
+                } else {
+                }
+
+            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+        },
+        init_xzqh() {
+            const that = this;
+            xzqh.features.forEach((res) => {
+
+                const twoDArray = res.geometry.coordinates[0][0];
+                const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
+
+                console.log();
+
+                viewer.entities.add({
+                    position: Cesium.Cartesian3.fromDegrees(res.properties.centroid[0], res.properties.centroid[1], 500),
+                    text: res.properties.name,
+                    label: {
+                        scale: 1.5,
+                        font: "bolder 16px sans-serif",
+                        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+                        text: res.properties.name,//图标名称
+                        fillColor: Cesium.Color.fromCssColorString("#ffffff"),
+                        pixelOffset: new Cesium.Cartesian2(5, -15),
+                        zIndex: 3,
+                    },
+                    billboard: {
+                        // 图像地址，URI或Canvas的属性
+                        image: "./static/images/overview/htq-f.png",
+                        height: 60,
+                        // 宽度（以像素为单位）
+                        width: 150,
+                        // 相对于坐标的垂直位置
+                        // verticalOrigin: Cesium.VerticalOrigin.CENTER,
+                        // // 相对于坐标的水平位置
+                        // horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+                        scale: 1.0,
+                        zIndex: 2,
+
+                        show: true
+                    },
+                    properties: {
+                        'type': "cockpit",
+                        'name': res.properties.name,
+                        'centroid': res.properties.centroid,
+                        'adcode': res.properties.adcode,
+                    },
+                    polygon: {
+                        zIndex: 1,
+                        hierarchy: {
+                            positions: Cesium.Cartesian3.fromDegreesArray(oneDArray),
+                        },
+                        outline: false,
+                        material: Cesium.Color.fromCssColorString(that.xzqh_color),
+                        height: 100,
+                        extrudedHeight: 450,
+
+                    }
+                });
+
+            })
         }
     },
     beforeCreate() { }, //生命周期 - 创建之前
@@ -56,6 +240,13 @@ export default {
 
         // console.log(data, "asda");
         // console.log(data1, "asda");
+        // 三亚行政区划加载
+
+
+        this.$nextTick((res) => {
+            this.pick_xzqh();
+            this.init_xzqh()
+        });
 
 
     }, //生命周期 - 挂在完成

src/views/viewer1.vue

@@ -1,261 +0,0 @@
-<template>
-    <div v-show="flag">
-        <datePicker @deteChange="deteChange"></datePicker>
-        <ser-center></ser-center>
-        <JSYD />
-        <TDSC />
-        <HYSY ref="hysy_ref" />
-        <TDSY />
-        <GDBH />
-        <STXF />
-        <WPJG />
-    </div>
-</template>
-
-<script>
-//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-import serCenter from './cockpitNew1/serCenter';
-import JSYD from './cockpitNew1/jsyd';
-import TDSC from './cockpitNew1/tdsc';
-import HYSY from './cockpitNew1/hysy';
-import TDSY from './cockpitNew1/tdsy';
-import GDBH from './cockpitNew1/gdbh';
-import STXF from './cockpitNew1/stxf';
-import WPJG from './cockpitNew1/wpjg';
-import datePicker from './cockpitNew1/datePicker.vue';
-import xzqh from "../../static/data/460200_full.json";
-import SerCenter from './cockpitNew1/serCenter.vue';
-
-import { cockpitInfo } from '@/api/cockpit'
-
-export default {
-    components: { serCenter, JSYD, TDSC, HYSY, TDSY, GDBH, STXF, WPJG, datePicker, SerCenter },
-    data() {
-        return {
-            flag: true,
-            xzqh_color_click: "rgba(46, 177, 251, 0.6)",
-            xzqh_color: "rgba(10, 95, 152, 0.5)",
-        };
-    },
-    //监听属性 类似于data概念
-    computed: {},
-    //监控data中的数据变化
-    watch: {},
-    //方法集合
-    methods: {
-        switch() {
-            console.log("switch", "asdasd");
-
-            this.flag = !this.flag;
-
-        },
-        deteChange(date) {
-
-        },
-        async hysyq(address) {
-            // 选中xzqh查询
-            let obj = {
-                beginTime: '20240101',
-                endTime: '20240501',
-                jscType: 'jsc_hysyq_ztsh',
-                id: address
-            };
-            let data = await cockpitInfo(obj);
-
-            let obg_text = {
-                xzqhdm_number: data.data[0].xzqhdm_number,
-                zhmj: data.data[0].zhmj,
-
-            }
-            console.log(obg_text, "obg_echart");
-
-            store.setCockpitHysyText(obg_text);
-
-            // 图表数据
-            let obj_echart = {
-                beginTime: '20240101',
-                endTime: '20240501',
-                jscType: 'jsc_hysyq_yelx',
-                id: address
-            };
-            let data_echart = await cockpitInfo(obj_echart);
-
-            let obg_echart = {
-                x: data_echart.data.map(item => item.yhlx_name),
-                bar: data_echart.data.map(item => item.zhmj)
-
-            }
-
-            store.setCockpitHysyEchart(obg_echart);
-
-
-            this.$refs.hysy_ref["getRenKou"]();
-
-            // getRenKou();
-
-            console.log(address, "address");
-        },
-        async pick_xzqh() {
-            const that = this;
-            const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
-            handler.setInputAction(async event => {
-                let pickObj = viewer.scene.pick(event.position);
-                var position = viewer.scene.pickPosition(event.position);
-
-                if (!position)//点击到地球之外
-                    return false;
-                var cartographic = Cesium.Cartographic.fromCartesian(position);
-
-
-                let longitude = Cesium.Math.toDegrees(cartographic.longitude);
-                let latitude = Cesium.Math.toDegrees(cartographic.latitude);
-                let height = cartographic.height;
-                let heading = viewer.scene.camera.heading;
-                let pitch = viewer.scene.camera.pitch;
-                if (!pickObj)//未获取实体
-                    return false;
-                // console.log(longitude, latitude, height);
-                if (!pickObj) {
-                    return false;
-                }
-
-                if (!position) {
-                    position = Cesium.Cartesian3.fromDegrees(0, 0, 0);
-                }
-
-
-                if (Cesium.defined(pickObj)) {
-
-
-
-                    if (pickObj.id && pickObj.id instanceof Cesium.Entity) {//点击entity
-
-                        if (pickObj.id.properties.hasProperty('name')) {
-                            const name = pickObj.id.properties.name.getValue();
-                            const address = pickObj.id.properties.adcode.getValue();
-                            const center = pickObj.id.properties.centroid.getValue();
-
-                            // 选中状态
-                            pickObj.id.polygon._material.color = Cesium.Color.fromCssColorString(that.xzqh_color_click);
-                            pickObj.id.polygon.extrudedHeight = 850;
-
-                            // 恢复其他状态
-                            viewer.entities.values.forEach((res) => {
-
-                                if (res.properties.name._value != name) {
-                                    // console.log(res.properties.name._value, "其他的");
-                                    // console.log(res);
-                                    res.polygon._material.color = Cesium.Color.fromCssColorString(that.xzqh_color)
-                                    res.polygon.extrudedHeight = 450;
-
-                                }
-                            })
-                            // 驾驶舱海域使用权
-                            that.hysyq(address);
-
-                        } else {
-
-                        }
-
-                    }
-
-
-
-
-                } else {
-                }
-
-            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
-        },
-        init_xzqh() {
-            const that = this;
-            xzqh.features.forEach((res) => {
-
-                const twoDArray = res.geometry.coordinates[0][0];
-                const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
-
-                console.log();
-
-                viewer.entities.add({
-                    position: Cesium.Cartesian3.fromDegrees(res.properties.centroid[0], res.properties.centroid[1], 500),
-                    text: res.properties.name,
-                    label: {
-                        scale: 1.5,
-                        font: "bolder 16px sans-serif",
-                        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
-                        text: res.properties.name,//图标名称
-                        fillColor: Cesium.Color.fromCssColorString("#ffffff"),
-                        pixelOffset: new Cesium.Cartesian2(5, -15),
-                        zIndex: 3,
-                    },
-                    billboard: {
-                        // 图像地址，URI或Canvas的属性
-                        image: "./static/images/overview/htq-f.png",
-                        height: 60,
-                        // 宽度（以像素为单位）
-                        width: 150,
-                        // 相对于坐标的垂直位置
-                        // verticalOrigin: Cesium.VerticalOrigin.CENTER,
-                        // // 相对于坐标的水平位置
-                        // horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-                        scale: 1.0,
-                        zIndex: 2,
-
-                        show: true
-                    },
-                    properties: {
-                        'type': "cockpit",
-                        'name': res.properties.name,
-                        'centroid': res.properties.centroid,
-                        'adcode': res.properties.adcode,
-                    },
-                    polygon: {
-                        zIndex: 1,
-                        hierarchy: {
-                            positions: Cesium.Cartesian3.fromDegreesArray(oneDArray),
-                        },
-                        outline: false,
-                        material: Cesium.Color.fromCssColorString(that.xzqh_color),
-                        height: 100,
-                        extrudedHeight: 450,
-
-                    }
-                });
-
-            })
-        }
-    },
-    beforeCreate() { }, //生命周期 - 创建之前
-    created() { }, //生命周期 - 创建完成（可以访问当前this实例）
-    beforeMount() { }, //生命周期 - 挂载之前
-    async mounted() {
-
-        // let obj = { beginTime: '20230612', endTime: '20230817', jscType: 'jsc_wpjc_yelx', id: '46' };
-        // let data = await cockpitInfo(obj);
-
-
-
-        // let obj1 = { beginTime: '20230612', endTime: '20230817', jscType: 'jsc_wpjc_ztsh', id: '46' }
-        // let data1 = await cockpitInfo(obj1);
-
-        // console.log(data, "asda");
-        // console.log(data1, "asda");
-        // 三亚行政区划加载
-
-
-        this.$nextTick((res) => {
-            this.pick_xzqh();
-            this.init_xzqh()
-        });
-
-
-    }, //生命周期 - 挂在完成
-    beforeUpdate() { }, //生命周期 - 更新之前
-    updated() { }, //生命周期 - 更新之后
-    beforeDestroy() { }, //生命周期 - 销毁之前
-    destroy() { },//生命周期 - 销毁完成
-    activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
-    deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
-};
-</script>
-<style  scoped></style>