新增了双屏控制

src/api/index.js

@@ -14,3 +14,8 @@ export const getArea = (data) => {
 export const getStreet = (data) => {
     return axios.get('city/get_street', { params: data });
 }
+
+// 养殖基地
+export const getfarmCount = (data) => {
+    return axios.get('dataview.farm/farmCount ', { params: data });
+}

src/components/areaList.vue

@@ -77,7 +77,7 @@ const show = () => {
 }
 
 defineExpose({
-  open, close, show
+  open, close, show, choseTownFn
 })
 
 const addressRef = ref(null);

src/components/headView.vue

@@ -8,6 +8,7 @@ import axios from "axios";
 import { getStreet } from "@/api/index.js";
 import { useAppStore } from "@/store/app.js";
 import { useUserStore } from "@/store/user.js";
+import { sendMsg } from "@/api/sendMsg.js"
 
 const appStore = useAppStore();
 const userSotre = useUserStore();
@@ -16,6 +17,7 @@ const reload = inject('reload');
 
 const info = reactive({
   address: '泸县',
+  areaName: '泸县',
   pinyin: 'luxian'
 })
 
@@ -34,8 +36,21 @@ const offAreaList = (e) => {
     }
   })
   info.address = e.name;
-  mitt.emit('map_info', info);
+  // mitt.emit('map_info', info);
-  reload();
+  // reload();
+  if(route.query.type=='main') {
+    sendMsg({ channel: 'user-breed-datav', event: 'changMap', data: {
+      areaName: info.areaName,
+      name: e.name
+    }})
+  } else {
+    router.push({
+      path: '/delivery',
+      query: {
+        name: e.name
+      }
+    })
+  }
 }
 
 const router = useRouter()
@@ -43,7 +58,13 @@ const route = useRoute()
 
 const navToDelivery = () => {
   if (route.path == '/') router.push('/delivery');
-  else router.back();
+  else {
+    appStore.setAddress({
+      areaCode: appStore.address.areaCode,
+      streetCode: ''
+    })
+    router.push('/?areaCode='+appStore.address.areaCode);
+  }
 }
 
 let nowTime = ref([]);
