shit

src/App.vue

@@ -1,15 +1,23 @@
 <script setup lang="ts">
 // @ts-ignore
 import Header from "@/components/Header.vue"
-
+import Login from "@/components/login.vue"
-
+let Token =localStorage.getItem('TOKEN')
 
 </script>
 <template>
   <!-- <div>sadas</div> -->
-  <div class="main-box">
+  <div class="main-box" v-if="Token">
     <Header></Header>
     <router-view></router-view>
+  </div>
+  <div v-else class="login-box">
+    <Login></Login>
+  </div>
+  <div>
+
+
+
   </div>
 </template>
 
@@ -30,7 +38,13 @@ import Header from "@/components/Header.vue"
   background-size: 100% 100%;
   overflow: hidden;
 }
-
+.login-box{
+  width: 100vw;
+  height: 100vh;
+  background-image: url('/static/login/bg.png');
+  background-size: 100% 100%;
+  overflow: hidden;
+}
 .color-font {
   font-family: FZCYJ;
   color: #E5EFFF;

src/TEST.vue

@@ -0,0 +1,297 @@
+<template>
+    <div style="width: 45vw;height: 50vh;" id="myChart"></div>
+    <div style="width: 45vw;height: 50vh;" id="chart2"></div>
+    <img src="/static/index/aa.png" id="img" style="opacity: 0;" alt="">
+
+</template>
+<script setup>
+import { ref, onMounted } from "vue"
+import axios from "axios";
+import * as echarts from 'echarts';
+import "echarts-gl"
+
+
+const initData = (data) => {
+
+    var data3d = data.map(el => {
+        return {
+                                    name: el.properties.name,
+                                    value:el.properties.center,
+                                    label: {
+                                        normal: {
+                                            show: true,
+                                            position: 'right',
+                                            formatter: '{b}',
+                                            color: 'white',
+                                            fontWeight: "bold",
+                                            fontSize: 18
+                                        }
+                                    },
+                                    itemStyle: {
+                                        normal: {
+                                            color: '#FFB923'
+                                        }
+                                    },
+                                }
+
+
+    });
+    return data3d
+}
+
+
+
+onMounted(() => {
+    const u = 'https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231129\/202311291816106120a4034.png'
+    axios.get('https://geo.datav.aliyun.com/areas_v3/bound/510000_full.json')
+        .then(function (response) {
+let dot=document.getElementById('img')
+            let mapJson = response.data
+            let    chartOption= {
+                    geo: {
+                        backgroundColor: {
+                            color: {
+                                image: dot, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
+                                repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
+                            }
+                        },
+                        show: true,
+                        map: `lz`,
+                        left: '0',
+                        top: `0%`,
+                        right: '8%',
+                        bottom: '0',
+                        itemStyle: {
+                            // normal: {
+                            //     areaColor: `rgba(115, 219, 249, 0)`,
+                            //     borderwidth: 3,
+                            //     borderColor: `#37C1FD`,
+                            //     shadowBlur: 20,
+                            //     shadowOffsetY: 4,
+                            //     shadowOffsetX: 4,
+                            //     shadowColor: `#ddd`
+                            // },
+                            areaColor: {
+                    image: dot,
+                    repeat: 'repeat'
+                },
+                        }
+                    },
+                    series: [
+                         {
+                            type: `effectScatter`,
+                            coordinateSystem: `geo`,
+                            rippleEffect: { //涟漪特效
+                                period: 4, //动画时间，值越小速度越快
+                                brushType: `stroke`, //波纹绘制方式 stroke, fill
+                                scale: 8 //波纹圆环最大限制，值越大波纹越大
+                            },
+                            itemStyle: {
+                                // normal: {
+                                //     color: `orange`,
+                                //     shadowBlur: 2
+                                // },
+                               
+                            },
+                            symbolSize: 8,
+                            data: [
+                                { name: `三亚市`, value: [ 104.065735, 30.659462] },
+                                { name: `五指山市`, value: [104.773447,29.352765] }
+                                //[109.508268, 18.247872, `三亚市`],
+                                //[109.516662, 18.776921, `五指山市`]
+                            ]
+                        }
+                    ]
+                }
+
+            
+
+
+            echarts.registerMap(`lz`, mapJson)
+            // const myChart2 = document.getElementById('chart2')
+            // const bg = echarts.init(myChart2);
+            // bg.setOption(chartOption)
+
+                const canvas = document.createElement(`canvas`)
+               let bg = echarts.init(canvas, null, {
+                    width: 1024,
+                    height: 1024
+                })
+                bg.setOption(chartOption)
+            const myChart = document.getElementById('myChart')
+            const charts = echarts.init(myChart);
+            let option = {
+
+
+
+
+                // geo3D: {
+                //         map: `海南`,
+                //         viewControl: {
+                //             autoRotate: false,
+                //             distance: 180
+                //         },
+                //         shading: `color`,
+                //         boundingCoords: [
+                //             [-180, 90],
+                //             [180, -90]
+                //         ],
+                //         colorMaterial: {
+                //             detailTexture: this.bg, // 纹理贴图
+                //             textureTiling: 1 // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                //         },
+                //         // 是否显示地面
+                //         groundPlane: {
+                //             show: false
+                //         }
+                //     },
+
+
+                geo3D: {
+                      
+                    map: "luzhou",
+                    shading: `color`,
+        //            
+                    roam: true,
+                    itemStyle: {
+                        // color: "#014281",
+                        opacity: 0.9,
+                        borderWidth: 0.4,
+                        borderColor: "#000",
+                        normal: {
+                            areaColor: 'red',
+                            borderWidth: 4, //设置外层边框
+                            // borderColor: '#f8911b',
+                        },
+                        emphasis: {
+                            show: false,
+                            // areaColor: '#01215c'
+                        }
+
+
+                        // areaColor: '#fff'
+                    },
+                    viewControl: {
+                        autoRotate: true,
+                        autoRotateAfterStill: 3,
+                        distance: 90,
+                        minAlpha: 5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
+                        maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
+                        minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
+                        maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
+                        animation: true, // 是否开启动画。[ default: true ]
+                        animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
+                        animationEasingUpdate: "cubicInOut" // 过渡动画的缓动效果。[ default: cubicInOut ]
+                    },
+
+                    emphasis: {
+                        disabled: true, //是否可以被选中
+                        label: {
+                            //移入时的高亮文本
+                            show: true,
+                        },
+                        itemStyle: {
+                            color:
+
+
+                                "#B17049" //显示移入的区块变粉色
+
+                        }
+                    },
+                    label: {
+                        show: false,
+                        // position: "bottom",
+                        color: "white", //地图初始化区域字体颜色
+                        fontSize: 14,
+                        lineHeight: 16,
+                        // textStyle: {
+                        //     color: "#fff", //地图初始化区域字体颜色
+                        //     fontSize: 12,
+                        //     opacity: 1,
+                        //     backgroundColor: "red",
+                        // },
+                    },
+                    shading: "color",
+                    light: {
+                        //光照阴影
+                        main: {
+                            // color: "#fff", //光照颜色
+                            intensity: 0.8, //光照强度
+                            shadowQuality: 'high', //阴影亮度
+                            shadow: true, //是否显示阴影
+                            shadowQuality: "medium", //阴影质量 ultra //阴影亮度
+                            alpha: 55,
+                            beta: 10
+                        },
+                        ambient: {
+                            intensity: 0.7
+                        }
+                    },
+                    colorMaterial: {
+                            detailTexture: bg, // 纹理贴图
+                            textureTiling: 1 // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                        },
+                },
+                series: [
+                    {
+                        type: "scatter3D",
+                        coordinateSystem: "geo3D",
+                        data: initData(mapJson.features),
+                        // symbol: "circle",
+                        symbolSize: 20,
+                        // itemStyle: {
+                        //     color: "transparent",
+                        // },
+                        label: {
+                            show: true,
+                            position: "top",
+                            distance: -10,
+                            formatter(params) {
+                                return "2";
+                            },
+
+                            textStyle: {
+                                // color: "transparent",
+                                padding: [15, 20],
+                                backgroundColor: {
+                                    image: '/static/index/aa.png',
+                                },
+                                // backgroundColor:""
+                            },
+                        },
+                        emphasis: {
+                            label: {
+                                show: true,
+                                textStyle: {
+                                    backgroundColor: {
+                                        // image: '/static/index/aa.png',
+                                    },
+                                },
+                            },
+                        },
+
+                    },
+
+                ],
+
+
+            };
+            // 地图注册，第一个参数的名字必须和option.geo.map一致
+            echarts.registerMap("luzhou", mapJson)
+
+            charts.setOption(option);
+
+
+
+        })
+
+
+
+})
+
+
+
+
+
+
+</script>

src/components/Header.vue

@@ -43,46 +43,6 @@ const route = useRoute()
 // 标题
 const show = reactive([false, true, true, true, true])
 
-const showFn = (index, src) => {
-    show.forEach((item, i) => {
-        show[i] = true
-    })
-    show[index] = !show[index]
-    if (src) {
-        router.replace(src)
-
-    }
-}
-
-const backUrl = ref('/')
-// alert(zz3)
-
-watch(
-    () => route.path,
-    (value, oldValue) => {
-        if (value == '/') {
-            showFn(0)
-        }
-        if (value == '/commodity') {
-            showFn(1)
-        }
-        if (value == '/Businesses') {
-            showFn(2)
-        }
-
-        if (value == '/order') {
-            showFn(3)
-        }
-        if (value == '/finance') {
-            showFn(4)
-        }
-        console.log(value)
-
-    }
-)
-
-
-
 
 
 
@@ -95,7 +55,9 @@ const offAreaList = () => {
 }
 const out = () => {
     //@ts-ignore
-    window.open("about:blank", "_top").close()
+    // window.open("about:blank", "_top").close()
+    localStorage.removeItem('TOKEN')
+    router.replace('/')
 }
 const updateTime = () => {
     var date = new Date();

src/components/areaMap.vue

@@ -1,248 +1,293 @@
 <template>
-    <div style="width: 45vw;height: 50vh;" id="myChart"></div>
+  <div>
-    <div style="width: 45vw;height: 50vh;" id="chart2"></div>
-    <img src="/static/index/aa.png" id="img" style="opacity: 0;" alt="">
 
+    <div style="width: 45vw;height: 50vh;" id="chart2"></div>
+    <!-- <img src="/static/index/lx.png" class="img4" alt=""> -->
+  </div>
+  <!-- <div style="width: 45vw;height: 50vh;" id="myChart"></div> -->
+
+  <!-- <img src="/static/index/SC.png" id="img" style="width: 45vw;height: 50vh;" alt=""> -->
 </template>
+
+
+
+<style lang="scss" scoped>
+@keyframes spin {
+  0% {
+    transform: rotateY(0deg);
+  }
+
+  100% {
+    transform: rotateY(360deg);
+  }
+}
+
+.img4 {
+  top: 19.5vh;
+  left: 33.3vw;
+  height: 44vh;
+  width: 33.6vw;
+  position: absolute;
+  //   transform: rotateX(45deg);
+  // animation: spin 2s linear infinite;
+
+}
+
+#chart2 {
+  position: absolute;
+  z-index: 9;
+}
+</style>
+
 <script setup>
 import { ref, onMounted } from "vue"
 import axios from "axios";
 import * as echarts from 'echarts';
 import "echarts-gl"
+// import geoJson from "/static/jsonData/xuantan.js"
 
 
-const initData = (data) => {
-
-    var data3d = data.map(el => {
-        return {
-                                    name: el.properties.name,
-                                    value:el.properties.center,
-                                    label: {
-                                        normal: {
-                                            show: true,
-                                            position: 'right',
-                                            formatter: '{b}',
-                                            color: 'white',
-                                            fontWeight: "bold",
-                                            fontSize: 18
-                                        }
-                                    },
-                                    itemStyle: {
-                                        normal: {
-                                            color: '#FFB923'
-                                        }
-                                    },
-                                }
-
-
-    });
-    return data3d
-}
-
 
 
 onMounted(() => {
-    const u = 'https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231129\/202311291816106120a4034.png'
+  const u = 'https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231129\/202311291816106120a4034.png'
-    axios.get('https://geo.datav.aliyun.com/areas_v3/bound/510000_full.json')
+
-        .then(function (response) {
+
-let dot=document.getElementById('img')
+  axios.get('https://geo.datav.aliyun.com/areas_v3/bound/510500_full.json')
-            let mapJson = response.data
+
-            let    chartOption= {
+
-                    geo: {
+  axios.get('https://geo.datav.aliyun.com/areas_v3/bound/510000_full.json')
-                        backgroundColor: {
+    .then(function (response) {
-                            color: {
+      let geoJson = response.data
-                                image: dot, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
+      const dot = document.getElementById('img')
-                                repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
+      var mapName = 'lz';
-                            }
+      let data = [
-                        },
+      ]
-                        show: true,
+      const myChart = document.getElementById("chart2")
-                        map: `lz`,
+      /*获取地图数据*/
-                        left: '0',
+
-                        top: `0%`,
+
-                        right: '8%',
+      let option = {
-                        bottom: '0',
+
-                        itemStyle: {
+
-                            // normal: {
+
-                            //     areaColor: `rgba(115, 219, 249, 0)`,
+        geo: [
-                            //     borderwidth: 3,
+          {
-                            //     borderColor: `#37C1FD`,
+            layoutSize: '100%',//大小
-                            //     shadowBlur: 20,
+            show: true,
-                            //     shadowOffsetY: 4,
+            map: mapName,
-                            //     shadowOffsetX: 4,
+
-                            //     shadowColor: `#ddd`
+            roam: false,
-                            // },
+            zoom: 1.2,
-                            areaColor: {
+            layoutCenter: ["50%", "50%"],
-                    image: dot,
+            aspectScale: 1,
-                    repeat: 'repeat'
+            label: {
-                },
+              normal: {
-                        }
+                show: false,
-                    },
+                textStyle: {
-                    series: [
+                  color: '#fff'
-                         {
-                            type: `effectScatter`,
-                            coordinateSystem: `geo`,
-                            rippleEffect: { //涟漪特效
-                                period: 4, //动画时间，值越小速度越快
-                                brushType: `stroke`, //波纹绘制方式 stroke, fill
-                                scale: 8 //波纹圆环最大限制，值越大波纹越大
-                            },
-                            itemStyle: {
-                                // normal: {
-                                //     color: `orange`,
-                                //     shadowBlur: 2
-                                // },
-                               
-                            },
-                            symbolSize: 8,
-                            data: [
-                                { name: `三亚市`, value: [ 104.065735, 30.659462] },
-                                { name: `五指山市`, value: [104.773447,29.352765] }
-                                //[109.508268, 18.247872, `三亚市`],
-                                //[109.516662, 18.776921, `五指山市`]
-                            ]
-                        }
-                    ]
                 }
+              },
+             
+            },
+            itemStyle: {
+              areaColor: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 0,
+                colorStops: [{
+                  offset: 0,
+                  color: "rgba(3,27,78,0.75)", // 0% 处的颜色
+                }, {
+                  offset: 1,
+                  color: "rgba(58,149,253,0.75)", // 50% 处的颜色
+                },],
+                global: true, // 缺省为 false
+              },
+              borderColor: "#D2F2FC",
+              borderWidth: 2,
+              shadowColor: "#8cd3ef",
+              shadowOffsetY: 10,
+              shadowBlur: 120,
+            },
 
-            
+          },
 
-
+          {
-            echarts.registerMap(`lz`, mapJson)
+            type: "map",
-            // const myChart2 = document.getElementById('chart2')
+            map: mapName,
-            // const bg = echarts.init(myChart2);
+            zlevel: -1,
-            // bg.setOption(chartOption)
+            aspectScale: 1,
-
+            zoom: 1.2,
-                const canvas = document.createElement(`canvas`)
+            layoutCenter: ["50%", "51%"],
-               let bg = echarts.init(canvas, null, {
+            layoutSize: "100%",
-                    width: 1024,
+            roam: false,
-                    height: 1024
+            silent: true,
-                })
+            regions: [
-                bg.setOption(chartOption)
+              {
-            const myChart = document.getElementById('myChart')
+                name: "南海诸岛",
-            const charts = echarts.init(myChart);
+                itemStyle: {
-            let option = {
+                  // 隐藏地图
-
+                  normal: {
-
+                    opacity: 0, // 为 0 时不绘制该图形
-
+                  }
-
-                // geo3D: {
-                //         map: `海南`,
-                //         viewControl: {
-                //             autoRotate: false,
-                //             distance: 180
-                //         },
-                //         shading: `color`,
-                //         boundingCoords: [
-                //             [-180, 90],
-                //             [180, -90]
-                //         ],
-                //         colorMaterial: {
-                //             detailTexture: this.bg, // 纹理贴图
-                //             textureTiling: 1 // 纹理平铺，1是拉伸，数字表示纹理平铺次数
-                //         },
-                //         // 是否显示地面
-                //         groundPlane: {
-                //             show: false
-                //         }
-                //     },
-
-
-                geo3D: {
-                      
-                    map: "luzhou",
-                    shading: `color`,
-        //            
-                    roam: true,
-                    itemStyle: {
-                        // color: "#014281",
-                        opacity: 0.9,
-                        borderWidth: 0.4,
-                        borderColor: "#000",
-                        normal: {
-                            areaColor: 'red',
-                            borderWidth: 4, //设置外层边框
-                            // borderColor: '#f8911b',
-                        },
-                        emphasis: {
-                            show: false,
-                            // areaColor: '#01215c'
-                        }
-
-
-                        // areaColor: '#fff'
-                    },
-                    viewControl: {
-                        autoRotate: true,
-                        autoRotateAfterStill: 3,
-                        distance: 90,
-                        minAlpha: 5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
-                        maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
-                        minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
-                        maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
-                        animation: true, // 是否开启动画。[ default: true ]
-                        animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
-                        animationEasingUpdate: "cubicInOut" // 过渡动画的缓动效果。[ default: cubicInOut ]
-                    },
-
-                    emphasis: {
-                        disabled: true, //是否可以被选中
-                        label: {
-                            //移入时的高亮文本
-                            show: true,
-                        },
-                        itemStyle: {
-                            color:
-
-
-                                "#B17049" //显示移入的区块变粉色
-
-                        }
-                    },
-                    label: {
-                        show: false,
-                        // position: "bottom",
-                        color: "white", //地图初始化区域字体颜色
-                        fontSize: 14,
-                        lineHeight: 16,
-                        // textStyle: {
-                        //     color: "#fff", //地图初始化区域字体颜色
-                        //     fontSize: 12,
-                        //     opacity: 1,
-                        //     backgroundColor: "red",
-                        // },
-                    },
-                    shading: "color",
-                    light: {
-                        //光照阴影
-                        main: {
-                            // color: "#fff", //光照颜色
-                            intensity: 0.8, //光照强度
-                            shadowQuality: 'high', //阴影亮度
-                            shadow: true, //是否显示阴影
-                            shadowQuality: "medium", //阴影质量 ultra //阴影亮度
-                            alpha: 55,
-                            beta: 10
-                        },
-                        ambient: {
-                            intensity: 0.7
-                        }
-                    },
-                    colorMaterial: {
-                            detailTexture: bg, // 纹理贴图
-                            textureTiling: 1 // 纹理平铺，1是拉伸，数字表示纹理平铺次数
-                        },
                 },
-                series: [
+                label: {
-                    {
+                  show: false // 隐藏文字
-                        type: "scatter3D",
+                }
-                        coordinateSystem: "geo3D",
+              }
-                        data: initData(mapJson.features),
+            ],
-                        // symbol: "circle",
+            itemStyle: {
-                        symbolSize: 20,
+              normal: {
-                        // itemStyle: {
+                borderWidth: 1,
-                        //     color: "transparent",
+                borderColor: "rgba(17, 149, 216,0.6)",
-                        // },
+                borderColor: "#5AD0E0",
-                        label: {
+                shadowColor: "rgba(172, 122, 255,0.5)",
+                shadowOffsetY: 5,
+                shadowBlur: 15,
+                areaColor: "rgba(5,21,35,0.1)",
+              },
+            },
+          },
+
+
+
+
+          {
+            type: "map",
+            map: mapName,
+            zlevel: -1,
+            aspectScale: 1,
+            zoom: 1.2,
+            layoutCenter: ["50%", "52%"],
+            layoutSize: "100%",
+            roam: false,
+            silent: true,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 1,
+                borderColor: "rgba(17, 149, 216,0.6)",
+                borderColor: "#5AD0E0",
+                shadowColor: "rgba(172, 122, 255,0.5)",
+                shadowOffsetY: 5,
+                shadowBlur: 15,
+                areaColor: "rgba(5,21,35,0.1)",
+              },
+            },
+          },
+          {
+            type: "map",
+            map: mapName,
+            zlevel: -2,
+            aspectScale: 1,
+            zoom: 1.2,
+            layoutCenter: ["50%", "52%"],
+            layoutSize: "100%",
+            roam: false,
+            silent: true,
+
+            itemStyle: {
+              normal: {
+                borderWidth: 1,
+                borderColor: "rgba(17, 149, 216,0.4)",
+                borderColor: "#5AD0E0",
+                shadowColor: "rgba(172, 122, 255,0.5)",
+                shadowOffsetY: 5,
+                shadowBlur: 15,
+                areaColor: "rgba(5,21,35,0.1)",
+              },
+            },
+          },
+
+          // {
+          //   type: "map",
+          //   map: mapName,
+          //   zlevel: -3,
+          //   aspectScale: 1,
+          //   zoom: 1.2,
+          //   layoutCenter: ["50%", "53%"],
+          //   layoutSize: "101%",
+          //   roam: false,
+          //   silent: true,
+          //   regions: [
+          //     {
+          //       name: "南海诸岛",
+          //       itemStyle: {
+          //         // 隐藏地图
+          //         normal: {
+          //           opacity: 0, // 为 0 时不绘制该图形
+          //         }
+          //       },
+          //       label: {
+          //         show: false // 隐藏文字
+          //       }
+          //     }
+          //   ],
+          //   itemStyle: {
+          //     normal: {
+          //       borderWidth: 1,
+          //       // borderColor: "rgba(11, 43, 97,0.8)",
+          //       borderColor: "rgba(58,149,253,0.4)",
+          //       shadowColor: "rgba(58,149,253,1)",
+          //       shadowOffsetY: 15,
+          //       shadowBlur: 10,
+          //       areaColor: "transpercent",
+          //     },
+          //   },
+          // },
+          {
+            type: "map",
+            map: mapName,
+            zlevel: -4,
+            aspectScale: 1,
+            zoom: 1.2,
+            layoutCenter: ["50%", "53%"],
+            layoutSize: "100%",
+            roam: false,
+            silent: true,
+            regions: [
+              {
+                name: "南海诸岛",
+                itemStyle: {
+                  // 隐藏地图
+                  normal: {
+                    opacity: 0, // 为 0 时不绘制该图形
+                  }
+                },
+                label: {
+                  show: false // 隐藏文字
+                }
+              }
+            ],
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                // borderColor: "rgba(11, 43, 97,0.8)",
+                borderColor: "rgba(5,9,57,0.8)",
+                shadowColor: "rgba(29, 111, 165,0.8)",
+                shadowOffsetY: 15,
+                shadowBlur: 10,
+                areaColor: "rgba(5,21,35,0.1)",
+              },
+            },
+          },
+
+
+
+        ],
+        series: [
+          {
+            type: 'map',
+            map: mapName,
+            geoIndex: 0,
+            aspectScale: 1, //长宽比
+
+            showLegendSymbol: true,
+            roam: true,
+            label: {
                             show: true,
                             position: "top",
                             distance: -10,
@@ -259,31 +304,34 @@ let dot=document.getElementById('img')
                                 // backgroundColor:""
                             },
                         },
-                        emphasis: {
-                            label: {
-                                show: true,
-                                textStyle: {
-                                    backgroundColor: {
-                                        // image: '/static/index/aa.png',
-                                    },
-                                },
-                            },
-                        },
-
-                    },
-
-                ],
-
-
-            };
-            // 地图注册，第一个参数的名字必须和option.geo.map一致
-            echarts.registerMap("luzhou", mapJson)
-
-            charts.setOption(option);
 
 
 
-        })
+            animation: true,
+            markPoint: {
+              symbol: "none"
+            },
+            data: data,
+          },
+
+
+        ],
+      };
+
+
+
+      echarts.registerMap(mapName, geoJson)
+      const bg = echarts.init(myChart)
+      bg.setOption(option);
+
+
+
+
+
+
+
+
+    })
 
 
 

src/components/farmerMap.vue

@@ -0,0 +1,437 @@
+<template>
+
+    <div style="width: 45vw;height: 50vh;" id="chart2">
+  
+  
+    </div>
+    <!-- <img src="/static/index/SC.png" id="img" style="width: 45vw;height: 50vh;" alt=""> -->
+  </template>
+  
+  
+  
+  <style lang="scss" scoped>
+  @keyframes spin {
+    0% {
+      transform: rotateY(0deg);
+    }
+  
+    100% {
+      transform: rotateY(360deg);
+    }
+  }
+  
+  .img4 {
+    width: 45VW;
+    height: 50vh;
+    transform-origin: center center;
+    //   transform: rotateX(45deg);
+    // animation: spin 2s linear infinite;
+  
+  }
+  </style>
+  
+  <script setup>
+  import { ref, onMounted } from "vue"
+  import axios from "axios";
+  import * as echarts from 'echarts';
+  import "echarts-gl"
+  
+  
+  
+  
+  
+  onMounted(() => {
+    const u = 'https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231129\/202311291816106120a4034.png'
+    axios.get('https://geo.datav.aliyun.com/areas_v3/bound/510000_full.json')
+      .then(function (response) {
+        let geoJson = response.data
+        const dot = document.getElementById('img')
+        var mapName = 'lz';
+        var geoCoordMap = {
+        };
+  
+        let data = [
+  
+        {
+                  name: "成都市",
+                  value: 12,
+                  itemStyle: {
+                      normal: {
+                          color: {
+                              image: document.getElementById("img"),
+                              repeat: 'no-repeat'
+                          }
+                      }
+                  }
+              },
+        {
+                  name: "眉山市",
+                  value: 12,
+                  itemStyle: {
+                      normal: {
+                          color: {
+                              image: document.getElementById("img"),
+                              repeat: 'no-repeat'
+                          }
+                      }
+                  }
+              },
+        {
+                  name: "雅安市",
+                  value: 12,
+                  itemStyle: {
+                      normal: {
+                          color: {
+                              image: document.getElementById("img"),
+                              repeat: 'no-repeat'
+                          }
+                      }
+                  }
+              },
+  
+        ]
+        const myChart = document.getElementById("chart2")
+        /*获取地图数据*/
+        var mapFeatures = geoJson.features;
+        mapFeatures.forEach(function (v) {
+          // 地区名称
+          var name = v.properties.name;
+          // 地区经纬度
+          geoCoordMap[name] = v.properties.cp;
+        });
+        // console.log(dot)
+        let option = {
+          visualMap: {
+                      show: false
+                  },
+          title: {
+            show: true,
+  
+            // textStyle: {
+            //     color: "#fff",
+            //     fontFamily: "等线",
+            //     fontSize: 18,
+            // },
+          },
+          tooltip: {
+            trigger: 'none',
+            formatter: function (params) {
+              if (typeof params.value[2] == 'undefined') {
+                var toolTiphtml = '';
+                for (var i = 0; i < toolTipData.length; i++) {
+                  if (params.name == toolTipData[i].name) {
+                    toolTiphtml += toolTipData[i].name + "：" + toolTipData[i].value;
+                  }
+                }
+                console.log(toolTiphtml);
+                // console.log(convertData(data))
+                return toolTiphtml;
+              } else {
+                var toolTiphtml = '';
+                for (var i = 0; i < toolTipData.length; i++) {
+                  if (params.name == toolTipData[i].name) {
+                    toolTiphtml += toolTipData[i].name + "：" + toolTipData[i].value;
+                  }
+                }
+                console.log(toolTiphtml);
+  
+                return toolTiphtml;
+              }
+            },
+            backgroundColor: "#fff",
+            borderColor: "#333",
+            padding: [5, 10],
+            textStyle: {
+              color: "#333",
+              fontSize: "16"
+            }
+          },
+          geo: [
+            {
+              layoutSize: '100%',//大小
+              show: true,
+              map: mapName,
+              backgroundColor: {
+                color: {
+                  image: dot, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
+                  repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
+                }
+              },
+              roam: false,
+              zoom: 1.2,
+              layoutCenter: ["50%", "50%"],
+              aspectScale: 1,
+              label: {
+                normal: {
+                  show: false,
+                  textStyle: {
+                    color: '#fff'
+                  }
+                },
+                emphasis: {
+                  show: true,
+                  textStyle: {
+                    color: '#fff'
+                  }
+                }
+              },
+              itemStyle: {
+                areaColor: {
+                  type: "linear",
+                  x: 1200,
+                  y: 0,
+                  x2: 0,
+                  y2: 0,
+                  colorStops: [{
+                    offset: 0,
+                    color: "rgba(3,27,78,0.75)", // 0% 处的颜色
+                  }, {
+                    offset: 1,
+                    color: "rgba(58,149,253,0.75)", // 50% 处的颜色
+                  },],
+                  global: true, // 缺省为 false
+                },
+                borderColor: "#D2F2FC",
+                borderWidth: 2,
+                shadowColor: "#8cd3ef",
+                shadowOffsetY: 10,
+                shadowBlur: 120,
+              },
+  
+            },
+  
+            // {
+            //   type: "map",
+            //   map: mapName,
+            //   zlevel: -1,
+            //   aspectScale: 1,
+            //   zoom: 1.2,
+            //   layoutCenter: ["50%", "51%"],
+            //   layoutSize: "100%",
+            //   roam: false,
+            //   silent: true,
+            //   regions: [
+            //     {
+            //       name: "南海诸岛",
+            //       itemStyle: {
+            //         // 隐藏地图
+            //         normal: {
+            //           opacity: 0, // 为 0 时不绘制该图形
+            //         }
+            //       },
+            //       label: {
+            //         show: false // 隐藏文字
+            //       }
+            //     }
+            //   ],
+            //   itemStyle: {
+            //     normal: {
+            //       borderWidth: 1,
+            //       borderColor: "rgba(17, 149, 216,0.6)",
+            //       borderColor: "#5AD0E0",
+            //       shadowColor: "rgba(172, 122, 255,0.5)",
+            //       shadowOffsetY: 5,
+            //       shadowBlur: 15,
+            //       areaColor: "rgba(5,21,35,0.1)",
+            //     },
+            //   },
+            // },
+            // {
+            //   type: "map",
+            //   map: mapName,
+            //   zlevel: -2,
+            //   aspectScale: 1,
+            //   zoom: 1.2,
+            //   layoutCenter: ["50%", "52%"],
+            //   layoutSize: "100%",
+            //   roam: false,
+            //   silent: true,
+            //   regions: [
+            //     {
+            //       name: "南海诸岛",
+            //       itemStyle: {
+            //         // 隐藏地图
+            //         normal: {
+            //           opacity: 0, // 为 0 时不绘制该图形
+            //         }
+            //       },
+            //       label: {
+            //         show: false // 隐藏文字
+            //       }
+            //     }
+            //   ],
+            //   itemStyle: {
+            //     normal: {
+            //       borderWidth: 1,
+            //       // borderColor: "rgba(57, 132, 188,0.4)",
+            //       borderColor: "#1C75C8",
+            //       shadowColor: "rgba(65, 214, 255,1)",
+            //       shadowOffsetY: 5,
+            //       shadowBlur: 15,
+            //       areaColor: "transpercent",
+            //     },
+            //   },
+            // },
+  
+            // {
+            //   type: "map",
+            //   map: mapName,
+            //   zlevel: -3,
+            //   aspectScale: 1,
+            //   zoom: 1.2,
+            //   layoutCenter: ["50%", "53%"],
+            //   layoutSize: "101%",
+            //   roam: false,
+            //   silent: true,
+            //   regions: [
+            //     {
+            //       name: "南海诸岛",
+            //       itemStyle: {
+            //         // 隐藏地图
+            //         normal: {
+            //           opacity: 0, // 为 0 时不绘制该图形
+            //         }
+            //       },
+            //       label: {
+            //         show: false // 隐藏文字
+            //       }
+            //     }
+            //   ],
+            //   itemStyle: {
+            //     normal: {
+            //       borderWidth: 1,
+            //       // borderColor: "rgba(11, 43, 97,0.8)",
+            //       borderColor: "rgba(58,149,253,0.4)",
+            //       shadowColor: "rgba(58,149,253,1)",
+            //       shadowOffsetY: 15,
+            //       shadowBlur: 10,
+            //       areaColor: "transpercent",
+            //     },
+            //   },
+            // },
+            // {
+            //   type: "map",
+            //   map: mapName,
+            //   zlevel: -4,
+            //   aspectScale: 1,
+            //   zoom: 1.2,
+            //   layoutCenter: ["50%", "54%"],
+            //   layoutSize: "103%",
+            //   roam: false,
+            //   silent: true,
+            //   regions: [
+            //     {
+            //       name: "南海诸岛",
+            //       itemStyle: {
+            //         // 隐藏地图
+            //         normal: {
+            //           opacity: 0, // 为 0 时不绘制该图形
+            //         }
+            //       },
+            //       label: {
+            //         show: false // 隐藏文字
+            //       }
+            //     }
+            //   ],
+            //   itemStyle: {
+            //     normal: {
+            //       borderWidth: 5,
+            //       // borderColor: "rgba(11, 43, 97,0.8)",
+            //       borderColor: "rgba(5,9,57,0.8)",
+            //       shadowColor: "rgba(29, 111, 165,0.8)",
+            //       shadowOffsetY: 15,
+            //       shadowBlur: 10,
+            //       areaColor: "rgba(5,21,35,0.1)",
+            //     },
+            //   },
+            // },
+  
+  
+  
+          ],
+          series: [
+            {
+              type: 'map',
+              map: mapName,
+              geoIndex: 0,
+              aspectScale: 1, //长宽比
+              zoom: 0.65,
+              showLegendSymbol: true,
+              roam: true,
+              label: {
+                normal: {
+                  show: true,
+                  textStyle: {
+                    color: "#fff",
+                    fontSize: "120%"
+                  },
+                },
+                emphasis: {
+                  // show: false,
+                },
+              },
+              // itemStyle: {
+              //     normal: {
+              //         areaColor: {
+              //             type: "linear",
+              //             x: 1200,
+              //             y: 0,
+              //             x2: 0,
+              //             y2: 0,
+              //             colorStops: [{
+              //                 offset: 0,
+              //                 color: "rgba(3,27,78,0.75)", // 0% 处的颜色
+              //             }, {
+              //                 offset: 1,
+              //                 color: "rgba(58,149,253,0.75)", // 50% 处的颜色
+              //             },],
+              //             global: true, // 缺省为 false
+              //         },
+              //         borderColor: "#fff",
+              //         borderWidth: 0.2,
+              //     },
+              // },
+              layoutCenter: ["50%", "50%"],
+              layoutSize: "180%",
+              animation: true,
+              markPoint: {
+                symbol: "none"
+              },
+              data: data,
+            },
+  
+  
+          ],
+        };
+  
+      
+  
+        echarts.registerMap(mapName, geoJson)
+        const bg = echarts.init(myChart)
+        bg.setOption(option);
+  
+  
+  
+  
+  
+  
+  
+  
+      })
+  
+  
+  
+  })
+  
+  
+  
+  
+  
+  
+  </script>
+  <style lang="scss" scoped>
+  
+  #chart2{
+    transform: rotateX(20deg);
+  }
+  </style>

