feat：添加tool组件

src/components/ImageSelect.vue

@@ -1,217 +0,0 @@
-<template>
-  <div class="mainDiv">
-    <div class="up" @click="moveActive(-1)"><div class="img"></div></div>
-
-    <div class="images">
-      <template v-for="item in showImages" :key="item.index">
-        <div  class="item" @click="clickImg(item.index)" :class="getActive(item.index)">
-          <img :src="base_img_url2 + item.src + '?imageView2/1/w/200/interlace/1'" />
-          <div class="date">{{dateFormat(new Date(item.date),"mm/dd")}}</div>
-        </div>
-      </template>
-    </div>
-    <div class="down" @click="moveActive(1)"><div class="img"></div></div>
-  </div>
-</template>
-
-<script setup>
-import {onMounted, ref, toRefs} from "vue";
-import {dateFormat} from "../utils/date_util"
-import {base_img_url2} from "../api/config.js"
-const emit = defineEmits(["selectImg"]);
-const props = defineProps({
-  current : {
-    type:Number,
-    required:true
-  },
-  label:{
-    type:String,
-    default: ""
-  },
-  imageList:{
-    type:Array,
-    required:true
-  }
-});
-const {current,label,imageList} = toRefs(props)
-
-const showImages = ref([]);
-const activeIndex = ref(4)
-let length = 5;
-let start = imageList.value.length - length;
-function getActive(val){
-  return activeIndex.value == val ? "active" : "";
-}
-
-function clickImg(val){
-  activeIndex.value = val;
-  reCurrent()
-  emit("selectImg",showImages.value[activeIndex.value])
-}
-
-function moveActive(val){
-  let res = activeIndex.value + val;
-  if(res == -1 || res > 4){
-    move(val)
-  }
-  res = res < 0 ? 0 : res;
-  res = res > 4 ? 4 : res;
-  activeIndex.value = res;
-  reCurrent()
-  emit("selectImg",showImages.value[activeIndex.value])
-}
-function move(val){
-  let res = start + val;
-  if(res >=0 && res <= imageList.value.length - length){
-    start = res;
-  }else{
-    return;
-  }
-  setShowImages();
-}
-
-function setShowImagesByCurrent(id){
-  //先找尾节点 再找首节点 长度不能超过length
-  let last = []; let first = []; let l=0;
-  for(let i=imageList.value.length - 1; i >= 0 && l < length;i--){
-    if(id >= imageList.value[i].id){
-      first.push({id:imageList.value[i].id,src:imageList.value[i].src, date:imageList.value[i].date})
-      start = i;
-      l++;
-    }
-  }
-  for(let i=0; i< imageList.value.length && l < length ;i++){
-    if(id < imageList.value[i].id){
-      last.push({id:imageList.value[i].id,src:imageList.value[i].src, date:imageList.value[i].date})
-      l++;
-    }
-  }
-  let index = 0;showImages.value = []
-  for(let i=first.length-1 ;i>=0;i--){
-    first[i].id == id && (activeIndex.value = index);
-    showImages.value.push({...first[i], index: index++ })
-  }
-  last.forEach((item)=>{
-    item.id == id && (activeIndex.value = index);
-    showImages.value.push({...item, index: index++ })
-  })
-  return showImages.value[activeIndex.value];
-}
-
-function reCurrent(){
-  current.value = new Date(showImages.value[activeIndex.value].date).getTime();
-}
-
-function setShowImages(){
-  showImages.value = [];
-  let index = 0;
-  for(let i = start;i< start + length;i++){
-    showImages.value.push({src:imageList.value[i].src,date:imageList.value[i].date,index:index++})
-  }
-}
-setShowImagesByCurrent(current.value)
-defineExpose({setShowImagesByCurrent})
-</script>
-
-<style lang="scss" scoped>
-
-.mainDiv{
-  height: 100%;
-  width: 100%;
-  box-sizing: border-box;
-  padding-top: 14px;
-  display: flex;
-  .up{
-    width: 24px;
-    height: 100%;
-    background: rgba(25,141,177,0.9);
-    border-radius: 4px 0px 0px 4px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    .img{
-      width: 8px;
-      height: 16px;
-      background-image: url("@/assets/img/left.png");
-      background-size: 100% 100%;
-    }
-  }
-  .images{
-    height: 100%;
-    padding-left: 7px;
-    padding-right: 7px;
-    width: calc(100% - 48px);
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-around;
-    .item{
-      width: 96px;
-      height: 100%;
-      background: rgba(0,77,101,0.6);
-      border-radius: 4px;
-      border: 1px solid rgba(81,233,240,0.3);
-      box-sizing: border-box;
-      cursor: pointer;
-      position: relative;
-      font-weight: 400;
-      color: #FFFFFF;
-      img{
-        width: 100%;
-        height: 100%;
-      }
-      .date{
-        position: absolute;
-        height: 24px;
-        width: 100%;
-        background: rgba(3,30,35,0.8);
-        border-radius: 0px 0px 4px 4px;
-        bottom: 0px;
-        line-height: 24px;
-        text-align: center;
-      }
-    }
-    .active{
-      width: 96px;
-      height: 100%;
-      border-radius: 4px;
-      border: 2px solid #51E9F0;
-      box-sizing: border-box;
-      position: relative;
-      color: #00FFF0;
-    }
-    .active:after{
-      position: absolute;
-      content:"";
-      left: calc(50% - 9px);
-      top: -23px;
-      width: 0px;
-      height: 0px;
-      border: 9px solid #000;
-      border-radius: 4px;
-      border-top-color: transparent;
-      border-bottom-color: #51E9F0;
-      border-left-color: transparent;
-      border-right-color: transparent;
-    }
-  }
-  .down{
-    width: 24px;
-    height: 100%;
-    background: rgba(25,141,177,0.9);
-    border-radius: 0px 4px 4px 0px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    .img{
-      width: 8px;
-      height: 16px;
-      background-image: url("@/assets/img/right.png");
-      background-size: 100% 100%;
-    }
-  }
-}
-
-</style>

src/components/TimeLine.vue

