更新

index.html

@@ -10,7 +10,7 @@
         font-size: 16px;
       }
     </style>
-    <script src="/public/jessibuca.js"></script>
+    <!-- <script src="/public/jessibuca.js"></script> -->
     <script type="text/javascript">
       window._AMapSecurityConfig = {
           securityJsCode:'e8b6cb44e8e431d68052c8e10db99264',

src/components/videoFlv.vue

@@ -63,8 +63,7 @@ export default {
   mounted () {
     this.create();
     window.onerror = (msg) => (this.err = msg);
-
+    if (this.$props.url) this.playUrl = this.$props.url.replace(/\.mp4$/, ".flv");
-    if (this.$props.url) this.playUrl = this.$props.url;
     else console.error('请传入url')
     setTimeout(() => {
       this.play()

src/main.js

@@ -5,6 +5,7 @@ import dataV from '@jiaminghi/data-view'
 import './assets/font/fonts.css';
 import router from "./router";
 import { createPinia } from 'pinia'
+import '/public/jessibuca.js'
 
 const pinia = createPinia();
 

src/view/delivery/components/left.vue

@@ -275,7 +275,7 @@ onMounted(() => {
       <div class="c-box">
         <videoFlv
             class="img"
-            :url="farmInfo.video_url"
+            url="http://rtsp.lihaink.cn/live/xumu_user1.live.mp4"
           />
         <div class="name">{{ farmInfo.farm_name }}</div>
       </div>

src/view/delivery/components/rightCard.vue

@@ -160,9 +160,9 @@ onMounted(() => {
 <template>
   <div class="c-card">
     <div class="left">
-      <div>监测正常</div>
+      <!-- <div :style="{ color: !info.status&&info.is_online ? '#fff' : '#dc362e' }"> {{ !info.status&&info.is_online ? '监测正常' : '监测异常' }} </div> -->
       <img :src="info.image||'/src/assets/img/icon.png'" />
-      <div>{{ info.name }}</div>
+      <div> {{ info.name }} </div>
     </div>
     <div class="right" ref="chartsRef"></div>
   </div>

src/view/indexc/components/center2.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { onMounted, reactive, ref, inject, nextTick, onUpdated } from "vue";
-import * as echarts from 'echarts';
+import * as echarts from "echarts";
 import { useRoute, useRouter } from "vue-router";
 import ani from "@/components/ani.vue";
 import mitt from "@/utils/mitt";
@@ -33,65 +33,66 @@ let geoJson = JSON.parse(JSON.stringify(geoJSON));
 const props = defineProps({
   list: {
     type: Object,
-    default: () => []
+    default: () => [],
-  }
+  },
-})
+});
 
 const mapType = reactive({
-  name: '',
+  name: "",
-  json: ''
+  json: "",
-})
+});
 
-const changeType = (name = 'luxian') => {
+const changeType = (name = "luxian") => {
   mapType.name = name;
-  if (name == 'luxian') mapType.json = luxian;
+  if (name == "luxian") mapType.json = luxian;
-  if (name == 'hejiang') mapType.json = hejiang;
+  if (name == "hejiang") mapType.json = hejiang;
-  if (name == 'xuyong') mapType.json = xuyong;
+  if (name == "xuyong") mapType.json = xuyong;
-  if (name == 'gulin') mapType.json = gulin;
+  if (name == "gulin") mapType.json = gulin;
-  if (name == 'jiangyang') mapType.json = jiangyang;
+  if (name == "jiangyang") mapType.json = jiangyang;
-  if (name == 'longma') mapType.json = longma;
+  if (name == "longma") mapType.json = longma;
-  if (name == 'naxi') mapType.json = naxi;
+  if (name == "naxi") mapType.json = naxi;
-}
+};
 
-let dataValue = []
+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 ''
+  return "";
-}
+};
 
 const initDataValue = () => {
-  dataValue.forEach(item => {
+  dataValue.forEach((item) => {
     item.label = {
       show: true, // 显示标签
       formatter: customFormatter, // 标签内容，这里使用{name}表示数据项的name属性
       fontSize: 12, // 字体大小
-      fontWeight: 'bold', // 字体粗细
+      fontWeight: "bold", // 字体粗细
-      color: '#fff', // 字体颜色
+      color: "#fff", // 字体颜色
       offset: [-50, -40], // 标签偏移量，可根据需要调整
       rich: {
         img: {
           backgroundColor: {
-            image: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/205f0202311291015185408.png'
+            image:
+              "https://lihai001.oss-cn-chengdu.aliyuncs.com/def/205f0202311291015185408.png",
           },
           height: 40,
           width: 140,
-          color: '#fff',
+          color: "#fff",
           fontSize: 14,
           lineHeight: 14,
-          fontFamily: 'ifonts',
+          fontFamily: "ifonts",
-          align: 'center',
+          align: "center",
-          padding: [0, 0, 20, 0]
+          padding: [0, 0, 20, 0],
         },
         t: {
           fontSize: 10,
-          align: 'center'
+          align: "center",
-        }
+        },
-      }
+      },
     };
-  })
+  });
-}
+};
 
 const echartsRef = ref(null);
 let chart = null;
