fix:修改确权页面下拉框显示，删除多余图片

src/components/confirm.vue

@@ -1,96 +0,0 @@
-<template>
-  <el-dialog
-      class="v-dialog"
-      v-model="dialogVisibleShow"
-      width="550"
-      :show-close="false"
-  >
-    <template #header>
-      <div class="dialog-header">
-        <div class="">{{ title }}</div>
-        <el-icon @click="close()" class="close-icon" color="#00FFF0" size="20px"><CircleCloseFilled /></el-icon>
-      </div>
-    </template>
-    <div class="dialog-body">
-        {{msg}}
-    </div>
-    <template #footer>
-      <div class="dialog-footer">
-        <div class="btn cancel-btn" @click="close()">
-          取消
-        </div>
-        <div class="btn confirm-btn" @click="confirm()">
-          确认
-        </div>
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<script setup>
-  import {toRefs} from "vue";
-
-  let emit = defineEmits(["close","confirm"])
-
-  let props = defineProps({
-    dialogVisibleShow:{
-      type: Boolean,
-      required: true,
-    },
-    title: {
-      type: String,
-      required: true,
-    },
-    msg: {
-      type: String,
-      required: true,
-    },
-  })
-  const {dialogVisibleShow,title,msg} = toRefs(props)
-
-  function close(){
-    emit("close")
-  }
-
-  function confirm(){
-    emit("confirm")
-  }
-
-
-
-</script>
-
-<style lang="scss" scoped>
-.v-dialog {
-  .dialog-body {
-    width: 100%;
-    height: 120px;
-    line-height: 120px;
-    text-align: center;
-    color: #fff;
-    font-weight: bold;
-  }
-  .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;
-    }
-  }
-}
-</style>

src/components/navigation.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="navigation yes-events">
-    <img class="tabs" src="@/assets/images/home/tabs.png" alt="">
-    <!-- <img class="tool" src="@/assets/images/home/tool.png" alt=""> -->
+    <div class="tabs">
+      <div class="tab-item">基本指标</div>
+    </div>
     <!-- <div class="btn" @click="toPage">农场确权</div> -->
   </div>
 </template>
