sd

src/components/areaMap.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div style="width: 45vw;height: 50vh;" id="chart2" v-show="showArea"></div>
-    <div style="width: 45vw;height: 50vh;" id="chart3" v-show="!showArea"></div>
+    <div style="width: 45vw;height: 60vh;transform: translateY(-5VH);" id="chart3" v-show="!showArea"></div>
   </div>
 </template>
 
@@ -36,7 +36,7 @@
 </style>
 
 <script setup>
-import { ref, onMounted, watch } from "vue"
+import { ref, onMounted, watch,defineEmits  } from "vue"
 import * as echarts from 'echarts';
 // import "echarts-gl"
 import geoJson from "/static/jsonData/luxian_geo.js"
@@ -66,7 +66,10 @@ const deepCopy = (obj) => {
   return copy;
 }
 
-
+const emit = defineEmits(['getTowmName'])
+const getTowmName = (e) => {
+    emit('getTowmName',e)
+}
 
 
 const pointerFn = () => {
@@ -96,7 +99,7 @@ const pointerFn2 = (lists) => {
       value: item.name,
       animation: true,
       symbol: index == geoJson.center.length - 1 ? ('image://' + lx) : ('image://' + icon),// 自定义图片路径
-      symbolSize: [100, 30], // 图片大小
+      symbolSize: [190, 30], // 图片大小
       symbolOffset: ['50%', '-50%'],
       data: lists,
       
@@ -166,29 +169,29 @@ const initAreaMap = () => {
 
       },
 
-      {
-        type: "map",
-        map: mapName,
-        zlevel: -1,
-        aspectScale: 1,
-        zoom: 1.2,
-        layoutCenter: ["50%", "51%"],
-        layoutSize: "110%",
-        roam: false,
-        silent: true,
+      // {
+      //   type: "map",
+      //   map: mapName,
+      //   zlevel: -1,
+      //   aspectScale: 1,
+      //   zoom: 1.2,
+      //   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)",
-          },
-        },
-      },
+      //   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)",
+      //     },
+      //   },
+      // },
 
 
       {
@@ -315,6 +318,8 @@ const initAreaMap = () => {
   const bg = echarts.init(myChart)
   bg.setOption(option);
   bg.on('click', function (params) {
+
+    getTowmName(params.name)
     areaStore.areaCodeList.forEach(item => {
       if (item.name == (params.name||params.value)) {
         areaStore.changeUserInfoFn(510521, item.code)
@@ -336,7 +341,6 @@ const initTownMap = async (name) => {
     ...areaStore.userInfo
   })
 
-  console.log(res.data,4545)
 
   res.data.list.forEach(item => {
 
@@ -347,16 +351,6 @@ const initTownMap = async (name) => {
       id: item.id
     })
   })
-  console.log(center,'center')
-  // let center2 = [[105.33113, 29.121584], [105.329675, 29.122785], [105.329046, 29.123046], [105.328221, 29.123388], [105.266415, 29.138461], [105.266196, 29.167795]]
-  let pointerList2 = []
-  center.forEach((item, index) => {
-    pointerList2.push({
-      value: item,
-      name: "土地" + index,
-      id: 18
-    })
-  })
  
   const townJson = deepCopy(geoJson)
 
@@ -377,9 +371,9 @@ const initTownMap = async (name) => {
         type: "map",
         map: mapName,
         aspectScale: 1,
-        zoom: 1.2,
+        zoom: 0.2,
         layoutCenter: ["50%", "51%"],
-        layoutSize: "110%",
+        layoutSize: "90%",
         roam: false,
         label: {
           emphasis: {
@@ -388,7 +382,7 @@ const initTownMap = async (name) => {
         },
         show: true,
         map: mapName,
-        zoom: 1.2,
+        zoom: 1,
         aspectScale: 1,
         roam: false,
         itemStyle: {
@@ -427,29 +421,7 @@ const initTownMap = async (name) => {
 
       },
 
-      {
-        type: "map",
-        map: mapName,
-        zlevel: -1,
-        aspectScale: 1,
-        zoom: 1.2,
-        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)",
-          },
-        },
-      },
 
 
       {
@@ -457,9 +429,9 @@ const initTownMap = async (name) => {
         map: mapName,
         zlevel: -1,
         aspectScale: 1,
-        zoom: 1.2,
+        zoom: 1,
         layoutCenter: ["50%", "52%"],
-        layoutSize: "110%",
+        layoutSize: "90%",
         roam: false,
         silent: true,
 
@@ -482,9 +454,9 @@ const initTownMap = async (name) => {
         map: mapName,
         zlevel: -2,
         aspectScale: 1,
-        zoom: 1.2,
+        zoom: 1,
         layoutCenter: ["50%", "53%"],
-        layoutSize: "110%",
+        layoutSize: "90%",
         roam: false,
         silent: true,
 
@@ -506,9 +478,9 @@ const initTownMap = async (name) => {
         map: mapName,
         zlevel: -4,
         aspectScale: 1,
-        zoom: 1.2,
+        zoom: 1,
         layoutCenter: ["50%", "54%"],
-        layoutSize: "110%",
+        layoutSize: "90%",
         roam: false,
         silent: true,
 
@@ -546,7 +518,7 @@ const initTownMap = async (name) => {
           // return val[2] / 10;
         },
         markPoint: {
-          data: pointerFn2(pointerList2)
+          data: pointerFn2(pointerList)
         },
 
         data: (() => {
@@ -582,9 +554,8 @@ const initTownMap = async (name) => {
       }
     })
     params.data.data.forEach(item => {
-
       if (item.value[0] == longInfo[0] && item.value[1] == longInfo[1]) {
-        router.push(`/detail?landId=${item.id}&town=${name}&parmas=${JSON.stringify(areaStore.userInfo) }`)
+        router.push(`/detail?landId=${item.id}&town=${name}&parmas=${JSON.stringify(areaStore.userInfo)}&landName=${item.name}`)
       }
 
     })

src/components/detail/centerBottom.vue

@@ -1,12 +1,12 @@
 <template>
 
 
-<div class="bottom-li" :class="(item.flag) ? '' : 'act'" v-for="(item, index) in environmentData">
+<div class="bottom-li" :class="(item.flag) ? '' : 'act',actList.includes(item.name)?'dbg':''" v-for="(item, index) in environmentData">
 
 <span class="color-font">{{ item.name }}</span>
 <span>{{ item.value }}{{ item.unit }}</span>
 <span v-if="item.flag">状态正常</span>
-<span v-else>状态正常</span>
+<span v-else>状态异常</span>
 
 </div>
 
@@ -18,6 +18,12 @@
 import { monitorInfoApi } from "@/api.js"
 
 import {ref,reactive} from "vue"
+
+const actList=reactive([
+'环境湿度','环境温度','雨量','环境光照'
+
+])
+
 const props = defineProps({
     data:Object,
 })
@@ -134,9 +140,12 @@ const monitorThreshold=reactive({})
             }
 
             .act {
-                background-image: url('/static/detail/YC.png');
                 color: #C65956;
 
 
+            }
+            .dbg{
+                background-image: url('/static/detail/YC.png');
+
             }
 </style>

src/components/farmerMap.vue

@@ -32,15 +32,32 @@
 </style>
 
 <script setup>
-import { ref, onMounted,defineEmits } from "vue"
+import { ref, onMounted, defineEmits } from "vue"
 import * as echarts from 'echarts';
 import "echarts-gl"
 import geoJson from "/static/jsonData/luxian_geo.js"
 import { useRoute } from "vue-router"
 import { areaObj } from "@/store/index.js"
 import { landListApi } from "@/api.js"
-const emit = defineEmits(['changeLand'])
+const icon = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231204\/202312041608529c9e21252.png"
 
+const emit = defineEmits(['changeLand'])
+const pointerFn2 = (lists) => {
+  let list = []
+  lists.forEach((item, index) => {
+    list.push({
+      coord: item.value,
+      value: item.name,
+      animation: true,
+      symbol: index == geoJson.center.length - 1 ? ('image://' + lx) : ('image://' + icon),// 自定义图片路径
+      symbolSize: [190, 30], // 图片大小
+      symbolOffset: ['50%', '-50%'],
+      data: lists,
+
+    },)
+  })
+  return list
+}
 const areaStore = areaObj()
 const deepCopy = (obj) => {
   if (typeof obj !== 'object' || obj === null) {
@@ -62,39 +79,38 @@ const townJson = deepCopy(geoJson)
 townJson.features = townJson.features.filter((item) => {
   return item.properties.name == route.query.town
 })
-const icon = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231204\/202312041608529c9e21252.png"
 const lx = "https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231205\/20231205092709cfe148712.png"
 
-const pointerFn2 = (lists) => {
-  let list = []
-  lists.forEach((item, index) => {
-    list.push({
-      coord: item.value,
-      value: item.name,
-      animation: true,
-      data: lists,
-      itemStyle: {
-        normal: {
-          borderColor: 'red',
-          borderWidth: 1,            // 标注边线线宽，单位px，默认为1
-          label: {
-            show: false
-          }
-        },
-        emphasis: {
-          borderColor: 'red',
-          borderWidth: 5,
-          label: {
-            show: false
-          }
-        }
-      },
+// const pointerFn2 = (lists) => {
+//   let list = []
+//   lists.forEach((item, index) => {
+//     list.push({
+//       coord: item.value,
+//       value: item.name,
+//       animation: true,
+//       data: lists,
+//       itemStyle: {
+//         normal: {
+//           borderColor: 'red',
+//           borderWidth: 1,            // 标注边线线宽，单位px，默认为1
+//           label: {
+//             show: false
+//           }
+//         },
+//         emphasis: {
+//           borderColor: 'red',
+//           borderWidth: 5,
+//           label: {
+//             show: false
+//           }
+//         }
+//       },
 
 
-    },)
-  })
-  return list
-}
+//     },)
+//   })
+//   return list
+// }
 onMounted(async () => {
   let center = []
   let pointerList = []
@@ -112,15 +128,6 @@ onMounted(async () => {
 
   })
 
-  let center2 = [[105.33113, 29.121584], [105.329675, 29.122785], [105.329046, 29.123046], [105.328221, 29.123388], [105.266415, 29.138461], [105.266196, 29.167795]]
-  let pointerList2 = []
-  center2.forEach((item, index) => {
-    pointerList2.push({
-      value: item,
-      name: "土地" + index,
-      id: 17
-    })
-  })
 
   var mapName = 'lz';
   const myChart = document.getElementById("farmerchart")
@@ -300,13 +307,13 @@ onMounted(async () => {
           // return val[2] / 10;
         },
         markPoint: {
-          data: pointerFn2(pointerList2)
+          data: pointerFn2(pointerList)
         },
 
         data: (() => {
 
           let data = {
-            资产数: center2
+            资产数: center
 
           }
           let finalData = []
@@ -334,7 +341,11 @@ onMounted(async () => {
     params.data.data.forEach(item => {
       if (item.value[0] == longInfo[0] && item.value[1] == longInfo[1]) {
 
-        emit('changeLand',item.id)
+        let data = {
+          id: item.id,
+          name: item.name
+        }
+        emit('changeLand', data)
 
       }
 

src/components/index/leftCenter.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>监控设备总数: <span class="num color-font">{{ totalNum }}</span> 台</div>
+    <div>监测设备总数: <span class="num color-font">{{ totalNum }}</span> 台</div>
     <div class="cont">
         <div style="display: flex;justify-content: space-between;align-items: center;margin-top: 3vh;">
             <img src="/static/index/JYZ.png" style="width: 2.8vw; height: 4vw;" alt="">
@@ -15,11 +15,11 @@
         </div>
         <div class="eqNum">
             <div>
-                <img src="/static/index/Q.png" alt="" style="transform: translateY(2px);"> 在线设备统计：<span
+                <img src="/static/index/Q.png" alt="" style="transform: translateY(2px);"> 在线设备数量：<span
                     class="num color-font" style="margin-left: 10px;">{{ onlineNum }}</span> 台
             </div>
             <div>
-                <img src="/static/index/Q.png" style="transform: translateY(2px);"> 离线设备统计：<span class="num color-font"
+                <img src="/static/index/Q.png" style="transform: translateY(2px);"> 离线设备数量：<span class="num color-font"
                     style="margin-left: 10px;">{{ offlineNum }}</span>
                 台
             </div>

src/components/index/rightTop.vue

@@ -1,19 +1,33 @@
 <template>
     <div class="content" id="eq">
+
+
+
         <div class="eq" v-for="item in productList" :key="item">
-            <img :src="item.image" style="height: 100%;border-radius: 1vh;" alt="">
-            <div
-                style="display: flex;flex-direction: column;justify-content: space-between;margin-left: 1vw;color: #CAD5E5;">
+
+
+
+
+
+
+
+
+
+            <div class="eq-name"> {{ item.name }}</div>
+
+            <img :src="item.image" style="width: 10vw; border-radius: 1vh;" alt="">
+            <!-- <div style="display: flex;flex-direction: column;justify-content: space-between;margin-left: 1vw;color: #CAD5E5;">
                 <div style="display: flex;align-items: center;">
                     <img src="/static/index/MC.png" style="width:1.7vw;height: 1.5vw;margin-right: 5px; " alt="">
                     {{ item.name }}
                 </div>
                 <div style="display: flex;align-items: center;">
                     <img src="/static/index/JS.png" style="width:1.7vw;height: 1.5vw;margin-right: 5px; " alt="">
-            {{ item.desc }}
+                    {{ item.desc }}
                 </div>
-            </div>
+            </div> -->
         </div>
+
     </div>
 </template>
 <style lang="scss">
@@ -21,19 +35,48 @@
     width: 100%;
     height: 100%;
     transition: 1s;
-    // background-color: #fff;
     overflow-y: auto;
     font-size: 14px;
+    // flex-wrap: wrap;
+    // display: flex;
+    // justify-content: space-between;
+    // background-color: red;
 
     .eq {
-        width: 100%;
-        height: 10vh;
-        // background-color: #fff;
+        float: left;
+        margin-right: 1vw;
         margin-bottom: 1vh;
-        background-color: #092049;
-        box-sizing: border-box;
-        padding: 1vh;
-        display: flex;
+        position: relative;
+
+        .eq-name {
+            position: absolute;
+            width: 100%;
+            height: 4vh;
+            text-align: center;
+            box-sizing: border-box;
+            padding-top: 1vh;
+
+            background-color: rgba(52, 76, 115, 0.7);
+            white-space: nowrap;
+            /* 文本不换行 */
+            overflow: hidden;
+            /* 超出部分隐藏 */
+            text-overflow: ellipsis;
+            font-size: 14px;
+
+
+        }
+
+        // display: inline-block;
+        //   margin-bottom: 2vh;
+        // min-height: 10vh;
+        // background-color: #fff;
+        // margin-bottom: 1vh;
+        // background-color: #092049;
+        // box-sizing: border-box;
+        // padding: 1vh;
+        // display: flex;
+
     }
 
 }
@@ -53,17 +96,16 @@
 }
 </style>
 <script setup>
-import {ref,reactive,onMounted} from "vue"
-import {productListApi} from "@/api.js"
+import { ref, reactive, onMounted } from "vue"
+import { productListApi } from "@/api.js"
 import { areaObj } from "@/store/index.js"
-const userInfoStore=areaObj()
-// ...userInfoStore.userInfo
+const userInfoStore = areaObj()
 const scrollTableFn = () => {
     const tag = document.getElementById('eq')
     const height = tag.scrollHeight
     setInterval(() => {
         tag.scrollTop += 1
-        if ((tag.scrollTop + tag.clientHeight) >= height - 50) {
+        if ((tag.scrollTop + tag.clientHeight) >= height - 20) {
             tag.scrollTop = 0
 
         }
@@ -72,20 +114,25 @@ const scrollTableFn = () => {
 
 }
 
-const productList=reactive([])
+const productList = reactive([])
 productListApi(
     {
-       ...userInfoStore.userInfo
+        ...userInfoStore.userInfo
 
 
     }
-).then(res=>{
+).then(res => {
     res.data.list.forEach(item => {
         productList.push(item)
     });
 })
 
-onMounted(  ()=>{
-    scrollTableFn()
+onMounted(() => {
+
+    setTimeout(() => {
+        scrollTableFn()
+
+    }, 3000)
+
 })
 </script>

src/components/warnDetail.vue

@@ -6,7 +6,7 @@
             <div style="display: flex;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"> {{ props.data.value }}</span>
+                    <span class="text"> {{ eqType(props.data.type, props.data.value) }} </span>
                 </div>
                 <!-- <div class="warn-li"> <img src="/static/index/PM.png" class="pm-img"> <span class="pm-num"> 2</span>
                     <span class="text"> 这是一名后端开发</span>
@@ -89,10 +89,41 @@
 }
 </style>
 <script setup>
-import { ref, reactive, defineEmits,defineProps } from "vue"
+import { ref, reactive, defineEmits, defineProps } from "vue"
+
+
+const eqType = (type, value) => {
+
+    switch (type) {
+        case "ambient_temperature":
+            return "气温" + value + "℃"
+        case 'carbon_dioxide':
+            return "空气二氧化碳" + value + "ppm"
+        case 'soil_temperature':
+            return "土壤温度" + value + "℃"
+        case 'soil_moisture':
+            return "土壤湿度" + value + "℃"
+        case 'soil_potassium_phosphate_nitrogen':
+            return "土壤磷酸钾-含氮量偏高" + value + "mg/kg"
+        case 'ambient_air_pressure':
+            return "环境气压" + value + "KPa"
+        case 'rainfall':
+            return "雨量" + value + "mm"
+        case 'ambient_lighting':
+            return "环境光照" + value + "LUX"
+        case 'soil_conductivity':
+            return "土壤导电率" + value + "LUX"
+        case 'soil_PH':
+            return "土壤PH值为" + value
+        default:
+    }
+
+
+}
+
 
 const props = defineProps({
-    data:Object,
+    data: Object,
 })
 
 

src/components/warnPop.vue

@@ -263,6 +263,138 @@ const setoptionsFn = (X, Y, tits) => {
     }
     return data
 }
+// const CKP = {
+
+
+// toolbox: {
+//     feature: {
+//         saveAsImage: {}
+//     }
+// },
+// grid: {
+//     left: '3%',
+//     right: '4%',
+//     bottom: '3%',
+//     containLabel: true
+// },
+// xAxis: [
+// {
+//         show: false,
+//         type: "category",
+//         boundaryGap: false,
+//         axisLabel: {
+//             color: "#33a3dc",
+//             fontSize: 14
+//         },
+//         axisLine: {
+//             lineStyle: {
+//                 color: "rgba(255,255,255,.1)"
+//             }
+//         },
+//         data: ["4月", "5月", "6月", "7月", "8月", "9月", "10月"]
+//     }
+// ],
+// yAxis: [
+//     {
+//         show:false,
+//         type: 'value'
+//     }
+// ],
+// series: [
+//     {
+//         name: 'Email',
+//         type: 'line',
+//         stack: 'Total',
+//         smooth: true,
+//         lineStyle: {
+//             normal: {
+//                 color: "white" // 线条颜色
+//             }
+//         },
+//         areaStyle: {
+//             // 区域填充样式
+//             normal: {
+//                 // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+//                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
+//                     [
+//                         { offset: 0, color: "#1A4BB3" },
+
+//                     ],
+//                     false
+//                 )
+//                 // shadowColor: "rgba(53,142,215, 0.9)", // 阴影颜色
+//                 // shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+//             }
+//         },
+//         emphasis: {
+//             focus: 'series'
+//         },
+//         data: [120, 132, 101, 134, 90, 230, 210]
+//     },
+//     {
+//         name: 'Union Ads',
+//         type: 'line',
+//         smooth: true,
+//         stack: 'Total',
+//         lineStyle: {
+//             normal: {
+//                 color: "white" // 线条颜色
+//             }
+//         },
+//         areaStyle: {
+//             // 区域填充样式
+//             normal: {
+//                 // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+//                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
+//                     [
+//                         { offset: 0, color: "#1C6AA9" },
+
+//                     ],
+//                     false
+//                 )
+//                 // shadowColor: "rgba(53,142,215, 0.9)", // 阴影颜色
+//                 // shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+//             }
+//         },
+//         emphasis: {
+//             focus: 'series'
+//         },
+//         data: [220, 182, 191, 234, 290, 330, 310]
+//     },
+//     {
+//         name: 'Video Ads',
+//         type: 'line',
+//         stack: 'Total',
+//         smooth: true,
+//         lineStyle: {
+//             normal: {
+//                 color: "white" // 线条颜色
+//             }
+//         },
+//         areaStyle: {
+//             // 区域填充样式
+//             normal: {
+//                 // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+//                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
+//                     [
+//                         { offset: 0, color: "#38A3D9" },
+
+//                     ],
+//                     false
+//                 )
+//                 // shadowColor: "rgba(53,142,215, 0.9)", // 阴影颜色
+//                 // shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+//             }
+//         },
+//         emphasis: {
+//             focus: 'series'
+//         },
+//         data: [150, 232, 201, 154, 190, 330, 410]
+//     },
+
+// ]
+// };
+
 
 const CKP = {
     // backgroundColor: "#21263A",
@@ -354,8 +486,7 @@ const CKP = {
                     // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                         [
-                            { offset: 0, color: "rgba(22,84,156, 0.8)" },
-                            { offset: 1, color: "rgba(22,84,156, 0)" }
+                            { offset: 0, color: "#306CDC" },
                         ],
                         false
                     )
@@ -382,8 +513,7 @@ const CKP = {
                     // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                         [
-                            { offset: 0, color: "rgba(22,84,156, 0.8)" },
-                            { offset: 1, color: "rgba(22,84,156, 0)" }
+                            { offset: 0, color: "#1B4BB5" },
                         ],
                         false
                     )
@@ -409,8 +539,7 @@ const CKP = {
                     // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                         [
-                            { offset: 0, color: "rgba(22,84,156, 0.8)" },
-                            { offset: 1, color: "rgba(22,84,156, 0)" }
+                            { offset: 0, color: "#5EAAE2" },
                         ],
                         false
                     )

src/view/detail.vue

@@ -22,7 +22,7 @@
             <div class="top-c">
                 <div style="display: flex;justify-content: space-between;">
                     <div class="  c-top-tits"><span class="color-font" @click="router.push('/')">返回首页</span></div>
-                    <div class="  c-top-tits"><span class="color-font">{{ route.query.town }}地块</span> </div>
+                    <div class="  c-top-tits"><span class="color-font">{{ landName }}</span> </div>
                 </div>
                 <farmerMap @changeLand="changeLandFn"></farmerMap>
             </div>
@@ -63,10 +63,13 @@ let data = reactive(
     }
 )
 
+
+const landName=ref(route.query.landName) 
+
 landListApi({
     ...data
 }).then(res => {
-    console.log(res)
+    console.log(res.data)
     res.data.list.forEach(item => {
         if (item.id == data.land_id) {
             video_url.value = item.video_url
@@ -74,9 +77,12 @@ landListApi({
     })
 })
 
-const changeLandFn = (land_id) => {
-
-    data.land_id = land_id
+const changeLandFn = (item) => {
+// console.log(item)
+// return
+    data.land_id = item.id
+    landName.value=item.name
+    // route.query.townName=item.name
 
 }
 </script>

src/view/home.vue

@@ -14,8 +14,8 @@
         <div class="c">
             <div class="top">
                 <div style="display: flex;justify-content: space-between;" v-if="userInfoStore.userInfo.streetCode">
-                    <div class="  c-top-tits"><span class="color-font" @click="back">返回首页</span></div>
-                    <div class="  c-top-tits"><span class="color-font">地块</span> </div>
+                    <div  class="c-top-tits" style="z-index: 99999;"><span class="color-font" @click="back">返回首页</span></div>
+                    <div  class="c-top-tits" style="z-index: 99999;"><span class="color-font">{{ townName }}地块</span> </div>
                 </div>
                 <div class="c-top-tit" v-else>
                     <div class="c-top-li">种植面积     <span class="color-font"
@@ -26,12 +26,9 @@
                             style="font-size: 18px;margin-left: 1vw; ">{{ centerData.landCount }}</span> 块</div>
                 </div>
                
-                <!-- <div class="c-top-tit">
-                    <div class="  c-top-tits"><span class="color-font" @click="router.push('/')">返回首页</span></div>
-                    <div class="  c-top-tits"><span class="color-font">{{}}地块</span> </div>
-                </div> -->
+              
                 <div class="map">
-                    <areaMap ></areaMap>
+                    <areaMap @getTowmName="getTowmName"></areaMap>
                 </div>
             </div>
             <div class="bottom">
@@ -49,11 +46,11 @@
                     </div>
                 </div>
                 <div class="video" style="height: 65%;">
-                    <div class="video-tit"> 实时监测影像 </div>
+                    <div class="video-tit  "> 实时监测影像 </div>
                     <JessibucaDemo v-if="video_url" :src="video_url"></JessibucaDemo>
                     <div style="height: 100%;height: 100%;background-color: #0C2856;position: relative;" v-else> 
                         
-                        <img src="/static/index/video.png"  style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);" alt="">
+                        <img src="/static/index/video.png"  style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 50px;height: 50px;" alt="">
                         
                         </div>
                 </div>
@@ -114,9 +111,13 @@ const choseUrl=(item)=>{
 
 }
 const back=()=>{
+    console.log("back")
     router.go(0)
 }
-
+const townName=ref("")
+const getTowmName=(e)=>{
+    townName.value=e
+}
 
 </script>
 <style lang="scss">
@@ -248,7 +249,7 @@ const back=()=>{
 
             .video {
                 .video-tit {
-                    color: white;
+                    color: #CEE4FE;
                     width: 110px;
                     text-align: center;
                     line-height: 30px;
@@ -257,6 +258,9 @@ const back=()=>{
                     background-size: cover;
                     font-size: 15px;
                     margin-bottom: 3vh;
+                    font-size: 15px;
+                    font-family: FZCYJ;
+
                 }
             }
         }
@@ -276,5 +280,17 @@ const back=()=>{
 
         }
     }
+}
+
+.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%;
+
+
 }
 </style>