@@ -1,148 +0,0 @@
-<template>
-  <from>
-  <div class="time_line">
-    <div class="up yse-events">
-      <div class="line"></div>
-      <el-radio-group @change="dateChange" v-model="radioVal">
-        <el-radio  :label="dateFormat(new Date(item),'YY-mm-dd')"  v-for="item in timeList" :key="item"  ></el-radio>
-      </el-radio-group>
-    </div>
-    <div class="down">
-      <div :class="getActive(item)" v-for="item in timeList" :key="item">
-        {{dateFormat(new Date(item),"mm/dd")}}
-      </div>
-    </div>
-  </div>
-  </from>
-</template>
-
-<script setup>
-import {onMounted,onBeforeUnmount,ref,watch,toRefs} from "vue";
-import {dateFormat} from "@/utils/date_util.js"
-
-const emit = defineEmits(["dateChange"]);
-
-
-const radioVal = ref(null);
-
-const props = defineProps({
-  today:{
-    type: Date,
-    default: new Date()
-  },
-  current:{
-    type: Date,
-    default: new Date()
-  },
-  timeList:{
-    type: String,
-    required:true
-  }
-})
-const {today,current,timeList} = toRefs(props)
-current.value && (
-    radioVal.value = dateFormat(new Date(current.value),'YY-mm-dd')
-)
-
-
-// const oneDay = 24 * 3600 * 1000;
-// for (let i = 9; i >= 0; i--) {
-//   const date = new Date(today.value - (i * oneDay)); // 计算当前日期和时间的毫秒数
-//   timeList.value.push(date);
-// }
-
-function getActive(item){
-  return item == radioVal.value ? "active" : "";
-}
-
-function dateChange(val){
-  emit("dateChange", new Date(val).getTime());
-}
-
-
-
-
-
-
-
-
-
-
-</script>
-
-<style lang="scss" >
-$timeline-bg-color:rgba(3,44,57);
-$un-active-color:#B4FFFB;
-$active-color:#00FFF0;
-
-
-.time_line{
-  width: 100%;
-  height: 64px;
-  z-index: 3;
-  background: $timeline-bg-color;
-  border-radius: 4px;
-  border: 1px solid rgba(81,233,240,0.3);
-  box-sizing: border-box;
-  .up{
-    position: relative;
-    height: 60%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    padding-left: 26px;
-    padding-right: 26px;
-    .line{
-      position: absolute;
-      top: calc(50% - 1px);
-      left: calc(4% + 4px);
-      width: calc(92% - 8px);
-      height: 1px;
-      background-color: rgba(180,255,251,0.5);
-    }
-    .el-radio-group{
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      width: 100%;
-      .el-radio{
-        border-color: $un-active-color;
-        --el-radio-input-bg-color:rgba(3,44,57);//radio背景色
-        --el-radio-input-border-color-hover:#B4FFFB;//移入鼠标后的颜色
-        //--el-radio-input-border-color:red;
-        .el-radio__input.is-checked+.el-radio__label{
-          display: none;
-        }
-        .el-radio__label{
-          display: none;
-        }
-        //radio选中后的颜色
-        .el-radio__input.is-checked .el-radio__inner {
-          border-color: $un-active-color;
-          background: $timeline-bg-color;
-        }
-        //radio中心的圆球
-        .el-radio__inner::after{
-          width: 7px;
-          height: 7px;
-          background-color:$active-color;
-        }
-      }
-    }
-  }
-  .down{
-    height: 40%;
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    justify-content: space-between;
-    padding-left: 16px;
-    padding-right: 16px;
-    color: $un-active-color;
-    .active{
-      color: $active-color;
-    }
-  }
-}
-</style>

src/components/TreeDialog.vue

