feat: 可拖拽果园档案，对接天气

package.json

@@ -37,6 +37,7 @@
     "ol": "^6.15.1",
     "ol-ext": "^3.2.4",
     "qs": "^6.11.0",
+    "qweather-icons": "^1.6.0",
     "resize-observer-polyfill": "^1.5.1",
     "run": "^1.4.0",
     "serve": "^14.1.2",

src/views/home/components/homeFile.vue

@@ -1,5 +1,10 @@
 <template>
-    <div class="file-wrap">
+    <div class="file-wrap yes-events"  ref="draggable" @mousedown="startDrag" :style="{ left: position.x + 'px', top: position.y + 'px' }">
+        
+        <!-- 箭头 -->
+        <!-- <div class="arrow" @click="handleShrink('bottom')">
+            <el-icon class="icon" color="#141414"><DArrowLeft /></el-icon>
+        </div> -->
         <div class="file-title">
             <img src="@/assets/images/common/chart-yellow.png" alt="" />
             果园档案
@@ -88,7 +93,7 @@
 
 <script setup>
 import eventBus from "@/api/eventBus";
-import { onMounted, ref } from "vue";
+import { onMounted, ref, onBeforeUnmount, reactive } from "vue";
 const outputBox = ref([
     { id: 1, name: "产量估计", field: "cl", value: "--", unit: "斤/亩" },
     { id: 2, name: "高质果率", field: "spgl", value: "--", unit: "%" },
@@ -216,6 +221,31 @@ function setFileData(type_id) {
     qualityBox.value[1].value = res.ecology_info.transmittance;
     qualityBox.value[2].value = res.ecology_info.dp_situation;
 }
+
+// 可拖拽
+const position = reactive({ x: 0, y: window.innerHeight - 322 });
+const isDragging = ref(false);
+const offset = reactive({ x: 0, y: 0 });
+const draggable = ref(null);
+function startDrag(event) {
+  isDragging.value = true;
+  offset.x = event.clientX - position.x;
+  offset.y = event.clientY - position.y;
+  document.addEventListener('mousemove', onDrag);
+  document.addEventListener('mouseup', stopDrag);
+}
+
+function onDrag(event) {
+  if (!isDragging.value) return;
+  position.x = event.clientX - offset.x;
+  position.y = event.clientY - offset.y;
+}
+
+function stopDrag() {
+  isDragging.value = false;
+  document.removeEventListener('mousemove', onDrag);
+  document.removeEventListener('mouseup', stopDrag);
+}
 </script>
 
 <style lang="scss" scoped>
@@ -224,6 +254,8 @@ function setFileData(type_id) {
     background: url("@/assets/images/home/file-bg-w.png") no-repeat top center / 100% 100%;
     margin-left: 12px;
     padding: 12px 18px 20px 16px;
+    position: absolute;
+    
     .file-title {
         font-size: 20px;
         color: #ffd489;

src/views/home/components/weatherChart.vue

@@ -1,10 +1,17 @@
 <template>
-    <div ref="chartDom" class="chart"></div>
+    <div class="chart-wrap">
+        <div ref="chartDom" class="chart">
+        </div>
+        <div class="chart-weather">
+            <i class="chart-i" v-for="(item, index) in weatherChartData" :key="index" :class="'qi-' + item.iconDay + '-fill'"></i>
+        </div>
+    </div>
 </template>
 
 <script setup>
 import { onMounted, ref, nextTick } from "vue";
 import * as echarts from "echarts";
+import "qweather-icons/font/qweather-icons.css";
 
 // const props = defineProps({
 //     list: {
@@ -16,13 +23,6 @@ import * as echarts from "echarts";
 
 let demoData = [
     {
-        sourceof: null,
-        create_by: null,
-        update_by: null,
-        remark: null,
-        sys_dept_code: null,
-        createTime: null,
-        updateTime: null,
         rq: "08/28",
         weatherZgwd: 30,
         weatherZdwd: 18,
@@ -30,20 +30,9 @@ let demoData = [
         weatherTqNight: "晴",
         weatherImgDay: "https://d.scggqx.com/forecast/img/小雨.png",
         weatherImgNight: "https://d.scggqx.com/forecast/img/小雨.png",
-        windDirectDay: "南风",
-        windDirectNight: "南风",
-        windPowerDay: "微风",
-        windPowerNight: "微风",
         week: "星期三",
     },
     {
-        sourceof: null,
-        create_by: null,
-        update_by: null,
-        remark: null,
-        sys_dept_code: null,
-        createTime: null,
-        updateTime: null,
         rq: "08/29",
         weatherZgwd: 31,
         weatherZdwd: 19,
@@ -51,20 +40,9 @@ let demoData = [
         weatherTqNight: "晴",
         weatherImgDay: "https://d.scggqx.com/forecast/img/小雨.png",
         weatherImgNight: "https://d.scggqx.com/forecast/img/小雨.png",
-        windDirectDay: "南风",
-        windDirectNight: "南风",
-        windPowerDay: "微风",
-        windPowerNight: "微风",
         week: "星期四",
     },
     {
-        sourceof: null,
-        create_by: null,
-        update_by: null,
-        remark: null,
-        sys_dept_code: null,
-        createTime: null,
-        updateTime: null,
         rq: "08/30",
         weatherZgwd: 30,
         weatherZdwd: 19,
@@ -72,20 +50,9 @@ let demoData = [
         weatherTqNight: "多云",
         weatherImgDay: "https://d.scggqx.com/forecast/img/小雨.png",
         weatherImgNight: "https://d.scggqx.com/forecast/img/小雨.png",
-        windDirectDay: "西南风",
-        windDirectNight: "北风",
-        windPowerDay: "微风",
-        windPowerNight: "微风",
         week: "星期五",
     },
     {
-        sourceof: null,
-        create_by: null,
-        update_by: null,
-        remark: null,
-        sys_dept_code: null,
-        createTime: null,
-        updateTime: null,
         rq: "08/31",
         weatherZgwd: 30,
         weatherZdwd: 21,
@@ -93,20 +60,9 @@ let demoData = [
         weatherTqNight: "雷阵雨",
         weatherImgDay: "https://d.scggqx.com/forecast/img/小雨.png",
         weatherImgNight: "https://d.scggqx.com/forecast/img/小雨.png",
-        windDirectDay: "北风",
-        windDirectNight: "南风",
-        windPowerDay: "3~4级",
-        windPowerNight: "3~4级",
         week: "星期六",
     },
     {
-        sourceof: null,
-        create_by: null,
-        update_by: null,
-        remark: null,
-        sys_dept_code: null,
-        createTime: null,
-        updateTime: null,
         rq: "09/01",
         weatherZgwd: 25,
         weatherZdwd: 16,
@@ -114,20 +70,9 @@ let demoData = [
         weatherTqNight: "多云",
         weatherImgDay: "https://d.scggqx.com/forecast/img/多云.png",
         weatherImgNight: "https://d.scggqx.com/forecast/img/多云.png",
-        windDirectDay: "北风",
-        windDirectNight: "北风",
-        windPowerDay: "3~4级",
-        windPowerNight: "3~4级",
         week: "星期日",
     },
     {
-        sourceof: null,
-        create_by: null,
-        update_by: null,
-        remark: null,
-        sys_dept_code: null,
-        createTime: null,
-        updateTime: null,
         rq: "09/02",
         weatherZgwd: 26,
         weatherZdwd: 15,
@@ -135,20 +80,9 @@ let demoData = [
         weatherTqNight: "晴",
         weatherImgDay: "https://d.scggqx.com/forecast/img/阴.png",
         weatherImgNight: "https://d.scggqx.com/forecast/img/阴.png",
-        windDirectDay: "北风",
-        windDirectNight: "北风",
-        windPowerDay: "3~4级",
-        windPowerNight: "微风",
         week: "星期一",
     },
     {
-        sourceof: null,
-        create_by: null,
-        update_by: null,
-        remark: null,
-        sys_dept_code: null,
-        createTime: null,
-        updateTime: null,
         rq: "09/03",
         weatherZgwd: 27,
         weatherZdwd: 18,
@@ -156,20 +90,9 @@ let demoData = [
         weatherTqNight: "阴",
         weatherImgDay: "https://d.scggqx.com/forecast/img/小雨.png",
         weatherImgNight: "https://d.scggqx.com/forecast/img/小雨.png",
-        windDirectDay: "无持续风向",
-        windDirectNight: "无持续风向",
-        windPowerDay: "微风",
-        windPowerNight: "微风",
         week: "星期二",
     },
     {
-        sourceof: null,
-        create_by: null,
-        update_by: null,
-        remark: null,
-        sys_dept_code: null,
-        createTime: null,
-        updateTime: null,
         rq: "09/04",
         weatherZgwd: 27,
         weatherZdwd: 18,
@@ -177,10 +100,6 @@ let demoData = [
         weatherTqNight: "阴",
         weatherImgDay: "https://d.scggqx.com/forecast/img/小雨.png",
         weatherImgNight: "https://d.scggqx.com/forecast/img/小雨.png",
-        windDirectDay: "无持续风向",
-        windDirectNight: "无持续风向",
-        windPowerDay: "微风",
-        windPowerNight: "微风",
         week: "星期二",
     },
 ];
@@ -199,8 +118,6 @@ let weatherImgDaylist = ref([
     "多云"
 ]);
 let weatherImgNightlist = [];
-let windDirectlist = [];
-let windPowerlist = [];
 let weatherZgwdlist = [];
 let weatherZdwdlist = [];
 
@@ -217,8 +134,6 @@ demoData.forEach((item) => {
     weatherNightlist.push(item.weatherTqNight);
     // weatherImgDaylist.push(item.weatherImgDay);
     weatherImgNightlist.push(item.weatherImgNight);
-    windDirectlist.push(item.windDirectDay);
-    windPowerlist.push(item.windPowerDay);
     weatherZgwdlist.push(item.weatherZgwd);
     weatherZdwdlist.push(item.weatherZdwd);
 });
@@ -227,10 +142,10 @@ minWD = Math.min(...weatherZdwdlist) - 30;
 let weatherImgDaylistStyle = weatherImgDaylist.value.map((item) => {
     let dateUrl = item;
     return {
-        backgroundColor: {
-            // image: "@/assets/images/home/多云.png",
-            image: require(`@/assets/images/home/${item}.svg`)
-        },
+        // backgroundColor: {
+        //     // image: "@/assets/images/home/多云.png",
+        //     image: require(`@/assets/images/home/${item}.svg`)
+        // },
         height: 20,
         width: 20,
         color: "#fff"
@@ -295,7 +210,7 @@ const options = {
             // 日期
             type: "category",
             position: "top",
-            offset: -40,
+            offset: -46,
             boundaryGap: false,
             zlevel: 100,
             axisLine: {
@@ -461,12 +376,14 @@ const options = {
     ],
 };
 
+const weatherChartData = ref([])
 onMounted(() => {
     
   const point = sessionStorage.getItem('point')
   // 获取气象图表数据
   VE_API.mini_farm.gardenItemChart({point}).then(({data}) =>{
     console.log('tq', data)
+    weatherChartData.value = data.weatherData
     // minData.value = res.data.weatherData.map(item =>item.tempMin)
     // lineYdata.value = res.data.weatherData.map(item =>item.tempMax)
     nextTick(() => {
@@ -509,6 +426,33 @@ function dateFormat(date) {
 </script>
 
 <style lang="scss" scoped>
+.chart-wrap {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .chart-weather {
+        display: flex;
+        position: absolute;
+        left: 0;
+        top: 20px;
+        width: 100%;
+        .chart-i {
+            color: #FFD489;
+            width: 16px;
+            padding-left: 34px;
+        }
+        .chart-i:nth-child(1) {
+            padding-left: 10px;
+        }
+        .chart-i:nth-child(2) {
+            padding-left: 32px;
+        }
+        .chart-i:nth-child(3) {
+            padding-left: 34px;
+        }
+    }
+
+}
 .chart {
     width: 100%;
     height: 100%;

src/views/home/index.vue

@@ -12,38 +12,8 @@
                 </div>
             </div>
             <div class="home-bottom">
-                <!-- <time-line class="time-wrap yes-events"></time-line>
-        <img class="fly-icon" src="@/assets/images/home/fly-icon.png" alt=""> -->
-                <!-- <div class="log-box yes-events">
-          <chart-box class="overflow">
-            <template #title-name>
-              <div class="box-name" @click="handleSelectArea">果园日志</div>
-            </template>
-            <div class="log-content">
-              2月13日，共抽样193棵树，拍摄了193张照片，{{indicatorChartData.content}}
-            </div>
-            <div class="chart-wrap">
-              <indicator-chart :key="0 + 'log'" type="feature" :chartData="indicatorChartData"></indicator-chart>
-            </div>
-          </chart-box>
-        </div> -->
-                <!-- <div class="file-box yes-events">
-                    <chart-box name="果园档案">
-                        <template #title-right>
-                        <el-icon class="arrow-icon cursor-pointer" color="#141414"
-                            ><DArrowLeft
-                        /></el-icon>
-                        <div class="edit-btn cursor-pointer" @click="toFilePage">编辑</div>
-                        </template>
-                        <file-bar></file-bar>
-                    </chart-box>
-                </div> -->
-                <div class="garden-file yes-events" :class="{ isShrink: isShrink }">
+                <div class="garden-file" :class="{ isShrink: isShrink }">
                     <home-file></home-file>
-                    <!-- 箭头 -->
-                    <div class="arrow" @click="handleShrink('bottom')">
-                        <el-icon class="icon" color="#141414"><DArrowLeft /></el-icon>
-                    </div>
                 </div>
             </div>
             <div class="right yes-events">
@@ -766,7 +736,7 @@ const photoList = ref([
         .home-bottom {
             display: flex;
             align-items: flex-end;
-            width: calc(100% - 60px - 430px * 2);
+            width: calc(100% - 20px - 430px * 2);
             height: 152px;
             align-self: flex-end;
             .time-wrap {
@@ -817,8 +787,10 @@ const photoList = ref([
                 // min-height: 210px;
                 // width: 640px;
                 transition: all 0.3s;
-                width: 800px;
-                height: 320px;
+                // width: 800px;
+                // height: 320px;
+                width: 100vw;
+                height: 100vh;
                 overflow: hidden;
                 &.isShrink {
                     height: 66px;

src/views/home/map/samplePointLayer.js

@@ -197,37 +197,41 @@ class SamplePointLayer {
       return
     }
     eventBus.emit("resetFileActive", colorObj.key || colorObj.name)
-    // 遍历 sampleData
-    Object.entries(sampleData.obj).forEach(([key, geoHashSample]) => {
-      // 根据 key 找到 legend 中的颜色
-      const legendItem = colorObj.list.find(item => item.val === key);
-      const color = legendItem ? legendItem.color : null;
-      if (color && geoHashSample.length > 0) {
-        let features = []
-        this.pointArr.forEach(point => {
-          if (geoHashSample.includes(point.geoHashSample)) {
-            point.iconName = 'defalut'
-            point.color = color
-            that.getIcon(point)
-            let pointRes = newPoint(point);
-            features.push(pointRes)
-          } else {
+
+    
+    // 创建一个映射表：geoHashSample -> color
+    const geoHashToColorMap = {};
+    
+    colorObj.list.forEach(legendItem => {
+      const geoHashes = sampleData.obj[legendItem.val] || [];
+      geoHashes.forEach(geoHash => {
+        geoHashToColorMap[geoHash] = legendItem.color;
+      });
+    });
+
+      // 3. 更新pointArr中的颜色
+      let features = []
+      this.pointArr.map(point => {
+        if (point.geoHashSample in geoHashToColorMap) {
             point.iconName = 'defalut'
-            point.color = "#DDDDDD"
+            point.color = geoHashToColorMap[point.geoHashSample]
             that.getIcon(point)
             let pointRes = newPoint(point);
             features.push(pointRes)
-          }
-        });
+        } else {
+          point.iconName = 'defalut'
+          point.color = "#DDDDDD"
+          that.getIcon(point)
+          let pointRes = newPoint(point);
+          features.push(pointRes)
+        }
+      })
+
         const source = new VectorSource({
           features: features,
         });
         that.clusterSource.setSource(source)
-        // setTimeout(() => {
-        //   that.mapRef.fit(that.clusterSource.source.getExtent(), { padding: [100, 100, 100, 100] })
-        // }, 100)
-      }
-    });
+
   }
 
   toggleFilePoint(arr) {
@@ -441,7 +445,7 @@ class SamplePointLayer {
   getIcon(item) {
     // let imgSrc = require(`@/assets/images/map/${item.iconName}-icon.png`)
     let imgSrc = require('@/assets/images/map/status/status-zc.png')
-    let scale = 0.6
+    let scale = 0.8
     if (item.status == 1) {
       imgSrc = require('@/assets/images/map/status/status-szyc.png')
     }
@@ -461,7 +465,7 @@ class SamplePointLayer {
     // }
     if (item.noImg === 1) {
       imgSrc = require('@/assets/images/map/status/defalut-icon.png')
-      scale = 0.2
+      scale = 0.3
     }
     if (item.nonghu === 1) {
       imgSrc = require('@/assets/images/map/status/nonghu-icon.png')