Merge branch 'master' of http://www.sysuimars.cn:3000/feiniao/feiniao-pc-vue

src/components/chartBox.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="chart-box">
-    <div class="chart-title">
+    <div class="chart-title" v-if="name">
       <div class="name">
         <img src="@/assets/images/common/chart-icon.png" alt="" />
         <span>{{name}}</span>
@@ -10,6 +10,7 @@
         <slot name="title-right"></slot>
       </div>
     </div>
+    <slot v-else name="title-name"></slot>
     <div class="chart-content">
         <div v-show="arrow" :class="['arrow',arrow]" @click="handleShrink">
             <el-icon class="icon" color="#141414"><DArrowLeft /></el-icon>

src/components/charts/barChart.vue

@@ -6,6 +6,7 @@
 import { onMounted, ref } from "vue";
 import * as echarts from "echarts";
 import { barOption } from "./options/barOption.js";
+import eventBus from "@/api/eventBus";
 
 const props = defineProps({
     styleName: {
@@ -26,6 +27,27 @@ const chartDom = ref(null);
 const myChart = ref(null);
 const options = ref(null);
 
+// 用于存储当前高亮的数据索引
+let currentHighlightedIndex = null;
+
+eventBus.on("clear:area",()=>{
+    myChart.value.dispatchAction({
+        type: "downplay",
+        seriesIndex: 0,
+        dataIndex: currentHighlightedIndex,
+    });
+    myChart.value.dispatchAction({
+        type: "downplay",
+        seriesIndex: 1,
+        dataIndex: currentHighlightedIndex,
+    });
+    myChart.value.dispatchAction({
+        type: "downplay",
+        seriesIndex: 2,
+        dataIndex: currentHighlightedIndex,
+    });
+})
+
 const initData = () => {
     if (props.styleName === "styleName2") {
         const arr = [];
@@ -56,15 +78,13 @@ const initData = () => {
     options.value = barOption[props.styleName];
     myChart.value.setOption(options.value);
 
-    // 用于存储当前高亮的数据索引
-    let currentHighlightedIndex = null;
+    
     // 监听点击事件
     myChart.value.on("click", (params) => {
         // params 是点击事件返回的所有信息对象
-        console.log(params);
+        eventBus.emit('echart:barClick',params.name)
 
         // 例如，可以在控制台输出点击的柱状图的值
-        console.log("你点击了：" + params.name + "，其值为：" + params.value);
 
         // 如果当前已经有高亮的数据索引，并且不是当前点击的索引，则取消之前的高亮
         if (currentHighlightedIndex !== null && currentHighlightedIndex !== params.dataIndex) {
@@ -90,6 +110,7 @@ const initData = () => {
                 dataIndex: currentHighlightedIndex,
             });
         }
+        
         // 高亮当前点击的柱状体
         myChart.value.dispatchAction({
             type: "highlight",
@@ -108,7 +129,6 @@ const initData = () => {
             seriesIndex: 2,
             dataIndex: params.dataIndex,
         });
-        console.log("00000000", params.dataIndex);
 
         // 高亮当前点击的柱状体
         // myChart.value.dispatchAction({

src/components/charts/options/barOption.js

@@ -90,7 +90,7 @@ const styleName2 = {
           ]),
         },
         emphasis: {
-          color: '#ff0000' // 高亮时的颜色
+          color: '#B81500' // 高亮时的颜色
         },
         // borderRadius: [2, 2, 0, 0],
       },
@@ -122,7 +122,7 @@ const styleName2 = {
           ]),
         },
         emphasis: {
-          color: '#ff0000' // 高亮时的颜色
+          color: '#B81500' // 高亮时的颜色
         },
         borderRadius: [2, 2, 0, 0],
       },
@@ -137,7 +137,7 @@ const styleName2 = {
           color: "rgba(56,56,56,0.94)",
         },
         emphasis: {
-          color: '#ff0000' // 高亮时的颜色
+          color: '#B81500' // 高亮时的颜色
         },
         borderRadius: [2, 2, 0, 0],
       },

src/components/fnHeader.vue

@@ -21,7 +21,7 @@
       <el-icon size="25"><MoreFilled /></el-icon>
       <div class="time">
         <div>21:05:46</div>
-        <span>2024.11.04 星期一</span>
+        <span>2025.01.14 星期二</span>
       </div>
     </div>
   </div>

src/components/navigation.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="navigation yes-events">
     <img class="tabs" src="@/assets/images/home/tabs.png" alt="">
-    <img class="tool" src="@/assets/images/home/tool.png" alt="">
+    <!-- <img class="tool" src="@/assets/images/home/tool.png" alt=""> -->
     <!-- <div class="btn" @click="toPage">农场确权</div> -->
   </div>
 </template>

src/components/toolList.vue

@@ -6,6 +6,7 @@
 
 <script setup>
 import {ref} from 'vue'
+import eventBus from "@/api/eventBus";
 const props = defineProps({
   direction: {
     type: String,
@@ -19,6 +20,10 @@ const props = defineProps({
 
 const emit = defineEmits(['handleActive'])
 
+eventBus.on('tool:updateAct',(e)=>{
+  active.value = e
+})
+
 const active = ref(0)
 const handleActive = (value,index) =>{
     active.value = index

src/views/home/components/homePage.vue

@@ -3,9 +3,10 @@
     <div class="chart-item">
       <chart-box name="气象预警" arrow="left">
         <div class="base-wrap">
-          <div class="base-item">111</div>
+          <!-- <div class="base-item">111</div> -->
+          <img src="@/assets/images/home/base.png" alt="">
         </div>
-        <one-line-chart></one-line-chart>
+        <one-line-chart class="line-chart"></one-line-chart>
       </chart-box>
     </div>
     <div class="chart-item phenology">
@@ -171,6 +172,18 @@ const evaluateYData = [33, 40, 52]
     &.chart-item:last-child {
       margin: 0;
     }
+    .base-wrap{
+      width: 100%;
+      height: 65px;
+      margin: 5px 0;
+      img{
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .line-chart{
+        height: calc(100% - 55px);
+      }
     .box-bg{
       border-radius: 2px 2px 0 0;
       font-size: 12px;

src/views/home/index.vue

@@ -13,12 +13,17 @@
       </div>
       <div class="home-bottom">
         <div class="log-box yes-events">
-          <chart-box name="果园日志">
+          <chart-box>
+            <template #title-name>
+              <div class="box-name" @click="handleSelectArea">果园日志</div>
+            </template>
             <div class="log-content">
               10月8日，共抽样 **棵树 ，拍摄了 多少 张照片。10月8日，共抽样 **棵树 ，拍摄了 多少 张照片。10月8日，共抽样 **棵树 ，拍摄了 多少 张照片。10月8日，共抽样 **棵树 ，拍摄了 多少 张照片。10月8日，共抽样 **棵树 ，拍摄了 多少 张照片。
             </div>
             <div class="chart-wrap">
               <indicator-chart></indicator-chart>
+              <img class="line" src="@/assets/images/home/time1.png" alt="">
+              <img src="@/assets/images/home/text.png" alt="">
             </div>
           </chart-box>
         </div>
@@ -30,30 +35,62 @@
               /></el-icon>
               <div class="edit-btn cursor-pointer" @click="toFilePage">编辑</div>
             </template>
-            <file-bar></file-bar>
+            <!-- <file-bar></file-bar> -->
+            <img src="@/assets/images/home/line-data.png" alt="">
           </chart-box>
         </div>
       </div>
       <div class="right yes-events">
         <div class="list">
           <chart-box name="农事列表" arrow="arrow-left">
-            <div class="img-box">
-              <img src="@/assets/images/home/ns.png" alt="">
-            </div>
+            <template v-if="rightIndex===0">
+              <img class="tabs" src="@/assets/images/home/ns-tabs.png" alt="">
+              <div class="img-box">
+                <img @click="handleAct(item)" v-for="item in 4" :key="item" :src="require(`@/assets/images/home/0${act<=2&&act==item?item+'-act':item}.png`)" alt="">
+              </div>
+            </template>
+            <template v-if="rightIndex===1">
+              <div class="img-box1">
+                <img  src="@/assets/images/home/fh01.png" alt="">
+                <img src="@/assets/images/home/fh02.png" alt="">
+              </div>
+            </template>
+            <template v-if="rightIndex===2">
+              <div class="btn-wrap">
+                <div :class="{active:btnIndex===0}" @click="handleBtn(0)">{{btnIndex===0&&btnName!=''?'采样分区：'+ btnName:'选择采样分区'}}</div>
+                <div :class="{active:btnIndex===1}" @click="handleBtn(1)">{{btnIndex===1&&btnName!=''?'单树编号：'+ btnName:'选择树'}}</div>
+              </div>
+              <div class="img-box2" v-show="showPoint">
+                <img src="@/assets/images/home/line-chart.png" alt="">
+                <img  src="@/assets/images/home/fh01.png" alt="">
+              </div>
+              <div class="img-box2" v-show="!showPoint">
+                <img src="@/assets/images/home/line-chart1.png" alt="">
+                <img  src="@/assets/images/home/fh02.png" alt="">
+              </div>
+            </template>
           </chart-box>
         </div>
-        <tool-list direction="right" :list="rightToolList"></tool-list>
+        <tool-list direction="right" :list="rightToolList" @handleActive="handleActiveRight"></tool-list>
       </div>
 
       <!-- 图例 -->
-      <img class="legend" src="@/assets/images/home/legend.png" alt="">
+      <img class="legend yes-events" src="@/assets/images/home/legend.png" alt="">
     </div>
   </div>
   <div ref="mapRef" class="bottom-map"></div>
+
+  <!-- 图片弹窗 -->
+  <!-- <PicturePreview
+    :show="dialogVisible"
+    :imageUrl="urls"
+    :curIndex="urlsIndex"
+  ></PicturePreview> -->
 </template>
 
 <script setup>
 import { onMounted, ref } from "vue";
+import PicturePreview from "@/components/PicturePreview.vue";
 import fnHeader from "@/components/fnHeader.vue";
 import navigation from "@/components/navigation.vue";
 import chartBox from "@/components/chartBox.vue";
@@ -68,7 +105,8 @@ import { useRouter } from "vue-router";
 import SamplePointLayer from "./map/samplePointLayer";
 import {useStore} from "vuex";
 import RegionLayer from "./map/regionLayer";
-
+import eventBus from "@/api/eventBus";
+// import "./map/mockFarmLayer"
 let store = useStore()
 const components = {
   homePage,
@@ -96,6 +134,62 @@ onMounted(() => {
   regionLayer = new RegionLayer(homeMap.kmap.map, currentFarm, currentRegion)
 });
 
+const dialogVisible = ref(true)
+
+const btnIndex = ref(null)
+const btnName = ref("")
+const handleBtn = (e) =>{
+  btnIndex.value = e
+}
+
+//点击果园日志
+const handleSelectArea = () =>{
+  eventBus.emit("clear:area")
+  console.log('currentFarm',currentFarm);
+  regionLayer.reset(currentFarm)
+}
+
+//农事点击高亮
+const act = ref(null)
+const handleAct = (v) =>{
+  act.value = v
+  regionLayer.selectArea(v,["#2199f87a","#2199f87a"])
+}
+
+//柱状图点击事件监听
+eventBus.on('echart:barClick',(e)=>{
+  const arr =  ["病虫害03", "病害1", "虫害1","病虫害02"]
+  const isDraw = arr.includes(e)
+  if(isDraw){
+    regionLayer.selectAreaMultiple([5,8,10],["#b815007a","#b815007a"])
+  }
+})
+
+const showPoint = ref(true)
+//地图点击事件
+eventBus.on('click:point',(e)=>{
+  if(btnIndex.value===1){
+    btnName.value=e.name
+    if(e.value===1){
+      showPoint.value = true
+    }else{
+      showPoint.value = false
+    }
+  }
+  // regionLayer.reset(currentFarm,currentFarm)
+})
+
+eventBus.on('click:area',(e)=>{
+  if(btnIndex.value===0){
+    btnName.value=e.name
+    if(e.value===1){
+      showPoint.value = true
+    }else{
+      showPoint.value = false
+    }
+  }
+})
+
 const currentComponent = ref("homePage");
 const handleActiveLeft = (e) => {
   currentComponent.value = e.componentName;
@@ -122,15 +216,31 @@ const leftToolList = [
   },
 ];
 
+const rightIndex = ref(0)
+const handleActiveRight = ({index}) => {
+    rightIndex.value = index
+    btnIndex.value = null
+    btnName.value = ""
+    if(index!==0){
+      act.value = null
+    }
+};
+const hanleRightIndex = (num) =>{
+  rightIndex.value = num
+  eventBus.emit('tool:updateAct',num)
+}
 const rightToolList = [
   {
     title: "农事列表",
+    index:0,
   },
   {
-    title: "复核对比",
+    title: "处方分析",
+    index:2,
   },
   {
-    title: "处方分析",
+    title: "复核对比",
+    index:1,
   },
 ];
 
@@ -167,15 +277,55 @@ const toFilePage = () => {
       .list {
         width: 100%;
         height: 100%;
+        .btn-wrap{
+          width: 100%;
+          height: 25px;
+          line-height: 25px;
+          margin: 10px 0;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          div{
+            width: 48%;
+            height: 100%;
+            color: #FFD489;
+            border: 1px solid rgba(255,213,137,0.6);
+            border-radius: 2px;
+            text-align: center;
+            font-size: 12px;
+            cursor: pointer;
+            &.active{
+              background: #FFD489;
+              color: #000;
+            }
+          }
+        }
         .img-box{
           width: 100%;
-          height: 100%;
-          overflow: hidden;
+          height: calc(100% - 35px);
+          overflow: auto;
+        }
+        .img-box1{
+          width: 100%;
+          height: calc(100% - 10px);
+          overflow: auto;
+          margin-top: 10px;
+        }
+        .img-box2{
+          width: 100%;
+          height: calc(100% - 45px);
+          overflow: auto;
+          margin-top: 10px;
         }
         img{
           width: 100%;
           height: auto;
           object-fit: cover;
+          margin-bottom: 12px;
+          cursor: pointer;
+        }
+        .mt{
+          margin-top: -12px;
         }
       }
     }
@@ -189,11 +339,34 @@ const toFilePage = () => {
         height: 34%;
         width: calc(100% - 340px - 28px);
         margin-right: 28px;
+        .box-name{
+          width: 89px;
+          height: 22px;
+          text-align: center;
+          line-height: 22px;
+          border-radius: 20px;
+          margin: 10px 0 5px 6px;
+          cursor: pointer;
+          background: linear-gradient(0deg,#BBA269 0%, #3D3523 100%);
+        }
         .log-content {
           font-size: 12px;
           line-height: 1.5;
           padding: 0 18px;
         }
+        .chart-wrap{
+          width: 100%;
+          height: calc(100% - 50px);
+          overflow: auto;
+          .line{
+            margin-top: 10px;
+            margin-bottom: 12px;
+          }
+          img{
+            width: 100%;
+            margin-bottom: 10px;
+          }
+        }
       }
 
       .file-box {
@@ -201,6 +374,10 @@ const toFilePage = () => {
         min-height: 210px;
         width: 340px;
         position: relative;
+        img{
+          width: 100%;
+          margin-top: 12px;
+        }
         .arrow-icon {
           top: -32px;
           left: 50%;

src/views/home/map/homeMap.js

@@ -19,7 +19,7 @@ class HomeMap {
   }
 
   initMap(location, target) {
-    let level = 18;
+    let level = 19;
     let coordinate = util.wktCastGeom(location).getFirstCoordinate();
     this.kmap = new KMap.Map(target, level, coordinate[0], coordinate[1], null, 6, 22);
     eventBus.emit('homeMap:init', this.kmap);

src/views/home/map/regionLayer.js

@@ -5,63 +5,107 @@ import Point from "ol/geom/Point.js";
 import Feature from "ol/Feature";
 import VectorLayer from "ol/layer/Vector.js";
 import WKT from "ol/format/WKT.js";
-import ScaleLine from "ol/control/ScaleLine";
+import { Circle as CircleStyle, Fill, Text } from "ol/style.js";
 import { useRouter } from "vue-router";
-import {unByKey} from "ol/Observable";
+import { unByKey } from "ol/Observable";
 import Style from "ol/style/Style";
 import Icon from "ol/style/Icon";
-import {Vector as VectorSource} from "ol/source";
-import {newRegionFeature} from "../../zhgl/map";
+import { Vector as VectorSource } from "ol/source";
+import { newRegionFeature } from "../../zhgl/map";
+import Stroke from "ol/style/Stroke";
 
 /**
  * @description 地图层对象
  */
 class RegionLayer {
-  constructor(map, farm) {
-    let that = this;
-    this.farmId = farm.id
-    this.vectorStyle  = new KMap.VectorStyle();
+    constructor(map, farm) {
+        let that = this;
+        this.farmId = farm.id;
+        this.vectorStyle = new KMap.VectorStyle();
 
-    this.regionLayer = new KMap.VectorLayer("regionLayer",99,{
-      minZoom:15,
-      style:this.vectorStyle.getPolygonStyle("#fba50410", "#eee5e5", 2)
-    })
+        this.area = null
+        this.index = null
+        this.colorArea = ["#fba50410","#eee5e5"]
 
+        this.regionLayer = new KMap.VectorLayer("regionLayer", 99, {
+            minZoom: 15,
+            style: (f) => {
+                let style1
+                style1 = this.vectorStyle.getPolygonStyle("#fba50410", "#eee5e5", 2);
+                if(f.get("bgName")==="active"){
+                    style1 = this.vectorStyle.getPolygonStyle(this.colorArea[0], this.colorArea[1], 2);
+                }
+                const style2 = new Style({
+                    text: new Text({
+                        text: f.get("id"),
+                        color: "#120046",
+                        stroke: new Stroke({
+                            color: "#FFFFFF",
+                            width: 2,
+                        }),
+                        backgroundFill: new Fill({
+                            color: "#f8f9fa10",
+                            width: 2,
+                        }),
+                        font: "30px sans-serif",
+                    }),
+                });
+                return [style1];
+            },
+        });
 
-    map.addLayer(this.regionLayer.layer)
-    this.initData(this.farmId)
-  }
-  //得到点样式
-  getStyle(feature){
-    return this.getIconStyle(feature)
-  }
+        map.addLayer(this.regionLayer.layer);
+        this.initData(this.farmId);
+    }
+    //得到点样式
+    getStyle(feature) {
+        return this.getIconStyle(feature);
+    }
+
+    selectArea(index,color){
+        if(this.index !=null){
+            this.area[this.index].set("bgName", "defalut");
+        }
+        this.colorArea = color
+        this.area[index].set("bgName", "active");
+        this.index = index
+    }
 
-  initData(farmId){
-    let that = this
-    VE_API.region.listArea().then(({data})=>{
-      let features = []
-      for(let item of data){
-        let f = newRegionFeature(item,"wkt");
-        features.push(f)
-      }
-      const source = new VectorSource({
-        features: features,
-      });
-      that.regionLayer.layer.setSource(source)
-    })
-  }
+    selectAreaMultiple(arr,color){
+        arr.forEach(item =>{
+            console.log('item',item);
+            this.area[item].set("bgName", "active");
+        })
+        this.colorArea = color
+    }
+
+    initData(farmId) {
+        let that = this;
+        VE_API.region.listArea().then(({ data }) => {
+            let features = [];
+            for (let item of data) {
+                let f = newRegionFeature({...item,bgName:"defalut"}, "wkt");
+                features.push(f);
+            }
+            that.area = features
+            const source = new VectorSource({
+                features: features,
+            });
+            that.regionLayer.layer.setSource(source);
+        });
+    }
 
-  reset(farm, region){
-    this.clearLayer()
-    this.initData(farm.id, region.id)
-  }
+    reset(farm, region) {
+        this.clearLayer();
+        this.initData(farm.id);
+    }
 
-  // 清除聚合图层，解除绑定
-  clearLayer() {
-    if (this.regionLayer) {
-      this.regionLayer.layer.getSource().clear()
+    // 清除聚合图层，解除绑定
+    clearLayer() {
+        if (this.regionLayer) {
+            this.regionLayer.layer.getSource().clear();
+        }
     }
-  }
 }
 
 export default RegionLayer;

src/views/home/map/samplePointLayer.js

@@ -12,6 +12,7 @@ import Style from "ol/style/Style";
 import Icon from "ol/style/Icon";
 import {Cluster, Vector as VectorSource} from "ol/source";
 import {newPoint} from "../../zhgl/map";
+import eventBus from "@/api/eventBus";
 
 /**
  * @description 地图层对象
@@ -28,18 +29,23 @@ class SamplePointLayer {
       minDistance: 60,
     });
 
+    this.curPoint = null
+    this.curArea = null
+
     this.treeClusterLayer = new KMap.VectorLayer("tree-cluster",999,{
       minZoom:15,
       source:this.clusterSource,
       style:(f)=> this.getStyle(f)})
     map.addLayer(this.treeClusterLayer.layer)
     this.initData(this.farmId, this.regionId)
+    this.addMapSingerClick(map);
   }
   getIconStyle(feature){
     let style = new Style({
       image: new Icon({
-        src: feature.get('icon'),
-        scale:1,
+        // src: feature.get('icon'),
+        src: require(`@/assets/images/map/${feature.get('iconName')}-icon.png`),
+        scale:0.3,
       })
     });
     return style
@@ -64,8 +70,10 @@ class SamplePointLayer {
   initData(farmId, regionId){
     let that = this
     VE_API.sample.list({farmId,regionId}).then(({data})=>{
+      // data[0].status = 9
       let features = []
       for(let item of data){
+        item.iconName='defalut'
         that.getIcon(item)
         let point = newPoint(item);
         features.push(point)
@@ -77,21 +85,52 @@ class SamplePointLayer {
     })
   }
 
+  addMapSingerClick(kmap){
+    let that = this
+    kmap.on("singleclick", (evt) => {
+      kmap.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
+        if (layer instanceof VectorLayer && layer.get("name") === "tree-cluster") {
+          if(that.curPoint){
+            that.curPoint.set("iconName", "defalut");
+          }
+          const featureArr = feature.get("features")
+          const fs = featureArr[0]
+          that.curPoint = fs
+          // fs.set("iconName", "active");
+          eventBus.emit("click:point",{name:fs.get("id"),value:fs.get("highYield")})
+        }
+        if (layer instanceof VectorLayer && layer.get("name") === "regionLayer") {
+          if(that.curArea){
+            that.curArea.set("bgName", "defalut");
+          }
+          feature.set("bgName", "active");
+          that.curArea = feature
+          eventBus.emit("click:area",{name:feature.get("id"),value:feature.get("highYield")})
+        }
+      })
+    })
+  }
+
   getIcon(item){
-    let imgSrc = require('@/assets/status/status_xfdw.png')
-    if(item.status == 1){
-      imgSrc = require('@/assets/status/status_dfh.png')
-    }
-    if(item.status == 2){
-      imgSrc = require('@/assets/status/status_szyc.png')
-    }
-    if(item.status == 3){
-      imgSrc = require('@/assets/status/status_bcyc.png')
-    }
-    item["icon"] = imgSrc
+    // let imgSrc = require(`@/assets/images/map/${item.iconName}-icon.png`)
+    // if(item.status == 9){
+    //   imgSrc = require('@/assets/images/map/active-icon.png')
+    // }
+    // if(item.status == 2){
+    //   imgSrc = require('@/assets/status/status_szyc.png')
+    // }
+    // if(item.status == 3){
+    //   imgSrc = require('@/assets/status/status_bcyc.png')
+    // }
+    // item["icon"] = imgSrc
+  }
+
+  ccc(){
+    console.log('00000000');
   }
 
   reset(farm, region){
+    console.log('farm',farm);
     this.clearCluster()
     this.initData(farm.id, region.id)
   }