@@ -1,434 +0,0 @@
-<template>
-  <el-dialog
-      class="my-dialog yse-events"
-      :align-center="true"
-      with-header="false"
-      destroy-on-close
-      :model-value="showDialog"
-      @close="closeDialog()"
-      :modal="true"
-  >
-    <div class="dialog-box">
-      <div class="title">
-        <div class="myclose cursor-pointer" @click="closeDialog"></div>
-      </div>
-      <div class="my-body">
-        <div class="left">
-          <div class="img-box">
-            <img class="img" :src="base_img_url2 + currentImg + '?imageView2/1/w/1000/interlace/1'" />
-          </div>
-          <div class="img-list">
-            <ImageSelect  v-if="imageList.length > 0" :label="rowData.get('code')" :imageList="imageList"  @selectImg="selectImg"  :current="currentImgId"></ImageSelect>
-          </div>
-        </div>
-        <div class="right">
-          <div class="basic green-tabs">
-            <el-tabs v-model="basicTabVal">
-              <el-tab-pane  name="first">
-                <template #label>
-                <span class="tab-label"  @click="showZNSB = true;">
-                  <span>
-                    <el-icon><Document /></el-icon>
-                    基本信息
-                  </span>
-                </span>
-                </template>
-                <div class="context">
-                  <div class="name">编号</div>
-                  <div class="val">{{rowData.get("code")}}</div>
-                  <div class="name">树种</div>
-                  <div class="val">{{rowData.get("pz")}}</div>
-                  <div class="name">冠幅</div>
-                  <div class="val">无</div>
-                  <div class="name">树龄</div>
-                  <div class="val">无</div>
-                  <div class="name">产量估计</div>
-                  <div class="val">无</div>
-                  <div class="name">成本投入</div>
-                  <div class="val">无</div>
-                  <div class="name">经纬度</div>
-                  <div class="val">{{location}}</div>
-                  <div class="name"></div>
-                  <div class="val"></div>
-                </div>
-              </el-tab-pane>
-              <el-tab-pane v-if="false"  name="second">
-                <template #label>
-                <span class="tab-label"  @click="showZNSB = true;">
-                  <span>
-                    <el-icon><Checked /></el-icon>
-                    农事列表
-                  </span>
-                </span>
-                </template>
-                <div class="table">
-                  <el-row class="row row-bg" :gutter="0">
-                    <el-col :span="2"><div class="head" >时间</div></el-col>
-                    <el-col :span="2"><div class="head" >温度</div></el-col>
-                    <el-col :span="2"><div class="head" >天气</div></el-col>
-                    <el-col :span="2"><div class="head" >下发人</div></el-col>
-                    <el-col :span="2"><div class="head" >物候期</div></el-col>
-                    <el-col :span="4"><div class="head" >药物</div></el-col>
-                    <el-col :span="2"><div class="head" >配比/倍</div></el-col>
-                    <el-col :span="2"><div class="head" >用量</div></el-col>
-                    <el-col :span="2"><div class="head" >作用</div></el-col>
-                    <el-col :span="2"><div class="head" >方式</div></el-col>
-                    <el-col :span="2"><div class="head" >执行人</div></el-col>
-                  </el-row>
-                  <div v-for="(item,index) in nsList" :key="index" >
-                    <el-row class="row row-bg" :gutter="0">
-                      <el-col :span="2"><div class="text1" >{{item.startDate.substr(5)}}</div></el-col>
-                      <el-col :span="2"><div class="text2" >{{item.wendu}}</div></el-col>
-                      <el-col :span="2"><div class="text2"  >{{item.tianqi}}</div></el-col>
-                      <el-col :span="2"><div class="text2"  >{{item.createdName}}</div></el-col>
-                      <el-col :span="2"><div class="text2" >{{item.periodName}}</div></el-col>
-                      <el-col :span="4"><div class="text2"  >{{ item.actionName }}</div></el-col>
-                      <el-col :span="2"><div class="text2"  >{{ item.peibi }}</div></el-col>
-                      <el-col :span="2"><div class="text2"  >{{ item.yongliang }}</div></el-col>
-                      <el-col :span="2"><div class="text2" >{{ item.nsTypeName }}</div></el-col>
-                      <el-col :span="2"><div class="text2"  >{{ item.execStyle }}</div></el-col>
-                      <el-col :span="2"><div class="text2"  >{{ item.executorName }}</div></el-col>
-                    </el-row>
-                  </div>
-                      <el-pagination class="smallpagination " small @update:current-page="loadNsList"
-                                     :current-page="params.page" :page-size="params.limit"  layout="pager" :total="params.total" />
-                </div>
-              </el-tab-pane>
-              <el-tab-pane name="third" v-if="false">
-                <template #label>
-                  <span class="tab-label" @click="showTotalInfo">
-                    <span>
-                      <el-icon><Discount /></el-icon>
-                      统计信息
-                    </span>
-                  </span>
-                </template>
-                <div class="table">
-                  <TreeInfoLineDialog ref="treeInfoLineDialog" :treeId="treeId" v-show="!showZNSB"></TreeInfoLineDialog>
-                </div>
-              </el-tab-pane>
-            </el-tabs>
-          </div>
-          <div class="grow" v-if="showZNSB">
-            <div class="tabs">
-              <div class="item" @click="clickTabs(1)" :class="getTabsSelectActive(1)">智能识别</div>
-
-            </div>
-            <div class="content">
-              <img src="@/assets/tree_model.png">
-              <div class="pop-info">
-                <div class="item"><div class="label">果实颜色：</div><div class="val">{{ rowData.get("colorName") || "无" }}</div></div>
-                <div class="item"><div class="label">果实大小：</div><div class="val">{{ rowData.get("gsdx") }}cm</div></div>
-                <div class="item"><div class="label">果实密度：</div><div class="val">{{ rowData.get("gsmd") || "无"}} </div></div>
-                <div class="item"><div class="label">果实数量：</div><div class="val">{{ rowData.get("gssl") || "无"}}</div></div>
-                <div class="item"><div class="label">叶片卷曲度：</div><div class="val">{{ rowData.get("ypjqd") || "无"}}</div></div>
-                <div class="item"><div class="label">病虫害：</div><div class="val">{{ rowData.get("bh") == 1 ?"有病害" :"无病害" }}</div></div>
-                <div class="item"><div class="label">叶片光泽度：</div><div class="val">{{ rowData.get("ypgzd") || "无"}}</div></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </el-dialog>
-</template>
-
-<script setup>
-import {onMounted, toRefs, ref,watch} from "vue";
-import {base_img_url2} from "../api/config"
-import ImageSelect from "./ImageSelect";
-import TimeLine from "./TimeLine";
-import TreeInfoLineDialog from "./chartDialog/TreeInfoLineDialog";
-const emit = defineEmits(["closeDialog"]);
-const title = ref(null)
-const imageList = ref([])
-const basicTabVal = ref("first");
-const tabsActiveVal = ref(1);
-const nsList = ref([]);
-const lastDay = ref(null);
-const currentImgId = ref(null);
-const treeId = ref(null);
-const location = ref(null)
-const props = defineProps({
-  showDialog: {
-    type: Boolean,
-    default: true,
-  },
-  rowData: {
-    type: Object,
-    default: null,
-  },
-});
-const {rowData, showDialog } = toRefs(props);
-const currentImg = ref("")
-const showZNSB = ref(true);
-const treeInfoLineDialog = new ref(null);
-onMounted(async () => {
-  let arr = rowData.value.getGeometry().getCoordinates();
-  location.value =arr[0] + ","  +  arr[1];
-  treeId.value = rowData.value.getProperties().id;
-  title.value = rowData.value.code  + "果树详细信息";
-  // loadNsList();
-  loadImages(treeId.value);
-
-})
-// const params = ref({page:1,limit:4});
-
-async function loadImages(id){
-  let {code,data} = await VE_API.tree_grow_data.growDataByTreeId({treeId:id,limit:7});
-  let array = []
-  for(let i = data.length - 1; i >=0; i--){
-    if(i == 0){
-      lastDay.value = new Date(data[i].createDate).getTime();
-      currentImgId.value = data[i].id;
-      currentImg.value = data[i].img
-    }
-    array.push({id:data[i].id, src:data[i].img, date:data[i].createDate})
-  }
-  imageList.value = array;
-}
-
-// async function loadNsList(page){
-//   params.value["treeId"] = rowData.value.get("id");
-//   params.value["page"] = page;
-//   let {code,data,count} = await VE_API.nsjy.page(params.value)
-//   params.value["total"] = count;
-//   nsList.value = data;
-// }
-
-function selectImg(obj){
-  currentImgId.value = obj.id;
-  currentImg.value = obj.src;
-}
-
-function clickTabs(val){
-  tabsActiveVal.value = val;
-}
-function getTabsSelectActive(val){
-  return tabsActiveVal.value == val ? "active" : "";
-}
-
-function closeDialog(){
-  showDialog.value = false;
-  emit("closeDialog")
-}
-function showTotalInfo(){
-  // let tree = rowData.value.getProperties();
-  // treeInfoLineDialog.value.load(tree.id);
-  showZNSB.value = false;
-}
-</script>
-
-<style lang="scss" scoped>
-$title-height:44px;
-$body-height:calc(100% - $title-height);
-
-.dialog-box{
-  font-family: PingFangSC-Regular, PingFang SC;
-  position: absolute;
-  left: calc(50% - 700px);
-  top:calc(50% - 316px);
-  width: 1400px;
-  height: 632px;
-  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{
-    position: relative;
-    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);
-    .myclose{
-      position: absolute;
-      right: 0px;
-      top: calc($title-height / 2 - 8px);
-      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;
-    .left{
-      float: left;
-      width: 48%;
-      height: 100%;
-      .img-box{
-        height: 85%;
-        background: rgba(0,77,101,0.6);
-        border-radius: 4px;
-        border: 1px solid rgba(81,233,240,0.3);
-        box-sizing: border-box;
-        .img{
-          height: 100%;
-          width: 100%;
-        }
-        .time_line_box{
-          height: 14%;
-        }
-      }
-      .img-list{
-        height: 15%;
-      }
-    }
-    .right{
-      float: right;
-      width: 50%;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      .basic{
-        width: 100%;
-        height: 50%;
-        .tab-label{
-          width: 80px;
-          height: 25px;
-          span{
-            height: 14px;
-            line-height: 14px;
-            display: flex;
-            align-items: center;
-            justify-content: space-around;
-          }
-        }
-        .context{
-          display: flex;
-          flex-wrap: wrap;
-          font-size: 12px;
-          font-weight: 400;
-          color: #FFFFFF;
-          .name{
-            background-color: #0E3B47;
-            width: 20%;
-            height: 38px;
-            padding: 9px;
-            text-align: right;
-            box-sizing: border-box;
-            border: 1px solid rgba(81,233,240,0.3)
-          }
-          .val{
-            background-color: #011B24;
-            width: 30%;
-            height: 38px;
-            padding: 9px;
-            box-sizing: border-box;
-            text-align: left;
-            border: 1px solid rgba(81,233,240,0.3)
-          }
-        }
-
-        .table{
-          font-size: 12px;
-          color: #FFFFFF;
-          .row{
-            width: 100%;
-            height: 38px;
-            background-color: #032C3980;
-            box-sizing: border-box;
-            border: 1px solid rgba(81,233,240,0.3);
-            display: flex;
-            align-items: center;
-            justify-content: space-around;
-            .text1{font-weight: 600;color: #00FFF0; text-align: center;
-            }
-            .text2{font-weight: 600;color: #D09C00; text-align: center;
-            }
-
-            .head{
-              color: #B4FFFB; text-align: center;
-            }
-          }
-        }
-
-      }
-      .grow{
-        width: 100%;
-        height: 50%;
-        .tabs{
-          font-size: 14px;
-          font-weight: 400;
-          color: #B4FFFB;
-          height: 36px;
-          line-height: 36px;
-          text-align: center;
-          display: flex;
-          box-sizing: border-box;
-          .item{
-            cursor: pointer;
-            flex-grow:1;
-            height: 100%;
-            background-color: #011B24;
-            border: 1px solid rgba(81,233,240,0.3)
-          }
-          .active{
-            color: #00FFF0;
-            background: rgba(3,44,57,0.8);
-            box-shadow: inset 0px 0px 20px 4px rgba(0,255,240,0.5);
-            border: 1px solid #51E9F0;
-          }
-        }
-        .content{
-          position: relative;
-          width: 100%;
-          height: calc(100% - 36px);
-          border: 1px solid rgba(81,233,240,0.3);
-          padding: 10px;
-          box-sizing: border-box;
-          text-align: center;
-          img{
-            height: 100%;
-            width: 40%;
-          }
-          .pop-info{
-            font-size: 14px;
-            font-family: PingFangSC-Regular, PingFang SC;
-            top: 12px;
-            right: 12px;
-            position: absolute;
-            width: 160px;
-            height: 215px;
-            background: rgba(3,44,57,0.8);
-            border: 1px solid rgba(81,233,240,0.3);
-            box-sizing: border-box;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-around;
-            align-items: center;
-            .item{
-              width: 100%;
-              .label{
-                color: #B4FFFB;
-                float: left;
-                text-align: left;
-                width: 60%;
-                padding-left: 10px;
-                box-sizing: border-box;
-              }
-              .val{
-                color: #FFFFFF;
-                float: right;
-                text-align: left;
-                width: 40%;
-              }
-            }
-          }
-        }
-      }
-
-    }
-  }
-
-}
-
-</style>