@@ -82,6 +103,7 @@ const initList = async () => {
   let area = appStore.area;
   if (userSotre.userInfo.street_code) {
     let data = street.find(item => item.code == appStore.address.streetCode);
+    info.areaName = data?.name;
     info.address = data?.name;
     list.value = [];
     appStore.setAddress({
@@ -90,8 +112,10 @@ const initList = async () => {
     })
   } else {
     let data = area.find(item => item.code == appStore.address.areaCode);
+    info.areaName = data?.name;
     info.address = data?.name;
-    list.value = [data, ...street];
+    // list.value = [data, ...street];
+    list.value = street;
     if (appStore.address.streetCode) {
       data = street.find(item => item.code == appStore.address.streetCode);
       info.address = data?.name;
@@ -121,6 +145,12 @@ const changeTime = (e) => {
 }
 
 onMounted(() => {
+  if (route.query.areaCode) {
+    appStore.setAddress({
+      areaCode: route.query.areaCode,
+      streetCode: route.query.streetCode || "",
+    });
+  }
   initList();
 
   // 每秒钟更新一次时间
@@ -130,13 +160,15 @@ onMounted(() => {
 
   
   mitt.on('changMap', (e)=>{
-    if(e.areaName==info.pinyin){
+    if(e.areaName==info.areaName){
-      router.push({
+      let c = list.value.find(item=>item.name==e.name);
-          path: '/delivery',
+      if(c) areaListRef.value.choseTownFn(c);
-          query: {
+      // router.push({
-            name: e.name
+      //     path: '/delivery',
-          }
+      //     query: {
-      })
+      //       name: e.name
+      //     }
+      // })
     }
   })
 })
@@ -147,7 +179,7 @@ onMounted(() => {
     <div class="left">
       <img
         class="logo item"
-        src="/src/assets/head_img/logo.png"
+        src="/src/assets/head_img/back.png"
         @click="navToDelivery"
       />
       <datePicker multiCalendars range @changeTime="changeTime" />
@@ -155,7 +187,7 @@ onMounted(() => {
       <img class="icon" src="/src/assets/head_img/icon.png" alt="" />
       <div class="item">{{ nowTime[1] }}</div>
     </div>
-    <div class="head-title">吟龙养殖溯源系统可视化大屏</div>
+    <div class="head-title"><img class="logo" src="/src/assets/head_img/logo.png"/> <span>吟龙养殖溯源系统可视化大屏</span></div>
     <div class="right">
       <div class="item" @click.stop="open" style="position: relative">
         <img src="/src/assets/head_img/location.png" alt="" />
@@ -211,7 +243,16 @@ onMounted(() => {
     font-family: "ifonts", sans-serif;
     font-size: 2rem;
     height: 100%;
-    line-height: 50rpx;
+    display: flex;
+    align-items: center;
+    .logo{
+      height: 2.5rem;
+      width: 2.5rem;
+    }
+    span{
+      padding-bottom: 0.5rem;
+      padding-left: 0.5rem;
+    }
   }
   .left {
     align-self: flex-end;

src/layout/index.vue

@@ -2,6 +2,7 @@
 import headView from "@/components/headView.vue";
 import Businesses from "@/components/Businesses.vue";
 import { ref, nextTick, provide, onMounted, onUnmounted } from "vue";
+import mitt from "@/utils/mitt";
 
 const show = ref(true);
 const reload = () => {
@@ -23,10 +24,13 @@ const startReLoad = () => {
 }
 
 onMounted(() => {
+  mitt.on('map_info', e => {
+    reload();
     startReLoad();
     window.addEventListener('mousemove', startReLoad);
     window.addEventListener('keypress', startReLoad);
     window.addEventListener('click', startReLoad);
+  })
 })
 
 onUnmounted(() => {
@@ -40,7 +44,7 @@ onUnmounted(() => {
 <template>
   <dv-full-screen-container class="body">
     <headView></headView>
-    <div style="height: calc(100% - 3.75rem)">
+    <div style="height: calc(100% - 3.75rem);background-color: rgba(0, 0, 0, 0.4);">
       <router-view v-slot="{ Component }">
         <transition name="scale" mode="out-in">
           <component :is="Component"></component>

src/store/app.js

@@ -12,14 +12,13 @@ export const useAppStore = defineStore('app', () => {
 
     const address = ref(JSON.parse(localStorage.getItem('address') || '{}'));
     if (!address.value.areaCode) {
-        address.value = { areaCode: 510524, streetCode: 510524100 };
+        address.value = { areaCode: 510521, streetCode: '' };
     }
 
     // 测试使用的初始化配置
     // address.value = { areaCode: 510524, streetCode: 510524100 };
 
     const setAddress = (e) => {
-        console.log('更新', e);
         address.value.areaCode = e.areaCode;
         address.value.streetCode = e.streetCode;
         localStorage.setItem('address', JSON.stringify(e));

src/view/delivery/components/center.vue

@@ -11,6 +11,9 @@ import gulin from "@/assets/json/gulin.json";
 import jiangyang from "@/assets/json/jiangyang.json";
 import longma from "@/assets/json/longma.json";
 import naxi from "@/assets/json/naxi.json";
+import luxian_geo from "@/utils/luxian_geo.js";
+import xuyong_geo from "@/utils/xuyong_geo.js";
+import jiangyang_geo from "@/utils/jiangyang_geo.js";
 import { useAppStore } from "@/store/app.js";
 import geoJSON from "@/utils/geo.js";
 
@@ -91,7 +94,7 @@ const initMap = () => {
   if (chart == null) {
     chart = echarts.init(echartsRef.value);
   }
-  echarts.registerMap(mapType.name, geoJson);
+  echarts.registerMap(mapType.name, mapType.json);
 
   let option = {
     animation: false,
@@ -271,6 +274,206 @@ const initMap = () => {
       },
     ],
   }
+  option = {
+    geo: [
+      {
+        type: "map",
+        map: mapType.name,
+        aspectScale: 1,
+        zoom: 0.9,
+        layoutCenter: ["50%", "51%"],
+        layoutSize: "110%",
+        roam: false,
+        label: {
+          emphasis: {
+            show: false,
+          },
+        },
+        show: true,
+        map: mapType.name,
+        zoom: 0.9,
+        aspectScale: 1,
+        roam: false,
+        itemStyle: {
+          normal: {
+            areaColor: "transparent",
+            borderColor: "#5AD0E0",
+          },
+          emphasis: {
+            areaColor: {
+              type: "radial", // linear 线性渐变  radial径向渐变
+              x: 0.5, // 0.5为正中心，如果小于渐变中心靠左
+              y: 0.5, // 0.5为正中心，如果小于渐变中心靠上
+              r: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: "#A46759", // 0% 处的颜色
+                },
+                {
+                  offset: 0.1,
+                  color: "#A46759", // 0% 处的颜色
+                },
+
+                {
+                  offset: 1,
+                  color: "#FFB821", // 100% 处的颜色
+                },
+              ],
+            },
+
+            // borderWidth: 0
+          },
+        },
+        tooltip: {
+          trigger: "item",
+          formatter: function (params) {
+            return `<div 
+                    style="background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/def/34876202312131355137572.png');
+                    background-size: 100% 100%;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+                    flex-direction: column;
+                    width: 180px;
+                    height: 80px;">
+                      <div style="font-size: 20px;font-family: 'ifonts';height: 50px;display: flex;
+                    justify-content: center;
+                    align-items: center;">${params.name}</div>
+                    </div>`;
+          },
+          position: "top",
+          // extraCssText: 'background-color: transparent; border: none;pdding: 0;', // 设置额外的 CSS 样式
+          backgroundColor: "rgba(0, 156, 255, 0)", //设置背景颜色
+          borderColor: "rgba(0, 156, 255, 0)",
+          padding: 0,
+          textStyle: {
+            color: "#fff",
+          },
+        },
+      },
+
+      {
+        type: "map",
+        map: mapType.name,
+        zlevel: -1,
+        aspectScale: 1,
+        zoom: 0.9,
+        layoutCenter: ["50%", "51%"],
+        layoutSize: "110%",
+        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: mapType.name,
+        zlevel: -1,
+        aspectScale: 1,
+        zoom: 0.9,
+        layoutCenter: ["50%", "52%"],
+        layoutSize: "110%",
+        roam: false,
+        silent: true,
+
+        itemStyle: {
+          normal: {
+            borderWidth: 1,
+            borderColor: "rgba(17, 149, 216,0.6)",
+            borderColor: "rgba(90, 208, 224,0.5)",
+            shadowColor: "rgba(172, 122, 255,0.5)",
+            shadowOffsetY: 5,
+            shadowBlur: 15,
+            areaColor: "rgba(5,21,35,0.1)",
+          },
+        },
+      },
+
+      // {
+      //   type: "map",
+      //   map: mapType.name,
+      //   zlevel: -2,
+      //   aspectScale: 1,
+      //   zoom: 1,
+      //   layoutCenter: ["50%", "53%"],
+      //   layoutSize: "110%",
+      //   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: mapType.name,
+        zlevel: -4,
+        aspectScale: 1,
+        zoom: 0.9,
+        layoutCenter: ["50%", "53%"],
+        layoutSize: "110%",
+        roam: false,
+        silent: true,
+
+        itemStyle: {
+          normal: {
+            borderWidth: 5,
+            borderColor: "rgba(11, 43, 97,0.8)",
+            // borderColor: "rgba(5,9,57,0.6)",
+            shadowColor: "rgba(29, 111, 165,1)",
+            shadowOffsetY: 10,
+            shadowBlur: 10,
+            areaColor: "rgba(5,21,35,0.1)",
+          },
+        },
+      },
+    ],
+    tooltip: {
+      show: true
+    },
+    color: '#1f7df5',
+    series: [
+      {
+        name: "地点名称",
+        type: "effectScatter",
+        coordinateSystem: "geo",
+        colorBy: 'series',
+        rippleEffect: {
+          period: 4, //动画时间，值越小速度越快
+          brushType: "fill", //波纹绘制方式 stroke, fill
+          scale: 12, //波纹圆环最大限制，值越大波纹越大
+          number: 2,
+        },
+        // 发散点的大小
+        symbolSize: function (val) {
+          return 4;
+          // return val[2] / 10;
+        },
+        data: dataValue,
+      },
+    ],
+  };
   // 使用配置项显示图表
   chart.setOption(option);
 
@@ -283,6 +486,38 @@ const initMap = () => {
   });
 }
 
+const mapInfo = () => {
+  let area = appStore.area.find(
+    (item) => item.code == appStore.address.areaCode
+  );
+  let map;
+  if (area.name == "泸县") map = luxian_geo;
+  if (area.name == "江阳区") map = jiangyang_geo;
+  if (area.name == "叙永县") map = xuyong_geo;
+  map = JSON.parse(JSON.stringify(map));
+  if (appStore.address.streetCode) {
+    let street = appStore.street.find(
+      (item) => item.code == appStore.address.streetCode
+    );
+    initStreetMap(street, map);
+    dataValue = dataValue.filter(
+      (item) => item.street_code == appStore.address.streetCode
+    );
+  } if (route.query.name) {
+    initStreetMap({name: route.query.name}, map);
+  } else {
+    mapType.name = area.name;
+    mapType.json = map;
+  }
+};
+const initStreetMap = (street, map) => {
+  map.features = map.features.filter(
+    (item) => item?.properties?.name == street?.name
+  );
+  mapType.name = street?.name;
+  mapType.json = map;
+};
+
 const filterMap = () => {
   geoJson.features = geoJson.features.filter((item) => {
     return item.properties.name == route.query.name
@@ -299,12 +534,14 @@ onMounted(() => {
     name: '福集镇养殖基地',
     value: [105.36, 29.20]
   }
-  changeType('luxian');
+  // changeType('luxian');
+  mapInfo();
   initDataValue();
   initMap();
   nextTick(() => {
     mitt.on('map_info', e => {
-      changeType(e.pinyin);
+      // changeType(e.pinyin);
+      mapInfo();
       initDataValue();
       initMap();
     })

src/view/index/components/center.vue

@@ -11,6 +11,9 @@ import gulin from "@/assets/json/gulin.json";
 import jiangyang from "@/assets/json/jiangyang.json";
 import longma from "@/assets/json/longma.json";
 import naxi from "@/assets/json/naxi.json";
+import luxian_geo from "@/utils/luxian_geo.js";
+import xuyong_geo from "@/utils/xuyong_geo.js";
+import jiangyang_geo from "@/utils/jiangyang_geo.js";
 import geoJSON from "@/utils/geo.js";
 import { useAppStore } from "@/store/app.js";
 import { sendMsg } from "@/api/sendMsg.js";
@@ -91,7 +94,7 @@ const initMap = () => {
   if (chart == null) {
     chart = echarts.init(echartsRef.value);
   }
-  echarts.registerMap(mapType.name, geoJSON);
+  echarts.registerMap(mapType.name, mapType.json);
 
   let option = {
     animation: false,
@@ -256,13 +259,241 @@ const initMap = () => {
       },
     ],
   }
+  option = {
+    geo: [
+      {
+        type: "map",
+        map: mapType.name,
+        aspectScale: 1,
+        zoom: 1,
+        layoutCenter: ["50%", "51%"],
+        layoutSize: "110%",
+        roam: false,
+        label: {
+          emphasis: {
+            show: false,
+          },
+        },
+        show: true,
+        map: mapType.name,
+        zoom: 1,
+        aspectScale: 1,
+        roam: false,
+        itemStyle: {
+          normal: {
+            areaColor: "transparent",
+            borderColor: "#5AD0E0",
+          },
+          emphasis: {
+            areaColor: {
+              type: "radial", // linear 线性渐变  radial径向渐变
+              x: 0.5, // 0.5为正中心，如果小于渐变中心靠左
+              y: 0.5, // 0.5为正中心，如果小于渐变中心靠上
+              r: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: "#A46759", // 0% 处的颜色
+                },
+                {
+                  offset: 0.1,
+                  color: "#A46759", // 0% 处的颜色
+                },
+
+                {
+                  offset: 1,
+                  color: "#FFB821", // 100% 处的颜色
+                },
+              ],
+            },
+
+            // borderWidth: 0
+          },
+        },
+        tooltip: {
+          trigger: "item",
+          formatter: function (params) {
+            return `<div 
+                    style="background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/def/34876202312131355137572.png');
+                    background-size: 100% 100%;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+                    flex-direction: column;
+                    width: 180px;
+                    height: 80px;">
+                      <div style="font-size: 20px;font-family: 'ifonts';height: 50px;display: flex;
+                    justify-content: center;
+                    align-items: center;">${params.name}</div>
+                    </div>`;
+          },
+          position: "top",
+          // extraCssText: 'background-color: transparent; border: none;pdding: 0;', // 设置额外的 CSS 样式
+          backgroundColor: "rgba(0, 156, 255, 0)", //设置背景颜色
+          borderColor: "rgba(0, 156, 255, 0)",
+          padding: 0,
+          textStyle: {
+            color: "#fff",
+          },
+        },
+      },
+
+      {
+        type: "map",
+        map: mapType.name,
+        zlevel: -1,
+        aspectScale: 1,
+        zoom: 1,
+        layoutCenter: ["50%", "51%"],
+        layoutSize: "110%",
+        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: mapType.name,
+        zlevel: -1,
+        aspectScale: 1,
+        zoom: 1,
+        layoutCenter: ["50%", "52%"],
+        layoutSize: "110%",
+        roam: false,
+        silent: true,
+
+        itemStyle: {
+          normal: {
+            borderWidth: 1,
+            borderColor: "rgba(17, 149, 216,0.6)",
+            borderColor: "rgba(90, 208, 224,0.5)",
+            shadowColor: "rgba(172, 122, 255,0.5)",
+            shadowOffsetY: 5,
+            shadowBlur: 15,
+            areaColor: "rgba(5,21,35,0.1)",
+          },
+        },
+      },
+
+      // {
+      //   type: "map",
+      //   map: mapType.name,
+      //   zlevel: -2,
+      //   aspectScale: 1,
+      //   zoom: 1,
+      //   layoutCenter: ["50%", "53%"],
+      //   layoutSize: "110%",
+      //   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: mapType.name,
+        zlevel: -4,
+        aspectScale: 1,
+        zoom: 1,
+        layoutCenter: ["50%", "53%"],
+        layoutSize: "110%",
+        roam: false,
+        silent: true,
+
+        itemStyle: {
+          normal: {
+            borderWidth: 5,
+            borderColor: "rgba(11, 43, 97,0.8)",
+            // borderColor: "rgba(5,9,57,0.6)",
+            shadowColor: "rgba(29, 111, 165,1)",
+            shadowOffsetY: 10,
+            shadowBlur: 10,
+            areaColor: "rgba(5,21,35,0.1)",
+          },
+        },
+      },
+    ],
+    tooltip: {
+      trigger: 'item',
+      formatter: function (params) {
+        // console.log(params);
+        if (params.data) {
+          return `<div 
+                    style="background-image: url(\'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/34876202312131355137572.png\');
+                    background-size: 100% 100%;
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+                    flex-direction: column;
+                    width: 180px;
+                    height: 80px;">
+                      <div style="font-size: 12px;height: 15px;">基地名称</div>
+                      <div style="font-size: 15px;font-family: 'ifonts';height: 50px;display: flex;
+                    justify-content: center;
+                    align-items: center;">${params.data.name}</div>
+                    </div>`;
+        } else return '';
+      },
+      position: 'top',
+      // extraCssText: 'background-color: transparent; border: none;pdding: 0;', // 设置额外的 CSS 样式
+      backgroundColor: 'rgba(0, 156, 255, 0)', //设置背景颜色
+      borderColor: "rgba(0, 156, 255, 0)",
+      padding: 0,
+      textStyle: {
+        color: '#fff'
+      }
+    },
+    color: '#1f7df5',
+    series: [
+      {
+        name: "地点名称",
+        type: "effectScatter",
+        coordinateSystem: "geo",
+        colorBy: 'series',
+        rippleEffect: {
+          period: 4, //动画时间，值越小速度越快
+          brushType: "fill", //波纹绘制方式 stroke, fill
+          scale: 12, //波纹圆环最大限制，值越大波纹越大
+          number: 2,
+        },
+        // 发散点的大小
+        symbolSize: function (val) {
+          return 4;
+          // return val[2] / 10;
+        },
+        data: dataValue,
+      },
+    ],
+    
+  };
   // 使用配置项显示图表
   chart.setOption(option);
   
   chart.off('click') // 防止单次点击执行多次事件
   chart.on('click', function (params) {
-    if (params.componentType === 'series') {
+    console.log('点击',params);
-      if (params.seriesType === 'map') {
+    if (params.componentType === 'geo') {
       if(route.query.type=='main') {
           sendMsg({ channel: 'user-breed-datav', event: 'changMap', data: {
             areaName: mapType.name,
@@ -277,23 +508,52 @@ const initMap = () => {
           })
         }
     }
-    }
   });
 }
 
+const mapInfo = () => {
+  let area = appStore.area.find(
+    (item) => item.code == appStore.address.areaCode
+  );
+  let map;
+  if (area.name == "泸县") map = luxian_geo;
+  if (area.name == "江阳区") map = jiangyang_geo;
+  if (area.name == "叙永县") map = xuyong_geo;
+  map = JSON.parse(JSON.stringify(map));
+  if (appStore.address.streetCode) {
+    let street = appStore.street.find(
+      (item) => item.code == appStore.address.streetCode
+    );
+    initStreetMap(street, map);
+    dataValue = dataValue.filter(
+      (item) => item.street_code == appStore.address.streetCode
+    );
+  } else {
+    mapType.name = area.name;
+    mapType.json = map;
+  }
+};
+const initStreetMap = (street, map) => {
+  map.features = map.features.filter(
+    (item) => item?.properties?.name == street?.name
+  );
+  mapType.name = street?.name;
+  mapType.json = map;
+};
 
 onMounted(() => {
   dataValue = props.list;
-  changeType('luxian');
+  // changeType('luxian');
+  mapInfo();
   initDataValue();
   initMap();
-  nextTick(() => {
+  // nextTick(() => {
-    mitt.on('map_info', e => {
+  //   mitt.on('map_info', e => {
-      changeType(e.pinyin);
+  //     changeType(e.pinyin);
-      initDataValue();
+  //     initDataValue();
-      initMap();
+  //     initMap();
-    })
+  //   })
-  })
+  // })
 })
 
 </script>

vite.config.js

@@ -6,6 +6,7 @@ import path from 'path';
 export default defineConfig({
   plugins: [vue()],
   server: {
+    port: '8788',
     host: '0.0.0.0',
   },
   optimizeDeps: {