@@ -23,15 +24,7 @@ const toPage = () =>{
   display: flex;
   align-items: center;
   flex-direction: column;
-  .tabs{
-    width: 952px;
-    height: 43px;
-    margin-bottom: 10px;
-  }
-  .tool{
-    width: 878px;
-    height: 161px;
-  }
+  
   .btn{
     width: 80px;
     height: 30px;

src/router/mainRoutes.js

@@ -30,16 +30,6 @@ export default [
         name: "Authentic",
         component: () => import("@/views/authentic/index.vue"),
     },
-    {
-        path: "/regionalInformation",
-        name: "RegionalInformation",
-        component: () => import("@/views/regionalInformation/index.vue"),
-    },
-    {
-        path: "/ownership",
-        name: "Ownership",
-        component: () => import("@/views/ownership/index.vue"),
-    },
     //新增农事
     {
         path: "/add_farm",

src/views/authentic/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="base-container">
-        <fnHeader></fnHeader>
+        <fnHeader :hideSwitch="true" :hideShadow="true"></fnHeader>
         <div class="top-bg"></div>
         <el-upload
             ref="uploadRef"

src/views/ownership/OwnershipMap.js

@@ -1,245 +0,0 @@
-import Layer from 'ol/layer/Vector'
-import Source from 'ol/source/Vector'
-import Select from 'ol/interaction/Select.js';
-import {singleClick} from 'ol/events/condition'
-import * as olEvents from 'ol/events';
-import config from "@/api/config.js"
-import * as KMap from '@/utils/ol-map/KMap';
-import Style from "ol/style/Style";
-import Photo from "ol-ext/style/Photo";
-import {base_img_url2} from "../../api/config";
-import Stroke from "ol/style/Stroke";
-import * as util from "@/common/ol_common.js"
-import {newAreaFeature, newAreaPoint, newPolymerFeature, newPoint} from "../zhgl/map";
-import Icon from "ol/style/Icon";
-import Point from 'ol/geom/Point.js';
-import * as olExtent from 'ol/extent';
-import VectorLayer from 'ol/layer/Vector.js';
-import VectorSource from 'ol/source/Vector.js';
-import Draw from 'ol/interaction/Draw.js';
-import {createBox} from 'ol/interaction/Draw';
-import { reactive } from 'vue';
-export const treeIdsData = reactive({
-    value: []
-  });
-
-/**
- * @description 智能巡园地图层对象
- */
-class OwnershipMap {
-
-    constructor(){
-        let that = this
-        this.vectorStyle = new KMap.VectorStyle()
-        this.subAreaLayer = new KMap.VectorLayer("subAreaLayer",1000,{style:(f)=> {
-                return that.vectorStyle.getPolygonStyle(f.get("fillColor"), f.get("strokeColor"), 2)
-        }})
-        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.treeLayer = new KMap.VectorLayer("statusPointLayer",999,{style:that.treeStyle})
-        this.treePointLayer = new KMap.VectorLayer("treePointLayer",999,{style:(f)=> {
-            let color = f.get('selected') ? "#ffa500" : "#4e64c6"
-            let strokeColor = f.get('selected') ? "#ffa500" : "#4e64c6"
-            return that.vectorStyle.getPointSimpleStyle(5,color,strokeColor,"2")
-            }
-        })
-        this.treeFeatures = []
-    }
-
-    initMap(location, target)  {
-        let level = 18
-        let coordinate = util.wktCastGeom(location).getFirstCoordinate()
-        this.kmap = new KMap.Map(target,level,coordinate[0], coordinate[1],null,10,22);
-        let xyz = config.base_img_url + 'map/lby/{z}/{x}/{y}.png';
-        this.kmap.addXYZLayer(xyz,{minZoom:15,maxZoom:22});
-        let xyz2 = config.base_img_url3 + 'map/lby/{z}/{x}/{y}.png';
-        this.kmap.addXYZLayer(xyz2,{minZoom:12,maxZoom:22});
-        this.kmap.addLayer(this.subAreaLayer.layer)
-        this.kmap.addLayer(this.treeLayer.layer)
-        this.kmap.addLayer(this.treePointLayer.layer)
-    }
-
-    async initArea(gardenId, callback){
-        let that = this
-        // 果树级
-        this.treePointLayer.refresh()
-        await VE_API.regionalInformation.aPictureTreeList({gardenId}).then(({data,code})=>{
-            for(let item of data){
-                let point = newPoint(item, "wkt","polymer");
-                that.treePointLayer.addFeature(point)
-            }
-            callback && callback()
-        })
-        this.fit(this.treePointLayer.source.getExtent())
-        // this.selectPoint()
-        // const ids = [75468,75471,75513,75585, 75586]
-        // this.setSelectedPoint(ids)
-        // this.getSelectedPoint()
-        // this.initDrawBox()
-    }
-
-    // 点选
-    selectPoint() {
-        let that = this
-        this.kmap.on('click', function (ev) {
-            that.kmap.map.forEachFeatureAtPixel(ev.pixel, function (feature) {
-                let geometry = feature.getGeometry();
-                if (geometry instanceof Point) {
-                    // selected = feature;
-                    feature.set('selected', !feature.get('selected'))
-                    // that.treePointLayer.changed()
-                    return true;
-                }
-            });
-        });
-    }
-
-    // 默认选中的
-    setSelectedPoint(idArr) {
-        let that = this
-        this.clearFeaturesSelected()
-        if (idArr && idArr.length) {
-            // 筛选selectedIds对应的Feature并计算范围
-            const features = that.treePointLayer.source.getFeatures()
-            const selectedFeatures = features.filter(feature => idArr.includes(feature.getId()));
-            let extent = olExtent.createEmpty(); // 创建一个空的Extent
-            selectedFeatures.forEach(feature => {
-                feature.set('selected', feature)
-                extent = olExtent.extend(extent, feature.getGeometry().getExtent());
-            })
-            that.fit(extent)
-        }
-    }
-
-    // 获取框选中的ids
-    getSelectedPoint() {
-        const features = this.treePointLayer.source.getFeatures()
-        const selectedFeatures = features.filter(feature => feature.get("selected"));
-        let treeIds = []
-        selectedFeatures.forEach(feature => {
-            treeIds.push(feature.getId())
-        })
-        treeIdsData.value = treeIds
-    }
-    // -----------draw----------------
-    initDrawBox() {
-        this.clearFeaturesSelected()
-        let that = this
-        this.tempVector = new VectorLayer({
-            title: '画线层',
-            source: new VectorSource({}),
-            style: that.vectorStyle.getPolygonStyle("#ffffff00", "#ffffff00", 2),
-            zIndex: 999
-        })
-        this.kmap.addLayer(this.tempVector)
-        that.drawBox = new Draw({
-            source: that.tempVector.getSource(),
-            type: "Circle",
-            geometryFunction: createBox(),
-            freehand: false,//自由绘制
-            // stopClick: true,
-            // style: that.style(that.styleType.dotted)
-        })
-        // that.drawBox.setActive(false)
-        // that.drawBox.on("drawend", function(e){
-        //     that.drawBox.setActive(false)
-        //     // that.endRemovePoint(e)
-        // })
-        that.kmap.map.addInteraction(that.drawBox)
-
-        // 监听 drawend 事件
-        that.drawBox.on('drawend', function (event) {
-            // 获取绘制的几何对象（矩形）
-            const geometry = event.feature.getGeometry();
-            const extent = geometry.getExtent();
-            // 遍历矢量图层中的所有feature
-            that.treePointLayer.source.getFeatures().forEach(function (feature) {
-                // feature与矩形是否相交
-                if (olExtent.intersects(extent, feature.getGeometry().getExtent())) {
-                    // 相交部分设置样式为selected
-                    feature.set('selected', !feature.get('selected'));
-                }
-            });
-            that.tempVector.getSource().clear()
-            that.getSelectedPoint()
-        });
-    }
-
-    // 移除draw
-    removeDraw() {
-        this.kmap.map.removeInteraction(this.drawBox)
-        this.clearFeaturesSelected()
-    }
-
-    // 清除selected属性
-    clearFeaturesSelected() {
-        const features = this.treePointLayer.source.getFeatures()
-        features.forEach(feature => {
-            feature.set('selected', false);
-        });
-        treeIdsData.value = []
-    }
-
-    addToggleTreeSelect(listener){
-        let that = this
-        this.treeLayer.addToggleSelect(function({deselected,selected, preventDefault}){
-            if(selected.length > 0){
-                listener && listener(selected[0],deselected[0])
-            }
-            preventDefault()
-        },this.kmap.map, that.treeStyle)
-    }
-
-    addToggleSubAreaSelect(listener){
-        let that = this
-        this.subAreaLayer.addToggleSelect(function({deselected,selected,preventDefault}){
-            if(selected.length > 0){
-                that.treeLayer.source.forEachFeature((f)=>{
-                    if(f.get("subAreaId") == selected[0].get("id")){
-                        that.treeLayer.toggleSelect.getFeatures().remove(f)
-                    }
-                })
-                that.treeLayer.source.forEachFeature((f)=>{
-                    if(f.get("subAreaId") == selected[0].get("id")){
-                        that.treeLayer.toggleSelect.getFeatures().push(f)
-                    }
-                })
-            }
-            if(deselected.length > 0){
-                that.treeLayer.source.forEachFeature((f)=>{
-                    if(f.get("subAreaId") == deselected[0].get("id")){
-                        that.treeLayer.toggleSelect.getFeatures().remove(f)
-                    }
-                })
-            }
-            listener && listener(selected[0],deselected[0])
-            preventDefault()
-        },this.kmap.map)
-    }
-
-    refreshTree(organId,day,callback){
-        this.afterDayNum = day
-        this.initTree(organId, callback)
-
-    }
-    fit(geomOrExtent){
-        this.kmap.fit(geomOrExtent)
-    }
-}
-
-export default OwnershipMap

src/views/ownership/index.vue

@@ -1,491 +0,0 @@
-<!--
- * @Author: your name
- * @Date: 2021-01-18 15:46:34
- * @LastEditTime: 2021-11-30 18:54:36
- * @LastEditors: Please set LastEditors
- * @Description: In User Settings Edit
- * @FilePath: \vue3-element-admin\src\views\Home.vue
--->
-<template>
-  <Bg></Bg>
-  <Header></Header>
-  <div class="container2">
-    <div class="mainDiv">
-      <div class="leftBox">
-        <Title title="权属列表">
-          <template v-slot:title-slot>
-            <div class="slot-right">
-              <div class="btn yse-events" v-show="!show" @click="handleAdd">
-                新增权属信息
-              </div>
-            </div>
-          </template>
-        </Title>
-        <div
-          class="myForm"
-          :style="{ height: show ? 'calc(100% - 128px)' : 'calc(100% - 48px)' }"
-        >
-          <el-form
-            :model="form"
-            ref="formRef"
-            :rules="rules"
-            label-width="75px"
-            :inline="false"
-            class="form"
-            v-show="show"
-          >
-            <el-form-item class="form-item" prop="fruitsTypeItem" label="品种">
-              <el-input
-                v-model="fruitsTypeItem"
-                placeholder="请输入品种"
-                clearable
-              ></el-input>
-            </el-form-item>
-            <el-form-item class="form-item" prop="total" label="数量">
-              {{ treeIdsValue.value.length }} 颗
-            </el-form-item>
-            <div class="form-item-name">归属人 :</div>
-            <el-form-item class="form-item" prop="masterName" label="姓名">
-              <el-input
-                v-model="masterName"
-                placeholder="请输入姓名"
-                clearable
-              ></el-input>
-            </el-form-item>
-            <el-form-item class="form-item" prop="masterSex" label="性别">
-              <el-radio-group fill="#13C4CD" v-model="masterSex">
-                <el-radio :value="true" label="男"></el-radio>
-                <el-radio :value="false" label="女"></el-radio>
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item class="form-item" prop="masterTel" label="联系方式">
-              <el-input
-                v-model="masterTel"
-                placeholder="请输入联系方式"
-                clearable
-              ></el-input>
-            </el-form-item>
-            <div class="form-item-name">经营人 :</div>
-            <el-form-item class="form-item" prop="manageName" label="姓名">
-              <el-input
-                v-model="manageName"
-                placeholder="请输入姓名"
-                clearable
-              ></el-input>
-            </el-form-item>
-            <el-form-item class="form-item" prop="manageSex" label="性别">
-              <el-radio-group fill="#13C4CD" v-model="manageSex">
-                <el-radio :value="true" label="男"></el-radio>
-                <el-radio :value="false" label="女"></el-radio>
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item class="form-item" prop="manageTel" label="联系方式">
-              <el-input
-                v-model="manageTel"
-                placeholder="请输入联系方式"
-                clearable
-              ></el-input>
-            </el-form-item>
-          </el-form>
-          <!-- 权属列表 -->
-          <div class="list" v-show="!show">
-            <div
-              class="list-item"
-              v-for="item in state.list"
-              :key="item.id"
-              @click="handleItem(item)"
-            >
-              <div @click.stop="remove(item.id)" class="delete">x</div>
-              <div class="item-title">
-                <span>权属信息</span>
-                <img src="@/assets/img/znxy/nslb_info_icon.png" />
-              </div>
-              <div class="item-cont">
-                <div class="row">
-                  <span>品种：{{ item.fruitsTypeItem }}</span>
-                  <span>数量：{{ item.total }}颗</span>
-                </div>
-                <div class="row">
-                  <span>归属人：{{ item.masterName }}</span>
-                  <span>性别：{{ item.masterSex ? "男" : "女" }}</span>
-                  <span>电话：{{ item.masterTel }}</span>
-                </div>
-                <div class="row">
-                  <span>经营人：{{ item.manageName }}</span>
-                  <span>性别：{{ item.manageSex ? "男" : "女" }}</span>
-                  <span>电话：{{ item.manageTel }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div v-show="show" class="my-bottoms">
-          <el-button class="btn btn-size" color="#032C39" @click="backList"
-            >返回列表</el-button
-          >
-          <el-button class="btn btn-size" color="#13C4CD" @click="onSubmit"
-            >保存</el-button
-          >
-        </div>
-      </div>
-
-      <div class="rightBox">
-        <div class="head">
-          <div class="name">编辑权属区域</div>
-          <div class="line"></div>
-          <div class="rhombus"></div>
-        </div>
-        <div class="map" ref="mapRef"></div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { useStore } from "vuex";
-import { ElMessage, ElMessageBox } from "element-plus";
-import { onMounted, ref, reactive, toRefs } from "vue";
-import config from "@/api/config.js";
-import { NS_RECORD_STATUS_ENUM as STARUS_ENUM } from "../../api/enum";
-import { useRoute, useRouter } from "vue-router";
-import Title from "../components/title";
-import OwnershipMap from "./OwnershipMap";
-import Bg from "../Bg";
-import Header from "@/views/components/Header.vue";
-import { treeIdsData } from "./OwnershipMap";
-
-const selectDateObj = ref({});
-const router = useRouter();
-const route = useRoute();
-const recordId = route.query.recordId;
-
-const store = useStore();
-const location = store.getters.userinfo.location;
-const gardenId = store.getters.userinfo.curGardenId;
-const mapRef = ref(null);
-const form = reactive({
-  fruitsTypeItem: "",
-  masterName: "",
-  masterSex: true,
-  masterTel: "",
-  manageName: "",
-  manageSex: true,
-  manageTel: "",
-  gardenId: gardenId,
-  total:0
-});
-const {
-  fruitsTypeItem,
-  masterName,
-  masterSex,
-  masterTel,
-  manageName,
-  manageSex,
-  manageTel,
-} = toRefs(form);
-
-const formRef = ref(null);
-
-const rules = {
-  treeIds: [
-    {
-      required: true,
-      message: "请选择树",
-      trigger: "blur",
-    },
-  ],
-};
-
-const kmap = new OwnershipMap();
-onMounted(() => {
-  initData();
-  kmap.initMap(location, mapRef.value);
-  kmap.initArea(gardenId, () => {});
-  //   kmap.initSubArea(gardenId, () => {
-  //     kmap.initTree(gardenId, () => {
-  //       initSettingVal();
-  //     });
-  //   });
-});
-
-const state = reactive({
-  list: [],
-});
-const treeIdsValue = ref(treeIdsData);
-// 权属列表
-const initData = async () => {
-  const { code, data } = await VE_API.ownership.list({ gardenId: gardenId });
-  state.list = data;
-};
-
-const show = ref(false);
-// 新增
-const handleAdd = () => {
-  show.value = true;
-  formRef.value.resetFields();
-  kmap.initDrawBox();
-};
-
-// 返回列表
-const backList = () => {
-  show.value = false;
-  kmap.removeDraw();
-};
-
-// 点击列表信息
-const handleItem = async ({id}) => {
-    const {code,data} = await VE_API.ownership.get({id:id})
-    if(code===0){
-        kmap.setSelectedPoint(data.treeIds)
-    }
-};
-
-/**
- * @description:提交
- * @param {*}
- * @return {*}
- */
-const onSubmit = () => {
-  formRef.value.validate(async (valid) => {
-    if (valid) {
-      if (treeIdsValue.value.value.length > 0) {
-        form.treeIds = treeIdsValue.value.value;
-        form.total = treeIdsValue.value.value.length;
-      }
-      let res = await VE_API.ownership.save(form);
-      if (res.code == 0) {
-        initData();
-        show.value = false;
-        kmap.removeDraw();
-        kmap.setSelectedPoint([])
-      }
-    } else {
-      return false;
-    }
-  });
-};
-
-// 删除
-const remove = (id) => {
-  ElMessageBox.confirm("是否要删除这条权属信息?", "警告", {
-    confirmButtonText: "删除",
-    cancelButtonText: "取消",
-    type: "warning",
-  })
-    .then(async () => {
-      const res = await VE_API.ownership.delete({ id: id });
-      initData();
-    })
-    .catch(() => {});
-};
-</script>
-
-<style lang="scss" scoped>
-@import "../../styles/index.scss";
-.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: 120px;
-    height: 32px;
-    text-align: center;
-    line-height: 32px;
-  }
-}
-.container2 {
-  height: 100%;
-  width: 100%;
-  z-index: 2;
-  position: absolute;
-}
-.mainDiv {
-  position: absolute;
-  top: 100px;
-  bottom: 60px;
-  left: 20px;
-  right: 20px;
-  .leftBox {
-    float: left;
-    width: 500px;
-    height: calc(100%);
-    border: 1px solid rgba(81, 233, 240, 0.6);
-    box-sizing: border-box;
-    overflow: hidden;
-    .myForm {
-      box-sizing: border-box;
-      overflow-y: auto;
-      color: #fff;
-      padding: 16px;
-      height: calc(100% - 48px);
-      .form {
-        .form-item-name {
-          position: relative;
-          padding: 10px 0;
-          &::before {
-            content: "";
-            position: absolute;
-            top: 0;
-            left: -3.5%;
-            width: 106.9%;
-            height: 1px;
-            border-top: 1px solid rgba(81, 233, 240, 0.59);
-          }
-        }
-        ::v-deep {
-          .el-form-item__label {
-            color: #fff;
-          }
-          .form-item {
-            .el-input {
-              --el-input-placeholder-color: rgba(0, 255, 240, 0.27);
-            }
-            .el-input__wrapper {
-              background: #032c39;
-              border-radius: 4px;
-              border: 1px solid rgba(81, 233, 240, 0.59);
-              box-shadow: none;
-            }
-            .el-input__inner {
-              color: #fff;
-            }
-          }
-        }
-      }
-      .list {
-        .list-item {
-          box-sizing: border-box;
-          padding: 10px;
-          background: url("@/assets/img/znxy/nslb_info_bg.png") no-repeat center
-            center / 100% 100%;
-          margin-bottom: 10px;
-          cursor: pointer;
-          position: relative;
-          &.list-item:last-child {
-            margin-bottom: 0;
-          }
-          .delete {
-            position: absolute;
-            right: -6px;
-            top: -6px;
-            background: #00848c;
-            border: 1px solid rgba(0, 255, 240, 0.5);
-            width: 20px;
-            height: 20px;
-            color: #fff;
-            border-radius: 50%;
-            text-align: center;
-            line-height: 17px;
-          }
-          .item-title {
-            font-weight: normal;
-            font-size: 15px;
-            color: #f1ffff;
-            width: 100%;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            box-sizing: border-box;
-            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: 79%;
-              height: 8px;
-            }
-          }
-          .item-cont {
-            margin-top: 6px;
-            .row {
-              line-height: 1.8;
-              span {
-                margin-right: 20px;
-              }
-            }
-          }
-        }
-      }
-    }
-    .my-bottoms {
-      border-top: 1px solid rgba(81, 233, 240, 0.6);
-      box-sizing: border-box;
-      text-align: center;
-      padding: 20px 30px;
-      .btn {
-        color: #fff;
-        width: 87px;
-        height: 38px;
-      }
-      .btn-size {
-        width: 141px;
-      }
-    }
-  }
-  .rightBox {
-    float: right;
-    width: calc(100% - 500px - 12px);
-    height: 100%;
-    background: #032c3940;
-    border-radius: 4px;
-    border: 1px solid rgba(81, 233, 240, 0.6);
-    box-sizing: border-box;
-    .head {
-      @include wh(calc(100% - 19px - 224px), 30px);
-      display: flex;
-      align-items: center;
-      justify-content: space-around;
-      margin-left: 19px;
-      margin-right: 224px;
-      .name {
-        @include wh(auto, 21px);
-        font-weight: normal;
-        font-size: 21px;
-        line-height: 30px;
-        color: #ffffff;
-      }
-      .line {
-        width: calc(100% - 250px);
-        border-bottom: 1px solid #51e9f0;
-        opacity: 0.4;
-        box-sizing: border-box;
-        margin-top: 7px;
-      }
-      .rhombus {
-        margin-top: 7px;
-        @include wh(50px, 15px);
-        @include ossBg("rhombus.png");
-      }
-    }
-    .map {
-      width: 100%;
-      height: calc(100% - 30px);
-      position: relative;
-      box-sizing: border-box;
-      padding: 10px;
-    }
-  }
-}
-</style>

src/views/regionalInformation/RegionalInformationMap.js

@@ -1,371 +0,0 @@
-import config from "@/api/config.js"
-import * as KMap from '@/utils/ol-map/KMap';
-import * as util from "@/common/ol_common.js"
-import {newAreaFeature, newAreaPoint, newPoint,newPolymerFeature} from "../zhgl/map";
-import {base_img_url2} from "../../api/config";
-import Stroke from "ol/style/Stroke";
-import Style from "ol/style/Style";
-import Photo from "ol-ext/style/Photo";
-import {deepClone} from '@/common/commonFun'
-
-import WKT from 'ol/format/WKT.js';
-import Feature from 'ol/Feature.js';
-import Map from 'ol/Map.js';
-import Point from 'ol/geom/Point.js';
-import View from 'ol/View.js';
-import {Cluster, OSM, 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 RegionalInformationMap {
-    getRadius(zoom){
-        if(zoom >= 20){
-            return 70;
-        }
-        if(zoom >= 19){
-            return 30;
-        }
-        if(zoom >= 18){
-            return 15;
-        }
-        if(zoom >= 17){
-            return 10;
-        }
-        return 5;
-    }
-
-    constructor(){
-        let that = this
-        let vectorStyle = new KMap.VectorStyle()
-        this.vectorStyle = vectorStyle
-        this.areaLayer = new KMap.VectorLayer("areaLayer",999,{style:(f)=> vectorStyle.getPolygonStyle("#032833" + "80", "#0BFDF2",3)})
-        this.subAreaLayer = new KMap.VectorLayer("subAreaLayer",999,{style:(f)=> {
-            const color = f.get("color")
-            const fillColor = color.length === 9 ? color : color + "80"
-            const strokeColor = color.length === 9 ? '#ffffff' : color
-            return vectorStyle.getPolygonStyle(fillColor, strokeColor, 2)
-        }})
-        this.areaPointLayer =  new KMap.VectorLayer("areaPointLayer",1000,{style:(f)=> vectorStyle.getPointTextStyle(f.get("name"), "#120046","#FFFFFF",2, 30)})
-        this.treeLayer = new KMap.VectorLayer("treeLayer",999)
-        this.imgStyleCache = {};
-        this.imgTreeLayer = new KMap.VectorLayer("imgTreeLayer",999,{minZoom:15,maxZoom:22,
-            style:(feature)=> {
-                let zoom = that.kmap.view.getZoom();
-                let r = that.getRadius(zoom);
-                let img = feature.get("img");
-                let k = img+r;
-                if(img && img != ""){
-                    let style = that.imgStyleCache[k];
-                    if(!style){
-                        style = new Style ({
-                            image: new Photo ({
-                                src: base_img_url2 + img,
-                                radius: r,
-                                shadow: 0,
-                                crop:true,
-                                kind:"circle",
-                                onload: function() { that.imgTreeLayer.layer.changed(); },
-                                displacement: [0, 30 + 15],
-                                stroke: new Stroke({
-                                    width: 3,
-                                    color: '#fdfcfc'
-                                })
-                            })
-                        });
-                        that.imgStyleCache[k] = style
-                    }
-                    return style
-                }else{
-                    return vectorStyle.getPointSimpleStyle(10,"#00000000","#00000000",1)
-                }
-
-            }})
-        // 果树级图例点标记
-        // this.treePointLayer = new KMap.VectorLayer("treePointLayer",999,{style:(f)=> {
-        //     let colorValue = f.get("color")
-        //     return vectorStyle.getPointSimpleStyle(5,colorValue,colorValue,"2")
-        // }})
-        this.imgTreeLayer.layer.setVisible(false)
-        this.subAreaLayer.layer.setVisible(true)
-        this.subAreaData = []
-        this.treeListData = null
-        this.treeClusterLayer = null
-        this.gardenImgLayer = null
-        this.listenKey = null
-    }
-
-    initMap(location,target)  {
-        let level = 18
-        let coordinate = util.wktCastGeom(location).getFirstCoordinate()
-        this.kmap = new KMap.Map(target,level,coordinate[0], coordinate[1],null,10,22);
-        let xyz = config.base_img_url + 'map/lby/{z}/{x}/{y}.png';
-        this.kmap.addXYZLayer(xyz,{minZoom:15,maxZoom:22});
-        let xyz2 = config.base_img_url3 + 'map/lby/{z}/{x}/{y}.png';
-        this.kmap.addXYZLayer(xyz2,{minZoom:12,maxZoom:22});
-        this.kmap.addLayer(this.areaLayer.layer)
-        this.kmap.addLayer(this.subAreaLayer.layer)
-        this.kmap.addLayer(this.treeLayer.layer)
-        this.kmap.addLayer(this.areaPointLayer.layer)
-        this.kmap.addLayer(this.imgTreeLayer.layer)
-        // this.kmap.addLayer(this.treePointLayer.layer)
-    }
-
-    initArea(organId){
-        let that = this
-        this.areaLayer.refresh()
-        VE_API.area.list({organId}).then(({data,code})=>{
-            for(let item of data){
-                that.areaLayer.addFeature(newAreaFeature(item))
-                that.areaPointLayer.addFeature(newAreaPoint(item))
-            }
-        })
-    }
-
-    initSubArea(organId){
-        let that = this
-        this.subAreaLayer.refresh()
-        VE_API.sub_area.list({organId}).then(({data,code})=>{
-            this.subAreaData = data
-        })
-    }
-
-    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) {
-        console.log('type', type);
-        if (type == 1) {
-            // 数据变化
-            this.subAreaLayer.layer.setVisible(true)
-            this.clearImgLayer()
-        } else {
-            // 切换显示隐藏
-            this.subAreaLayer.layer.setVisible(false)
-        }
-    }
-
-    // 果园级图片叠加
-    async addGargendImg(gardenId, legend) {
-        let that = this
-        this.clearImgLayer()
-        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: 999
-                })
-                that.kmap.addLayer(this.gardenImgLayer)
-                that.fit(extent)
-            }
-        })
-    }
-
-    // 果树级图例切换
-    async switchTreeLegend(gardenId, legend) {
-        // this.treePointLayer.source.clear()
-        this.clearImgLayer()
-        this.clearCluster()
-        if (!this.treeListData) {
-            await VE_API.regionalInformation.aPictureTreeList({gardenId}).then(({data,code})=>{
-                // for(let item of data){
-                //     let point = newPoint(item);
-                //     that.treeLayer.addFeature(point)
-                //     that.imgTreeLayer.addFeature(point)
-                // }
-                this.treeListData = data
-            })
-        }
-        // 果树级
-        // this.treePointLayer.refresh()
-        // 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, "wkt","polymer");
-        //         that.treePointLayer.addFeature(point)
-        //     }
-        // }
-        // this.fit(this.treePointLayer.source.getExtent())
-        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,
-            // minDistance: 60,
-            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
-        }
-    }
-
-    initTree(organId){
-        let that = this
-        this.treeLayer.refresh()
-        this.imgTreeLayer.refresh()
-        VE_API.tree.treeListAndGrowData({organId,areaId:-1}).then(({data,code})=>{
-            for(let item of data){
-                let point = newPoint(item);
-                that.treeLayer.addFeature(point)
-                that.imgTreeLayer.addFeature(point)
-            }
-        })
-    }
-    addSingleSelect(listener){
-        this.treeLayer.addSingleSelect(function(e){
-            if(e.selected.length > 0){
-                listener(e.selected[0])
-            }
-        },this.kmap.map)
-    }
-
-    setTreeStyle(style){
-        this.treeLayer.layer.setStyle(style)
-        this.treeLayer.layer.changed()
-    }
-    fit(geomOrExtent){
-        this.kmap.fit(geomOrExtent)
-    }
-    openCloseImg(){
-        this.imgTreeLayer.layer.setVisible(!this.imgTreeLayer.layer.getVisible())
-    }
-    openClosePolymer(){
-        this.subAreaLayer.layer.setVisible(!this.subAreaLayer.layer.getVisible())
-    }
-    // 根据图例对应的值加上color属性
-    addColorToArr1(arr1, obj, key) {
-        if (arr1 && arr1.length) {
-            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 RegionalInformationMap

src/views/regionalInformation/index.vue

@@ -1,419 +0,0 @@
-<template>
-  <Bg></Bg>
-  <Header>
-    <template v-slot:right-slot>
-      <div class="slot-right">
-        <div class="switch yse-events">
-          <span>果园级信息</span>
-          <el-switch @change="handleSwitch('Garden')" v-model="switchValue" />
-        </div>
-        <div class="switch yse-events">
-          <span>果树级信息</span>
-          <el-switch @change="handleSwitch('tree')" v-model="switchValue1" />
-        </div>
-      </div>
-    </template>
-  </Header>
-  <div class="container2">
-    <div class="mainDiv">
-      <div class="leftBox">
-        <div class="name">{{btnName}}</div>
-        <div class="btn" :style="{borderColor:subName.length>0?'#309195':'transparent'}">{{subName}}</div>
-        <div class="map" ref="mapRef"></div>
-      </div>
-
-      <div class="rightBox">
-        <div class="box-content">
-          <Title :title="switchValue ? '果园级信息' : '果树级信息'"></Title>
-          <div class="box-body">
-            <div class="btn-row">
-              <div
-                :class="['btn-col', 'yse-events', { active: active === index }]"
-                v-for="(item, index) in btnList"
-                :key="index"
-                @click="handleAct(index,item)"
-              >
-                {{ item.name }}
-              </div>
-            </div>
-            <div class="card">
-              <div class="card-btn" v-if="btnItemList.length > 0">
-                <div
-                  :class="[
-                    'btn-item',
-                    'yse-events',
-                    { active: activeItem === index },
-                  ]"
-                  v-for="(item, index) in btnItemList"
-                  :key="index"
-                  @click="handleItemAct(index,item)"
-                >
-                  {{ item.name }}
-                </div>
-              </div>
-              <div class="list-border">
-                <div
-                  class="list-item"
-                  v-for="(item, index) in listItem"
-                  :key="index"
-                >
-                  <template v-if="btnItemList.length > 0">
-                    <div
-                      v-if="btnItemList[activeItem].style !== 'star'"
-                      :class="btnItemList[activeItem].style"
-                      :style="iconStyle(btnItemList[activeItem].style, index, item)"
-                    ></div>
-                    <el-icon v-else size="18px" class="star" color="#d63f3c"
-                      ><StarFilled
-                    /></el-icon>
-                  </template>
-                  <template v-else>
-                    <div
-                      v-if="btnList[active].style !== 'star'"
-                      :class="btnList[active].style"
-                      :style="iconStyle(btnList[active].style, index, item)"
-                    ></div>
-                    <el-icon v-else size="18px" class="star" color="#d63f3c"
-                      ><StarFilled
-                    /></el-icon>
-                  </template>
-                  <!-- <span v-if="item.type=='1'" class="item-txt">{{ item.maxVal }}</span> -->
-                  <!-- <span v-else class="item-txt">{{ item.minVal }}-{{ item.maxVal }}</span> -->
-                  <span class="item-txt">{{ item.name }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import Header from "@/views/components/Header.vue";
-import Bg from "../Bg";
-import Title from "../components/title";
-import { useRouter } from "vue-router";
-import { reactive, toRefs, ref, onMounted } from "vue";
-import { useStore } from "vuex";
-import RegionalInformationMap from "./RegionalInformationMap";
-const router = useRouter();
-const store = useStore();
-const state = reactive({
-  btnList: [],
-  btnItemList: [],
-  baseData: [],
-  listItem: [],
-  btnName:'基本信息',
-  subName:''
-});
-
-const { btnList, btnItemList, listItem,btnName ,subName} = toRefs(state);
-
-const iconStyle = (type, index, item) => {
-  if (type === "triangle") {
-    return { borderBottomColor: item.color };
-  }
-  if (type === "bar") {
-    return { background: item.color };
-  }
-  if (type === "circular") {
-    return { background: item.color };
-  }
-};
-
-const active = ref(0);
-const handleAct = (e, v) => {
-  activeType.value = v.type
-  // 果园级 & type为字段值
-  if (v.type == 1 && switchValue.value) {
-    kmap.handleLayerColor(v, v.key)
-  }
-  if (switchValue.value) {
-    kmap.switchType(activeType.value)
-  }
-  active.value = e;
-  btnName.value = v.name
-  updateData(e);
-};
-
-const activeItem = ref(0);
-const activeType = ref(null);
-const handleItemAct = (e, v) => {
-  activeItem.value = e;
-  subName.value = v.name
-  if (v.type == 1) {
-    kmap.switchTreeLegend(curGardenId.value, v)
-  }else if(v.type == 2){
-    kmap.addGargendImg(curGardenId.value, state.baseData[active.value].children[e])
-  }
-  if (state.baseData[active.value].children.length > 0) {
-    state.listItem = state.baseData[active.value].children[e].items;
-  }
-};
-
-const initData = async () => {
-  let url = "aPictureGarden";
-  if (!switchValue.value) {
-    url = "aPictureTree";
-  }
-  const { code, data } = await VE_API.regionalInformation[url]({
-    gardenId: curGardenId.value,
-  });
-  const dataValue = data.data;
-  state.baseData = dataValue;
-  state.btnList = dataValue;
-  btnName.value = dataValue[active.value].name
-  updateData(active.value);
-};
-
-const updateData = (index) => {
-  state.btnItemList = state.baseData[index].children;
-  if (state.baseData[index].children.length > 0) {
-    subName.value = state.baseData[index].children[activeItem.value].name
-    state.listItem = state.baseData[index].children[activeItem.value].items;
-  } else {
-    subName.value = ''
-    state.listItem = state.baseData[index].items;
-  }
-  const legend = state.baseData[index].type
-  // 果园级图片
-  if (switchValue.value && legend === 0) {
-    kmap.addGargendImg(curGardenId.value, state.baseData[index].children[activeItem.value])
-  }
-  if (switchValue1.value) {
-    if (legend === 0) {
-      // 0一级菜单 1字段值 2 图层
-      kmap.switchTreeLegend(curGardenId.value, state.baseData[index].children[activeItem.value])
-    } else if (legend === 1) {
-      kmap.switchTreeLegend(curGardenId.value, state.baseData[index])
-    }
-  }
-};
-
-const switchValue = ref(true);
-const switchValue1 = ref(false);
-
-const handleSwitch = (type) => {
-  if (type === "Garden") {
-    switchValue1.value = !switchValue1.value;
-  } else {
-    switchValue.value = !switchValue.value;
-  }
-  if (!switchValue.value) {
-    // 果园级为false时隐藏果园级的图层
-    kmap.switchType(0)
-    kmap.clearImgLayer()
-  } else {
-    kmap.clearCluster()
-  }
-  activeItem.value = 0;
-  active.value = 0;
-  initData();
-};
-
-// 地图初始化
-const mapRef = ref(null);
-const kmap = new RegionalInformationMap();
-const location = store.getters.userinfo.location;
-const curGardenId = ref(store.getters.userinfo.curGardenId);
-
-onMounted(() => {
-  initData();
-  kmap.initMap(location, mapRef.value);
-    // kmap.initArea(curGardenId.value)
-    kmap.initSubArea(curGardenId.value)
-  //   kmap.addSingleSelect(selectTree)
-});
-</script>
-
-<style lang="scss" scoped>
-@import "../../styles/index.scss";
-.slot-right {
-  display: flex;
-  .switch {
-    margin-right: 55px;
-    display: flex;
-    align-items: center;
-    span {
-      margin-right: 19px;
-    }
-  }
-}
-.container2 {
-  height: 100%;
-  width: 100%;
-  z-index: 2;
-  position: absolute;
-  .mainDiv {
-    position: absolute;
-    top: 100px;
-    bottom: 65px;
-    left: 20px;
-    right: 20px;
-    .leftBox {
-      float: left;
-      width: calc(100% - 500px - 12px);
-      height: 100%;
-      border-radius: 4px;
-      box-sizing: border-box;
-      background: url("@/assets/img/regionalInformation/map_border_bg.png")
-        no-repeat center center / 100% 100%;
-      padding: 10px 20px;
-      .name {
-        font-size: 23px;
-        color: #ffffff;
-        font-style: italic;
-        font-weight: normal;
-      }
-      .btn {
-        margin-top: 18px;
-        font-weight: 500;
-        font-size: 21px;
-        color: #ffffff;
-        width: 130px;
-        height: 45px;
-        border: 1px solid #309195;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        border-radius: 5px;
-      }
-      .map {
-        margin-top: 15px;
-        @include wh(calc(100%), calc(100% - 20px - 18px - 45px - 40px));
-      }
-    }
-    .rightBox {
-      float: right;
-      width: 500px;
-      height: calc(100%);
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      .box-content {
-        height: 49%;
-        border: 1px solid rgba(81, 233, 240, 0.6);
-        border-top-left-radius: 5px;
-        border-top-right-radius: 5px;
-        box-sizing: border-box;
-        .box-body {
-          width: 100%;
-          height: calc(100% - 44px);
-          box-sizing: border-box;
-          padding: 10px 8px;
-          .btn-row {
-            width: 100%;
-            height: 46px;
-            color: #fff;
-            font-weight: 500;
-            font-size: 19px;
-            display: flex;
-
-            .btn-col {
-              width: 103px;
-              height: 100%;
-              background: url("@/assets/img/regionalInformation/btn_bg.png")
-                no-repeat center center / 100% 100%;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              cursor: pointer;
-              &.active {
-                background: url("@/assets/img/regionalInformation/btn_bg_act.png")
-                  no-repeat center center / 100% 100%;
-                position: relative;
-                &::before {
-                  content: "";
-                  background: url("@/assets/img/regionalInformation/arrow_top.png")
-                    no-repeat center center / 100% 100%;
-                  position: absolute;
-                  width: 35px;
-                  height: 18px;
-                  bottom: -20px;
-                }
-              }
-            }
-          }
-          .card {
-            width: 100%;
-            height: calc(100% - 46px - 19px);
-            background: rgba(14, 76, 93, 0.5);
-            box-sizing: border-box;
-            margin-top: 19px;
-            border-radius: 4px;
-            padding: 15px 8px;
-            .card-btn {
-              color: #fff;
-              width: 100%;
-              height: 38px;
-              display: flex;
-              .btn-item {
-                cursor: pointer;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                width: 94px;
-                height: 100%;
-                margin-right: 9px;
-                background: url("@/assets/img/regionalInformation/btn_item_bg.png")
-                  no-repeat center center / 100% 100%;
-                &.active {
-                  background: url("@/assets/img/regionalInformation/btn_item_bg_act.png")
-                    no-repeat center center / 100% 100%;
-                }
-              }
-            }
-            .list-border {
-              width: 100%;
-              box-sizing: border-box;
-              margin-top: 15px;
-              max-height: calc(100% - 38px);
-              overflow: hidden;
-              background: url("@/assets/img/regionalInformation/list_bg.png")
-                no-repeat center center / 100% 100%;
-              display: flex;
-              flex-wrap: wrap;
-              padding-bottom: 15px;
-              .list-item {
-                color: #fff;
-                display: flex;
-                align-items: center;
-                padding: 22px 0 0 18px;
-                width: 35%;
-                .bar {
-                  width: 44px;
-                  height: 15px;
-                  background: #b0e000;
-                  border-radius: 20px;
-                  //   border: 1px solid #d2ff6d;
-                  margin-right: 8px;
-                }
-                .circular {
-                  width: 15px;
-                  height: 15px;
-                  border-radius: 50px;
-                  margin-right: 8px;
-                  background: #b0e000;
-                }
-                .triangle {
-                  width: 0;
-                  height: 0;
-                  margin-right: 8px;
-                  border-left: 7px solid transparent; /* 左边框设置为透明 */
-                  border-right: 7px solid transparent; /* 右边框设置为透明 */
-                  border-bottom: 14px solid #d63f3c; /* 下边框设置为你想要的颜色和大小，这将形成三角形的底部 */
-                }
-                .star {
-                  margin-right: 8px;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-</style>