src/components/chartDialog/TreeInfoLineDialog.vue

@@ -1,164 +0,0 @@
-<template>
-    <div class="centerDiv">
-      <Legend
-      ref="legendRef"></Legend>
-      <Change ref="changeRef" @changeWhq="changeWhq"></Change>
-      <VChange ref="vChangeRef" @changeType="changeType"></VChange>
-      <div class="content scrollable" ref="contentDivRef">
-          <WhiteDotCharts
-            :currentPeriod="currentPeriod"
-            :bgColor="bgColors[0]"
-            :title="currentPeriod.name"
-            :targetName="targetName"
-            :targetField="targetField"
-            :treeGrowData="treeGrowData"
-            :treeId="treeId"
-            ref="chartsRef"
-          >
-          </WhiteDotCharts>
-      </div>
-    </div>
-</template>
-
-<script setup>
-import {ref,onMounted,nextTick, toRefs} from "vue";
-import WhiteDotCharts from "./charts/PercenCharts";
-import Legend from "./charts/Legend";
-import Change from "./charts/Change";
-import VChange from "./charts/VChange";
-const showWhq = ref(1);
-const bgColors = ["#FFFFFF","#FFFFFF"];
-const periodList = ref([]);
-const nsType = ref([]);
-const nsData = ref([]);
-const treeGrowData = ref([]);
-const legendRef = ref(null);
-const changeRef = ref(null);
-const vChangeRef = ref(null);
-const targetName = ref([]);
-const targetField = ref([]);
-const currentPeriod = ref({ "id":1,
-            "name":"白点期",
-            "attrFields":["whitePoint"],
-            "attrNames":["白点率"]});
-const chartsRef = ref(null);
-function changeWhq(e){
-  console.log(e);
-  showWhq.value = e
-  let period = periodList.value.find(item=>item.id == e);
-  getDataByWhq(e,function(){
-    if(period){
-      let {attrFields,attrNames,id,name} = period;
-      targetName.value = attrNames[0];
-      targetField.value = attrFields[0];
-      period.nsType = nsType.value;
-      currentPeriod.value = period;
-      vChangeRef.value.setTypeData(attrFields,attrNames);
-    }
-  });
-}
-async function changeType(e){
-  let targetField1 = e;
-  let index = currentPeriod.value.attrFields.indexOf(targetField1);
-  let targetName1 = currentPeriod.value.attrNames[index];
-  targetField.value = targetField1;
-  targetName.value = targetName1;
-  nextTick(()=>{
-    chartsRef.value.changeType();
-  })
-}
-const props = defineProps({
-  treeId: {
-    type: Number,
-    default: null,
-  },
-});
-const {treeId} = toRefs(props)
-function getDataByWhq(periodId,callback){
-  //获取农事类型
-  VE_API.tree.nongShiList({periodId:periodId}).then(res=>{
-    if(res.code == 0){
-      if(legendRef.value){
-        legendRef.value.changeLegedData(res.data);
-      }
-      nsType.value = res.data;
-      if(callback){
-        callback();
-      }
-    };
-  });
-}
-async function getPeriod(){
-  let {code,data} = await VE_API.lzxt.periodList();
-  if(code == 0){
-    periodList.value = data;
-    if(changeRef.value){
-      changeRef.value.setPeriodData(data);
-    }
-  }
-}
-onMounted(async()=>{
-  await getPeriod();
-  getDataByWhq(showWhq.value,function(){
-    let period = periodList.value.find(item=>item.id == showWhq.value);
-    if(period){
-      let {attrFields,attrNames,id,name} = period;
-      targetName.value = attrNames[0];
-      targetField.value = attrFields[0];
-      period.nsType = nsType.value;
-      currentPeriod.value = period;
-      vChangeRef.value.setTypeData(attrFields,attrNames);
-    }
-  });
-})
-
-function getData(treeId_){
-  let forms = new FormData();
-  forms.append("treeId",treeId);
-  //生长数据列表
-  VE_API.tree.treeGrowData(forms).then(res=>{
-    if(res.code == 0){
-      treeGrowData.value = res.data;
-    }
-  });
-  let forms2 = {treeId:treeId,dateRange:['2023-07-01','2023-08-30'],direction:0,sortField:['startDate'],page:1,limit:10000}
-  VE_API.tree.siteList(forms2).then(res=>{
-    if(res.code == 0){
-      nsData.value = res.data;
-    }
-  });
-}
-</script>
-
-<style lang="scss" scoped>
-.centerDiv{
-  // margin-left: 20px;
-  // border: 2px solid #e2dede;
-  // padding: 20px;
-  position: relative;
-  float: left;
-  display: flex;
-  flex-direction: column-reverse;
-}
-.centerDiv .content{
-  white-space: nowrap;
-  overflow-x: auto;
-  /* 可选项：也可以设置设置一些其他的样式 */
-  width: 100%;
-  height: 100%;
-  scroll-margin-right: 0px;
-}
-::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-  background-color: #F5F5F5;
-}
-::-webkit-scrollbar-thumb {
-  background-color: #888;
-  border-radius: 10px;
-}
-::-webkit-scrollbar-track {
-  background-color: #F5F5F5;
-  border-radius: 10px;
-}
-</style>

