feat：代码重构，添加首页

package-lock.json

@@ -5,7 +5,7 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "birdseye-look-new-vue",
+      "name": "feiniao-pc-vue",
       "version": "0.1.0",
       "dependencies": {
         "@element-plus/icons-vue": "^2.0.6",
@@ -15050,8 +15050,6 @@
     },
     "node_modules/npm/node_modules/fs-minipass/node_modules/minipass": {
       "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
-      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -15654,8 +15652,6 @@
     },
     "node_modules/npm/node_modules/minipass-collect/node_modules/minipass": {
       "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
-      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -15709,8 +15705,6 @@
     },
     "node_modules/npm/node_modules/minipass-flush/node_modules/minipass": {
       "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
-      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -15733,8 +15727,6 @@
     },
     "node_modules/npm/node_modules/minipass-json-stream/node_modules/minipass": {
       "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
-      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -15759,8 +15751,6 @@
     },
     "node_modules/npm/node_modules/minipass-pipeline/node_modules/minipass": {
       "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
-      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -15785,8 +15775,6 @@
     },
     "node_modules/npm/node_modules/minipass-sized/node_modules/minipass": {
       "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
-      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -15812,8 +15800,6 @@
     },
     "node_modules/npm/node_modules/minizlib/node_modules/minipass": {
       "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
-      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -16053,8 +16039,6 @@
     },
     "node_modules/npm/node_modules/node-gyp/node_modules/make-fetch-happen": {
       "version": "10.2.1",
-      "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-10.2.1.tgz",
-      "integrity": "sha512-NgOPbRiaQM10DYXvN3/hhGVI2M5MtITFryzBGxHM5p4wnFxsVCbxkrBrDsk+EZ5OB4jEOT7AjDxtdF+KVEFT7w==",
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -16123,8 +16107,6 @@
     },
     "node_modules/npm/node_modules/node-gyp/node_modules/nopt": {
       "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/nopt/-/nopt-6.0.0.tgz",
-      "integrity": "sha512-ZwLpbTgdhuZUnZzjd7nb1ZV+4DoiC6/sfiVKok72ym/4Tlf+DFdlHYmT2JPmcNNWV6Pi3SDf1kT+A4r9RTuT9g==",
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -16139,8 +16121,6 @@
     },
     "node_modules/npm/node_modules/node-gyp/node_modules/npmlog": {
       "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-6.0.2.tgz",
-      "integrity": "sha512-/vBvz5Jfr9dT/aFWd0FIRf+T/Q2WBsLENygUaFUqstqsycmZAP/t5BvFJTK0viFmSUxiUKTUplWy5vt+rvKIxg==",
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -16194,8 +16174,6 @@
     },
     "node_modules/npm/node_modules/node-gyp/node_modules/which": {
       "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
       "inBundle": true,
       "license": "ISC",
       "dependencies": {
@@ -36202,8 +36180,6 @@
           "dependencies": {
             "minipass": {
               "version": "3.3.6",
-              "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
-              "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
               "bundled": true,
               "requires": {
                 "yallist": "^4.0.0"
@@ -36628,8 +36604,6 @@
           "dependencies": {
             "minipass": {
               "version": "3.3.6",
-              "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
-              "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
               "bundled": true,
               "requires": {
                 "yallist": "^4.0.0"
@@ -36669,8 +36643,6 @@
           "dependencies": {
             "minipass": {
               "version": "3.3.6",
-              "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
-              "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
               "bundled": true,
               "requires": {
                 "yallist": "^4.0.0"
@@ -36690,8 +36662,6 @@
           "dependencies": {
             "minipass": {
               "version": "3.3.6",
-              "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
-              "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
               "bundled": true,
               "requires": {
                 "yallist": "^4.0.0"
@@ -36710,8 +36680,6 @@
           "dependencies": {
             "minipass": {
               "version": "3.3.6",
-              "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
-              "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
               "bundled": true,
               "requires": {
                 "yallist": "^4.0.0"
@@ -36730,8 +36698,6 @@
           "dependencies": {
             "minipass": {
               "version": "3.3.6",
-              "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
-              "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
               "bundled": true,
               "requires": {
                 "yallist": "^4.0.0"
@@ -36751,8 +36717,6 @@
           "dependencies": {
             "minipass": {
               "version": "3.3.6",
-              "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
-              "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
               "bundled": true,
               "requires": {
                 "yallist": "^4.0.0"
@@ -36931,8 +36895,6 @@
             },
             "make-fetch-happen": {
               "version": "10.2.1",
-              "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-10.2.1.tgz",
-              "integrity": "sha512-NgOPbRiaQM10DYXvN3/hhGVI2M5MtITFryzBGxHM5p4wnFxsVCbxkrBrDsk+EZ5OB4jEOT7AjDxtdF+KVEFT7w==",
               "bundled": true,
               "requires": {
                 "agentkeepalive": "^4.2.1",
@@ -36983,8 +36945,6 @@
             },
             "nopt": {
               "version": "6.0.0",
-              "resolved": "https://registry.npmjs.org/nopt/-/nopt-6.0.0.tgz",
-              "integrity": "sha512-ZwLpbTgdhuZUnZzjd7nb1ZV+4DoiC6/sfiVKok72ym/4Tlf+DFdlHYmT2JPmcNNWV6Pi3SDf1kT+A4r9RTuT9g==",
               "bundled": true,
               "requires": {
                 "abbrev": "^1.0.0"
@@ -36992,8 +36952,6 @@
             },
             "npmlog": {
               "version": "6.0.2",
-              "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-6.0.2.tgz",
-              "integrity": "sha512-/vBvz5Jfr9dT/aFWd0FIRf+T/Q2WBsLENygUaFUqstqsycmZAP/t5BvFJTK0viFmSUxiUKTUplWy5vt+rvKIxg==",
               "bundled": true,
               "requires": {
                 "are-we-there-yet": "^3.0.0",
@@ -37031,8 +36989,6 @@
             },
             "which": {
               "version": "2.0.2",
-              "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-              "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
               "bundled": true,
               "requires": {
                 "isexe": "^2.0.0"

src/components/chartBox.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="chart-box">
+    <div class="chart-title">
+      <div class="name">
+        <img src="@/assets/images/common/chart-icon.png" alt="" />
+        <span>{{name}}</span>
+      </div>
+      <div class="slot">
+        <slot name="title-right"></slot>
+      </div>
+    </div>
+    <div class="chart-content">
+        <div :class="['arrow',arrow]" @click="handleShrink">
+            <el-icon class="icon" color="#141414"><DArrowLeft /></el-icon>
+        </div>
+        <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref} from 'vue'
+const props = defineProps({
+    name:{
+        type:String,
+        defalut:''
+    },
+    arrow:{
+        type:String,
+        defalut:'right'
+    }
+})
+
+const isShrink = ref(true)
+const handleShrink = () =>{
+
+}
+</script>
+
+<style lang="scss" scoped>
+.chart-box {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  border-radius: 4px;
+  background: #232323;
+  border: 0.6px solid rgb(255, 255, 255,0.4);
+  .chart-title {
+    width: 100%;
+    height: 38px;
+    display: flex;
+    align-items: center;
+    border-bottom: 0.6px solid rgb(255, 255, 255, 0.4);
+    .name {
+      display: flex;
+      align-items: center;
+      padding: 0 12px;
+      span{
+        font-size: 18px;
+        margin-left: 6px;
+        font-family: 'SOURCEHANTIFINE';
+      }
+    }
+  }
+  .chart-content{
+    position: relative;
+    width: 100%;
+    height: calc(100% - 38px);
+    .arrow{
+        position: absolute;
+        right: -16px;
+        top:calc(50% - 40px);
+        background: #fff;
+        width: 16px;
+        height: 80px;
+        line-height: 80px;
+        border-radius: 0 5px 5px 0;
+        text-align: center;
+        cursor: pointer;
+    }
+    .arrow-left{
+        left: -16px;
+        border-radius: 5px 0 0 5px;
+        .icon{
+            transform: rotate(180deg);
+        }
+    }
+  }
+}
+
+.shrink-animation {  
+  width: 100%; /* 初始宽度，与关键帧中的初始状态一致 */  
+  overflow: hidden; /* 防止内容溢出 */  
+  animation: shrink-horizontal 2s forwards; /* 应用动画，持续时间为2秒，动画结束后保持最终状态 */  
+}
+
+/* 定义动画关键帧 */  
+@keyframes shrink-horizontal {  
+  0% {  
+    width: 100%; /* 初始宽度，可以是具体的像素值或百分比 */  
+    transform: scaleX(1); /* 初始缩放比例 */  
+  }  
+  100% {  
+    width: 0%; /* 最终宽度，这里设置为0表示完全收缩 */  
+    transform: scaleX(0); /* 最终缩放比例，这里设置为0表示在X轴上完全收缩 */  
+  }  
+}
+</style>

src/main.js

@@ -21,7 +21,6 @@ import "@/styles/common.scss";
 import App from "@/App.vue";
 import router from "@/router";
 import 'video.js/dist/video-js.css'
-import HomeOutline from '~icons/material-symbols/home-outline'
 import '@/common/rem'
 
 const app = createApp(App);

src/router/globalRoutes.js

@@ -17,9 +17,4 @@ export default [
         name: "404",
         component: () => import("@/views/404.vue"),
     },
-    {
-        path: "/delicious",
-        name: "Delicious",
-        component: () => import("@/views/deliciousPage/index.vue"),
-    },
 ];

src/styles/chatsTabs.scss

@@ -1,64 +0,0 @@
-.chatsTabs{
-  margin-top: 10px;
-  z-index: 3;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  .text{
-    text-align: center;
-    width: 82px;
-    height: 38px;
-    line-height: 38px;
-    font-size: 14px;
-    font-family: PingFangSC-Regular, PingFang SC;
-    font-weight: 400;
-    color: #B4FFFB;
-  }
-  .lbtn{
-    cursor: pointer;
-    background-image: url(@/assets/img/left_btn.png);
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    width: 82px;
-    height: 38px;
-    .active{
-      width: 82px;
-      height: 38px;
-      background-image: url(@/assets/img/left_btn_active.png);
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
-    }
-  }
-  .btn{
-    cursor: pointer;
-    background-image: url(@/assets/img/center_btn.png);
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    width: 82px;
-    height: 38px;
-    .active{
-      width: 80px;
-      height: 36px;
-      background: rgba(3,44,57,0.8);
-      box-shadow: inset 0px 0px 20px 4px rgba(0,255,240,0.5);
-      border-radius: 0px 0px 0px 0px;
-      border: 1px solid #51E9F0;
-    }
-  }
-  .rbtn{
-    background-image: url(@/assets/img/right_btn.png);
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    width: 88px;
-    height: 38px;
-    cursor: pointer;
-    .active{
-      width: 88px;
-      height: 38px;
-      background-image: url(@/assets/img/right_btn_active.png);
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
-    }
-  }
-}

src/styles/common.scss

@@ -78,17 +78,6 @@ h1, h2, h3, h4, h5, h6 {
     flex-direction: column;
     height: calc(100vh - #{$nav-height} - 80px);
 }
-//.ol-zoom{
-//    position: absolute;
-//    bottom: 50px;
-//    left: 10px;
-//    z-index: 1;
-//    display: flex;
-//    flex-direction: column;
-//}
-//.ol-rotate-reset{
-//    display: none;
-//}
 
 .no-events{
     -webkit-pointer-events: none;
@@ -469,6 +458,13 @@ div{
 }
 
 @font-face {  
+    font-family: 'SOURCEHANTIFINE'; /* 定义字体名称 */  
+    src: url('@/assets/font/SOURCEHANSANSCN-NORMAL.OTF') format('truetype');
+    font-weight: normal; /* 字体粗细 */  
+    font-style: normal; /* 字体风格 */  
+}
+
+@font-face {  
     font-family: 'HANTI'; /* 定义字体名称 */  
     src: url('@/assets/font/HANTI.TTF') format('truetype');
     font-weight: normal; /* 字体粗细 */  

src/views/Home copy.vue

@@ -0,0 +1,116 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-01-18 15:46:34
+ * @LastEditTime: 2021-11-30 18:54:36
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \vue3-element-admin\src\views\Home.vue
+-->
+<template>
+  <Bg :active="menuType == 'znxy'" ></Bg>
+  <Head @selectOrganAndArea="selectOrganAndArea" @changeGarden="changeGarden" @goBack="goBack"  :key="hideZnxy" :hideZnxy="hideZnxy" :menuType="menuType"></Head>
+  <Navigation v-if="hideZnxy && menuType == 'znxy'" @handleAct="handleAct" @select="navSelect" :val="menuType"></Navigation>
+  <Map ref="mapRef" v-if="menuType == 'znxy'" :tabValue="tabValue" @setHideZnxy="setHideZnxy"></Map>
+  <ZnxyPage v-if="hideZnxy && menuType == 'znxy'" ref="znxyRef" :tabValue="tabValue" @workerPath="workerPath" @setTreeStyle="setTreeStyle"
+             @nsAllot="nsAllot" @selectDay="selectDay"
+  ></ZnxyPage>
+  <NsAllot v-if="menuType == 'ns_allot'"></NsAllot>
+</template>
+
+<script setup>
+import {useStore} from "vuex"
+import Map from "./Map";
+import {onMounted, ref, onBeforeUnmount, watchEffect, provide, inject , watch, computed} from "vue";
+import Head from "./Head";
+import Bg from "./Bg";
+import {fitExtent} from "../common/ol_common";
+import ZnxyPage from "./znxy/index"
+import NsAllot from "./ns_allot/index"
+import Navigation from "./Navigation";
+import {WKT} from "ol/format";
+let store = useStore()
+let state = useStore().state;
+const menuType = ref("znxy")
+const title = ref('智能巡园')
+const mapRef = ref(null)
+const znxyRef = ref(null)
+const recordId = ref(null)
+const recordRowData = ref(null)
+let curGardenId = ref(store.getters.userinfo.curGardenId)
+let hideZnxy = ref(true)
+
+/**
+ * 给地图中的树设置样式
+ * @param style
+ */
+function setTreeStyle(style){
+  let view = mapRef.value.znxyMap.kmap.view
+  mapRef.value.znxyMap.setTreeStyle((f)=>{
+    let zoom = view.getZoom();
+    return style(f,zoom)
+  })
+}
+function navSelect(val,t){
+  title.value = t
+  menuType.value = val
+}
+function goBack(){
+  menuType.value = "znxy"
+}
+function showTreeDialog(f){
+  znxyRef.value.showTreeDialog(f)
+}
+function selectOrganAndArea({organ,area}){
+  if(organ){
+    let geom = new WKT().readGeometry(organ.point)
+    mapRef.value.znxyMap.fit(geom.getExtent())
+  }
+  if(area){
+    let geom = new WKT().readGeometry(area.wkt)
+    mapRef.value.znxyMap.fit(geom.getExtent())
+  }
+}
+function workerPath(e){
+  recordRowData.value = e
+  menuType.value = "grzxqk"
+}
+function nsAllot(){
+  title.value = "分配农事"
+  menuType.value = "ns_allot"
+}
+
+const tabValue = ref({})
+
+const handleAct = (v) =>{
+  tabValue.value = v
+}
+function selectDay(e){
+  mapRef.value.znxyMap.refreshTree(curGardenId.value,e)
+}
+//切换果园
+function changeGarden(){
+  let mymap = mapRef.value.znxyMap
+  setHideZnxy(false)
+  mymap.kmap.getView().fit(mymap.gardenLayer.layer.getSource().getExtent(), { duration: 1000, padding: [250, 150, 150, 150] });
+}
+function setHideZnxy(val){
+  hideZnxy.value = val
+}
+onMounted(()=>{
+})
+
+
+</script>
+
+<style lang="scss" scoped>
+.body{
+  min-width:1920px;
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+  overflow: auto;
+}
+
+
+
+</style>

src/views/Home.vue

@@ -1,116 +1,142 @@
-<!--
- * @Author: your name
- * @Date: 2021-01-18 15:46:34
- * @LastEditTime: 2021-11-30 18:54:36
- * @LastEditors: Please set LastEditors
- * @Description: In User Settings Edit
- * @FilePath: \vue3-element-admin\src\views\Home.vue
--->
 <template>
-  <Bg :active="menuType == 'znxy'" ></Bg>
-  <Head @selectOrganAndArea="selectOrganAndArea" @changeGarden="changeGarden" @goBack="goBack"  :key="hideZnxy" :hideZnxy="hideZnxy" :menuType="menuType"></Head>
-  <Navigation v-if="hideZnxy && menuType == 'znxy'" @handleAct="handleAct" @select="navSelect" :val="menuType"></Navigation>
-  <Map ref="mapRef" v-if="menuType == 'znxy'" :tabValue="tabValue" @setHideZnxy="setHideZnxy"></Map>
-  <ZnxyPage v-if="hideZnxy && menuType == 'znxy'" ref="znxyRef" :tabValue="tabValue" @workerPath="workerPath" @setTreeStyle="setTreeStyle"
-             @nsAllot="nsAllot" @selectDay="selectDay"
-  ></ZnxyPage>
-  <NsAllot v-if="menuType == 'ns_allot'"></NsAllot>
+  <div class="base-container">
+    <div class="header">
+      <div class="title">
+        <img src="@/assets/images/common/logo.png" alt="">
+        <span>飞鸟智慧巡园平台</span>
+        <img src="@/assets/images/common/logo-icon.png" alt="">
+      </div>
+      <div class="date">
+        <div>111</div>
+        <div class="time">
+          <div>21:05:46</div>
+          <span>2024.11.04 星期一</span>
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <!-- <div class="top"></div> -->
+      <div class="left">
+        <div class="tool-list">
+          <div class="tool-item">气象预警</div>
+        </div>
+        <div class="chart-list">
+          <div class="chart-item">
+            <chart-box name="气象预警"></chart-box>
+          </div>
+          <div class="chart-item">
+            <chart-box name="物候调节"></chart-box>
+          </div>
+          <div class="chart-item">
+            <chart-box name="病虫测报"></chart-box>
+          </div>
+          <div class="chart-item">
+            <chart-box name="树势评估"></chart-box>
+          </div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="list">
+          <chart-box name="农事列表" arrow="arrow-left"></chart-box>
+        </div>
+          <div class="tool-list">
+          <div class="tool-item">气象预警</div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
-import {useStore} from "vuex"
-import Map from "./Map";
-import {onMounted, ref, onBeforeUnmount, watchEffect, provide, inject , watch, computed} from "vue";
-import Head from "./Head";
-import Bg from "./Bg";
-import {fitExtent} from "../common/ol_common";
-import ZnxyPage from "./znxy/index"
-import NsAllot from "./ns_allot/index"
-import Navigation from "./Navigation";
-import {WKT} from "ol/format";
-let store = useStore()
-let state = useStore().state;
-const menuType = ref("znxy")
-const title = ref('智能巡园')
-const mapRef = ref(null)
-const znxyRef = ref(null)
-const recordId = ref(null)
-const recordRowData = ref(null)
-let curGardenId = ref(store.getters.userinfo.curGardenId)
-let hideZnxy = ref(true)
-
-/**
- * 给地图中的树设置样式
- * @param style
- */
-function setTreeStyle(style){
-  let view = mapRef.value.znxyMap.kmap.view
-  mapRef.value.znxyMap.setTreeStyle((f)=>{
-    let zoom = view.getZoom();
-    return style(f,zoom)
-  })
-}
-function navSelect(val,t){
-  title.value = t
-  menuType.value = val
-}
-function goBack(){
-  menuType.value = "znxy"
-}
-function showTreeDialog(f){
-  znxyRef.value.showTreeDialog(f)
-}
-function selectOrganAndArea({organ,area}){
-  if(organ){
-    let geom = new WKT().readGeometry(organ.point)
-    mapRef.value.znxyMap.fit(geom.getExtent())
-  }
-  if(area){
-    let geom = new WKT().readGeometry(area.wkt)
-    mapRef.value.znxyMap.fit(geom.getExtent())
-  }
-}
-function workerPath(e){
-  recordRowData.value = e
-  menuType.value = "grzxqk"
-}
-function nsAllot(){
-  title.value = "分配农事"
-  menuType.value = "ns_allot"
-}
-
-const tabValue = ref({})
-
-const handleAct = (v) =>{
-  tabValue.value = v
-}
-function selectDay(e){
-  mapRef.value.znxyMap.refreshTree(curGardenId.value,e)
-}
-//切换果园
-function changeGarden(){
-  let mymap = mapRef.value.znxyMap
-  setHideZnxy(false)
-  mymap.kmap.getView().fit(mymap.gardenLayer.layer.getSource().getExtent(), { duration: 1000, padding: [250, 150, 150, 150] });
-}
-function setHideZnxy(val){
-  hideZnxy.value = val
-}
-onMounted(()=>{
-})
-
+import chartBox from '@/components/chartBox.vue';
 
 </script>
 
 <style lang="scss" scoped>
-.body{
-  min-width:1920px;
-  width: 100vw;
+.base-container{
+  width: 100%;
   height: 100vh;
+  color: #fff;
   position: relative;
-  overflow: auto;
+  box-sizing: border-box;
+  background: red;
+  .header{
+    width: 100%;
+    height: 76px;
+    display: flex;
+    justify-content: space-between;
+    background: #000;
+    box-sizing: border-box;
+    
+    .title{
+      width: 100%;
+      height: 100%;
+      font-size: 24px;
+      letter-spacing: 2px;
+      line-height: 72px;
+      padding-left: 20px;
+      box-sizing: border-box;
+      background: url('@/assets/images/common/header-bg.png') no-repeat center center /100% 100%;
+      span{
+        margin: 0 5px;
+        font-family: 'PangMenZhengDao';
+      }
+    }
+    .date{
+      display: flex;
+      align-items: center;
+      width: 180px;
+    }
+  }
+  .content{
+    width: 100%;
+    height: calc(100% - 76px);
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+    .left,.right{
+      width: calc(376px + 54px);
+      height: 95%;
+      padding-top: 10px;
+      box-sizing: border-box;
+      display: flex;
+      .tool-list{
+        width: 54px;
+        height: 100%;
+        background: #232323;
+        border: 0.6px solid rgb(255, 255, 255,0.4);
+        border-left: none;
+        box-sizing: border-box;
+        border-radius: 4px;
+        margin-right: 10px;
+        .tool-item{
+          font-size: 20px;
+          writing-mode: vertical-rl; /* 从右到左的竖排 */  
+          text-orientation: upright; /* 保持文字直立，而不是旋转 */  
+          white-space: nowrap; /* 防止文本换行 */  
+          line-height: 54px;
+        }
+      }
+      .chart-list{
+        width: calc(100% - 54px - 10px);
+        height: calc(100% - 30px);
+        .chart-item{
+          width: 100%;
+          height: calc(100% / 4);
+          box-sizing: border-box;
+          margin-bottom: 10px;
+        }
+      }
+    }
+    .right{
+      .tool-list{
+        margin-left: 10px;
+      }
+      .list{
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
 }
-
-
-
-</style>
+</style>

src/views/checkComparison/index.vue

@@ -307,7 +307,7 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-@import "../../styles/index.scss";
+// @import "../../styles/index.scss";
 .container2 {
   height: 100%;
   width: 100%;
@@ -466,7 +466,7 @@ onMounted(() => {
       }
     }
     .box-content {
-      @include wh(auto, calc(100% - 52px - 46px - 62px - 19px));
+      // @include wh(auto, calc(100% - 52px - 46px - 62px - 19px));
       position: relative;
       box-sizing: border-box;
       margin: 4px;

src/views/deliciousPage/components/aside.vue

@@ -1,76 +0,0 @@
-<template>
-  <div class="aside">
-    <el-menu
-      default-active="1"
-      class="el-menu-vertical"
-      :collapse="isCollapse"
-      @open="handleOpen"
-      @close="handleClose"
-      background-color="#f1f2f2"
-      active-text-color="#EB786D"
-    >
-      <el-sub-menu index="1">
-        <template #title>
-          <el-icon><location /></el-icon>
-          <span>Navigator One</span>
-        </template>
-        <el-menu-item-group>
-          <template #title><span>Group One</span></template>
-          <el-menu-item index="1-1">item one</el-menu-item>
-          <el-menu-item index="1-2">item two</el-menu-item>
-        </el-menu-item-group>
-        <el-menu-item-group title="Group Two">
-          <el-menu-item index="1-3">item three</el-menu-item>
-        </el-menu-item-group>
-        <el-sub-menu index="1-4">
-          <template #title><span>item four</span></template>
-          <el-menu-item index="1-4-1">item one</el-menu-item>
-        </el-sub-menu>
-      </el-sub-menu>
-      <el-menu-item index="2">
-        <el-icon><icon-menu /></el-icon>
-        <template #title>Navigator Two</template>
-      </el-menu-item>
-      <el-menu-item index="3">
-        <el-icon><document /></el-icon>
-        <template #title>Navigator Three</template>
-      </el-menu-item>
-      <el-menu-item index="4">
-        <el-icon><setting /></el-icon>
-        <template #title>Navigator Four</template>
-      </el-menu-item>
-    </el-menu>
-  </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const isCollapse = ref(true);
-const handleOpen = (key, keyPath) => {
-  console.log(key, keyPath);
-};
-const handleClose = (key, keyPath) => {
-  console.log(key, keyPath);
-};
-</script>
-
-<style lang="scss" scoped>
-.aside {
-  width: 74px;
-  height: calc(100% - 40px);
-  background: #f1f2f2;
-  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
-  border-radius: 8px;
-  box-sizing: border-box;
-  .el-menu--vertical {
-    --el-menu-vertical-height: 100%;
-    border-radius: 8px 8px 0 0;
-    width: 100%;
-    margin: 20px 0;
-  }
-  .el-menu {
-    border-right: none;
-  }
-}
-</style>

src/views/deliciousPage/components/header.vue

@@ -1,110 +0,0 @@
-<template>
-  <div class="header">
-    <div class="bg"></div>
-    <div class="logo center">
-      <img src="@/assets/images/delicious/logo.png" alt="" />
-      <span>飞鸟有味</span>
-    </div>
-    <div class="tabs center">
-      <div
-        :class="['tab-item center', { active: index === active }]"
-        @click="handleActive(index)"
-        v-for="(item, index) in tabs"
-        :key="index"
-      >
-        {{ item }}
-      </div>
-    </div>
-    <div class="search">
-      <el-input
-        v-model="input"
-        prefix-icon="Search"
-        style="width: 340px"
-        placeholder="搜索水果名称/地区"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const active = ref(0);
-const tabs = ["首页","有味介绍", "有味指数", "地理风物", "关于我们"];
-
-const handleActive = (i) => {
-  active.value = i;
-};
-
-const input = ref("");
-</script>
-
-<style lang="scss" scoped>
-.header {
-  width: 100%;
-  height: 70px;
-  box-sizing: border-box;
-  background: linear-gradient(90deg, #eb8e8e 0%, #ffeeef 80%);
-  display: flex;
-  align-items: center;
-  color: #fff;
-  position: relative;
-  .center {
-    display: flex;
-    align-items: center;
-  }
-  .logo {
-    font-size: 30px;
-    font-weight: 400;
-    letter-spacing: 2px;
-    position: relative;
-    z-index: 2;
-    margin-right: 70px;
-    img {
-      width: 30px;
-      height: 30px;
-      margin: 0 20px 0 30px;
-    }
-    span {
-      font-family: "PangMenZhengDao";
-    }
-  }
-  .tabs {
-    height: 100%;
-    position: relative;
-    z-index: 2;
-    margin-right: 30px;
-    .tab-item {
-      font-weight: 400;
-      font-size: 20px;
-      width: 110px;
-      height: 100%;
-      justify-content: center;
-      text-align: center;
-      margin-right: 33px;
-      cursor: pointer;
-      font-family: "PangMenZhengDao";
-      &.active {
-        background: #fff;
-        color: #f56d83;
-      }
-    }
-  }
-  .search {
-    ::v-deep {
-      .el-input__wrapper {
-        box-shadow: none;
-        border-radius: 20px;
-      }
-    }
-  }
-  .bg {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    z-index: 0;
-    background: url("@/assets/images/delicious/header-bg.png") no-repeat center
-      center / 100% 100%;
-  }
-}
-</style>

src/views/deliciousPage/components/timeBar.vue

@@ -1,67 +0,0 @@
-<template>
-  <div class="time-bar">
-    <div class="button">
-      <el-icon color="rgba(255,255,255,0.86)" size="34"><CaretRight /></el-icon>
-    </div>
-    <div class="bar">
-      <div class="num">
-        <div class="tag">现在</div>
-      </div>
-      <div class="date">28日周六</div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-</script>
-
-<style lang="scss" scoped>
-.time-bar {
-  background: rgba(255, 255, 255, 0.43);
-  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
-  border-radius: 9px;
-  width: 1028px;
-  height: 98px;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  padding: 0 10px;
-  .button {
-    border-radius: 50%;
-    width: 40px;
-    height: 40px;
-    background: #f56d83;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-right: 8px;
-    cursor: pointer;
-  }
-  .bar {
-    width: 100%;
-    background: #ffe3e8;
-    border-radius: 20px;
-    height: 5px;
-    .num {
-      width: 10%;
-      height: 100%;
-      background: #f56d83;
-      border-radius: 20px;
-      position: relative;
-      .tag {
-        position: absolute;
-        top: -31px;
-        right: -26px;
-        background: url("@/assets/images/delicious/tag-bg.png") no-repeat center
-          center / 100% 100%;
-        width: 52px;
-        height: 31px;
-        color: #fff;
-        font-size: 16px;
-        font-family: "PangMenZhengDao";
-        text-align: center;
-      }
-    }
-  }
-}
-</style>

src/views/deliciousPage/index.vue

@@ -1,113 +0,0 @@
-<template>
-  <div class="delicious-wrap">
-    <Header></Header>
-    <div class="container">
-      <Aside class="aside"></Aside>
-      <div class="main">111</div>
-      <TimeBar class="time-bar"></TimeBar>
-      <div class="message">
-        <div class="title">黑臭水体指数</div>
-        <div class="cont">
-          <div class="text">
-            先介绍下为什么要计算这个指数，为水果风味有什么测算依***
-          </div>
-          <div class="text">公式</div>
-        </div>
-        <div class="arrow">
-          <el-icon color="#676767" size="22"><ArrowLeftBold /></el-icon>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import Header from "./components/header.vue";
-import Aside from "./components/aside.vue";
-import TimeBar from "./components/timeBar.vue";
-</script>
-
-<style lang="scss" scoped>
-.delicious-wrap {
-  width: 100vw;
-  height: 100vh;
-  background: #fff;
-  box-sizing: border-box;
-  .container {
-    width: 100%;
-    height: calc(100% - 70px);
-    position: relative;
-    .aside {
-      position: absolute;
-      left: 20px;
-      top: 20px;
-    }
-    .main {
-      width: 100%;
-      height: 100%;
-    }
-    .time-bar {
-      position: absolute;
-      left: 114px;
-      bottom: 20px;
-    }
-    .message {
-      position: absolute;
-      right: 20px;
-      bottom: 20px;
-      width: 368px;
-      height: 214px;
-      box-sizing: border-box;
-      background: #fff;
-      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
-      border-radius: 8px;
-      letter-spacing: 2px;
-      .title {
-        background: #ffe3e8;
-        width: 100%;
-        text-align: center;
-        color: #f56d83;
-        font-size: 22px;
-        border-radius: 8px 8px 0 0;
-        padding: 10px 0;
-        font-family: "PangMenZhengDao";
-      }
-      .cont {
-        padding: 20px 15px;
-        .text {
-          font-family: "PangMenZhengDao";
-          color: #262626;
-          font-size: 19px;
-          font-weight: 400;
-          position: relative;
-          margin-left: 25px;
-          line-height: 1.6;
-          &::before {
-            content: "";
-            position: absolute;
-            left: -17px;
-            top: 11px;
-            width: 7px;
-            height: 7px;
-            background: #f56d83;
-            border-radius: 50%;
-          }
-        }
-      }
-      .arrow {
-        position: absolute;
-        left: -22px;
-        top: 50%;
-        background: #fff;
-        width: 33px;
-        height: 33px;
-        border-radius: 50%;
-        box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-    }
-  }
-}
-</style>

src/views/edit_ns_recrod/index.vue

@@ -575,14 +575,14 @@ const remove = () => {
     border: 1px solid rgba(81, 233, 240, 0.6);
     box-sizing: border-box;
     .head {
-      @include wh(calc(100% - 19px - 224px), 30px);
+      // @include wh(calc(100% - 19px - 224px), 30px);
       display: flex;
       align-items: center;
       justify-content: space-around;
       margin-left: 19px;
       margin-right: 224px;
       .name {
-        @include wh(auto, 21px);
+        // @include wh(auto, 21px);
         font-weight: normal;
         font-size: 21px;
         line-height: 30px;
@@ -597,13 +597,13 @@ const remove = () => {
       }
       .rhombus {
         margin-top: 7px;
-        @include wh(50px, 15px);
+        // @include wh(50px, 15px);
         @include ossBg("rhombus.png");
       }
     }
     .map {
       margin: 19px 0px 0px 19px;
-      @include wh(calc(100% - 19px - 19px), calc(100% - 30px - 19px - 19px));
+      // @include wh(calc(100% - 19px - 19px), calc(100% - 30px - 19px - 19px));
       position: relative;
       .tuli {
         position: absolute;
@@ -621,7 +621,7 @@ const remove = () => {
   }
 }
 .calendar-item {
-  @include wh(100%, 100%);
+  // @include wh(100%, 100%);
   text-align: center;
 }
 .is-selected {