feat：添加新增农事页面

src/components/chartBox.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="chart-box">
+  <div class="chart-box" :class="color">
     <div class="chart-title" v-if="name">
       <div class="name">
-        <img src="@/assets/images/common/chart-icon.png" alt="" />
+        <img :src="require(`@/assets/images/common/chart-icon${color}.png`)" alt="" />
         <span>{{name}}</span>
         <slot name="title-left"></slot>
       </div>
@@ -30,6 +30,10 @@ const props = defineProps({
     arrow:{
         type:String,
         defalut:''
+    },
+    color:{
+        type:String,
+        defalut:''
     }
 })
 
@@ -47,6 +51,7 @@ const handleShrink = () =>{
   border-radius: 4px;
   background: #232323;
   border: 0.6px solid rgb(255, 255, 255,0.4);
+
   .chart-title {
     width: 100%;
     height: 38px;
@@ -94,6 +99,16 @@ const handleShrink = () =>{
         }
     }
   }
+
+  &.yellow{
+    border: 1px solid #555555;
+    border-radius: 8px;
+    .chart-title{
+      .name{
+        color: #FFD489;
+      }
+    }
+  }
 }
 
 .shrink-animation {  

src/router/mainRoutes.js

@@ -24,6 +24,7 @@ export default [
         name: "GardenFile",
         component: () => import("@/views/file/index.vue"),
     },
+    //确权
     {
         path: "/authentic",
         name: "Authentic",
@@ -49,10 +50,11 @@ export default [
         name: "Ownership",
         component: () => import("@/views/ownership/index.vue"),
     },
+    //新增农事
     {
-        path: "/zhgl",
-        name: "Zhgl",
-        component: () => import("@/views/zhgl/index.vue"),
+        path: "/add_farm",
+        name: "AddFarm",
+        component: () => import("@/views/addFarm/index.vue"),
     },
     {
         path: "/analysisDetails",

src/views/addFarm/farmMap.js

@@ -0,0 +1,40 @@
+import Layer from "ol/layer/Vector";
+import config from "@/api/config.js";
+import * as KMap from "@/utils/ol-map/KMap";
+import Stroke from "ol/style/Stroke";
+import * as util from "@/common/ol_common.js";
+import Style from "ol/style/Style";
+import Icon from "ol/style/Icon";
+import {Point } from 'ol/geom';
+import Feature from "ol/Feature";
+import WKT from "ol/format/WKT";
+
+/**
+ * @description 智能巡园地图层对象
+ */
+class FarmMap {
+  constructor() {
+    let that = this;
+    let vectorStyle = new KMap.VectorStyle();
+    this.vectorStyle = vectorStyle;
+  }
+
+  initMap(location, target) {
+    let level = 16;
+    let coordinate = util.wktCastGeom(location).getFirstCoordinate();
+    this.kmap = new KMap.Map( target, level, coordinate[0], coordinate[1], null, 1, 22 ,"vec", true, true);
+  }
+
+  // 重新渲染地图
+  updateMap() {
+    setTimeout(() => {
+      this.kmap.map.updateSize()
+    }, 1000);
+  }
+
+  fit(geomOrExtent, padding) {
+    this.kmap.fit(geomOrExtent, padding);
+  }
+}
+
+export default FarmMap;

src/views/addFarm/index.vue

@@ -0,0 +1,111 @@
+<template>
+    <div class="base-container">
+        <fnHeader :hideSwitch="true" :hideShadow="true"></fnHeader>
+        <div class="content">
+            <div class="left">
+                <div class="btn" @click="goBack">
+                    <el-icon><ArrowLeftBold /></el-icon>
+                    返回
+                </div>
+                <div class="left-cont">
+                    <chart-box name="气象预警" arrow="left" color="yellow">
+                        <template #title-right>
+                            <div class="button">123</div>
+                        </template>
+                    </chart-box>
+                </div>
+            </div>
+            <div class="right">
+                <div class="excute-title">执行农事区域</div>
+                <div ref="mapRef" class="bottom-map"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+import fnHeader from "@/components/fnHeader.vue";
+import FarmMap from "./farmMap";
+import chartBox from "@/components/chartBox.vue";
+import { useRouter, useRoute } from "vue-router";
+import { useStore } from "vuex";
+let store = useStore();
+let farmMap = new FarmMap();
+
+const router = useRouter();
+const route = useRoute();
+const mapRef = ref();
+onMounted(() => {
+    getList();
+    farmMap.initMap("POINT(113.61448114737868 23.585550924763083)", mapRef.value);
+});
+
+const workList = ref([]);
+const getList = () => {
+    VE_API.order.fetchWorkList().then(({ data }) => {
+        // data[0].orderStatus = data[0].orderStatus + 1
+        // && (ROLETYPE.value == '0' || ROLETYPE.value == '3')
+        if (route.query.data && JSON.parse(route.query.data)?.farmWorkId) {
+            data = data.find((item) => item.farmWorkLibId === JSON.parse(route.query.data)?.farmWorkId);
+            workList.value = [data];
+        } else {
+            workList.value = data;
+        }
+        console.log("dtafds,", data);
+    });
+};
+
+const currentComponent = ref("prescriptionBox");
+
+const goBack = () => {
+    router.go(-1);
+};
+</script>
+
+<style lang="scss" scoped>
+.base-container {
+    width: 100%;
+    height: 100vh;
+    color: #fff;
+    position: relative;
+    box-sizing: border-box;
+    z-index: 1;
+    background: #000;
+
+    .content {
+        width: 100%;
+        height: calc(100% - 74px - 48px);
+        display: flex;
+        justify-content: space-between;
+        box-sizing: border-box;
+        .left {
+            width: 473px;
+            height: 100%;
+            padding-top: 10px;
+            box-sizing: border-box;
+            .btn {
+                display: flex;
+                align-items: center;
+                border: 1px solid rgba(255, 255, 255, 0.78);
+                border-radius: 4px;
+                padding: 13px;
+                margin-bottom: 13px;
+            }
+            .left-cont {
+                // border-radius: 8px;
+                // border: 1px solid #555555;
+                // box-sizing: border-box;
+            }
+        }
+        .right {
+            width: calc(100% - 473px);
+            height: 100%;
+            .bottom-map {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+}
+</style>

src/views/home/album/index.vue

@@ -43,14 +43,6 @@
                             </el-menu>
                         </div>
                     </el-affix>
-                    <!-- <div
-                        class="export-btn"
-                        v-show="farmId == 766 || farmId == 1"
-                        @click="handleExport"
-                        :style="{ bottom: `${tabBarHeight}px` }"
-                    >
-                        <div class="btn-item"><img src="@/assets/img/old_mini/export.png" />导出</div>
-                    </div> -->
                     <div class="album-r" @scroll="debouncedHandleScroll2">
                         <div
                             class="done-card section"
@@ -261,6 +253,14 @@
                             </div>
                         </div>
                     </div>
+
+                    <!-- 新增农事 -->
+                    <div class="expert-add-btn">
+                        <div class="btn-box" @click="addWork">
+                            <el-icon color="#fff"><Plus /></el-icon>
+                            <span class="PangMenZhengDao-FONT add-text">新增农事</span>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -279,6 +279,10 @@ const store = useStore();
 import AlbumCarousel7d from "./album_compoents/albumCarousel7d";
 const miniUserId = 81881;
 
+const addWork = () =>{
+    router.push('/add_farm')
+}
+
 const route = useRoute();
 // 监听页面滚动，更新当前激活的锚点
 const handleScroll = () => {
@@ -662,12 +666,41 @@ function addNsRecord(){
             }
             .album-bottom {
                 display: flex;
-                // height: calc(100% - 106px);
                 position: relative;
                 background: rgba(73, 73, 73, 0.3);
                 height: 100%;
+                justify-content: center;
                 overflow: hidden;
 
+                .expert-add-btn {
+                    position: absolute;
+                    z-index: 9;
+                    bottom: 112px;
+                    // right: 36px;
+                    cursor: pointer;
+                    margin-left: 90px;
+                    width: 183px;
+                    height: 32px;
+                    background: #fff;
+                    border-radius: 30px;
+                    padding: 2px;
+                    box-sizing: border-box;
+                    box-shadow: 0 2px 4px #ccc;
+                    .btn-box {
+                        height: 100%;
+                        background: linear-gradient(0deg,#FFFBF2 0%, #FF9500 31% , #FF9500 78%);
+                        border-radius: 30px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        color: #fff;
+                        .add-text {
+                            padding-left: 4px;
+                            font-size: 15px;
+                        }
+                    }
+                }
+
                 .export-btn {
                     position: fixed;
                     z-index: 999;