src/components/chartDialog/charts/Change.vue

@@ -1,44 +0,0 @@
-<template>
-  <div class="a">
-    <div  class="legend-entry2">
-      <el-radio-group @change="changeWhq" v-model="val">
-        <el-radio style="margin-right:8px;" v-for="item in periodList" :label="item.id"  :key="item.id">{{item.name}}</el-radio>
-      </el-radio-group>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import {ref} from "vue";
-const val = ref(1)
-const emit = defineEmits(["changeWhq"]);
-//物候期
-const periodList = ref([])
-
-function setPeriodData(data){
-  periodList.value = data;
-}
-function changeWhq(e){
-  emit("changeWhq",e);
-}
-defineExpose({
-  setPeriodData
-})
-</script>
-
-<style lang="scss" scoped>
-.a{
-  position: absolute;
-  width: 100%;
-  top: 5%;
-  right: 30px;
-  z-index: 100;
-}
-.legend-entry2 {
-  float: right;
-  display: flex;
-  flex-direction: row;
-  margin-right:10%;
-}
-
-</style>

src/components/chartDialog/charts/Legend.vue

@@ -1,49 +0,0 @@
-<template>
-  <div class="container">
-    <div v-for="(legend, i) in legendData" :key="i" class="legend-entry">
-        <span class="legend-circle" :style="{ 'background-color': legend.color }"></span>
-        <span class="legend-label">{{ legend.label }}</span>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import {ref,onMounted} from "vue";
-import {getLegendData} from "./common";
-let legendData = ref([]);
-
-function changeLegedData(list){
-  legendData.value = getLegendData(list);
-}
-defineExpose({changeLegedData})
-</script>
-
-<style lang="scss" scoped>
-.container{
-  position: absolute;
-  width: 100%;
-  bottom: 8%;
-  right: 5%;
-  z-index: 100;
-}
-.legend-entry {
-  float: right;
-  display: flex;
-  flex-direction: row;
-  margin-right: 5px;
-}
-
-.legend-circle {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  display: inline-block;
-  margin-right: 3px;
-  border: 1px solid black;
-}
-
-.legend-label {
-  font-size: 14px;
-  color: black;
-}
-</style>

src/components/chartDialog/charts/PercenCharts.vue