@@ -104,184 +105,6 @@ const initMap = () => {
   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",
@@ -291,8 +114,8 @@ const initMap = () => {
         layoutCenter: ["50%", "51%"],
         layoutSize: "110%",
         roam: false,
-        label: {
+        emphasis: {
-          emphasis: {
+          label: {
             show: false,
           },
         },
@@ -333,7 +156,7 @@ const initMap = () => {
           },
         },
         tooltip: {
-          trigger: 'item',
+          trigger: "item",
           formatter: function (params) {
             // console.log(params);
             if (params.data) {
@@ -351,16 +174,16 @@ const initMap = () => {
                         justify-content: center;
                         align-items: center;">${params.data.name}</div>
                         </div>`;
-            } else return '';
+            } else return "";
           },
-          position: 'top',
+          position: "top",
           // extraCssText: 'background-color: transparent; border: none;pdding: 0;', // 设置额外的 CSS 样式
-          backgroundColor: 'rgba(0, 156, 255, 0)', //设置背景颜色
+          backgroundColor: "rgba(0, 156, 255, 0)", //设置背景颜色
           borderColor: "rgba(0, 156, 255, 0)",
           padding: 0,
           textStyle: {
-            color: '#fff'
+            color: "#fff",
-          }
+          },
         },
       },
 
@@ -461,53 +284,71 @@ const initMap = () => {
       },
     ],
     tooltip: {
-      show: true
+      show: true,
     },
-    color: '#1f7df5',
+    color: "#1f7df5",
     series: [
       {
         name: "",
         type: "scatter",
         coordinateSystem: "geo",
         data: dataValue,
-        symbol: "image://https://lihai001.oss-cn-chengdu.aliyuncs.com/def/0a86a202312081638007996.png",
+        symbol:
+          "image://https://lihai001.oss-cn-chengdu.aliyuncs.com/def/0a86a202312081638007996.png",
         symbolSize: [30, 45],
         hoverSymbolSize: [45, 60],
         label: {
           formatter: "",
           position: "center",
-          show: false
+          show: false,
         },
         emphasis: {
           label: {
-            show: false
+            show: false,
-          }
+          },
-        }
+        },
       },
     ],
   };
   // 使用配置项显示图表
   chart.setOption(option);
 
+  getfarmCount({
+    areaCode: appStore.address.areaCode,
+    streetCode: appStore.address.streetCode,
+  }).then((res) => {
+    res.data.farmList.forEach((item) => {
+      if (item.longitude && item.latitude)
+        dataValue.push({
+          id: item.id,
+          name: item.farm_name,
+          value: [item.longitude, item.latitude],
+        });
+    });
+    initDataValue();
+    option.series[0].data = dataValue;
+    chart.setOption(option);
+  });
+
   // 监听标记点的点击事件
-  chart.on('click', function (params) {
+  chart.on("click", function (params) {
-    if (params.seriesType === 'scatter') {
+    if (params.seriesType === "scatter") {
       // 处理你的点击事件逻辑
-      console.log('点击了', params.data);
+      console.log("点击了", params.data);
       router.push({
-        path: '/delivery',
+        path: "/delivery",
         query: {
           areaCode: route.query.areaCode,
           streetCode: route.query.streetCode,
           name: route.query.name,
           id: params.data.id,
           farm_name: params.data.name,
-          address: params.data.value.join(',')
+          address: params.data.value.join(","),
-        }
+        },
-      })
+      });
     }
   });
-}
+};
 
 const mapInfo = async () => {
   let area = appStore.area.find(
@@ -530,8 +371,8 @@ const mapInfo = async () => {
     // dataValue = dataValue.filter(
     //   (item) => item.street_code == appStore.address.streetCode
     // );
-  } if (route.query.name) {
+  } else if (route.query.name) {
-    initStreetMap({name: route.query.name}, map);
+    initStreetMap({ name: route.query.name }, map);
   } else {
     mapType.name = area.name;
     mapType.json = map;
@@ -541,65 +382,29 @@ const initStreetMap = (street, map) => {
   map.features = map.features.filter(
     (item) => item?.properties?.name == street?.name
   );
-  mapType.name = street?.name;
+  mapType.name = street?.name || route.query.name || "";
   mapType.json = map;
 };
 
 const filterMap = () => {
   geoJson.features = geoJson.features.filter((item) => {
-    return item.properties.name == route.query.name
+    return item.properties.name == route.query.name;
-  })
+  });
-}
+};
 
-
+const initFarmCount = () => {
-const initFarmCount = ()=>{
+  mapInfo();
-  getfarmCount({
+  setTimeout(() => {
-    areaCode: appStore.address.areaCode,
+    initMap();
-    streetCode: appStore.address.streetCode
+  }, 100);
-  }).then((res)=>{
+};
-    res.data.farmList.forEach(item=>{
-      if(item.longitude && item.latitude) dataValue.push({
-        id: item.id,
-        name: item.farm_name,
-        value: [item.longitude, item.latitude]
-      })
-    })
-    
-    nextTick(() => {
-      mapInfo();
-      initDataValue();
-      initMap();
-    })
-  })
-}
 
 onMounted(() => {
-
   if (route.query.name) {
-    filterMap()
+    filterMap();
   }
-  // dataValue = props.list;
+  initFarmCount();
-  // dataValue[0] = {
+});
-  //   name: '福集镇养殖基地',
-  //   value: [105.36, 29.20]
-  // }
-
-  initFarmCount()
-  
-  // mapInfo();
-  // initDataValue();
-  // initMap();
-  // nextTick(() => {
-  //   mitt.on('map_info', e => {
-  //     // changeType(e.pinyin);
-  //     mapInfo();
-  //     initDataValue();
-  //     initMap();
-  //   })
-  // })
-  
-})
-
 </script>
 
 <template>
@@ -647,12 +452,12 @@ onMounted(() => {
       height: 100%;
     }
   }
-  .map-t{
+  .map-t {
     position: absolute;
     top: 2rem;
     left: 2rem;
     color: #fff;
-    font-family: 'ifonts';
+    font-family: "ifonts";
     font-size: 1.4rem;
   }
 }

src/view/indexc/index.vue

@@ -2,6 +2,7 @@
 import leftItme from "../index/components/left.vue";
 import rightItme from "../index/components/right.vue";
 import center2Itme from "./components/center2.vue";
+import centerItme from "../index/components/center.vue";
 import bottomItme from "../index/components/bottom.vue";
 import { useRoute } from 'vue-router';
 import { ref } from "vue";
@@ -18,6 +19,7 @@ const key = ref(Date.now());
     <div class="item item_c">
       <div style="height: 61%; display: flex; justify-content: space-between">
         <center2Itme :key="route.query.name+key+'c'" style="width: 64%"></center2Itme>
+        <!-- <centerItme :key="route.query.name+key+'c'" style="width: 64%"></centerItme> -->
         <rightItme :key="route.query.name+key+'r'" style="width: 35%"></rightItme>
       </div>
       <div style="height: 36%">