fix：修改新增农事页面逻辑，和首页上面的内容

src/components/navigation.vue

@@ -1,38 +1,155 @@
 <template>
-  <div class="navigation yes-events">
-    <div class="tabs">
-      <div class="tab-item">基本指标</div>
+    <div class="navigation yes-events">
+        <div class="tabs" v-for="(ele, idx) in list" :key="idx">
+            <div
+                class="tab-item"
+                @click="handleTab(item)"
+                :class="{ active: active === item.id }"
+                v-for="(item, index) in ele"
+                :key="index"
+            >
+                {{ item.name }}
+            </div>
+        </div>
+        <el-checkbox-group v-show="childrenData" class="checkbox-group" v-model="checkedChildren" @change="handleCheckedChange">
+            <el-checkbox v-for="item in childrenData" :key="item" :label="item" :value="item">
+                {{ item }}
+            </el-checkbox>
+        </el-checkbox-group>
+        <!-- <div class="btn" @click="toPage">农场确权</div> -->
     </div>
-    <!-- <div class="btn" @click="toPage">农场确权</div> -->
-  </div>
 </template>
 
 <script setup>
 import { useRouter } from "vue-router";
+import { ref } from "vue";
 const router = useRouter();
 
-const toPage = () =>{
-  router.push('/authentic')
-}
+const checkedChildren = ref(["品种"]);
+const childrenData = ref(["品种", "树高", "冠幅"])
+const handleCheckedChange = (e) => {
+    console.log("e", e);
+};
+
+const active = ref(1);
+const handleTab = ({ id, children }) => {
+    active.value = id;
+    childrenData.value = children;
+    checkedChildren.value = [children[0]]
+};
+
+const list = ref([
+    [
+        {
+            name: "基本指标",
+            id: 1,
+            children: ["品种", "树高", "冠幅"],
+        },
+        {
+            name: "物候指标",
+            id: 2,
+            children: ["长穗长度", "单数华穗率"],
+        },
+        {
+            name: "生态指标",
+            id: 3,
+        },
+        {
+            name: "生长指标",
+            id: 4,
+        },
+        {
+            name: "病虫指标",
+            id: 5,
+        },
+    ],
+    [
+        {
+            name: "处方图",
+            id: 6,
+        },
+    ],
+]);
+
+const toPage = () => {
+    router.push("/authentic");
+};
 </script>
 
 <style lang="scss" scoped>
-.navigation{
-  position: fixed;
-  top: 34px;
-  left: calc(50% - 476px);
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  
-  .btn{
-    width: 80px;
-    height: 30px;
-    text-align: center;
-    line-height: 28px;
-    border-radius: 5px;
-    cursor: pointer;
-    background: rgba(255,255,255,0.5);
-  }
+.navigation {
+    position: fixed;
+    top: 34px;
+    left: calc(50% - 470px);
+    width: calc(100% - 430px * 2);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .tabs {
+        background: rgba(35, 35, 35, 0.8);
+        border: 1px solid #555555;
+        padding: 8px;
+        border-radius: 8px;
+        display: flex;
+        justify-content: center;
+        .tab-item {
+            font-size: 16px;
+            color: rgba(255, 255, 255, 0.8);
+            padding: 7px 12px 9px 12px;
+            font-family: "PangMenZhengDao";
+            cursor: pointer;
+            &.active {
+                background: #ffd489;
+                color: #1d1d1d;
+                border-radius: 4px;
+            }
+        }
+        .tab-item + .tab-item {
+            margin-left: 25px;
+        }
+    }
+    .tabs + .tabs {
+        margin-left: 12px;
+    }
+
+    .checkbox-group{
+      position: absolute;
+      top: 74px;
+      right: 30px;
+      background: rgba(35, 35, 35,0.8);
+      border-radius: 8px;
+      border: 1px solid #555555;
+      padding: 10px 20px;
+      display: flex;
+      flex-direction: column;
+      ::v-deep{
+        .el-checkbox{
+          margin-right: 0;
+        }
+        .el-checkbox__input.is-checked+.el-checkbox__label{
+          color: #FFD489;
+        }
+        .el-checkbox__input.is-checked .el-checkbox__inner{
+          background-color: #FFD489;
+          border-color: #FFD489;
+          &::after{
+            border-color: #1d1d1d;
+          }
+        }
+        .el-checkbox__label{
+          color: #fff;
+        }
+      }
+    }
+
+    .btn {
+        width: 80px;
+        height: 30px;
+        text-align: center;
+        line-height: 28px;
+        border-radius: 5px;
+        cursor: pointer;
+        background: rgba(255, 255, 255, 0.5);
+    }
 }
-</style>
+</style>

src/utils/back/DialogModel1.vue

@@ -1,124 +0,0 @@
-<template>
-  <el-dialog
-      class="my-dialog"
-      fullscreen
-      append-to-body
-      destroy-on-close
-      :model-value="showDialog"
-      @close="closeDialog()"
-  >
-    <div class="dialog-box">
-      <div class="title">
-        <div class="name">农事方案</div>
-        <div class="close cursor-pointer" @click="closeDialog"></div>
-      </div>
-      <div class="my-body"></div>
-    </div>
-  </el-dialog>
-</template>
-
-<script setup>
-import {reactive, ref, toRefs, computed, nextTick, onMounted} from "vue";
-import {useStore} from "vuex";
-import {WKT} from "ol/format";
-const emit = defineEmits(["closeDialog","success"])
-const store = useStore();
-
-const props = defineProps({
-  showDialog: {
-    type: Boolean,
-    default: true,
-  },
-});
-
-const formRef = ref(null);
-const {title, rowData} = toRefs(props);
-const closeDialog = () => {
-  emit("closeDialog", "pdf");
-};
-
-/**表单验证规则
- * @description:
- * @param {*} computed
- * @return {*}
- */
-const rules = computed(() => ({
-  name: [
-    {
-      required: true,
-      message: "请录入药品名称",
-      trigger: "change",
-    },
-  ]
-}));
-const form = reactive({
-  name:null,
-  type:1,
-})
-
-/**
- * @description:提交表单
- * @param {*}
- * @return {*}
- */
-const onSubmit = () => {
-
-};
-
-</script>
-
-<style lang="scss" >
-$title-height:44px;
-$body-height:calc(100% - $title-height);
-
-.my-dialog{
-  background-color: #F4F4F400;
-}
-.dialog-box{
-  font-family: PingFangSC-Regular, PingFang SC;
-  position: absolute;
-  left: 33%;
-  right: 33%;
-  top:10%;
-  bottom:10%;
-  background: rgba(1,17,22,0.8);
-  box-shadow: 0px 0px 20px 0px #00FFF0;
-  border-radius: 4px;
-  border: 2px solid rgba(81,233,240,0.6);
-
-  .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;
-    .name{
-      margin-left: 20px;
-      font-size: 16px;
-      font-weight: 600;
-      color: #00FFF0;
-      height: 22px;
-    }
-    .close{
-      margin-right: 20px;
-      width: 16px;
-      height: 16px;
-      background-image: url("@/assets/img/close.png");
-      background-size: 100% 100%;
-    }
-  }
-  .my-body{
-    width: 100%;
-    height: $body-height;
-    box-sizing: border-box;
-    padding: 21px;
-  }
-
-
-}
-
-</style>

src/views/addFarm/index.vue

@@ -4,7 +4,7 @@
         <div class="content">
             <div class="left">
                 <div class="btn" @click="goBack">
-                    <img src="@/assets/images/common/back-icon.png" alt="">
+                    <img src="@/assets/images/common/back-icon.png" alt="" />
                     返回
                 </div>
                 <chart-box class="left-cont" name="编辑农事" color="yellow">
@@ -12,17 +12,26 @@
                         <steps :active="active"></steps>
                     </template>
                     <div class="box">
-                        <div class="box-item" v-if="active===0">
+                        <div class="box-item" v-if="active === 0">
                             <div class="box-title">
-                                <div>选择农事类型
+                                <div>
+                                    选择农事类型
                                     <span>(可多选)</span>
                                 </div>
                             </div>
                             <div class="list">
-                                <div class="list-item" @click="handleItem(item,index)" :class="{active:checkValue.indexOf(item)!==-1}" v-for="(item,index) in checkList" :key="index">
-                                    {{item}}
-                                    <el-icon size="25" color="#FFD489" v-show="checkValue.indexOf(item)!==-1"><CircleCheckFilled /></el-icon>
-                                    <div v-show="checkValue.indexOf(item)===-1" class="round"></div>
+                                <div
+                                    class="list-item"
+                                    @click="handleItem(item, index)"
+                                    :class="{ active: item.active }"
+                                    v-for="(item, index) in checkData"
+                                    :key="index"
+                                >
+                                    {{ item.label }}
+                                    <el-icon size="25" color="#FFD489" v-show="item.active"
+                                        ><CircleCheckFilled
+                                    /></el-icon>
+                                    <div v-show="!item.active" class="round"></div>
                                 </div>
                             </div>
                         </div>
@@ -41,16 +50,16 @@
                                     </el-form-item>
                                 </el-form>
                             </div>
-                            <div class="box-item" v-for="(item,index) in boxList" :key="index">
+                            <div class="box-item" v-for="(item, index) in boxList" :key="index">
                                 <div class="box-title border-none">
-                                    生长异常处方
-                                    <div class="add-text" @click="handleAdd">
+                                    {{ item.label }}处方
+                                    <div class="add-text" @click="handleAdd(index)">
                                         <el-icon class="icon"><Plus /></el-icon>
                                         添加药物
                                     </div>
                                 </div>
-                                <div class="box-body">
-                                    <div class="index">{{index<10?'0'+(index + 1):index + 1}}</div>
+                                <div class="box-item-children" v-for="(ele,idx) in item.children" :key="idx + 'id'">
+                                    <div class="index">{{ idx < 10 ? "0" + (idx + 1) : idx + 1 }}</div>
                                     <custom-table></custom-table>
                                     <div class="box-textarea">
                                         <el-input
@@ -62,7 +71,7 @@
                                         />
                                     </div>
                                     <div class="btn-group">
-                                        <div class="delete" @click="handleDelete(index)">删除</div>
+                                        <div class="delete" @click="handleDelete(index,idx)">删除</div>
                                         <div>重置</div>
                                     </div>
                                 </div>
@@ -78,33 +87,38 @@
                         </template>
                     </div>
                     <div class="footer">
-                        <div class="button" @click="handleOk">{{active===0?'确定':'下发农事'}}</div>
+                        <div class="button" @click="handleOk">{{ active === 0 ? "确定" : "下发农事" }}</div>
                     </div>
                 </chart-box>
             </div>
             <div class="right">
                 <div class="map-header">
                     <div class="title">
-                        <img src="@/assets/images/common/area-icon.png" alt="">
+                        <img src="@/assets/images/common/area-icon.png" alt="" />
                         执行农事区域
                     </div>
                     <el-checkbox-group v-model="checkValue" @change="handleCheck">
-                        <el-checkbox v-for="item in checkList" :key="item" :label="item" />
+                        <el-checkbox
+                            v-for="item in checkList"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
                     </el-checkbox-group>
                 </div>
                 <div ref="mapRef" class="map">
                     <div class="map-bg map-btn">查看巡园照片</div>
                     <div class="map-bg map-legend">
                         <div class="item">
-                            <img src="@/assets/images/map/status/bhyc.png" alt="">
+                            <img src="@/assets/images/map/status/bhyc.png" alt="" />
                             病害异常
                         </div>
                         <div class="item">
-                            <img src="@/assets/images/map/status/chyc.png" alt="">
+                            <img src="@/assets/images/map/status/chyc.png" alt="" />
                             虫害异常
                         </div>
                         <div class="item">
-                            <img src="@/assets/images/map/status/szyc.png" alt="">
+                            <img src="@/assets/images/map/status/szyc.png" alt="" />
                             生长异常
                         </div>
                     </div>
@@ -116,33 +130,45 @@
 
 <script setup>
 import { onMounted, ref } from "vue";
-import { ElMessage } from 'element-plus'
+import { ElMessage } from "element-plus";
 import fnHeader from "@/components/fnHeader.vue";
 import steps from "./components/steps.vue";
 import customTable from "./components/table.vue";
 import FarmMap from "./farmMap";
+import { deepClone } from "@/common/commonFun";
 import chartBox from "@/components/chartBox.vue";
 import { useRouter, useRoute } from "vue-router";
 import { useStore } from "vuex";
 let store = useStore();
 let farmMap = new FarmMap();
 
-const active = ref(0)
+const active = ref(0);
 
-const checkList = ['生长异常', '病害异常', '虫害异常']
-const checkValue = ref(['生长异常'])
-const handleCheck = (e) =>{
-    console.log('e',e);
-}
+const checkList = ref([
+    { value: "0", label: "生长异常" },
+    { value: "1", label: "病害异常" },
+    { value: "2", label: "虫害异常" },
+]);
+const checkValue = ref(["0"]);
+const handleCheck = (e) => {
+    console.log("e", e);
+};
 
-const handleItem = (item,index) =>{
-    const curIndex = checkValue.value.indexOf(item)
-    if(curIndex===-1){
-        checkValue.value.push(item)
-    }else{
-        checkValue.value.splice(curIndex,1)
-    }
-}
+const checkData = ref([
+    { value: "0", label: "生长异常", active: true, children: [{index: 1}] },
+    { value: "1", label: "病害异常", active: false, children: [{index: 1}] },
+    { value: "2", label: "虫害异常", active: false, children: [{index: 1}] },
+]);
+const handleItem = (item, index) => {
+    checkData.value[index].active = !checkData.value[index].active;
+    // const curIndex = checkValue.value.indexOf(item.value)
+    // if(curIndex===-1){
+    //     checkValue.value.push(item.value)
+    // }else{
+    //     checkValue.value.splice(curIndex,1)
+    //     checkList.value[index].active = false
+    // }
+};
 
 const router = useRouter();
 const route = useRoute();
@@ -153,40 +179,41 @@ onMounted(() => {
 });
 
 const getList = () => {
-   console.log('000');
+    console.log("000");
 };
 
 const goBack = () => {
     router.go(-1);
 };
 
-const handleOk = () =>{
-    if(active.value){
-        console.log('123');
-    }else{
-        active.value = 1
+//确定/下发农事
+const handleOk = () => {
+    if (active.value) {
+        console.log("123");
+    } else {
+        active.value = 1;
+        const arr = checkData.value.filter((item) => item.active);
+        boxList.value = deepClone(arr);
     }
-}
+};
 
 const form = ref({
-    name:'梢期防虫',
-    mudi:'防治荔枝病虫害',
-    tiaojian:'单树花带叶率 40％'
-})
-const textarea = ref('')
+    name: "梢期防虫",
+    mudi: "防治荔枝病虫害",
+    tiaojian: "单树花带叶率 40％",
+});
+const textarea = ref("");
 
-const boxList = ref([
-    {
-        index:1
-    }
-])
-const handleAdd = () =>{
-    boxList.value.push({index:1})
-}
-const handleDelete = (index) =>{
-    if(boxList.value.length===1) return ElMessage.warning('最少保留一个处方')
-    boxList.value.splice(index,1)
-}
+const boxList = ref([]);
+//添加
+const handleAdd = (index) => {
+    boxList.value[index].children.push({ index: 1 });
+};
+//删除
+const handleDelete = (index,childIndex) => {
+    if (boxList.value[index].children.length === 1) return ElMessage.warning("最少保留一个处方");
+    boxList.value[index].children.splice(childIndex, 1);
+};
 </script>
 
 <style lang="scss" scoped>