@@ -1,217 +0,0 @@
-<template>
-  <div :style="{display:'inline-block',height:'500px',width:'680px'}" ref="chartsRef" >
-  </div>
-</template>
-<script setup>
-import {reactive, onMounted, ref,watch} from "vue";
-import {getXAxis,getNongDataTotal,getSeries,getYAxisParams,getTwoMonthDateStr,getNSData} from "./common";
-import * as echarts from "echarts";
-let myChart = null;
-let props = defineProps({
-  title: {//标题，物候期
-    type: String,
-    default: "",
-  },
-  targetField:{//物候期指标字段
-    type: String,
-    default: "",
-  },
-  targetName:{//物候期指标名称
-    type: String,
-    default: "",
-  },
-  last:{
-    type:Boolean,
-    default:false
-  },
-  bgColor:{
-    type:String,
-    default:'#F5F5F5'
-  },
-  treeId:{
-    type:Number,
-    default:null
-  },
-  currentPeriod:{
-    type: Object,
-    default: new Object()
-  },
-})
-const chartsRef = ref(null);
-const treeGrowData = ref(null);
-let intFields = ['flowerLength','yield'];
-let percent = true;
-let nzNames = [];
-let numberInterval = null;
-const nzv = ref([]);
-const treeNSData = ref([]);
-
-const option = reactive({
-  backgroundColor:props.bgColor,
-  "title": {
-    "text": "",
-    show:true,
-  },
-  animation: true,
-  "tooltip": [{
-    "trigger": "item",
-    formatter:function(data){
-      if(data.data.value < 0){
-        return data.seriesName;
-      }
-      if(percent){
-        return data.name+"<br/>"+data.seriesName+" : "+(data.data.value * 100).toFixed(0) + "%";
-      }else{
-        return data.name+"<br/>"+data.seriesName+" : "+(data.data.value).toFixed(2);
-      }
-      
-    }
-  }],
-  "grid": {
-    "left": "3%",
-    "right": "3%",
-    show: true,
-    z: 0,
-    containLabel: true,
-    backgroundColor: "rgba(0,0,0,0)",
-    borderWidth: 1,
-    borderColor: "#ccc"
-  },
-  "xAxis": {
-    "type": "category",
-    "boundaryGap": true,
-    "data": [],
-    axisLabel: {
-      formatter: function (value, index) {
-        // 返回自定义格式的标签
-        return value.substr(5,10);
-      }
-    },
-    minorTick: {
-      show: false
-    },
-    minorSplitLine: {
-      show: true
-    },
-    splitLine: {
-      show: true
-    }
-  },
-  "yAxis": {
-    "type": "value",
-    interval:0.1,
-    min: -1, // 自定义最小值
-    max: 1, // 自定义最大值
-    axisLabel: {
-      show: true,
-      interval: 'auto',
-      formatter: function(value,index){
-        if(value < 0){
-          for(let i=0;i< nzNames.length;i++){
-            if((value * 100).toFixed(0) == (nzv.value[i] * 100).toFixed(0)){
-              return nzNames[i];
-            }
-          }
-          return  "";
-        }else{
-          if(percent){
-            value = (value * 100).toFixed(0)
-            if(value % 20 == 0){
-              return value + "%";
-            }
-          }else{
-            if(numberInterval != null && Math.ceil(value) % numberInterval == 0){
-              return Math.ceil(value);
-            }else{
-              return "";
-            }
-          }
-        }
-      }
-    }
-  },
-  "series": [
-  ]
-});
-watch(() => props.currentPeriod, (newVal, oldVal) => {
-  getGrowData(props.treeId,function(){
-    //不是整数的指标，最小值为0
-    getTreeNSData(function(){
-      refreshChart();
-    });
-  });
-})
-function changeType(){
-  getTreeNSData(function(){
-    refreshChart();
-  });
-}
-
-function refreshChart(){
-  //y轴
-  //不是整数的指标，最小值为0
-  if(intFields.indexOf(props.targetField) != -1){
-      percent = false;
-    }else{
-      percent = true;
-    }
-    let [min1,max1,interval1,nzNames1,nzv1] = getYAxisParams(props.targetField,props.currentPeriod,treeGrowData.value,percent)
-    option.title.text = props.title;
-    nzNames = nzNames1;
-    nzv.value = nzv1;
-    option.yAxis.interval = interval1;
-    option.yAxis.min = min1;
-    option.yAxis.max = max1;
-
-    numberInterval = interval1*3;
-    //x轴
-    option.xAxis.data = getXAxis();
-    //series
-    let series = getSeries(props.currentPeriod,props.targetName,props.targetField,treeGrowData.value);
-    // option.series = series;
-    console.log(series);
-    //农事活动
-    let nsSeries = getNSData(treeNSData.value,props.currentPeriod,nzv.value);
-    option.series = series.concat(nsSeries);
-    console.log(JSON.stringify(option));
-    if(myChart){
-      myChart.clear();
-      myChart.setOption(option);
-    }
-}
-async function getTreeNSData(callback){
-  if(treeNSData.value  && treeNSData.value.length != 0){
-    callback();
-    return;
-  }
-  let forms2 = {treeId:props.treeId,dateRange:getTwoMonthDateStr(),direction:0,sortField:['startDate'],page:1,limit:10000}
-  let {code,data} = await VE_API.tree.siteList(forms2);
-  if(code == 0){
-    treeNSData.value = getNongDataTotal(data);
-    callback();
-  }
-}
-async function getGrowData(treeId,callback){
-  if(treeGrowData.value !=  null){
-    callback();
-  }
-  let forms = new FormData();
-  forms.append("treeId",treeId);
-  let list = [];
-  //生长数据列表
-  let {code,data} = await VE_API.tree.treeGrowData(forms);
-  if(code == 0){
-    list = data;
-  }
-  treeGrowData.value = list;
-  callback();
-}
-const autoWidth = ref(option.xAxis.data.length * 60)
-
-onMounted(async ()=>{
-  myChart = echarts.init(chartsRef.value,{width:"90%"});
-})
-defineExpose({
-  changeType
-})
-</script>

src/components/chartDialog/charts/VChange.vue

@@ -1,62 +0,0 @@
-<template>
-    <div class="a">
-      <div  class="legend-entry2">
-        <el-radio-group @change="changeType" v-model="val" direction="vertical">
-          <el-radio style="margin-right:8px;" v-for="item in typeList" :label="item.label"  :key="item.label">{{item.name}}</el-radio>
-        </el-radio-group>
-      </div>
-    </div>
-  </template>
-  
-  <script setup>
-  import {ref} from "vue";
-  const val = ref(null)
-  const emit = defineEmits(["changeType"]);
-  //指标类型
-  const typeList = ref([])
-
-  function setTypeData(attrFields,attrNames){
-    let data = [];
-    for(let i = 0;i<attrFields.length;i++){
-      data.push({
-        label:attrFields[i],
-        name:attrNames[i]
-      })
-    }
-    val.value = attrFields[0]?attrFields[0]:null;
-
-    typeList.value = data;
-  }
-  function changeType(e){
-    emit("changeType",e);
-  }
-  defineExpose({
-    setTypeData
-  })
-  </script>
-  
-  <style lang="scss" scoped>
-  .a{
-    position: absolute;
-    width: 13%;
-    top: 2px;
-    right: 0px;
-    z-index: 100;
-  }
-  .legend-entry2 {
-    float: right;
-    display: flex;
-    flex-direction: row;
-    margin-right:5px;
-  }
-:deep(.el-radio-group) {
-  display: block;
-  // color:bisque;
-}
-
-:deep(.el-radio) {
-  display: block;
-  // color:bisque;
-}
-</style>
-  

