fix：删除多余代码，修改组件bug

src/components/chartBox.vue

@@ -2,7 +2,7 @@
   <div class="chart-box" :class="color">
     <div class="chart-title" v-if="name">
       <div class="name">
-        <img :src="require(`@/assets/images/common/chart-icon${color}.png`)" alt="" />
+        <img :src="require(`@/assets/images/common/chart-${color || 'icon'}.png`)" alt="" />
         <span>{{name}}</span>
         <slot name="title-left"></slot>
       </div>
@@ -33,7 +33,7 @@ const props = defineProps({
     },
     color:{
         type:String,
-        defalut:''
+        defalut:'icon'
     }
 })
 

src/router/mainRoutes.js

@@ -36,16 +36,6 @@ export default [
         component: () => import("@/views/regionalInformation/index.vue"),
     },
     {
-        path: "/checkComparison",
-        name: "CheckComparison",
-        component: () => import("@/views/checkComparison/index.vue"),
-    },
-    {
-        path: "/edit_ns_record",
-        name: "EditNsRecord",
-        component: () => import("@/views/edit_ns_recrod/index.vue"),
-    },
-    {
         path: "/ownership",
         name: "Ownership",
         component: () => import("@/views/ownership/index.vue"),
@@ -56,16 +46,6 @@ export default [
         name: "AddFarm",
         component: () => import("@/views/addFarm/index.vue"),
     },
-    {
-        path: "/analysisDetails",
-        name: "AnalysisDetails",
-        component: () => import("@/views/detailsPage/analysis/index.vue"),
-    },
-    {
-        path: "/weatherDetails",
-        name: "WeatherDetails",
-        component: () => import("@/views/detailsPage/weather/index.vue"),
-    },
     // 农事
     {
         path: "/work_detail",

src/views/checkComparison/CheckComparisonMap.js

@@ -1,146 +0,0 @@
-import config from "@/api/config.js"
-import * as KMap from '@/utils/ol-map/KMap';
-import * as util from "@/common/ol_common.js"
-import {newAreaFeature, newAreaPoint, newPoint,newPolymerFeature} from "../zhgl/map";
-import {base_img_url2} from "../../api/config";
-import Stroke from "ol/style/Stroke";
-import Style from "ol/style/Style";
-import Photo from "ol-ext/style/Photo";
-
-/**
- * @description 全景化地图层对象
- */
-class CheckComparisonMap {
-    getRadius(zoom){
-        if(zoom >= 20){
-            return 70;
-        }
-        if(zoom >= 19){
-            return 30;
-        }
-        if(zoom >= 18){
-            return 15;
-        }
-        if(zoom >= 17){
-            return 10;
-        }
-        return 5;
-    }
-
-    constructor(){
-        let that = this
-        let vectorStyle = new KMap.VectorStyle()
-        this.areaLayer = new KMap.VectorLayer("areaLayer",999,{style:(f)=> vectorStyle.getPolygonStyle(f.get("color")+"10", f.get("color"),3)})
-        this.subAreaLayer = new KMap.VectorLayer("subAreaLayer",999,{style:(f)=> vectorStyle.getPolygonStyle("#fba50410", "#fba504",1)})
-        this.areaPointLayer =  new KMap.VectorLayer("areaPointLayer",1000,{style:(f)=> vectorStyle.getPointTextStyle(f.get("name"), "#120046","#FFFFFF",2, 30)})
-        this.treeLayer = new KMap.VectorLayer("treeLayer",999)
-        this.imgStyleCache = {};
-        this.imgTreeLayer = new KMap.VectorLayer("imgTreeLayer",999,{minZoom:15,maxZoom:22,
-            style:(feature)=> {
-                let zoom = that.kmap.view.getZoom();
-                let r = that.getRadius(zoom);
-                let img = feature.get("img");
-                let k = img+r;
-                if(img && img != ""){
-                    let style = that.imgStyleCache[k];
-                    if(!style){
-                        style = new Style ({
-                            image: new Photo ({
-                                src: base_img_url2 + img,
-                                radius: r,
-                                shadow: 0,
-                                crop:true,
-                                kind:"circle",
-                                onload: function() { that.imgTreeLayer.layer.changed(); },
-                                displacement: [0, 30 + 15],
-                                stroke: new Stroke({
-                                    width: 3,
-                                    color: '#fdfcfc'
-                                })
-                            })
-                        });
-                        that.imgStyleCache[k] = style
-                    }
-                    return style
-                }else{
-                    return vectorStyle.getPointSimpleStyle(10,"#00000000","#00000000",1)
-                }
-
-            }})
-        this.imgTreeLayer.layer.setVisible(false)
-        this.subAreaLayer.layer.setVisible(true)
-    }
-
-    initMap(location,target)  {
-        let level = 18
-        let coordinate = util.wktCastGeom(location).getFirstCoordinate()
-        this.kmap = new KMap.Map(target,level,coordinate[0], coordinate[1],null,10,22);
-        let xyz = config.base_img_url + 'map/lby/{z}/{x}/{y}.png';
-        this.kmap.addXYZLayer(xyz,{minZoom:15,maxZoom:22});
-        let xyz2 = config.base_img_url3 + 'map/lby/{z}/{x}/{y}.png';
-        this.kmap.addXYZLayer(xyz2,{minZoom:12,maxZoom:22});
-        this.kmap.addLayer(this.areaLayer.layer)
-        this.kmap.addLayer(this.subAreaLayer.layer)
-        this.kmap.addLayer(this.treeLayer.layer)
-        this.kmap.addLayer(this.areaPointLayer.layer)
-        this.kmap.addLayer(this.imgTreeLayer.layer)
-    }
-
-    initArea(organId){
-        let that = this
-        this.areaLayer.refresh()
-        VE_API.area.list({organId}).then(({data,code})=>{
-            for(let item of data){
-                that.areaLayer.addFeature(newAreaFeature(item))
-                that.areaPointLayer.addFeature(newAreaPoint(item))
-            }
-        })
-    }
-
-    initSubArea(organId){
-        let that = this
-        this.subAreaLayer.refresh()
-        VE_API.sub_area.list({organId}).then(({data,code})=>{
-            for(let item of data){
-                that.subAreaLayer.addFeature(newPolymerFeature(item))
-            }
-        })
-    }
-
-
-    initTree(organId){
-        let that = this
-        this.treeLayer.refresh()
-        this.imgTreeLayer.refresh()
-        VE_API.tree.treeListAndGrowData({organId,areaId:-1}).then(({data,code})=>{
-            for(let item of data){
-                let point = newPoint(item);
-                that.treeLayer.addFeature(point)
-                that.imgTreeLayer.addFeature(point)
-            }
-        })
-    }
-    addSingleSelect(listener){
-        this.treeLayer.addSingleSelect(function(e){
-            if(e.selected.length > 0){
-                listener(e.selected[0])
-            }
-        },this.kmap.map)
-    }
-
-    setTreeStyle(style){
-        this.treeLayer.layer.setStyle(style)
-        this.treeLayer.layer.changed()
-    }
-    fit(geomOrExtent){
-        this.kmap.fit(geomOrExtent)
-    }
-    openCloseImg(){
-        this.imgTreeLayer.layer.setVisible(!this.imgTreeLayer.layer.getVisible())
-    }
-    openClosePolymer(){
-        this.subAreaLayer.layer.setVisible(!this.subAreaLayer.layer.getVisible())
-    }
-}
-
-export default CheckComparisonMap

src/views/checkComparison/index.vue

@@ -1,643 +0,0 @@
-<template>
-  <Bg></Bg>
-  <Header> </Header>
-  <div class="container2">
-    <div class="mainDiv">
-      <Title class="title" title="农事复核对比"></Title>
-      <div class="tabs">
-        <div class="tabs-item confirmed">农事-营养 2023.4.16</div>
-        <div class="tabs-item to-be-confirmed">
-          农事-营养
-          <span class="time">2023.4.16</span>
-        </div>
-        <div class="tabs-item">农事-杀梢 2023.4.17</div>
-      </div>
-      <div class="button-row">
-        <div class="btn-group">
-          <div
-            :class="['btn-item', 'yse-events', { 'btn-act': active === index }]"
-            v-for="(item, index) in btnList"
-            :key="index"
-            @click="handleAct(index)"
-          >
-            {{ item }}
-          </div>
-        </div>
-        <div class="toggle-group" v-show="active === 0">
-          <div :class="['toggle-item','before',{'before-act':btnItemAct===0}]" @click="handleBtnItemAct(0)">执行前</div>
-          <div :class="['toggle-item','after',{'after-act':btnItemAct===1}]" @click="handleBtnItemAct(1)">执行后</div>
-        </div>
-        <div class="select" v-show="active !== 0">
-          <el-select
-            class="mr-10"
-            v-show="active === 1"
-            v-model="selectValue1"
-            size="large"
-            placeholder="品种筛选"
-            style="width: 150px"
-            popper-class="v-select-popper"
-            clearable
-          >
-            <el-option
-              v-for="item in options1"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-          <el-select
-            v-model="selectValue"
-            size="large"
-            placeholder="区域筛选"
-            style="width: 150px"
-            popper-class="v-select-popper"
-            clearable
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-        </div>
-      </div>
-      <div class="box-content">
-        <div class="map" ref="mapRef" v-show="active === 0"></div>
-        <div class="picture-list list" v-show="active === 1">
-          <div
-            :class="['picture-item', { marker: item.markers }]"
-            :style="{
-              marginRight: (index + 1) % 3 === 0 ? '0' : '8px',
-              borderColor: item.markers ? '#F72E24' : '#00fff0',
-            }"
-            v-for="(item, index) in pictureList"
-            :key="index"
-          >
-            <el-image
-              @click="handlePicturn(item, index)"
-              class="image"
-              :src="item.img1"
-              fit="cover"
-            />
-            <el-image
-              @click="handlePicturn(item, index)"
-              class="image"
-              :src="item.img2"
-              fit="cover"
-            />
-            <div
-              class="overlay"
-              v-show="item.show"
-              @click="handlePicturn(item, index)"
-            >
-              <div
-                class="overlay-btn"
-                :style="{ background: item.markers ? '#F72E24' : '#f78724' }"
-                @click.stop="handlePicturnBtn(item, index)"
-              >
-                {{ item.markers ? "取消标记" : "问题标记" }}
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="photo-list list" v-show="active === 2">
-          <div
-            class="photo-item"
-            :style="{ marginRight: (index + 1) % 6 === 0 ? '0' : '19px' }"
-            v-for="(item, index) in 20"
-            :key="index"
-          >
-            <el-image
-              class="image"
-              src="https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg"
-              fit="cover"
-            />
-            <div class="photo-name">王东东</div>
-          </div>
-        </div>
-        <!-- 按钮 -->
-        <div class="box-btn">
-          <div class="green yse-events">生成复核报告</div>
-          <div class="orange yse-events">确认农事</div>
-        </div>
-        <!-- 问题标记区位 -->
-        <div class="mark-area" v-show="showPicture" @click="handleMarkArea">
-          <div class="mark-title">
-            <div>问题标记区位</div>
-          </div>
-          <el-image
-            class="image"
-            src="https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg"
-            fit="cover"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import Header from "@/views/components/Header.vue";
-import Bg from "../Bg";
-import Title from "../components/title";
-import { useRouter } from "vue-router";
-import { reactive, toRefs, ref, onMounted } from "vue";
-import { useStore } from "vuex";
-import CheckComparisonMap from "./CheckComparisonMap";
-const router = useRouter();
-const store = useStore();
-const state = reactive({
-  btnList: ["全景图", "近景图", "执行照片"],
-  pictureList: [
-    {
-      img1: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-      img2: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-      markers: false,
-      show: false,
-    },
-    {
-      img1: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-      img2: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-      markers: true,
-      show: false,
-    },
-    {
-      img1: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-      img2: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-      markers: false,
-      show: false,
-    },
-    {
-      img1: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-      img2: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-      markers: false,
-      show: false,
-    },
-    {
-      img1: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-      img2: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-      markers: true,
-      show: false,
-    },
-    {
-      img1: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-      img2: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-      markers: false,
-      show: false,
-    },
-    {
-      img1: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-      img2: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
-      markers: false,
-      show: false,
-    },
-  ],
-  listItem: [],
-});
-
-const { btnList, pictureList, listItem } = toRefs(state);
-
-// 执行前后
-const btnItemAct = ref(0)
-const handleBtnItemAct = (e) => {
-  btnItemAct.value = e;
-};
-
-const showPicture = ref(false);
-
-const active = ref(0);
-const handleAct = (e) => {
-  active.value = e;
-  selectValue.value = ''
-  selectValue1.value = ''
-};
-
-const picturnIndex = ref(null);
-const picturnItem = ref(null);
-const handlePicturn = (e, i) => {
-  showPicture.value = false;
-  state.pictureList[i].show = !e.show;
-};
-
-const handlePicturnBtn = (e, i) => {
-  picturnIndex.value = i;
-  picturnItem.value = e;
-  if (state.pictureList[i].markers) {
-    state.pictureList[i].markers = !e.markers;
-    state.pictureList[i].show = !e.show;
-  } else {
-    showPicture.value = e.show;
-  }
-};
-
-const handleMarkArea = () => {
-  state.pictureList[picturnIndex.value].show = !picturnItem.value.show;
-  showPicture.value = picturnItem.value.show;
-  state.pictureList[picturnIndex.value].markers = !picturnItem.value.markers;
-};
-
-const selectValue = ref("");
-const options = [
-  {
-    value: "Option1",
-    label: "1区",
-  },
-  {
-    value: "Option2",
-    label: "2区",
-  },
-  {
-    value: "Option3",
-    label: "3区",
-  },
-  {
-    value: "Option4",
-    label: "4区",
-  },
-];
-
-const selectValue1 = ref("");
-const options1 = [
-  {
-    value: "Option1",
-    label: "妃子笑",
-  },
-  {
-    value: "Option2",
-    label: "糯米糍",
-  },
-  {
-    value: "Option3",
-    label: "状元红",
-  },
-  {
-    value: "Option4",
-    label: "青皮甜",
-  },
-];
-
-const initData = async () => {
-  //   let url = "aPictureGarden";
-  //   if (!switchValue.value) {
-  //     url = "aPictureTree";
-  //   }
-  //   const { code, data } = await VE_API.regionalInformation[url]({
-  //     gardenId: curGardenId.value,
-  //   });
-  //   const dataValue = data.data;
-  //   state.baseData = dataValue;
-  //   state.btnList = dataValue;
-  //   updateData(active.value);
-};
-
-// 地图初始化
-const mapRef = ref(null);
-const kmap = new CheckComparisonMap();
-const location = store.getters.userinfo.location;
-const curGardenId = ref(store.getters.userinfo.curGardenId);
-
-onMounted(() => {
-  initData();
-    kmap.initMap(location, mapRef.value);
-  // kmap.initArea(curGardenId.value)
-  //   kmap.initSubArea(curGardenId.value)
-  //   kmap.addSingleSelect(selectTree)
-});
-</script>
-
-<style lang="scss" scoped>
-// @import "../../styles/index.scss";
-.container2 {
-  height: 100%;
-  width: 100%;
-  z-index: 2;
-  position: absolute;
-  color: #fff;
-  .mainDiv {
-    position: absolute;
-    top: 100px;
-    bottom: 65px;
-    left: 20px;
-    right: 20px;
-    border: 1px solid rgba(81, 233, 240, 0.6);
-    .title {
-      width: 449px;
-    }
-    .tabs {
-      width: auto;
-      height: 46px;
-      display: flex;
-      margin: 19px 0 4px 4px;
-      .tabs-item {
-        width: 242px;
-        height: 100%;
-        background: #00fff0;
-        border-radius: 5px;
-        border: 1px solid #000000;
-        font-weight: 800;
-        font-size: 19px;
-        color: #0e4c5d;
-        line-height: 46px;
-        text-align: center;
-        margin-right: 16px;
-        cursor: pointer;
-        &::after {
-          position: absolute;
-          top: -12px;
-          right: -12px;
-          width: 38px;
-          height: 23px;
-          font-weight: 800;
-          font-size: 9px;
-          color: #fff;
-          line-height: 23px;
-        }
-        &.confirmed {
-          color: #f5f5f5;
-          border: 1px solid #b1b1b1;
-          background: #7c7978;
-          position: relative;
-          &::after {
-            content: "已确认";
-            color: #524e4e;
-            background: url("@/assets/img/checkComparison/tips_bg_gray.png")
-              no-repeat center center / 100% 100%;
-          }
-        }
-        &.to-be-confirmed {
-          border: 1px solid #000000;
-          background: #0e4c5d;
-          color: #ffffff;
-          position: relative;
-          &::after {
-            content: "待确认";
-            background: url("@/assets/img/checkComparison/tips_bg_orange.png")
-              no-repeat center center / 100% 100%;
-          }
-          .time {
-            color: #31fef4;
-          }
-        }
-      }
-    }
-    .button-row {
-      border: 1px solid #3ab5db;
-      background: rgba(66, 153, 180, 0.4);
-      display: flex;
-      justify-content: space-between;
-      padding: 0 10px;
-      width: auto;
-      height: 52px;
-      .btn-group {
-        display: flex;
-        .btn-item {
-          background: url("@/assets/img/checkComparison/btn_bg.png") no-repeat
-            center center / 100% 100%;
-          font-weight: 800;
-          font-size: 19px;
-          text-align: center;
-          line-height: 52px;
-          padding: 0 22px;
-          cursor: pointer;
-          &.btn-act {
-            background: url("@/assets/img/checkComparison/btn_bg_act.png")
-              no-repeat center center / 100% 100%;
-          }
-        }
-      }
-      .toggle-group {
-        display: flex;
-        .toggle-item {
-          width: 126px;
-          text-align: center;
-          font-size: 21px;
-          line-height: 52px;
-          cursor: pointer;
-          &.before {
-            background: url("@/assets/img/checkComparison/before_bg.png")
-              no-repeat center center / 100% 100%;
-            margin-right: -23px;
-          }
-          &.before-act {
-            background: url("@/assets/img/checkComparison/before_bg_act.png")
-              no-repeat center center / 100% 100%;
-            margin-right: -23px;
-          }
-          &.after {
-            background: url("@/assets/img/checkComparison/after_bg.png")
-              no-repeat center center / 100% 100%;
-          }
-          &.after-act {
-            background: url("@/assets/img/checkComparison/after_bg_act.png")
-              no-repeat center center / 100% 100%;
-          }
-        }
-      }
-      .select {
-        line-height: 49px;
-        .mr-10 {
-          margin-right: 10px;
-        }
-        .el-select {
-          color: #00fff0;
-          ::v-deep {
-            .el-select__wrapper {
-              background: url("@/assets/img/checkComparison/select_bg.png")
-                no-repeat center center / 100% 100%;
-              border: none;
-              box-shadow: none;
-              .el-select__placeholder {
-                font-weight: 800;
-                font-size: 17px;
-                color: #ffffff;
-                background: linear-gradient(
-                  92deg,
-                  #8cc1e3 0%,
-                  #cdfbff 48.8525390625%,
-                  #8cd8fb 100%
-                );
-                -webkit-background-clip: text;
-                -webkit-text-fill-color: transparent;
-              }
-            }
-          }
-        }
-      }
-    }
-    .box-content {
-      // @include wh(auto, calc(100% - 52px - 46px - 62px - 19px));
-      position: relative;
-      box-sizing: border-box;
-      margin: 4px;
-      .map {
-        border-radius: 5px;
-        border: 1px solid #00fff0;
-        box-sizing: border-box;
-        width: 100%;
-        height: 100%;
-      }
-      .list {
-        width: 100%;
-        max-height: 100%;
-        display: flex;
-        flex-wrap: wrap;
-        overflow-y: auto;
-      }
-      .picture-list {
-        .picture-item {
-          border-radius: 5px;
-          border: 1px solid #00fff0;
-          width: 33%;
-          height: 225px;
-          display: flex;
-          justify-content: space-between;
-          padding: 4px;
-          box-sizing: border-box;
-          position: relative;
-          cursor: pointer;
-          margin-right: 8px;
-          margin-bottom: 15px;
-          &.marker {
-            &::before {
-              content: "已标记";
-              position: absolute;
-              top: 4px;
-              right: 4px;
-              width: 72px;
-              height: 32px;
-              line-height: 32px;
-              text-align: right;
-              padding-right: 8px;
-              box-sizing: border-box;
-              z-index: 5;
-              font-weight: 800;
-              font-size: 15px;
-              background: url("@/assets/img/checkComparison/picturn_title_bg.png")
-                no-repeat center center / 100% 100%;
-            }
-          }
-          .image {
-            width: 49.5%;
-            height: 100%;
-            cursor: pointer;
-          }
-          .overlay {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            background: rgba(79, 38, 11, 0.6);
-            top: 0;
-            left: 0;
-            border-radius: 5px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            .overlay-btn {
-              background: #f78724;
-              border-radius: 5px;
-              font-weight: 800;
-              font-size: 21px;
-              padding: 4px 18px;
-            }
-          }
-        }
-      }
-      .photo-list {
-        .photo-item {
-          border-radius: 5px;
-          border: 1px solid #00fff0;
-          width: 15.64%;
-          height: 194px;
-          margin-right: 19px;
-          margin-bottom: 11px;
-          position: relative;
-          .image {
-            width: 100%;
-            height: 100%;
-            border-radius: 5px;
-          }
-          .photo-name {
-            position: absolute;
-            bottom: 7px;
-            left: 4px;
-            text-align: center;
-            line-height: 34px;
-            width: 103px;
-            height: 34px;
-            font-weight: 800;
-            font-size: 19px;
-            color: #2ff5ed;
-            background: url("@/assets/img/checkComparison/title_bg.png")
-              no-repeat center center / 100% 100%;
-          }
-        }
-      }
-      .box-btn {
-        position: absolute;
-        bottom: 55px;
-        left: 35%;
-        display: flex;
-        width: auto;
-        div {
-          width: 255px;
-          height: 59px;
-          line-height: 59px;
-          text-align: center;
-          font-weight: bold;
-          font-size: 21px;
-          cursor: pointer;
-        }
-        .orange {
-          background: url("@/assets/img/checkComparison/map_btn_bg_orange.png")
-            no-repeat center center / 100% 100%;
-          margin-right: 13px;
-        }
-        .green {
-          background: url("@/assets/img/checkComparison/map_btn_bg_green.png")
-            no-repeat center center / 100% 100%;
-        }
-      }
-      .mark-area {
-        position: absolute;
-        right: 11px;
-        bottom: 6px;
-        width: 422px;
-        height: 364px;
-        background: #022d3c;
-        box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.73);
-        border-radius: 6px;
-        border: 2px solid #11cfc4;
-        cursor: pointer;
-        .mark-title {
-          background: url("@/assets/img/checkComparison/mark_title_bg.png")
-            no-repeat center center / 100% 100%;
-          width: 218px;
-          height: 26px;
-          font-weight: 400;
-          font-size: 18px;
-          margin: auto;
-          text-align: center;
-          line-height: 26px;
-          position: relative;
-          z-index: 1;
-          div {
-            color: #ffffff;
-            background: linear-gradient(0deg, #06ffce 0%, #ffffff 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-          }
-        }
-        .image {
-          width: 100%;
-          height: 100%;
-          border-radius: 5px;
-          position: absolute;
-          z-index: 0;
-          top: 0;
-        }
-      }
-    }
-  }
-}
-</style>

src/views/detailsPage/analysis/analysisMap.js

@@ -1,183 +0,0 @@
-import config from "@/api/config.js";
-import * as KMap from "@/utils/ol-map/KMap";
-import * as util from "@/common/ol_common.js";
-import {
-  newAreaFeature,
-  newAreaPoint,
-  newPoint,
-  newPolymerFeature,
-} from "../../zhgl/map";
-import { base_img_url2 } from "../../../api/config";
-import Stroke from "ol/style/Stroke";
-import Style from "ol/style/Style";
-import Photo from "ol-ext/style/Photo";
-
-/**
- * @description 农事分析详情地图
- */
-class analysisMap {
-  getRadius(zoom) {
-    if (zoom >= 20) {
-      return 70;
-    }
-    if (zoom >= 19) {
-      return 30;
-    }
-    if (zoom >= 18) {
-      return 15;
-    }
-    if (zoom >= 17) {
-      return 10;
-    }
-    return 5;
-  }
-
-  constructor() {
-    let that = this;
-    let vectorStyle = new KMap.VectorStyle();
-    this.areaLayer = new KMap.VectorLayer("areaLayer", 999, {
-      style: (f) =>
-        vectorStyle.getPolygonStyle(f.get("color") + "10", f.get("color"), 3),
-    });
-    this.subAreaLayer = new KMap.VectorLayer("subAreaLayer", 999, {
-      style: (f) => vectorStyle.getPolygonStyle("#fba50410", "#fba504", 1),
-    });
-    this.areaPointLayer = new KMap.VectorLayer("areaPointLayer", 1000, {
-      style: (f) =>
-        vectorStyle.getPointTextStyle(
-          f.get("name"),
-          "#120046",
-          "#FFFFFF",
-          2,
-          30
-        ),
-    });
-    this.treeLayer = new KMap.VectorLayer("treeLayer", 999);
-    this.imgStyleCache = {};
-    this.imgTreeLayer = new KMap.VectorLayer("imgTreeLayer", 999, {
-      minZoom: 15,
-      maxZoom: 22,
-      style: (feature) => {
-        let zoom = that.kmap.view.getZoom();
-        let r = that.getRadius(zoom);
-        let img = feature.get("img");
-        let k = img + r;
-        if (img && img != "") {
-          let style = that.imgStyleCache[k];
-          if (!style) {
-            style = new Style({
-              image: new Photo({
-                src: base_img_url2 + img,
-                radius: r,
-                shadow: 0,
-                crop: true,
-                kind: "circle",
-                onload: function () {
-                  that.imgTreeLayer.layer.changed();
-                },
-                displacement: [0, 30 + 15],
-                stroke: new Stroke({
-                  width: 3,
-                  color: "#fdfcfc",
-                }),
-              }),
-            });
-            that.imgStyleCache[k] = style;
-          }
-          return style;
-        } else {
-          return vectorStyle.getPointSimpleStyle(
-            10,
-            "#00000000",
-            "#00000000",
-            1
-          );
-        }
-      },
-    });
-    this.imgTreeLayer.layer.setVisible(false);
-    this.subAreaLayer.layer.setVisible(true);
-  }
-
-  initMap(location, target) {
-    let level = 18;
-    let coordinate = util.wktCastGeom(location).getFirstCoordinate();
-    this.kmap = new KMap.Map(
-      target,
-      level,
-      coordinate[0],
-      coordinate[1],
-      null,
-      10,
-      22
-    );
-    let xyz = config.base_img_url + "map/lby/{z}/{x}/{y}.png";
-    this.kmap.addXYZLayer(xyz, { minZoom: 15, maxZoom: 22 });
-    let xyz2 = config.base_img_url3 + "map/lby/{z}/{x}/{y}.png";
-    this.kmap.addXYZLayer(xyz2, { minZoom: 12, maxZoom: 22 });
-    this.kmap.addLayer(this.areaLayer.layer);
-    this.kmap.addLayer(this.subAreaLayer.layer);
-    this.kmap.addLayer(this.treeLayer.layer);
-    this.kmap.addLayer(this.areaPointLayer.layer);
-    this.kmap.addLayer(this.imgTreeLayer.layer);
-  }
-
-  initArea(organId) {
-    let that = this;
-    this.areaLayer.refresh();
-    VE_API.area.list({ organId }).then(({ data, code }) => {
-      for (let item of data) {
-        that.areaLayer.addFeature(newAreaFeature(item));
-        that.areaPointLayer.addFeature(newAreaPoint(item));
-      }
-    });
-  }
-
-  initSubArea(organId) {
-    let that = this;
-    this.subAreaLayer.refresh();
-    VE_API.sub_area.list({ organId }).then(({ data, code }) => {
-      for (let item of data) {
-        that.subAreaLayer.addFeature(newPolymerFeature(item));
-      }
-    });
-  }
-
-  initTree(organId) {
-    let that = this;
-    this.treeLayer.refresh();
-    this.imgTreeLayer.refresh();
-    VE_API.tree
-      .treeListAndGrowData({ organId, areaId: -1 })
-      .then(({ data, code }) => {
-        for (let item of data) {
-          let point = newPoint(item);
-          that.treeLayer.addFeature(point);
-          that.imgTreeLayer.addFeature(point);
-        }
-      });
-  }
-  addSingleSelect(listener) {
-    this.treeLayer.addSingleSelect(function (e) {
-      if (e.selected.length > 0) {
-        listener(e.selected[0]);
-      }
-    }, this.kmap.map);
-  }
-
-  setTreeStyle(style) {
-    this.treeLayer.layer.setStyle(style);
-    this.treeLayer.layer.changed();
-  }
-  fit(geomOrExtent) {
-    this.kmap.fit(geomOrExtent);
-  }
-  openCloseImg() {
-    this.imgTreeLayer.layer.setVisible(!this.imgTreeLayer.layer.getVisible());
-  }
-  openClosePolymer() {
-    this.subAreaLayer.layer.setVisible(!this.subAreaLayer.layer.getVisible());
-  }
-}
-
-export default analysisMap;

src/views/detailsPage/analysis/index.vue

@@ -1,405 +0,0 @@
-<template>
-  <div>
-    <Bg></Bg>
-    <Header></Header>
-    <div class="container2">
-      <div class="mainDiv">
-        <div class="leftBox">
-          <Title class="title" title="农事分析"></Title>
-        </div>
-
-        <div class="rightBox">
-          <Title class="title" title="一梢营养"></Title>
-          <div class="box-item flex">
-            <div class="basic-info">
-              <div class="box-title">
-                <span>农事基本信息</span>
-                <img src="@/assets/img/analysisDetails/edit_icon.png" alt="" />
-              </div>
-              <div class="box-cont">
-                <div class="text">
-                  <img src="@/assets/img/analysisDetails/round.png" alt="" />
-                  <span>执行时间:</span>
-                  <span class="value">2024.03.04</span>
-                </div>
-                <div class="text">
-                  <img src="@/assets/img/analysisDetails/round.png" alt="" />
-                  <span>农事类型:</span>
-                  <span class="value">一梢营养</span>
-                </div>
-                <div class="text mb">
-                  <img src="@/assets/img/analysisDetails/round.png" alt="" />
-                  <span>药物处方</span>
-                </div>
-                <div class="card">
-                  <div class="header">
-                    <div class="icon"></div>
-                    <div class="name">
-                      <span class="blue">营养类-</span>
-                      <span>乙烯利 (药物配比 1:11)</span>
-                    </div>
-                  </div>
-                  <div class="desc">药物建议:禁用****</div>
-                </div>
-                <div class="card">
-                  <div class="header">
-                    <div class="icon"></div>
-                    <div class="name">
-                      <span class="blue">病虫害-</span>
-                      <span>多效挫 (药物配比 1:11)</span>
-                    </div>
-                  </div>
-                  <div class="desc">药物建议:禁用****</div>
-                </div>
-                <div class="text">
-                  <img src="@/assets/img/analysisDetails/round.png" alt="" />
-                  <span>复核时间: </span>
-                  <span class="value">2024.03.07</span>
-                </div>
-              </div>
-            </div>
-            <div class="map" ref="mapRef">
-              <div class="map-title">执行区域</div>
-            </div>
-          </div>
-          <div class="box-item border box-height">
-            <div class="box-header">
-              <div class="box-title">
-                <span>农事复盘指标图</span>
-              </div>
-              <div class="select-group">
-                <el-select
-                  v-model="selectValue"
-                  class="select yse-events"
-                  effect="dark"
-                  popper-class="v-select-popper-ns"
-                >
-                  <el-option
-                    v-for="item in optionsList"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  />
-                </el-select>
-                <el-select
-                  v-model="selectValueTwo"
-                  class="select yse-events"
-                  effect="dark"
-                  popper-class="v-select-popper-ns"
-                >
-                  <el-option
-                    v-for="item in optionsListTwo"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  />
-                </el-select>
-              </div>
-            </div>
-            <LineChart></LineChart>
-          </div>
-          <div class="box-item border">
-            <div class="box-title">
-              <span>时序照片</span>
-            </div>
-            <TreeImgList
-              :selected="selected"
-              :periodId="curPeriodId"
-              :attrField="curAttrField"
-              v-for="treeImg in treeImgList"
-              :treeId="treeImg.id"
-              :key="treeImg.id"
-              :code="treeImg.code"
-              :images="treeImg.images"
-              @clickAction="imgListClick"
-              @preview="preview"
-            ></TreeImgList>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-   <PicturePreview
-    :show="showViewer"
-    :imageUrl="urls"
-    :curIndex="urlsIndex"
-  ></PicturePreview>
-</template>
-
-<script setup>
-import Bg from "../../Bg";
-import Title from "../../components/title";
-import Header from "@/views/components/Header.vue";
-import LineChart from "./lineChart.vue";
-import TreeImgList from "../../zhgl/com/tree_img_list/TreeImgList";
-import PicturePreview from "@/components/PicturePreview.vue";
-import analysisMap from "./analysisMap";
-import { ref, onMounted } from "vue";
-import { useStore } from "vuex";
-
-const store = useStore();
-
-const selectValue = ref("7");
-
-const optionsList = [
-  {
-    value: "7",
-    label: "农事作用分区",
-  },
-  {
-    value: "3",
-    label: "3天",
-  },
-];
-
-const selectValueTwo = ref("7");
-
-const optionsListTwo = [
-  {
-    value: "7",
-    label: "显示时间",
-  },
-  {
-    value: "3",
-    label: "3天",
-  },
-];
-
-const selected = ref([]);
-let curPeriodId = ref(null);
-let treeImgList = ref([]);
-let page = 0;
-let limit = 10;
-const miniMapRef = ref(null);
-const urls = ref([]);
-const urlsIndex = ref(0);
-const showViewer = ref(false);
-
-/**
- * 点击图片列表
- * @param key
- * @param treeId
- */
-function imgListClick(key, treeId) {
-  switch (key) {
-    case "treeImgList":
-      selected.value = [treeId];
-      break;
-    case "dateImgList":
-      selected.value = [treeId];
-      break;
-  }
-  miniMapRef.value.setSelected(treeId);
-}
-
-/**
- * 预览照片
- * @param images
- */
-function preview(images, dataArr, index) {
-  //   datas.value = dataArr;
-  urls.value = images;
-  urlsIndex.value = index;
-  showViewer.value = !showViewer.value;
-}
-
-// 地图初始化
-const mapRef = ref(null);
-const kmap = new analysisMap();
-const location = store.getters.userinfo.location;
-const curGardenId = ref(store.getters.userinfo.curGardenId);
-
-onMounted(() => {
-  page = 0;
-  limit = 10;
-  //   initTreeImgList(organId, areaId, page, limit);
-  initTreeImgList(766, 2, 0, 10);
-  kmap.initMap(location, mapRef.value);
-});
-
-/**
- * 初始化TreeImgList
- * */
-async function initTreeImgList(organId, areaId, pageNo) {
-  if (pageNo) {
-    page = pageNo;
-  }
-  if (!areaId) {
-    areaId = -1;
-  }
-  let { code, data } = await VE_API.tree.page({ organId, areaId, page, limit });
-  //   if (data.length == 0) {
-  //     nomore.value = true;
-  //   }
-  for (let item of data) {
-    treeImgList.value.push(item);
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.container2 {
-  height: 100%;
-  width: 100%;
-  z-index: 2;
-  position: absolute;
-}
-.mainDiv {
-  position: absolute;
-  top: 100px;
-  bottom: 60px;
-  left: 20px;
-  right: 20px;
-  .leftBox {
-    float: left;
-    width: 720px;
-    height: calc(100%);
-    border: 1px solid rgba(81, 233, 240, 0.6);
-    box-sizing: border-box;
-  }
-  .title {
-    width: 480px;
-  }
-  .rightBox {
-    float: right;
-    width: calc(100% - 720px - 12px);
-    height: 100%;
-    background: #032c3940;
-    border: 1px solid rgba(81, 233, 240, 0.6);
-    box-sizing: border-box;
-    overflow: auto;
-    color: #fff;
-    .box-item {
-      margin: 10px;
-      width: 98%;
-      height: 424px;
-      box-sizing: border-box;
-      margin-bottom: 20px;
-      &.border {
-        padding: 6px;
-        border: 1px solid rgba(0, 255, 240, 0.12);
-      }
-      &.flex {
-        display: flex;
-        justify-content: space-between;
-      }
-      &.box-height {
-        height: 400px;
-      }
-
-      .box-title {
-        background: url("@/assets/img/analysisDetails/box_title.png") no-repeat
-          center center / 100% 100%;
-        width: 370px;
-        display: flex;
-        box-sizing: border-box;
-        justify-content: space-between;
-        padding: 5px 12px;
-        font-size: 20px;
-        margin-bottom: 20px;
-        height: 40px;
-        img {
-          cursor: pointer;
-        }
-      }
-      .basic-info {
-        background: url("@/assets/img/analysisDetails/info_bg.png") no-repeat
-          center center / 100% 100%;
-        width: 370px;
-        height: 100%;
-        box-sizing: border-box;
-        padding: 6px;
-        border: 1px solid rgba(0, 255, 240, 0.12);
-        .box-cont {
-          .text {
-            font-size: 16px;
-            margin-top: 16px;
-            img {
-              margin-right: 9px;
-            }
-            .value {
-              margin-left: 25px;
-              color: #01f0e2;
-            }
-          }
-          .mb {
-            margin-bottom: 10px;
-          }
-          .card {
-            width: auto;
-            margin: 0 4px;
-            background: rgba(9, 37, 40, 0.29);
-            border: 1px solid rgba(1, 240, 226, 0.12);
-            font-size: 16px;
-            margin-bottom: 7px;
-            .header {
-              background: rgba(1, 240, 226, 0.05);
-              font-weight: bold;
-              color: #ff8840;
-              display: flex;
-              align-items: center;
-              padding: 4px 10px;
-              .icon {
-                width: 7px;
-                height: 7px;
-                background: #05e5d9;
-                transform: rotate(45deg);
-                margin-right: 10px;
-              }
-              .blue {
-                color: #01f0e2;
-              }
-            }
-            .desc {
-              padding: 9px 10px;
-              color: #ff0000;
-              opacity: 0.6;
-            }
-          }
-        }
-      }
-      .map {
-        width: calc(100% - 374px - 4px);
-        height: 100%;
-        border: 1px solid rgba(0, 255, 240, 0.12);
-        position: relative;
-        box-sizing: border-box;
-        .map-title {
-          position: absolute;
-          top: 6px;
-          left: 4px;
-          background: url("@/assets/img/analysisDetails/map_title.png")
-            no-repeat center center / 100% 100%;
-          width: 322px;
-          font-size: 20px;
-          color: #00fff0;
-          padding: 3px 10px;
-          z-index: 9;
-        }
-      }
-
-      .box-header {
-        display: flex;
-        justify-content: space-between;
-        .select {
-          width: 162px;
-          margin-right: 10px;
-          ::v-deep {
-            .el-select__wrapper {
-              background: transparent;
-              border: 1px solid rgba(81, 233, 240, 0.6);
-              box-shadow: none;
-              .el-select__placeholder {
-                color: #00fff0;
-              }
-              .el-select__caret {
-                color: #00fff0;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-</style>

src/views/detailsPage/analysis/lineChart.vue

@@ -1,208 +0,0 @@
-<template>
-  <div ref="chartDom" class="box-echars"></div>
-</template>
-<script setup>
-import { onMounted, ref } from "vue";
-import { useStore } from "vuex";
-import * as echarts from "echarts";
-
-const getters = useStore().getters;
-const curGardenId = ref(getters.userinfo.curGardenId);
-const active = ref(0);
-
-let chartDom = ref(null);
-let myChart = null;
-
-onMounted(() => {
-  myChart = echarts.init(chartDom.value);
-  myChart.setOption(options);
-  //   initData();
-});
-
-const colors = [
-  {
-    offset: 0.25,
-    color: "rgba(171, 207, 255, 0.2)",
-  },
-  {
-    offset: 0.5,
-    color: "rgba(171, 207, 255, 0.3)",
-  },
-  {
-    offset: 0.75,
-    color: "rgba(0, 255, 240, 0.4)",
-  },
-  {
-    offset: 1,
-    color: "rgba(0, 255, 240, 0.8)",
-  },
-];
-
-const options = {
-  tooltip: {
-    trigger: "axis",
-    backgroundColor: "rgba(255,255,255,0)",
-    borderColor: "rgba(255,255,255,0)",
-    textStyle: {
-      color: "#FFF",
-    },
-    // formatter: "{c1}℃-{c0}℃",
-    formatter: `<div style="background: linear-gradient(0deg, #2A746C 0%, #22569C 100%);padding:2px 10px;border-radius: 5px">****农事</div>`,
-    padding: [0],
-    axisPointer: {
-      type: "none", // 设置为'none'以去除指示线
-    },
-    axisPointer: {
-      type: "shadow",
-      shadowStyle: {
-        color: {
-          type: "linear",
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [
-            { offset: 0, color: "rgba(0, 255, 240, 0)" },
-            { offset: 0.5, color: "rgba(0, 255, 240, 0.5)" },
-            { offset: 1, color: "rgba(0, 255, 240, 0)" },
-          ],
-          global: false,
-        },
-      },
-    },
-  },
-  legend: {
-    orient: "vertical",
-    //图例文字样式
-    textStyle: {
-      color: "#fff",
-      fontSize: "13px",
-    },
-    align: "left",
-    right: "1%",
-    top: "0%",
-    icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAHCAYAAACLD1QDAAAAAXNSR0IArs4c6QAAAKBJREFUOE/NkzsOwjAQBed519AB9z9TOEBoOQCfFq+NDAFRJB1F3PhpLT+NRrZsHM6CHdCYWyGIhCLhIbxmNsVeeVucPOVcHasJNS01zdbPD3uJ7vLx+EDyxZsBhKEqvAMWZxNGLum9T7mfWbM/wXVVrchPxwvoQJsXxw+cRSJ/4CK9DH7hasLqn+DU7ber/DRcIe1XCHdbubk1v7k1/9YntbGQLThP/eUAAAAASUVORK5CYII=",
-    itemWidth: 30,
-    itemHeight: 8,
-  },
-  grid: {
-    top: "12%",
-    left: "3.5%",
-    right: "1.5%",
-    bottom: "8%",
-  },
-  xAxis: [
-    {
-      type: "category",
-      data: [
-        "8/1",
-        "8/2",
-        "8/3",
-        "8/4",
-        "8/5",
-        "8/6",
-        "8/7",
-        "8/8",
-        "8/9",
-        "8/10",
-        "8/11",
-        "8/12",
-        "8/13",
-        "8/14",
-      ],
-      axisLine: {
-        show: false,
-        lineStyle: {
-          color: "#f4f4f4",
-        },
-      },
-      splitLine: {
-        show: true,
-        lineStyle: {
-          color: "#ffffff1f",
-        },
-      },
-      axisTick: {
-        show: false,
-        alignWithLabel: true,
-      },
-      axisLabel: {
-        interval: 0,
-        textStyle: {
-          color: "#fff",
-        },
-        // 默认x轴字体大小
-        fontSize: 12,
-        align: "center",
-      },
-      boundaryGap: false,
-    },
-  ],
-  yAxis: [
-    {
-      name: "****指标",
-      nameTextStyle: {
-        color: "#fff",
-        fontSize: "16",
-      },
-      type: "value",
-      max: 100,
-      axisTick: {
-        show: false,
-      },
-      axisLabel: {
-        textStyle: {
-          color: "#fff",
-        },
-      },
-      // 分割线
-      splitLine: {
-        show: true,
-        lineStyle: {
-          color: "#ffffff1f",
-        },
-      },
-    },
-  ],
-  series: [
-    {
-      name: "指标变化折线",
-      type: "line",
-      data: [5, 21, 12, 13, 11, 22, 54, 32, 5, 21, 12, 13, 11, 22],
-      showSymbol: false,
-      symbol: "circle",
-      symbolSize: 8,
-      itemStyle: {
-        color: "#00B8AE",
-        borderWidth: 1,
-        borderColor:'#fff'
-      },
-      areaStyle: {
-        normal: {
-          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, colors, false),
-        },
-      },
-      lineStyle: {
-        width: 1,
-        color: "#00FFF0",
-      },
-    },
-  ],
-};
-
-const initData = async () => {
-  const { code, data } = await VE_API.znxy.growAbnormal({
-    gardenId: curGardenId.value,
-  });
-  myChart.clear();
-  options && myChart.setOption(options);
-};
-</script>
-
-<style lang="scss" scoped>
-.box-echars {
-  width: 100%;
-  //   background: red;
-  height: 325px;
-}
-</style>

src/views/detailsPage/weather/charts/doubleLine.vue

@@ -1,245 +0,0 @@
-<template>
-  <div ref="chartDom" class="box-echars"></div>
-</template>
-<script setup>
-import { onMounted, ref } from "vue";
-import { useStore } from "vuex";
-import * as echarts from "echarts";
-
-const getters = useStore().getters;
-const curGardenId = ref(getters.userinfo.curGardenId);
-
-let chartDom = ref(null);
-let myChart = null;
-
-onMounted(() => {
-  myChart = echarts.init(chartDom.value);
-  myChart.setOption(options);
-  //   initData();
-});
-
-const colors = [
-  {
-    offset: 0.25,
-    color: "rgba(0, 154, 243, 0.2)",
-  },
-  {
-    offset: 0.5,
-    color: "rgba(0, 154, 243, 0.3)",
-  },
-  {
-    offset: 0.75,
-    color: "rgba(0, 154, 243, 0.5)",
-  },
-  {
-    offset: 1,
-    color: "rgba(0, 154, 243, 0.8)",
-  },
-];
-
-const options = {
-  tooltip: {
-    trigger: "axis",
-    backgroundColor: "rgba(255,255,255,0)",
-    borderColor: "rgba(255,255,255,0)",
-    textStyle: {
-      color: "#FFF",
-    },
-    formatter: (params) => {
-      const htmlStr = `<div class="tooltip-double-line">
-                            <div class="name">龙眼</div>
-                            <div class="text">高温预警</div>
-                       </div>`;
-      return htmlStr;
-    },
-    padding: [0],
-  },
-  grid: {
-    top: "10%",
-    left: "2%",
-    right: "2%",
-    bottom: "1%",
-    containLabel: true,
-  },
-  xAxis: [
-    {
-      type: "category",
-      data: [
-        "8/1",
-        "8/2",
-        "8/3",
-        "8/4",
-        "8/5",
-        "8/6",
-        "8/7",
-        "8/8",
-        "8/9",
-        "8/10",
-        "8/11",
-        "8/12",
-        "8/13",
-        "8/14",
-      ],
-      axisLine: {
-        show: true,
-        lineStyle: {
-          color: "#ffffff2f",
-        },
-      },
-      splitLine: {
-        show: false,
-      },
-      axisTick: {
-        show: true,
-        lineStyle: {
-          color: "#ffffff4f",
-        },
-        alignWithLabel: true,
-      },
-      axisLabel: {
-        interval: 0,
-        textStyle: {
-          color: "rgba(255, 255, 255, 0.73)",
-        },
-        // 默认x轴字体大小
-        fontSize: 12,
-        align: "center",
-        margin: 12,
-      },
-      boundaryGap: false,
-    },
-  ],
-  yAxis: [
-    {
-      name: "",
-      type: "value",
-      max: 40,
-      axisTick: {
-        show: false,
-      },
-      axisLabel: {
-        textStyle: {
-          color: "#fff",
-        },
-        formatter: "{value}°",
-        margin: 10,
-      },
-      // 分割线
-      splitLine: {
-        show: false,
-      },
-    },
-  ],
-  series: [
-    {
-      name: "蓝色",
-      type: "line",
-      smooth: true,
-      data: [5, 21, 12, 13, 11, 22, 34, 32, 5, 21, 12, 13, 11, 22],
-      showSymbol: false,
-      symbol: "circle",
-      symbolSize: 8,
-      itemStyle: {
-        color: "#009AF3",
-        borderWidth: 1,
-        borderColor: "#fff",
-      },
-      areaStyle: {
-        normal: {
-          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, colors, false),
-        },
-      },
-      lineStyle: {
-        width: 1,
-        color: "#009AF3",
-      },
-    },
-    {
-      name: "红色",
-      type: "line",
-      smooth: true,
-      data: [15, 11, 10, 12, 21, 32, 24, 22, 10, 11, 22, 33, 21, 20],
-      showSymbol: false,
-      symbol: "circle",
-      symbolSize: 8,
-      itemStyle: {
-        color: "#FF0000",
-        borderWidth: 1,
-        borderColor: "#fff",
-      },
-      areaStyle: {
-        normal: {
-          color: new echarts.graphic.LinearGradient(
-            0,
-            1,
-            0,
-            0,
-            [
-              {
-                offset: 0.25,
-                color: "rgba(255, 0, 0, 0.2)",
-              },
-              {
-                offset: 0.5,
-                color: "rgba(255, 0, 0, 0.3)",
-              },
-              {
-                offset: 0.75,
-                color: "rgba(255, 0, 0, 0.5)",
-              },
-              {
-                offset: 1,
-                color: "rgba(255, 0, 0, 0.8)",
-              },
-            ],
-            false
-          ),
-        },
-      },
-      lineStyle: {
-        width: 1,
-        color: "#FF0000",
-      },
-    },
-  ],
-};
-
-const initData = async () => {
-  myChart.clear();
-  options && myChart.setOption(options);
-};
-</script>
-
-<style lang="scss" scoped>
-.box-echars {
-  width: 100%;
-  height: calc(100% - 40px);
-}
-</style>
-<style lang="scss">
-.tooltip-double-line {
-  width: 116px;
-  height: 65px;
-  background: url("@/assets/img/detailsPage/tooltip_bg.png") no-repeat center
-    center / 100% 100%;
-  .name {
-    font-weight: bold;
-    font-size: 18px;
-    color: #00fcff;
-    text-align: center;
-    line-height: 28px;
-  }
-  .text {
-    width: 100px;
-    height: 24px;
-    background: linear-gradient(183deg, #ff7575, #d83738);
-    border-radius: 12px;
-    text-align: center;
-    font-weight: 500;
-    font-size: 16px;
-    color: #ffffff;
-    margin: auto;
-    margin-top: 9px;
-  }
-}
-</style>

src/views/detailsPage/weather/charts/line.vue

@@ -1,324 +0,0 @@
-<template>
-  <div ref="chartDom" class="box-echars"></div>
-</template>
-<script setup>
-import { onMounted, ref } from "vue";
-import { useStore } from "vuex";
-import * as echarts from "echarts";
-
-const getters = useStore().getters;
-const curGardenId = ref(getters.userinfo.curGardenId);
-
-let chartDom = ref(null);
-let myChart = null;
-
-onMounted(() => {
-  myChart = echarts.init(chartDom.value);
-  myChart.setOption(options);
-  //   initData();
-});
-
-const xData = [
-    {
-        date:"8/1",
-        text:'一级',
-        level:1
-    },
-    {
-        date:"8/2",
-        text:'一级',
-        level:1
-    },
-    {
-        date:"8/3",
-        text:'一级',
-        level:1
-    },
-    {
-        date:"8/4",
-        text:'二级',
-        level:2
-    },
-    {
-        date:"8/5",
-        text:'二级',
-        level:2
-    },
-    {
-        date:"8/6",
-        text:'二级',
-        level:2
-    },
-    {
-        date:"8/7",
-        text:'一级',
-        level:1
-    },
-    {
-        date:"8/8",
-        text:'一级',
-        level:1
-    },
-    {
-        date:"8/9",
-        text:'三级',
-        level:3
-    },
-    {
-        date:"8/2",
-        text:'三级',
-        level:3
-    },
-    {
-        date:"8/10",
-        text:'一级',
-        level:1
-    },
-    {
-        date:"8/11",
-        text:'一级',
-        level:1
-    },
-    {
-        date:"8/12",
-        text:'一级',
-        level:1
-    },
-    {
-        date:"8/13",
-        text:'三级',
-        level:3
-    },
-    {
-        date:"8/14",
-        text:'一级',
-        level:1
-    },
-]
-
-const colors = [
-  {
-    offset: 0.25,
-    color: "rgba(255, 123, 49, 0.2)",
-  },
-  {
-    offset: 0.5,
-    color: "rgba(255, 123, 49, 0.3)",
-  },
-  {
-    offset: 0.75,
-    color: "rgba(255, 123, 49, 0.5)",
-  },
-  {
-    offset: 1,
-    color: "rgba(255, 123, 49, 0.8)",
-  },
-];
-
-const options = {
-  tooltip: {
-    trigger: "axis",
-    backgroundColor: "#FF743E",
-    borderColor: "#FF743E",
-    textStyle: {
-      color: "#FFF",
-    },
-    formatter: "{c0}%",
-    padding: [2, 5],
-  },
-  grid: {
-    top: "10%",
-    left: "2%",
-    right: "3%",
-    bottom: "8%",
-    containLabel: true,
-  },
-  xAxis: [
-    {
-      type: "category",
-      axisLine: {
-        show: true,
-        lineStyle: {
-          color: "#ffffff2f",
-        },
-      },
-      splitLine: {
-        show: false,
-      },
-      axisTick: {
-        show: true,
-        lineStyle: {
-          color: "#ffffff4f",
-        },
-        alignWithLabel: true,
-      },
-      axisLabel: {
-        interval: 0,
-        textStyle: {
-          color: "rgba(255, 255, 255, 0.73)",
-        },
-        // 默认x轴字体大小
-        fontSize: 12,
-        align: "center",
-        margin: 12,
-        formatter:(i)=>{
-            const str = `${xData[i].date}\n{level${xData[i].level}|${xData[i].text}}`
-            return str
-        },
-        rich:{
-            level1:{
-                fontSize: '14px',
-                padding:[12,0,0,0],
-                color:'#FFA043'
-            },
-            level2:{
-                fontSize: '14px',
-                padding:[12,0,0,0],
-                color:'#FF4824'
-            },
-            level3:{
-                fontSize: '14px',
-                padding:[12,0,0,0],
-                color:'#FF1313'
-            }
-        }
-      },
-      boundaryGap: false,
-    },
-    //   {
-    //   type: "category",
-    //   data: [
-    //     "一级",
-    //     "三级",
-    //     "二级",
-    //     "二级",
-    //     "二级",
-    //     "一级",
-    //     "一级",
-    //     "三级",
-    //     "一级",
-    //     "一级",
-    //     "二级",
-    //     "二级",
-    //     "一级",
-    //     "一级",
-    //   ],
-    //   axisLine: {
-    //     show: true,
-    //     lineStyle: {
-    //       color: "#ffffff2f",
-    //     },
-    //   },
-    //   splitLine: {
-    //     show: false,
-    //   },
-    //   axisTick: {
-    //     show: true,
-    //     lineStyle: {
-    //       color: "#ffffff4f",
-    //     },
-    //     alignWithLabel: true,
-    //   },
-    //   axisLabel: {
-    //     interval: 0,
-    //     textStyle: {
-    //       color: "rgba(255, 255, 255, 0.73)",
-    //     },
-    //     // 默认x轴字体大小
-    //     fontSize: 12,
-    //     align: "center",
-    //     margin: 12,
-    //   },
-    //   boundaryGap: false,
-    // },
-  ],
-  yAxis: [
-    {
-      name: "",
-      type: "value",
-      max: 100,
-      axisTick: {
-        show: false,
-      },
-      axisLabel: {
-        textStyle: {
-          color: "#fff",
-        },
-        formatter: "{value}%",
-        margin: 10,
-      },
-      // 分割线
-      splitLine: {
-        show: false,
-      },
-    },
-  ],
-  series: [
-    {
-      name: "橙色",
-      type: "line",
-      smooth: true,
-      data: [5, 21, 12, 13, 11, 22, 34, 32, 5, 21, 12, 13, 11, 22],
-      showSymbol: false,
-      symbol: "circle",
-      symbolSize: 8,
-      itemStyle: {
-        color: "#FF7B31",
-        borderWidth: 1,
-        borderColor: "#fff",
-      },
-      areaStyle: {
-        normal: {
-          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, colors, false),
-        },
-      },
-      lineStyle: {
-        width: 1,
-        color: "#F74E0C",
-      },
-    },
-  ],
-};
-
-const initData = async () => {
-  const { code, data } = await VE_API.znxy.growAbnormal({
-    gardenId: curGardenId.value,
-  });
-  myChart.clear();
-  options && myChart.setOption(options);
-};
-</script>
-
-<style lang="scss" scoped>
-.box-echars {
-  width: 100%;
-  height: calc(100% - 40px);
-}
-</style>
-<style lang="scss">
-.tooltip-double-line {
-  width: 116px;
-  height: 65px;
-  background: url("@/assets/img/detailsPage/tooltip_bg.png") no-repeat center
-    center / 100% 100%;
-  .name {
-    font-weight: bold;
-    font-size: 18px;
-    color: #00fcff;
-    text-align: center;
-    line-height: 28px;
-  }
-  .text {
-    width: 100px;
-    height: 24px;
-    background: linear-gradient(183deg, #ff7575, #d83738);
-    border-radius: 12px;
-    text-align: center;
-    font-weight: 500;
-    font-size: 16px;
-    color: #ffffff;
-    margin: auto;
-    margin-top: 9px;
-  }
-}
-</style>

src/views/detailsPage/weather/charts/pie.vue

@@ -1,217 +0,0 @@
-<template>
-  <div ref="chartDom" class="content-box"></div>
-</template>
-
-<script setup>
-import { onMounted, ref } from "vue";
-import * as echarts from "echarts";
-
-let chartDom = ref(null);
-let myChart = null;
-
-const valueModal = [
-  10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
-  1, 1,
-];
-
-onMounted(() => {
-  myChart = echarts.init(chartDom.value);
-  myChart.setOption(options);
-  //   initData();
-});
-
-// 数据模型
-function pieValue(arr, name, color) {
-  const list = arr.map((item) => {
-    const colorStr = item > 1 ? color : ["transparent", "transparent"];
-    return {
-      value: item,
-      name,
-      itemStyle: {
-        //颜色渐变
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: colorStr[0] },
-          { offset: 1, color: colorStr[1] },
-        ]),
-        borderRadius: ["50%", "50%"],
-      },
-    };
-  });
-  return list;
-}
-
-// 色块数据模型
-function pieDataModal(name, radius, data) {
-  return {
-    name: name,
-    type: "pie",
-    radius: radius,
-    center: ["50%", "55%"],
-    hoverAnimation: false,
-    label: {
-      normal: {
-        show: false,
-      },
-      emphasis: {
-        show: false,
-      },
-    },
-    zlevel: 1,
-    labelLine: {
-      normal: {
-        show: false,
-      },
-    },
-    data,
-  };
-}
-
-//环形分割线模型
-function gaugeModal(radius) {
-  return {
-    name: "分割线",
-    type: "gauge",
-    radius, //12
-    clockwise: true,
-    startAngle: "90",
-    center: ["50%", "55%"],
-    endAngle: "-269.9999",
-    splitNumber: 24,
-    zlevel: 2,
-    detail: {
-      offsetCenter: [10, 20],
-      formatter: " ",
-    },
-    pointer: {
-      show: false,
-    },
-    axisLine: {
-      show: false,
-    },
-    axisTick: {
-      show: false,
-    },
-    splitLine: {
-      show: true,
-      length: 3,
-      lineStyle: {
-        color: "#fff",
-        width: 1,
-      },
-    },
-    axisLabel: {
-      show: false,
-    },
-  };
-}
-
-// 环形边框模型
-function pieBorder(radius, borderColor) {
-  return {
-    type: "pie",
-    radius,
-    hoverAnimation: false,
-    center: ["50%", "55%"],
-    cursor: "auto",
-    itemStyle: {
-      color: borderColor,
-    },
-    data: [
-      {
-        value: 100,
-      },
-    ],
-    labelLine: {
-      show: false,
-    },
-    zlevel: 0,
-  };
-}
-
-const options = {
-  //   tooltip: {
-  //     trigger: "item",
-  //   },
-  legend: {
-    top: "5%",
-    right: "center",
-    itemHeight: 8,
-    textStyle: {
-      color: "#fff",
-      fontSize: "12px",
-    },
-    data: [
-      {
-        name: "荔枝",
-        icon:"image://orange_icon.png"
-      },
-      {
-        name: "龙眼",
-        icon:"image://blue_icon.png"
-      },
-      {
-        name: "芒果",
-        icon:"image://green_icon.png"
-      },
-    ],
-  },
-  graphic: {
-    //图形中间图片
-    elements: [
-      {
-        type: "image",
-        style: {
-          image: "pie_bg.png", //你的图片地址
-          width: 150,
-          height: 150,
-        },
-        left: "35.8%",
-        top: "34.5%",
-      },
-    ],
-  },
-  series: [
-    //第一层色块数据
-    pieDataModal(
-      "荔枝",
-      ["46%", "51.5%"],
-      pieValue(valueModal, "病虫预警", ["#FF653C", "#FFD3F3"])
-    ),
-    //第一层环形分割线
-    gaugeModal("63%"),
-    // 第一层环形边框
-    pieBorder(["44%", "54%"], "#3b1007"),
-    //第二层色块数据
-    pieDataModal(
-      "龙眼",
-      ["59.5%", "65%"],
-      pieValue(valueModal, "气象预警", ["#3CADFA", "#CCEBFF"])
-    ),
-    //第二层环形分割线
-    gaugeModal("77%"),
-    // 第二层环形边框
-    pieBorder(["57.5%", "67.5%"], "#142745"),
-    //第三层色块数据
-    pieDataModal(
-      "芒果",
-      ["73%", "78.5%"],
-      pieValue(valueModal, "生长预警", ["#79E773", "#AFFDD8"])
-    ),
-    //第三层环形分割线
-    gaugeModal("90%"),
-    // 第三层环形边框
-    pieBorder(["71%", "81%"], "#112a23"),
-  ],
-};
-function initData() {
-  myChart.clear();
-  options && myChart.setOption(options);
-}
-</script>
-
-<style lang="scss" scoped>
-.content-box {
-  width: 100%;
-  height: 370px;
-}
-</style>

src/views/detailsPage/weather/index.vue

@@ -1,343 +0,0 @@
-<template>
-  <div>
-    <Bg></Bg>
-    <Header></Header>
-    <div class="container2">
-      <div class="mainDiv">
-        <div class="top">
-          <div class="left-box chart">
-            <Pie></Pie>
-          </div>
-          <div class="right-box chart">
-            <div class="box-title">
-              <img
-                class="img"
-                src="@/assets/img/detailsPage/arrow.png"
-                alt=""
-              />
-              <span>气象预警</span>
-            </div>
-            <DoubleLine></DoubleLine>
-          </div>
-        </div>
-        <div class="bottom">
-          <div class="left-box">
-            <div class="box-title">
-              <img
-                class="img"
-                src="@/assets/img/detailsPage/arrow.png"
-                alt=""
-              />
-              <span>物候期预警</span>
-            </div>
-            <div class="box-cont pd-auto">
-              <div class="tabs">
-                <div
-                  :class="['tabs-item', { active: active === index }]"
-                  @click="handleActive(index)"
-                  v-for="(item, index) in tabsArr"
-                  :key="index"
-                >
-                  {{ item.name }}
-                </div>
-              </div>
-              <div class="list">
-                <div
-                  class="list-item"
-                  v-for="(item, index) in list"
-                  :key="index"
-                >
-                  <div class="name">
-                    <img src="@/assets/img/detailsPage/list_icon.png" alt="" />
-                    <div>{{ item.name }}</div>
-                  </div>
-                  <div class="border">
-                    <div
-                      :class="[
-                        'item-block',
-                        { 'item-active': listAct === ele.id },
-                        { 'item-block-3': ele.level == 3 },
-                      ]"
-                      @click="handleListAct(ele.id)"
-                      v-for="(ele, idx) in item.arr"
-                      :key="idx + 1"
-                    >
-                      {{ ele.name }}
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="right-box">
-            <div class="box-title">
-              <img src="@/assets/img/detailsPage/arrow.png" alt="" />
-              荔枝-<span class="name">干旱预警</span>
-            </div>
-            <div class="box-cont flex">
-              <Line class="cahrt"></Line>
-              <div class="forewarning">
-                <div class="title">干旱预警</div>
-                <div class="text">
-                  7月15日与7月16日干旱情况较为严重，干旱风险为3级，若您未能及时浇水，请及时关注果树生长情况，适时补水。昨天和今天干旱风险
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import Bg from "../../Bg";
-import Title from "../../components/title";
-import Header from "@/views/components/Header.vue";
-import { ref, onMounted } from "vue";
-import { useStore } from "vuex";
-import Pie from "./charts/pie.vue";
-import Line from "./charts/line.vue";
-import DoubleLine from "./charts/doubleLine.vue";
-
-const store = useStore();
-
-const location = store.getters.userinfo.location;
-const curGardenId = ref(store.getters.userinfo.curGardenId);
-
-const tabsArr = [
-  {
-    name: "龙眼",
-  },
-  {
-    name: "荔枝",
-  },
-  {
-    name: "芒果",
-  },
-];
-
-const active = ref(0);
-const handleActive = (i) => {
-  active.value = i;
-};
-
-const list = [
-  {
-    name: "秋梢期",
-    arr: [
-      {
-        name: "干旱预警",
-        level: 1,
-        id: 0,
-      },
-      {
-        name: "高温预警",
-        level: 1,
-        id: 1,
-      },
-    ],
-  },
-  {
-    name: "花芽分化期",
-    arr: [
-      {
-        name: "干旱预警",
-        level: 3,
-        id: 2,
-      },
-      {
-        name: "高温预警",
-        level: 3,
-        id: 3,
-      },
-    ],
-  },
-];
-
-const listAct = ref(0);
-const handleListAct = (i) => {
-  listAct.value = i;
-};
-
-onMounted(() => {});
-</script>
-
-<style lang="scss" scoped>
-.container2 {
-  height: 100%;
-  width: 100%;
-  z-index: 2;
-  position: absolute;
-}
-.mainDiv {
-  position: absolute;
-  top: 100px;
-  bottom: 60px;
-  left: 20px;
-  right: 20px;
-  color: #fff;
-  .top,
-  .bottom {
-    width: 100%;
-    box-sizing: border-box;
-    display: flex;
-    border-top: 1px solid rgba(81, 233, 240, 0.6);
-    .box-title {
-      background: url("@/assets/img/detailsPage/title_bg.png") no-repeat center
-        center / 100% 100%;
-      width: 100%;
-      font-weight: 800;
-      font-size: 24px;
-      padding: 3px 10px;
-      .img {
-        margin-right: 8px;
-      }
-      .name {
-        color: #ff7a46;
-      }
-    }
-    .left-box {
-      width: 30%;
-      height: 100%;
-      border-right: 1px solid #fff;
-    }
-    .right-box {
-      width: 70%;
-      height: 100%;
-    }
-  }
-  .top {
-    height: 45%;
-    margin-bottom: 10px;
-  }
-  .bottom {
-    height: calc(100% - 45% - 8px - 10px);
-    .pd-auto {
-      padding: 20px 15px;
-    }
-    .box-cont {
-      width: 100%;
-      height: calc(100% - 10px - 8px - 20px);
-      box-sizing: border-box;
-      .tabs {
-        display: flex;
-        justify-content: space-between;
-        padding: 0 10px;
-        .tabs-item {
-          width: 128px;
-          height: 38px;
-          line-height: 33px;
-          font-weight: 500;
-          font-size: 14px;
-          color: #b4fffb;
-          text-align: center;
-          background: url("@/assets/img/tabs_btn2.png") no-repeat center center /
-            100% 100%;
-          cursor: pointer;
-          &.active {
-            width: 138px;
-            height: 42px;
-            line-height: 36px;
-            font-weight: bold;
-            font-size: 18px;
-            color: #ffffff;
-            background: url("@/assets/img/tabs_btn1_active.png") no-repeat
-              center center / 100% 100%;
-          }
-        }
-      }
-      .list {
-        overflow: auto;
-        height: 100%;
-        .list-item {
-          margin-top: 25px;
-          .name {
-            display: flex;
-            align-items: center;
-            div {
-              font-size: 18px;
-              background: url("@/assets/img/detailsPage/list_name_bg.png")
-                no-repeat center center / 100% 100%;
-              padding: 3px 12px;
-              margin-left: 8px;
-            }
-          }
-          .border {
-            margin-top: 10px;
-            border-radius: 5px;
-            padding: 15px 5px;
-            background: rgba(48, 205, 209, 0.15);
-            display: flex;
-            .item-block {
-              background: url("@/assets/img/detailsPage/yj_btn.png") no-repeat
-                center center / 100% 100%;
-              padding: 10px 15px;
-              text-align: center;
-              box-sizing: border-box;
-              width: 68px;
-              margin: 0 10px;
-              cursor: pointer;
-              &.item-active {
-                background: url("@/assets/img/detailsPage/yj_btn_act.png")
-                  no-repeat center center / 100% 100%;
-                position: relative;
-                &::after {
-                  content: "";
-                  position: absolute;
-                  background: url("@/assets/img/detailsPage/act_arrow.png")
-                    no-repeat center center / 100% 100%;
-                  bottom: -10px;
-                  left: 40%;
-                  width: 14px;
-                  height: 8px;
-                }
-              }
-              &.item-block-3 {
-                background: url("@/assets/img/detailsPage/yj_btn_3.png")
-                  no-repeat center center / 100% 100%;
-                &.item-active {
-                  background: url("@/assets/img/detailsPage/yj_btn_act_3.png")
-                    no-repeat center center / 100% 100%;
-                  &::after {
-                    background: url("@/assets/img/detailsPage/act_arrow_3.png")
-                      no-repeat center center / 100% 100%;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-      .cahrt {
-        width: calc(100% - 442px);
-        height: 100%;
-      }
-      .forewarning {
-        width: 442px;
-        height: 334px;
-        box-sizing: border-box;
-        background: url("@/assets/img/detailsPage/yj_bg.png") no-repeat center
-          center / 100% 100%;
-        .title {
-          font-weight: bold;
-          font-size: 22px;
-          color: #0ee2dc;
-          padding: 13px 0;
-          width: 160px;
-          margin: auto;
-          text-align: center;
-          background: url("@/assets/img/detailsPage/yj_title.png") no-repeat
-            center center / 100% 100%;
-        }
-        .text {
-          padding: 6px 15px;
-        }
-      }
-    }
-    .flex {
-      display: flex;
-    }
-  }
-}
-</style>

src/views/edit_ns_recrod/EditNsMap.js

@@ -1,216 +0,0 @@
-import Layer from 'ol/layer/Vector'
-import Source from 'ol/source/Vector'
-import Select from 'ol/interaction/Select.js';
-import {singleClick} from 'ol/events/condition'
-import * as olEvents from 'ol/events';
-import config from "@/api/config.js"
-import * as KMap from '@/utils/ol-map/KMap';
-import Style from "ol/style/Style";
-import Photo from "ol-ext/style/Photo";
-import {base_img_url2} from "../../api/config";
-import Stroke from "ol/style/Stroke";
-import * as util from "@/common/ol_common.js"
-import {newAreaFeature, newAreaPoint, newPolymerFeature, newPoint} from "../zhgl/map";
-import { GARDEN_STATUS_ENUM as STATUS_ENUM } from "@/api/enum.js"
-import Icon from "ol/style/Icon";
-
-/**
- * @description 智能巡园地图层对象
- */
-class EditNsMap {
-
-    constructor(){
-        let that = this
-        this.vectorStyle = new KMap.VectorStyle()
-        let pointSimpleStyle = this.vectorStyle.getPointSimpleStyle(8,"#999999","#d5d5d0","1")
-        this.areaLayer = new KMap.VectorLayer("areaLayer",999,{style:(f)=> that.vectorStyle.getPolygonStyle("#00000010", "#000000",3)})
-        this.subAreaLayer = new KMap.VectorLayer("subAreaLayer",1000,{style:(f)=> {
-                return that.vectorStyle.getPolygonStyle(f.get("fillColor"), f.get("strokeColor"), 2)
-        }})
-        this.afterDayNum = 3
-        this.areaPointLayer =  new KMap.VectorLayer("areaPointLayer",1002,{style:(f)=> that.vectorStyle.getPointTextStyle(f.get("name"), "#120046","#FFFFFF",2, 30)})
-        this.treeCacheStyle = {}
-        this.treeStyle= (f)=> {
-            let key = f.get("imgSrc");
-            if(that.treeCacheStyle[key]){
-                return that.treeCacheStyle[key]
-            }
-            let style = new Style({
-                image: new Icon({
-                    src: f.get("imgSrc"),
-                    scale:1,
-                    anchor:[0.5,1],
-                })
-            });
-            that.treeCacheStyle[key] = style
-            return style
-        }
-        this.treeLayer = new KMap.VectorLayer("statusPointLayer",999,{style:that.treeStyle})
-        this.treeFeatures = []
-    }
-
-    initMap(location, target)  {
-        let level = 18
-        let coordinate = util.wktCastGeom(location).getFirstCoordinate()
-        this.kmap = new KMap.Map(target,level,coordinate[0], coordinate[1],null,10,22);
-        let xyz = config.base_img_url + 'map/lby/{z}/{x}/{y}.png';
-        this.kmap.addXYZLayer(xyz,{minZoom:15,maxZoom:22});
-        let xyz2 = config.base_img_url3 + 'map/lby/{z}/{x}/{y}.png';
-        this.kmap.addXYZLayer(xyz2,{minZoom:12,maxZoom:22});
-        this.kmap.addLayer(this.areaLayer.layer)
-        this.kmap.addLayer(this.subAreaLayer.layer)
-        this.kmap.addLayer(this.treeLayer.layer)
-        this.kmap.addLayer(this.areaPointLayer.layer)
-    }
-
-    initArea(organId, callback){
-        let that = this
-        this.areaLayer.refresh()
-        VE_API.area.list({organId}).then(({data,code})=>{
-            for(let item of data){
-                that.areaLayer.addFeature(newAreaFeature(item))
-                that.areaPointLayer.addFeature(newAreaPoint(item))
-            }
-            callback && callback()
-        })
-    }
-
-    initSubArea(organId, callback){
-        let that = this
-        this.subAreaLayer.refresh()
-        VE_API.sub_area.list({organId}).then(({data,code})=>{
-            for(let item of data){
-                item.fillColor = that.handleStatusColor(item.status).fillColor
-                item.strokeColor = that.handleStatusColor(item.status).strokeColor
-                that.subAreaLayer.addFeature(newPolymerFeature(item))
-            }
-            callback && callback()
-        })
-    }
-
-
-    initTree(organId, callback){
-        let that = this
-        this.treeLayer.refresh()
-        that.treeFeatures = []
-        VE_API.sub_area.treeList({gardenId: organId}).then(({data}) => {
-            for(let item of data){
-                let result = that.handleStatusIcon(item)
-                if (result.hasStatus) {
-                    item.imgSrc = result.imgSrc
-                    let point = newPoint(item);
-                    that.treeLayer.addFeature(point)
-                    that.treeFeatures.push(point)
-                }
-            }
-            callback && callback()
-        })
-    }
-
-    // 状态图例
-    handleStatusIcon(obj) {
-        let key = this.afterDayNum == 3 ? "ycStatus" : this.afterDayNum == 5 ? "ycStatus5d" : "ycStatus7d"
-        let hasStatus = false
-        let imgSrc = null
-        if (obj[key] == 1) {
-            hasStatus = true
-            imgSrc = require('@/assets/status/status_bcyc.png')
-            return {hasStatus, imgSrc}
-        }
-        if (obj[key] == 2) {
-            hasStatus = true
-            imgSrc = require('@/assets/status/status_szyc.png')
-            return {hasStatus, imgSrc}
-        }
-        if (obj.review) {
-            hasStatus = true
-            imgSrc = require('@/assets/status/status_dfh.png')
-            return {hasStatus, imgSrc}
-        }
-        if (obj.fly) {
-            hasStatus = true
-            imgSrc = require('@/assets/status/status_xfdw.png')
-            return {hasStatus, imgSrc}
-        }
-        return {hasStatus, imgSrc}
-    }
-
-    // 区级颜色
-    handleStatusColor(key) {
-        let fillColor = '#ffffff00'
-        let strokeColor = '#ffffff'
-        switch (key) {
-            case STATUS_ENUM.DONE:
-                fillColor = 'rgba(95,255,197,0)'
-                strokeColor = '#ffffff'
-                break;
-            case STATUS_ENUM.ABNORMAL_GROWTH:
-                fillColor = 'rgba(255,189,5,0.2)'
-                strokeColor = '#FFE44E'
-                break;
-            case STATUS_ENUM.ABNORMAL_Pest:
-                fillColor = 'rgba(51,11,3,0.52)'
-                strokeColor = '#F55A5A'
-                break;
-            case STATUS_ENUM.PENDING_REVIEW:
-                fillColor = 'rgba(3,40,51,0.2)'
-                strokeColor = '#032833'
-                break;
-            case STATUS_ENUM.REVIEWED:
-                fillColor = 'rgba(95,255,197,0.1)'
-                strokeColor = '#5FFFC5'
-                break;
-            default:
-                break;
-        }
-        return {fillColor, strokeColor}
-    }
-
-    addToggleTreeSelect(listener){
-        let that = this
-        this.treeLayer.addToggleSelect(function({deselected,selected, preventDefault}){
-            if(selected.length > 0){
-                listener && listener(selected[0],deselected[0])
-            }
-            preventDefault()
-        },this.kmap.map, that.treeStyle)
-    }
-
-    addToggleSubAreaSelect(listener){
-        let that = this
-        this.subAreaLayer.addToggleSelect(function({deselected,selected,preventDefault}){
-            if(selected.length > 0){
-                that.treeLayer.source.forEachFeature((f)=>{
-                    if(f.get("subAreaId") == selected[0].get("id")){
-                        that.treeLayer.toggleSelect.getFeatures().remove(f)
-                    }
-                })
-                that.treeLayer.source.forEachFeature((f)=>{
-                    if(f.get("subAreaId") == selected[0].get("id")){
-                        that.treeLayer.toggleSelect.getFeatures().push(f)
-                    }
-                })
-            }
-            if(deselected.length > 0){
-                that.treeLayer.source.forEachFeature((f)=>{
-                    if(f.get("subAreaId") == deselected[0].get("id")){
-                        that.treeLayer.toggleSelect.getFeatures().remove(f)
-                    }
-                })
-            }
-            listener && listener(selected[0],deselected[0])
-            preventDefault()
-        },this.kmap.map)
-    }
-
-    refreshTree(organId,day,callback){
-        this.afterDayNum = day
-        this.initTree(organId, callback)
-
-    }
-    fit(geomOrExtent){
-        this.kmap.fit(geomOrExtent)
-    }
-}
-
-export default EditNsMap

src/views/edit_ns_recrod/index.vue

@@ -1,631 +0,0 @@
-<!--
- * @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></Bg>
-  <Header></Header>
-  <div class="container2">
-    <div class="mainDiv">
-      <div class="leftBox">
-        <Title title="编辑农事"></Title>
-        <div class="myForm">
-          <div class="basis">
-            <div class="basis-title">下发依据</div>
-            <div class="basis-desc">
-              您的果园2区、3区发现了花穗过长预警，飞鸟推荐疏花农事。
-            </div>
-          </div>
-          <el-form
-            :model="form"
-            ref="formRef"
-            :rules="rules"
-            label-width="80px"
-            :inline="false"
-            class="form"
-          >
-            <el-form-item class="form-item" prop="nsTypeIds" label="农事类型">
-              <el-select
-                multiple
-                @change="changeNsType"
-                v-model="nsTypeIds"
-                placeholder="请选择农事类型"
-                effect="dark"
-                popper-class="v-select-popper-ns"
-              >
-                <el-option
-                  v-for="item in nsTypeList"
-                  :key="item.id"
-                  :label="item.name"
-                  :value="item.id"
-                />
-              </el-select>
-            </el-form-item>
-            <el-form-item class="form-item" prop="execStyle" label="执行方式">
-              <el-radio-group fill="#13C4CD" v-model="execStyle">
-                <el-radio-button :value="1" label="无人机"></el-radio-button>
-                <el-radio-button :value="2" label="人工"></el-radio-button>
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item label-width="0" prop="drugList">
-              <span>药物</span>
-              <div class="table">
-                <div class="thead">
-                  <div class="th notopborder">功效</div>
-                  <div class="th notopborder">类型</div>
-                  <div class="th notopborder">药物配比/倍</div>
-                  <div class="tools notopborder">增/删</div>
-                </div>
-                <div class="tbody">
-                  <div v-for="(item, i) in drugList" :key="i" class="row">
-                    <div class="col">
-                      <select class="my-select" v-model="item.drugId">
-                        <option class="my-option" label="请选择" value="" />
-                        <option
-                          class="option"
-                          v-for="drug in nsDrugList"
-                          :key="drug.id"
-                          :label="drug.name"
-                          :value="drug.id"
-                        />
-                      </select>
-                    </div>
-                    <div class="col">
-                      <div class="prefix">1:</div>
-                      <input
-                        class="com"
-                        v-model="item.peibi"
-                        placeholder="输入配比"
-                      />
-                    </div>
-                    <div class="col">
-                      <input
-                        class="com"
-                        v-model="item.yongliang"
-                        placeholder="输入用量"
-                      />
-                      <div class="prefix">ml/g</div>
-                    </div>
-                    <div class="tools">
-                      <div
-                        @click="addNsDrugItem()"
-                        class="item-btn"
-                        style="background-color: #3fb326"
-                      >
-                        +
-                      </div>
-                      <div @click="deleteItem(i)" class="item-btn">-</div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </el-form-item>
-            <el-form-item class="form-item" prop="time2" label="执行范围">
-              <el-select
-                v-model="execRange"
-                placeholder="请选择执行范围"
-                popper-class="v-select-popper-ns"
-                clearable
-                effect="dark"
-                style="width: 70%"
-              >
-                <el-option label="三天内" :value="3" />
-              </el-select>
-            </el-form-item>
-            <el-form-item class="form-item" prop="time1" label="复核时间">
-              <el-select
-                v-model="reviewAfterDay"
-                placeholder="请选择复核时间"
-                popper-class="v-select-popper-ns"
-                clearable
-                effect="dark"
-                style="width: 70%"
-              >
-                <!-- <el-option
-                  v-for="item in options1"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                /> -->
-                <el-option label="三天后" :value="3" />
-              </el-select>
-            </el-form-item>
-            <el-form-item class="form-item" prop="desc" label="处方备注">
-              <el-input
-                v-model="desc"
-                :rows="4"
-                type="textarea"
-                placeholder="请输入注意事项"
-              />
-            </el-form-item>
-          </el-form>
-        </div>
-        <div class="my-bottoms">
-          <!-- <el-button class="btn" type="warning" v-if="recordId" @click="initSettingVal" >重置</el-button> -->
-          <el-button
-            class="btn"
-            color="rgba(255,78,0,.6)"
-            @click="remove()"
-            v-if="recordId"
-            >删除</el-button
-          >
-          <el-button class="btn btn-size" color="#032C39">生成处方单</el-button>
-          <el-button class="btn btn-size" color="#13C4CD" @click="onSubmit"
-            >保存修改</el-button
-          >
-        </div>
-      </div>
-
-      <div class="rightBox">
-        <div class="head">
-          <div class="name">编辑执行区域</div>
-          <div class="line"></div>
-          <div class="rhombus"></div>
-        </div>
-        <div class="map" ref="mapRef">
-          <YjTuli class="tuli"></YjTuli>
-          <Tsyg @selectDay="selectDay" class="tsyj"></Tsyg>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { useStore } from "vuex";
-import { ElMessage, ElMessageBox } from "element-plus";
-import {
-  onMounted,
-  ref,
-  reactive,
-  toRefs,
-  provide,
-  inject,
-  watch,
-  computed,
-} from "vue";
-import config from "@/api/config.js";
-import { NS_RECORD_STATUS_ENUM as STARUS_ENUM } from "../../api/enum";
-import { useRoute, useRouter } from "vue-router";
-import { dateFormat } from "../../utils/date_util";
-import Title from "../components/title";
-import EditNsMap from "./EditNsMap";
-import Bg from "../Bg";
-import Header from "@/views/components/Header.vue";
-import YjTuli from "../znxy/com/YjTuli";
-import Tsyg from "../znxy/com/Tsyg";
-
-const emit = defineEmits(["back"]);
-const selectDateObj = ref({});
-
-const router = useRouter();
-const route = useRoute();
-const recordId = route.query.recordId;
-
-const nsDrugList = ref([]);
-const nsTypeList = ref([]);
-const store = useStore();
-const location = store.getters.userinfo.location;
-const gardenId = store.getters.userinfo.curGardenId;
-const mapRef = ref(null);
-const form = reactive({
-  gardenId,
-  nsTypeIds: [],
-  drugList: [{ drugId: "" }],
-  treeIds: [],
-  subAreaIds: [],
-  execStyle: null,
-  execRange: null,
-  reviewAfterDay: null,
-  desc: null,
-  status: STARUS_ENUM.STAY_START,
-});
-const {
-  nsTypeIds,
-  drugList,
-  execStyle,
-  execRange,
-  reviewAfterDay,
-  desc,
-  treeIds,
-  subAreaIds,
-} = toRefs(form);
-
-const formRef = ref(null);
-
-const rules = {
-  execStyle: [
-    {
-      required: true,
-      message: "请选择执行方式",
-      trigger: "blur",
-    },
-  ],
-  execRange: [
-    {
-      required: true,
-      message: "请选择执行范围天数",
-      trigger: "blur",
-    },
-  ],
-  reviewAfterDay: [
-    {
-      required: true,
-      message: "请选择复核时间",
-      trigger: "blur",
-    },
-  ],
-  nsTypeIds: [
-    {
-      required: true,
-      message: "请选择农事类型",
-      trigger: "blur",
-    },
-  ],
-  treeIds: [
-    {
-      required: true,
-      message: "请选择树",
-      trigger: "blur",
-    },
-  ],
-  subAreaIds: [
-    {
-      required: true,
-      message: "请选择区",
-      trigger: "blur",
-    },
-  ],
-  drugList: [
-    {
-      required: true,
-      message: "请添加农药/化肥",
-      trigger: "blur",
-    },
-  ],
-};
-
-const options1 = [
-  {
-    value: "Option1",
-    label: "三天后",
-  },
-];
-
-const kmap = new EditNsMap();
-onMounted(() => {
-  initNsTypeList();
-  kmap.initMap(location, mapRef.value);
-  kmap.addToggleSubAreaSelect();
-  kmap.addToggleTreeSelect();
-  kmap.initArea(gardenId, () => {});
-  kmap.initSubArea(gardenId, () => {
-    kmap.initTree(gardenId, () => {
-      initSettingVal();
-    });
-  });
-});
-
-function selectDay(e) {
-  kmap.refreshTree(gardenId, e, () => {
-    initSettingVal();
-  });
-}
-
-/**
- * @description:初始化赋值
- * @param {*}
- * @return {*}
- */
-function initSettingVal() {
-  if (recordId) {
-    VE_API.nsjy.getNsRecord({ id: recordId }).then(({ data }) => {
-      nsTypeIds.value = data.nsTypeIds ? data.nsTypeIds : [];
-      drugList.value = data.drugList && data.drugList.length > 0 ? data.drugList : [{}];
-      selectDateObj.value = {};
-      treeIds.value = data.treeIds;
-      subAreaIds.value = data.subAreaIds;
-      desc.value = data.desc;
-      execStyle.value = data.execStyle;
-      execRange.value = data.execRange;
-      reviewAfterDay.value = data.reviewAfterDay;
-
-      initDrugList();
-      loadSelectSubArea();
-      loadSelectTree();
-    });
-  }
-}
-
-function changeNsType() {
-  initDrugList();
-}
-function initNsTypeList() {
-  VE_API.ns_type.list().then(({ data }) => {
-    nsTypeList.value = data;
-  });
-}
-function initDrugList() {
-  VE_API.ns_drug.list({ nsTypeIds: nsTypeIds.value }).then(({ data }) => {
-    nsDrugList.value = data;
-  });
-}
-
-function addNsDrugItem() {
-  drugList.value.push({ drugId: "" });
-}
-function deleteItem(i) {
-  drugList.value.splice(i, 1);
-}
-
-//加载areaIds 数据选中
-function loadSelectSubArea() {
-  kmap.subAreaLayer.toggleSelect.getFeatures().clear();
-  kmap.subAreaLayer.source.forEachFeature((f) => {
-    let res = subAreaIds.value.find((id) => f.get("id") == id);
-    if (res) {
-      kmap.subAreaLayer.toggleSelect.getFeatures().push(f);
-    }
-  });
-}
-
-//加载treeIds 数据选中
-function loadSelectTree() {
-  kmap.treeLayer.toggleSelect.getFeatures().clear();
-  let i = 0;
-  kmap.treeFeatures.forEach((f) => {
-    while (i < treeIds.value.length) {
-      if (f.get("id") === treeIds.value[i]) {
-        kmap.treeLayer.toggleSelect.getFeatures().push(f);
-        i++;
-      }
-      break;
-    }
-  });
-}
-
-//设置treeIds subAreaIds
-function setSubAreaIdsTreeIds() {
-  let treeSelectedFeatures = kmap.treeLayer.toggleSelect.getFeatures();
-  let subAreaSelectedFeatures = kmap.subAreaLayer.toggleSelect.getFeatures();
-  treeIds.value = [];
-  subAreaIds.value = [];
-  subAreaSelectedFeatures.forEach((f) => {
-    subAreaIds.value.push(f.get("id"));
-  });
-  treeSelectedFeatures.forEach((f) => {
-    treeIds.value.push(f.get("id"));
-    if (
-      subAreaIds.value.findIndex(
-        (subAreaId) => f.get("subAreaId") == subAreaId
-      ) < 0
-    ) {
-      subAreaIds.value.push(f.get("subAreaId"));
-    }
-  });
-
-  if (treeIds.value.length == 0) {
-    ElMessage({
-      message: "请选择树！",
-      type: "warning",
-    });
-    return true;
-  }
-  return false;
-}
-
-/**
- * @description:提交
- * @param {*}
- * @return {*}
- */
-const onSubmit = () => {
-  //设置treeIds areaIds
-  if (setSubAreaIdsTreeIds()) {
-    return false;
-  }
-  formRef.value.validate(async (valid) => {
-    if (valid) {
-      if (recordId) {
-        form.id = recordId;
-      }
-      let res = await VE_API.nsjy.save(form);
-      if (res.code == 0) {
-        emit("back");
-      }
-    } else {
-      console.log("error submit!!");
-      return false;
-    }
-  });
-};
-
-const remove = () => {
-  ElMessageBox.confirm("是否要删除这个农事?", "警告", {
-    confirmButtonText: "删除",
-    cancelButtonText: "取消",
-    type: "warning",
-  })
-    .then(() => {
-      VE_API.nsjy.remove({ id: recordId });
-      ElMessage({
-        type: "success",
-        message: "删除成功！",
-      });
-      setTimeout(() => {
-        emit("back");
-      }, 500);
-    })
-    .catch(() => {
-      ElMessage({
-        type: "info",
-        message: "取消",
-      });
-    });
-};
-</script>
-
-<style lang="scss" scoped>
-@import "../../styles/index.scss";
-@import "./table.scss";
-.container2 {
-  height: 100%;
-  width: 100%;
-  z-index: 2;
-  position: absolute;
-}
-.mainDiv {
-  position: absolute;
-  top: 100px;
-  bottom: 50px;
-  left: 20px;
-  right: 20px;
-  .leftBox {
-    float: left;
-    width: 500px;
-    height: calc(100%);
-    border: 1px solid rgba(81, 233, 240, 0.6);
-    box-sizing: border-box;
-    overflow-y: hidden;
-    .myForm {
-      box-sizing: border-box;
-      overflow-y: auto;
-      color: #fff;
-      padding: 16px;
-      height: calc(100% - 128px);
-      .basis {
-        margin-bottom: 22px;
-        .basis-title {
-          font-weight: normal;
-          font-size: 17px;
-          margin-bottom: 5px;
-        }
-        .basis-desc {
-          font-weight: normal;
-          font-size: 13px;
-          color: #fe4646;
-          padding: 12px;
-          border-radius: 4px;
-          border: 1px solid rgba(81, 233, 240, 0.59);
-        }
-      }
-      .form {
-        ::v-deep {
-          .el-form-item__label {
-            color: #fff;
-          }
-          .form-item {
-            .el-radio-button__inner{
-              background: #c3c5c6;
-              border-radius: 5px;
-              margin-right: 8px;
-            }
-            .el-select__wrapper {
-              background: #032c39;
-              border-radius: 4px;
-              border: 1px solid rgba(81, 233, 240, 0.59);
-              box-shadow: none;
-              color: #fff;
-            }
-            .el-select__placeholder.is-transparent{
-              color: rgba(0, 255, 240, 0.27);
-            }
-            .el-select__placeholder{
-              color: #00FFF0;
-            }
-            .el-textarea {
-              --el-input-placeholder-color: rgba(0, 255, 240, 0.27);
-            }
-            .el-textarea__inner {
-              background: #032c39;
-              border-radius: 4px;
-              border: 1px solid rgba(81, 233, 240, 0.59);
-              box-shadow: none;
-              color: #fff;
-            }
-          }
-        }
-      }
-    }
-    .my-bottoms {
-      border-top: 1px solid rgba(81, 233, 240, 0.6);
-      box-sizing: border-box;
-      text-align: center;
-      padding: 20px 30px;
-      .btn {
-        color: #fff;
-        width: 87px;
-        height: 38px;
-      }
-      .btn-size {
-        width: 141px;
-      }
-    }
-  }
-  .rightBox {
-    float: right;
-    width: calc(100% - 500px - 12px);
-    height: 100%;
-    background: #032c3940;
-    border-radius: 4px;
-    border: 1px solid rgba(81, 233, 240, 0.6);
-    box-sizing: border-box;
-    .head {
-      // @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);
-        font-weight: normal;
-        font-size: 21px;
-        line-height: 30px;
-        color: #ffffff;
-      }
-      .line {
-        width: calc(100% - 250px);
-        border-bottom: 1px solid #51e9f0;
-        opacity: 0.4;
-        box-sizing: border-box;
-        margin-top: 7px;
-      }
-      .rhombus {
-        margin-top: 7px;
-        // @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));
-      position: relative;
-      .tuli {
-        position: absolute;
-        right: 50px;
-        bottom: 30px;
-        z-index: 1000;
-      }
-      .tsyj {
-        position: absolute;
-        left: 100px;
-        bottom: 0px;
-        z-index: 1000;
-      }
-    }
-  }
-}
-.calendar-item {
-  // @include wh(100%, 100%);
-  text-align: center;
-}
-.is-selected {
-  color: #1989fa;
-  background-color: yellow;
-}
-</style>

src/views/edit_ns_recrod/table.scss

@@ -1,113 +0,0 @@
-@import "../../styles/index.scss";
-.table{
-  @include wh(calc(100%),auto);
-  box-sizing: border-box;
-  background: #010E11;
-  border-radius: 9px;
-  border: 1px solid #29AAAE;
-  .title{
-    @include wh(100px,26px);
-    line-height: 26px;
-    font-size: 16px;
-    font-weight: bold;
-    padding: 5px;
-  }
-  .thead{
-    min-height: rpx(50);
-    display: flex;
-    border-bottom: 1px solid #009a8c;
-    box-sizing: border-box;
-    color: #e6e6e6;
-    .th{
-      @include wh(calc(33% - 20px),rpx(50));
-      line-height: rpx(50);
-      text-align: center;
-      border-right: 1px solid #009a8c;
-      box-sizing: border-box;
-      background-color: #009a8c40;
-    }
-    .th:first-child{
-      border-top-left-radius: 5px;
-    }
-    .tools {
-      @include wh(calc(1% + 60px), rpx(50));
-      line-height: rpx(50);
-      text-align: center;
-      background-color: #009a8c40;
-      border-top-right-radius: 5px;
-    }
-    .notopborder{
-      border-top: none;
-    }
-  }
-  .tbody{
-    @include wh(100%,auto);
-    .row{
-      display: flex;
-      color: #009a8c;
-      border-bottom: 1px solid #009a8c;
-      box-sizing: border-box;
-      .col{
-        @include wh(calc(33% - 20px),rpx(60));
-        line-height: rpx(60);
-        border-right: 1px solid #009a8c;
-        text-align: center;
-        box-sizing: border-box;
-        .com{
-          float: left;
-          width: calc(100% - 35px);
-          border: none;
-          padding: 0px;
-          color: #009a8c;
-          background-color: transparent;
-          line-height: rpx(60);
-        }
-        .prefix{
-          float: left;
-          width: 35px;
-        }
-      }
-      .tools{
-        @include wh(calc(1% + 60px),rpx(60));
-        line-height: rpx(60);
-        text-align: center;
-        .item-btn{
-          float: left;
-          margin: rpx(15) 0px rpx(15) rpx(15);
-          @include wh(rpx(30),rpx(30));
-          border-radius: 50%;
-          background-color: red;
-          box-sizing: border-box;
-          line-height: rpx(26);
-          text-align: center;
-          color: white;
-          font-weight: bold;
-          cursor:pointer;
-        }
-      }
-      .notopborder{
-        border-top: none;
-      }
-    }
-    .row:last-child{
-      border-bottom: 0px solid #009a8c;
-      box-sizing: border-box;
-    }
-  }
-}
-
-.my-select{
-  margin: 0px 5px 0px 5px;
-  background-color: transparent;
-  border: none;
-  color: #009a8c;
-  width: calc(100% - 5px - 5px);
-  line-height: rpx(60);
-  .my-option{
-    color: #009a8c;
-    background-color: transparent;
-    border: none;
-    line-height: rpx(60);
-  }
-}
-

src/views/zhgl/com/MiniMap.vue

@@ -1,181 +0,0 @@
-<template>
-  <div  id="imgDiv" class="map" ref="mapRef">
-    <div class="tools">
-      <div class="text">您当前查看的是：</div>
-      <el-select v-model="curOrganId" @change="changeOrgan" class="select" placeholder="Select" size="small">
-        <el-option
-            v-for="item in organList"
-            :key="item.organId"
-            :label="item.name"
-            :value="item.organId"
-        />
-      </el-select>
-      <el-select v-model="curAreaId" @change="changeArea" class="select" placeholder="Select" size="small">
-        <el-option
-            label="全部"
-            value="-1"
-        />
-        <el-option
-            v-for="item in areaList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-        />
-      </el-select>
-    </div>
-  </div>
-</template>
-
-<script setup>
-
-
-import * as util from "@/common/ol_common.js"
-import * as KMap from '@/utils/ol-map/KMap';
-import config from "@/api/config.js"
-import {onMounted, ref} from "vue";
-import {useStore} from "vuex";
-import {newAreaFeature, newPoint ,redBoxStyle} from "../map.js"
-import {miniStyle2} from "./Style";
-import {WKT} from "ol/format";
-import {ElMessage} from "element-plus";
-
-let emits = defineEmits(["selectOrganIdAndAreaId","selectTree","initListener"])
-let store = useStore()
-const mapRef = ref("mapRef")
-let map = null;
-let vectorStyle = new KMap.VectorStyle()
-let organList = ref([]);
-let curOrganId = ref(null)
-let areaList = ref([])
-let curAreaId = ref(null)
-let areaLayer = new KMap.VectorLayer("areaLayer",999,{style:(f)=>
-      vectorStyle.getPolygonStyle("#ffffff10", "#ffffff",3)})
-let treeLayer = new KMap.VectorLayer("treeLayer",999, {style:miniStyle2})
-
-const initMap = () => {
-  let location = store.getters.userinfo.location;
-  curOrganId.value = store.getters.userinfo.curGardenId
-  let coordinate = util.wktCastGeom(location).getFirstCoordinate()
-  map = new KMap.Map(mapRef.value, 16.5, coordinate[0], coordinate[1]);
-  let xyz = config.base_img_url + 'map/lby/{z}/{x}/{y}.png';
-  map.addXYZLayer(xyz,{minZoom:15,maxZoom:20});
-
-  let xyz2 = config.base_img_url3 + 'map/lby/{z}/{x}/{y}.png';
-  map.addXYZLayer(xyz2,{minZoom:15,maxZoom:20});
-
-  map.addLayer(areaLayer.layer)
-  map.addLayer(treeLayer.layer)
-}
-
-const initOrgan = async ()=>{
-  let {data,code} = await VE_API.organ.gardenData()
-  organList.value = data;
-  if(!curOrganId.value)
-    curOrganId.value = data[0].organId
-  await initArea(curOrganId.value)
-  curAreaId.value = areaList.value[0].id
-  await changeArea();
-}
-
-const initArea = async (organId) => {
-  areaLayer.refresh()
-  let {data,code} = await VE_API.area.list({organId})
-  for(let item of data){
-    areaLayer.addFeature(newAreaFeature(item))
-  }
-  areaList.value = data
-}
-
-const initTree = (organId, areaId) => {
-  treeLayer.refresh()
-  selectOrganIdAndAreaId(organId, areaId)
-}
-
-const initListener = ()=>{
-  treeLayer.addSingleSelect(function (e){
-    if(e.selected.length > 0){
-      emits("selectTree", e.selected[0])
-    }else{
-      emits("selectTree", null)
-    }
-  },map.map)
-  let area = areaList.value.find((item)=> item.id == curAreaId.value)
-  emits("initListener",new WKT().readGeometry(area.pointWkt).getFirstCoordinate())
-}
-
-const changeOrgan = function(){
-  initArea(curOrganId.value)
-  initTree(curOrganId.value,-1)
-}
-
-const changeArea = function(){
-  initTree(curOrganId.value, curAreaId.value)
-  if(!curAreaId.value || curAreaId.value == -1){
-    map.fit(areaLayer.source.getExtent())
-  }else{
-    map.fit(areaLayer.getFeatureById(curAreaId.value).getGeometry().getExtent())
-  }
-}
-
-const selectOrganIdAndAreaId = function(organId, areaId){
-  emits("selectOrganIdAndAreaId",organId, areaId)
-  VE_API.tree.treeList({gardenId:organId,areaId}).then(({data,code})=>{
-    for(let item of data){
-      treeLayer.addFeature(newPoint(item))
-    }
-    emits("getTreeList", data)
-  })
-}
-
-
-onMounted(async()=>{
-  initMap()
-  await initOrgan()
-  initListener()
-})
-function setSelected(treeId){
-  treeLayer.singleSelect.getFeatures().clear()
-  if(!treeId)
-    return;
-  let f = treeLayer.getFeatureById(treeId);
-  treeLayer.singleSelect.getFeatures().insertAt(0,f)
-  map.view.setCenter(f.getGeometry().getFirstCoordinate())
-}
-function updateExtentFeature(feature){
-  feature.setStyle(redBoxStyle())
-  map.polygonLayer.refresh()
-  map.polygonLayer.addFeature(feature)
-}
-function getOrganId(){
-  return curOrganId.value
-}
-function getAreaId(){
-  return curAreaId.value
-}
-
-defineExpose({
-  setSelected, updateExtentFeature, getOrganId, getAreaId
-});
-</script>
-
-<style lang="scss" scoped>
-.map{
-  position: relative;
-}
-.tools{
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  display: flex;
-  flex-direction: row;
-  .select{
-    width: 80px;
-  }
-  .text{
-    line-height: 24px;
-    color: #00FFF0;
-    font-weight: bold;
-  }
-  z-index: 1000;
-}
-</style>

src/views/zhgl/com/Setting.vue

@@ -1,163 +0,0 @@
-<template>
-  <div style="position: relative">
-    <div class="title">
-      <div class="my-name">设置</div>
-    </div>
-    <div class="tools">
-    </div>
-    <div class="mini-map" ref="mapRef"></div>
-  </div>
-</template>
-
-<script setup>
-import * as util from "@/common/ol_common.js"
-import * as KMap from '@/utils/ol-map/KMap';
-import config from "@/api/config.js"
-import {onMounted, ref} from "vue";
-import {useStore} from "vuex";
-import {newPoint,bboxToFeature} from "../map.js"
-import {miniStyle, miniSelectStyle} from "./Style";
-
-let emits = defineEmits(["moveMap","selectTree","selectPeriod","selectAttr"])
-let props = defineProps({
-  periodMap:{type:Object,require: true},
-  treeList:{type:Object,require: true},
-})
-
-let store = useStore()
-const mapRef = ref("mapRef")
-let curPeriod = ref({})
-let attrList = ref([])
-let curAttrField = ref(-1)
-let map = null;
-let treeLayer = new KMap.VectorLayer("treeLayer",1000, {style:miniStyle})
-
-const initMap = async () => {
-  let location = store.getters.userinfo.location;
-  let coordinate = util.wktCastGeom(location).getFirstCoordinate()
-  map = new KMap.Map(mapRef.value, 20, coordinate[0], coordinate[1], null, 20, 20);
-  let xyz = config.base_img_url + 'map/lby/{z}/{x}/{y}.png';
-  map.addXYZLayer(xyz,{minZoom:15,maxZoom:20});
-
-  let xyz2 = config.base_img_url3 + 'map/lby/{z}/{x}/{y}.png';
-  map.addXYZLayer(xyz2,{minZoom:15,maxZoom:20});
-
-  map.addLayer(treeLayer.layer)
-}
-
-const initTree = () => {
-  for(let item of props.treeList){
-    treeLayer.addFeature(newPoint(item))
-  }
-}
-
-onMounted(async()=>{
-  initMap()
-  initTree()
-  initListener()
-})
-
-/**
- * 初始化事件
- */
-function initListener(){
-  map.map.on("moveend", function (evt) {
-    emits("moveMap",getExtentFeature())
-  });
-  treeLayer.addSingleSelect(function (e){
-    if(e.selected.length > 0){
-      emits("selectTree", e.selected[0])
-    }else{
-      emits("selectTree", null)
-    }
-  },map.map, miniSelectStyle)
-}
-
-/**
- * 返回地图范围的Feature
- * @returns {Feature<{geometry: any}>}
- */
-function getExtentFeature(){
-  let extent = map.view.calculateExtent(map.map.getSize())
-  return bboxToFeature(extent[0],extent[1],extent[2],extent[3])
-}
-
-/**
- * 设置选中的树
- * @param treeId
- */
-function setSelected(treeId){
-  treeLayer.singleSelect.getFeatures().clear()
-  if(!treeId)
-    return;
-  let f = treeLayer.getFeatureById(treeId);
-  treeLayer.singleSelect.getFeatures().insertAt(0,f)
-  map.view.setCenter(f.getGeometry().getFirstCoordinate())
-}
-
-function setCenter(coordinate){
-  map.setCenter2(coordinate)
-}
-
-defineExpose({
-  setSelected,setCenter
-});
-
-</script>
-
-<style lang="scss" scoped>
-$title-height:44px;
-.title{
-  width: 100%;
-  height: $title-height;
-  box-sizing: border-box;
-  background: rgba(0,77,101,0.8);
-  border-radius: 4px 4px 0px 0px;
-  border-bottom: 2px solid rgba(81,233,240,0.3);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  .my-name{
-    margin-left: 20px;
-    font-size: 16px;
-    font-weight: 600;
-    color: #00FFF0;
-    height: 22px;
-  }
-  .my-close{
-    margin-right: 20px;
-    width: 16px;
-    height: 16px;
-    background-image: url("@/assets/img/close.png");
-    background-size: 100% 100%;
-  }
-}
-.tools{
-  position: absolute;
-  top: calc($title-height + 10px);
-  width: 100%;
-  height: 0px;
-  display: flex;
-  flex-direction: row;
-  justify-content: right;
-  color: #f0f0f0;
-  line-height: 30px;
-  .select{
-    width: 80px;
-    margin-right: 20px;
-  }
-  .cols{
-    display: flex;
-    flex-direction: row;
-    justify-content: space-around;
-  }
-}
-.mini-map{
-  border: 1px solid rgba(81,233,240,0.6);
-  position: absolute;
-  top: $title-height + 0px;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
-}
-</style>

src/views/zhgl/com/Style.js

@@ -1,148 +0,0 @@
-import Style from "ol/style/Style";
-import Fill from "ol/style/Fill";
-import Stroke from "ol/style/Stroke";
-import Text from "ol/style/Text";
-import Icon from "ol/style/Icon";
-import no_img from '../../../assets/status/no_img.png'
-import Circle from "ol/style/Circle";
-
-
-
-let cacheMiniStyle = {}
-export function miniStyle(f){
-    let code = f.get("code");
-    let index = code.indexOf("-")
-    if(index > -1){
-        code = code.substring(index+1, code.length)
-    }
-    let key = f.get("noImg") + code
-    let cache = cacheMiniStyle[key]
-    if(cache){
-        return cache
-    }
-
-    let strokeColor = "#3B9DCE"
-    let fillColor = "#ffffff30"
-    let fontStrokeColor = "#FFFFFF"
-    let fontFillColor = "#ef063c"
-
-    if(f.get("noImg")){
-        fontFillColor = "#cccccc00"
-        fontStrokeColor = "#FFFFFF00"
-    }
-
-
-    let style = new Style({
-        image: new Circle({
-            radius: 5,                             // 半径
-            stroke: new Stroke({           // 边界样式
-                color: strokeColor,                    // 边界颜色
-                width: 1                           // 边界宽度
-            }),
-            fill: new Fill({               // 填充样式
-                color: fillColor                      // 填充颜色
-            })
-        }),
-
-        text: new Text({
-            text:code,
-            stroke: new Stroke({
-                color: fontStrokeColor,
-                width: 2,
-            }),
-            fill: new Fill({
-                color: fontFillColor,
-            }),
-            font: "12px sans-serif",
-            offsetY:-8
-        }),
-    });
-    cacheMiniStyle[key] = style;
-    return style
-}
-
-
-let cacheMiniSelectStyle2 = {}
-export function miniSelectStyle(f){
-    let code = f.get("code");
-    let index = code.indexOf("-")
-    if(index > -1){
-        code = code.substring(index+1, code.length)
-    }
-    let key = f.get("noImg") + code
-
-    let cache = cacheMiniSelectStyle2[key]
-    if(cache){
-        return cache
-    }
-
-    let fontFillColor = "#ef063c"
-
-    if(f.get("noImg")){
-        fontFillColor = "#cccccc00"
-    }
-
-
-    let style = new Style({
-        image: new Circle({
-            radius: 5,                             // 半径
-            stroke: new Stroke({           // 边界样式
-                color: "#ffffff",                    // 边界颜色
-                width: 1                           // 边界宽度
-            }),
-            fill: new Fill({               // 填充样式
-                color: "#1AA3FF"                       // 填充颜色
-            })
-        }),
-
-
-        text: new Text({
-            text:code,
-            stroke: new Stroke({
-                color: "#FFFFFF",
-                width: 2,
-            }),
-            fill: new Fill({
-                color: fontFillColor,
-            }),
-            font: "20px sans-serif",
-            offsetY:-20
-        }),
-    });
-    cacheMiniSelectStyle2[key] = style;
-    return style
-}
-
-let cacheMiniStyle2 = {}
-
-export function miniStyle2(f){
-
-    let cache = cacheMiniStyle2[f.get("noImg")]
-    if(cache){
-        return cache
-    }
-
-    let strokeColor = "#5ed907"
-    let fillColor = "#ffffff30"
-
-    if(f.get("noImg")){
-        strokeColor = "#31270f"
-    }
-
-
-
-    let style = new Style({
-        image: new Circle({
-            radius: 5,                             // 半径
-            stroke: new Stroke({           // 边界样式
-                color: strokeColor,                    // 边界颜色
-                width: 1                           // 边界宽度
-            }),
-            fill: new Fill({               // 填充样式
-                color: fillColor                      // 填充颜色
-            })
-        })
-    });
-    cacheMiniStyle2[f.get("noImg")] = style;
-    return style
-}

src/views/zhgl/com/date_img_list/DateImgList.vue

@@ -1,154 +0,0 @@
-<template>
-  <div class="container">
-    <div class="head">时间 : {{createDate}}</div>
-    <div class="listView">
-      <template v-for="(image,index) in images" :key="image.url">
-        <div :class="['item',selected.length >0 && selected[0] == image.treeId ? 'active' : '']" @click.stop="clickAction(image.treeId)">
-          <div class="code">编号：{{image.code}}</div>
-          <div class="periodName">{{image.periodName}}</div>
-          <div class="img">
-            <DrawBox v-if="switchValue&&image.markText" :sourceData="image.markText" width="255" height="230"></DrawBox>
-            <img loading="lazy" :src="config.base_img_url2 + image.filename + resize" />
-            <div class="watermark">
-              {{image.uploadDate}}
-            </div>
-          </div>
-          <AttributeList class="attrs" :data="image" :attrField="attrField"></AttributeList>
-          <el-icon @click.stop="preview(index)" class="search cursor-pointer"><Search /></el-icon>
-        </div>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import {ref} from "vue"
-import DrawBox from "@/components/drawBox.vue";
-import AttributeList from "../global/AttributeList";
-import config from "@/api/config.js"
-let resize = '?x-oss-process=image/resize,m_fill,w_300'
-let emits = defineEmits(["clickAction","preview"])
-
-const props = defineProps({
-  createDate: {
-    type: String,
-    require: true
-  },
-  images:{require: true,type:Array},
-  selected:{type:Array, require: true,},
-  periodId:{type:Number, require: true},
-  attrField:{type:String, require: true},
-  switchValue: { type: Boolean, require: true },
-});
-
-
-
-function clickAction(treeId){
-  emits("clickAction",'dateImgList',props.selected.length > 0 && props.selected[0] == treeId ? null : treeId)
-}
-
-function preview(index){
-  const urls = []
-  for(let item of props.images){
-    urls.push(config.base_img_url2 + item.filename)
-  }
-  emits("preview",urls, props.images, index)
-}
-
-
-
-</script>
-
-<style lang="scss" scoped>
-.container{
-  background: #044053;
-  border-radius: 4px;
-  border: 1px solid rgba(81, 233, 240, 0.6);
-  box-sizing: border-box;
-  padding: 2px 2px 2px 2px;
-  margin-bottom: 10px;
-}
-.head{
-  width: 100%;
-  color:#B4FFFB;
-  font-weight: bold;
-  padding: 10px 10px 0px 10px;
-  div{
-    margin-left: 10px;
-    display:inline-block;
-  }
-}
-.active{
-  background: #cce5ee;
-  border: 2px solid red;
-}
-.listView{
-  width: 100%;
-  overflow-x: scroll;
-  overflow-y: hidden;
-  padding: 10px;
-  box-sizing: border-box;
-  .item{
-    display:inline-block;
-    position: relative;
-    width: 255px;
-    height: 250px;
-    margin: 0 10px 0 0;
-    box-sizing: border-box;
-
-    .periodName{
-      position: absolute;
-      color: #F4F4F4;
-      font-weight: bold;
-      left: 5px;
-      top:5px;
-      z-index: 1;
-    }
-    .code{
-      position: absolute;
-      z-index: 1;
-      bottom: 0px;
-      width: 100%;
-      height: 20px;
-      line-height: 20px;
-      font-size: 16px;
-      text-align: center;
-      color: #01BBB3;
-      font-weight: bold;
-    }
-    .img{
-      position: absolute;
-      z-index: 0;
-      width: 100%;
-      top: 0px;
-      bottom: 20px;
-      img{
-        width: 100%;
-        height: 100%;
-      }
-    }
-    .attrs{
-      position: absolute;
-      z-index: 1;
-      right: 0px;
-      bottom: 20px;
-      display: flex;
-      flex-direction: column-reverse;
-    }
-    .search{
-      position: absolute;
-      color: #ffffff;
-      background-color: #00000090;
-      font-size: 20px;
-      top: 0px;
-      right:0px;
-      z-index: 2;
-    }
-
-  }
-  .bigImg{
-    width: 1024px;
-    height: 768px;
-  }
-}
-</style>

src/views/zhgl/com/global/AttributeList.vue

@@ -1,31 +0,0 @@
-<template>
-  <div>
-    <template v-for="attr in data.attrs" :key="attr.field">
-      <div class="attr"  v-if="!attrField || attrField == attr.field">
-        {{attr.name}}{{data[attr.field] || 0}}
-      </div>
-    </template>
-  </div>
-</template>
-
-<script setup>
-let props = defineProps({
-  data:{type:Object,require: true},
-  attrField:{type:String,require: true},
-})
-</script>
-
-<style lang="scss" scoped>
-  .attr{
-    background-color: #FFFFFF50;
-    color: #0E3836;
-    font-weight: 600;
-    height: 29px;
-    border-radius: 10px;
-    line-height: 19px;
-    text-align: right;
-    margin: 5px 5px 0px 0px;
-    padding: 5px;
-    box-sizing: border-box;
-  }
-</style>

src/views/zhgl/com/global/ImageViewer.vue

@@ -1,139 +0,0 @@
-<template>
-  <div class="image-viewer" >
-    <div class="cols no-events">
-      <div class="col" v-for="key in fields" :key="key" >
-        {{datas[index][key]}}
-      </div>
-    </div>
-    <el-image-viewer @switch="onSwitch" class="img"
-                     :z-index="1000"
-                     @close="close"
-                     :initial-index="index"
-                     :url-list="urls">
-    </el-image-viewer>
-    <div class="weatherList no-events">
-      <div class="weather" :class="[item.fxDate == uploadDate ? 'active' : '']" v-for="item in weatherList" :key="item.fxDate" >
-        <div class="row">{{weekDay(item.fxDate)}}</div>
-        <div class="row">{{new Date(item.fxDate).getDate()}}</div>
-        <div class="row"><img width="30" height="30" :src="base_img_url3+'birdseye-look-mini/weather2/'+item.iconDay+'.png'" /></div>
-        <div class="row">{{item.tempMax}}</div>
-        <div class="row">{{item.tempMin}}</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import {ref, reactive,toRefs} from "vue";
-import {useStore} from "vuex";
-import {weekDay} from "../../../../utils/date_util"
-import {base_img_url3} from "../../../../api/config"
-
-let store = useStore()
-let emits = defineEmits(["close"])
-let props = defineProps({
-  urls:{
-    type:Array,
-    required:true
-  },
-  datas:{
-    type:Array,
-    required:true
-  },
-  fields:{
-    type:Array,
-    required:true
-  },
-  index:{
-    type:Number,
-    default:0
-  }
-})
-
-const index = ref(props.index)
-const weatherList = ref([])
-const uploadDate = ref()
-
-function close(){
-  emits("close")
-}
-function onSwitch(e){
-  index.value = e
-  getBefore1DayAfter6Day()
-}
-
-let cacheWeather = {}
-
-/**
- * 获取前一天后6天的天气信息
- */
-function getBefore1DayAfter6Day(){
-  let organId = store.getters.userinfo.curGardenId;
-  let date = props.datas[index.value]["uploadDate"]
-  uploadDate.value = date
-  let key = organId + date
-  if(cacheWeather[key]){
-    weatherList.value = cacheWeather[key]
-  }else{
-    VE_API.weather_item.getBefore1DayAfter6Day({organId,date}).then(({data})=>{
-      weatherList.value = data
-    })
-  }
-}
-
-getBefore1DayAfter6Day()
-
-</script>
-
-<style lang="scss" scoped>
-@import "../../../../styles/index";
-.image-viewer{
-  z-index: 999;
-  .cols{
-    @include wh(80%, 30px);
-    @include xMid();
-    z-index: 9999;
-    color: #ffffff;
-    font-weight: bold;
-    background-color: #00000050;
-    font-size: 20px;
-    display: flex;
-    justify-content: flex-start;
-    .col{
-      margin-left: 20px;
-    }
-  }
-  .weatherList{
-    @include wh(80%, auto);
-    @include xMid();
-    top: 30px;
-    z-index: 9999;
-    color: #ffffff;
-    font-weight: bold;
-    background-color: #00000050;
-    font-size: 20px;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    .weather{
-      width: 14%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      .row{
-        @include wh(auto, 30px);
-      }
-    }
-  }
-  .active{
-    border: 2px solid red;
-    box-sizing: border-box;
-  }
-
-
-  .img{
-    z-index: 999;
-  }
-}
-</style>

src/views/zhgl/com/tree_img_list/TreeImgList.vue

@@ -1,276 +0,0 @@
-<template>
-  <div
-      v-if="images && images.length > 0"
-      @click.stop="clickAction"
-      :class="[selected.length > 0 && selected[0] == treeId ? 'active' : '']"
-      class="container"
-  >
-    <div class="head">
-      <!-- <a :id="'tree_' + treeId" />编号 : {{code}}
-      <el-radio-group @click.stop v-model="isSource">
-        <el-radio :value="true">原始图片</el-radio>
-        <el-radio :value="false">结果图片</el-radio>
-      </el-radio-group> -->
-      <div class="name">先锋表型 {{code}}</div>
-    </div>
-    <div class="listView">
-      <template v-for="(image, index) in images" :key="image.url">
-        <div class="item">
-          <!-- <div class="date">{{image.uploadDate}}</div> -->
-          <div class="periodName">{{ image.periodName }}</div>
-          <div class="img">
-            <!-- <img
-                loading="lazy"
-                :src="
-                (isSource
-                  ? config.base_img_url2 + image.filename
-                  : image.resFilename) + resize
-              "
-            /> -->
-           <DrawBox v-if="switchValue&&image.markText" :sourceData="image.markText" width="255" height="230"></DrawBox>
-            <img
-                loading="lazy"
-                :src="config.base_img_url2 + image.filename + resize
-              "
-            />
-            <div class="watermark">
-              {{image.uploadDate}}
-              <!-- <div class="center">
-                <div class="time">
-                  <div class="year">
-                    <span>{{new Date(image.uploadDate).getFullYear()}}</span>
-                    <div class="divider"></div>
-                  </div>
-                  <div class="date1">{{new Date(image.uploadDate).getMonth() + 1}}/{{new Date(image.uploadDate).getDate()}}</div>
-                </div>
-                <div class="weather">
-                  <div class="temperature">
-                    <div class="num">
-                      <div>32℃</div>
-                      <img src="@/assets/img/line.png" alt="" />
-                      <div>26℃</div>
-                    </div>
-                  </div>
-                  <div class="temperature">
-                    <div class="num">
-                      <div>60%</div>
-                      <img src="@/assets/img/line.png" alt="" />
-                      <div>0.34ｍl</div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="right" v-if="index % 2 == 0">
-                <div class="yellow circle">病虫害</div>
-                <div class="blue circle">二梢<br />杀虫</div>
-              </div> -->
-            </div>
-          </div>
-          <AttributeList
-              class="attrs"
-              :data="image"
-              :attrField="attrField"
-          ></AttributeList>
-          <el-icon @click.stop="preview(index)" class="search cursor-pointer"
-          ><Search
-          /></el-icon>
-        </div>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import config from "@/api/config.js";
-import AttributeList from "../global/AttributeList";
-import DrawBox from "@/components/drawBox.vue";
-
-let resize = "?x-oss-process=image/resize,m_fill,w_300";
-let emits = defineEmits(["clickAction"]);
-let isSource = ref(true); //是否是原始图片
-const props = defineProps({
-  code: { type: String, require: true },
-  treeId: { type: Number, require: true },
-  images: { type: Array, require: true },
-  selected: { type: Array, require: true },
-  periodId: { type: Number, require: true },
-  attrField: { type: String, require: true },
-  switchValue: { type: Boolean, require: true },
-});
-
-const curDate = new Date()
-const curYear = curDate.getFullYear()
-const curMonth = curDate.getMonth() + 1
-const curDay = curDate.getDate()
-
-function clickAction() {
-  emits(
-      "clickAction",
-      "treeImgList",
-      props.selected.length > 0 && props.selected[0] == props.treeId
-          ? null
-          : props.treeId
-  );
-}
-function preview(index) {
-  const urls = [];
-  for (let item of props.images) {
-    urls.push(
-        isSource.value ? config.base_img_url2 + item.filename : item.resFilename
-    );
-  }
-  emits("preview", urls, props.images, index);
-}
-</script>
-
-<style lang="scss" scoped>
-.container {
-  background: #032c39;
-  border-radius: 4px;
-  border: 2px solid #51e9f060;
-  box-sizing: border-box;
-  padding: 2px 2px 2px 2px;
-  margin-bottom: 10px;
-}
-.active {
-  background: #044053;
-  border: 2px solid rgba(81,233,240,0.82);
-}
-.head {
-  width: 100%;
-  color: #b4fffb;
-  font-weight: bold;
-  padding: 10px 10px 0px 10px;
-  .name {
-    padding: 8px 6px;
-    background: url("@/assets/img/znxy/text_bg.png") no-repeat center center /
-      100% 100%;
-    width: 413px;
-    font-weight: 800;
-    font-size: 15px;
-    color: #00fff0;
-  }
-  // div{
-  //   margin-left: 10px;
-  //   display:inline-block;
-  // }
-}
-
-.listView {
-  width: 100%;
-  overflow-x: scroll;
-  overflow-y: hidden;
-  padding: 10px;
-  box-sizing: border-box;
-  white-space: nowrap;
-  .watermark {
-    padding: 5px 10px;
-    .center {
-      margin-right: 0%;
-      .time {
-        font-size: 13px;
-        font-weight: 400;
-        margin-right: 0%;
-        letter-spacing: -1px;
-        .year{
-          -webkit-text-stroke: 0.5px #003c4e;
-        }
-        .divider {
-          width: 32px;
-          height: 1px;
-          background: #ffffff;
-          border: 1.5px solid #003c4e;
-        }
-        .date1 {
-          font-size: 19px;
-          -webkit-text-stroke: 1.1px #003c4e;
-        }
-      }
-      .weather {
-        font-size: 15px;
-        letter-spacing: -1px;
-        -webkit-text-stroke: 0.8px #003c4e;
-        .num {
-          margin-left: 5px;
-          line-height: 12px;
-          img {
-            height: 5px;
-            margin-bottom: 3px;
-          }
-        }
-      }
-    }
-    .right {
-      .circle {
-        width: 50px;
-        height: 50px;
-        font-size: 13px;
-        padding: 5px;
-        margin-left: 8px;
-        -webkit-text-stroke: 0.4px #003c4e;
-        box-sizing: border-box;
-      }
-      .yellow {
-        padding: 11px 2px;
-        line-height: 25px;
-      }
-    }
-  }
-  .item {
-    display: inline-block;
-    position: relative;
-    width: 255px;
-    height: 230px;
-    margin: 0 10px 0 0;
-    box-sizing: border-box;
-    .date {
-      position: absolute;
-      color: #f4f4f4;
-      font-weight: bold;
-      left: 5px;
-      bottom: 5px;
-      z-index: 1;
-    }
-    .periodName {
-      position: absolute;
-      color: #f4f4f4;
-      font-weight: bold;
-      left: 5px;
-      top: 5px;
-      z-index: 1;
-    }
-    .img {
-      position: absolute;
-      z-index: 0;
-      width: 100%;
-      height: 100%;
-      img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-    .attrs {
-      position: absolute;
-      z-index: 1;
-      right: 0px;
-      bottom: 0px;
-      display: flex;
-      flex-direction: column-reverse;
-    }
-    .search {
-      position: absolute;
-      color: #ffffff;
-      background-color: #00000090;
-      font-size: 20px;
-      top: 0px;
-      right: 0px;
-      z-index: 2;
-    }
-  }
-  .bigImg {
-    width: 1024px;
-    height: 768px;
-  }
-}
-</style>

src/views/zhgl/index.vue

@@ -1,479 +0,0 @@
-<!--
- * @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></Bg>
-  <Header />
-  <div class="container2">
-    <div class="mainDiv">
-      <template v-if="tabActive == 'xyzp'">
-        <div class="leftBox">
-          <MiniMap
-            ref="miniMapRef"
-            class="miniMap"
-            @selectTree="selectTree"
-            @selectOrganIdAndAreaId="selectOrganIdAndAreaId"
-            @getTreeList="getTreeList"
-            @initListener="miniMapInitListener"
-          ></MiniMap>
-          <!-- <Setting
-            ref="settingRef"
-            class="setting"
-            @selectAttr="selectAttr"
-            @selectPeriod="selectPeriod"
-            @selectTree="selectTree"
-            @moveMap="settingMoveMap"
-            v-if="treeList && treeList.length > 0"
-            :treeList="treeList"
-            :periodMap="periodMap"
-          ></Setting> -->
-          <LineChart
-            class="line-chart"
-            :treeList="treeList"
-            :periodMap="periodMap"
-          ></LineChart>
-        </div>
-        <!--
-          :labels="[
-              { id: 0, label: '按照单树' },
-              { id: 1, label: '按照时间' },
-              { id: 2, label: '病虫异常' },
-            ]"
-         -->
-        <div class="rightBox">
-          <div class="title">分区管理照片</div>
-          <div class="select-wrap">
-            <SelectMenu
-              class="selectMenu"
-              @select="selectMenuClick"
-              :selectedIndex="selectActive"
-              :labels="[
-                { id: 0, label: '物候表型' },
-                { id: 1, label: '生长调节' },
-                //{ id: 2, label: '病虫异常' },
-                // { id: 3, label: '虫害异常' },
-                // { id: 4, label: '日常巡飞' },
-              ]"
-            ></SelectMenu>
-            <div class="switch" @click="handleSwitch">
-              <el-icon color="#00FFF0" size="15"><Switch /></el-icon>
-              <span>切换{{ switchValue ? "原图" : "指标图" }}</span>
-            </div>
-          </div>
-          <div
-            class="treeListView"
-            :key="selectActive"
-            v-infinite-scroll="onScrolltolower"
-            :infinite-scroll-disabled="disabled"
-            :infinite-scroll-distance="20"
-          >
-            <template v-if="selectActive == 0">
-              <TreeImgList
-                :selected="selected"
-                :periodId="curPeriodId"
-                :attrField="curAttrField"
-                v-for="treeImg in treeImgList"
-                :treeId="treeImg.id"
-                :key="treeImg.id"
-                :code="treeImg.code"
-                :images="treeImg.images"
-                @clickAction="imgListClick"
-                @preview="preview"
-                :switchValue="switchValue"
-              ></TreeImgList>
-              <div v-if="nomore" style="text-align: center">没有更多</div>
-            </template>
-            <template v-if="selectActive == 1">
-              <DateImgList
-                :selected="selected"
-                :periodId="curPeriodId"
-                :attrField="curAttrField"
-                v-for="dateImg in dateImgList"
-                :key="dateImg.uploadDate"
-                :createDate="dateImg.uploadDate"
-                @clickAction="imgListClick"
-                @preview="preview"
-                :images="dateImg.data"
-                :switchValue="switchValue"
-              >
-              </DateImgList>
-            </template>
-          </div>
-        </div>
-      </template>
-    </div>
-  </div>
-
-  <!-- <ImageViewer
-    v-if="showViewer"
-    :urls="urls"
-    :index="urlsIndex"
-    :datas="datas"
-    :fields="['code', 'uploadDate']"
-    @close="closeViewer"
-  /> -->
-
-  <PicturePreview
-    v-if="zoomDisplay"
-    :show="showViewer"
-    :imageUrl="urls"
-    :curIndex="urlsIndex"
-    :switchValue="switchValue"
-  ></PicturePreview>
-</template>
-
-<script setup>
-import Header from "@/views/components/Header.vue";
-import PicturePreview from "@/components/PicturePreview.vue";
-import Bg from "../Bg";
-import { useStore } from "vuex";
-import {
-  onMounted,
-  ref,
-  onBeforeUnmount,
-  watchEffect,
-  provide,
-  inject,
-  watch,
-  computed,
-} from "vue";
-import config from "@/api/config.js";
-import SelectMenu from "../components/SelectMenu";
-import TreeImgList from "./com/tree_img_list/TreeImgList";
-import MiniMap from "./com/MiniMap";
-import { groupByTreeId, groupByCreateDate, setPeriodAttr } from "./map.js";
-import DateImgList from "./com/date_img_list/DateImgList";
-import Setting from "./com/Setting";
-import LineChart from "./com/lineChart";
-import { ElMessage, ElLoading } from "element-plus";
-import { useRoute, useRouter } from "vue-router";
-import ImageViewer from "./com/global/ImageViewer";
-let page = 0;
-let limit = 10;
-const showViewer = ref(false);
-const zoomDisplay = ref(false)
-const urls = ref([]);
-const disabled = ref(true)
-const datas = ref([]);
-const urlsIndex = ref(0);
-const router = useRouter();
-const miniMapRef = ref(null);
-const settingRef = ref(null);
-const selected = ref([]);
-const tabActive = ref("xyzp");
-const selectActive = ref(0);
-let dateImgData = [];
-let dateImgList = ref([]);
-let treeImgList = ref([]);
-let periodMap = {};
-let treeCodeMap = {};
-let treeList = ref([]);
-let curPeriodId = ref(null);
-let curAttrField = ref(null);
-let loadingInstance = null;
-let nomore = ref(false);
-
-function selectOrganIdAndAreaId(organId, areaId) {
-  page = 0;
-  if (selectActive.value == 0) {
-    treeImgList.value = [];
-    initTreeImgList(organId, areaId, page, limit);
-  }
-  if (selectActive.value == 1) {
-    dateImgData = [];
-    initDateImgList(organId, areaId, page, limit);
-  }
-}
-
-function getTreeList(data) {
-  treeList.value = data;
-  for (let item of data) {
-    treeCodeMap[item.id] = item.code;
-  }
-}
-/**
- * 初始化TreeImgList
- * */
-async function initTreeImgList(organId, areaId, pageNo) {
-  if (pageNo) {
-    page = pageNo;
-  }
-  if (!areaId) {
-    areaId = -1;
-  }
-  let { code, data } = await VE_API.tree.page({ organId, areaId, page, limit });
-  if (data.length == 0) {
-    nomore.value = true;
-  }
-  for (let item of data) {
-    treeImgList.value.push(item);
-  }
-  disabled.value = false
-}
-
-/**
- * 初始化DateImgList
- * */
-async function initDateImgList(organId, areaId, pageNo) {
-  if (pageNo) {
-    page = pageNo;
-  }
-  let { code, data } = await VE_API.tree_img.images({
-    organId,
-    areaId,
-    page,
-    limit,
-  });
-  if (data.length == 0) {
-    nomore.value = true;
-  }
-  for (let item of data) {
-    let code = treeCodeMap[item.treeId];
-    item.code = code;
-    dateImgData.push(item);
-  }
-  dateImgList.value = groupByCreateDate(dateImgData);
-}
-
-/**
- * 页面上拉触底事件的处理函数
- */
-async function onScrolltolower() {
-  let organId = miniMapRef.value.getOrganId();
-  let curAreaId = miniMapRef.value.getAreaId();
-  if (!organId) {
-    return;
-  }
-  if (selectActive.value == 0) {
-    await initTreeImgList(organId, curAreaId, page + 1);
-  } else {
-    await initDateImgList(organId, curAreaId, page + 1);
-  }
-}
-
-/**
- * 更新setting范围框到MiniMap
- */
-function settingMoveMap(feature) {
-  miniMapRef.value.updateExtentFeature(feature);
-}
-
-function selectMenuClick(val) {
-  selectActive.value = val.id;
-  let organId = miniMapRef.value.getOrganId();
-  let curAreaId = miniMapRef.value.getAreaId();
-  page = 0;
-  if (!organId) {
-    return;
-  }
-  selectOrganIdAndAreaId(organId, curAreaId);
-}
-/**
- * 选择树
- */
-async function selectTree(feature) {
-  if (!feature) {
-    selected.value = [];
-  }
-  //选择了没有图片的树
-  if (feature.get("noImg")) {
-    showMessage("选中的树没有图片！");
-    return;
-  }
-  //查询该树节点是否已经有加载了图片
-  if (treeImgList.value.findIndex((item) => item.id == feature.getId()) > -1) {
-    scrollIntoView(feature.getId());
-  } else {
-    await onScrolltolower();
-    setTimeout(function () {
-      selectTree(feature);
-    }, 0);
-  }
-}
-
-//跳到树的位置
-function scrollIntoView(treeId) {
-  selected.value = [treeId];
-  let dom = document.querySelector("#tree_" + treeId);
-  dom && dom.scrollIntoView();
-  settingRef.value.setSelected(treeId);
-  miniMapRef.value.setSelected(treeId);
-}
-
-/**
- * 修改Setting 页面的中心位置
- * */
-function miniMapInitListener(center) {
-  if (settingRef.value) {
-    settingRef.value.setCenter(center);
-  } else {
-    setTimeout(miniMapInitListener, 500, center);
-  }
-}
-
-/**
- * 点击图片列表
- * @param key
- * @param treeId
- */
-function imgListClick(key, treeId) {
-  switch (key) {
-    case "treeImgList":
-      selected.value = [treeId];
-      break;
-    case "dateImgList":
-      selected.value = [treeId];
-      break;
-  }
-  miniMapRef.value.setSelected(treeId);
-  settingRef.value.setSelected(treeId);
-}
-
-/**
- * 预览照片
- * @param images
- */
-function preview(images, dataArr, index) {
-  datas.value = dataArr;
-  const arr = dataArr.map((item,index) =>{
-    return {
-      ...item,
-      imgPath:images[index],
-      markText:item.markText
-    }
-  })
-  urls.value = arr;
-  urlsIndex.value = index;
-  zoomDisplay.value = true;
-  showViewer.value = !showViewer.value;
-}
-function closeViewer() {
-  showViewer.value = false;
-}
-function showMessage(msg) {
-  ElMessage({
-    message: msg,
-  });
-}
-
-onMounted(() => {
-  page = 0;
-  limit = 10;
-});
-
-const switchValue = ref(false);
-const handleSwitch = () => {
-  switchValue.value = !switchValue.value;
-};
-</script>
-
-<style lang="scss" scoped>
-@import "../../styles/index";
-
-.container2 {
-  height: 100%;
-  width: 100%;
-  z-index: 2;
-  position: absolute;
-  /* background-color: aqua; */
-  /* opacity: 0.05; */
-}
-.selectMenu {
-  padding: 10px 0 0 0;
-}
-.mainDiv {
-  position: absolute;
-  top: 100px;
-  bottom: 50px;
-  left: 20px;
-  right: 20px;
-  .label {
-    height: 50px;
-    display: flex;
-    font-family: PingFangSC-Regular, PingFang SC;
-    font-weight: 400;
-    font-size: 16px;
-    width: 100%;
-    margin-bottom: 10px;
-    .btn {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 50%;
-      background-image: url("@/assets/img/btn_bg.png");
-      background-size: 100% 100%;
-      color: #b4fffb;
-    }
-    .active {
-      background-image: url("@/assets/img/btn_bg_active.png");
-      background-size: 100% 100%;
-      color: #00fff0;
-    }
-  }
-
-  .leftBox {
-    float: left;
-    width: 25%;
-    height: calc(100%);
-    .miniMap {
-      height: 50%;
-      border-radius: 4px;
-      border: 1px solid rgba(81, 233, 240, 0.6);
-      box-sizing: border-box;
-    }
-    .setting,.line-chart {
-      margin-top: 12px;
-      height: calc(50% - 12px);
-      border-radius: 4px;
-      border: 1px solid rgba(81, 233, 240, 0.6);
-      box-sizing: border-box;
-    }
-  }
-  .rightBox {
-    float: right;
-    width: calc(75% - 12px);
-    height: 100%;
-    background: #032c3940;
-    border-radius: 4px;
-    border: 1px solid rgba(81, 233, 240, 0.6);
-    box-sizing: border-box;
-    .title {
-      background: url("@/assets/img/zhgl_bg.png") no-repeat center center / 100%
-        100%;
-      padding: 14px 0;
-      font-size: 19px;
-      color: #00fff0;
-      text-align: center;
-    }
-    .select-wrap {
-      position: relative;
-      .switch {
-        cursor: pointer;
-        background: url("@/assets/img/tabs_btn3.png") no-repeat center center /
-          100% 100%;
-        width: 120px;
-        text-align: center;
-        padding: 7px 0;
-        color: #B4FFFB;
-        position: absolute;
-        right: 20px;
-        top: 15px;
-      }
-    }
-
-    .treeListView {
-      height: calc(100% - 111px);
-      overflow-y: auto;
-      overflow-x: hidden;
-      width: 100%;
-      padding: 10px;
-      box-sizing: border-box;
-    }
-  }
-}
-</style>