a

src/api.js

@@ -59,3 +59,16 @@ export function landListApi(params) {
 export function productListApi(params) {
     return instacne.get('/api/dataview.land/productList', { params })
 }
+
+export function areaPlantTypeCountApi(params) {
+    return instacne.get('/api/dataview.land/areaPlantTypeCount', { params })
+}
+export function monitorInfoApi(params) {
+    return instacne.get('/api/dataview.land/monitorInfo', { params })
+}
+
+export function deviceCountLandApi(params) {
+    return instacne.get('/api/dataview.land/deviceCount', { params })
+}
+
+// /api/dataview.land/deviceCount?areaCode=510521&streetCode=510521100&land_id=18

src/components/areaMap.vue

@@ -2,11 +2,8 @@
   <div>
 
     <div style="width: 45vw;height: 50vh;" id="chart2"></div>
-    <!-- <img src="/static/index/lx.png" class="img4" alt=""> -->
   </div>
-  <!-- <div style="width: 45vw;height: 50vh;" id="myChart"></div> -->
 
-  <!-- <img src="/static/index/SC.png" id="img" style="width: 45vw;height: 50vh;" alt=""> -->
 </template>
 
 
@@ -41,21 +38,14 @@
 
 <script setup>
 import { ref, onMounted } from "vue"
-
 import * as echarts from 'echarts';
 import "echarts-gl"
-
+import geoJson from "/static/jsonData/luxian_geo.js"
-import geoJson from "/static/jsonData/xuantan.js"
 import { useRouter } from "vue-router"
-
-
 const router = useRouter()
 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 pointerFn = () => {
-
-  // console.log()
   let list = []
   geoJson.center.forEach((item, index) => {
     list.push({
@@ -74,8 +64,9 @@ const pointerFn = () => {
   })
   return list
 }
-// pointerFn()
 onMounted(() => {
+
+
   var mapName = 'lz';
   const myChart = document.getElementById("chart2")
   /*获取地图数据*/
@@ -280,24 +271,19 @@ onMounted(() => {
       },
     ],
   };
+
+  document.getElementById("chart2").removeAttribute('_echarts_instance_');
+
   echarts.registerMap(mapName, geoJson)
   const bg = echarts.init(myChart)
   bg.setOption(option);
 
   bg.on('click', function (params) {
-        mapClick()
+
+  router.push("/detail?town="+params.name||params.value)
 
   });
 
 })
 
-
-
-const mapClick=()=>{
-  router.push("/detail")
-}
-
-
-
-
 </script>

src/components/detail/leftTop.vue

@@ -2,19 +2,45 @@
     <div style="display: flex;justify-content: space-between;align-items: center;">
         <span>种植总面积： </span>
         <div>
-            <span class="area-num "><span class="color-font">2</span> </span>
+            <span class="area-num "  v-for="item in plantData.totalArea"><span class="color-font">{{ item }}</span> </span>
-            <span class="area-num "><span class="color-font">2</span> </span>
-            <span class="area-num "><span class="color-font">2</span> </span>
-            <span class="area-num "><span class="color-font">2</span> </span>
         </div>
     </div>
     <div style="">种植种类：</div>
     <div>
         <div class="lands">
-            <div class="land" v-for="(item, index) in 33" :key="index">地块</div>
+            <div class="land" v-for="(item, index) in plantData.plantKindList" :key="index">{{ item.kind }}</div>
         </div>
     </div>
 </template>
+
+<script setup>
+import {areaPlantTypeCountApi} from "@/api.js"
+import {ref,reactive} from "vue"
+
+let plantData=reactive({
+    totalArea:0,
+    plantKindList:[]
+
+
+})
+// api/dataview.land/areaPlantTypeCount?areaCode=510521&streetCode=510521100
+areaPlantTypeCountApi(
+    {
+        areaCode:510521,
+        streetCode:510521100,
+        land_id:12 
+    }
+).then(res=>{
+    for (let key in res.data){
+        plantData[key]=res.data[key]
+    }
+    plantData.totalArea=plantData.totalArea.toString()
+
+})
+
+
+</script>
+
 <style lang="scss">
 .area-num {
     margin-right: 10px;
@@ -32,11 +58,12 @@
     display: flex;
     flex-wrap: wrap;
     height: 100%;
-    justify-content: space-between;
+    // justify-content: space-between;
     font-size: 14px;
     overflow-y: auto;
     margin-top: 1vh;
     height: 15vh;
+    flex-wrap: wrap;
 
     .land {
         width: 5vw;
@@ -47,6 +74,8 @@
         color: white;
         text-align: center;
         line-height: 3vh;
+    margin-right: 10px;
+
 
     }
 }

src/components/detail/rightBottom.vue

@@ -10,6 +10,19 @@
 
 <script setup>
 import { reactive } from "vue"
+import { monitorInfoApi } from "@/api.js"
+
+monitorInfoApi(
+    {
+        areaCode: 510521,
+        streetCode: 510521100,
+        land_id: 18
+    }
+
+).then(res => {
+    console.log(res.data)
+})
+// /api/dataview.land/monitorInfo?areaCode=510521&streetCode=510521100&land_id=18
 
 
 const MoistureData = reactive([

src/components/detail/rightTop.vue

@@ -33,7 +33,16 @@
 import {ref,reactive,onMounted} from "vue"
 import * as echarts from 'echarts';
 import options from "@/view/option.js"
-
+import {deviceCountLandApi} from "@/api.js"
+deviceCountLandApi(
+    {
+        areaCode:510521,
+        streetCode:510521100,
+        land_id:18
+    }
+).then(res=>{
+    console.log(res.data)
+})
 
 // 图表
 const initCharts = (tag, option) => {

src/components/farmerMap.vue

@@ -1,10 +1,8 @@
 <template>
-
+  <div>
-    <div style="width: 45vw;height: 50vh;" id="chart2">
+    <div style="width: 45vw;height: 50vh;" id="farmerchart"></div>
-  
-  
   </div>
-    <!-- <img src="/static/index/SC.png" id="img" style="width: 45vw;height: 50vh;" alt=""> -->
+
 </template>
 
 
@@ -21,405 +19,284 @@
 }
 
 .img4 {
-    width: 45VW;
+  top: 19.5vh;
-    height: 50vh;
+  left: 33.3vw;
-    transform-origin: center center;
+  height: 44vh;
-    //   transform: rotateX(45deg);
+  width: 33.6vw;
-    // animation: spin 2s linear infinite;
+  position: absolute;
+}
 
+#farmerchart {
+  position: absolute;
+  z-index: 9;
 }
 </style>
 
 <script setup>
 import { ref, onMounted } from "vue"
-  import axios from "axios";
 import * as echarts from 'echarts';
 import "echarts-gl"
+import geoJson from "/static/jsonData/luxian_geo.js"
+import {  useRoute } from "vue-router"
+const deepCopy=(obj)=> {
+  if (typeof obj !== 'object' || obj === null) {
+    return obj;
+  }
 
+  let copy = Array.isArray(obj) ? [] : {};
 
+  for (let key in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      copy[key] = deepCopy(obj[key]);
+    }
+  }
 
+  return copy;
+}
 
+const townJson=deepCopy(geoJson)
+const route = useRoute()
+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"
 
-  onMounted(() => {
+const pointerFn = () => {
-    const u = 'https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231129\/202311291816106120a4034.png'
+  return
-    axios.get('https://geo.datav.aliyun.com/areas_v3/bound/510000_full.json')
+  let list = []
-      .then(function (response) {
+  geoJson.center.forEach((item, index) => {
-        let geoJson = response.data
+    list.push({
-        const dot = document.getElementById('img')
+      coord: item,
-        var mapName = 'lz';
+      symbol: index == geoJson.center.length - 1 ? ('image://' + lx) : ('image://' + icon),// 自定义图片路径
-        var geoCoordMap = {
+      symbolSize: [100, 30], // 图片大小
-        };
+      symbolOffset: ['50%', '-50%'],
-  
+      value: geoJson.features[index]?.properties.name || '泸县',
-        let data = [
+      animation: true,
-  
+      label: {
-        {
-                  name: "成都市",
-                  value: 12,
-                  itemStyle: {
-                      normal: {
-                          color: {
-                              image: document.getElementById("img"),
-                              repeat: 'no-repeat'
-                          }
-                      }
-                  }
-              },
-        {
-                  name: "眉山市",
-                  value: 12,
-                  itemStyle: {
-                      normal: {
-                          color: {
-                              image: document.getElementById("img"),
-                              repeat: 'no-repeat'
-                          }
-                      }
-                  }
-              },
-        {
-                  name: "雅安市",
-                  value: 12,
-                  itemStyle: {
-                      normal: {
-                          color: {
-                              image: document.getElementById("img"),
-                              repeat: 'no-repeat'
-                          }
-                      }
-                  }
-              },
-  
-        ]
-        const myChart = document.getElementById("chart2")
-        /*获取地图数据*/
-        var mapFeatures = geoJson.features;
-        mapFeatures.forEach(function (v) {
-          // 地区名称
-          var name = v.properties.name;
-          // 地区经纬度
-          geoCoordMap[name] = v.properties.cp;
-        });
-        // console.log(dot)
-        let option = {
-          visualMap: {
-                      show: false
-                  },
-          title: {
         show: true,
-  
+        color: 'white',
-            // textStyle: {
+        fontSize: 14,
-            //     color: "#fff",
-            //     fontFamily: "等线",
-            //     fontSize: 18,
-            // },
       },
-          tooltip: {
+    },)
-            trigger: 'none',
+  })
-            formatter: function (params) {
+  return list
-              if (typeof params.value[2] == 'undefined') {
-                var toolTiphtml = '';
-                for (var i = 0; i < toolTipData.length; i++) {
-                  if (params.name == toolTipData[i].name) {
-                    toolTiphtml += toolTipData[i].name + "：" + toolTipData[i].value;
 }
-                }
+onMounted(() => {
-                console.log(toolTiphtml);
+  var mapName = 'lz';
-                // console.log(convertData(data))
+  const myChart = document.getElementById("farmerchart")
-                return toolTiphtml;
+  /*获取地图数据*/
-              } else {
+  let option = {
-                var toolTiphtml = '';
-                for (var i = 0; i < toolTipData.length; i++) {
-                  if (params.name == toolTipData[i].name) {
-                    toolTiphtml += toolTipData[i].name + "：" + toolTipData[i].value;
-                  }
-                }
-                console.log(toolTiphtml);
-  
-                return toolTiphtml;
-              }
-            },
-            backgroundColor: "#fff",
-            borderColor: "#333",
-            padding: [5, 10],
-            textStyle: {
-              color: "#333",
-              fontSize: "16"
-            }
-          },
     geo: [
       {
-              layoutSize: '100%',//大小
+        type: "map",
+        map: mapName,
+        aspectScale: 1,
+        zoom: 1,
+        layoutCenter: ["50%", "51%"],
+        layoutSize: "80%",
+        roam: false,
+        label: {
+          emphasis: {
+            show: false
+          }
+        },
         show: true,
         map: mapName,
-              backgroundColor: {
+        zoom: 1,
-                color: {
-                  image: dot, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
-                  repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
-                }
-              },
-              roam: false,
-              zoom: 1.2,
-              layoutCenter: ["50%", "50%"],
         aspectScale: 1,
-              label: {
+        roam: false,
+        itemStyle: {
           normal: {
-                  show: false,
+            areaColor: 'transparent',
-                  textStyle: {
+
-                    color: '#fff'
-                  }
           },
           emphasis: {
-                  show: true,
+
-                  textStyle: {
-                    color: '#fff'
-                  }
-                }
-              },
-              itemStyle: {
             areaColor: {
-                  type: "linear",
+              type: 'radial', // linear 线性渐变  radial径向渐变
-                  x: 1200,
+              x: 0.5,                  // 0.5为正中心，如果小于渐变中心靠左
-                  y: 0,
+              y: 0.5,                  // 0.5为正中心，如果小于渐变中心靠上
-                  x2: 0,
+              r: 1,
-                  y2: 0,
+              colorStops: [
-                  colorStops: [{
+                {
-                    offset: 0,
+                  offset: 0, color: '#A46759' // 0% 处的颜色
-                    color: "rgba(3,27,78,0.75)", // 0% 处的颜色
-                  }, {
-                    offset: 1,
-                    color: "rgba(58,149,253,0.75)", // 50% 处的颜色
-                  },],
-                  global: true, // 缺省为 false
                 },
-                borderColor: "#D2F2FC",
+                {
-                borderWidth: 2,
+                  offset: 0.1, color: '#A46759' // 0% 处的颜色
-                shadowColor: "#8cd3ef",
-                shadowOffsetY: 10,
-                shadowBlur: 120,
                 },
 
+
+                {
+                  offset: 1, color: '#FFB821' // 100% 处的颜色
+                }],
+
+            }
+
+
+            // borderWidth: 0
+          }
+
         },
 
-            // {
-            //   type: "map",
-            //   map: mapName,
-            //   zlevel: -1,
-            //   aspectScale: 1,
-            //   zoom: 1.2,
-            //   layoutCenter: ["50%", "51%"],
-            //   layoutSize: "100%",
-            //   roam: false,
-            //   silent: true,
-            //   regions: [
-            //     {
-            //       name: "南海诸岛",
-            //       itemStyle: {
-            //         // 隐藏地图
-            //         normal: {
-            //           opacity: 0, // 为 0 时不绘制该图形
-            //         }
-            //       },
-            //       label: {
-            //         show: false // 隐藏文字
-            //       }
-            //     }
-            //   ],
-            //   itemStyle: {
-            //     normal: {
-            //       borderWidth: 1,
-            //       borderColor: "rgba(17, 149, 216,0.6)",
-            //       borderColor: "#5AD0E0",
-            //       shadowColor: "rgba(172, 122, 255,0.5)",
-            //       shadowOffsetY: 5,
-            //       shadowBlur: 15,
-            //       areaColor: "rgba(5,21,35,0.1)",
-            //     },
-            //   },
-            // },
-            // {
-            //   type: "map",
-            //   map: mapName,
-            //   zlevel: -2,
-            //   aspectScale: 1,
-            //   zoom: 1.2,
-            //   layoutCenter: ["50%", "52%"],
-            //   layoutSize: "100%",
-            //   roam: false,
-            //   silent: true,
-            //   regions: [
-            //     {
-            //       name: "南海诸岛",
-            //       itemStyle: {
-            //         // 隐藏地图
-            //         normal: {
-            //           opacity: 0, // 为 0 时不绘制该图形
-            //         }
-            //       },
-            //       label: {
-            //         show: false // 隐藏文字
-            //       }
-            //     }
-            //   ],
-            //   itemStyle: {
-            //     normal: {
-            //       borderWidth: 1,
-            //       // borderColor: "rgba(57, 132, 188,0.4)",
-            //       borderColor: "#1C75C8",
-            //       shadowColor: "rgba(65, 214, 255,1)",
-            //       shadowOffsetY: 5,
-            //       shadowBlur: 15,
-            //       areaColor: "transpercent",
-            //     },
-            //   },
-            // },
 
-            // {
+      },
-            //   type: "map",
+
-            //   map: mapName,
+      {
-            //   zlevel: -3,
+        type: "map",
-            //   aspectScale: 1,
+        map: mapName,
-            //   zoom: 1.2,
+        zlevel: -1,
-            //   layoutCenter: ["50%", "53%"],
+        aspectScale: 1,
-            //   layoutSize: "101%",
+        zoom: 1,
-            //   roam: false,
+        layoutCenter: ["50%", "51%"],
-            //   silent: true,
+        layoutSize: "81%",
-            //   regions: [
+        roam: false,
-            //     {
+        silent: true,
-            //       name: "南海诸岛",
+
-            //       itemStyle: {
+        itemStyle: {
-            //         // 隐藏地图
+          normal: {
-            //         normal: {
+            borderWidth: 1,
-            //           opacity: 0, // 为 0 时不绘制该图形
+            borderColor: "rgba(17, 149, 216,0.6)",
-            //         }
+            borderColor: "#5AD0E0",
-            //       },
+            shadowColor: "rgba(172, 122, 255,0.5)",
-            //       label: {
+            shadowOffsetY: 5,
-            //         show: false // 隐藏文字
+            shadowBlur: 15,
-            //       }
+            areaColor: "rgba(5,21,35,0.1)",
-            //     }
+          },
-            //   ],
+        },
-            //   itemStyle: {
+      },
-            //     normal: {
+
-            //       borderWidth: 1,
+
-            //       // borderColor: "rgba(11, 43, 97,0.8)",
+      {
-            //       borderColor: "rgba(58,149,253,0.4)",
+        type: "map",
-            //       shadowColor: "rgba(58,149,253,1)",
+        map: mapName,
-            //       shadowOffsetY: 15,
+        zlevel: -1,
-            //       shadowBlur: 10,
+        aspectScale: 1,
-            //       areaColor: "transpercent",
+        zoom: 1,
-            //     },
+        layoutCenter: ["50%", "52%"],
-            //   },
+        layoutSize: "82%",
-            // },
+        roam: false,
-            // {
+        silent: true,
-            //   type: "map",
+
-            //   map: mapName,
+        itemStyle: {
-            //   zlevel: -4,
+          normal: {
-            //   aspectScale: 1,
+            borderWidth: 1,
-            //   zoom: 1.2,
+            borderColor: "rgba(17, 149, 216,0.6)",
-            //   layoutCenter: ["50%", "54%"],
+            borderColor: "#5AD0E0",
-            //   layoutSize: "103%",
+            shadowColor: "rgba(172, 122, 255,0.5)",
-            //   roam: false,
+            shadowOffsetY: 5,
-            //   silent: true,
+            shadowBlur: 15,
-            //   regions: [
+            areaColor: "rgba(5,21,35,0.1)",
-            //     {
+          },
-            //       name: "南海诸岛",
+        },
-            //       itemStyle: {
+      },
-            //         // 隐藏地图
+
-            //         normal: {
+
-            //           opacity: 0, // 为 0 时不绘制该图形
+      {
-            //         }
+        type: "map",
-            //       },
+        map: mapName,
-            //       label: {
+        zlevel: -2,
-            //         show: false // 隐藏文字
+        aspectScale: 1,
-            //       }
+        zoom: 1,
-            //     }
+        layoutCenter: ["50%", "53%"],
-            //   ],
+        layoutSize: "83%",
-            //   itemStyle: {
+        roam: false,
-            //     normal: {
+        silent: true,
-            //       borderWidth: 5,
+
-            //       // borderColor: "rgba(11, 43, 97,0.8)",
+        itemStyle: {
-            //       borderColor: "rgba(5,9,57,0.8)",
+          normal: {
-            //       shadowColor: "rgba(29, 111, 165,0.8)",
+            borderWidth: 1,
-            //       shadowOffsetY: 15,
+            borderColor: "rgba(17, 149, 216,0.4)",
-            //       shadowBlur: 10,
+            borderColor: "#5AD0E0",
-            //       areaColor: "rgba(5,21,35,0.1)",
+            shadowColor: "rgba(172, 122, 255,0.5)",
-            //     },
+            shadowOffsetY: 5,
-            //   },
+            shadowBlur: 15,
-            // },
+            areaColor: "rgba(5,21,35,0.1)",
+          },
+        },
+      },
+
+      {
+        type: "map",
+        map: mapName,
+        zlevel: -4,
+        aspectScale: 1,
+        zoom: 1,
+        layoutCenter: ["50%", "54%"],
+        layoutSize: "84%",
+        roam: false,
+        silent: true,
+
+        itemStyle: {
+          normal: {
+            borderWidth: 5,
+            // borderColor: "rgba(11, 43, 97,0.8)",
+            borderColor: "rgba(5,9,57,0.8)",
+            shadowColor: "rgba(29, 111, 165,0.8)",
+            shadowOffsetY: 15,
+            shadowBlur: 10,
+            areaColor: "rgba(5,21,35,0.1)",
+          },
+        },
+      },
 
 
 
     ],
     series: [
       {
-              type: 'map',
+        name: '资产数',
-              map: mapName,
+        type: 'effectScatter',
-              geoIndex: 0,
+        coordinateSystem: 'geo',
-              aspectScale: 1, //长宽比
+        rippleEffect: {
-              zoom: 0.65,
+          period: 4, //动画时间，值越小速度越快
-              showLegendSymbol: true,
+          brushType: 'fill', //波纹绘制方式 stroke, fill
-              roam: true,
+          scale: 12, //波纹圆环最大限制，值越大波纹越大
-              label: {
+          number: 2,
-                normal: {
-                  show: true,
-                  textStyle: {
-                    color: "#fff",
-                    fontSize: "120%"
         },
+
+        // 发散点的大小
+        symbolSize: function (val) {
+          return 4
+          // return val[2] / 10;
         },
-                emphasis: {
-                  // show: false,
-                },
-              },
-              // itemStyle: {
-              //     normal: {
-              //         areaColor: {
-              //             type: "linear",
-              //             x: 1200,
-              //             y: 0,
-              //             x2: 0,
-              //             y2: 0,
-              //             colorStops: [{
-              //                 offset: 0,
-              //                 color: "rgba(3,27,78,0.75)", // 0% 处的颜色
-              //             }, {
-              //                 offset: 1,
-              //                 color: "rgba(58,149,253,0.75)", // 50% 处的颜色
-              //             },],
-              //             global: true, // 缺省为 false
-              //         },
-              //         borderColor: "#fff",
-              //         borderWidth: 0.2,
-              //     },
-              // },
-              layoutCenter: ["50%", "50%"],
-              layoutSize: "180%",
-              animation: true,
         markPoint: {
-                symbol: "none"
+          data: pointerFn()
-              },
-              data: data,
         },
 
+        data: (() => {
+          return
+          let data = {
+            资产数: geoJson.center
 
+          }
+          let finalData = []
+          Object.keys(data).map((i, index) => {
+            let child = data[i].map((row, index) => ({
+              value: row,
+              itemStyle: {
+                color: index == geoJson.center.length - 1 ? '#FEB821' : '#F0733A',
+              },
+            }))
+
+            finalData = [...finalData, ...child]
+          })
+          return finalData
+        })(),
+      },
     ],
   };
+  document.getElementById("farmerchart").removeAttribute('_echarts_instance_');
 
-      
+  echarts.registerMap(mapName, townJson)
-  
-        echarts.registerMap(mapName, geoJson)
   const bg = echarts.init(myChart)
   bg.setOption(option);
 
+  bg.on('click', function (params) {
+    // mapClick()
+    console.log(params.name)
 
-  
+  });
-  
-  
-  
-  
-  
-      })
-  
-  
 
 })
 
@@ -429,9 +306,3 @@
 
 
 </script>
-  <style lang="scss" scoped>
-  
-  #chart2{
-    transform: rotateX(20deg);
-  }
-  </style>

src/view/detail.vue

@@ -13,8 +13,8 @@
                 </video>
             </div>
         </div>
-        <div class="c">
+        <div class="center">
-            <div class="top">
+            <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">同谭政地块</span> </div>
@@ -84,11 +84,11 @@ const router=useRouter()
         }
     }
 
-    .c {
+    .center {
         width: 49vw;
         height: 93vh;
 
-        .top {
+        .top-c {
             margin-top: 1vh;
             width: 49vw;
             height: 61vh;