src/components/chartDialog/charts/common.js

@@ -1,223 +0,0 @@
-const percent = 'percent';
-let intFields = ['flowerLength','yield'];
-//农事颜色数组
-let rongShiColors = ["#548235","#4472C4","#FFD966","#C5E0B4","#F8CBAD",'#3FD0F9','#4962FC','#d223e7','#fe8104','#3FD0F9'];
-
-function getTwoMonthDate(){
-    let now = new Date();
-
-    // 生成日期数组
-    let dateArray = [];
-    for(let i = 0; i < 60; i++) {
-        let date = new Date(now.getTime());
-        date.setDate(date.getDate() - i);
-        dateArray.push(date.toISOString().slice(0,10));
-    }
-    dateArray = dateArray.reverse();
-    return dateArray;
-}
-function getDatesBetween(startDate, endDate) {
-    const start = new Date(startDate);
-    const end = new Date(endDate);
-
-    const dates = [];
-
-    let current = start;
-
-    while (current <= end) {
-        dates.push(new Date(current).toISOString().slice(0,10));
-        current.setDate(current.getDate() + 1);
-    }
-
-    return dates;
-}
-function getTwoMonthDateStr(){
-    let now = new Date();
-    let date = new Date(now.getTime());
-    // 生成日期数组
-    date.setDate(date.getDate() - 60);
-    let str1 = date.toISOString().slice(0,10);;
-    let str2 = now.toISOString().slice(0,10);
-    return [str1,str2];
-}
-function getLegendData(nsType){
-    let arr = [];
-    for(let i=0;i<nsType.length;i++){
-        let item = nsType[i];
-        arr.push({label:item.name, color:rongShiColors[i]})
-      }
-    return arr;
-}
-function getXAxis(){
-   let date = getTwoMonthDate();
-   return date;
-}
-
-function getLegend(names){
-    let legend = {
-        "orient":"horizontal",
-        "right":50,
-        "top":0,
-        "itemWidth":20,
-        "itemHeight":20,
-        "align":"right",
-        "width":"100%",
-        "itemGap":5,
-        "show":false,
-        "data":[]
-    }
-    legend.data = names;
-    return legend;
-}
-
-function getSeries(currentPeriod,targetName,targetField,list){
-    let nsType = currentPeriod.nsType;
-    let id = currentPeriod.id;
-    let periodMame = currentPeriod.name;
-    let series = [];
-
-    let serie = {'name':targetName,"type":"line","symbolSize":5,"data":[],"field":targetField}
-    series.push(serie);
-
-    list.forEach(item=>{
-        if(item.periodId == id){
-            series.find(function(serie){
-                if(item[serie.field]){
-                    let subItem = {"id":item.id,"value":item[serie.field],"createDate":item.createDate,"img":item.img};
-                    serie.data.push(subItem);
-                }
-            })
-        }
-    })
-    return series;
-}
-
-function getMaxValue(targetField,periodId,list){
-    if(intFields.indexOf(targetField) == -1){
-        return 1;
-    }
-    let maxValue = 0;
-
-    list.forEach(item=>{
-        if(item.id == periodId && item[targetField] > maxValue){
-            maxValue = item[targetField];
-        }
-    })
-    return maxValue;
-}
-
-function getYAxisParams(targetField,currentPeriod,list,percent){
-    let periodId = currentPeriod.id;
-    let maxValue = getMaxValue(targetField,periodId,list);
-
-    let nsType = currentPeriod.nsType;
-    let nzNames = [...nsType].map(item=>item.name);
-    let nzLength = nzNames.length == 0?2:nzNames.length;
-    let numberInterval = Math.ceil(maxValue/nzLength/3);
-    let interval = percent?0.1:numberInterval;
-    let max = numberInterval*nzLength*3+numberInterval//1.1*maxValue;
-    let min = -interval*3-3*interval*(nzLength-1);
-    // let max = -min;
-    if(percent){
-        max = 1;
-    }
-    let d = -3*interval;
-    let v = -2*interval;
-    let nzv = [];
-    for(let j = 0;j < nzLength;j++){
-        nzv.push(v+d*j)
-    }
-    return [min,max,interval,nzNames,nzv,Math.ceil(maxValue/numberInterval)];
-}
-
-function getNongDataTotal(list){
-    let newList = [];
-    for(let i = 0;i<list.length;i++){
-        let subItem = list[i];
-        let a = newList.find(function(item){
-            return item.actionName == subItem.actionName &&
-            item.nsTypeId == subItem.nsTypeId &&
-            item.endDate == subItem.endDate &&
-            item.startDate == subItem.startDate &&
-            item.periodName == subItem.periodName; //&&
-            // item.createdName == subItem.createdName &&
-            // item.executorName == subItem.executorName
-        });
-        if(!a){
-            newList.push(subItem);
-        }
-    }
-    return newList;
-}
-
-function getNSData(list,currentPeriod,nzv){
-    let nsSeries = [];
-    //农事类型
-    let nsType = currentPeriod.nsType;
-    let id = currentPeriod.id;
-    let periodName = currentPeriod.name;
-
-    nsType.forEach((item,index)=>{
-        let serie = {
-            "type":"line",
-            "symbol":"circle",
-            "symbolSize":6,
-            "lineStyle":{"color":"#00000000"},
-            "itemStyle":{"borderWidth":1,"borderColor":"#000000","color":rongShiColors[index]},
-            "data":getTemplate(),
-            "name":item.name
-        }
-        nsSeries.push(serie);
-    })
-    list.forEach(item=>{
-        if(item.periodName == periodName){
-            let createDate = item.startDate;
-            let endDate = item.endDate;
-            let nsTypeId = item.nsTypeId;
-            nsType.forEach(function(item1,index){
-                if(item1.id == nsTypeId){
-                    let value = nzv[index];
-                    let itemStyle  = {"color":"#ffffff"};
-                    let serie = nsSeries[index];
-                    let sData = serie.data.find(item=>item.createDate == createDate);
-                    let eData = serie.data.find(item=>item.createDate == endDate);
-                    debugger;
-                    if(sData){
-                        delete sData.mid;
-                        sData.value = value;
-                        //开始的白色圆点
-                        sData.itemStyle = itemStyle;
-                    }
-                    if(eData){
-                        delete eData.mid;
-                        //结束的默认颜色圆点
-                        eData.value = value;
-                    }
-                }
-            })
-        }
-    });
-    debugger;
-    return nsSeries;
-}
-
-function getTemplate(){
-    let arr = getTwoMonthDate();
-    let list = [];
-    arr.forEach(function(item,index){
-       let option =  {"value":null,"mid":"mid",createDate:item};
-       list.push(option);
-    })
-    return list;
-}
-export {
-    getXAxis,
-    getLegend,
-    getSeries,
-    getMaxValue,
-    getYAxisParams,
-    getLegendData,
-    getNongDataTotal,
-    getTwoMonthDateStr,
-    getNSData
-}

