更新

src/api/api.js

@@ -16,7 +16,27 @@ export const getBreedTypeCount = (data) => {
     return axios.get('dataview.farm/breedTypeCount', { params: data });
 }
 
-// 养殖产品溯源
+// 监测设备在线/警告统计
 export const getDeviceCount = (data) => {
     return axios.get('dataview.device/deviceCount', { params: data });
 }
+
+// 基地设备警告
+export const getDeviceAlarmCount = (data) => {
+    return axios.get('dataview.device/deviceAlarmCount', { params: data });
+}
+
+// 具体基地监测设备在线/警告统计
+export const getFarmDeviceCount = (data) => {
+    return axios.get('dataview.farm/deviceCount', { params: data });
+}
+
+// 具体基地设备警告
+export const getFarmDeviceAlarmCount = (data) => {
+    return axios.get('dataview.farm/deviceAlarmCount', { params: data });
+}
+
+// 具体基地设备警告
+export const getFarmInfo = (data) => {
+    return axios.get('dataview.farm/farmInfo', { params: data });
+}

src/components/headView.vue

@@ -56,15 +56,25 @@ const offAreaList = (e) => {
 const router = useRouter()
 const route = useRoute()
 
-const navToDelivery = () => {
+const navTo = () => {
-  if (route.path == '/') router.push('/delivery');
+  if (route.path == '/') return location.reload();
-  else {
+  else if(route.path == '/indexc'){
     appStore.setAddress({
       areaCode: appStore.address.areaCode,
       streetCode: ''
     })
     router.push('/?areaCode='+appStore.address.areaCode);
   }
+  else if(route.path == '/delivery') {
+    router.push({
+      path: '/indexc',
+      query: {
+        areaCode: route.query.areaCode,
+        streetCode: route.query.streetCode,
+        name: route.query.name
+      }
+    })
+  }
 }
 
 let nowTime = ref([]);
@@ -180,7 +190,7 @@ onMounted(() => {
       <img
         class="logo item"
         src="/src/assets/head_img/back.png"
-        @click="navToDelivery"
+        @click="navTo"
       />
       <datePicker multiCalendars range @changeTime="changeTime" />
       <!-- <div class="item">{{ nowTime[0] }}</div> -->

src/router/index.js

@@ -11,6 +11,11 @@ const routes = [
                 name: '',
                 component: () => import('../view/index/index.vue')
             },
+            {
+                path: '/indexc',
+                name: 'indexc',
+                component: () => import('../view/indexc/index.vue')
+            },
             {
                 path: '/delivery',
                 name: 'delivery',

src/view/delivery/components/bottom.vue

@@ -1,17 +1,42 @@
 <script setup>
 import { ref, reactive, onMounted } from "vue"
+import { getFarmDeviceCount, getFarmDeviceAlarmCount } from "@/api/api.js"
+import { useAppStore } from "@/store/app.js";
+import { useRoute } from "vue-router";
+
+const appStore = useAppStore();
+const route = useRoute();
+
+const leftInfo = ref({
+  offline: 0,
+  online: 0,
+  total: 0,
+  todayAlarmCount: 0,
+  alarmCount: 0
+})
+const initDeviceCount = ()=>{
+  getFarmDeviceCount({
+    areaCode: appStore.address.areaCode,
+    streetCode: appStore.address.streetCode || route.query.streetCode,
+    id: route.query.id || undefined
+  }).then(res=>{
+    Object.keys(leftInfo.value).forEach(key=>{
+      if(res.data[key]) leftInfo.value[key] = res.data[key];
+    })
+  })
+}
+
 
 const initData = (data) => {
   let arr = [];
-  for (let i = 0; i < 10; i++) {
+  for (let i = 0; i < data.length; i++) {
     arr.push(
       [
-        `${i + 1}`,
+        `${data[i].code||'-'}`,
-        `-`,
+        `${data[i].name||'-'}`,
-        `-`,
+        `${data[i].create_time||'-'}`,
-        `-`,
+        `${data[i].alarm_value||'-'}`,
-        `-`,
+        `${data[i].alarm_reason||'-'}`,
-        `-`,
         `<span class="btn">查看详情></span>`,
       ]
     )
@@ -27,7 +52,6 @@ const list = reactive({
     `设备名称`,
     `警告时间`,
     `警告数据`,
-    `设备图片`,
     `警告原因`,
     `解决方案`,
   ],
@@ -36,19 +60,35 @@ const list = reactive({
   headerBGC: 'rgba(0, 156, 255, 0.4)',
   oddRowBGC: 'rgba(91, 219, 246, 0.10)',
   evenRowBGC: '',
+  columnWidth: [100,150,200],
   align: 'center',
-  rowNum: 9
+  rowNum: 6
 })
 
 const show = ref(false);
+const showInfo = ref({});
 const clickList = (e) => {
-  console.log(e);
+  if(e.columnIndex==5||e.columnIndex==6){
-  console.log(e.rowIndex);
+    showInfo.value = deviceList.value[e.rowIndex];
     show.value = true;
+  }
+}
+
+const deviceList = ref([]);
+const initDeviceAlarmCount = ()=>{
+  getFarmDeviceAlarmCount({
+    areaCode: appStore.address.areaCode,
+    streetCode: appStore.address.streetCode || route.query.streetCode,
+    id: route.query.id || undefined
+  }).then(res=>{
+    deviceList.value = res.data.list;
+    initData(res.data.list);
+  })
 }
 
 onMounted(() => {
-  initData();
+  initDeviceCount();
+  initDeviceAlarmCount();
 })
 
 </script>
@@ -65,34 +105,34 @@ onMounted(() => {
           <img src="/src/assets/index_img/ball.png" />
           <div class="count">
             <div>设备总数</div>
-            <div>12</div>
+            <div>{{ leftInfo.total }}</div>
           </div>
         </div>
         <div class="ball1 ball-item">
           <div class="count">
             <img src="/src/assets/index_img/ball1.png" />
-            <span>{{ 6 }}</span>
+            <span>{{ leftInfo.offline }}</span>
           </div>
           离线设备
         </div>
         <div class="ball2 ball-item">
           <div class="count">
             <img src="/src/assets/index_img/ball2.png" />
-            <span>{{ 6 }}</span>
+            <span>{{ leftInfo.todayAlarmCount }}</span>
           </div>
           今日警告数
         </div>
         <div class="ball3 ball-item">
           <div class="count">
             <img src="/src/assets/index_img/ball1.png" />
-            <span>{{ 6 }}</span>
+            <span>{{ leftInfo.online }}</span>
           </div>
           在线设备
         </div>
         <div class="ball4 ball-item">
           <div class="count">
             <img src="/src/assets/index_img/ball2.png" />
-            <span>{{ 6 }}</span>
+            <span>{{ leftInfo.alarmCount }}</span>
           </div>
           警告总数
         </div>
@@ -100,7 +140,7 @@ onMounted(() => {
     </div>
     <div class="view box2">
       <div class="box-title">
-        <div class="text">养殖基地视频监控</div>
+        <div class="text">养殖基地设备警告</div>
         <div class="bg"></div>
       </div>
       <div class="c-box">
@@ -121,29 +161,30 @@ onMounted(() => {
         <div class="info">
           <div class="info-item">
             <div class="tips">设备编号:</div>
-            <div>25566333</div>
+            <div>{{ showInfo.code || '-' }}</div>
           </div>
           <div class="info-item">
             <div class="tips">设备名称:</div>
-            <div>甲烷监测设备</div>
+            <div>{{ showInfo.name || '-' }}</div>
           </div>
           <div class="info-item">
-            <div class="tips">警告事件:</div>
+            <div class="tips">警告时间:</div>
-            <div>2023-12-7 12:30</div>
+            <div>{{ showInfo.create_time || '-' }}</div>
           </div>
         </div>
         <div class="info">
           <div class="info-item">
             <div class="tips">设备图片:</div>
-            <img src="/src/assets/index_img/icon2.png" alt="" />
+            <img class="img" :src="showInfo.image" alt="" />
           </div>
           <div class="info-item">
             <div class="tips">警告原因:</div>
-            <div>甲烷含量超标, 同时浓度也超标了</div>
+            <div>{{ showInfo.alarm_reason || '-' }}</div>
           </div>
           <div class="info-item" style="flex: 1">
             <div class="tips">警告数据:</div>
-            <div>甲烷含量>1000ppm 浓度>120</div>
+            <div v-if="(typeof showInfo.alarm_value == 'object')">{{ showInfo.alarm_value.join(', ') || '-' }}</div>
+            <div v-else>{{ showInfo.alarm_value || '-' }}</div>
           </div>
         </div>
         <div class="info">
@@ -151,10 +192,9 @@ onMounted(() => {
             <div class="tips">解决方案:</div>
             <div class="list">
               <div>
-                确保良好的通风系统：提供良好的通风以排除甲烷气体。这可以包括安装有效的排气扇、通风管道和通风设备，以确保空气流动。
+                {{ showInfo.alarm_resolution || '-' }}
-                检修和维护设备：定期检查和维护可能产生甲烷泄漏的设备，如管道、阀门、连接件等。确保它们的密封性和操作正常，及时修复任何泄漏。
               </div>
-              <div>1.优化饲养管理 2.粪便处理设施改…</div>
+              <!-- <div>1.优化饲养管理 2.粪便处理设施改…</div> -->
             </div>
           </div>
         </div>
@@ -339,6 +379,12 @@ onMounted(() => {
           text-align: start;
           padding-right: 0.4rem;
           box-sizing: border-box;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-line-clamp: 3; /* 显示的行数 */
+          line-height: 1.5rem; /* 行高 */
         }
         .tips {
           flex-shrink: 0;
@@ -346,6 +392,10 @@ onMounted(() => {
         .list {
           padding-bottom: 4rem;
         }
+        .img{
+          height: 4.5rem;
+          width: 4.5rem;
+        }
       }
     }
   }

src/view/delivery/components/center.vue

@@ -14,6 +14,10 @@ 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 longma_geo from "@/utils/longma_geo.js";
+import gulin_geo from "@/utils/gulin_geo.js";
+import hejiang_geo from "@/utils/hejiang_geo.js";
+import naxi_geo from "@/utils/naxi_geo.js";
 import { useAppStore } from "@/store/app.js";
 import geoJSON from "@/utils/geo.js";
 
@@ -499,6 +503,10 @@ const mapInfo = () => {
   if (area.name == "泸县") map = luxian_geo;
   if (area.name == "江阳区") map = jiangyang_geo;
   if (area.name == "叙永县") map = xuyong_geo;
+  if (area.name == "龙马潭区") map = longma_geo;
+  if (area.name == "纳溪区") map = naxi_geo;
+  if (area.name == "合江县") map = hejiang_geo;
+  if (area.name == "古蔺县") map = gulin_geo;
   map = JSON.parse(JSON.stringify(map));
   if (appStore.address.streetCode) {
     let street = appStore.street.find(

src/view/delivery/components/left.vue

@@ -1,18 +1,31 @@
 <script setup>
 import { ref, reactive, onMounted } from "vue"
+import { getFarmInfo } from "@/api/api.js"
 import * as echarts from "echarts"
+import videoFlv from "@/components/videoFlv.vue";
+import { useAppStore } from "@/store/app.js";
+import { useRoute } from "vue-router";
+
+const appStore = useAppStore();
+const route = useRoute();
 
 const circleRef = ref(null);
 const initCircle = () => {
   const echart = echarts.init(circleRef.value);
   let color = ['#00A8FF', '#4B5FDB', '#00FFCB', '#5BDBF6'];
 
-  let data = [
+  // let data = [
-    { value: 400, name: '本地鸡' },
+  //   { value: 400, name: '本地鸡' },
-    { value: 435, name: '鸭' },
+  //   { value: 435, name: '鸭' },
-    { value: 580, name: '鹅' },
+  //   { value: 580, name: '鹅' },
-    { value: 884, name: '猪' },
+  //   { value: 884, name: '猪' },
-  ]
+  // ]
+  let data = breedTypeRows.value.map(item=>{
+    return {
+      name: item.name,
+      value: item.animalCount
+    }
+  });
   let option = {
     tooltip: {
       trigger: "item",
@@ -109,6 +122,14 @@ const initMap = () => {
     return color
   }
 
+  let dataText = [];
+  let dataValue = [];
+
+  breedTypeRows.value.forEach(item=>{
+    dataText.push(item.name);
+    dataValue.push(item.animalCount);
+  })
+
   let option = {
     grid: {
       left: '12%',
@@ -144,7 +165,7 @@ const initMap = () => {
       }
     },
     xAxis: {
-      data: ['鸡', '鸭', '鹅', '猪'],
+      data: dataText,
       axisTick: {
         show: false
       },
@@ -215,16 +236,32 @@ const initMap = () => {
             opacity: 1
           }
         },
-        data: [726, 622, 820, 454],
+        data: dataValue,
         z: 10
       }]
   };
   echart.setOption(option)
 }
 
-onMounted(() => {
+const farmInfo = ref({});
+const breedTypeRows = ref([]);
+const getInfo = ()=>{
+  getFarmInfo({
+    areaCode: appStore.address.areaCode,
+    streetCode: appStore.address.streetCode || route.query.streetCode,
+    id: route.query.id || undefined
+  }).then(res=>{
+    farmInfo.value = res.data.farmInfo;
+    breedTypeRows.value = res.data.breedTypeRows;
     initCircle();
     initMap();
+  })
+}
+
+onMounted(() => {
+  getInfo();
+  // initCircle();
+  // initMap();
 })
 </script>
 
@@ -232,12 +269,15 @@ onMounted(() => {
   <div class="box">
     <div class="view box1">
       <div class="box-title">
-        <div class="text">泸县原生态养殖基地</div>
+        <div class="text">{{ farmInfo.farm_name }}</div>
         <div class="bg"></div>
       </div>
       <div class="c-box">
-        <img src="/src/assets/index_img/video.png" />
+        <videoFlv
-        <div class="name">泸县原生态养殖基地</div>
+            class="img"
+            :url="farmInfo.video_url"
+          />
+        <div class="name">{{ farmInfo.farm_name }}</div>
       </div>
     </div>
     <div class="view box2">
@@ -301,7 +341,7 @@ onMounted(() => {
       flex-direction: column;
       justify-content: space-evenly;
       align-items: center;
-      img {
+      .img {
         height: 76%;
         width: 96%;
       }

src/view/index/components/bottom.vue

@@ -1,14 +1,18 @@
 <script setup>
 import { ref, reactive, onMounted } from "vue"
-import { getDeviceCount } from "@/api/api.js"
+import { getDeviceCount, getDeviceAlarmCount } from "@/api/api.js"
 import { useAppStore } from "@/store/app.js";
+import { useRoute } from "vue-router";
 
 const appStore = useAppStore();
+const route = useRoute();
 
 const leftInfo = ref({
   offline: 0,
   online: 0,
-  total: 0
+  total: 0,
+  todayAlarmCount: 0,
+  alarmCount: 0
 })
 const initDeviceCount = ()=>{
   getDeviceCount({
@@ -24,15 +28,14 @@ const initDeviceCount = ()=>{
 
 const initData = (data) => {
   let arr = [];
-  for (let i = 0; i < 10; i++) {
+  for (let i = 0; i < data.length; i++) {
     arr.push(
       [
-        `${i + 1}`,
+        `${data[i].code||'-'}`,
-        `-`,
+        `${data[i].name||'-'}`,
-        `-`,
+        `${data[i].create_time||'-'}`,
-        `-`,
+        `${data[i].alarm_value||'-'}`,
-        `-`,
+        `${data[i].alarm_reason||'-'}`,
-        `-`,
         `<span class="btn">查看详情></span>`,
       ]
     )
@@ -48,7 +51,6 @@ const list = reactive({
     `设备名称`,
     `警告时间`,
     `警告数据`,
-    `设备图片`,
     `警告原因`,
     `解决方案`,
   ],
@@ -57,20 +59,35 @@ const list = reactive({
   headerBGC: 'rgba(0, 156, 255, 0.4)',
   oddRowBGC: 'rgba(91, 219, 246, 0.10)',
   evenRowBGC: '',
+  columnWidth: [100,150,200],
   align: 'center',
-  rowNum: 9
+  rowNum: 6
 })
 
 const show = ref(false);
+const showInfo = ref({});
 const clickList = (e) => {
-  console.log(e);
+  if(e.columnIndex==5||e.columnIndex==6){
-  console.log(e.rowIndex);
+    showInfo.value = deviceList.value[e.rowIndex];
     show.value = true;
+  }
+}
+
+const deviceList = ref([]);
+const initDeviceAlarmCount = ()=>{
+  getDeviceAlarmCount({
+    areaCode: appStore.address.areaCode,
+    streetCode: appStore.address.streetCode || route.query.streetCode,
+    id: route.query.id || undefined
+  }).then(res=>{
+    deviceList.value = res.data.list;
+    initData(res.data.list);
+  })
 }
 
 onMounted(() => {
-  initData();
   initDeviceCount();
+  initDeviceAlarmCount();
 })
 
 </script>
@@ -100,7 +117,7 @@ onMounted(() => {
         <div class="ball2 ball-item">
           <div class="count">
             <img src="/src/assets/index_img/ball2.png" />
-            <span>{{ 6 }}</span>
+            <span>{{ leftInfo.todayAlarmCount }}</span>
           </div>
           今日警告数
         </div>
@@ -114,7 +131,7 @@ onMounted(() => {
         <div class="ball4 ball-item">
           <div class="count">
             <img src="/src/assets/index_img/ball2.png" />
-            <span>{{ 6 }}</span>
+            <span>{{ leftInfo.alarmCount }}</span>
           </div>
           警告总数
         </div>
@@ -122,7 +139,7 @@ onMounted(() => {
     </div>
     <div class="view box2">
       <div class="box-title">
-        <div class="text">养殖基地视频监控</div>
+        <div class="text">养殖基地设备警告</div>
         <div class="bg"></div>
       </div>
       <div class="c-box">
@@ -143,29 +160,30 @@ onMounted(() => {
         <div class="info">
           <div class="info-item">
             <div class="tips">设备编号:</div>
-            <div>25566333</div>
+            <div>{{ showInfo.code || '-' }}</div>
           </div>
           <div class="info-item">
             <div class="tips">设备名称:</div>
-            <div>甲烷监测设备</div>
+            <div>{{ showInfo.name || '-' }}</div>
           </div>
           <div class="info-item">
-            <div class="tips">警告事件:</div>
+            <div class="tips">警告时间:</div>
-            <div>2023-12-7 12:30</div>
+            <div>{{ showInfo.create_time || '-' }}</div>
           </div>
         </div>
         <div class="info">
           <div class="info-item">
             <div class="tips">设备图片:</div>
-            <img src="/src/assets/index_img/icon2.png" alt="" />
+            <img class="img" :src="showInfo.image" alt="" />
           </div>
           <div class="info-item">
             <div class="tips">警告原因:</div>
-            <div>甲烷含量超标, 同时浓度也超标了</div>
+            <div>{{ showInfo.alarm_reason || '-' }}</div>
           </div>
           <div class="info-item" style="flex: 1">
             <div class="tips">警告数据:</div>
-            <div>甲烷含量>1000ppm 浓度>120</div>
+            <div v-if="(typeof showInfo.alarm_value == 'object')">{{ showInfo.alarm_value.join(', ') || '-' }}</div>
+            <div v-else>{{ showInfo.alarm_value || '-' }}</div>
           </div>
         </div>
         <div class="info">
@@ -173,10 +191,9 @@ onMounted(() => {
             <div class="tips">解决方案:</div>
             <div class="list">
               <div>
-                确保良好的通风系统：提供良好的通风以排除甲烷气体。这可以包括安装有效的排气扇、通风管道和通风设备，以确保空气流动。
+                {{ showInfo.alarm_resolution || '-' }}
-                检修和维护设备：定期检查和维护可能产生甲烷泄漏的设备，如管道、阀门、连接件等。确保它们的密封性和操作正常，及时修复任何泄漏。
               </div>
-              <div>1.优化饲养管理 2.粪便处理设施改…</div>
+              <!-- <div>1.优化饲养管理 2.粪便处理设施改…</div> -->
             </div>
           </div>
         </div>
@@ -361,6 +378,12 @@ onMounted(() => {
           text-align: start;
           padding-right: 0.4rem;
           box-sizing: border-box;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          -webkit-line-clamp: 3; /* 显示的行数 */
+          line-height: 1.5rem; /* 行高 */
         }
         .tips {
           flex-shrink: 0;
@@ -368,6 +391,10 @@ onMounted(() => {
         .list {
           padding-bottom: 4rem;
         }
+        .img{
+          height: 4.5rem;
+          width: 4.5rem;
+        }
       }
     }
   }

src/view/index/components/center.vue

@@ -14,7 +14,10 @@ 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 longma_geo from "@/utils/longma_geo.js";
+import gulin_geo from "@/utils/gulin_geo.js";
+import hejiang_geo from "@/utils/hejiang_geo.js";
+import naxi_geo from "@/utils/naxi_geo.js";
 import { useAppStore } from "@/store/app.js";
 import { sendMsg } from "@/api/sendMsg.js";
 
@@ -500,9 +503,18 @@ const initMap = () => {
             name: params.name
           }})
         } else {
-          router.push({
+          // router.push({
-            path: '/delivery',
+          //   path: '/delivery',
+          //   query: {
+          //     name: params.name
+          //   }
+          // })
+          let obj = appStore.street.find(item=>item.name==params.name);
+          if(obj) router.push({
+            path: '/indexc',
             query: {
+              areaCode: appStore.address.areaCode,
+              streetCode: obj.code,
               name: params.name
             }
           })
@@ -519,6 +531,10 @@ const mapInfo = () => {
   if (area.name == "泸县") map = luxian_geo;
   if (area.name == "江阳区") map = jiangyang_geo;
   if (area.name == "叙永县") map = xuyong_geo;
+  if (area.name == "龙马潭区") map = longma_geo;
+  if (area.name == "纳溪区") map = naxi_geo;
+  if (area.name == "合江县") map = hejiang_geo;
+  if (area.name == "古蔺县") map = gulin_geo;
   map = JSON.parse(JSON.stringify(map));
   if (appStore.address.streetCode) {
     let street = appStore.street.find(

src/view/index/components/left.vue

@@ -35,6 +35,7 @@ const initBreedTypeCount = ()=>{
     streetCode: appStore.address.streetCode
   }).then((res)=>{
     breedTypeRows.value = res.data.breedTypeRows;
+    if(res.data.animalList.length>6) res.data.animalList = res.data.animalList.slice(0,6);
     animalList.value = res.data.animalList;
     animalList.value.forEach(item=>{
       QRCode.toDataURL('d_' + item.sn, {
@@ -264,7 +265,7 @@ onMounted(() => {
         </div>
         <div class="tab-item">
           <img src="/src/assets/index_img/icon1.png" />
-          <div>占地规模</div>
+          <div>养殖规模</div>
           <div class="count">{{ farmInfo.totalScale }}亩</div>
         </div>
       </div>

src/view/indexc/components/center2.vue

@@ -0,0 +1,629 @@
+<script setup>
+import { onMounted, reactive, ref, inject, nextTick } from "vue";
+import * as echarts from 'echarts';
+import { useRoute, useRouter } from "vue-router";
+import ani from "@/components/ani.vue";
+import mitt from "@/utils/mitt";
+import luxian from "@/assets/json/luxian.json";
+import hejiang from "@/assets/json/hejiang.json";
+import xuyong from "@/assets/json/xuyong.json";
+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 longma_geo from "@/utils/longma_geo.js";
+import gulin_geo from "@/utils/gulin_geo.js";
+import hejiang_geo from "@/utils/hejiang_geo.js";
+import naxi_geo from "@/utils/naxi_geo.js";
+import { useAppStore } from "@/store/app.js";
+import geoJSON from "@/utils/geo.js";
+
+const appStore = useAppStore();
+
+const route = useRoute();
+const router = useRouter();
+
+let geoJson = JSON.parse(JSON.stringify(geoJSON));
+
+const props = defineProps({
+  list: {
+    type: Object,
+    default: () => []
+  }
+})
+
+const mapType = reactive({
+  name: '',
+  json: ''
+})
+
+const changeType = (name = 'luxian') => {
+  mapType.name = name;
+  if (name == 'luxian') mapType.json = luxian;
+  if (name == 'hejiang') mapType.json = hejiang;
+  if (name == 'xuyong') mapType.json = xuyong;
+  if (name == 'gulin') mapType.json = gulin;
+  if (name == 'jiangyang') mapType.json = jiangyang;
+  if (name == 'longma') mapType.json = longma;
+  if (name == 'naxi') mapType.json = naxi;
+}
+
+let dataValue = []
+
+const customFormatter = (params) => {
+  // console.log(params.data);
+  // return `{img|${params.data.street_name}}\n{t|店铺${params.data.mer_count}个, 团队${params.data.service_group_count}个}`
+  return ''
+}
+
+const initDataValue = () => {
+  dataValue.forEach(item => {
+    item.label = {
+      show: true, // 显示标签
+      formatter: customFormatter, // 标签内容，这里使用{name}表示数据项的name属性
+      fontSize: 12, // 字体大小
+      fontWeight: 'bold', // 字体粗细
+      color: '#fff', // 字体颜色
+      offset: [-50, -40], // 标签偏移量，可根据需要调整
+      rich: {
+        img: {
+          backgroundColor: {
+            image: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/205f0202311291015185408.png'
+          },
+          height: 40,
+          width: 140,
+          color: '#fff',
+          fontSize: 14,
+          lineHeight: 14,
+          fontFamily: 'ifonts',
+          align: 'center',
+          padding: [0, 0, 20, 0]
+        },
+        t: {
+          fontSize: 10,
+          align: 'center'
+        }
+      }
+    };
+  })
+}
+
+const echartsRef = ref(null);
+let chart = null;
+
+const initMap = () => {
+  // 基于DOM元素初始化echarts实例
+  if (chart == null) {
+    chart = echarts.init(echartsRef.value);
+  }
+  echarts.registerMap(mapType.name, mapType.json);
+
+  let option = {
+    animation: false,
+    title: {
+      text: route.query.name,
+      textStyle: {
+        color: "#fff",
+        fontSize: 22
+      },
+      top: '10%',
+      left: '10%'
+    },
+    //geo方式地理坐标系组件。
+    geo: [
+      {
+        map: mapType.name,
+        zoom: 1.0,
+        label: {
+          show: false,
+        },
+        //   选中状态下的多边形和标签样式
+        emphasis: {
+          itemStyle: {
+            // color: '#546686', //地图背景色
+            borderColor: '#fff', //省市边界线00fcff 516a89
+            borderWidth: 1,
+          },
+          label: {
+            color: '#fff'
+          }
+        },
+        emphasis: {
+          disabled: true
+        },
+        select: {
+          disabled: true
+        },
+        // aspectScale:0.75, //长宽比
+        //   roam: true, //是否允许缩放
+        itemStyle: {
+          normal: {
+            // color: '#546686', //地图背景色    
+            borderColor: '#fff', //省市边界线00fcff 516a89
+            borderWidth: 1,
+            areaColor: "#3f5171",
+            shadowColor: "#5bdbf6",
+            shadowOffsetX: 5,
+            shadowOffsetY: 10,
+            // shadowBlur: 2
+            shadowBlur: 20,
+          },
+        },
+      },
+      //第一层投影
+      {
+        map: mapType.name,
+        zlevel: -1,
+        zoom: 1.01, //当前视角的缩放比例
+        roam: false, //是否开启平游或缩放
+        show: true,
+        tooltip: {
+          show: false  // 取消鼠标移上去时的文字提示
+        },
+        label: {
+          show: false
+        },
+        emphasis: {
+          disabled: true
+        },
+        select: {
+          disabled: true
+        },
+        itemStyle: {
+          normal: {
+            borderJoin: "round",
+            borderColor: "rgba(176,228,252,1)",
+            borderWidth: 3,
+            areaColor: "rgba(133,188,232,1)",
+            shadowColor: "rgba(133,188,232,.7)",
+            shadowOffsetX: 0,
+            shadowOffsetY: 0,
+            shadowBlur: 25,
+          },
+          emphasis: {
+            show: false,
+          },
+        },
+      },
+    ],
+    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'
+      }
+    },
+    series: [
+      {
+        type: "map",
+        map: mapType.name,
+        label: {
+          emphasis: {
+            color: 'rgba(0,0,0,0)'  // 鼠标经过时的文字颜色
+          }
+        },
+        emphasis: {
+          disabled: false,
+        },
+        select: {
+          disabled: true
+        },
+        itemStyle: {
+          normal: {
+            areaColor: "#3f5171",
+            borderColor: "#5bdbf6",
+            borderWidth: 1,
+          },
+          emphasis: {
+            areaColor: '#0680ca',  // 鼠标经过时的背景色
+          }
+        },
+      },
+      {
+        name: "",
+        type: "scatter",
+        coordinateSystem: "geo",
+        data: dataValue,
+        symbol: "image://https://lihai001.oss-cn-chengdu.aliyuncs.com/def/0a86a202312081638007996.png",
+        symbolSize: [30, 45],
+        hoverSymbolSize: [45, 60],
+        label: {
+          formatter: "",
+          position: "center",
+          show: false
+        },
+        // tooltip: {
+        //   formatter (value) {
+        //     console.log(value);
+        //     return "";
+        //   },
+        //   show: true
+        // },
+        // encode: {
+        //   value: 2
+        // },
+        // itemStyle: {
+        //   color: "#0efacc"
+        // },
+        emphasis: {
+          label: {
+            show: false
+          }
+        }
+      },
+    ],
+  }
+  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) {
+            // 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: center;
+                        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: 40px;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'
+          }
+        },
+      },
+
+      {
+        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: "scatter",
+        coordinateSystem: "geo",
+        data: dataValue,
+        symbol: "image://https://lihai001.oss-cn-chengdu.aliyuncs.com/def/0a86a202312081638007996.png",
+        symbolSize: [30, 45],
+        hoverSymbolSize: [45, 60],
+        label: {
+          formatter: "",
+          position: "center",
+          show: false
+        },
+        emphasis: {
+          label: {
+            show: false
+          }
+        }
+      },
+    ],
+  };
+  // 使用配置项显示图表
+  chart.setOption(option);
+
+  // 监听标记点的点击事件
+  chart.on('click', function (params) {
+    if (params.seriesType === 'scatter') {
+      // 处理你的点击事件逻辑
+      console.log('点击了', params.data.name);
+      router.push({
+        path: '/delivery',
+        query: {
+          areaCode: route.query.areaCode,
+          streetCode: route.query.streetCode,
+          name: route.query.name
+        }
+      })
+    }
+  });
+}
+
+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;
+  if (area.name == "龙马潭区") map = longma_geo;
+  if (area.name == "纳溪区") map = naxi_geo;
+  if (area.name == "合江县") map = hejiang_geo;
+  if (area.name == "古蔺县") map = gulin_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
+  })
+}
+
+onMounted(() => {
+
+  if (route.query.name) {
+    filterMap()
+  }
+  dataValue = props.list;
+  dataValue[0] = {
+    name: '福集镇养殖基地',
+    value: [105.36, 29.20]
+  }
+  // changeType('luxian');
+  mapInfo();
+  initDataValue();
+  initMap();
+  nextTick(() => {
+    mitt.on('map_info', e => {
+      // changeType(e.pinyin);
+      mapInfo();
+      initDataValue();
+      initMap();
+    })
+  })
+})
+
+</script>
+
+<template>
+  <div class="map">
+    <div class="map-a">
+      <ani class="ani" />
+    </div>
+    <div class="map-e">
+      <div class="echarts" ref="echartsRef"></div>
+    </div>
+    <div class="map-t">{{ route.query.name }}</div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.map {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+
+  /* background-color: rgba($color: #fff, $alpha: 0.3); */
+
+  .map-a {
+    position: absolute;
+    bottom: -24%;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+  }
+  .map-e {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    .echarts {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .map-t{
+    position: absolute;
+    top: 2rem;
+    left: 2rem;
+    color: #fff;
+    font-family: 'ifonts';
+    font-size: 1.4rem;
+  }
+}
+</style>

src/view/indexc/index.vue

@@ -0,0 +1,47 @@
+<script setup>
+import leftItme from "../index/components/left.vue";
+import rightItme from "../index/components/right.vue";
+import center2Itme from "./components/center2.vue";
+import bottomItme from "../index/components/bottom.vue";
+</script>
+
+<template>
+  <div class="center">
+    <div class="item">
+      <leftItme style="height: 98%"></leftItme>
+    </div>
+    <div class="item item_c">
+      <div style="height: 61%; display: flex; justify-content: space-between">
+        <center2Itme style="width: 64%"></center2Itme>
+        <rightItme style="width: 35%"></rightItme>
+      </div>
+      <div style="height: 36%">
+        <bottomItme style="width: 100%"></bottomItme>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.center {
+  display: flex;
+  height: 100%;
+  justify-content: space-evenly;
+  .item {
+    width: 26%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-content: center;
+    /* border: 1px solid red; */
+    & > .div {
+      box-sizing: border-box;
+      padding: 10px;
+    }
+  }
+  .item_c {
+    width: 72%;
+  }
+}
+</style>