src/components/login.vue

@@ -0,0 +1,114 @@
+<template>
+    <div class="form">
+        <div class="content">
+            <div style="position: relative;margin-bottom: 3VH;">
+                <input class="ipt" type="text" placeholder="请输入账号" v-model="account">
+                <img src="/static/login/ZH.png" alt="" class="accont-icon">
+                <div style="color: red;" v-show="isAccount">请输入账号</div>
+            </div>
+            <div style="position: relative;margin-bottom: 3VH;">
+                <input class="ipt" placeholder="请输入密码" :type="show ? 'text' : 'password'" v-model="password">
+                <div style="color: red;" v-show="isPassword">请输入密码</div>
+
+                <img src="/static/login/MM.png" alt="" class="accont-icon">
+                <img src="/static/login/KJ.png" v-if="show" alt="" @click="show = false" class="show">
+                <img src="/static/login/BKH.png" v-else alt="" @click="show = true" class="show">
+            </div>
+
+            <img src="/static/login/DL.png" class="btn" alt="" @click="submit">
+        </div>
+
+    </div>
+</template>
+<style lang="scss" scoped>
+.form {
+    width: 35vw;
+    height: 45vh;
+    position: absolute;
+    top: 25vh;
+    right: 10vw;
+    box-sizing: border-box;
+    background: url("/static/login/DLBG.png");
+    background-size: 100% 100%;
+
+    .content {
+        position: absolute;
+        top: 13vh;
+        // background-color: red;
+        left: 10vw;
+
+        .ipt {
+            border: 1px solid #194FA3;
+            padding: 1vh 2vw;
+            background-color: #123266;
+            width: 13VW;
+            outline: none;
+            -webkit-user-select: auto;
+            caret-color: #fff;
+            color: white;
+        }
+
+        input[type="password"]::-ms-reveal {
+            display: none
+        }
+
+        .btn {
+            width: 7vw;
+            cursor: pointer;
+            margin-left: 50%;
+            transform: translateX(-50%);
+        }
+
+        .accont-icon {
+            width: 0.8vw;
+            position: absolute;
+            left: 1vh;
+            top: .8vh;
+        }
+
+        .show {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            width: 1vw;
+            cursor: pointer;
+        }
+    }
+
+
+}
+</style>
+<script setup>
+import { ref, reactive } from "vue"
+import { useRouter } from "vue-router";
+const router =useRouter()
+const show = ref(false)
+const account = ref('')
+const password = ref('')
+const isAccount = ref(false)
+const isPassword = ref(false)
+
+
+const submit = () => {
+
+    if (!account.value) {
+        isAccount.value = true;
+        return
+    }
+    else isAccount.value = false;
+    if (!password.value)
+    
+    { isPassword.value = true; 
+    
+    return}
+    else isPassword.value = false;
+
+localStorage.setItem("TOKEN",15455465465465)
+
+    router.replace('/index')
+
+    // alert(isAccount.value)
+
+}
+
+</script>