src/components/toolList.vue

@@ -0,0 +1,39 @@
+<template>
+  <div :class="['tool-list','tool-'+direction]">
+    <div class="tool-item">气象预警</div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+    direction:{
+        type:String,
+        defalut:'left'
+    },
+})
+</script>
+
+<style lang="scss" scoped>
+.tool-list {
+  width: 54px;
+  height: 100%;
+  background: #232323;
+  border: 0.6px solid rgb(255, 255, 255, 0.4);
+  border-left: none;
+  box-sizing: border-box;
+  border-radius: 4px;
+  &.tool-left{
+    margin-right: 10px;
+  }
+  &.tool-right{
+    margin-left: 10px;
+  }
+  .tool-item {
+    font-size: 20px;
+    writing-mode: vertical-rl; /* 从右到左的竖排 */
+    text-orientation: upright; /* 保持文字直立，而不是旋转 */
+    white-space: nowrap; /* 防止文本换行 */
+    line-height: 54px;
+  }
+}
+</style>

src/views/Home.vue

@@ -2,9 +2,9 @@
   <div class="base-container">
     <div class="header">
       <div class="title">
-        <img src="@/assets/images/common/logo.png" alt="">
+        <img src="@/assets/images/common/logo.png" alt="" />
         <span>飞鸟智慧巡园平台</span>
-        <img src="@/assets/images/common/logo-icon.png" alt="">
+        <img src="@/assets/images/common/logo-icon.png" alt="" />
       </div>
       <div class="date">
         <div>111</div>
@@ -17,9 +17,7 @@
     <div class="content">
       <!-- <div class="top"></div> -->
       <div class="left">
-        <div class="tool-list">
-          <div class="tool-item">气象预警</div>
-        </div>
+        <tool-list direction="left"></tool-list>
         <div class="chart-list">
           <div class="chart-item">
             <chart-box name="气象预警"></chart-box>
@@ -39,36 +37,34 @@
         <div class="list">
           <chart-box name="农事列表" arrow="arrow-left"></chart-box>
         </div>
-          <div class="tool-list">
-          <div class="tool-item">气象预警</div>
-        </div>
+        <tool-list direction="right"></tool-list>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import chartBox from '@/components/chartBox.vue';
-
+import chartBox from "@/components/chartBox.vue";
+import toolList from "@/components/toolList.vue";
 </script>
 
 <style lang="scss" scoped>
-.base-container{
+.base-container {
   width: 100%;
   height: 100vh;
   color: #fff;
   position: relative;
   box-sizing: border-box;
   background: red;
-  .header{
+  .header {
     width: 100%;
-    height: 76px;
+    height: 74px;
     display: flex;
     justify-content: space-between;
-    background: #000;
+    background: #101010;
     box-sizing: border-box;
-    
-    .title{
+
+    .title {
       width: 100%;
       height: 100%;
       font-size: 24px;
@@ -76,51 +72,36 @@ import chartBox from '@/components/chartBox.vue';
       line-height: 72px;
       padding-left: 20px;
       box-sizing: border-box;
-      background: url('@/assets/images/common/header-bg.png') no-repeat center center /100% 100%;
-      span{
+      background: url("@/assets/images/common/header-bg.png") no-repeat center
+        center / 100% 100%;
+      span {
         margin: 0 5px;
-        font-family: 'PangMenZhengDao';
+        font-family: "PangMenZhengDao";
       }
     }
-    .date{
+    .date {
       display: flex;
       align-items: center;
       width: 180px;
     }
   }
-  .content{
+  .content {
     width: 100%;
-    height: calc(100% - 76px);
+    height: calc(100% - 74px);
     display: flex;
     justify-content: space-between;
     box-sizing: border-box;
-    .left,.right{
+    .left,
+    .right {
       width: calc(376px + 54px);
       height: 95%;
       padding-top: 10px;
       box-sizing: border-box;
       display: flex;
-      .tool-list{
-        width: 54px;
-        height: 100%;
-        background: #232323;
-        border: 0.6px solid rgb(255, 255, 255,0.4);
-        border-left: none;
-        box-sizing: border-box;
-        border-radius: 4px;
-        margin-right: 10px;
-        .tool-item{
-          font-size: 20px;
-          writing-mode: vertical-rl; /* 从右到左的竖排 */  
-          text-orientation: upright; /* 保持文字直立，而不是旋转 */  
-          white-space: nowrap; /* 防止文本换行 */  
-          line-height: 54px;
-        }
-      }
-      .chart-list{
+      .chart-list {
         width: calc(100% - 54px - 10px);
         height: calc(100% - 30px);
-        .chart-item{
+        .chart-item {
           width: 100%;
           height: calc(100% / 4);
           box-sizing: border-box;
@@ -128,11 +109,8 @@ import chartBox from '@/components/chartBox.vue';
         }
       }
     }
-    .right{
-      .tool-list{
-        margin-left: 10px;
-      }
-      .list{
+    .right {
+      .list {
         width: 100%;
         height: 100%;
       }