@@ -220,7 +247,7 @@ const handleDelete = (index) =>{
                 margin-bottom: 13px;
                 width: 104px;
                 cursor: pointer;
-                img{
+                img {
                     width: 14px;
                     margin-right: 5px;
                 }
@@ -228,20 +255,20 @@ const handleDelete = (index) =>{
             .left-cont {
                 width: 100%;
                 height: calc(100% - 48px - 4px);
-                .box{
+                .box {
                     width: 100%;
                     height: calc(100% - 58px);
                     padding: 16px 12px;
                     box-sizing: border-box;
                     overflow-y: auto;
-                    .box-item{
+                    .box-item {
                         background: rgba(255, 255, 255, 0.04);
                         border: 1px solid #444444;
                         border-radius: 8px;
                         padding: 16px 12px;
                         box-sizing: border-box;
                         width: 100%;
-                        .box-title{
+                        .box-title {
                             font-size: 20px;
                             border-bottom: 1px solid #333333;
                             padding: 0 0 12px 13px;
@@ -249,12 +276,12 @@ const handleDelete = (index) =>{
                             position: relative;
                             display: flex;
                             justify-content: space-between;
-                            &.border-none{
+                            &.border-none {
                                 border: none;
                                 padding-bottom: 0;
                             }
-                            &::before{
-                                content: '';
+                            &::before {
+                                content: "";
                                 position: absolute;
                                 left: 0;
                                 top: 6px;
@@ -263,23 +290,23 @@ const handleDelete = (index) =>{
                                 background: #fff;
                                 border-radius: 11px;
                             }
-                            span{
+                            span {
                                 font-size: 14px;
-                                color: #9F9F9F;
+                                color: #9f9f9f;
                             }
-                            .add-text{
-                              font-size: 16px;
-                              color: #FFD489;  
-                              display: flex;
-                              align-items: center;
-                              cursor: pointer;
-                              .icon{
-                                margin-right: 3px;
-                              }
+                            .add-text {
+                                font-size: 16px;
+                                color: #ffd489;
+                                display: flex;
+                                align-items: center;
+                                cursor: pointer;
+                                .icon {
+                                    margin-right: 3px;
+                                }
                             }
                         }
-                        .list{
-                            .list-item{
+                        .list {
+                            .list-item {
                                 background: rgba(255, 255, 255, 0.05);
                                 border-radius: 8px;
                                 font-size: 18px;
@@ -289,83 +316,86 @@ const handleDelete = (index) =>{
                                 justify-content: space-between;
                                 border: 1px solid transparent;
                                 cursor: pointer;
-                                &.active{
-                                    border-color: #FFD489;
+                                &.active {
+                                    border-color: #ffd489;
                                     background: rgba(255, 212, 137, 0.05);
                                 }
-                                .round{
+                                .round {
                                     border: 1px solid #cecece;
                                     border-radius: 50%;
                                     width: 20px;
                                     height: 20px;
                                 }
                             }
-                            .list-item + .list-item{
+                            .list-item + .list-item {
                                 margin-top: 16px;
                             }
                         }
 
                         // 编辑处方
-                        .box-form{
-                            ::v-deep{
-                                .el-form-item__label{
-                                    color: #9F9F9F;
+                        .box-form {
+                            ::v-deep {
+                                .el-form-item__label {
+                                    color: #9f9f9f;
                                 }
-                                .el-input__wrapper{
+                                .el-input__wrapper {
                                     background: transparent;
-                                    box-shadow: 0 0 0 1px #9F9F9F;
-                                    .el-input__inner{
+                                    box-shadow: 0 0 0 1px #9f9f9f;
+                                    .el-input__inner {
                                         color: #fff;
                                     }
                                 }
                             }
                         }
 
-                        .box-body{
+                        .box-item-children {
                             border: 1px solid #444444;
                             border-radius: 8px;
                             padding: 9px;
                             box-sizing: border-box;
                             position: relative;
-                            .index{
+                            .index {
                                 position: absolute;
                                 top: 0;
                                 left: 0;
-                                background: #FFD489;
+                                background: #ffd489;
                                 border-radius: 4px 0 4px 0;
                                 font-size: 12px;
                                 color: #1d1d1d;
                                 padding: 0 7px;
                             }
-                            .box-textarea{
+                            .box-textarea {
                                 border-radius: 4px;
                                 padding: 10px;
                                 background: rgba(255, 255, 255, 0.05);
                                 margin: 16px 0 20px 0;
                             }
-                            .btn-group{
+                            .btn-group {
                                 display: flex;
-                                div{
-                                    background: rgba(255, 212, 137,0.05);
+                                div {
+                                    background: rgba(255, 212, 137, 0.05);
                                     border-radius: 4px;
-                                    border: 1px solid #FFD489;
+                                    border: 1px solid #ffd489;
                                     padding: 6px;
                                     flex: 1;
-                                    color: #FFD489;
+                                    color: #ffd489;
                                     text-align: center;
                                     cursor: pointer;
                                 }
-                                .delete{
-                                    background: rgba(249, 152, 81,0.05);
-                                    border: 1px solid #F99851;
-                                    color: #F99851;
+                                .delete {
+                                    background: rgba(249, 152, 81, 0.05);
+                                    border: 1px solid #f99851;
+                                    color: #f99851;
                                     margin-right: 12px;
-                                }   
+                                }
                             }
                         }
-                        .textarea{
-                            ::v-deep{
-                                .el-textarea__inner{
+                        .box-item-children + .box-item-children{
+                            margin-top: 12px;
+                        }
+                        .textarea {
+                            ::v-deep {
+                                .el-textarea__inner {
                                     background: transparent;
                                     box-shadow: none;
                                     color: #fff;
@@ -374,11 +404,11 @@ const handleDelete = (index) =>{
                             }
                         }
                     }
-                    .box-item + .box-item{
+                    .box-item + .box-item {
                         margin-top: 16px;
                     }
                 }
-                .footer{
+                .footer {
                     width: 100%;
                     height: 58px;
                     border-top: 0.5px solid #555555;
@@ -387,10 +417,10 @@ const handleDelete = (index) =>{
                     justify-content: flex-end;
                     align-items: center;
 
-                    .button{
+                    .button {
                         font-size: 16px;
                         padding: 8px 58px;
-                        background: #FFD489;
+                        background: #ffd489;
                         border-radius: 4px;
                         color: #000;
                         margin-right: 12px;
@@ -408,16 +438,16 @@ const handleDelete = (index) =>{
             padding: 20px;
             box-sizing: border-box;
             border-radius: 8px;
-            .map-header{
+            .map-header {
                 display: flex;
                 justify-content: space-between;
-                .title{
+                .title {
                     font-size: 22px;
                     display: flex;
                     align-items: flex-end;
                     font-family: "PangMenZhengDao";
                     margin-bottom: 16px;
-                    img{
+                    img {
                         margin-right: 8px;
                     }
                 }
@@ -427,7 +457,7 @@ const handleDelete = (index) =>{
                 clip-path: inset(0px round 4px);
                 height: calc(100% - 31px - 16px);
                 position: relative;
-                .map-bg{
+                .map-bg {
                     position: absolute;
                     z-index: 2;
                     background: rgba(0, 0, 0, 0.6);
@@ -435,22 +465,22 @@ const handleDelete = (index) =>{
                     padding: 7px 16px;
                     right: 20px;
                 }
-                .map-btn{
+                .map-btn {
                     top: 19px;
                     cursor: pointer;
                 }
-                .map-legend{
+                .map-legend {
                     bottom: 21px;
                     display: flex;
                     align-items: center;
-                    .item{
+                    .item {
                         display: flex;
                         align-items: center;
-                        img{
+                        img {
                             margin-right: 5px;
                         }
                     }
-                    .item + .item{
+                    .item + .item {
                         margin-left: 20px;
                     }
                 }

src/views/home/map/samplePointLayer.js

@@ -168,7 +168,6 @@ class SamplePointLayer {
   }
 
   getIcon(item){
-    console.log(item)
     let imgSrc = require(`@/assets/images/map/${item.iconName}-icon.png`)
     let scale = 0.25
     if(item.status == 1){

src/views/znxy/ZnxyMap.js

@@ -1,606 +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 {getRadius} from "./util";
-import Style from "ol/style/Style";
-import Photo from "ol-ext/style/Photo";
-import Icon from "ol/style/Icon";
-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, newRegionFeature} from "../zhgl/map";
-import { GARDEN_STATUS_ENUM as STATUS_ENUM } from "@/api/enum.js"
-import VectorLayer from 'ol/layer/Vector.js';
-import Polygon from 'ol/geom/Polygon.js';
-import MultiPolygon from 'ol/geom/MultiPolygon.js';
-import Point from 'ol/geom/Point.js';
-import {Cluster, OSM, Vector as VectorSource} from 'ol/source.js';
-import {boundingExtent} from 'ol/extent.js';
-import {
-    Circle as CircleStyle,
-    Fill,
-    Text,
-  } from 'ol/style.js';
-  import {unByKey} from 'ol/Observable';
-  import { reactive } from 'vue';
-  let resize = '?x-oss-process=image/resize,w_400';
-  export const treeItem = reactive({
-    treeId: ""
-  });
-
-const styleCache = {};
-
-/**
- * @description 智能巡园地图层对象
- */
-class ZnxyMap {
-
-    constructor(){
-        let that = this
-        let vectorStyle = new KMap.VectorStyle()
-        this.imgStyleCache = {}
-
-        this.gardenLayer =  new KMap.VectorLayer("gardenLayer",1000,{minZoom:8,maxZoom:15,style:(feature)=> {
-                let k = feature.get("organId")
-                let name = feature.get("name")
-                if(name.length > 5){
-                    name = name.substr(0,5)
-                }
-                let name2 = ""
-                for(let i=0;i<name.length;i++){
-                    name2+=name[i]+"\n"
-                }
-                let style = that.imgStyleCache[k];
-                if(!style){
-                    style = []
-                    // let style1 = new Style ({
-                    //     image: new Photo ({
-                    //         src: require('@/assets/yezi.png'),
-                    //         radius: 40,
-                    //         shadow: 0,
-                    //         crop:true,
-                    //         kind:"circle",
-                    //         onload: function() { that.gardenLayer.layer.changed(); },
-                    //         displacement: [0, 50],
-                    //         stroke: new Stroke({
-                    //             width: 2,
-                    //             color: '#fdfcfc'
-                    //         })
-                    //     })
-                    // });
-                    let style2 = new Style ({
-                        image: new Icon ({
-                            src: config.base_img_url3 + "birdseye-look-mini/foster/gardenNameBox.png",
-                            scale: 1,
-                            displacement:[0, 80]
-                        }),
-                        text:new Text({
-                            text:name2,
-                            font:"bold 14px serif",
-                            offsetX:0,
-                            offsetY:-70,
-                            fill: new Fill({
-                                color: "#000000"
-                            }),
-                            stroke: new Stroke({
-                                color: "#000000",
-                                width: 1,
-                            }),
-                        })
-                    });
-                    style.push(style2)
-                    // style.push(vectorStyle.getPointTextStyle(feature.get("organId")+"", "#120046","#FFFFFF",2, 30))
-                    // style.push(style1)
-                    that.imgStyleCache[k] = style
-                }
-                return style
-            }
-        })
-
-        this.gardenPointLayer = new KMap.VectorLayer("gardenLayer",1000,{minZoom:0,maxZoom:8,
-            source:new Cluster({
-                distance: 5,
-                // minDistance: 60,
-                source: new VectorSource({})
-            }),
-            style:(feature)=>{
-                let style1 = new Style ({
-                    image: new Photo ({
-                        src: require('@/assets/star1.png'),
-                        radius: 10,
-                        shadow: 0,
-                        crop:true,
-                        onload: function() { that.gardenLayer.layer.changed(); },
-                        displacement: [0, 0],
-                        stroke: new Stroke({
-                            width: 2,
-                            color: '#fdfcfc00'
-                        })
-                    })
-                });
-                return [style1]
-            }
-        })
-
-        this.areaLayer = new KMap.VectorLayer("areaLayer",999,{minZoom:15,style:(f)=> vectorStyle.getPolygonStyle("#032833" + "80", "#0BFDF2",3)})
-        this.subAreaLayer = new KMap.VectorLayer("subAreaLayer",999,{minZoom:15,style:(f)=> {
-            return vectorStyle.getPolygonStyle(f.get("fillColor"), f.get("strokeColor"), 2)
-        }})
-        this.areaPointLayer =  new KMap.VectorLayer("areaPointLayer",1000,{minZoom:15,style:(f)=> {
-                return vectorStyle.getPointTextStyle(f.get("name"), "#120046","#FFFFFF",2, 30)
-            }
-        })
-        this.subAreaLayer.layer.setVisible(false)
-        this.afterDayNum = 3
-        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.statusPointLayer = new KMap.VectorLayer("statusPointLayer",999,{minZoom:15,style:this.treeStyle})
-
-
-        // this.regionLayer = new KMap.VectorLayer("regionLayer",999,{style:(f)=> {
-        //         return vectorStyle.getPolygonStyle("#032833" + "80", "#0BFDF2",3)
-        //     }})
-    }
-
-    initMap(location,target)  {
-        let level = 18
-        let coordinate = util.wktCastGeom(location).getFirstCoordinate()
-        this.kmap = new KMap.Map(target,level,coordinate[0], coordinate[1],null,5,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:15,maxZoom:22});
-        this.kmap.addLayer(this.areaLayer.layer)
-        this.kmap.addLayer(this.subAreaLayer.layer)
-        this.kmap.addLayer(this.areaPointLayer.layer)
-        this.kmap.addLayer(this.statusPointLayer.layer)
-        this.kmap.addLayer(this.gardenLayer.layer)
-        this.kmap.addLayer(this.gardenPointLayer.layer)
-    }
-
-    resetPx(item){
-        let organId = item.organId
-        let pointWkt = item.pointWkt
-        let left = pointWkt.indexOf("(")
-        let right = pointWkt.indexOf(")")
-        let xy = pointWkt.substring(left + 1,right).split(" ")
-        let x = parseFloat(xy[0])
-        let y = parseFloat(xy[1])
-        if(organId === 768){
-            x -= 1
-        }
-        if(organId === 42134){
-            x += 1
-        }
-        if(organId === 25862){
-            x += 1
-        }
-        if(organId === 80866){
-            x += 1
-        }
-        if(organId === 80863){
-            x -= 1
-        }
-        if(organId === 26072){
-            y += 1
-        }
-        item.pointWkt = "POINT(" + x + " " + y+ ")"
-    }
-
-    initGarden(){
-        let that = this
-        this.gardenLayer.refresh()
-        VE_API.organ.gardenData().then(({data,code})=>{
-            let features = []
-            for(let item of data){
-                that.resetPx(item)
-                let point = newAreaPoint(item)
-                that.gardenLayer.addFeature(point)
-                features.push(point)
-            }
-            const source = new VectorSource({
-                features: features,
-            });
-
-            // const clusterSource = new Cluster({
-            //     // distance: 5,
-            //     minDistance: 20,
-            //     source: source,
-            // });
-            that.gardenPointLayer.layer.setSource(source)
-        })
-    }
-
-    addGardenClick(callback){
-        let that = this
-        this.kmap.map.on("click", function (e) {
-            that.gardenLayer.layer.getFeatures(e.pixel).then((features)=>{
-                if(features.length > 0 && features[0].get("nodeType") == "area"){
-                    callback && callback(features[0])
-                }
-            })
-
-        })
-    }
-
-    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){
-                const result = that.handleStatusColor(item.status)
-                item.fillColor = result.fillColor
-                item.strokeColor = result.strokeColor
-                that.subAreaLayer.addFeature(newPolymerFeature(item))
-            }
-        })
-
-    }
-
-    async initTree(organId,isBoolean){
-        console.log('isBoolean',isBoolean);
-        if(!isBoolean) return this.clearCluster()
-        let that = this
-        // 树状态
-        this.statusPointLayer.refresh()
-        await VE_API.sub_area.treeList({gardenId: organId}).then(({data}) => {
-            this.treeListData = data
-        })
-        this.addCluster()
-    }
-
-    // --------聚合-----------
-    addCluster() {
-        this.clearCluster()
-        let that = this
-        let features = []
-        // 根据状态加上对应的图标
-        for(let item of this.treeListData){
-            let result = that.handleStatusIcon(item)
-            // if (result.hasStatus) {
-                item.imgSrc = result.imgSrc
-                item.clusterIcon = result.clusterIcon
-                let point = newPoint(item);
-                features.push(point)
-            // }
-        }
-        const source = new VectorSource({
-            features: features,
-        });
-
-        const clusterSource = new Cluster({
-            distance: 15,
-            // minDistance: 60,
-            source: source,
-        });
-
-
-        this.treeClusterLayer = new KMap.VectorLayer("tree-cluster",999,{
-            minZoom:15,
-            source:clusterSource,
-            style:(feature)=> {
-                const size = feature.get('features').length;
-                // 只有一个数据，不需要聚合，直接使用第一项数据的图标
-                if (size == 1) {
-                    feature = feature.get('features')[0]
-                    let style = styleCache[feature.get('imgSrc')];
-                    if(!style){
-                        style = new Style({
-                            image: new Icon({
-                                src: feature.get('imgSrc'),
-                                // src: require('@/assets/yezi.png'),
-                                scale:1,
-                                // anchor:[0.5,1],
-                            })
-                        });
-                        styleCache[feature.get('imgSrc')] = style;
-                    }
-                    return style
-                }
-                // 多个点位聚合，循环处理得到图标
-                const featureObj = that.getFeaturesIcon(feature.get("features"))
-                let imgSrc = featureObj.get('imgSrc')
-                let style = styleCache[imgSrc];
-                if (!style) {
-                    style = new Style({
-                        image: new Icon({
-                            src: imgSrc,
-                            scale:1,
-                            // anchor:[0.5,1],
-                        })
-                    });
-                    styleCache[imgSrc] = style;
-                }
-                return style;
-        }})
-
-
-
-        that.kmap.addLayer(this.treeClusterLayer.layer)
-        // this.fit(this.treeClusterLayer.getSource().getSource().getExtent())
-        that.kmap.getView().fit(this.treeClusterLayer.layer.getSource().getSource().getExtent(), { duration: 1000, padding: [120, 120, 200, 120] });
-        // 监听聚合点位的点击，点击后缩放到范围内
-        this.listenKey = that.kmap.on('click', (e) => {
-            if (that.treeClusterLayer) {
-                that.treeClusterLayer.layer.getFeatures(e.pixel).then((clickedFeatures) => {
-                    if (clickedFeatures.length && clickedFeatures[0].get("nodeType") == "tree") {
-                        const features = clickedFeatures[0].get('features');
-                        if (features.length > 1) {
-                            const extent = boundingExtent(
-                                features.map((r) => r.getGeometry().getCoordinates()),
-                            );
-                            that.kmap.getView().fit(extent, { duration: 1000, padding: [150, 150, 150, 150] });
-                        }
-                    }
-                });
-            }
-        });
-    }
-
-    // 清除聚合图层，解除绑定
-    clearCluster() {
-        if (this.treeClusterLayer) {
-            this.treeClusterLayer.layer.getSource().getSource().clear()
-            this.treeClusterLayer = null
-            unByKey(this.listenKey)
-        }
-    }
-
-    addMapClick(){
-        let that = this
-        that.kmap.on('click', (evt) => {
-            that.kmap.map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
-                if (layer instanceof VectorLayer && layer.get('name') === 'tree-cluster') {
-                    // 当前hover的features点位
-                    const featureItem = feature.getProperties().features[0]
-                    // 获取要素的几何形状
-                    let geometry = feature.getGeometry();
-                    if (geometry instanceof Point) {
-                        treeItem.treeId =  featureItem.get("id")
-                        return true
-                    }
-                    return true;
-                }
-            });
-        });
-    }
-
-    // 二级分区鼠标悬停弹框
-    addHoverTooltips(infoRef, imgInfo) {
-        let that = this
-        that.kmap.on('pointermove', (evt) => {
-            if (!that.kmap.map.hasFeatureAtPixel(evt.pixel)) {
-                that.clearTooltip(infoRef, imgInfo);
-                return;
-            }
-            // 清除之前的定时器
-            that.clearTooltip(infoRef, imgInfo);
-            that.tooltipTimeout = setTimeout(function () {
-                that.kmap.map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
-                    // 点击的图层是否是VectorLayer
-                    if (layer instanceof VectorLayer && layer.get('name') === 'subAreaLayer') {
-                        // 获取要素的几何形状
-                        let geometry = feature.getGeometry();
-                        // 检查几何形状是否为Polygon
-                        if (geometry instanceof Polygon || geometry instanceof MultiPolygon) {
-                            // 使用geometry.intersectsCoordinate方法来检查点击的坐标是否在Polygon内
-                            if (geometry.intersectsCoordinate(evt.coordinate)) {
-                                infoRef.style.left = (evt.pixel[0] + 8) + 'px'
-                                infoRef.style.top = (evt.pixel[1] + 8) + 'px'
-                                infoRef.style.visibility = 'visible'
-                                infoRef.innerHTML = `
-                            <div style="color: #FF7E15;">病虫异常: ${feature.get("virusTreeCount")}/${feature.get("treeCount")}</div>
-                            <div style="color: #FFE614;">生长异常: ${feature.get("growAbnormalTreeCount")}/${feature.get("treeCount")}</div>
-                        `
-                                return true;
-                            }
-                        }
-                    }
-                    if (layer instanceof VectorLayer && layer.get('name') === 'tree-cluster') {
-                        // 获取要素的几何形状
-                        let geometry = feature.getGeometry();
-                        // 检查几何形状是否为Polygon
-                        // 当前hover的features点位
-                        const featureItem = feature.getProperties().features[0]
-                        if (geometry instanceof Point && (featureItem.get("imgFilename") || featureItem.get("resFilename"))) {
-                            // 使用geometry.intersectsCoordinate方法来检查点击的坐标是否在Polygon内
-                            // imgInfo.style.left = (evt.pixel[0] - 250) + 'px'
-                            // imgInfo.style.top = (evt.pixel[1] - 500) + 'px'
-                            let img = featureItem.get("resFilename") ? featureItem.get("resFilename") : base_img_url2 + featureItem.get("imgFilename")
-                            imgInfo.innerHTML = `
-                            <img class="close-btn yse-events" src="${img}?x-oss-process=image/resize,m_fill,w_400" />
-                        `
-                            imgInfo.style.visibility = 'visible'
-                            return true;
-                        }
-                    }
-                });
-            }, 500)
-        });
-        // that.kmap.on('pointerleave', that.clearTooltip(infoRef, imgInfo));
-    }
-    // 清除tooltip和定时器的函数
-    clearTooltip(infoRef, imgInfo) {
-        infoRef.style.visibility = 'hidden';
-        infoRef.innerHTML = '';
-        imgInfo.style.visibility = 'hidden';
-        imgInfo.innerHTML = '';
-        if (this.tooltipTimeout) {
-            clearTimeout(this.tooltipTimeout);
-            this.tooltipTimeout = null;
-        }
-    }
-
-    fit(geomOrExtent){
-        this.kmap.fit(geomOrExtent)
-    }
-    // 区级颜色
-    handleStatusColor(key) {
-        let fillColor = '#ffffff00'
-        let strokeColor = '#ffffff00'
-        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}
-    }
-    // 多个feature
-    getFeaturesIcon(features) {
-        let result = features.find(item => {
-            // 获取Feature的属性
-            let obj = item.getProperties();
-            // 检查clusterIcon属性是否为1
-            return obj.clusterIcon === 0;
-        });
-        // 如果没有找到，则尝试找到status为2的项
-        if (!result) {
-            result = features.find(item => {
-                let obj = item.getProperties();
-                // 检查clusterIcon属性是否为2
-                return obj.clusterIcon === 1;
-            });
-        }
-        // 如果没有找到，则尝试找到status为2的项
-        if (!result) {
-            result = features.find(item => {
-                let obj = item.getProperties();
-                // 检查clusterIcon属性是否为2
-                return obj.clusterIcon === 2;
-            });
-        }
-        if (!result) {
-            result = features.find(item => {
-                let obj = item.getProperties();
-                // 检查clusterIcon属性是否为3
-                return obj.clusterIcon === 3;
-            });
-        }
-        if (!result) {
-            result = features.find(item => {
-                let obj = item.getProperties();
-                // 检查clusterIcon属性是否为4
-                return obj.clusterIcon === 4;
-            });
-        }
-        if (!result) {
-            result = features.find(item => {
-                let obj = item.getProperties();
-                // 检查clusterIcon属性是否为5
-                return obj.clusterIcon === 5;
-            });
-        }
-        if(!result){
-            result = features[0]
-        }
-        return result;
-    }
-    // 状态图例
-    handleStatusIcon(obj) {
-        let key = null;
-        switch (this.afterDayNum){
-            case 0:
-                key = 'ycStatus'
-                break
-            case 3:
-                key = 'ycStatus'
-                break
-            case 5:
-                key = 'ycStatus5d'
-                break
-            case 7:
-                key = 'ycStatus7d'
-                break
-            case 15:
-                key = 'ycStatus15d'
-                break
-            case 30:
-                key = 'ycStatus30d'
-                break
-        }
-        let hasStatus = false
-        let imgSrc = require('@/assets/status/status_bcyc.png')
-        if (obj[key] == 1) {
-            hasStatus = true
-            imgSrc = require('@/assets/status/status_szyc.png')
-            return {hasStatus, imgSrc, clusterIcon: 1}
-        }
-        if (obj[key] == 2) {
-            hasStatus = true
-            imgSrc = require('@/assets/status/status_bcyc.png')
-            return {hasStatus, imgSrc, clusterIcon: 2}
-        }
-        if (obj.review) {
-            hasStatus = true
-            imgSrc = require('@/assets/status/status_dfh.png')
-            return {hasStatus, imgSrc, clusterIcon: 3}
-        }
-        if (obj.fly) {
-            hasStatus = true
-            imgSrc = require('@/assets/status/status_xfdw.png')
-            return {hasStatus, imgSrc, clusterIcon: 4}
-        }
-        if (obj[key] == 0) {
-            hasStatus = true
-            imgSrc = require('@/assets/status/status_dfh.png')
-            return {hasStatus, imgSrc, clusterIcon: 5}
-        }
-        return {hasStatus, imgSrc, clusterIcon: 0}
-
-    }
-
-    refreshTree(organId,day){
-        this.afterDayNum = day
-        this.initTree(organId)
-    }
-}
-
-export default ZnxyMap

src/views/znxy/charts/c_b_l/Gybg.vue

@@ -1,213 +0,0 @@
-<template>
-  <div >
-    <Title title="果园报告">
-      <template v-slot:title-slot>
-      </template>
-    </Title>
-    <div class="content-box bottom container yse-events" @mouseover="setPaused(true)" @mouseout="setPaused(false)" >
-      <div class="scroll-list" :class="getPaused()" >
-        <div  class="item" >
-          <br/><br/>
-          <p>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;基本信息：{{report.basicInfo}}
-            <br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生长信息：
-            <template v-for="info in growInfoArrList" :key="info.idx"  >
-              &nbsp;
-              <text v-for="item in info" :key="item.text" :style="item.color ? 'color:'+item.color : ''">{{item.text}}</text>
-            </template>
-          </p>
-        </div>
-      </div>
-      <div class="scroll-list2" :class="getPaused()" >
-        <div  class="item" >
-          <br/><br/>
-          <p>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;基本信息：{{report.basicInfo}}
-            <br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生长信息：
-            <template v-for="info in growInfoArrList" :key="info.idx"  >
-                &nbsp;
-                <text v-for="item in info" :key="item.text" :style="item.color ? 'color:'+item.color : ''">{{item.text}}</text>
-            </template>
-          </p>
-        </div>
-      </div>
-
-    </div>
-  </div>
-</template>
-
-
-<script setup>
-import Title from "../../../components/title";
-import {onMounted, ref} from "vue";
-let props = defineProps({
-  report:{
-    type:Object,
-    required:true
-  }
-})
-const paused = ref(null);
-const growInfoArrList = ref([])
-function setPaused(val){
-  paused.value = val;
-}
-function getPaused(){
-  return paused.value ? "paused" : ""
-}
-
-/**
- * @param {总体生长风险} growInfoList
- */
-function getGrowInfoArrList(growInfoList){
-  let growInfoArrList = []
-  for(let growInfo of growInfoList){
-    growInfoArrList.push(getTextArray(growInfo))
-  }
-  return growInfoArrList
-}
-
-function getTextArray(text){
-  let res = []
-  let cur = {text:""}
-  //三种模式 0 读取普通字符串 1读取关键字 2读取关键字的颜色
-  let status = 0;
-  for(let i in text){
-    if(text[i] == ']'){
-      status = 0
-      res.push(cur)
-      cur = {text:""}
-      continue
-    }
-    if(text[i] == '['){
-      status = 1
-      res.push(cur)
-      cur = {text:""}
-      continue
-    }
-    if(status == 1 && text[i] == ','){
-      status = 2
-      cur["color"] = ""
-      continue
-    }
-    if(status == 0 || status == 1){
-      cur["text"] +=text[i]
-    }
-    if(status == 2){
-      cur["color"] +=text[i]
-    }
-  }
-  res.push(cur)
-  return res;
-}
-
-growInfoArrList.value = getGrowInfoArrList(props.report.growInfoList)
-
-</script>
-
-<style lang="scss" scoped>
-.content-box{
-  position: absolute;
-  width: 100%;
-  height: calc(100% - 48px);
-  font-size: 20px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #FFFFFF;
-}
-.slot-unit{
-  color: #f0f0f0;
-  text-align: right;
-  padding: 10px;
-  width: 100%;
-}
-
-.container {
-  position: relative;
-  /* 父容器需要有明确的高度 */
-  margin: auto;
-  overflow: hidden;
-}
-
-.container > .scroll-list {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 500px;
-  width: 100%;
-  animation: scroll 20s linear infinite normal;
-}
-.container > .scroll-list2 {
-  position: absolute;
-  top: 500px;
-  height: 500px;
-  left: 0;
-  width: 100%;
-  animation: scroll2 20s linear infinite normal;
-}
-
-.container > .paused{
-  animation-play-state:paused;
-}
-.bottom{
-  margin-top: 8px;
-  width: 100%;
-  height: 82%;
-  overflow:hidden;
-  .item{
-    position: relative;
-    height: 100%;
-    background-color: #032C3980;
-    padding: 20px 20px 20px 20px;
-    border-left: 1px solid rgba(81,233,240,0.3);
-    border-right: 1px solid rgba(81,233,240,0.3);
-    box-sizing: border-box;
-    font-size: 20px;
-    .line{
-      position:absolute;
-      margin-top: 5px;
-      width: 2px;
-      height: 11px;
-      background: #DDB331;
-    }
-    .frontIcon{
-      width: 13%;
-      padding: 0px 10px 0px 10px;
-      box-sizing: border-box;
-    }
-    .endIcon{
-      width: 17%;
-      height: 100%;
-      box-sizing: border-box;
-      text-align: right;
-    }
-    .content{
-      width: 70%;
-      display: flex;
-      flex-direction: column;
-      .body{
-        display: flex;
-        justify-content: space-between;
-      }
-    }
-    .text1{font-weight: 600;color: #00FFF0;}
-    .text2{font-weight: 600;color: #D09C00;}
-    .text3{color: #B4FFFB;}
-  }
-}
-
-
-@keyframes scroll {
-  100% {
-    /* 需要滚动内容的总高度 */
-    top: -500px;
-  }
-}
-@keyframes scroll2 {
-  100% {
-    /* 需要滚动内容的总高度 */
-    top: 0px;
-  }
-}
-
-</style>
-

src/views/znxy/charts/c_b_l/Szyc.vue

@@ -1,392 +0,0 @@
-<template>
-  <div>
-    <Title title="生长态势" headerClass="two-header">
-      <template v-slot:title-slot>
-        <!-- <div class="slot-time">(预警时间:11.1)</div>
-        <div class="slot-right">
-          <template v-for="(item, index) in dataInfo" :key="index">
-            <img
-              v-if="active === index"
-              @click="handleAct(index)"
-              class="yse-events"
-              src="@/assets/img/znxy/szyc_icon_act.png"
-            />
-            <img
-              v-else
-              @click="handleAct(index)"
-              class="yse-events"
-              src="@/assets/img/znxy/szyc_icon.png"
-            />
-          </template>
-        </div> -->
-        <div class="slot-right">
-          <div class="btn yse-events">异常复盘</div>
-          <div class="btn yse-events">预警详情</div>
-        </div>
-      </template>
-    </Title>
-    <div class="content-box">
-      <div class="box-header">
-        {{ content }}
-        <!-- <div class="box-title">
-          <span class="name">{{ title }}</span
-          >态势图
-        </div> -->
-        <!-- <div class="btn">
-          <div :class="['yse-events', 'text']">全景化信息图</div>
-        </div> -->
-      </div>
-      <div ref="chartDom" class="box-echars"></div>
-    </div>
-  </div>
-</template>
-<script setup>
-import { onMounted, reactive, toRefs, ref, onBeforeUnmount } from "vue";
-import { useStore } from "vuex";
-import * as echarts from "echarts";
-import Title from "../../../components/title";
-
-// 在组件或全局监听器中监听自定义事件
-function handleStorageUpdate(e) {
-  curGardenId.value = e.detail;
-  initData();
-}
-// 在组件或全局监听器中监听自定义事件
-window.addEventListener("storageChanged", handleStorageUpdate);
-
-// 组件销毁前移除监听
-onBeforeUnmount(() => {
-  window.removeEventListener("storageChanged", handleStorageUpdate);
-});
-
-const getters = useStore().getters;
-const curGardenId = ref(getters.userinfo.curGardenId);
-const active = ref(0);
-
-const handleAct = (e) => {
-  active.value = e;
-  initList(active.value);
-};
-
-let chartDom = ref(null);
-let myChart = null;
-
-onMounted(() => {
-  myChart = echarts.init(chartDom.value);
-  myChart.setOption(options);
-  initData();
-});
-
-const colors = [
-  {
-    offset: 0.25,
-    color: "rgba(255, 86, 98, 0.4)",
-  },
-  {
-    offset: 0.5,
-    color: "rgba(252, 186, 138, 0.4)",
-  },
-  {
-    offset: 0.75,
-    color: "rgba(250, 212, 139, 0.4)",
-  },
-  {
-    offset: 1,
-    color: "rgba(250, 212, 139, 0.4)",
-  },
-];
-
-const options = {
-  tooltip: {
-    trigger: "axis",
-    axisPointer: {
-      type: "shadow",
-      shadowStyle: {
-        color: {
-          type: "linear",
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [
-            { offset: 0, color: "rgba(210, 73, 83, 0)" },
-            { offset: 0.5, color: "rgba(210, 73, 83, 0.5)" },
-            { offset: 1, color: "rgba(210, 73, 83, 0)" },
-          ],
-          global: false,
-        },
-      },
-    },
-  },
-  legend: {
-    orient: "vertical",
-    data: ["预测态势"],
-    //图例文字样式
-    textStyle: {
-      color: "#fff",
-      fontSize: "11px",
-    },
-    align: "left",
-    right: "2.4%",
-    top: "-3%",
-    icon: "rect",
-    itemGap: 5,
-    itemWidth: 20,
-    itemHeight: 8,
-  },
-  grid: {
-    top: "19%",
-    left: "1%",
-    right: "4%",
-    bottom: "5%",
-    containLabel: true,
-  },
-  xAxis: [
-    {
-      type: "category",
-      data: [],
-      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: "11",
-      },
-      type: "value",
-      max: 100,
-      axisTick: {
-        show: false,
-      },
-      axisLabel: {
-        textStyle: {
-          color: "#fff",
-        },
-      },
-      // 分割线
-      splitLine: {
-        show: true,
-        lineStyle: {
-          color: "#ffffff1f",
-        },
-      },
-    },
-    {
-      type: "value",
-      show: false,
-      max: 40,
-    },
-  ],
-  series: [
-    {
-      name: "预测态势",
-      type: "line",
-      data: [],
-      symbol: "none",
-      itemStyle: {
-        color: "#FAD48B",
-        borderWidth: 1,
-      },
-      yAxisIndex: 0,
-      areaStyle: {
-        normal: {
-          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, colors, false),
-        },
-      },
-      lineStyle: {
-        width: 0,
-      },
-    },
-    // {
-    //   name: "预测态势",
-    //   type: "line",
-    //   data: [],
-    //   symbol: "emptyCircle",
-    //   symbolSize: 3,
-    //   showSymbol: false,
-    //   itemStyle: {
-    //     color: "red",
-    //   },
-    //   yAxisIndex: 1,
-    //   lineStyle: {
-    //     width: 1,
-    //     color: "#FF5358", //改变折线颜色
-    //     type: "dashed",
-    //   },
-    // },
-  ],
-};
-
-const title = ref("");
-const content = ref("");
-const dataInfo = ref([]);
-
-const initData = async () => {
-  const { code, data } = await VE_API.znxy.growAbnormal({
-    gardenId: curGardenId.value,
-  });
-  if (data.length < 1) {
-    myChart.clear();
-    content.value = '';
-  } else {
-    dataInfo.value = data;
-    initList(active.value);
-    myChart.clear();
-    options && myChart.setOption(options);
-  }
-};
-
-function initList(index) {
-  title.value = dataInfo.value[index].title;
-  content.value = dataInfo.value[index].content;
-  options.xAxis[0].data = dataInfo.value[index].data.map((item) =>
-    formatDate(item.date)
-  );
-  options.series[0].data = dataInfo.value[index].data.map(
-    (item) => item.forecast
-  );
-  // options.series[1].data = dataInfo.value[index].data.map((item) =>
-  //   item.forecast.slice(0, 2)
-  // );
-}
-
-function removeLastThreeChars(str) {
-  if (str.length >= 3) {
-    return str.slice(0, -2); // 使用slice方法
-  }
-  return str; // 如果字符串长度小于3，则返回原字符串
-}
-
-function formatDate(dateString) {
-  // 确保输入字符串是有效的
-  const regex = /^\d{4}-\d{2}-\d{2}$/;
-  if (!regex.test(dateString)) {
-    return "Invalid date format";
-  }
-
-  const parts = dateString.split("-");
-  const year = parseInt(parts[0], 10);
-  const month = parseInt(parts[1], 10) - 1; // 注意月份是从0开始的
-  const day = parseInt(parts[2], 10);
-
-  // 创建Date对象
-  const date = new Date(year, month, day);
-
-  // 提取月份和日期并格式化输出
-  const monthFormatted = String(date.getMonth() + 1); // 使用padStart来确保总是两位数
-  const dayFormatted = String(date.getDate()).padStart(2, "0");
-
-  return `${monthFormatted}/${dayFormatted}`;
-}
-</script>
-
-<style lang="scss" scoped>
-.content-box {
-  width: 100%;
-  height: calc(100% - 48px);
-  padding: 8px 11px;
-  box-sizing: border-box;
-  .box-header {
-    width: 100%;
-    height: 45px;
-    padding: 5px;
-    box-sizing: border-box;
-    font-weight: bold;
-    color: #fffdfd;
-    font-size: 12px;
-    background: url("@/assets/img/znxy/qxyj_bg.png") no-repeat center center /
-      100% 100%;
-    .box-title {
-      background-image: url("@/assets/img/znxy/echart_title.png");
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
-      width: 156px;
-      height: 100%;
-      line-height: 32px;
-      text-align: center;
-      .name {
-        color: #edcb42;
-      }
-    }
-    .text {
-      text-align: center;
-      line-height: 30px;
-      font-weight: 400;
-      color: #b4fffb;
-    }
-    .btn {
-      cursor: pointer;
-      background-image: url("@/assets/img/tabs_btn3.png");
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
-      font-family: PingFangSC-Regular, PingFang SC;
-      font-weight: 400;
-      color: rgba(180, 255, 251, 0.6);
-      width: 124px;
-      height: 30px;
-    }
-  }
-
-  .box-echars {
-    width: 100%;
-    height: calc(100% - 45px);
-  }
-}
-
-.slot-time {
-  color: #fff;
-  font-size: 15px;
-  color: #fe4444;
-  width: 50%;
-}
-
-.slot-right {
-  width: 70%;
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  justify-content: right;
-  align-items: center;
-  padding-right: 12px;
-  .btn {
-    cursor: pointer;
-    background: url("@/assets/img/znxy/qxyj_title.png") no-repeat center center /
-      100% 100%;
-    margin-right: 5px;
-    color: rgba(255, 206, 206, 0.8);
-    font-weight: bold;
-    font-size: 15px;
-    width: 92px;
-    height: 32px;
-    text-align: center;
-    line-height: 32px;
-  }
-}
-</style>

src/views/znxy/charts/c_b_r/Bcyc.vue

@@ -1,360 +0,0 @@
-<template>
-  <div>
-    <Title title="病虫异常">
-      <template v-slot:title-slot>
-        <div class="slot-right">
-          <div class="btn yse-events">异常复盘</div>
-          <div class="btn yse-events">预警详情</div>
-        </div>
-      </template>
-    </Title>
-    <div class="content-box">
-      <div class="box-header">
-        {{content}}
-      </div>
-      <div ref="chartDom" class="box-echars"></div>
-    </div>
-  </div>
-</template>
-<script setup>
-import { onMounted, reactive, toRefs, ref ,onBeforeUnmount} from "vue";
-import { useStore } from "vuex";
-import * as echarts from "echarts";
-import Title from "../../../components/title";
-
-const getters = useStore().getters;
-const curGardenId = ref(getters.userinfo.curGardenId);
-
-// 在组件或全局监听器中监听自定义事件
-function handleStorageUpdate(e) {  
-    curGardenId.value = e.detail
-    initData()
-} 
-// 在组件或全局监听器中监听自定义事件
-window.addEventListener('storageChanged', handleStorageUpdate); 
-
-// 组件销毁前移除监听
-onBeforeUnmount(()=>{
-  window.removeEventListener('storageChanged', handleStorageUpdate);
-})
-
-const active = ref(0);
-
-const handleAct = (e) => {
-  active.value = e;
-  initList(active.value);
-};
-
-let chartDom = ref(null);
-let myChart = null;
-
-onMounted(() => {
-  myChart = echarts.init(chartDom.value);
-  myChart.setOption(options);
-  initData();
-});
-
-const colors = [
-  {
-    offset: 0.25,
-    color: "rgba(252, 186, 138, 0.4)",
-  },
-  {
-    offset: 0.5,
-    color: "rgba(43, 202, 207, 0.4)",
-  },
-  {
-    offset: 0.75,
-    color: "rgba(26, 134, 137, 0.4)",
-  },
-  {
-    offset: 1,
-    color: "rgba(26, 134, 137, 0.4)",
-  },
-];
-
-const options = {
-  tooltip: {
-    trigger: "axis",
-    axisPointer: {
-      type: "shadow",
-      shadowStyle: {
-        color: {
-          type: "linear",
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [
-            { offset: 0, color: "rgba(210, 73, 83, 0)" },
-            { offset: 0.5, color: "rgba(210, 73, 83, 0.5)" },
-            { offset: 1, color: "rgba(210, 73, 83, 0)" },
-          ],
-          global: false,
-        },
-      },
-    },
-  },
-  legend: {
-    orient: "vertical",
-    data: ["预测态势"],
-    //图例文字样式
-    textStyle: {
-      color: "#fff",
-      fontSize: "11px",
-    },
-    align: "left",
-    right: "2.4%",
-    top: "-3%",
-    icon:'rect',
-    itemGap: 5,
-    itemWidth: 20,
-    itemHeight: 8,
-  },
-  grid: {
-    top: "19%",
-    left: "1%",
-    right: "4%",
-    bottom: "5%",
-    containLabel: true,
-  },
-  xAxis: [
-    {
-      type: "category",
-      data: [],
-      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:'11'
-      },
-      type: "value",
-      max: 100,
-      axisTick: {
-        show: false,
-      },
-      axisLabel: {
-        textStyle: {
-          color: "#fff",
-        },
-      },
-      // 分割线
-      splitLine: {
-        show: true,
-        lineStyle: {
-          color: "#ffffff1f",
-        },
-      },
-    },
-    {
-      type: "value",
-      show: false,
-      max: 40,
-    },
-  ],
-  series: [
-    {
-      name: "预测态势",
-      type: "line",
-      data: [],
-      symbol: "none",
-      itemStyle: {
-        color: "#2BCACF",
-        borderWidth: 1,
-      },
-      yAxisIndex: 0,
-      areaStyle: {
-        normal: {
-          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, colors, false),
-        },
-      },
-      lineStyle: {
-        width: 0,
-      },
-    },
-    // {
-    //   name: "预测态势",
-    //   type: "line",
-    //   data: [],
-    //   symbol: "emptyCircle",
-    //   symbolSize: 3,
-    //   showSymbol: false,
-    //   itemStyle: {
-    //     color: "red",
-    //   },
-    //   yAxisIndex: 1,
-    //   lineStyle: {
-    //     width: 1,
-    //     color: "#FF5358", //改变折线颜色
-    //     type: "dashed",
-    //   },
-    // },
-  ],
-};
-
-const title = ref("");
-const content = ref("")
-const dataInfo = ref([]);
-
-const initData = async () => {
-  const { code, data } = await VE_API.znxy.pestAbnormal({ gardenId: curGardenId.value });
-  if (data.length < 1) {
-    myChart.clear();
-    content.value = '';
-  } else {
-    dataInfo.value = data;
-    initList(active.value);
-    myChart.clear();
-    options && myChart.setOption(options);
-  }
-};
-
-function initList(index) {
-  title.value = dataInfo.value[index].title;
-  content.value = dataInfo.value[index].content;
-  options.xAxis[0].data = dataInfo.value[index].data.map((item) =>
-    formatDate(item.date)
-  );
-  options.series[0].data = dataInfo.value[index].data.map((item) =>
-    item.forecast
-  );
-  // options.series[1].data = dataInfo.value[index].data.map((item) =>
-  //   item.forecast.slice(0, 2)
-  // );
-}
-
-function formatDate(dateString) {
-  // 确保输入字符串是有效的
-  const regex = /^\d{4}-\d{2}-\d{2}$/;
-  if (!regex.test(dateString)) {
-    return "Invalid date format";
-  }
-
-  const parts = dateString.split("-");
-  const year = parseInt(parts[0], 10);
-  const month = parseInt(parts[1], 10) - 1; // 注意月份是从0开始的
-  const day = parseInt(parts[2], 10);
-
-  // 创建Date对象
-  const date = new Date(year, month, day);
-
-  // 提取月份和日期并格式化输出
-  const monthFormatted = String(date.getMonth() + 1); // 使用padStart来确保总是两位数
-  const dayFormatted = String(date.getDate()).padStart(2, "0");
-
-  return `${monthFormatted}/${dayFormatted}`;
-}
-</script>
-
-<style lang="scss" scoped>
-.content-box {
-  width: 100%;
-  height: calc(100% - 48px);
-  padding: 8px 11px;
-  box-sizing: border-box;
-  .box-header {
-    width: 100%;
-    height: 45px;
-    padding: 5px;
-    box-sizing: border-box;
-    font-weight: bold;
-    color: #FFFDFD;
-    font-size: 12px;
-    background: url("@/assets/img/znxy/qxyj_bg.png") no-repeat center center /
-      100% 100%;
-    .box-title {
-      background-image: url("@/assets/img/znxy/yc_title_bg.png");
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
-      width: 156px;
-      height: 100%;
-      line-height: 32px;
-      text-align: center;
-      .name {
-        color: #edcb42;
-      }
-    }
-    .text {
-      text-align: center;
-      line-height: 30px;
-      font-weight: 400;
-      color: #b4fffb;
-    }
-    .btn {
-      cursor: pointer;
-      background-image: url("@/assets/img/tabs_btn3.png");
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
-      font-family: PingFangSC-Regular, PingFang SC;
-      font-weight: 400;
-      color: rgba(180, 255, 251, 0.6);
-      width: 124px;
-      height: 30px;
-    }
-  }
-
-  .box-echars {
-    width: 100%;
-    height: calc(100% - 45px);
-  }
-}
-
-.slot-time {
-  color: #fff;
-  font-size: 15px;
-  color: #fe4444;
-  width: 50%;
-}
-
-.slot-right {
-  width: 70%;
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  justify-content: right;
-  align-items: center;
-  padding-right: 12px;
-  .btn {
-    cursor: pointer;
-    background: url("@/assets/img/tabs_btn3.png") no-repeat center center /
-      100% 100%;
-    margin-right: 5px;
-    color: rgba(180,255,251,.8);
-    font-weight: bold;
-    font-size: 15px;
-    width: 92px;
-    height: 32px;
-    text-align: center;
-    line-height: 32px;
-  }
-}
-</style>

src/views/znxy/charts/c_b_r/Xttz.vue

@@ -1,155 +0,0 @@
-<template>
-  <div >
-    <Title class="title" title="系统通知">
-      <template v-slot:title-slot>
-      <div class="left"></div>
-      <div class="right">
-      <div class="btn yse-events"><div class="text" :key="btnIndex" :class="getActive(1)" @click="change(1)">巡园通知</div></div>
-      <div class="btn yse-events"><div class="text" :key="btnIndex" :class="getActive(2)" @click="change(2)">异常通知</div></div>
-      </div>
-      </template>
-    </Title>
-  </div>
-</template>
-
-
-<script setup>
-import Highcharts from 'highcharts/highstock';
-import HighchartsMore from 'highcharts/highcharts-more';
-import HighchartsDrilldown from 'highcharts/modules/drilldown';
-import Highcharts3D from 'highcharts/highcharts-3d';
-import Highmaps from 'highcharts/modules/map';
-import Title from "../../../components/title";
-import {onMounted, ref} from "vue";
-
-const btnIndex = ref(null);
-function getActive(index){
-  return btnIndex.value == index ? "active" : "";
-}
-function change(index) {
-  btnIndex.value = index;
-}
-
-
-</script>
-
-<style lang="scss" scoped>
-.content-box{
-  position: absolute;
-  width: 100%;
-  height: calc(100% - 48px);
-}
-.title{
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  .left{
-    width: 30%;
-    text-align: left;
-    white-space: nowrap;
-    height: 28px;
-    font-size: 20px;
-    font-family: PingFangSC-Medium, PingFang SC;
-    font-weight: 500;
-    color: #B4FFFB;
-    line-height: 28px;
-    margin-left: 45px;
-  }
-  .right{
-    width: 70%;
-    text-align: left;
-    box-sizing: border-box;
-    height: 20px;
-    font-size: 14px;
-    font-family: PingFangSC-Regular, PingFang SC;
-    font-weight: 400;
-    color: #FFFFFF;
-    line-height: 20px;
-    display: flex;
-    flex-direction: row;
-    justify-content: left;
-    align-items: center;
-    .text{
-      text-align: center;
-      width: 88px;
-      height: 36px;
-      line-height: 36px;
-      font-size: 14px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      font-weight: 400;
-      color: #B4FFFB;
-    }
-    .btn{
-      cursor: pointer;
-      background-image: url(@/assets/img/tabs_btn3.png);
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
-      font-size: 14px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      font-weight: 400;
-      color: rgba(180,255,251,0.6);
-      width: 88px;
-      height: 36px;
-      .active{
-        width: 88px;
-        height: 36px;
-        background: rgba(3,44,57,0.8);
-        box-shadow: inset 0px 0px 20px 4px rgba(0,255,240,0.5);
-        border-radius: 0px 0px 0px 0px;
-        border: 1px solid #51E9F0;
-      }
-    }
-
-  }
-}
-.slot-right{
-  width: 70%;
-  text-align: left;
-  box-sizing: border-box;
-  height: 20px;
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #FFFFFF;
-  line-height: 20px;
-  display: flex;
-  flex-direction: row;
-  justify-content: right;
-  align-items: center;
-  .text{
-    text-align: center;
-    width: 88px;
-    height: 36px;
-    line-height: 36px;
-    font-size: 14px;
-    font-family: PingFangSC-Regular, PingFang SC;
-    font-weight: 400;
-    color: #B4FFFB;
-  }
-  .btn{
-    cursor: pointer;
-    background-image: url(@/assets/img/tabs_btn3.png);
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    margin-right: 10px;
-    font-size: 14px;
-    font-family: PingFangSC-Regular, PingFang SC;
-    font-weight: 400;
-    color: rgba(180,255,251,0.6);
-    width: 88px;
-    height: 36px;
-    .active{
-      width: 88px;
-      height: 36px;
-      background: rgba(3,44,57,0.8);
-      box-shadow: inset 0px 0px 20px 4px rgba(0,255,240,0.5);
-      border-radius: 0px 0px 0px 0px;
-      border: 1px solid #51E9F0;
-    }
-  }
-
-}
-</style>
-

src/views/znxy/charts/l_b/Jyyj.vue

@@ -1,197 +0,0 @@
-<template>
-  <div>
-    <Title title="降雨预警">
-      <template v-slot:title-slot>
-      </template>
-    </Title>
-    <div ref="chartDom"  class="content-box yse-events"></div>
-  </div>
-</template>
-<script setup>
-import {onMounted, ref} from "vue";
-import Highcharts from 'highcharts/highstock';
-import HighchartsMore from 'highcharts/highcharts-more';
-import HighchartsDrilldown from 'highcharts/modules/drilldown';
-import Highcharts3D from 'highcharts/highcharts-3d';
-import Highmaps from 'highcharts/modules/map';
-import {useStore} from "vuex";
-import Title from "../../../components/title";
-//初始化Highcharts
-HighchartsMore(Highcharts)
-HighchartsDrilldown(Highcharts);
-Highcharts3D(Highcharts);
-Highmaps(Highcharts);
-
-let state = useStore().state;
-let chartDom = ref(null);
-const mychat = ref(null);
-const unit = ref("")
-const weather7D = ref(null)
-
-const options =  {
-  tooltip:{
-    useHTML:true,
-    backgroundColor:"#00000000",
-    formatter:function(){
-      let {name,unit} = this.series.userOptions;
-      return "<div class='tooltip1'><div>"+this.x+"</div><div>" + name + this.y+ unit +"</div></div>"
-    }
-  },
-  chart: {
-    backgroundColor:"#ffffff00",
-    type: 'areaspline',
-  },
-  title: {
-    text: null
-  },
-  credits: {
-    enabled:false,
-  },
-  xAxis: {
-    gridLineWidth: 1,
-    type: 'datetime',
-    gridLineColor:"#e6e6e630",
-    categories: ['04-28', '04-29', '04-30', '05-01','05-02','05-03', '05-04'],
-    labels: {
-      style: {
-        color: '#fff',
-        fontSize:'11px',
-        fontWeight: 400,
-        fontFamily:'PingFangSC-Regular, PingFang SC'
-      }
-    },
-  },
-  yAxis: {
-    min: 0,
-    title: null,
-    gridLineWidth: 1,
-    gridLineColor:"#e6e6e630",
-    labels: {
-      format:"{value}",
-      style: {
-        color: '#fff',
-        fontSize:'11px',
-        fontWeight: 400,
-        fontFamily:'PingFangSC-Regular, PingFang SC'
-      }
-    },
-  },
-  legend: {
-    /* 图例显示顺序反转
-     * 这是因为堆叠的顺序默认是反转的，可以设置
-     * yAxis.reversedStacks = false 来达到类似的效果
-     */
-    enabled:false,
-    reversed: true,
-    padding:0,
-    itemStyle: {
-      color: '#fff',
-      fontFamily:'ArialMT'
-    }
-  },
-  plotOptions: {
-    areaspline: {
-      marker: {
-        radius: 0
-      },
-      lineWidth: 0,
-      states: {
-        hover: {
-          lineWidth: 0
-        }
-      },
-      threshold: null
-    }
-  },
-  series: []
-}
-
-async function initWeather(){
-  let {code,data} = await VE_API.system.weather();
-  weather7D.value = data.daily;
-}
-
-function init3() {
-  unit.value = "mm"
-  let data = weather7D.value;
-  let categories = [];
-  let seritsData1 = [];
-  data.forEach((item)=>{
-    categories.push(item.fxDate.substring(5,10))
-    seritsData1.push(parseFloat(item.precip))
-  })
-  options.xAxis.categories = categories;
-
-  options.series = [{
-    name:"降雨量",
-    unit:"mm",
-    data: seritsData1,
-    fillColor: {
-      linearGradient: {
-        x1: 0,
-        y1: 0,
-        x2: 0,
-        y2: 1
-      },
-      stops: [
-        [0, '#0c45ee90'], // middle
-        [0.5, '#46dee390'], // middle
-        [1, '#e9af0090'] // end
-      ]
-    },
-  }];
-  mychat.value = new Highcharts.Chart(chartDom.value, options);
-}
-
-onMounted(async () => {
-  await initWeather()
-  init3()
-})
-
-
-</script>
-
-<style lang="scss" scoped>
-
-.content-box{
-  position: absolute;
-  width: 100%;
-  height: calc(100% - 48px - 10px);
-  bottom: 0px;
-}
-
-.title-slot{
-  background-image: url(@/assets/img/tabs_btn3.png);
-  width: 88px;
-  height: 50/16*1rem;
-  border-radius: 0.25rem;
-  font-size:14/16*1rem;
-  font-family: PingFangSC-Medium, PingFang SC;
-  font-weight: 500;
-  color: #FFFFFF;
-  float:right;
-  text-align: center;
-  box-sizing: border-box;
-}
-
-.btn{
-  cursor: pointer;
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: rgba(180,255,251,0.6);
-  width: 88px;
-  height: 28px;
-  .active{
-    width: 88px;
-    height: 28px;
-    background: rgba(3,44,57,0.8);
-    box-shadow: inset 0px 0px 20px 4px rgba(0,255,240,0.5);
-    border-radius: 0px 0px 0px 0px;
-    border: 1px solid #51E9F0;
-  }
-}
-
-</style>

src/views/znxy/charts/l_b/chts.vue

@@ -1,298 +0,0 @@
-<template>
-  <div>
-    <Title :title="(switchValue == 2?'病害':'虫害') + '态势'">
-      <template v-slot:title-slot>
-        <div class="switch yse-events" @click="handleSwitch">
-            <el-icon color="#00FFF0" size="15"><Switch /></el-icon>
-            <span>可切换{{switchValue == 2 ?'虫害':'病害'}}</span>
-        </div>
-        <div class="slot-right">
-          <div class="btn yse-events">异常复盘</div>
-          <div class="btn yse-events">态势详情</div>
-        </div>
-      </template>
-    </Title>
-    <div class="content-box">
-      <div ref="chartDom" class="charts yse-events"></div>
-      <div class="info">
-        <el-select
-          v-model="value"
-          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>
-        <div class="desc" v-html="textArr[value]">
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script setup>
-import { onMounted, ref, onBeforeUnmount } from "vue";
-import { useStore } from "vuex";
-import * as echarts from "echarts";
-import Title from "../../../components/title";
-
-// 在组件或全局监听器中监听自定义事件
-function handleStorageUpdate(e) {
-  curGardenId.value = e.detail;
-  initData();
-}
-// 在组件或全局监听器中监听自定义事件
-window.addEventListener("storageChanged", handleStorageUpdate);
-
-// 组件销毁前移除监听
-onBeforeUnmount(() => {
-  window.removeEventListener("storageChanged", handleStorageUpdate);
-});
-
-const getters = useStore().getters;
-const curGardenId = ref(getters.userinfo.curGardenId);
-let chartDom = ref(null);
-let myChart = null;
-let textArr = ref([])
-
-onMounted(() => {
-  myChart = echarts.init(chartDom.value);
-  myChart.setOption(options);
-  initData();
-});
-const sData = [
-  {
-    name: "虫害",
-    value: "40000",
-    text: "当天虫害比例",
-  },
-  {
-    name: "正常",
-    value: "53000",
-    text: "当天虫害比例",
-  },
-];
-
-//数据模型类
-function dataModel(name, radius, mData){
-  let data = {
-        name: name || "第一层环",
-        type: "pie",
-        z: 3,
-        tooltip: {
-          show: true,
-        },
-        center: ["50%", "45%"],
-        radius: radius || ["24%", "30%"],
-        hoverAnimation: false,
-        clockWise: false,
-        itemStyle: {
-          normal: {
-            color: function (params) {
-              return colorList[params.dataIndex];
-            },
-          },
-        },
-        label: {
-          show: false,
-        },
-        data: mData || sData,
-      }
-      return data;
-}
-
-const colorList = ["#FFD700", "#02EDE0"];
-const options = {
-  tooltip: {
-    trigger: "item",
-    borderColor: "rgba(5,209,199,.5)",
-    backgroundColor: "rgba(47, 87, 97.1)",
-    borderWidth: 1,
-    padding: 0,
-    textStyle: {
-      color: "#fff",
-      fontSize: 11,
-    },
-    formatter: function (parms) {
-      var str = `<div class='v-echarts-tooltip'>
-                    <div>${parms.data.text}</div>
-                    <span>${parms.data.name}: ${parms.percent}%</span>
-                </div>`;
-      return str;
-    },
-  },
-  legend: {
-    icon: "circle",
-    bottom: "0%",
-    textStyle: {
-      color: "#fff",
-    },
-    itemWidth: 8,
-    data: ["虫害", "正常"],
-  },
-  series: [
-    // new dataModel("第四层环", ["63%", "69%"], sData),
-    // new dataModel("第三层环", ["50%", "56%"], sData),
-    // new dataModel("第二层环", ["37%", "43%"], sData),
-    // new dataModel("第一层环", ["24%", "30%"], sData),
-  ],
-};
-
-
-const initData = async () => {
-  options.legend.data = [switchValue.value == 2 ?'病害':'虫害', "正常"]
-  let radiusList = [["63%", "69%"],["50%", "56%"],["37%", "43%"],["24%", "30%"]]
-  let nameList = ["第四层环","第三层环","第二层环","第一层环"]
-  let prefixList = ["预计未来7天","当前","过去7天",""]
-  options.series = []
-  let texts = []
-  VE_API.znxy.pestStatistics({gardenId:curGardenId.value,warningType:switchValue.value}).then(({data})=>{
-    let j=0
-    for(let i = data.length - 1; i >=0; i--){
-      let item = data[i]
-      let name = item.warningType == 2 ? "病害" : "虫害"
-      texts.push(item.text)
-      if( j!=2 ){
-        options.series.push(new dataModel(nameList[j], radiusList[j],  [{
-          name,
-          value: item.num7d,
-          text: `${prefixList[j]}${name}比例`,
-        },
-          {
-            name: "正常",
-            value: item.treeCount - item.num7d+"",
-            text: `${prefixList[j]}正常比例`,
-          }]))
-        j++
-      }
-      options.series.push(new dataModel(nameList[j], radiusList[j],[{
-            name,
-            value: item.num,
-            text: `${prefixList[j]}${name}比例`,
-          },
-          {
-            name: "正常",
-            value: item.treeCount - item.num+"",
-            text: `${prefixList[j]}正常比例`,
-          }]))
-      j++
-    }
-    textArr.value = texts
-    myChart.clear();
-    options && myChart.setOption(options);
-  })
-
-};
-
-const value = ref(1);
-
-const optionsList = [
-  {
-    value: 0,
-    label: "7天",
-  },
-  {
-    value: 1,
-    label: "3天",
-  },
-];
-
-const switchValue = ref(2)
-const handleSwitch = () =>{
-  switchValue.value = switchValue.value == 2 ? 1 : 2;
-  initData()
-}
-
-</script>
-
-<style lang="scss" scoped>
-.switch{
-    display: flex;
-    color: #FF0101;
-    font-size: 13px;
-    align-items: center;
-    width: 39%;
-    cursor: pointer;
-    span{
-        margin-left: 4px;
-    }
-}
-.slot-right {
-  width: 70%;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: row;
-  justify-content: right;
-  align-items: center;
-  padding-right: 12px;
-  .btn {
-    cursor: pointer;
-    background: url("@/assets/img/tabs_btn3.png") no-repeat center center / 100%
-      100%;
-    margin-right: 5px;
-    color: rgba(180, 255, 251, 0.8);
-    font-weight: bold;
-    font-size: 15px;
-    width: 92px;
-    height: 32px;
-    text-align: center;
-    line-height: 32px;
-  }
-}
-.content-box {
-  width: 100%;
-  height: calc(100% - 48px);
-  padding: 8px 11px;
-  box-sizing: border-box;
-  color: #fffdfd;
-  display: flex;
-  justify-content: space-between;
-  .info {
-    width: 50%;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    .select {
-      width: 40%;
-      margin-bottom: 20px;
-      ::v-deep {
-        .el-select__wrapper {
-          background: transparent;
-          border: 1px solid rgba(81, 233, 240, 0.6);
-          box-shadow: none;
-          .el-select__placeholder {
-            color: #b4fffb;
-          }
-          .el-select__caret {
-            color: #b4fffb;
-          }
-        }
-      }
-    }
-  }
-  .desc {
-    width: 100%;
-    height: 100%;
-    font-size: 12px;
-    font-weight: bold;
-    overflow: hidden;
-    line-height: 20px;
-    // text-overflow: ellipsis;
-    // display: -webkit-box;
-    // -webkit-box-orient: vertical;
-    // -webkit-line-clamp: 5; /* 设置显示的行数 */
-    background: url("@/assets/img/znxy/ts_bg.png") no-repeat center center /
-      100% 100%;
-    box-sizing: border-box;
-    padding: 5px;
-  }
-  .charts {
-    width: 50%;
-    height: 100%;
-  }
-}
-</style>

src/views/znxy/charts/l_b/clyg.vue

@@ -1,303 +0,0 @@
-<template>
-  <div>
-    <Title title="产量预估">
-      <template v-slot:title-slot>
-        <div class="slot-right">
-          <div class="btn" @click="toPage">
-            <div :class="['yse-events', 'text']">全景化信息图</div>
-          </div>
-        </div>
-      </template>
-    </Title>
-    <div class="content-box">
-      <div class="box-header">总产量预计：{{ overlayShow?'***':obj.totalOutput }}斤</div>
-      <div class="box-body">
-        <div class="left">
-          <div class="pie">
-            <span class="num">{{ overlayShow?'***':obj.fruiting }}枝条</span><br />
-            <span>挂果潜力</span>
-          </div>
-        </div>
-        <div class="right">
-          <div class="progress-box" v-for="(item, index) in list" :key="index">
-            <div class="progress-text">
-              <div class="name">
-                {{ overlayShow?'品种'+(index+1):item.name }}
-                <span>({{ overlayShow?'***':item.flowerCount }}/{{ overlayShow?'***':item.totalCount }}枝)</span>
-              </div>
-              <div class="number">{{ overlayShow?'***':item.output }}斤</div>
-            </div>
-            <div class="progress-bar">
-              <div
-                class="progress-bar-fill"
-                :style="{
-                  width: (item.flowerCount / item.totalCount) * 100 + '%',
-                }"
-              ></div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- 遮罩锁 -->
-      <div class="overlay" v-show="overlayShow">
-        <el-icon color="#fff" size="50px"><Lock /></el-icon>
-      </div>
-      <!-- <div class="box-footer">{{ obj.desc }}</div> -->
-    </div>
-  </div>
-</template>
-<script setup>
-import { onMounted, reactive, toRefs,ref,onBeforeUnmount } from "vue";
-import {useRouter} from "vue-router";
-import { useStore } from "vuex";
-import Title from "../../../components/title";
-// 在组件或全局监听器中监听自定义事件
-function handleStorageUpdate(e) {  
-    curGardenId.value = e.detail
-    initData()
-} 
-// 在组件或全局监听器中监听自定义事件
-window.addEventListener('storageChanged', handleStorageUpdate); 
-
-// 组件销毁前移除监听
-onBeforeUnmount(()=>{
-  window.removeEventListener('storageChanged', handleStorageUpdate);
-})
-
-// 遮罩锁
-const overlayShow = ref(true)
-
-const router = useRouter();
-const getters = useStore().getters;
-const curGardenId = ref(getters.userinfo.curGardenId);
-
-onMounted(() => {
-  initData();
-});
-const infoObj = reactive({
-  list: [],
-  obj: {},
-});
-const { list, obj } = toRefs(infoObj);
-
-const initData = async () => {
-  const { code, data } = await VE_API.znxy.outputCalc({ gardenId: curGardenId.value });
-  infoObj.list = data.data;
-  infoObj.obj = data;
-};
-
-const toPage = () =>{
-  router.push({path:'/regionalInformation'}) 
-}
-</script>
-
-<style lang="scss" scoped>
-.content-box {
-  width: 100%;
-  height: calc(100% - 48px);
-  padding: 10px 13px;
-  box-sizing: border-box;
-  position: relative;
-  .box-header {
-    background-image: url("@/assets/img/znxy/clyg_title_bg.png");
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    width: 270px;
-    height: 24px;
-    font-weight: normal;
-    color: #03e4d7;
-    line-height: 23px;
-    padding-left: 12px;
-    box-sizing: border-box;
-    margin-top: 5px;
-  }
-  .box-body {
-    width: 100%;
-    height: calc(100% - 21px);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-top: 8px;
-    box-sizing: border-box;
-    .left {
-      width: 35%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      .pie {
-        width: 106px;
-        height: 106px;
-        background-image: url("@/assets/img/znxy/clyg_pie.png");
-        background-repeat: no-repeat;
-        background-size: 100% 100%;
-        color: #35f5ff;
-        box-sizing: border-box;
-        text-align: center;
-        font-size: 12px;
-        .num {
-          color: #ffffff;
-          padding-top: 25px;
-          margin-bottom: 2px;
-          display: inline-block;
-        }
-      }
-    }
-    .right {
-      width: 55%;
-      height: 100%;
-      color: #fff;
-      .progress-box {
-        width: 100%;
-        height: 33.33%;
-        .progress-text {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          margin-bottom: 7px;
-          position: relative;
-          .name {
-            span {
-              color: #03e4d7;
-            }
-          }
-          .number {
-            background: rgba(81, 233, 240, 0.2);
-            border-radius: 12px;
-            padding: 2px 8px;
-            box-sizing: border-box;
-          }
-          &::before {
-            content: "";
-            position: absolute;
-            left: -15px;
-            width: 10px;
-            height: 10px;
-            background: #87d3d2;
-            border-radius: 50%;
-          }
-        }
-        .progress-bar {
-          width: 100%;
-          height: 9px;
-          background: #095f5e;
-          border-radius: 5px;
-          overflow: hidden;
-          .progress-bar-fill {
-            height: 9px;
-            background: linear-gradient(
-              93deg,
-              rgba(7, 33, 38, 0.5),
-              rgba(255, 255, 255, 0.5)
-            );
-            border-radius: 5px;
-            width: 70%;
-          }
-        }
-      }
-
-      &.right > div.progress-box:nth-of-type(2) {
-        .progress-text {
-          .name {
-            span {
-              color: #b2ca7f;
-            }
-          }
-          .number {
-            background: rgba(114, 196, 26, 0.2);
-          }
-          &::before {
-            background: #b9d086;
-          }
-        }
-        .progress-bar {
-          background: #466921;
-          .progress-bar-fill {
-            background: linear-gradient(
-              93deg,
-              rgba(7, 33, 38, 0.5),
-              rgba(255, 255, 255, 0.5)
-            );
-          }
-        }
-      }
-
-      &.right > div.progress-box:nth-of-type(3) {
-        .progress-text {
-          .name {
-            span {
-              color: #d1a587;
-            }
-          }
-          .number {
-            background: rgba(242, 118, 29, 0.2);
-          }
-          &::before {
-            background: #d0a486;
-          }
-        }
-        .progress-bar {
-          background: #6c3814;
-          .progress-bar-fill {
-            background: linear-gradient(
-              93deg,
-              rgba(7, 33, 38, 0.5),
-              rgba(255, 255, 255, 0.5)
-            );
-          }
-        }
-      }
-    }
-  }
-
-  .overlay{
-    position: absolute;
-    top: 0;
-    background: rgba(1, 18, 23,.7);
-    width: 95%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .box-footer {
-    width: 100%;
-    height: 38px;
-    background-image: url("@/assets/img/znxy/clyg_footer_bg.png");
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    font-size: 12px;
-    color: #ffffff;
-    box-sizing: border-box;
-    padding: 3px 4px 0 4px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2; /* 设置显示的行数 */
-  }
-}
-
-.slot-right {
-  width: 70%;
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  justify-content: right;
-  align-items: center;
-  padding-right: 12px;
-  .btn {
-    cursor: pointer;
-    background: url("@/assets/img/tabs_btn3.png") no-repeat center center /
-      100% 100%;
-    margin-right: 5px;
-    color: rgba(180,255,251,.8);
-    font-weight: bold;
-    font-size: 15px;
-    width: 124px;
-    height: 32px;
-    text-align: center;
-    line-height: 32px;
-  }
-}
-</style>

src/views/znxy/charts/l_b/qxjc/Qxjc.vue

@@ -1,79 +0,0 @@
-<template>
-  <div class="bottom">
-    <div class="attrList">
-      <div class="attr" v-for="attr in data.data" :key="attr.id" >
-
-        <div class="val">
-          <template v-if="attr.code == 'FX'">
-            {{attr.value == 0 ? "西南" : attr.value}}
-          </template>
-          <template v-else>
-            {{parseFloat((attr.value * fd).toFixed(2))}}
-          </template>
-          {{attr.unit}}</div>
-        <div class="label">{{attr.name}}</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import {toRefs,ref,onMounted,onBeforeUnmount} from "vue"
-const props = defineProps({
-  data:{
-    type:Object,
-    default:new Object()
-  }
-})
-let fds = [1,0.999,1,0.999,1,0.999,1,0.999,1,0.998,1,0.998,1,0.998,1,0.998];
-const fd = ref(1);
-let i = 0;
-let start = false;
-
-function run(){
-  if(start){
-    fd.value = fds[i % fds.length];
-    i++
-    setTimeout(run ,900)
-  }
-}
-onMounted(()=>{
-  start = true;
-  run();
-})
-onBeforeUnmount(()=>{
-  start = false;
-})
-
-const {data} = toRefs(props)
-
-</script>
-
-<style lang="scss" scoped>
-.bottom {
-  width: 100%;
-  height: calc(100% - 48px);
-  .attrList{
-    margin-top: 20px;
-    display: flex;
-    flex-direction: row;
-    justify-content: start;
-    flex-wrap:wrap;
-    .attr{
-      box-sizing: border-box;
-      height: 50px;
-      width: 24%;
-      margin-top: 10px;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-around;
-      align-items: center;
-      .label{
-        font-weight:normal;
-        color: #939292;
-      }
-    }
-  }
-}
-
-</style>

src/views/znxy/charts/l_c/Bchfxtj.vue

@@ -1,313 +0,0 @@
-<template>
-  <div>
-    <Title title="异常预警">
-      <template v-slot:title-slot>
-      </template>
-    </Title>
-    <div class="tabs yse-events">
-      <div class="lbtn"><div class="text" :key="btnIndex" :class="getActive(1)" @click="change(1)">病害</div></div>
-      <div class="rbtn"><div class="text" :key="btnIndex" :class="getActive(2)" @click="change(2)">虫害</div></div>
-    </div>
-    <div class="sumArea">
-      <div class="left"></div>
-      <template v-if="btnIndex == 1">
-        <div class="content">
-          <div class="label">预计发生病害面积</div>
-          <div><font class="val">6
-          </font><font class="unit">亩</font></div>
-        </div>
-      </template>
-      <template v-if="btnIndex == 2">
-        <div class="content">
-          <div class="label">预计发生虫害面积</div>
-          <div><font class="val">10
-          </font><font class="unit">亩</font></div>
-        </div>
-      </template>
-      <div class="right"></div>
-    </div>
-    <div ref="chartDom"  class="content-box yse-events"></div>
-  </div>
-</template>
-
-
-<script setup>
-
-import {onMounted, ref} from "vue";
-import * as echarts from 'echarts';
-import Title from "../../../components/title";
-
-let chartDom = ref(null);
-let myChart = null;
-const btnIndex = ref(null);
-function getActive(index){
-  return btnIndex.value == index ? "active" : "";
-}
-function change(index) {
-  btnIndex.value = index;
-  switch (index) {
-    case 1:
-      bhInit();
-      break;
-    case 2:
-      chInit();
-      break;
-  }
-}
-  onMounted(async () => {
-    myChart = echarts.init(chartDom.value);
-    change(1)
-  })
-  const options = {
-    tooltip: {
-      trigger: 'item',
-      formatter:function(obj){
-        let {value,unit,per,name} = obj.data;
-        return value +" "+ unit + "<br/>"+per + "%<br/>"+name;
-      },
-    },
-    legend: {
-      orient:"vertical",
-      top: '50%',
-      right: '0%',
-      textStyle:{
-        color: "#fff",
-      },
-      formatter:function(name){
-        let data = options.series[0].data;
-        let obj = data.find((item)=> item.name == name)
-        return obj.name+" "+obj.value + " " + obj.unit + " | "+ obj.per + "%";
-      },
-    },
-    series: [
-      {
-        center:['30%','50%'],
-        name: 'Access From',
-        type: 'pie',
-        radius: ['50', '70'],
-        avoidLabelOverlap: false,
-        itemStyle: {
-          borderColor: '#00000010',
-          borderRadius:3,
-          borderWidth: 2
-        },
-        label: {
-          show: false,
-          position: 'center'
-        },
-        data: []
-      },
-      {
-        center:['30%','50%'],
-        name: 'Access From',
-        type: 'pie',
-        radius: ['30', '40'],
-        avoidLabelOverlap: false,
-        itemStyle: {
-          color:"#847e7e",
-          borderColor: '#00000010',
-          borderRadius:3,
-          borderWidth: 2
-        },
-        label: {
-          formatter:function(obj){
-            let {per,name} = obj.data;
-            return per + "%\n"+name;
-          },
-          show: true,
-          position: 'center'
-        },
-        data: []
-      }
-    ]
-  };
-
-
-  function bhInit() {
-    options.series[0]["name"] = "病害"
-    options.series[1]["name"] = "病害"
-    options.series[0].data = [
-      {
-        name: "无病害",
-        value: 24,
-        unit: "亩",
-        per: "75",
-        itemStyle: {
-          color: "#1FEBD4",
-        }
-      },
-      {
-        name: '有病害',
-        value: 6,
-        unit: "亩",
-        per: "25",
-        itemStyle: {
-          color: "#9DEA4B",
-        }
-      },
-    ];
-    options.series[1].data = [];
-    for(let item of options.series[0].data){
-      options.series[1].data.push({...item,itemStyle:{color:"#3C3F41"}})
-    }
-    myChart.clear();
-    options && myChart.setOption(options);
-  }
-  function chInit() {
-    options.series[0]["name"] = "虫害"
-    options.series[1]["name"] = "虫害"
-    options.series[0].data = [
-      {
-        name: "有虫害",
-        value: 10,
-        unit: "亩",
-        per: "62",
-        itemStyle:{
-          color: "#77ec5d",
-        }
-
-    },
-      {
-        name: '无虫害',
-        value: 20,
-        unit: "亩",
-        per: "19",
-        itemStyle:{
-          color: "#FFA75C",
-        }
-      },
-    ];
-    options.series[1].data = [];
-    for(let item of options.series[0].data){
-      options.series[1].data.push({...item,itemStyle:{color:"#3C3F41"}})
-    }
-
-    myChart.clear();
-    options && myChart.setOption(options);
-  }
-
-</script>
-
-<style lang="scss" scoped>
-
-.tabs{
-  position: absolute;
-  top:25%;
-  width:100%;
-  z-index: 3;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  .text{
-    text-align: center;
-    width: 88px;
-    height: 38px;
-    line-height: 38px;
-    font-size: 14px;
-    font-family: PingFangSC-Regular, PingFang SC;
-    font-weight: 400;
-    color: #B4FFFB;
-  }
-  .lbtn{
-    cursor: pointer;
-    background-image: url(@/assets/img/left_btn.png);
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    width: 88px;
-    height: 38px;
-    .active{
-      width: 88px;
-      height: 38px;
-      background-image: url(@/assets/img/left_btn_active.png);
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
-    }
-  }
-  .btn{
-    cursor: pointer;
-    background-image: url(@/assets/img/center_btn.png);
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    width: 88px;
-    height: 38px;
-    .active{
-      width: 88px;
-      height: 36px;
-      background: rgba(3,44,57,0.8);
-      box-shadow: inset 0px 0px 20px 4px rgba(0,255,240,0.5);
-      border-radius: 0px 0px 0px 0px;
-      border: 1px solid #51E9F0;
-    }
-  }
-  .rbtn{
-    background-image: url(@/assets/img/right_btn.png);
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    width: 88px;
-    height: 38px;
-    cursor: pointer;
-    .active{
-      width: 88px;
-      height: 38px;
-      background-image: url(@/assets/img/right_btn_active.png);
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
-    }
-  }
-}
-.sumArea{
-  position: absolute;
-  top:50%;
-  right: 0;
-  width:40%;
-  z-index: 3;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-  color: #F4F4F4;
-  .left{
-    width: 8px;
-    height: 52px;
-    border: 1px solid #00FFF0;
-    border-right: none;
-  }
-  .right{
-    width: 8px;
-    height: 52px;
-    border: 1px solid #00FFF0;
-    border-left: none;
-  }
-  .content{
-    flex-grow:1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    .label{
-      height: 20px;
-      font-size: 14px;
-      font-family: PingFangSC-Medium, PingFang SC;
-      font-weight: 500;
-      color: #B4FFFB;
-      line-height: 20px;
-      text-align: center;
-    }
-    .val{
-      text-align: left;
-      color: #D0C249;font-size: 18px;font-weight: bold
-    }
-  }
-}
-.content-box{
-  position: absolute;
-  width: 100%;
-  height: calc(80% - 48px - 10px);
-  bottom: 0px;
-}
-
-
-
-</style>
-

src/views/znxy/charts/l_c/qxyj.vue

@@ -1,386 +0,0 @@
-<template>
-  <div>
-    <Title title="气象预警">
-      <template v-slot:title-slot>
-              <div class="slot-right">
-                <!-- <div class="btn yse-events" @click="toPage">气象详情</div> -->
-                <div class="btn yse-events" @click="gybg">果园报告</div>
-              </div>
-      </template>
-    </Title>
-    <div class="content-box">
-      <div class="info">
-        <div class="weather">
-          <div class="temperature">
-            <i :class="['qi-'+nowWeather.iconDay]"></i>
-            <span>{{nowWeather.maxTemp}}℃</span>
-          </div>
-          <div class="txt">
-            <span>{{nowWeather.textDay}}</span><br />
-            <span>湿度:{{nowWeather.humidity}}％</span>
-          </div>
-        </div>
-        <div class="desc">
-          <div
-              class="desc-item"
-              v-for="(item, index) in warningItems"
-              :key="index"
-              v-html="index + 1 + '、'+ item.desc"
-          >
-          </div>
-        </div>
-      </div>
-      <div ref="chartDom" class="charts yse-events"></div>
-    </div>
-  </div>
-</template>
-<script setup>
-import { onMounted, ref, onBeforeUnmount } from "vue";
-import { useStore } from "vuex";
-import * as echarts from "echarts";
-import Title from "../../../components/title";
-import {useRouter} from "vue-router";
-import {dateFormat} from "../../../../utils/date_util"
-import {base_img_url} from "../../../../api/config"
-const router = useRouter();
-
-let emit =defineEmits(["gybg"])
-
-// 在组件或全局监听器中监听自定义事件
-function handleStorageUpdate(e) {
-  curGardenId.value = e.detail;
-  initData();
-}
-// 在组件或全局监听器中监听自定义事件
-window.addEventListener("storageChanged", handleStorageUpdate);
-
-// 组件销毁前移除监听
-onBeforeUnmount(() => {
-  window.removeEventListener("storageChanged", handleStorageUpdate);
-});
-
-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 toPage = () =>{
-  router.push('/weatherDetails')
-}
-const gybg = ()=>{
-  emit("gybg",gybgFilename.value)
-}
-
-const options = {
-  tooltip: {
-    trigger: "axis",
-    triggerOn: "click",
-    backgroundColor: "#CB5D23",
-    borderColor: "#CB5D23",
-    textStyle: {
-      color: "#FFF",
-    },
-    formatter: "{c1}℃-{c0}℃",
-    padding: [2, 5],
-    axisPointer: {
-      type: "none", // 设置为'none'以去除指示线
-    },
-  },
-  grid: {
-    top: "6%",
-    left: "1%",
-    right: "3%",
-    bottom: "5%",
-    containLabel: true,
-  },
-  xAxis: {
-    type: "category",
-    boundaryGap: false,
-    data: [],
-    axisLabel: {
-      margin: 12,
-      color: "#fff",
-    },
-    axisLine: {
-      show: false,
-    },
-    axisTick: {
-      show: false,
-      length: 25,
-      lineStyle: {
-        color: "#ffffff1f",
-      },
-    },
-    splitLine: {
-      show: true,
-      lineStyle: {
-        color: "#ffffff1f",
-      },
-    },
-  },
-  yAxis: [
-    {
-      type: "value",
-      max: 40,
-      axisLabel: {
-        margin: 12,
-        color: "#fff",
-      },
-      splitLine: {
-        show: true,
-        lineStyle: {
-          color: "#ffffff1f",
-        },
-      },
-      axisLine: {
-        lineStyle: {
-          color: "#fff",
-          width: 2,
-        },
-      },
-    },
-  ],
-  series: [
-    {
-      name: "注册总量",
-      type: "line",
-      smooth: true, //是否平滑曲线显示
-      showAllSymbol: true,
-      symbol: "circle",
-      symbolSize: 0,
-      lineStyle: {
-        normal: {
-          color: "rgba(0,0,0,0)", // 线条颜色
-        },
-      },
-      itemStyle: {
-        borderWidth: 6,
-        borderColor: "#F46719",
-      },
-      areaStyle: {
-        normal: {
-          color: new echarts.graphic.LinearGradient(
-              0,
-              0.2,
-              0,
-              1,
-              [
-                {
-                  offset: 0,
-                  color: "#ea0521",
-                },
-                {
-                  offset: 0.4,
-                  color: "rgba(242, 208, 130, 0.5)",
-                },
-                {
-                  offset: 0.6,
-                  color: "rgba(242, 208, 130, 0.2)",
-                },
-                {
-                  offset: 0.8,
-                  color: "rgba(242, 208, 130, 0.1)",
-                },
-                {
-                  offset: 1,
-                  color: "rgba(242, 208, 130, 0.1)",
-                },
-              ],
-              false
-          ),
-        },
-      },
-      data: [],
-    },
-    {
-      name: "注册总量",
-      type: "line",
-      smooth: true, //是否平滑曲线显示
-      showAllSymbol: true,
-      symbol: "circle",
-      symbolSize: 0,
-      lineStyle: {
-        normal: {
-          color: "rgba(0,0,0,0)", // 线条颜色
-        },
-      },
-      itemStyle: {
-        borderWidth: 6,
-        borderColor: "#F46719",
-      },
-      areaStyle: {
-        normal: {
-          color: new echarts.graphic.LinearGradient(
-              0,
-              0.2,
-              0,
-              1,
-              [
-                {
-                  offset: 0,
-                  color: "#F46719",
-                },
-                {
-                  offset: 0.4,
-                  color: "rgba(242, 208, 130, 0.5)",
-                },
-                {
-                  offset: 0.6,
-                  color: "rgba(242, 208, 130, 0.2)",
-                },
-                {
-                  offset: 0.8,
-                  color: "rgba(242, 208, 130, 0.1)",
-                },
-                {
-                  offset: 1,
-                  color: "rgba(242, 208, 130, 0.1)",
-                },
-              ],
-              false
-          ),
-        },
-      },
-      data: [],
-    },
-  ],
-};
-
-const warningItems = ref([]);
-const nowWeather = ref({});
-const gybgFilename = ref({})
-
-const initData = async () => {
-  const { code, data } = await VE_API.znxy.weatherWarning({
-    gardenId: curGardenId.value,
-  });
-  for(let i=0;i < data.warningItems.length;i++){
-    data.warningItems[i].desc = data.warningItems[i].desc.replace("存在的","")
-  }
-  warningItems.value = data.warningItems;
-  getNowWeather(data.data)
-  initTempGybgPdf()
-  options.xAxis.data = data.data.map((item) => formatDate(item.date));
-  options.series[0].data = data.data.map((item) => item.maxTemp);
-  options.series[1].data = data.data.map((item) => item.minTemp);
-  myChart.clear();
-  options && myChart.setOption(options);
-};
-
-const initTempGybgPdf = ()=>{
-  VE_API.temp_garden_report_pdf.get({id:curGardenId.value}).then(({data,code})=>{
-    if(code == 0){
-      gybgFilename.value = data.filename
-    }
-  })
-}
-
-function getNowWeather(data){
-  let now = new Date()
-  let str = dateFormat(now,"YY-mm-dd")
-  nowWeather.value = data.find((item)=> item.date == str)
-  console.log(nowWeather.value)
-}
-
-function formatDate(dateString) {
-  // 确保输入字符串是有效的
-  const regex = /^\d{4}-\d{2}-\d{2}$/;
-  if (!regex.test(dateString)) {
-    return "Invalid date format";
-  }
-
-  const parts = dateString.split("-");
-  const year = parseInt(parts[0], 10);
-  const month = parseInt(parts[1], 10) - 1; // 注意月份是从0开始的
-  const day = parseInt(parts[2], 10);
-
-  // 创建Date对象
-  const date = new Date(year, month, day);
-
-  // 提取月份和日期并格式化输出
-  const monthFormatted = String(date.getMonth() + 1); // 使用padStart来确保总是两位数
-  const dayFormatted = String(date.getDate()).padStart(2, "0");
-
-  return `${monthFormatted}/${dayFormatted}`;
-}
-</script>
-
-<style lang="scss" scoped>
-.slot-right {
-  width: 70%;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: row;
-  justify-content: right;
-  align-items: center;
-  padding-right: 12px;
-  .btn {
-    cursor: pointer;
-    background: url("@/assets/img/tabs_btn3.png") no-repeat center center / 100%
-    100%;
-    margin-right: 5px;
-    color: rgba(180, 255, 251, 0.8);
-    font-weight: bold;
-    font-size: 15px;
-    width: 92px;
-    height: 32px;
-    text-align: center;
-    line-height: 32px;
-  }
-}
-.content-box {
-  width: 100%;
-  height: calc(100% - 48px);
-  padding: 8px 11px;
-  box-sizing: border-box;
-  color: #FFFDFD;
-  .info {
-    display: flex;
-    justify-content: space-between;
-    .weather{
-      display: flex;
-      align-items: center;
-      width: 50%;
-      .temperature{
-        display: flex;
-        align-items: center;
-        margin-right: 10px;
-        i{
-          width: 38px;
-          height: 38px;
-          font-size: 30px;
-        }
-        span{
-          font-weight: bold;
-          font-size: 38px;
-        }
-      }
-    }
-  }
-  .desc {
-    width: 50%;
-    font-size: 12px;
-    height: 45px;
-    font-weight: bold;
-    overflow: hidden;
-    // text-overflow: ellipsis;
-    // display: -webkit-box;
-    // -webkit-box-orient: vertical;
-    // -webkit-line-clamp: 5; /* 设置显示的行数 */
-    background: url("@/assets/img/znxy/qxyj_bg.png") no-repeat center center /
-      100% 100%;
-    box-sizing: border-box;
-    padding: 5px;
-  }
-  .charts {
-    width: 100%;
-    height: calc(100% - 44px);
-  }
-}
-</style>

src/views/znxy/charts/l_c/szts.vue

@@ -1,287 +0,0 @@
-<template>
-  <div>
-    <Title title="生长态势">
-      <template v-slot:title-slot>
-        <div class="slot-right">
-          <div class="btn yse-events">异常复盘</div>
-          <div class="btn yse-events">态势详情</div>
-        </div>
-      </template>
-    </Title>
-    <div class="content-box">
-      <div ref="chartDom" class="charts yse-events"></div>
-      <div class="info">
-        <el-select
-          v-model="value"
-          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>
-        <div class="desc" v-html="desc"></div>
-      </div>
-    </div>
-  </div>
-</template>
-<script setup>
-import { onMounted, ref, onBeforeUnmount } from "vue";
-import { useStore } from "vuex";
-import * as echarts from "echarts";
-import Title from "../../../components/title";
-
-// 在组件或全局监听器中监听自定义事件
-function handleStorageUpdate(e) {
-  curGardenId.value = e.detail;
-  initData();
-}
-// 在组件或全局监听器中监听自定义事件
-window.addEventListener("storageChanged", handleStorageUpdate);
-
-// 组件销毁前移除监听
-onBeforeUnmount(() => {
-  window.removeEventListener("storageChanged", handleStorageUpdate);
-});
-
-const getters = useStore().getters;
-const curPeriodId = ref(getters.userinfo.curPeriodId);
-const curGardenId = ref(getters.userinfo.curGardenId);
-let chartDom = ref(null);
-let myChart = null;
-
-onMounted(() => {
-  myChart = echarts.init(chartDom.value);
-  myChart.setOption(options);
-  initData();
-});
-
-function legendDispose(data) {
-  data = data.replace(/([']*)/g, '')
-  let jsonStr = data.replace(/([a-zA-Z]+):/g, '"$1":');
-  jsonStr = `{${jsonStr.slice(1, -1)}}`;
-  const obj = JSON.parse(jsonStr);
-  return obj;
-}
-
-function formatDate(list, obj, text) {
-  const arr = list.map((item) => {
-    return {
-      ...item,
-      value: obj[item.field],
-      text,
-    };
-  });
-  return arr;
-}
-
-const sData1 = ref([]);
-const sData2 = ref([]);
-const sData3 = ref([]);
-
-const desc = ref('')
-
-const colorList = [
-  "#92e0d2",
-  "#ffacb9",
-  "#ed6d52",
-  "#f9d949",
-  "#90cca3",
-  "#60b177",
-  "#296218",
-];
-
-//数据模型类
-function dataModel(name, radius, mData) {
-  let data = {
-    name: name || "第一层环",
-    type: "pie",
-    z: 3,
-    tooltip: {
-      show: true,
-    },
-    center: ["50%", "38%"],
-    radius: radius || ["24%", "30%"],
-    hoverAnimation: false,
-    clockWise: true,
-    itemStyle: {
-      normal: {
-        color: function (params) {
-          return colorList[params.dataIndex];
-        },
-      },
-    },
-    label: {
-      show: false,
-    },
-    data: mData,
-  };
-  return data;
-}
-
-const options = {
-  tooltip: {
-    trigger: "item",
-    borderColor: "rgba(5,209,199,.5)",
-    backgroundColor: "rgba(47, 87, 97.1)",
-    borderWidth: 1,
-    padding: 0,
-    textStyle: {
-      color: "#fff",
-      fontSize: 11,
-    },
-    formatter: function (parms) {
-      var str = `<div class='v-echarts-tooltip'>
-                    <div>${parms.data.text}</div>
-                    <span>${parms.data.name}: ${parms.percent}%</span>
-                </div>`;
-      return str;
-    },
-  },
-  legend: {
-    icon: "circle",
-    bottom: "0%",
-    textStyle: {
-      color: "#fff",
-    },
-    itemWidth: 8,
-    data:[],
-    // data: ["萌动", "小叶", "红叶", "黄叶", "初绿", "翠绿", "老熟"],
-  },
-  color: colorList,
-  series: [],
-};
-
-const initData = async () => {
-  const { code, data } = await VE_API.znxy.szList({
-    gardenId: curGardenId.value,
-  });
-  desc.value = data[0].text
-
-  const sData1Value = legendDispose(data[0].data);
-  const sData1Date = data[0].createDate.split(" ");
-
-  const sData2Value = legendDispose(data[1].data);
-  const sData2Date = data[1].createDate.split(" ");
-
-  const sData3Value = legendDispose(data[2].data);
-  const sData3Date = data[2].createDate.split(" ");
-
-  const res = await VE_API.znxy.szLegend({
-    periodId: curPeriodId.value,
-  });
-  options.legend.data = res.data.map(item =>{
-    return {
-      name:item.name,
-      itemStyle:{
-        color:item.color
-      }
-    }
-  })
-
-  sData1.value = formatDate(res.data, sData1Value, sData1Date[0]);
-  sData2.value = formatDate(res.data, sData2Value, sData2Date[0]);
-  sData3.value = formatDate(res.data, sData3Value, sData3Date[0]);
-
-  options.series[0] = new dataModel("第三层环", ["40%", "46%"], sData1.value);
-  options.series[1] = new dataModel("第三层环", ["53%", "59%"], sData2.value);
-  options.series[2] = new dataModel("第三层环", ["66%", "72%"], sData3.value);
-
-  myChart.clear();
-  options && myChart.setOption(options);
-};
-
-const value = ref("7");
-
-const optionsList = [
-  {
-    value: "7",
-    label: "7天",
-  },
-  {
-    value: "3",
-    label: "3天",
-  },
-];
-</script>
-
-<style lang="scss" scoped>
-.slot-right {
-  width: 70%;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: row;
-  justify-content: right;
-  align-items: center;
-  padding-right: 12px;
-  .btn {
-    cursor: pointer;
-    background: url("@/assets/img/tabs_btn3.png") no-repeat center center / 100%
-      100%;
-    margin-right: 5px;
-    color: rgba(180, 255, 251, 0.8);
-    font-weight: bold;
-    font-size: 15px;
-    width: 92px;
-    height: 32px;
-    text-align: center;
-    line-height: 32px;
-  }
-}
-.content-box {
-  width: 100%;
-  height: calc(100% - 48px);
-  padding: 8px 11px;
-  box-sizing: border-box;
-  color: #fffdfd;
-  display: flex;
-  justify-content: space-between;
-  .info {
-    width: 50%;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    .select {
-      width: 40%;
-      margin-bottom: 20px;
-      ::v-deep {
-        .el-select__wrapper {
-          background: transparent;
-          border: 1px solid rgba(81, 233, 240, 0.6);
-          box-shadow: none;
-          .el-select__placeholder {
-            color: #b4fffb;
-          }
-          .el-select__caret {
-            color: #b4fffb;
-          }
-        }
-      }
-    }
-  }
-  .desc {
-    width: 100%;
-    height: 100%;
-    font-size: 12px;
-    font-weight: bold;
-    overflow: hidden;
-    line-height: 20px;
-    // text-overflow: ellipsis;
-    // display: -webkit-box;
-    // -webkit-box-orient: vertical;
-    // -webkit-line-clamp: 5; /* 设置显示的行数 */
-    background: url("@/assets/img/znxy/ts_bg.png") no-repeat center center /
-      100% 100%;
-    box-sizing: border-box;
-    padding: 5px;
-  }
-  .charts {
-    width: 50%;
-    height: 100%;
-  }
-}
-</style>

src/views/znxy/charts/l_t/gyqsxx/Gyqsxx.vue

@@ -1,113 +0,0 @@
-<template>
-  <div class="bottom">
-      <div class="img">
-        <img style="width: 100%;height: 100%" :src="base_img_url+'qs.jpg'"/>
-      </div>
-      <div class="info">
-        <div class="field-list">
-          <div class="info-title">{{title}}</div>
-          <div class="line"></div>
-          <div v-for="(item,index) in fieldList" :key="index" class="item">
-            <font class="label">{{item.label}}：</font>{{item.val}}
-          </div>
-        </div>
-      </div>
-  </div>
-</template>
-<script setup>
-import {onMounted, ref} from "vue";
-import {useStore} from "vuex";
-import {base_img_url} from "@/api/config"
-let store = useStore()
-let userinfo = store.getters.userinfo
-console.log(userinfo)
-const title = ref("");
-const fieldList = ref([
-    {label:"果园ID",val:""},
-    {label:"负责人",val:""},
-    {label:"指导专家",val:""},
-    {label:"面积",val:""},
-    {label:"果树数量",val:""},
-    {label:"过往产量",val:""},
-]);
-onMounted(()=> {
-  loadData(userinfo.organId)
-})
-
-async function loadData(organId){
-  VE_API.organ.getOrganExplain({id:organId}).then(({code,data})=>{
-    title.value = data.name;
-    fieldList.value = [
-      {label:"果园ID",val:data.organId},
-      {label:"负责人",val:data.fzr},
-      {label:"指导专家",val:data.zdzj},
-      {label:"面积",val:data.mianji+"亩"},
-      {label:"果树数量",val:data.gssl+"棵"},
-      {label:"过往产量",val:data.gwcl+"斤"},
-    ]
-  })
-}
-</script>
-
-<style lang="scss" scoped>
-.bottom {
-  width: 100%;
-  height: 77%;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  color: #f0f0f0;
-  .img {
-    width: 60%;
-  }
-
-  .info {
-    width: 36%;
-    background: rgba(3, 44, 57, 0.9);
-    border: 1px solid rgba(81, 233, 240, 0.3);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    .field-list {
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-around;
-      align-items: flex-start;
-      height: 100%;
-      background: rgba(3, 44, 57, 0.9);
-      border: 1px solid rgba(81, 233, 240, 0.3);
-      box-sizing: border-box;
-      padding-left: 12px;
-
-      .info-title {
-        width: 100%;
-        height: 22px;
-        font-size: 16px;
-        font-family: PingFangSC-Medium, PingFang SC;
-        font-weight: 500;
-        line-height: 22px;
-      }
-
-      .line {
-        box-sizing: border-box;
-        width: 100%;
-        height: 1px;
-        border: 1px solid rgba(255, 255, 255, 0.3);
-      }
-
-      .label {
-        width: 82px;
-        height: 24px;
-        font-size: 14px;
-        font-weight: 400;
-        color: #B4FFFB;
-        line-height: 24px;
-      }
-    }
-  }
-}
-
-
-</style>

src/views/znxy/charts/l_t/gyxx.vue

@@ -1,196 +0,0 @@
-<template>
-  <div>
-    <Title title="湿度预警">
-      <template v-slot:title-slot>
-      </template>
-    </Title>
-    <div ref="chartDom"  class="content-box yse-events"></div>
-  </div>
-</template>
-<script setup>
-import {onMounted, ref} from "vue";
-import Highcharts from 'highcharts/highstock';
-import HighchartsMore from 'highcharts/highcharts-more';
-import HighchartsDrilldown from 'highcharts/modules/drilldown';
-import Highcharts3D from 'highcharts/highcharts-3d';
-import Highmaps from 'highcharts/modules/map';
-import {useStore} from "vuex";
-import Title from "../../../components/title";
-//初始化Highcharts
-HighchartsMore(Highcharts)
-HighchartsDrilldown(Highcharts);
-Highcharts3D(Highcharts);
-Highmaps(Highcharts);
-
-let state = useStore().state;
-let chartDom = ref(null);
-const mychat = ref(null);
-const unit = ref("")
-const weather7D = ref(null)
-
-const options =  {
-  tooltip:{
-    useHTML:true,
-    backgroundColor:"#00000000",
-    formatter:function(){
-      let {name,unit} = this.series.userOptions;
-      return "<div class='tooltip1'><div>"+this.x+"</div><div>" + name + this.y+ unit +"</div></div>"
-    }
-  },
-  chart: {
-    backgroundColor:"#ffffff00",
-    type: 'areaspline',
-  },
-  title: {
-    text: null
-  },
-  credits: {
-    enabled:false,
-  },
-  xAxis: {
-    gridLineWidth: 1,
-    type: 'datetime',
-    gridLineColor:"#e6e6e630",
-    categories: ['04-28', '04-29', '04-30', '05-01','05-02','05-03', '05-04'],
-    labels: {
-      style: {
-        color: '#fff',
-        fontSize:'11px',
-        fontWeight: 400,
-        fontFamily:'PingFangSC-Regular, PingFang SC'
-      }
-    },
-  },
-  yAxis: {
-    min: 0,
-    title: null,
-    gridLineWidth: 1,
-    gridLineColor:"#e6e6e630",
-    labels: {
-      format:"{value}",
-      style: {
-        color: '#fff',
-        fontSize:'11px',
-        fontWeight: 400,
-        fontFamily:'PingFangSC-Regular, PingFang SC'
-      }
-    },
-  },
-  legend: {
-    /* 图例显示顺序反转
-     * 这是因为堆叠的顺序默认是反转的，可以设置
-     * yAxis.reversedStacks = false 来达到类似的效果
-     */
-    enabled:false,
-    reversed: true,
-    padding:0,
-    itemStyle: {
-      color: '#fff',
-      fontFamily:'ArialMT'
-    }
-  },
-  plotOptions: {
-    areaspline: {
-      marker: {
-        radius: 0
-      },
-      lineWidth: 0,
-      states: {
-        hover: {
-          lineWidth: 0
-        }
-      },
-      threshold: null
-    }
-  },
-  series: []
-}
-
-async function initWeather(){
-  let {code,data} = await VE_API.system.weather();
-  weather7D.value = data.daily;
-}
-
-function init2() {
-  unit.value = "%rh"
-  let data = weather7D.value;
-  let categories = [];
-  let seritsData1 = [];
-  data.forEach((item)=>{
-    categories.push(item.fxDate.substring(5,10))
-    seritsData1.push(parseFloat(item.humidity))
-  })
-  options.xAxis.categories = categories;
-  options.series = [{
-    name:"湿度",
-    unit:"%rh",
-    data: seritsData1,
-    fillColor: {
-      linearGradient: {
-        x1: 0,
-        y1: 0,
-        x2: 0,
-        y2: 1
-      },
-      stops: [
-        [0, '#0c45ee90'], // middle
-        [0.5, '#46dee390'], // middle
-        [1, '#e9af0090'] // end
-      ]
-    },
-  }];
-  mychat.value = new Highcharts.Chart(chartDom.value, options);
-}
-
-onMounted(async () => {
-  await initWeather()
-  init2()
-})
-
-
-</script>
-
-<style lang="scss" scoped>
-
-.content-box{
-  position: absolute;
-  width: 100%;
-  height: calc(100% - 48px - 10px);
-  bottom: 0px;
-}
-
-.title-slot{
-  background-image: url(@/assets/img/tabs_btn3.png);
-  width: 88px;
-  height: 50/16*1rem;
-  border-radius: 0.25rem;
-  font-size:14/16*1rem;
-  font-family: PingFangSC-Medium, PingFang SC;
-  font-weight: 500;
-  color: #FFFFFF;
-  float:right;
-  text-align: center;
-  box-sizing: border-box;
-}
-
-.btn{
-  cursor: pointer;
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: rgba(180,255,251,0.6);
-  width: 88px;
-  height: 28px;
-  .active{
-    width: 88px;
-    height: 28px;
-    background: rgba(3,44,57,0.8);
-    box-shadow: inset 0px 0px 20px 4px rgba(0,255,240,0.5);
-    border-radius: 0px 0px 0px 0px;
-    border: 1px solid #51E9F0;
-  }
-}
-
-</style>

src/views/znxy/charts/l_t/jbqk.vue

@@ -1,370 +0,0 @@
-<template>
-  <div>
-    <Title title="基本情况">
-      <template v-slot:title-slot>
-        <div class="slot-right">
-          <div class="btn yse-events" @click="toGybg">果园报告</div>
-        </div>
-      </template>
-    </Title>
-    <div class="content-box">
-      <div class="box flex">
-        <div class="box-title flex-center">{{ obj1.name }}</div>
-        <div class="box-bar">
-          <div class="progress-bar">
-            <div
-              class="progress-bar-fill"
-              :style="{ width: obj1.persents + '%' }"
-            >
-              <span class="num">{{ obj1.persents + "%" }}</span>
-            </div>
-          </div>
-          <div class="progress-bar-text flex-space-around">
-            <div
-              class="line"
-              v-for="(item, index) in obj1.periodList"
-              :key="index"
-            >
-              {{ item.name }}
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="box flex">
-        <div class="box-title flex-center">{{ obj2.name }}</div>
-        <div class="box-bar">
-          <div class="progress-bar">
-            <div
-              class="progress-bar-fill"
-              :style="{
-                width:
-                  ((obj2.anomalyCount / obj2.totalCount) * 100).toFixed(0) +
-                  '%',
-              }"
-            ></div>
-            <div
-              class="progress-bar-fill-two"
-              :style="{
-                width:
-                  ((obj2.warningCount / obj2.totalCount) * 100).toFixed(0) +
-                  '%',
-              }"
-            ></div>
-          </div>
-          <div class="progress-bar-text">
-            <span>总数木:{{ obj2.totalCount }}棵</span>
-            <span>实际异常:{{ obj2.anomalyCount }}棵</span>
-            <span>风险预警:{{ obj2.warningCount }}棵</span>
-          </div>
-        </div>
-      </div>
-      <div class="box flex">
-        <div class="box-title flex-center">{{ obj3.name }}</div>
-        <div class="box-bar">
-          <div class="progress-bar">
-            <div
-              class="progress-bar-fill"
-              :style="{
-                width:
-                  ((obj3.anomalyCount / obj3.totalCount) * 100).toFixed(0) +
-                  '%',
-              }"
-            ></div>
-            <div
-              class="progress-bar-fill-two"
-              :style="{
-                width:
-                  ((obj3.warningCount / obj3.totalCount) * 100).toFixed(0) +
-                  '%',
-              }"
-            ></div>
-          </div>
-          <div class="progress-bar-text">
-            <span>总数木:{{ obj3.totalCount }}棵</span>
-            <span>实际异常:{{ obj3.anomalyCount }}棵</span>
-            <span>风险预警:{{ obj3.warningCount }}棵</span>
-          </div>
-        </div>
-      </div>
-      <div class="box flex">
-        <div class="box-title flex-center">{{ obj4.name }}</div>
-        <div class="box-bar flex-space-between">
-          <div class="progress-bar">
-            <div
-              class="progress-bar-fill"
-              :style="{
-                width: (obj4.normalCount / obj4.totalCount) * 100 + '%',
-              }"
-            ></div>
-          </div>
-          <span class="progress-bar-text"
-            >{{ obj4.normalCount }}/{{ obj4.totalCount }}(树木)</span
-          >
-        </div>
-      </div>
-    </div>
-  </div>
-
-</template>
-<script setup>
-import { onMounted, reactive, toRefs, ref,onBeforeUnmount } from "vue";
-import {base_img_url3} from "@/api/config.js";
-import { useStore } from "vuex";
-import Title from "../../../components/title";
-
-const emits = defineEmits(["gybg"])
-const getters = useStore().getters;
-const curGardenId = ref(getters.userinfo.curGardenId);
-
-onMounted(() => {
-  initData();
-});
-const infoObj = reactive({
-  obj1: {},
-  obj2: {},
-  obj3: {},
-  obj4: {},
-});
-const { obj1, obj2, obj3, obj4 } = toRefs(infoObj);
-// 在组件或全局监听器中监听自定义事件
-function handleStorageUpdate(e) {
-    curGardenId.value = e.detail
-    initData()
-}
-// 在组件或全局监听器中监听自定义事件
-window.addEventListener('storageChanged', handleStorageUpdate);
-
-onBeforeUnmount(()=>{
-  window.removeEventListener('storageChanged', handleStorageUpdate);
-})
-
-const initData = async () => {
-  const { code, data } = await VE_API.znxy.baseInfo({
-    gardenId: curGardenId.value,
-  });
-  infoObj.obj1 = data.periodProgress;
-  infoObj.obj2 = data.pestRisk;
-  infoObj.obj3 = data.growRisk;
-  infoObj.obj4 = data.normalState;
-};
-
-function toGybg(){
-  emits("gybg")
-}
-
-</script>
-
-<style lang="scss" scoped>
-.flex {
-  display: flex;
-  align-items: center;
-}
-
-.flex-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.flex-space-between {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.flex-space-around {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-}
-
-.slot-right {
-  width: 70%;
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  justify-content: right;
-  align-items: center;
-  padding-right: 12px;
-  .btn {
-    cursor: pointer;
-    background: url("@/assets/img/tabs_btn3.png") no-repeat center center / 100%
-      100%;
-    margin-right: 5px;
-    color: rgba(180, 255, 251, 0.8);
-    font-weight: bold;
-    font-size: 15px;
-    width: 92px;
-    height: 32px;
-    text-align: center;
-    line-height: 32px;
-  }
-}
-
-.content-box {
-  width: 100%;
-  height: calc(100% - 48px);
-  padding: 13px 17px;
-  box-sizing: border-box;
-  .box {
-    width: 100%;
-    height: 25%;
-    .box-title {
-      background-image: url("@/assets/img/znxy/jbqk_bg_1.png");
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
-      width: 92px;
-      height: 40px;
-      font-weight: 800;
-      color: #ed832c;
-      margin-right: 8px;
-    }
-    .box-bar {
-      width: 78%;
-    }
-    .progress-bar {
-      width: 100%;
-      height: 14px;
-      background: rgba(125, 125, 125, 0.5);
-      border-radius: 7px;
-      box-sizing: border-box;
-      padding: 2px 3px;
-      overflow: hidden;
-      &-fill {
-        height: 10px;
-        background-color: #ff963f; /* 进度条颜色 */
-        border-radius: 5px;
-        width: 70%;
-        position: relative;
-        .num {
-          position: absolute;
-          right: -28px;
-          top: -3px;
-          font-weight: 500;
-          font-size: 12px;
-          color: #ffca9f;
-        }
-      }
-      &-text {
-        font-weight: 500;
-        font-size: 13px;
-        color: #f18832;
-        .line {
-          position: relative;
-          &::before {
-            position: absolute;
-            content: "";
-            width: 1px;
-            height: 14px;
-            background: rgb(255, 255, 255, 0.2);
-            top: -14px;
-            left: 60px;
-            z-index: 2;
-          }
-          &:last-child {
-            &::before {
-              width: 0;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.content-box > div.box:nth-of-type(2) {
-  .box-title {
-    background-image: url("@/assets/img/znxy/jbqk_bg_2.png");
-    color: #d48b0e;
-  }
-  .progress-bar {
-    background: rgba(120, 84, 20, 0.5);
-    position: relative;
-    width: 66%;
-    &-fill {
-      background: linear-gradient(90deg, rgba(33, 23, 7, 0.8), #ffa861);
-      width: 15%;
-      z-index: 2;
-      opacity: 0.64;
-    }
-    &-fill-two {
-      background: linear-gradient(90deg, #211707, #ffcd07);
-      width: 39%;
-      position: absolute;
-      z-index: 1;
-      height: 10px;
-      top: 2px;
-      border-radius: 5px;
-      opacity: 0.64;
-    }
-    &-text {
-      color: #ecbe6f;
-      font-weight: 500;
-      font-size: 13px;
-      span {
-        display: inline-block;
-        margin-right: 13px;
-      }
-    }
-  }
-}
-
-.content-box > div.box:nth-of-type(3) {
-  .box-title {
-    background-image: url("@/assets/img/znxy/jbqk_bg_3.png");
-    color: #15c762;
-  }
-  .progress-bar {
-    background: rgba(35, 60, 32, 0.5);
-    position: relative;
-    width: 54%;
-    &-fill {
-      background: linear-gradient(90deg, rgba(18, 39, 28, 0.8), #05e16c);
-      width: 18%;
-      z-index: 2;
-      opacity: 0.64;
-    }
-    &-fill-two {
-      background: linear-gradient(90deg, #101f05, #28bb6e);
-      width: 48%;
-      position: absolute;
-      z-index: 1;
-      height: 10px;
-      top: 2px;
-      border-radius: 5px;
-      opacity: 0.64;
-    }
-    &-text {
-      color: #19b75a;
-      font-weight: 500;
-      font-size: 13px;
-      span {
-        display: inline-block;
-        margin-right: 13px;
-      }
-    }
-  }
-}
-
-.content-box > div.box:nth-of-type(4) {
-  .box-title {
-    background-image: url("@/assets/img/znxy/jbqk_bg_4.png");
-    color: #00fff0;
-  }
-  .box-bar {
-    width: 78%;
-  }
-  .progress-bar {
-    background: rgb(52, 107, 157, 0.5);
-    width: 67%;
-    &-fill {
-      background: linear-gradient(90deg, #4facfe, #00e3fe);
-      width: 80%;
-      opacity: 0.4;
-    }
-    &-text {
-      color: #b4fffb;
-    }
-  }
-}
-</style>

src/views/znxy/charts/r/Nslb.vue

@@ -1,220 +0,0 @@
-<template>
-  <div class="nslb-wrap">
-    <Title title="农事列表">
-      <template v-slot:title-slot>
-        <div class="slot-right">
-          <div class="btn yse-events" @click="addNsRecord()">农事复盘</div>
-        </div>
-      </template>
-    </Title>
-    <div class="chatsTabs yse-events">
-      <div class="lbtn"><div class="text" :class="[status == STATUS_ENUM.STAY_START ? 'active' : '']"  @click="changeTabs(STATUS_ENUM.STAY_START)">待处理</div></div>
-      <div class="btn"><div class="text"  :class="[status == STATUS_ENUM.STAY_VIEW ? 'active' : '']" @click="changeTabs(STATUS_ENUM.STAY_VIEW)">待观察</div></div>
-      <div class="btn"><div class="text"  :class="[status == STATUS_ENUM.STAY_EXECUTE ? 'active' : '']" @click="changeTabs(STATUS_ENUM.STAY_EXECUTE)">待执行</div></div>
-
-      <div class="btn"><div class="text"
-                            :class="[status == STATUS_ENUM.STAY_CONFIRM ||  status == STATUS_ENUM.STAY_CHECK ? 'active' : '']"
-                            @click="changeTabItems(STATUS_ENUM.STAY_CONFIRM)">执行中</div></div>
-
-      <div class="rbtn"><div class="text" :class="[status == STATUS_ENUM.CHENG_XIAO_FEN_XI ? 'active' : '']" @click="changeTabs(STATUS_ENUM.CHENG_XIAO_FEN_XI)">成效分析</div></div>
-    </div>
-    <div class="chatsTabs yse-events border-tabs" v-if="status===3 || status===4">
-      <div class="btn"><div class="text"  :class="[tabItem == STATUS_ENUM.STAY_CONFIRM ? 'active' : '']" @click="changeTabItems(STATUS_ENUM.STAY_CONFIRM)">待确认</div></div>
-      <div class="btn"><div class="text"  :class="[tabItem == STATUS_ENUM.STAY_CHECK ? 'active' : '']" @click="changeTabItems(STATUS_ENUM.STAY_CHECK)">待复核</div></div>
-    </div>
-    <div class="nslb yse-events" :class="{'nslb-zxz':status===STATUS_ENUM.STAY_CONFIRM||status===STATUS_ENUM.STAY_CHECK}">
-      <template v-for="item in tableData" :key="item.id">
-        <NsItem @addNsRecord="addNsRecord" @workerPath="workerPath" @changeData="getDataList"
-                :rowData="item" :status="status" :tabItem="tabItem"></NsItem>
-      </template>
-    </div>
-    <!-- <div class="btn-layout">
-     <button class="yse-events big-btn" type="success" round @click="addNsRecord()">新增农事</button>
-     <button class="yse-events big-btn" type="success" round @click="nsAllot()">分配农事</button>
-    </div> -->
-  </div>
-</template>
-<script setup>
-import {onMounted, ref, reactive, toRefs,onBeforeUnmount} from "vue";
-import {useStore} from "vuex";
-import Title from "../../../components/title";
-import {NS_RECORD_STATUS_ENUM as STATUS_ENUM} from "../../../../api/enum"
-import NsItem from "./components/NsItem";
-import {useRouter} from "vue-router";
-
-const emits = defineEmits(["nsAllot","workerPath"])
-let store = useStore()
-let state = store.state;
-let userInfo = store.getters.userinfo;
-const router = useRouter();
-const tableData = ref([]);
-const params = reactive({
-  name: "",
-  limit: 10,
-  page: 1,
-  total: 0,
-  status: STATUS_ENUM.STAY_START,
-  organId: userInfo.curGardenId
-});
-const { name, limit, page, total , status} = toRefs(params);
-
-onMounted(async () => {
-  getDataList()
-})
-
-function changeTabs(e){
-  status.value = e
-  getDataList()
-}
-
-const tabItem = ref(0);
-function changeTabItems(e){
-  tabItem.value = e
-  status.value = e
-  getDataList()
-}
-// 在组件或全局监听器中监听自定义事件
-function handleStorageUpdate(e) {
-    params.organId = e.detail
-    getDataList()
-}
-// 在组件或全局监听器中监听自定义事件
-window.addEventListener('storageChanged', handleStorageUpdate);
-
-onBeforeUnmount(()=>{
-  window.removeEventListener('storageChanged', handleStorageUpdate);
-})
-
-/**
- * @description: 获取列表数据
- * @param {*}
- * @return {*}
- */
-const getDataList = async () => {
-  const { code, data, count } = await VE_API.nsjy.page(params);
-  if (code == 0 || code == 1) {
-    tableData.value = data;
-    total.value = count;
-  }
-};
-
-function addNsRecord(){
-    router.push({
-      path: "/edit_ns_record",
-      query: { recordId: null },
-    });
-}
-
-function workerPath(e){
-  emits("workerPath",e )
-}
-
-function nsAllot(e){
-  emits("nsAllot",e )
-}
-
-
-</script>
-
-<style lang="scss" scoped>
-@import "../../../../styles/chatsTabs";
-@import "../../../../styles/index";
-
-.nslb-wrap{
-  background-color: #011217;
-  border: 1px solid rgba(81,233,240,0.6);
-  box-sizing: border-box;
-  height: 100%;
-}
-
-.border-tabs{
-  border: 1px solid #035E62;
-  border-radius: 4px;
-  width: 37%;
-  padding: 6px 9px;
-  margin: auto;
-  margin-top: 6px
-}
-
-.nslb{
-  @include wh(auto,calc(100% - 48px - 48px));
-  overflow-y: auto;
-  color: #FFFFFF;
-
-  .yj-icon{
-    .yj-content{
-      background: #3e5d5a;
-      .yj-img{
-        margin-top: 10px;
-        display: flex;
-        justify-content: space-between;
-      }
-      .yj-left{
-        width: 50px;
-        height: 50px;
-        background: cadetblue;
-      }
-      .yj-right{
-        width: 86%;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        border: 1px blue solid;
-        box-sizing: border-box;
-        padding: 4px 10px;
-        .time{
-          color: chartreuse;
-        }
-        .yj-btn{
-          background: red;
-          padding: 3px 6px;
-          border-radius: 4px
-        }
-      }
-    }
-  }
-}
-.nslb-zxz{
-  @include wh(auto,calc(100% - 48px - 106px));
-}
-.btn-layout{
-  @include wh(auto,calc(150px));
-  border-top: 1px solid rgba(81,233,240,0.6);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-around;
-  .big-btn{
-    @include wh(70%, 45px);
-    font-size: 20px;
-    border-radius: 5px;
-    background: #13C4CD;
-    border: 1px solid rgba(81,233,240,1);
-    color: #ffffff;
-  }
-}
-
-.slot-right {
-  width: 70%;
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  justify-content: right;
-  align-items: center;
-  padding-right: 12px;
-  .btn {
-    cursor: pointer;
-    background: url("@/assets/img/tabs_btn3.png") no-repeat center center /
-      100% 100%;
-    margin-right: 5px;
-    color: rgba(180,255,251,.8);
-    font-weight: bold;
-    font-size: 15px;
-    width: 92px;
-    height: 32px;
-    text-align: center;
-    line-height: 32px;
-  }
-}
-
-</style>

src/views/znxy/charts/r/components/NsItem.vue

@@ -1,907 +0,0 @@
-<template>
-  <div class="ns-item">
-    <div class="main-header">
-      <el-tooltip
-        effect="dark"
-        :content="'农事编码:' + rowData.nsCode"
-        placement="top-start"
-      >
-        <span>农事编码:{{ rowData.nsCode }}</span>
-      </el-tooltip>
-    </div>
-    <div class="main">
-      <div class="head">
-        <div class="iconBox">
-          <div class="box-bg">{{rowData.nsTypeNames[0]}}</div>
-        </div>
-        <div class="label">
-          <div class="name">
-            <template v-for="(name, index) in rowData.nsTypeNames" :key="index">
-              <template v-if="index != 0">、</template
-              ><span class="txt">{{ name }}</span>
-            </template>
-            <span>(秋梢期)</span>
-          </div>
-          <template v-if="props.status === STATUS_ENUM.STAY_START">
-            <div class="date_title date_day">
-              <span>计划执行</span>
-              <span>执行范围:{{ rowData.execRange }}天内</span>
-            </div>
-          </template>
-          <template v-else-if="props.status === STATUS_ENUM.STAY_VIEW">
-            <div class="date_title">
-              <span class="day"
-                >已观察<span>{{ rowData.seeDays }}</span
-                >天</span
-              >
-              <span>执行范围:{{ rowData.execRange }}天内</span>
-            </div>
-          </template>
-          <template v-else>
-            <div class="date_title" :style="{ color: colorText() }">
-              <span>{{ text(props.status) }}</span>
-              <span :style="{ color: colorText() }"
-                >执行范围:{{ rowData.execRange }}天内</span
-              >
-            </div>
-          </template>
-          <el-button
-            v-if="
-              props.status === STATUS_ENUM.STAY_START ||
-              props.status === STATUS_ENUM.STAY_VIEW
-            "
-            color="#039DA1"
-            class="edit-btn btn-size"
-            @click="edit()"
-            >编辑</el-button
-          >
-          <el-button
-            v-if="
-              props.status === STATUS_ENUM.STAY_START &&
-              props.status === STATUS_ENUM.STAY_VIEW
-            "
-            color="#FF5358"
-            class="edit-btn btn-size"
-            >立即下发</el-button
-          >
-          <el-button
-            v-if="props.status === STATUS_ENUM.STAY_CHECK"
-            color="#888888"
-            class="edit-btn btn-size"
-            >等待复核</el-button
-          >
-          <el-button
-            v-if="props.status === STATUS_ENUM.CHENG_XIAO_FEN_XI"
-            color="#039DA1"
-            class="edit-btn btn-size"
-            >跟踪下发</el-button
-          >
-          <!--          <el-button color="#00DCC6" size="small" class="yse-events edit-btn2" @click="workerPath()">查看工人轨迹</el-button>-->
-        </div>
-      </div>
-      <div class="nslb-info">
-        <div class="info-title">
-          <span>农事信息</span>
-          <img src="@/assets/img/znxy/nslb_info_icon.png" />
-        </div>
-        <div class="info-cont">
-          <div class="info-img">
-            <img
-              src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
-            />
-            <div class="overlay">
-              <img
-                v-if="
-                  props.status === STATUS_ENUM.STAY_EXECUTE ||
-                  props.status === STATUS_ENUM.STAY_CONFIRM ||
-                  props.status === STATUS_ENUM.STAY_CHECK ||
-                  props.status === STATUS_ENUM.CHENG_XIAO_FEN_XI
-                "
-                src="@/assets/img/znxy/download-icon.png"
-              />
-              <img v-else src="@/assets/img/znxy/edit_icon.png" />
-              <span>农事处方</span>
-            </div>
-          </div>
-          <div class="info-txt">
-            <span>下发依据:{{ rowData.cause }}</span>
-            <div>
-              <span
-                class="green"
-                v-if="
-                  props.status !== STATUS_ENUM.STAY_CONFIRM &&
-                  props.status !== STATUS_ENUM.STAY_CHECK
-                "
-                >复核时间:执行{{ rowData.reviewAfterDay }}天后</span
-              >
-              <span class="green" v-else
-                >复核时间:还剩余
-                <div class="day">2</div>
-                天</span
-              >
-              <span class="blue">指导专家:{{ rowData.expertName }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="table" v-if="props.status !== STATUS_ENUM.STAY_CONFIRM">
-        <div class="thead">
-          <div class="th">功效</div>
-          <div class="th">类型</div>
-          <div class="th">药物配比/倍</div>
-          <div class="th">药物用量/ml</div>
-        </div>
-        <div class="tbody">
-          <div
-            v-for="(item, index) in rowData.drugList"
-            :key="item.drugId"
-            class="row"
-          >
-            <div class="col">药物{{ index + 1 }}</div>
-            <div class="col">
-              <el-popover
-                placement="right-end"
-                :width="200"
-                trigger="hover"
-                :content="item.drugName"
-              >
-                <template #reference>
-                  {{ item.drugName }}
-                </template>
-              </el-popover>
-            </div>
-            <div class="col">1 : {{ item.peibi }}</div>
-            <div class="col">{{ item.yongliang ? item.yongliang  : '-'}}</div>
-          </div>
-        </div>
-      </div>
-      <div class="zxqk" v-if="props.status === STATUS_ENUM.STAY_CONFIRM">
-        <div class="qk-bg">
-          <div class="qk-top">
-            <div class="info-title qk-title qk-title-red">
-              <div class="text-icon">
-                <span>农服执行</span>
-                <el-icon size="20" class="icon"><Warning /></el-icon>
-              </div>
-              <img src="@/assets/img/znxy/nslb_info_icon.png" />
-            </div>
-            <div class="qk-img">
-              <div>
-                <el-avatar
-                  :size="39"
-                  src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
-                />
-              </div>
-              <div class="ns-btn" @click="goGrzxqk">监督工人</div>
-            </div>
-            <ProgressBar :number="70" name="执行动态进度"></ProgressBar>
-          </div>
-          <div class="qk-center">
-            <div class="qk-name"></div>
-            <div class="qk-img">
-              <div>
-                <el-avatar
-                  :size="39"
-                  src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
-                />
-              </div>
-              <div class="ns-btn">查看照片</div>
-            </div>
-            <ProgressBar :number="60" name="上传执行照片进度"></ProgressBar>
-          </div>
-        </div>
-
-        <div class="qk-bottom">
-          <div class="info-title qk-title">
-            <div class="text-icon">
-              <span>农资凭证</span>
-              <el-icon size="20" class="icon" color="#1CE57C"
-                ><CircleCheck
-              /></el-icon>
-            </div>
-            <img src="@/assets/img/znxy/nslb_info_icon.png" />
-          </div>
-          <div class="qkpz">
-            <div class="qkpz-name qkpz-item">农资店点*****店</div>
-            <div class="qkpz-cont qkpz-item">
-              <img src="@/assets/img/znxy/link-icon.png" />
-              <span>药物处方代码：***********</span>
-            </div>
-          </div>
-        </div>
-      </div>
-      <template
-        v-if="
-          props.status === STATUS_ENUM.STAY_CONFIRM ||
-          props.status === STATUS_ENUM.CHENG_XIAO_FEN_XI
-        "
-      >
-        <div class="ns-effect-bg">
-          <div class="info-title">
-            <span>复核对比</span>
-            <img src="@/assets/img/znxy/nslb_info_icon.png" />
-          </div>
-          <div class="image-list">
-            <div class="image-item">
-              <img
-                src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
-              />
-              <img
-                src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
-              />
-            </div>
-            <div class="image-item">
-              <img
-                src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
-              />
-              <img
-                src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
-              />
-            </div>
-            <div class="more">
-              <p>查看更多</p>
-            </div>
-          </div>
-        </div>
-      </template>
-      <template v-if="props.status === STATUS_ENUM.STAY_CONFIRM">
-        <div class="ns-effect-bg">
-          <div class="info-title">
-            <span @click="toPage('analysisDetails')">农事分析</span>
-            <img src="@/assets/img/znxy/nslb_info_icon.png" />
-          </div>
-          <PieChart></PieChart>
-        </div>
-      </template>
-      <template v-if="props.status === STATUS_ENUM.CHENG_XIAO_FEN_XI">
-        <div class="ns-effect-bg">
-          <div class="info-title">
-            <span>序列照片</span>
-            <img src="@/assets/img/znxy/nslb_info_icon.png" />
-          </div>
-          <div class="image-list">
-            <div class="image-item">
-              <img
-                src="https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg"
-              />
-              <img
-                src="https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg"
-              />
-            </div>
-            <div class="image-item">
-              <img
-                src="https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg"
-              />
-              <img
-                src="https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg"
-              />
-            </div>
-            <div class="more">
-              <p>查看更多</p>
-            </div>
-          </div>
-        </div>
-      </template>
-      <template v-if="props.status === STATUS_ENUM.CHENG_XIAO_FEN_XI">
-        <div class="ns-effect-bg">
-          <div class="info-title">
-            <span>指标折线图</span>
-            <img src="@/assets/img/znxy/nslb_info_icon.png" />
-          </div>
-          <Zbbh></Zbbh>
-        </div>
-      </template>
-      <div
-        class="handle-btn"
-        v-if="
-          props.status === STATUS_ENUM.STAY_START ||
-          props.status === STATUS_ENUM.STAY_VIEW
-        "
-      >
-        <el-button
-          @click="remove()"
-          color="#F13640"
-          class="button"
-          v-if="props.status === STATUS_ENUM.STAY_VIEW"
-          >删除农事</el-button
-        >
-        <el-button
-          @click="updateStatus(STATUS_ENUM.STAY_VIEW)"
-          color="#40B34D"
-          class="button"
-          v-else-if="props.status === STATUS_ENUM.STAY_START"
-          >继续观察</el-button
-        >
-        <el-button
-          color="#039DA1"
-          @click="updateStatus(STATUS_ENUM.STAY_EXECUTE)"
-          class="button"
-          >立即下发</el-button
-        >
-      </div>
-      <div class="handle-btn" v-if="props.status === STATUS_ENUM.STAY_EXECUTE">
-        <el-button color="#FE762C" class="button" @click="handleFeedback"
-          >意见反馈</el-button
-        >
-        <el-button
-          color="#039DA1"
-          @click="updateStatus(STATUS_ENUM.STAY_CONFIRM)"
-          class="button"
-          >开始执行</el-button
-        >
-      </div>
-      <div class="handle-btn" v-if="props.status === STATUS_ENUM.STAY_CONFIRM">
-        <el-button color="#039DA1" @click="goCheck()" class="btn"
-          >去确认</el-button
-        >
-      </div>
-    </div>
-  </div>
-  <!-- 意见反馈 -->
-  <el-dialog
-    class="v-dialog"
-    v-model="dialogVisibleShow"
-    width="550"
-    :show-close="false"
-  >
-    <template #header>
-      <div class="dialog-header">
-        <div class="">意见反馈</div>
-        <el-icon @click="dialogVisibleShow = false" class="close-icon" color="#00FFF0" size="20px"><CircleCloseFilled /></el-icon>
-      </div>
-    </template>
-    <div class="dialog-body">
-      <el-input
-        v-model="textarea"
-        :rows="4"
-        type="textarea"
-        placeholder="请输入农事反馈意见.."
-      />
-    </div>
-    <template #footer>
-      <div class="dialog-footer">
-        <div class="btn cancel-btn" @click="dialogVisibleShow = false">
-          取消
-        </div>
-        <div class="btn confirm-btn" @click="dialogVisibleShow = false">
-          确认
-        </div>
-      </div>
-    </template>
-  </el-dialog>
-  <confirm :dialogVisibleShow="confirmDialogVisibleShow"
-           title="警告" msg="是否继续执行这个操作？" @confirm="updateConfirmFun" @close="close"
-  ></confirm>
-  <confirm :dialogVisibleShow="removeDialogVisibleShow"
-           title="警告" msg="是否确定删除？" @confirm="removeConfirmFun" @close="close"
-  ></confirm>
-</template>
-
-<script setup>
-import { useRoute, useRouter } from "vue-router";
-import { NS_RECORD_STATUS_ENUM as STATUS_ENUM } from "@/api/enum";
-import { dateFormat } from "../../../../../utils/date_util";
-import Zbbh from "../components/Zbbh";
-import PieChart from "../components/PieChart";
-import ProgressBar from "../components/ProgressBar";
-import { ElMessage, ElMessageBox } from "element-plus";
-import confirm from "@/components/confirm";
-import { ref } from "vue";
-
-const emits = defineEmits(["addNsRecord", "workerPath", "changeData"]);
-const router = useRouter();
-const route = useRoute();
-const props = defineProps({
-  rowData: {
-    type: Object,
-    required: true,
-  },
-  status: {
-    type: Number,
-    required: false,
-  },
-  tabItem: {
-    type: Number,
-    required: false,
-  },
-});
-
-// 意见反馈
-const dialogVisibleShow = ref(false);
-const confirmDialogVisibleShow = ref(false)
-const removeDialogVisibleShow = ref(false)
-const currentStatus = ref(0)
-const textarea = ref("");
-const handleFeedback = () => {
-  dialogVisibleShow.value = true;
-};
-
-function colorText() {
-  const status = props.status;
-  let color = "#FEEC51";
-  if (
-      status === STATUS_ENUM.STAY_CONFIRM ||
-      status === STATUS_ENUM.STAY_CHECK
-  ) {
-    color = "#F79BD3";
-  }
-  if (status === STATUS_ENUM.CHENG_XIAO_FEN_XI) {
-    color = "#8CD370";
-  }
-  return color;
-}
-
-function text(status) {
-  let txt = "待执行";
-  if (status === STATUS_ENUM.STAY_CONFIRM) {
-    txt = "待确认";
-  }
-  if (status === STATUS_ENUM.STAY_CHECK) {
-    txt = "待复核";
-  }
-  if (status === STATUS_ENUM.CHENG_XIAO_FEN_XI) {
-    txt = "复核结束";
-  }
-  return txt;
-}
-
-function edit() {
-  router.push({
-    path: "/edit_ns_record",
-    query: { recordId: props.rowData.id },
-  });
-}
-function workerPath() {
-  emits("workerPath", props.rowData);
-}
-
-function goCheck() {
-  router.push({
-    path: "/checkComparison",
-    query: { recordId: props.rowData.id },
-  });
-}
-
-function goGrzxqk() {
-  router.push({
-    path: "/grzxqk",
-    query: { recordId: props.rowData.id },
-  });
-}
-
-const toPage = (path) =>{
-  router.push('/' + path)
-}
-
-/**
- * 更新状态
- * @param status
- */
-function updateStatus(status) {
-  confirmDialogVisibleShow.value = true
-  currentStatus.value = status
-}
-function updateConfirmFun(){
-  VE_API.nsjy.updateStatus({ id: props.rowData.id, status: currentStatus.value })
-      .then(({ code }) => {
-        if (code == 0) {
-          ElMessage({
-            message: "更新到" + text(status) + "！",
-            type: "success",
-          });
-          setTimeout(() => {
-            emits("changeData");
-          }, 500);
-        }
-      });
-}
-function close(){
-  confirmDialogVisibleShow.value = false;
-  removeDialogVisibleShow.value = false;
-}
-
-const remove = () => {
-  removeDialogVisibleShow.value = true
-};
-function removeConfirmFun(){
-  VE_API.nsjy.remove({ id: props.rowData.id });
-  ElMessage({
-    type: "success",
-    message: "删除成功！",
-  });
-  setTimeout(() => {
-    emits("changeData");
-  }, 500);
-}
-</script>
-
-<style lang="scss" scoped>
-@import "table";
-@import "../../../../../styles/index";
-.v-dialog {
-  .dialog-body {
-    ::v-deep {
-      .el-textarea {
-        --el-input-placeholder-color: rgba(11, 202, 245,.3);
-      }
-      .el-textarea__inner {
-        background: rgba(12, 38, 46, 1);
-        box-shadow:none
-      }
-    }
-  }
-  .dialog-footer {
-    color: #fff;
-    display: flex;
-    justify-content: flex-end;
-    border-top: 1px solid rgba(6, 160, 194, 0.5);
-    padding: 12px;
-    .btn {
-      padding: 8px 23px;
-      font-weight: bold;
-      cursor: pointer;
-    }
-    .cancel-btn {
-      background: #052b33;
-      border-radius: 5px;
-      border: 1px solid #00fff0;
-    }
-    .confirm-btn {
-      background: url("@/assets/img/znxy/ns_btn.png") no-repeat center center /
-        100% 100%;
-      margin-left: 10px;
-    }
-  }
-}
-.ns-item {
-  margin-top: 22px;
-  .main-header {
-    background: #47fff5;
-    color: #000;
-    width: 45%;
-    border-top-right-radius: 14px;
-    padding: 2px 6px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .main {
-    @include wh(99.8%, auto);
-    background: #033c49;
-    // border: 1px solid rgba(81, 233, 240, 0.6);
-    padding: 9px;
-    box-sizing: border-box;
-    .head {
-      @include wh(calc(100%), 61px);
-      .iconBox {
-        float: left;
-        @include wh(61px, 61px);
-        background: #023d3c;
-        border: 1px solid rgba(2, 240, 235, 0.67);
-        padding: 2px 4px;
-        box-sizing: border-box;
-        .box-bg{
-          width: 100%;
-          height: 100%;
-          padding: 5px 10px;
-          font-size: 19px;
-          box-sizing: border-box;
-          font-family: 'HANTI', sans-serif;
-          background: url('@/assets/img/znxy/jd_ns_bg.png') no-repeat center center /100% 100%;
-        }
-      }
-      .label {
-        float: right;
-        @include wh(calc(100% - 61px - 6px), 61px);
-        @include ossBg("after_bg1.png");
-        position: relative;
-        .name {
-          @include wh(auto, 16px);
-          @include LeftTop(26px, 10px);
-          font-weight: 500;
-          font-size: 15px;
-          color: #ffffff;
-          .txt {
-            color: #29e6dd;
-          }
-        }
-        .date_title {
-          @include wh(auto, 12px);
-          @include LeftTop(25px, 33px);
-          font-weight: normal;
-          font-size: 14px;
-          color: #fe3d4f;
-          .day {
-            span {
-              color: #fff;
-              margin-right: 0;
-            }
-          }
-          span {
-            margin-right: 10px;
-          }
-        }
-        .date_day {
-          color: #de9014;
-        }
-        .edit-btn {
-          position: absolute;
-          top: 14px;
-          right: 18px;
-          color: #ffffff;
-          width: 71px;
-        }
-        .edit-btn2 {
-          position: absolute;
-          top: 10px;
-          right: 70px;
-          color: #ffffff;
-        }
-        .btn-size {
-          padding: 8px 6px;
-        }
-      }
-    }
-    .info-title {
-      font-weight: normal;
-      font-size: 15px;
-      color: #f1ffff;
-      width: 100%;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 10px;
-      box-sizing: border-box;
-      .text-icon {
-        display: flex;
-        align-items: center;
-      }
-      span {
-        margin-left: 15px;
-        position: relative;
-        &::before {
-          content: "";
-          position: absolute;
-          left: -12px;
-          top: 7px;
-          width: 8px;
-          height: 8px;
-          background: #01f9ff;
-          border-radius: 50%;
-        }
-      }
-      img {
-        margin-top: -6px;
-        width: 72%;
-      }
-    }
-    .qk-title {
-      padding: 0 0 8px 0;
-      span {
-        margin-right: 4px;
-      }
-    }
-    .qk-title-red {
-      color: #ff2e51;
-      &::before {
-        background: #ff2f52;
-      }
-    }
-    .nslb-info {
-      background: url("@/assets/img/znxy/nslb_info_bg.png") no-repeat center
-        center / 100% 100%;
-      width: 100%;
-      height: 103px;
-      margin: 8px 0 4px 0;
-      box-sizing: border-box;
-
-      .info-cont {
-        display: flex;
-        box-sizing: border-box;
-        padding-left: 15px;
-        .info-img {
-          border-radius: 2px;
-          border: 1px solid rgba(81, 233, 240, 0.49);
-          margin-right: 7px;
-          position: relative;
-          img {
-            width: 73px;
-            height: 51px;
-          }
-          .overlay {
-            position: absolute;
-            bottom: 0;
-            width: 100%;
-            background: rgba(3, 25, 27, 0.62);
-            border-radius: 2px;
-            font-weight: bold;
-            font-size: 11px;
-            color: #21f9ff;
-            text-align: center;
-            cursor: pointer;
-            img {
-              width: 10px;
-              height: 10px;
-              margin-right: 2px;
-            }
-          }
-        }
-        .info-txt {
-          font-weight: bold;
-          color: #ffffff;
-          display: flex;
-          flex-direction: column;
-          justify-content: space-between;
-          span {
-            position: relative;
-            margin-left: 20px;
-            &::before {
-              content: "";
-              position: absolute;
-              left: -13px;
-              top: 7px;
-              width: 6px; /* 设置正方形的宽度 */
-              height: 6px; /* 设置正方形的高度 */
-              background-color: #ff9b65; /* 设置背景颜色 */
-              transform: rotate(45deg); /* 旋转45度 */
-              margin-right: 4px;
-              transform-origin: center; /* 旋转的基准点为中心 */
-            }
-          }
-          .green {
-            margin-right: 8px;
-            .day {
-              color: #ff0000;
-              display: inline-block;
-            }
-            &::before {
-              background-color: #29e686; /* 设置背景颜色 */
-            }
-          }
-          .blue {
-            &::before {
-              background-color: #21fdf6; /* 设置背景颜色 */
-            }
-          }
-        }
-      }
-    }
-    .zxqk {
-      .qk-bg {
-        background: url("@/assets/img/znxy/nslb_info_bg.png") no-repeat center
-          center / 100% 100%;
-        width: 100%;
-        padding: 10px 15px;
-        box-sizing: border-box;
-      }
-      .qk-name {
-        margin-bottom: 10px;
-        color: #ff2e51;
-        display: flex;
-        align-items: center;
-        .icon {
-          margin-left: 4px;
-        }
-        .diamond {
-          width: 8px;
-          height: 8px;
-          background: #ff2f52;
-          border-radius: 50%;
-          margin-right: 5px;
-        }
-      }
-      .qk-bottom {
-        margin-top: 4px;
-        background: url("@/assets/img/znxy/nslb_info_bg.png") no-repeat center
-          center / 100% 100%;
-        width: 100%;
-        padding: 10px 15px;
-        box-sizing: border-box;
-        .qk-name {
-          color: #fff;
-        }
-        .diamond {
-          background-color: #01f9ff; /* 设置背景颜色 */
-        }
-        .qkpz {
-          .qkpz-item {
-            padding: 8px 6px;
-            background: url("@/assets/img/znxy/text_bg.png") no-repeat center
-              center / 100% 100%;
-            width: 100%;
-            font-weight: 800;
-            color: #85c2c6;
-            box-sizing: border-box;
-            margin-bottom: 2px;
-          }
-          .qkpz-cont {
-            color: #12fcff;
-            img {
-              width: 12px;
-              height: 12px;
-              margin-right: 5px;
-            }
-          }
-        }
-      }
-      .qk-img {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        .btn-size {
-          color: #ffffff;
-        }
-      }
-    }
-    .ns-btn {
-      background: url("@/assets/img/znxy/ns_btn_bg.png") no-repeat center center /
-        100% 100%;
-      padding: 6px 10px;
-    cursor: pointer;
-    }
-    .ns-effect-bg {
-      background: url("@/assets/img/znxy/nslb_info_bg.png") no-repeat center
-        center / 100% 100%;
-      width: 100%;
-      box-sizing: border-box;
-      margin-top: 4px;
-    }
-    .image-list {
-      display: flex;
-      width: 100%;
-      padding: 0 8px 8px 13px;
-      box-sizing: border-box;
-      justify-content: space-between;
-      position: relative;
-      .image-item {
-        border: 1px solid rgba(81, 233, 240, 0.6);
-        width: 47.5%;
-        display: flex;
-        justify-content: space-between;
-        padding: 3px;
-        border-radius: 4px;
-        img {
-          width: 49%;
-          height: 85px;
-          border-radius: 4px;
-        }
-      }
-      .more {
-        position: absolute;
-        top: 15px;
-        right: -10px;
-        width: 33px;
-        height: 60px;
-        background: url(@/assets/img/more_bg.png) no-repeat;
-        color: #000;
-        text-align: center;
-        writing-mode: vertical-rl;
-        cursor: pointer;
-        p {
-          margin-right: 4px;
-          font-weight: 800;
-          font-size: 12px;
-        }
-      }
-    }
-    .handle-btn {
-      display: flex;
-      justify-content: space-between;
-      width: 90%;
-      margin: 15px auto 6px auto;
-      .button {
-        width: 45%;
-        color: #ffffff;
-      }
-      .btn {
-        width: 50%;
-        margin: auto;
-        color: #ffffff;
-      }
-    }
-  }
-}
-.ns-item:first-child {
-  margin-top: 10px;
-}
-</style>

src/views/znxy/charts/r/components/PieChart.vue

@@ -1,291 +0,0 @@
-<template>
-  <div class="box-pie">
-    <img src="@/assets/img/znxy/pie_bg.png" alt="" />
-    <div ref="chartDom" class="content-box"></div>
-  </div>
-</template>
-
-<script setup>
-import { onMounted, ref } from "vue";
-import * as echarts from "echarts";
-
-let chartDom = ref(null);
-let myChart = null;
-var dataList = [13, 21, 39, 14, 22];
-var nameList = ["货船", "杂船", "渔船", "集装箱船", "其他"];
-var colorList = [
-  "#7b55d8",
-  "#366ccc",
-  "#46b1ce",
-  "#6fd8c9",
-  "#efc97b",
-  "#374e90",
-  "#77a4ef",
-  "#ef9f77",
-  "#89e645",
-  "#e67645",
-];
-var lengthList = [];
-var seriesList = [];
-var valList = [];
-onMounted(async () => {
-  nameList.forEach(function (item) {
-    lengthList.push({ name: item.toString(), icon: "circle" });
-  });
-  var totalNum = dataList.reduce((prev, curr) => {
-    return prev + curr;
-  });
-  dataList.forEach(function (item, index) {
-    var obj = {
-      value: Math.floor((((item / totalNum) * 10000) / 10000) * 100),
-      value2: item,
-    };
-    if (index == dataList.length - 1) {
-      var total = valList.reduce((prev, curr) => {
-        return prev + curr;
-      });
-      obj.value = Number((100 - total).toFixed(2));
-      valList.push(obj.value);
-    } else {
-      valList.push(obj.value);
-    }
-    seriesList.push({
-      name: nameList[index],
-      type: "bar",
-      data: [obj],
-      stack: "one",
-      coordinateSystem: "polar",
-      roundCap: true,
-      zlevel: 20,
-      itemStyle: {
-        normal: {
-          color: colorList[index],
-          borderWidth: 2,
-          borderColor: colorList[index],
-        },
-      },
-    });
-  });
-  myChart = echarts.init(chartDom.value);
-  myChart.setOption(options);
-  // bhInit()
-});
-const valueModal = [
-  1, 1, 1, 1, 1, 1, 1, 1, 1, 1.01, 1, 1, 1, 1, 1, 1, 1, 1.01, 1, 1, 1, 1, 1, 1,
-];
-
-// 数据模型
-function pieValue(arr, name, color) {
-  const list = arr.map((item) => {
-    const colorStr = item > 1 ? color : "transparent";
-    return {
-      value: item,
-      name,
-      itemStyle: { color: colorStr },
-    };
-  });
-  return list;
-}
-
-// 色块数据模型
-function pieDataModal(name, radius, data) {
-  return {
-    name: name,
-    type: "pie",
-    radius: radius,
-    center: ["50%", "50%"],
-    hoverAnimation: false,
-    label: {
-      normal: {
-        show: false,
-      },
-      emphasis: {
-        show: false,
-      },
-    },
-    zlevel: 1,
-    labelLine: {
-      normal: {
-        show: false,
-      },
-    },
-    data: data,
-  };
-}
-
-//环形分割线模型
-function gaugeModal(radius) {
-  return {
-    name: "分割线",
-    type: "gauge",
-    radius, //12
-    clockwise: true,
-    startAngle: "90",
-    center: ["50%", "50%"],
-    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, //2
-    hoverAnimation: false,
-    center: ["50%", "50%"],
-    cursor: "auto",
-    itemStyle: {
-      color: {
-        type: "radial",
-        x: 0.5,
-        y: 0.5,
-        r: 0.5,
-        colorStops: [
-          {
-            offset: 0,
-            color: "transparent",
-          },
-          {
-            offset: 0.96,
-            color: "transparent",
-          },
-          {
-            offset: 1,
-            color: borderColor,
-          },
-        ],
-      },
-    },
-    data: [
-      {
-        value: 100,
-      },
-    ],
-    labelLine: {
-      show: false,
-    },
-    zlevel: 3,
-  };
-}
-
-const options = {
-  //   tooltip: {
-  //     trigger: "item",
-  //   },
-  //   legend: {
-  //     top: "-1%",
-  //     right: "0",
-  //     icon: "rich",
-  //     itemWidth: 24,
-  //     itemHeight: 9,
-  //     textStyle: {
-  //       color: "#fff",
-  //       fontSize: "11px",
-  //     },
-  //     data: ["病虫预警", "气象预警"],
-  //   },
-  series: [
-    //第一层色块数据
-    pieDataModal(
-      "红色",
-      ["37.5%", "51%"], //13.5
-      pieValue(valueModal, "病虫预警", "#FF3000")
-    ),
-    //第一层环形分割线
-    gaugeModal("63%"), //12
-    // 第一层环形边框
-    pieBorder(["50%", "52%"], "#ea3323f0"), //2
-    //第二层色块数据
-    pieDataModal(
-      "绿色",
-      ["51%", "64.5%"],
-      pieValue(valueModal, "气象预警", "#05E505")
-    ),
-    //第二层环形分割线
-    gaugeModal("77%"),
-    // 第二层环形边框
-    pieBorder(["64%", "66%"], "#51b247f0"),
-    //第三层色块数据
-    pieDataModal(
-      "橙色",
-      ["64.5%", "78%"],
-      pieValue(valueModal, "生长预警", "#FF8500")
-    ),
-    //第三层环形分割线
-    gaugeModal("90%"),
-    // 第三层环形边框
-    pieBorder(["77%", "79%"], "#FF8500f0"),
-    {
-      angleAxis: {
-        max: 100,
-        clockwise: true, // 逆时针
-        show: false,
-      },
-      radiusAxis: {
-        type: "category",
-        show: true,
-        axisLabel: {
-          show: false,
-        },
-        axisLine: {
-          show: false,
-        },
-        axisTick: {
-          show: false,
-        },
-      },
-      polar: {
-        center: ["78%", "91.5%"],
-        radius: ["50%", "50%"],
-      },
-      zlevel: 1,
-      series: seriesList,
-    },
-  ],
-};
-function bhInit() {
-  myChart.clear();
-  options && myChart.setOption(options);
-}
-</script>
-
-<style lang="scss" scoped>
-.box-pie {
-  position: relative;
-  img {
-    position: absolute;
-    left: 34.5%;
-    top: 31.6%;
-  }
-  .content-box {
-    width: 100%;
-    height: 350px;
-  }
-}
-</style>

src/views/znxy/charts/r/components/ProgressBar.vue

@@ -1,77 +0,0 @@
-<template>
-  <div class="progress">
-    <div class="progress-name">
-      <span>{{ name }}</span>
-    </div>
-    <!-- <div class="progress-cont"> -->
-      <div class="progress-bar">
-        <div
-          class="progress-bar-fill"
-          :style="{ width: number + '%' }"
-          :class="{ max: number === 100 }"
-        ></div>
-      </div>
-      <div class="num">{{ number + "%" }}</div>
-    <!-- </div> -->
-  </div>
-</template>
-
-<script setup>
-const props = defineProps({
-  number: {
-    type: Number,
-    required: true,
-  },
-  name: {
-    type: String,
-    required: true,
-  },
-});
-</script>
-
-<style scoped lang="scss">
-.progress {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  background: #053441;
-  // border: 1px solid #146A7D;
-  padding: 5px 0 5px 5px;
-  box-sizing: border-box;
-  color: #00fff0;
-  font-size: 12px;
-}
-.progress-name {
-  width: 40%;
-}
-.num{
-  margin-left: 4px;
-  font-size: 11px;
-}
-.progress-cont{
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.progress-bar {
-  width: 100%;
-  background: url("@/assets/img/progress_bg.png") no-repeat center center / 100% 100%;
-  box-sizing: border-box;
-  padding: 3px 4px 3px 4px;
-  overflow: hidden;
-}
-
-.progress-bar-fill {
-  height: 10px;
-  background: linear-gradient(
-    95deg,
-    rgba(7, 161, 163, 0.98),
-    rgba(255, 255, 255, 0.98)
-  );
-  border-radius: 10px 0 0 10px; /* 左侧圆角 */
-}
-.max {
-  border-radius: 10px;
-}
-</style>

src/views/znxy/charts/r/components/Zbbh.vue

@@ -1,210 +0,0 @@
-<template>
-    <div ref="chartDom" class="content-box yse-events"></div>
-</template>
-
-<script setup>
-import { onMounted, ref } from 'vue';
-import * as echarts from 'echarts';
-
-let chartDom = ref(null);
-let myChart = null;
-onMounted(async () => {
-  myChart = echarts.init(chartDom.value);
-  myChart.setOption(options);
-  // bhInit()
-});
-const colors = [
-  {
-    offset: 0.25,
-    color: "rgba(218, 60, 72, 0.3)",
-  },
-  {
-    offset: 0.5,
-    color: "rgba(44, 220, 105, 0.4)",
-  },
-  {
-    offset: 0.75,
-    color: "rgba(10, 196, 74, 0.4)",
-  },
-  {
-    offset: 1,
-    color: "rgba(10, 196, 74, 0.3)",
-  },
-];
-const options = {
-  tooltip: {
-    trigger: "axis",
-    backgroundColor: "#00848C",
-    borderColor:'#00848C',
-    textStyle: {
-      color: "#FFF",
-    },
-    // formatter: '{b0}',
-    formatter: '{c0}',
-    padding: [2,5],
-    axisPointer: {
-      type: "shadow",
-      shadowStyle: {
-        color: {
-          type: "linear",
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [
-            { offset: 0, color: "rgba(61, 215, 227, 0)" },
-            { offset: 0.5, color: "rgba(61, 215, 227, 0.5)" },
-            { offset: 1, color: "rgba(61, 215, 227, 0)" },
-          ],
-          global: false,
-        },
-      },
-    },
-  },
-  legend: {
-    data: ["预测态势","实际态势"],
-    //图例文字样式
-    textStyle: {
-      color: "#fff",
-      fontSize: "11px",
-    },
-    align: "left",
-    right: "2%",
-    top: "-2%",
-    icon:'rect',
-    itemGap: 5,
-    itemWidth: 20,
-    itemHeight: 8,
-  },
-  grid: {
-    top: "10%",
-    left: "4%",
-    right: "0%",
-    bottom: "12%",
-    containLabel: true,
-  },
-  xAxis: [
-    {
-      type: "category",
-      data: ['1/1','2/1','3/1','4/1','5/1'],
-      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: "执行日",
-      nameLocation:'start',
-      nameTextStyle: {
-        color: "#fff",
-        fontSize:'11',
-        padding: [10, 0, 0, 10]
-      },
-      type: "value",
-      max: 100,
-      axisTick: {
-        show: false,
-      },
-      axisLabel: {
-        textStyle: {
-          color: "#fff",
-        },
-      },
-      // 分割线
-      splitLine: {
-        show: true,
-        lineStyle: {
-          color: "#ffffff1f",
-        },
-      },
-    },
-    {
-      type: "value",
-      show: false,
-      max: 100,
-      name: "复核时间",
-      nameLocation:'start',
-      nameTextStyle: {
-        color: "#fff",
-        fontSize:'11',
-        padding: [10, 15, 0, 0]
-      },
-    },
-  ],
-  series: [
-    {
-      name: "预测态势",
-      type: "line",
-      data: [20, 30, 40,30,10],
-      symbol: "none",
-      itemStyle: {
-        color: "rgba(10, 196, 74, 0.5)",
-        borderWidth: 1,
-      },
-      yAxisIndex: 0,
-      areaStyle: {
-        normal: {
-          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, colors, false),
-        },
-      },
-      lineStyle: {
-        width: 0,
-      },
-    },
-    {
-      name: "实际态势",
-      type: "line",
-      data: [10,20,30,40,20],
-      symbol: "emptyCircle",
-      symbolSize: 3,
-      showSymbol: false,
-      itemStyle: {
-        color: "red",
-      },
-      yAxisIndex: 1,
-      lineStyle: {
-        width: 1,
-        color: "#FF5358", //改变折线颜色
-        type: "dashed",
-      },
-    },
-  ],
-};
- function bhInit() {
-    // options.series[0].data = data1
-
-    myChart.clear();
-    options && myChart.setOption(options);
-  }
-</script>
-
-<style lang="scss" scoped>
-.content-box{
-  width: 100%;
-  height: 210px;
-}
-</style>

src/views/znxy/charts/r/components/table.scss

@@ -1,110 +0,0 @@
-@import "../../../../../styles/index.scss";
-.table{
-  @include wh(calc(100%),auto);
-  border: 1px solid #16494f;
-  border-radius: 5px;
-  box-sizing: border-box;
-  background: #000;
-  .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 #009a8c94;
-    box-sizing: border-box;
-    color: rgba(255, 255, 255, .7);
-    background: #072c31;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-    .th{
-      // color: #00DCC6;
-      @include wh(calc(33% - 20px),rpx(50));
-      line-height: rpx(50);
-      text-align: center;
-      border-right: 1px solid #009a8c94;
-      box-sizing: border-box;
-      border-top: 1px solid #009a8c;
-    }
-    .th:first-child{
-      @include wh(calc(25% - 20px),rpx(50));
-      border-top-left-radius: 5px;
-      border-left: 1px solid #009a8c
-    }
-    .th:last-child{
-      border-top-right-radius: 5px;
-      border-right: 1px solid #009a8c;
-    }
-    .notopborder{
-      border-top: none;
-    }
-  }
-  .tbody{
-    @include wh(100%,auto);
-    font-size: 14px;
-    color: #2DF3FF;
-    opacity: 0.72;
-    .row{
-      display: flex;
-      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 #009a8c94;
-        text-align: center;
-        box-sizing: border-box;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-        .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;
-        }
-      }
-      .col:first-child{
-        @include wh(calc(25% - 20px),rpx(60));
-        border-left: 1px solid #009a8c;
-      }
-      .col:last-child{
-        border-right: 1px solid #009a8c;
-      }
-      .notopborder{
-        border-top: none;
-      }
-    }
-    .row:last-child{
-      border-bottom: 1px 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/znxy/charts/r_b/Chfx.vue

@@ -1,196 +0,0 @@
-<template>
-  <div >
-    <Title title="虫害风险">
-      <template v-slot:title-slot>
-        <div class="slot-unit">单位：比例</div>
-      </template>
-    </Title>
-    <div ref="chartDom"  class="content-box yse-events"></div>
-  </div>
-</template>
-
-
-<script setup>
-import Highcharts from 'highcharts/highstock';
-import HighchartsMore from 'highcharts/highcharts-more';
-import HighchartsDrilldown from 'highcharts/modules/drilldown';
-import Highcharts3D from 'highcharts/highcharts-3d';
-import Highmaps from 'highcharts/modules/map';
-import Title from "../../../components/title";
-import {onMounted, ref} from "vue";
-
-//初始化Highcharts
-HighchartsMore(Highcharts)
-HighchartsDrilldown(Highcharts);
-Highcharts3D(Highcharts);
-Highmaps(Highcharts);
-
-let chartDom = ref(null);
-const btnIndex = ref(null);
-const mychat = ref(null);
-function getActive(index){
-  return btnIndex.value == index ? "active" : "";
-}
-
-onMounted(async () => {
-  init1()
-})
-const options =  {
-  tooltip:{
-    useHTML:true,
-    backgroundColor:"#00000000",
-    formatter:function(){
-      return "<div class='tooltip1'><div>"+this.x+"</div><div>虫害风险指数"+this.y+"</div></div>"
-    }
-  },
-  chart: {
-    backgroundColor:"#ffffff00",
-    type: 'areaspline',
-  },
-  title: {
-    text: "虫害风险趋势",
-    align:"left",
-    style:{color:"#ffffff",fontSize:"12px",fontWeight: 400}
-  },
-  credits: {
-    enabled:false,
-  },
-  xAxis: {
-    gridLineWidth: 1,
-    type: 'datetime',
-    gridLineColor:"#e6e6e630",
-    categories: [],
-    labels: {
-      style: {
-        color: '#fff',
-        fontSize:'11px',
-        fontWeight: 400,
-        fontFamily:'PingFangSC-Regular, PingFang SC'
-      }
-    },
-  },
-  yAxis: {
-    min: 0,
-    max: 1,
-    tickInterval:0.2,
-    title: null,
-    gridLineWidth: 1,
-    gridLineColor:"#e6e6e630",
-    labels: {
-      format:"{value}",
-      style: {
-        color: '#fff',
-        fontSize:'11px',
-        fontWeight: 400,
-        fontFamily:'PingFangSC-Regular, PingFang SC'
-      }
-    },
-  },
-  legend: {
-    /* 图例显示顺序反转
-     * 这是因为堆叠的顺序默认是反转的，可以设置
-     * yAxis.reversedStacks = false 来达到类似的效果
-     */
-    enabled:false,
-    reversed: true,
-    padding:0,
-    itemStyle: {
-      color: '#fff',
-      fontFamily:'ArialMT'
-    }
-  },
-  plotOptions: {
-    areaspline: {
-      fillColor: {
-        linearGradient: {
-          x1: 0,
-          y1: 0,
-          x2: 0,
-          y2: 1
-        },
-        stops: [
-          [0, '#FF927590'], // start
-          [0.5, '#FCBA8A80'], // middle
-          [1, '#FAD48B70'] // end
-        ]
-      },
-      marker: {
-        radius: 0
-      },
-      lineWidth: 0,
-      states: {
-        hover: {
-          lineWidth: 1,
-          radius: 5
-        }
-      },
-      threshold: null
-    }
-  },
-  series: []
-}
-
-function setPer(data){
-  let sum = 0;
-  for(let i of data){
-    sum = sum + i;
-  }
-  let res = new Array()
-  for(let i of data){
-    res.push({val:i, y : parseInt((i / sum * 100).toFixed(0))});
-  }
-  return res;
-}
-
-function init1() {
-  let date = new Date()
-
-  options.xAxis.categories = [
-    '03-02',
-    '03-09',
-    '03-16',
-    '03-23',
-    '03-30',
-    '04-06',
-    '04-13',
-    '04-20',
-    '04-27',
-    '05-04'
-  ]
-  options.series = [{
-    data: [0.65,
-      0.78,
-      0.77,
-      0.61,
-      0.55,
-      0.63,
-      0.76,
-      0.78,
-      0.9,
-      0.94
-    ],
-    color:"#18f135",
-  }];
-  mychat.value = new Highcharts.Chart(chartDom.value, options);
-}
-
-
-
-
-</script>
-
-<style lang="scss" scoped>
-.content-box{
-  position: absolute;
-  width: 100%;
-  height: calc(100% - 48px);
-}
-.slot-unit{
-  color: #f0f0f0;
-  text-align: right;
-  padding: 10px;
-  width: 100%;
-}
-
-</style>
-

src/views/znxy/charts/r_c/Qxyj.vue

@@ -1,211 +0,0 @@
-<template>
-  <div >
-    <Title title="气象预警">
-      <template v-slot:title-slot>
-      </template>
-    </Title>
-    <div class="content-box bottom container yse-events" @mouseover="setPaused(true)" @mouseout="setPaused(false)" >
-      <div class="scroll-list" :class="getPaused()" >
-        <div  class="item" >
-          <br/><br/>
-          <p>
-            <br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-            <font v-for="(item,index) in reportDes" :key="index" :style="item.color ? 'color:'+item.color : ''">
-              {{item.text}}
-            </font>
-          </p>
-          <p>
-            {{report.chSuggestTitle}}
-          </p>
-          <p>
-            {{report.bhSuggestTitle}}
-          </p>
-        </div>
-
-      </div>
-      <div class="scroll-list2" :class="getPaused()" >
-        <div  class="item" >
-          <br/><br/>
-          <p>
-            <br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-            <font v-for="(item,index) in reportDes" :key="index" :style="item.color ? 'color:'+item.color : ''">
-            {{item.text}}
-          </font>
-          </p>
-          <p>
-            {{report.chSuggestTitle}}
-          </p>
-          <p>
-            {{report.bhSuggestTitle}}
-          </p>
-        </div>
-
-      </div>
-
-    </div>
-  </div>
-</template>
-
-
-<script setup>
-import Title from "../../../components/title";
-import {onMounted, ref} from "vue";
-let props = defineProps({
-  report:{
-    type:Object,
-    required:true
-  }
-})
-const paused = ref(null);
-const reportDes = ref({})
-function setPaused(val){
-  paused.value = val;
-}
-function getPaused(){
-  return paused.value ? "paused" : ""
-}
-
-/**
- * 解析字符串为数组，并获取其中的关键字的颜色
- * @param {*} text
- */
-function getTextArray(text){
-  let res = []
-  let cur = {text:""}
-  //三种模式 0 读取普通字符串 1读取关键字 2读取关键字的颜色
-  let status = 0;
-  for(let i in text){
-    if(text[i] == ']'){
-      status = 0
-      res.push(cur)
-      cur = {text:""}
-      continue
-    }
-    if(text[i] == '['){
-      status = 1
-      res.push(cur)
-      cur = {text:""}
-      continue
-    }
-    if(status == 1 && text[i] == ','){
-      status = 2
-      cur["color"] = ""
-      continue
-    }
-    if(status == 0 || status == 1){
-      cur["text"] +=text[i]
-    }
-    if(status == 2){
-      cur["color"] +=text[i]
-    }
-  }
-  res.push(cur)
-  return res;
-}
-reportDes.value = getTextArray(props.report.weatherInfo)
-
-
-
-
-
-</script>
-
-<style lang="scss" scoped>
-.content-box{
-  position: absolute;
-  width: 100%;
-  height: calc(100% - 48px);
-  font-size: 20px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #FFFFFF;
-}
-.slot-unit{
-  color: #f0f0f0;
-  text-align: right;
-  padding: 10px;
-  width: 100%;
-}
-
-.container {
-  position: relative;
-  /* 父容器需要有明确的高度 */
-  margin: auto;
-  overflow: hidden;
-}
-
-.container > .scroll-list {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 400px;
-  width: 100%;
-  animation: scroll 10s linear infinite normal;
-}
-.container > .scroll-list2 {
-  position: absolute;
-  top: 400px;
-  height: 400px;
-  left: 0;
-  width: 100%;
-  animation: scroll2 10s linear infinite normal;
-}
-
-.container > .paused{
-  animation-play-state:paused;
-}
-.bottom{
-  margin-top: 8px;
-  width: 100%;
-  height: 82%;
-  overflow:hidden;
-  .item{
-    height: 100%;
-    background-color: #032C3980;
-    padding: 20px 20px 20px 20px;
-    border-left: 1px solid rgba(81,233,240,0.3);
-    border-right: 1px solid rgba(81,233,240,0.3);
-    box-sizing: border-box;
-    font-size: 20px;
-    .frontIcon{
-      width: 13%;
-      padding: 0px 10px 0px 10px;
-      box-sizing: border-box;
-    }
-    .endIcon{
-      width: 17%;
-      height: 100%;
-      box-sizing: border-box;
-      text-align: right;
-    }
-    .content{
-      width: 70%;
-      display: flex;
-      flex-direction: column;
-      .body{
-        display: flex;
-        justify-content: space-between;
-      }
-    }
-    .text1{font-weight: 600;color: #00FFF0;}
-    .text2{font-weight: 600;color: #D09C00;}
-    .text3{color: #B4FFFB;}
-  }
-}
-
-
-@keyframes scroll {
-  100% {
-    /* 需要滚动内容的总高度 */
-    top: -400px;
-  }
-}
-@keyframes scroll2 {
-  100% {
-    /* 需要滚动内容的总高度 */
-    top: 0px;
-  }
-}
-
-</style>
-

src/views/znxy/charts/r_t/Gzqdtqyb.vue

@@ -1,392 +0,0 @@
-<template>
-  <div>
-    <Title title="天气预报">
-      <template v-slot:title-slot>
-        <div class="slot-unit">单位：{{unit}}</div>
-      </template>
-    </Title>
-    <div class="tabs yse-events">
-      <div class="lbtn"><div class="text" :key="btnIndex" :class="getActive(1)" @click="change(1)">温度</div></div>
-      <div class="btn"><div class="text" :key="btnIndex" :class="getActive(2)" @click="change(2)">湿度</div></div>
-      <div class="btn"><div class="text" :key="btnIndex" :class="getActive(3)" @click="change(3)">降雨</div></div>
-      <div class="rbtn"><div class="text" :key="btnIndex" :class="getActive(4)" @click="change(4)">光照</div></div>
-    </div>
-    <div ref="chartDom"  class="content-box yse-events"></div>
-  </div>
-</template>
-
-
-<script setup>
-import Highcharts from 'highcharts/highstock';
-import HighchartsMore from 'highcharts/highcharts-more';
-import HighchartsDrilldown from 'highcharts/modules/drilldown';
-import Highcharts3D from 'highcharts/highcharts-3d';
-import Highmaps from 'highcharts/modules/map';
-import {onMounted, ref, watch} from "vue";
-import {useStore} from "vuex";
-import Title from "../../../components/title";
-
-//初始化Highcharts
-HighchartsMore(Highcharts)
-HighchartsDrilldown(Highcharts);
-Highcharts3D(Highcharts);
-Highmaps(Highcharts);
-let state = useStore().state;
-let chartDom = ref(null);
-const btnIndex = ref(null);
-const mychat = ref(null);
-const unit = ref("")
-const weather7D = ref(null)
-function getActive(index){
-  return btnIndex.value == index ? "active" : "";
-}
-function change(index) {
-  btnIndex.value = index;
-  switch (index) {
-    case 1:
-      init1();
-      break;
-    case 2:
-      init2();
-      break;
-    case 3:
-      init3();
-      break;
-    case 4:
-      init4();
-      break;
-  }
-}
-onMounted(async () => {
-  await initWeather()
-  change(1)
-})
-
-const options =  {
-  tooltip:{
-    useHTML:true,
-    backgroundColor:"#00000000",
-    formatter:function(){
-      let {name,unit} = this.series.userOptions;
-      return "<div class='tooltip1'><div>"+this.x+"</div><div>" + name + this.y+ unit +"</div></div>"
-    }
-  },
-  chart: {
-    backgroundColor:"#ffffff00",
-    type: 'areaspline',
-  },
-  title: {
-    text: null
-  },
-  credits: {
-    enabled:false,
-  },
-  xAxis: {
-    gridLineWidth: 1,
-    type: 'datetime',
-    gridLineColor:"#e6e6e630",
-    categories: ['04-28', '04-29', '04-30', '05-01','05-02','05-03', '05-04'],
-    labels: {
-      style: {
-        color: '#fff',
-        fontSize:'11px',
-        fontWeight: 400,
-        fontFamily:'PingFangSC-Regular, PingFang SC'
-      }
-    },
-  },
-  yAxis: {
-    min: 0,
-    title: null,
-    gridLineWidth: 1,
-    gridLineColor:"#e6e6e630",
-    labels: {
-      format:"{value}",
-      style: {
-        color: '#fff',
-        fontSize:'11px',
-        fontWeight: 400,
-        fontFamily:'PingFangSC-Regular, PingFang SC'
-      }
-    },
-  },
-  legend: {
-    /* 图例显示顺序反转
-     * 这是因为堆叠的顺序默认是反转的，可以设置
-     * yAxis.reversedStacks = false 来达到类似的效果
-     */
-    enabled:false,
-    reversed: true,
-    padding:0,
-    itemStyle: {
-      color: '#fff',
-      fontFamily:'ArialMT'
-    }
-  },
-  plotOptions: {
-    areaspline: {
-      marker: {
-        radius: 0
-      },
-      lineWidth: 0,
-      states: {
-        hover: {
-          lineWidth: 0
-        }
-      },
-      threshold: null
-    }
-  },
-  series: []
-}
-
-function setPer(data){
-  let sum = 0;
-  for(let i of data){
-    sum = sum + i;
-  }
-  let res = new Array()
-  for(let i of data){
-    res.push({val:i, y : parseInt((i / sum * 100).toFixed(0))});
-  }
-  return res;
-}
-
-async function initWeather(){
-  let {code,data} = await VE_API.system.weather();
-  weather7D.value = data.daily;
-}
-
-function init1() {
-  unit.value = "C°"
-  let data = weather7D.value;
-  let categories = [];
-  let seritsData1 = [];
-  let seritsData2 = [];
-  data.forEach((item)=>{
-    categories.push(item.fxDate.substring(5,10))
-    seritsData1.push(parseFloat(item.tempMax))
-    seritsData2.push(parseFloat(item.tempMin))
-  })
-  options.xAxis.categories = categories;
-  options.series = [{
-    name:"最高气温",
-    unit:"C°",
-    data: seritsData1,
-    fillColor: {
-      linearGradient: {
-        x1: 0,
-        y1: 0,
-        x2: 0,
-        y2: 1
-      },
-      stops: [
-        [0, '#F35600'], // start
-        [1, '#F3A90000'], // middle
-      ]
-    },
-  },{
-    name:"最低气温",
-    unit:"C°",
-    data: seritsData2,
-    fillColor: {
-      linearGradient: {
-        x1: 0,
-        y1: 0,
-        x2: 0,
-        y2: 1
-      },
-      stops: [
-        [0, '#F3A90080'], // middle
-        [0.5, '#F3A90080'], // middle
-        [1, '#00E9E370'] // end
-      ]
-    },
-  }];
-  mychat.value = new Highcharts.Chart(chartDom.value, options);
-}
-function init2() {
-  unit.value = "%rh"
-  let data = weather7D.value;
-  let categories = [];
-  let seritsData1 = [];
-  data.forEach((item)=>{
-    categories.push(item.fxDate.substring(5,10))
-    seritsData1.push(parseFloat(item.humidity))
-  })
-  options.xAxis.categories = categories;
-  options.series = [{
-    name:"湿度",
-    unit:"%rh",
-    data: seritsData1,
-    fillColor: {
-      linearGradient: {
-        x1: 0,
-        y1: 0,
-        x2: 0,
-        y2: 1
-      },
-      stops: [
-        [0, '#0c45ee90'], // middle
-        [0.5, '#46dee390'], // middle
-        [1, '#e9af0090'] // end
-      ]
-    },
-  }];
-  mychat.value = new Highcharts.Chart(chartDom.value, options);
-}
-
-function init3() {
-  unit.value = "mm"
-  let data = weather7D.value;
-  let categories = [];
-  let seritsData1 = [];
-  data.forEach((item)=>{
-    categories.push(item.fxDate.substring(5,10))
-    seritsData1.push(parseFloat(item.precip))
-  })
-  options.xAxis.categories = categories;
-
-  options.series = [{
-    name:"降雨量",
-    unit:"mm",
-    data: seritsData1,
-    fillColor: {
-      linearGradient: {
-        x1: 0,
-        y1: 0,
-        x2: 0,
-        y2: 1
-      },
-      stops: [
-        [0, '#0c45ee90'], // middle
-        [0.5, '#46dee390'], // middle
-        [1, '#e9af0090'] // end
-      ]
-    },
-  }];
-  mychat.value = new Highcharts.Chart(chartDom.value, options);
-}
-
-function init4() {
-  unit.value = "LX"
-  let data = weather7D.value;
-  let categories = [];
-  let seritsData1 = [];
-  data.forEach((item)=>{
-    categories.push(item.fxDate.substring(5,10))
-    seritsData1.push(parseFloat(item.uvIndex))
-  })
-  options.xAxis.categories = categories;
-
-  options.series = [{
-    name:"照度",
-    unit:"LX",
-    data: seritsData1,
-    fillColor: {
-      linearGradient: {
-        x1: 0,
-        y1: 0,
-        x2: 0,
-        y2: 1
-      },
-      stops: [
-        [0, '#f3008690'], // middle
-        [0.5, '#F3A90080'], // middle
-        [1, '#00E9E370'] // end
-      ]
-    },
-  }];
-  mychat.value = new Highcharts.Chart(chartDom.value, options);
-}
-
-
-
-
-</script>
-
-<style lang="scss" scoped>
-.tabs{
-  position: absolute;
-  top:25%;
-  width:100%;
-  z-index: 3;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  .text{
-    text-align: center;
-    width: 88px;
-    height: 38px;
-    line-height: 38px;
-    font-size: 14px;
-    font-family: PingFangSC-Regular, PingFang SC;
-    font-weight: 400;
-    color: #B4FFFB;
-  }
-  .lbtn{
-    cursor: pointer;
-    background-image: url(@/assets/img/left_btn.png);
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    width: 88px;
-    height: 38px;
-    .active{
-      width: 88px;
-      height: 38px;
-      background-image: url(@/assets/img/left_btn_active.png);
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
-    }
-  }
-  .btn{
-    cursor: pointer;
-    background-image: url(@/assets/img/center_btn.png);
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    width: 88px;
-    height: 38px;
-    .active{
-      width: 88px;
-      height: 36px;
-      background: rgba(3,44,57,0.8);
-      box-shadow: inset 0px 0px 20px 4px rgba(0,255,240,0.5);
-      border-radius: 0px 0px 0px 0px;
-      border: 1px solid #51E9F0;
-    }
-  }
-  .rbtn{
-    background-image: url(@/assets/img/right_btn.png);
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    width: 88px;
-    height: 38px;
-    cursor: pointer;
-    .active{
-      width: 88px;
-      height: 38px;
-      background-image: url(@/assets/img/right_btn_active.png);
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
-    }
-  }
-}
-
-
-.content-box{
-  position: absolute;
-  width: 100%;
-  height: calc(75% - 48px + 15px);
-  bottom: -10px;
-}
-
-.slot-unit{
-  color: #f0f0f0;
-  text-align: right;
-  padding: 10px;
-  width: 100%;
-}
-
-</style>
-

src/views/znxy/charts/r_t/Wdyj.vue

@@ -1,214 +0,0 @@
-<template>
-  <div>
-    <Title title="温度预警">
-      <template v-slot:title-slot>
-      </template>
-    </Title>
-    <div ref="chartDom"  class="content-box yse-events"></div>
-  </div>
-</template>
-<script setup>
-import {onMounted, ref} from "vue";
-import Highcharts from 'highcharts/highstock';
-import HighchartsMore from 'highcharts/highcharts-more';
-import HighchartsDrilldown from 'highcharts/modules/drilldown';
-import Highcharts3D from 'highcharts/highcharts-3d';
-import Highmaps from 'highcharts/modules/map';
-import {useStore} from "vuex";
-import Title from "../../../components/title";
-//初始化Highcharts
-HighchartsMore(Highcharts)
-HighchartsDrilldown(Highcharts);
-Highcharts3D(Highcharts);
-Highmaps(Highcharts);
-
-let state = useStore().state;
-let chartDom = ref(null);
-const mychat = ref(null);
-const unit = ref("")
-const weather7D = ref(null)
-
-const options =  {
-  tooltip:{
-    useHTML:true,
-    backgroundColor:"#00000000",
-    formatter:function(){
-      let {name,unit} = this.series.userOptions;
-      return "<div class='tooltip1'><div>"+this.x+"</div><div>" + name + this.y+ unit +"</div></div>"
-    }
-  },
-  chart: {
-    backgroundColor:"#ffffff00",
-    type: 'areaspline',
-  },
-  title: {
-    text: null
-  },
-  credits: {
-    enabled:false,
-  },
-  xAxis: {
-    gridLineWidth: 1,
-    type: 'datetime',
-    gridLineColor:"#e6e6e630",
-    categories: ['04-28', '04-29', '04-30', '05-01','05-02','05-03', '05-04'],
-    labels: {
-      style: {
-        color: '#fff',
-        fontSize:'11px',
-        fontWeight: 400,
-        fontFamily:'PingFangSC-Regular, PingFang SC'
-      }
-    },
-  },
-  yAxis: {
-    min: 0,
-    title: null,
-    gridLineWidth: 1,
-    gridLineColor:"#e6e6e630",
-    labels: {
-      format:"{value}",
-      style: {
-        color: '#fff',
-        fontSize:'11px',
-        fontWeight: 400,
-        fontFamily:'PingFangSC-Regular, PingFang SC'
-      }
-    },
-  },
-  legend: {
-    /* 图例显示顺序反转
-     * 这是因为堆叠的顺序默认是反转的，可以设置
-     * yAxis.reversedStacks = false 来达到类似的效果
-     */
-    enabled:false,
-    reversed: true,
-    padding:0,
-    itemStyle: {
-      color: '#fff',
-      fontFamily:'ArialMT'
-    }
-  },
-  plotOptions: {
-    areaspline: {
-      marker: {
-        radius: 0
-      },
-      lineWidth: 0,
-      states: {
-        hover: {
-          lineWidth: 0
-        }
-      },
-      threshold: null
-    }
-  },
-  series: []
-}
-
-async function initWeather(){
-  let {code,data} = await VE_API.system.weather();
-  weather7D.value = data.daily;
-}
-
-function init1() {
-  unit.value = "C°"
-  let data = weather7D.value;
-  let categories = [];
-  let seritsData1 = [];
-  let seritsData2 = [];
-  data.forEach((item)=>{
-    categories.push(item.fxDate.substring(5,10))
-    seritsData1.push(parseFloat(item.tempMax))
-    seritsData2.push(parseFloat(item.tempMin))
-  })
-  options.xAxis.categories = categories;
-  options.series = [{
-    name:"最高气温",
-    unit:"C°",
-    data: seritsData1,
-    fillColor: {
-      linearGradient: {
-        x1: 0,
-        y1: 0,
-        x2: 0,
-        y2: 1
-      },
-      stops: [
-        [0, '#F35600'], // start
-        [1, '#F3A90000'], // middle
-      ]
-    },
-  },{
-    name:"最低气温",
-    unit:"C°",
-    data: seritsData2,
-    fillColor: {
-      linearGradient: {
-        x1: 0,
-        y1: 0,
-        x2: 0,
-        y2: 1
-      },
-      stops: [
-        [0, '#F3A90080'], // middle
-        [0.5, '#F3A90080'], // middle
-        [1, '#00E9E370'] // end
-      ]
-    },
-  }];
-  mychat.value = new Highcharts.Chart(chartDom.value, options);
-}
-
-onMounted(async () => {
-  await initWeather()
-  init1()
-})
-
-
-</script>
-
-<style lang="scss" scoped>
-
-.content-box{
-  position: absolute;
-  width: 100%;
-  height: calc(100% - 48px - 10px);
-  bottom: 0px;
-}
-
-.title-slot{
-  background-image: url(@/assets/img/tabs_btn3.png);
-  width: 88px;
-  height: 50/16*1rem;
-  border-radius: 0.25rem;
-  font-size:14/16*1rem;
-  font-family: PingFangSC-Medium, PingFang SC;
-  font-weight: 500;
-  color: #FFFFFF;
-  float:right;
-  text-align: center;
-  box-sizing: border-box;
-}
-
-.btn{
-  cursor: pointer;
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: rgba(180,255,251,0.6);
-  width: 88px;
-  height: 28px;
-  .active{
-    width: 88px;
-    height: 28px;
-    background: rgba(3,44,57,0.8);
-    box-shadow: inset 0px 0px 20px 4px rgba(0,255,240,0.5);
-    border-radius: 0px 0px 0px 0px;
-    border: 1px solid #51E9F0;
-  }
-}
-
-</style>

src/views/znxy/com/Tsyg.vue

@@ -1,123 +0,0 @@
-<template>
-  <div class="tsyg-page">
-    <div class="yg-bg">
-      <div class="name">态势预估</div>
-      <div class="progress">
-        <img class="arrow" src="@/assets/img/znxy/tsyg_arrow.png" />
-        <div class="line">
-          <div :class="['yse-events',{'active':active===0}]" @click="handleActive(0)"> &nbsp;&nbsp;&nbsp;当前&nbsp;&nbsp;&nbsp;</div>
-          <div :class="['blue','yse-events',{'active':active===5}]" @click="handleActive(5)">未来5天</div>
-          <div :class="['red','yse-events',{'active':active===7}]" @click="handleActive(7)">未来7天</div>
-          <!-- <div :class="['red','yse-events',{'active':active===15}]" @click="handleActive(15)">未来15天</div> -->
-          <!-- <div :class="['red','yse-events',{'active':active===30}]" @click="handleActive(30)">未来30天</div> -->
-          <img :style="{left:iconLeft(active)}" class="orientation" src="@/assets/img/znxy/orientation.png" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import {ref} from 'vue'
-let emits = defineEmits(["selectDay"])
-
-const active = ref(0)
-
-
-const handleActive = (e) =>{
-    active.value = e
-  emits("selectDay",e)
-}
-
-const iconLeft = (e) =>{
-    let left = '40'
-    if(e===5){
-        left = '62.4'
-    }
-    if(e===7){
-        left = '84.6'
-    }
-    if(e===15){
-        left = '74.3'
-    }
-    if(e===30){
-        left = '89.3'
-    }
-    return left + '%'
-}
-</script>
-
-<style lang="scss" scoped>
-.tsyg-page {
-  .yg-bg {
-    background-image: url("@/assets/img/znxy/tsyg_bg.png");
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    width: 480px;
-    height: 60px;
-    position: absolute;
-    bottom: 19px;
-    display: flex;
-    align-items: center;
-    .name {
-      font-size: 15px;
-      color: #ffffff;
-      margin-left: 17px;
-    }
-    .progress {
-      display: flex;
-      align-items: center;
-
-      .line {
-        width: 320px;
-        height: 1px;
-        margin-left: -2px;
-        background: linear-gradient(90deg, #29f19c 0%, #02a1f9 100%);
-        display: flex;
-        // color: #fde16f;
-        color: #44d6e9;
-        div {
-          padding-top: 7px;
-          position: relative;
-          width: 30%;
-          display: flex;
-          justify-content: flex-end;
-          margin-right: -20px;
-          cursor: pointer;
-          margin-left: 10%;
-          &::before {
-            content: "";
-            position: absolute;
-            top: -6px;
-            right: 20px;
-            width: 8px;
-            height: 8px;
-            background: #112325;
-            border-radius: 50%;
-            border: 2px solid #51e9f0;
-          }
-        }
-        .active {
-          color: #fde16f;
-          &::before {
-            background: #027278;
-          }
-        }
-        // .blue {
-        //   color: #44d6e9;
-        // }
-        // .red {
-        //   color: #fd696a;
-        // }
-        .orientation {
-          width: 26px;
-          height: 32px;
-          position: absolute;
-          top: -8px;
-          left: 29.4%;
-        }
-      }
-    }
-  }
-}
-</style>

src/views/znxy/com/YjTuli.vue

@@ -1,159 +0,0 @@
-<template>
-  <div class="tuli">
-    <div class="title">
-      <el-checkbox class="yse-events" v-model="checked" label="" size="small" />
-      <span>状态图例</span>
-    </div>
-    <div class="list">
-      <div class="item" v-for="item in list" :key="item.id">
-        <template v-if="item.outerType === 3">
-          <img
-            :src="require(`@/assets/status/status_${item.icon}.png`)"
-            width="15"
-          />
-          <div class="text">
-            {{ item.name }}
-          </div>
-        </template>
-        <template v-else>
-          <div :class="item.style" :style="iconStyle(item.style, index, item)"></div>
-          <span class="text">{{ item.name }}</span>
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { toRefs, ref, onMounted, watch } from "vue";
-
-const list = ref([]);
-
-const checked = ref(true);
-
-onMounted(async () => {
-  list.value = arr;
-});
-
-const arr = [
-  {
-    name: "病虫异常",
-    icon: "bcyc",
-    outerType: 3,
-  },
-  {
-    name: "生长异常",
-    icon: "szyc",
-    outerType: 3,
-  },
-  {
-    name: "待复核",
-    icon: "dfh",
-    outerType: 3,
-  },
-  {
-    name: "巡飞点位",
-    icon: "xfdw",
-    outerType: 3,
-  },
-];
-
-const props = defineProps({
-  tabValue: {
-    type: Object,
-    default: () => {},
-  },
-});
-
-const iconStyle = (type, index, item) => {
-  if (type === "triangle") {
-    return { borderBottomColor: item.color };
-  }
-  if (type === "circular") {
-    return { background: item.color };
-  }
-};
-
-watch(
-  () => props.tabValue,
-  (newValue, oldValue) => {
-    if (newValue) {
-      console.log("newValue", newValue);
-      if (newValue.type === 3) {
-        list.value = arr;
-      } else {
-        list.value = newValue.items.map(item =>{
-          return {
-            ...item,
-            outerType:newValue.type,
-            style:newValue.style
-          }
-        });
-      }
-    }
-  }
-);
-</script>
-
-<style lang="scss" scoped>
-.tuli {
-  width: 108px;
-  background: rgba(3, 44, 57, 0.9);
-  border-radius: 4px;
-  border: 1px solid rgba(81, 233, 240, 0.3);
-  .title {
-    height: 30px;
-    text-align: center;
-    line-height: 30px;
-    background: rgba(205, 243, 255, 0.15);
-    border-radius: 4px 4px 0px 0px;
-    border: 1px solid rgba(81, 233, 240, 0.3);
-    font-size: 14px;
-    font-family: PingFangSC-Regular, PingFang SC;
-    font-weight: 400;
-    color: #00fff0;
-  }
-  .list {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-around;
-    padding: 10px 10px 10px 10px;
-    .item {
-      width: 100%;
-      padding: 5px 5px 0px 5px;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: center;
-      .circular {
-        width: 12px;
-        height: 12px;
-        border-radius: 50px;
-        background: #b0e000;
-      }
-      .triangle {
-        width: 0;
-        height: 0;
-        border-left: 6px solid transparent; /* 左边框设置为透明 */
-        border-right: 6px solid transparent; /* 右边框设置为透明 */
-        border-bottom: 12px solid #d63f3c; /* 下边框设置为你想要的颜色和大小，这将形成三角形的底部 */
-      }
-      .color {
-        width: 20%;
-        height: 14px;
-      }
-      .text {
-        margin-left: 5px;
-        width: 76%;
-        font-size: 12px;
-        font-family: PingFangSC-Regular, PingFang SC;
-        font-weight: 400;
-        color: #ffffff;
-        line-height: 17px;
-      }
-    }
-  }
-}
-</style>

src/views/znxy/index.vue

@@ -1,332 +0,0 @@
-<!-- 智能巡园界面 -->
-<template>
-  <div class="container2">
-    <div :class="['left', { shrink: isShrunk }]">
-      <Qxyj @gybg="gybg" class="title-l-t"></Qxyj>
-      <Szts class="title-l-c"></Szts>
-      <Chts class="title-l-b"></Chts>
-      <div class="arrow arrow-left yse-events" @click="toggleShrink">
-        <img src="@/assets/img/znxy/arrow.png" alt="">
-      </div>
-    </div>
-    <div class="center">
-      <div class="title-c-t">
-        <div class="title-c-t-l"></div>
-        <div class="title-c-t-r"></div>
-      </div>
-      <div class="title-c-c">
-        <div class="title-c-c-l">
-          <Tsyg @selectDay="selectDay"></Tsyg>
-        </div>
-        <div class="title-c-c-r">
-          <!-- 预警图例 -->
-          <YjTuli :tabValue="tabValue" class="tuli"></YjTuli>
-        </div>
-      </div>
-      <!-- <div class="title-c-b">
-        <Szyc class="title-c-b-l"></Szyc>
-        <Bcyc class="title-c-b-r"></Bcyc>
-      </div> -->
-    </div>
-    <div :class="['right', { shrinkRight: isShrunkRight }]">
-      <Nslb @workerPath="workerPath"  @addNsRecord="addNsRecord" @nsAllot="nsAllot" ></Nslb>
-      <div class="bar">
-        <div class="icon">
-          <span>万斤</span>
-          <el-icon><CaretRight /></el-icon>
-        </div>
-        <span>1000</span>
-        <span>2000</span>
-        <span>3000</span>
-      </div>
-      <div class="arrow arrow-right yse-events" @click="toggleShrinkRight">
-        <img src="@/assets/img/znxy/arrow.png" alt="">
-      </div>
-    </div>
-    <TreeDialog v-if="treeShowDialog" @closeDialog="treeCloseDialog" :showDialog="treeShowDialog" :rowData="treeData"  ></TreeDialog>
-    <PdfDialog title="果园报告" :src="gybgFilename+'?v='+new Date().getTime()" :showDialog="showDialog"  @closeDialog="closeDialog"></PdfDialog>
-  </div>
-</template>
-
-<script setup>
-import {ROLE} from "@/api/enum"
-import Szts from "./charts/l_c/szts";
-import Qxyj from "./charts/l_c/qxyj";
-import Gzqdtqyb from "./charts/r_t/Gzqdtqyb";
-import Bcyc from "./charts/c_b_r/Bcyc";
-import YjTuli from "./com/YjTuli";
-import Tsyg from "./com/Tsyg";
-import no_img from '../../assets/status/no_img.png'
-import * as KMap from '@/utils/ol-map/KMap';
-import {useStore} from "vuex"
-import {onMounted, ref} from "vue"
-import TreeDialog from "../../components/TreeDialog";
-import Chts from "./charts/l_b/chts";
-import Szyc from "./charts/c_b_l/Szyc";
-import Nslb from "./charts/r/Nslb";
-import PdfDialog from "../../components/PdfDialog";
-import {base_img_url3} from "@/api/config.js"
-
-const props = defineProps({
-  tabValue:{
-    type: Object,
-    default: ()=>{},
-  }
-});
-
-
-const emit = defineEmits(["setTreeStyle","addNsRecord","nsAllot","morephoto","workerPath","selectDay"]);
-let store = useStore()
-let warnModelList = ref([])
-const treeShowDialog = ref(false);
-const treeData = ref(null);
-let state = store.state;
-const showDialog = ref(false)
-const gybgFilename = ref("")
-
-function gybg(filename){
-  showDialog.value = true
-  gybgFilename.value = filename
-
-}
-function closeDialog(){
-  showDialog.value = false
-}
-
-function treeCloseDialog(){
-  treeShowDialog.value = false;
-}
-function showTreeDialog(f){
-  treeData.value = f;
-  treeShowDialog.value = true;
-}
-
-function addNsRecord(e){
-  emit("addNsRecord",e)
-}
-function workerPath(e){
-  emit("workerPath",e)
-}
-function nsAllot(e){
-  emit("nsAllot",e)
-}
-function morephoto(){
-  emit("morephoto")
-}
-function selectDay(e){
-  emit("selectDay",e)
-}
-
-defineExpose({
-  showTreeDialog
-});
-
-// 左收缩
-const isShrunk = ref(false);
-const toggleShrink = () => {
-  isShrunk.value = !isShrunk.value;
-};
-
-// 右收缩
-const isShrunkRight = ref(false);
-const toggleShrinkRight = () => {
-  isShrunkRight.value = !isShrunkRight.value;
-};
-</script>
-
-<style lang="scss" scoped>
-.container2{
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-  pointer-events: none;
-  z-index: 999;
-  position: absolute;
-  /* background-color: aqua; */
-  /* opacity: 0.05; */
-}
-.left{
-  top: 100/16*1rem;
-  left: 16/16*1rem;
-  position: absolute;
-  width: 480/16*1rem;
-  height: calc(100% - 10rem);
-  z-index: 1000;
-  background: #011217;
-  transition: transform 0.5s ease; /* 平滑过渡效果 */
-  &.shrink {
-    transform: translateX(-(496/16*1rem));
-  }
-}
-.arrow{
-  position: absolute;
-  background: #033341;
-  border: 1px solid rgba(2,237,224,0.33);
-  padding: 12px 0;
-  top: 45%;
-  cursor: pointer;
-}
-
-.arrow-left{
-  right: -25px;
-  border-left: none;
-}
-
-.shrink {
-  transform: translateX(-(496/16*1rem));
-  .arrow{
-    border: 1px solid rgba(2,237,224,0.33);
-    border-right: none;
-    transform: rotate(180deg);
-  }
-}
-
-.center{
-  top: 124/16*1rem;
-  left:  calc(40/16*1rem + 40/16*1rem + 440/16*1rem);
-  right:  calc(40/16*1rem + 40/16*1rem + 440/16*1rem);
-  position: absolute;
-  height: calc(100% - 10rem);
-  z-index: 1000;
-}
-.right{
-  top: 100/16*1rem;
-  right: 16/16*1rem;
-  position: absolute;
-  width: 480/16*1rem;
-  height: calc(100% - 10rem);
-  transition: transform 0.5s ease; /* 平滑过渡效果 */
-  .bar{
-    width: 100%;
-    height: 19px;
-    margin-top: 5px;
-    background: linear-gradient(90deg, #5F5AC8, #7A92EB, #DFC323, #EA8E10, #A30D06);
-    border-radius: 9px;
-    border: 1px solid rgba(255,255,255,0.7);
-    color: #FFFDFD;
-    display: flex;
-    justify-content: space-around;
-    .icon{
-      display: flex;
-      align-items: center;
-    }
-  }
-  &.shrinkRight {
-    transform: translateX(496/16*1rem);
-  }
-}
-.arrow-right{
-  left: -25px;
-  border-left: none;
-  transform: rotate(180deg);
-}
-
-.shrinkRight {
-  transform: translateX(496/16*1rem);
-  .arrow{
-    border: 1px solid rgba(2,237,224,0.33);
-    border-right: none;
-    transform: rotate(0);
-  }
-}
-.title-l-t{
-  height: 31.5%;
-  position: relative;
-  border: 1px solid rgba(81, 233, 240, 0.6);
-  background: #011217;
-}
-.title-l-c{
-  box-sizing: border-box;
-  margin-top: 22px;
-  height: 31.5%;
-  position: relative;
-  border: 1px solid rgba(81, 233, 240, 0.6);
-  background: #011217;
-}
-.title-l-b{
-  box-sizing: border-box;
-  margin-top: 22px;
-  height: 31.5%;
-  position: relative;
-  border: 1px solid rgba(81, 233, 240, 0.6);
-  background: #011217;
-}
-.title-r-t{
-  position: relative;
-  height: 33.3%;
-}
-.title-r-c{
-  box-sizing: border-box;
-  padding-top: 7px;
-  position: relative;
-  height: 33.3%;
-}
-.title-r-b{
-  box-sizing: border-box;
-  padding-top: 7px;
-  position: relative;
-  height: 33.3%;
-}
-.title-c-t{
-  position: relative;
-  height: 33.3%;
-  .title-c-t-l{
-    position: relative;
-    height: 100%;
-    width: 48%;
-    float: left;
-  }
-  .title-c-t-r{
-    position: relative;
-    height: 100%;
-    width: 48%;
-    float: right;
-  }
-}
-.title-c-c{
-  box-sizing: border-box;
-  padding-top: 7px;
-  position: relative;
-  height: 65.8%;
-  .title-c-c-l{
-    position: relative;
-    height: 100%;
-    width: 48%;
-    float: left;
-  }
-  .title-c-c-r{
-    position: relative;
-    height: 100%;
-    width: 48%;
-    float: right;
-    .tuli{
-      position: absolute;
-      right: 0%;
-      bottom: 10%;
-    }
-  }
-}
-.title-c-b{
-  box-sizing: border-box;
-  padding-top: 2px;
-  height: 31.5%;
-  .title-c-b-l{
-    position: relative;
-    height: 100%;
-    width: 48%;
-    float: left;
-    background: #1c0101;
-    border: 1px solid rgba(255,8,8,0.6);
-  }
-  .title-c-b-r{
-    position: relative;
-    height: 100%;
-    width: 48%;
-    float: right;
-    background: #011217;
-    border: 1px solid rgba(81, 233, 240, 0.6);
-  }
-}
-
-
-</style>

src/views/znxy/util.js

@@ -1,62 +0,0 @@
-export function getRadius(zoom){
-    if(zoom >= 20){
-        return 70;
-    }
-    if(zoom >= 19){
-        return 30;
-    }
-    if(zoom >= 18){
-        return 15;
-    }
-    if(zoom >= 17){
-        return 10;
-    }
-    return 5;
-}
-
-export function getScale(zoom){
-    if(zoom >= 20){
-        return 0.8;
-    }
-    if(zoom >= 19){
-        return 0.4;
-    }
-    if(zoom >= 18){
-        return 0.2;
-    }
-    if(zoom >= 17){
-        return 0.1;
-    }
-    return 0.1;
-}
-
-export function isShow(zoom,id){
-
-    if(zoom > 18){
-        return true;
-    }
-    if(zoom >= 18){
-        return mo(id, 4)
-    }
-    if(zoom >= 17){
-        return mo(id, 5)
-    }
-    return  mo(id, 5)
-}
-export function mo(id,midu){
-    return id % midu == 0
-}
-
-export const colors = ["#9EFE0C","#FEC30C","#FE760C","#FE0B0C","#0DCAFE","#A80BFF","#E4FE0C","#1A0BFF"];
-export const imgs = ["point6.png","point1.png","point2.png","point3.png","point4.png","point5.png","point6.png","point7.png","point8.png"]
-export const pz = ["未知","白糖罂","桂味","井岗红糯","糯米糍","岭丰糯","进奉","冰荔","妃子笑"]
-
-export function getIndex(name){
-    let i = 0;
-    for(let item of pz){
-        if(name === item){
-            return i;
-        }
-        i++;
-    }
-}

src/views/znxy/znxyLayer/plotLayer.js

@@ -1,215 +0,0 @@
-import * as KMap from '@/utils/ol-map/KMap';
-import {newPoint} from "../../zhgl/map";
-import Style from "ol/style/Style";
-import {deepClone} from '@/common/commonFun'
-import {Cluster, Vector as VectorSource} from 'ol/source.js';
-import { Vector as VectorLayer} from 'ol/layer.js';
-import {boundingExtent} from 'ol/extent.js';
-import {
-    Circle as CircleStyle,
-    Fill,
-    Text,
-  } from 'ol/style.js';
-  import {unByKey} from 'ol/Observable';
-import ImageLayer from 'ol/layer/Image';
-import ImageStatic from 'ol/source/ImageStatic';
-
-/**
- * @description 全景化地图层对象
- */
-class PlotLayer {
-    constructor(kmap){
-        this.kmap = kmap
-        let vectorStyle = new KMap.VectorStyle()
-        this.vectorStyle = vectorStyle
-        this.imgStyleCache = {};
-        this.treeListData = null
-        this.treeClusterLayer = null
-        this.gardenImgLayer = null
-        this.listenKey = null
-    }
-
-    // handleLayerColor(legend) {
-    //     const result = this.addColorToArr1(deepClone(this.subAreaData), legend, legend.key)
-    //     const hasColorKey = result.some(item => 'color' in item);
-    //     if (!hasColorKey) {return}
-    //     for(let item of result){
-    //         this.subAreaLayer.addFeature(newPolymerFeature(item))
-    //     }
-    //     this.fit(this.subAreaLayer.source.getExtent())
-    // }
-
-    // 切换不同类型
-    switchType(type) {
-        if (type == 1) {
-            // 数据变化
-            this.subAreaLayer.layer.setVisible(true)
-            this.clearImgLayer()
-        } else if(type==2) {
-            // 切换显示隐藏
-            this.subAreaLayer.layer.setVisible(false)
-        }else{
-            this.clearImgLayer()
-            this.clearCluster()
-        }
-    }
-
-    // 果园级图片叠加
-    async addGargendImg(gardenId, legend) {
-        let that = this
-        this.clearImgLayer()
-        this.clearCluster()
-        await VE_API.regionalInformation.aPictureGrid({gardenId, key: legend.key}).then(({data}) => {
-            if (data) {
-                const extent = JSON.parse(data.extent)
-                const imgSource = new ImageStatic({
-                    url: data.filename,
-                    projection: 'EPSG:4326',
-                    imageExtent: extent,
-                })
-                this.gardenImgLayer = new ImageLayer({
-                    source: imgSource,
-                    // opacity: 0.6,
-                    zIndex: 9999
-                })
-                that.kmap.addLayer(this.gardenImgLayer)
-                that.kmap.getView().fit(extent,{ duration: 1000, padding: [250, 350, 250, 350] });
-            }
-        })
-    }
-
-    // 果树级图例切换
-    async switchTreeLegend(gardenId, legend) {
-        this.clearImgLayer()
-        this.clearCluster()
-        if (!this.treeListData) {
-            await VE_API.regionalInformation.aPictureTreeList({gardenId}).then(({data,code})=>{
-                this.treeListData = data
-            })
-        }
-        this.addCluster(legend)
-    }
-
-    addCluster(legend) {
-        let that = this
-        let features = []
-        let result = this.addColorToArr1(deepClone(that.treeListData), legend, legend.key)
-        const hasColorKey = result.some(item => 'color' in item);
-        if (!hasColorKey) { return }
-        for (let item of result) {
-            if (item.color) {
-                let point = newPoint(item);
-                features.push(point)
-            }
-        }
-        const source = new VectorSource({
-            features: features,
-        });
-
-        const clusterSource = new Cluster({
-            distance: 5,
-            source: source,
-        });
-
-
-        const styleCache = {};
-        this.treeClusterLayer = new VectorLayer({
-            source: clusterSource,
-            style: function (feature) {
-                const size = feature.get('features').length;
-                if (size == 1) {
-                    const color = feature.get('features')[0].get('color')
-                    return that.vectorStyle.getPointSimpleStyle(5, color, color, "2")
-                }
-                let style = styleCache[size];
-                if (!style) {
-                    style = [
-                        new Style({
-                            image: new CircleStyle({
-                                radius: 15,
-                                fill: new Fill({
-                                    color: 'rgba(255, 152, 102, 0.4)'
-                                })
-                            })
-                        }),
-                        new Style({
-                            image: new CircleStyle({
-                                radius: 10,
-                                fill: new Fill({
-                                    color: 'rgba(255, 165, 0, 0.7)',
-                                }),
-                            }),
-                            text: new Text({
-                                text: size.toString(),
-                                fill: new Fill({
-                                    color: '#fff',
-                                }),
-                            }),
-                        }),
-                    ];
-                    styleCache[size] = style;
-                }
-                return style;
-            },
-            zIndex: 999
-        });
-        that.kmap.addLayer(this.treeClusterLayer)
-        this.fit(this.treeClusterLayer.getSource().getSource().getExtent())
-        this.listenKey = that.kmap.on('click', (e) => {
-            if (that.treeClusterLayer) {
-                that.treeClusterLayer.getFeatures(e.pixel).then((clickedFeatures) => {
-                    if (clickedFeatures.length) {
-                        const features = clickedFeatures[0].get('features');
-                        if (features.length > 1) {
-                            const extent = boundingExtent(
-                                features.map((r) => r.getGeometry().getCoordinates()),
-                            );
-                            that.kmap.getView().fit(extent,{ duration: 1000, padding: [50, 50, 50, 50] });
-                        }
-                    }
-                });
-            }
-        });
-    }
-
-    clearCluster() {
-        if (this.treeClusterLayer) {
-            this.treeClusterLayer.getSource().getSource().clear()
-            this.treeClusterLayer = null
-            unByKey(this.listenKey)
-        }
-    }
-
-    clearImgLayer() {
-        if (this.gardenImgLayer) {
-            this.kmap.removeLayer(this.gardenImgLayer)
-            this.gardenImgLayer = null
-        }
-    }
-    
-    fit(geomOrExtent){
-        this.kmap.fit(geomOrExtent)
-    }
-    
-    // 根据图例对应的值加上color属性
-    addColorToArr1(arr1, obj, key) {
-        if (arr1 && arr1.length&&obj.type!=3) {
-            arr1.forEach(item1 => {
-                // 遍历obj.items来找到与item1[key]匹配的color
-                obj.items.forEach(item => {
-                    // if (item.minVal == item1[key]) {
-                    if (item1[key] >= item.minVal && item1[key] <= item.maxVal) {
-                        // 将找到的color添加到item1中
-                        item1.color = item.color;
-                        return;
-                    }
-                });
-            });
-            return arr1;
-        } else {
-            return []
-        }
-    }
-}
-
-export default PlotLayer