src/components/warnDetail.vue

@@ -6,13 +6,13 @@
             <div style="display: flex;justify-content: space-between;flex-direction: column;margin-left: 1vw;">
                 <div style="font-family:FZCYJ ;">告警数据:</div>
                 <div class="warn-li"> <img src="/static/index/PM.png" class="pm-img"> <span class="pm-num">1</span>
-                    <span class="text"> 这是一名jiujs</span>
+                    <span class="text"> 老东赛！</span>
                 </div>
                 <div class="warn-li"> <img src="/static/index/PM.png" class="pm-img"> <span class="pm-num"> 2</span>
-                    <span class="text"> 这是一名jiujs发射点发射点点大夫</span>
+                    <span class="text"> 这是一名后端开发</span>
                 </div>
                 <div class="warn-li"> <img src="/static/index/PM.png" class="pm-img"> <span class="pm-num">3</span> <span
-                        class="text"> 这是一名jiujs啊沙发沙发沙发沙发沙发阿松大沙sdsa发</span>
+                        class="text"> 这是一名地方都是开发建设的咖啡机发动机</span>
                 </div>
             </div>
         </div>

src/router/index.js

@@ -3,6 +3,11 @@ import { createRouter, createWebHistory } from 'vue-router'
 const routes = [
     {
         path: '/',
+        name: 'login',
+        component: () => import('@/components/login.vue'),
+    },
+    {
+        path: '/index',
         name: 'index',
         component: () => import('@/view/index.vue'),
     },
@@ -11,6 +16,8 @@ const routes = [
         name: 'detail',
         component: () => import('@/view/detail.vue'),
     },
+   
+
 
 
 ]

src/view/detail.vue

@@ -33,6 +33,16 @@
         </div>
         <div class="c">
             <div class="top">
+                <div style="display: flex;justify-content: space-between;">
+                    <div class="  c-top-tits"><span class="color-font" @click="router.push('/index')">返回首页</span></div>
+                    <div class="  c-top-tits"><span class="color-font">同谭政地块</span> </div>
+
+
+                    <!-- <img src="/static/detail/FHSY.png" alt=""> -->
+                </div>
+
+                <farmerMap></farmerMap>
+
             </div>
             <div class="bottom">
 
@@ -111,6 +121,12 @@ import * as echarts from 'echarts';
 import warnDetail from "@/components/warnDetail.vue"
 
 import { useRouter } from "vue-router";
+
+import farmerMap from "../components/farmerMap.vue";
+
+
+
+
 const router = useRouter()
 
 
@@ -367,7 +383,23 @@ onMounted(() => {
             margin-top: 1vh;
             width: 49vw;
             height: 61vh;
+            // background-color: RED;
+            background-image: url('/static/index/ZBK.png');
+            background-size: 100% 100%;
+            box-sizing: border-box;
+            padding: 2vh 2vw;
 
+            .c-top-tits {
+
+                padding: 1vh 1vw;
+                font-size: 20px;
+                // border: 1px solid red;
+                cursor: pointer;
+                background-image: url('/static/detail/FHSY.png');
+                background-size: 100% 100%;
+
+
+            }
         }
 
         .bottom {