<template>
  <div class="center">
      <div style="width: 100%; height: 100%" id="cesiumContainer"></div>
      <div class="leftWra">
          <div class="leftTop">
              <div class="title">
                  <span>作物产量预估</span>
                  <p @click="Deta()">
                      下载 &nbsp;

                      <img
                          src="@/assets/icons/svg/downloads.svg"
                          style="width: 14px; height: 14px; cursor: pointer"
                      />
                  </p>
              </div>
              <div ref="areaDiv" class="areaDiv"></div>
          </div>

          <div class="leftFoldDiv" @click="leftFoldClick()">
              <el-tooltip
                  class="box-item"
                  :show-arrow="false"
                  :disabled="leftWraFlag"
                  hide-after="0"
                  show-after="200"
                  effect="dark"
                  content="展开"
                  placement="top"
              >
                  <img v-if="!leftWraFlag" src="@/assets/images/close1.png" alt="" />
              </el-tooltip>
              <el-tooltip
                  :disabled="!leftWraFlag"
                  :show-arrow="false"
                  class="box-item"
                  show-after="200"
                  hide-after="0"
                  effect="dark"
                  content="收起"
                  placement="top"
              >
                  <img
                      class="imgrotate"
                      v-if="leftWraFlag"
                      src="@/assets/images/close1.png"
                      alt=""
                  />
              </el-tooltip>
          </div>
      </div>
      <div class="rightWra">
          <div class="rightTop">
              <div class="title">
                  <span>作物产量预估-高标准农田</span>
                  <p @click="Deta2()">
                      下载 &nbsp;
                      <img
                          src="@/assets/icons/svg/downloads.svg"
                          style="width: 14px; height: 14px; cursor: pointer"
                      />
                  </p>
              </div>
              <div ref="farmlandDiv" class="farmlandDiv"></div>
              <!-- <div ref="ProgressBarDiv" class="ProgressBar"></div> -->
          </div>
          <div class="rightbottom">
              <div class="title">
                  <span>作物长势等级统计-行政区划</span>
                  <p @click="Deta3()">
                      下载 &nbsp;
                      <img
                          src="@/assets/icons/svg/downloads.svg"
                          style="width: 14px; height: 14px; cursor: pointer"
                      />
                  </p>
              </div>
              <div ref="ASdivisionDiv" class="ASdivision"></div>
          </div>
          <div class="rightFoldDiv" @click="rightFoldClick()">
              <el-tooltip
                  :disabled="!rightWraFlag"
                  :show-arrow="false"
                  hide-after="0"
                  show-after="200"
                  class="box-item"
                  effect="dark"
                  content="收起"
                  placement="top"
              >
                  <img v-if="rightWraFlag" src="@/assets/images/close1.png" alt="" />
              </el-tooltip>
              <el-tooltip
                  :disabled="rightWraFlag"
                  :show-arrow="false"
                  hide-after="0"
                  show-after="200"
                  class="box-item"
                  effect="dark"
                  content="展开"
                  placement="top"
              >
                  <img
                      class="imgrotate"
                      v-if="!rightWraFlag"
                      src="@/assets/images/close1.png"
                      alt=""
                  />
              </el-tooltip>
          </div>
      </div>

      <div class="bottom_center">
          <TimeLine />
      </div>
      <div class="tool">
          <span><img src="@/assets/images/LAYER.png" alt="" /></span>
          <span><img src="@/assets/images/amplify.png" alt="" /></span>
          <span><img src="@/assets/images/reduce.png" alt="" /></span>
          <span><img src="@/assets/images/measure.png" alt="" /></span>
          <span><img src="@/assets/images/face.png" alt="" /></span>
          <span><img src="@/assets/images/position.png" alt="" /></span>
      </div>
      <div id="popup">
          <div>{{ clickInfoMap.name }}：</div>
          <div>{{ clickInfoMap.value }}亩</div>
          <div class="cancel" @click="hiddenOverlayChart">X</div>
      </div>
      <div id="pop">
          <div v-for="(item, index) in townZuowu.label" :key="index">
              <div>{{ item.crop }}：</div>
              <div>{{ (item.Shape_Area / 666.67).toFixed(2) }} 亩</div>
          </div>
          <div v-if="townZuowu.XZQMC">
              <div>村名：</div>
              <div>{{ townZuowu.XZQMC }}</div>
          </div>
          <div class="cancel" @click="hiddenOverlayChart">X</div>
      </div>
      <el-button v-if="flag" class="back_button" @click="back()">返回</el-button>
      <el-collapse class="legend" accordion>
          <el-collapse-item name="1">
              <template #title>图例</template>
              <div class="mt-4">
                  <el-checkbox-group v-model="checkList" @change="change">
                      <!-- <el-checkbox
                          v-for="(value, item, key) in dic"
                          :key="key"
                          :style="{
                              background: value.color,
                              border: `1px solid ${value.color}`,
                              width: `100%`,
                          }"
                          v-model="checked3"
                          :disabled="value.disabled"
                          :label="item"
                      /> -->

                      <el-checkbox
                          style="
                              background: rgba(255, 238, 204, 1);
                              border: 1px solid rgba(251, 171, 60, 1);
                              width: 100%;
                          "
                          v-model="checked3"
                          label="0-200"
                      />
                      <el-checkbox
                          style="
                              background: rgba(255, 220, 153, 1);
                              border: 1px solid rgba(251, 219, 13, 1);
                              width: 100%;
                          "
                          v-model="checked4"
                          label="200-400"
                      />
                      <el-checkbox
                          style="
                              background: rgba(255, 203, 102, 1);
                              border: 1px solid rgba(244, 218, 136, 1);
                              width: 100%;
                          "
                          v-model="checked3"
                          label="400-600"
                      />
                      <el-checkbox
                          style="
                              background: rgba(255, 185, 51, 1);
                              border: 1px solid rgba(174, 83, 110, 1);
                              width: 100%;
                          "
                          v-model="checked4"
                          label="600-800"
                      />
                      <el-checkbox
                          style="
                              background: rgba(255, 168, 0, 1);
                              border: 1px solid rgba(242, 177, 167, 1);
                              width: 100%;
                          "
                          v-model="checked3"
                          label="800-1000"
                      />
                  </el-checkbox-group>
              </div>
          </el-collapse-item>
      </el-collapse>
  </div>
</template>

<script setup>
import { ref, onMounted, inject, reactive, watch } from 'vue';
import * as echarts from 'echarts';
import TimeLine from '@/components/TimeLine/TimeLine.vue';
import * as xlsx from 'xlsx'; // Vue3 版本
import { useEcharts } from '@/hooks/useEcharts';
import {getcornTotalYearValue,getcornHeightStandardFarmland,  getcornGetAllTowns,getcornGetAllVillages} from '@/api/crops/maize.js'
import axios from 'axios';
import 'echarts-gl';
import { downLoadFile } from '@/utils/download.js';

let viewer = ref(null);
const areaDiv = ref(null);
const farmlandDiv = ref(null);
const ASdivisionDiv = ref(null);
const value = ref('');
let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
const clickInfoMap = ref({ name: '', value: '' });
const formLandRef = ref([]);
const flag = ref(false);
let leftWraFlag = ref(true);
let rightWraFlag = ref(true);
let standardArr = ref([]);
let estimate = ref({});
let administration = ref([]);
//行政区划数据
var data = {
  title: [],
};
let dd = {
  小麦: [],
  玉米: [],
  大豆: [],
  地瓜: [],
  花生: [],
  蓝莓: [],
  茶叶: [],
  马铃薯: [],
  白菜和萝卜: [],
  其他: [],
};
let areatext = '8383894';

// 组件挂载完成后执行
onMounted(() => {
  getcornTotalYearValues(); //作物产量预估
  getcornHeightStandardFarmlands(); //高标准农田
  getcornGetAllTownss(); //镇级
  //地图
  initMap();
  farmland();
  // ProgressBar();
  ASdivision();
  getFarmland();
});

/*-------------地图------------------------*/
const mapOption = {
  url:
      'http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0' +
      '&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
      '&style=default&format=tiles&tk=31091965e263284a501a723b8909f405',
  layer: 'tdtCva',
  style: 'default',
  format: 'tiles',
  tileMatrixSetID: 'c',
  subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
  tilingScheme: new Cesium.GeographicTilingScheme(),
  tileMatrixLabels: [
      '1',
      '2',
      '3',
      '4',
      '5',
      '6',
      '7',
      '8',
      '9',
      '10',
      '11',
      '12',
      '13',
      '14',
      '15',
      '16',
      '17',
      '18',
      '19',
  ],
  maximumLevel: 18,
};
Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiYzcwZmJmNi02MzQ5LTQ1MGEtODgzMy0yZTZiZGExY2MzMGMiLCJpZCI6MTAxOTgsInNjb3BlcyI6WyJhc2wiLCJhc3IiLCJnYyJdLCJpYXQiOjE1ODEzMDgxNTR9.NeJU4yfUi-SnLrNDOBYsQgmiSh3B4axCTi1m84Qw99c';
function initMap() {
  viewer = new Cesium.Viewer('cesiumContainer', {
      baseLayerPicker: false,
      shouldAnimate: true, //自动播放
      infoBox: false, //信息框
      animation: false, //“动画”窗口小部件提供用于播放，暂停和倒退的按钮，以及当前时间和日期，并由“飞梭环”包围，用于控制动画的速度。cesium示例地图左下角那个
      timeline: false, //时间轴是用于显示和控制当前场景时间的小部件。
      geocoder: false, //查找，用于查找地址和地标，以及将照相机悬挂到它们。使用铯离子进行地址解析。,cesium示例地图右上角的放大镜
      homeButton: false, //主页按钮
      navigationHelpButton: false, //导航帮助按钮
      selectionIndicator: false, //原生选择绿框
      fullscreenButton: false, //右下角的全屏按钮
      // terrainProvider:new Cesium.createWorldTerrain(),
      terrainProvider: new Cesium.EllipsoidTerrainProvider({}),
      sceneModePicker: false, //是否显示投影方式控件
      contextOptions: {
          webgl: {
              alpha: true,
          },
      },

      imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
          ...mapOption,
      }),
  });
  // 去除logo
  viewer.cesiumWidget.creditContainer.style.display = 'none';
  //加载地图服务
  addWms('shuzisannong:huangdaoqu_town', 'tl');
  viewer.camera.flyTo({
      destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
      duration: 2,
  });

  // 图层点击事件
  layerClick();
  // 蒙版
  mbHandle();
}

// data数据数组
// name实体名称，方便以后删除
// color实体颜色
function addBoundaryHandle(data, name, color) {
  data.forEach(item => {
      let arr = [];
      item[0].forEach(mem => {
          arr.push(mem[0]);
          arr.push(mem[1]);
      });
      viewer.entities.add({
          name: name,
          polyline: {
              positions: Cesium.Cartesian3.fromDegreesArray(arr),
              width: 6,
              // material: new Cesium.PolylineDashMaterialProperty({//虚线
              material: new Cesium.PolylineGlowMaterialProperty({
                  //光晕
                  glowPower: 0.2,
                  color: color
                      ? Cesium.Color.fromCssColorString(color)
                      : Cesium.Color.fromBytes(250, 128, 114), //#FA8072
              }),
              // followSurface: false, //是否贴着地表
              clampToGround: true, //贴地
          },
      });
  });
}
function getLevel(height) {
  if (height > 48000000) {
      return 0;
  } else if (height > 24000000) {
      return 1;
  } else if (height > 12000000) {
      return 2;
  } else if (height > 6000000) {
      return 3;
  } else if (height > 3000000) {
      return 4;
  } else if (height > 1500000) {
      return 5;
  } else if (height > 750000) {
      return 6;
  } else if (height > 375000) {
      return 7;
  } else if (height > 187500) {
      return 8;
  } else if (height > 93750) {
      return 9;
  } else if (height > 46875) {
      return 10;
  } else if (height > 23437.5) {
      return 11;
  } else if (height > 11718.75) {
      return 12;
  } else if (height > 5859.38) {
      return 13;
  } else if (height > 2929.69) {
      return 14;
  } else if (height > 1464.84) {
      return 15;
  } else if (height > 732.42) {
      return 16;
  } else if (height > 366.21) {
      return 17;
  } else {
      return 18;
  }
}
function getFarmland() {
  axios({
      url:
          serverAPI.geoserverUrl +
          '/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afarmland&maxFeatures=50&outputFormat=application%2Fjson',
      method: 'get',
  })
      .then(res => {
          console.log('农田：', res);
          formLandRef.value = res.data.features;
      })
      .catch(err => {});
}

let townZuowu = ref({ label: [] }); //镇的作物
let XZDM = '';
// 图层点击事件
function layerClick() {
  var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
  handler.setInputAction(function (movement) {
      var ray = viewer.camera.getPickRay(movement.position);
      var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
      if (cartesian) {
          let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
          if (cartographic) {
              let xy = new Cesium.Cartesian2();
              let alti = viewer.camera.positionCartographic.height;
              let level = getLevel(alti);
              const layers = viewer.imageryLayers._layers;
              const index = layers.findIndex(
                  item =>
                      item._imageryProvider._layers &&
                      item._imageryProvider._layers === 'shuzisannong:huangdaoqu_town'
              );
              if (index > -1) {
                  const providerPoint = layers[index];
                  // 拿取最后一个图层
                  let provider = providerPoint._imageryProvider;
                  if (
                      provider &&
                      provider.ready &&
                      provider._layers &&
                      providerPoint.show === true
                  ) {
                      xy = provider.tilingScheme.positionToTileXY(cartographic, level, xy);
                      let promise = provider.pickFeatures(
                          xy.x,
                          xy.y,
                          level,
                          cartographic.longitude,
                          cartographic.latitude
                      );
                      if (promise) {
                          promise.then(data => {
                              if (data.length > 0) {
                                  let newData = data['0'];
                                  if (newData.properties && newData.properties.XZDM) {
                                      if (XZDM !== newData.properties.XZDM) {
                                          //防止
                                          XZDM = newData.properties.XZDM;
                                          value.value = XZDM; //
                                          selectTab(); //
                                          let item = newData.data;
                                          // 定位
                                          viewer.camera.flyTo({
                                              destination: Cesium.Rectangle.fromDegrees(
                                                  item.bbox[0],
                                                  item.bbox[1],
                                                  item.bbox[2],
                                                  item.bbox[3]
                                              ),
                                              duration: 2,
                                          });
                                          // 移除高亮
                                          deleteEntityByName('townLine');
                                          // 高亮边界
                                          addBoundaryHandle(
                                              item.geometry && item.geometry.coordinates,
                                              'townLine',
                                              'yellow'
                                          );
                                          // 移除以前的
                                          removeWms(['village_CQL']);
                                          // 添加新的
                                          addvillage(
                                              `XZDM=${newData.properties.XZDM}`,
                                              'village_CQL'
                                          );

                                          // 显示该镇的种植结构
                                          let entitys = viewer.entities._entities._array;
                                          for (var na = entitys.length - 1; na >= 0; na--) {
                                              if (
                                                  entitys[na]._name &&
                                                  entitys[na]._name ===
                                                      'point' + newData.properties.XZDM
                                              ) {
                                                  let info = entitys[na]._info;
                                                  // entitys[na].label.show = true
                                                  townZuowu.value = info; //保存数据
                                                  console.log(
                                                      townZuowu.value,
                                                      '------------------'
                                                  );
                                                  showOverlayChart(movement.position); // 添加地图移动监听：使地图移动弹窗跟着移动
                                                  viewer.scene.postRender.addEventListener(
                                                      infoWindowPostRender
                                                  );
                                              } else {
                                                  // if (entitys[na].label) {
                                                  //     entitys[na].label.show = false
                                                  // }
                                              }
                                          }
                                          // 移除村高亮
                                          deleteEntityByName('villageLine');
                                          XZQDM = '';
                                      } else {
                                          // // 已经有镇了，监听村点击
                                          villageClick(layers, xy, level, cartographic);
                                      }
                                  } else {
                                      removeWms(['village_CQL']);
                                      // 移除框框
                                      hiddenOverlayChart(); // 清除监听事件
                                  }
                              }
                          });
                      }
                  }
              }
          }
      }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
let XZQDM = '';
// 村点击高亮
function villageClick(layers, xy, level, cartographic) {
  const index = layers.findIndex(
      item =>
          item._imageryProvider._layers &&
          item._imageryProvider._layers === 'shuzisannong:huangdaoqu_village'
  );
  if (index > -1) {
      const providerPoint = layers[index];
      // 拿取最后一个图层
      let provider = providerPoint._imageryProvider;
      if (provider && provider.ready && provider._layers && providerPoint.show === true) {
          xy = provider.tilingScheme.positionToTileXY(cartographic, level, xy);
          let promise = provider.pickFeatures(
              xy.x,
              xy.y,
              level,
              cartographic.longitude,
              cartographic.latitude
          );
          if (promise) {
              promise.then(data => {
                  if (data.length > 0) {
                      let newData = data['0'];
                      if (newData.properties && newData.properties.XZQDM) {
                          if (XZQDM !== newData.properties.XZQDM) {
                              //防止
                              XZQDM = newData.properties.XZQDM;
                              let item = newData.data;
                              // 移除高亮
                              deleteEntityByName('villageLine');
                              // 高亮边界
                              addBoundaryHandle(
                                  item.geometry && item.geometry.coordinates,
                                  'villageLine',
                                  'yellow'
                              );
                              // townZuowu.value = info//保存数据

                              // 后插和村
                              if (newData.properties.XZQDM === '370211104217') {
                                  // console.log('后河岔村委会')
                                  const rectangle = Cesium.Rectangle.fromDegrees(
                                      item.bbox[0],
                                      item.bbox[1],
                                      item.bbox[2],
                                      item.bbox[3]
                                  );
                                  const center = Cesium.Rectangle.center(rectangle); //获取视角范围中心点(得到的结果为弧度Cartographic)
                                  let longitude = Cesium.Math.toDegrees(center.longitude); //将弧度转为度
                                  let latitude = Cesium.Math.toDegrees(center.latitude);
                                  let info = {
                                      lon: longitude,
                                      lat: latitude,
                                      ...item.properties,
                                      // XZQMC
                                      label: [
                                          { crop: '茶叶', Shape_Area: 2820 },
                                          { crop: '大豆', Shape_Area: 2767 },
                                          { crop: '花生', Shape_Area: 62356 },
                                          { crop: '蓝莓', Shape_Area: 5443 },
                                          { crop: '地瓜', Shape_Area: 897 },
                                          { crop: '小麦', Shape_Area: 20111 },
                                      ],
                                  };
                                  townZuowu.value = info; //保存数据
                              }
                          }
                      }
                  }
              });
          }
      }
  }
}
// 添加村
// CQL_FILTER:筛选的语句
// customName地图服务自定义属性名
function addvillage(CQL_FILTER, customName) {
  let map2 = new Cesium.WebMapServiceImageryProvider({
      url: `${serverAPI.geoserverUrl}/shuzisannong/wms`,
      layers: 'shuzisannong:huangdaoqu_village', //图层名
      parameters: {
          service: 'WMS',
          format: 'image/png',
          transparent: true, //是否透明
          // CQL_FILTER: `XZDM=${value.value}`,
          CQL_FILTER: CQL_FILTER,
      },
  });
  map2.customName = customName;
  viewer.imageryLayers.addImageryProvider(map2);
}
// 移除wms
// nameArry ：属性名数组（customName）
// isMohu ：是否模糊查询
function removeWms(nameArry, isMohu) {
  if (viewer) {
      // 倒叙遍历，customName是自定义的属性
      const layers = viewer.imageryLayers._layers;
      for (let f = layers.length - 1; f >= 0; f--) {
          nameArry.forEach(item => {
              if (layers[f]._imageryProvider && layers[f]._imageryProvider.customName) {
                  if (isMohu) {
                      if (layers[f]._imageryProvider.customName.indexOf(item) > -1) {
                          viewer.imageryLayers.remove(layers[f]);
                      }
                  } else {
                      if (layers[f]._imageryProvider.customName === item) {
                          viewer.imageryLayers.remove(layers[f]);
                      }
                  }
              }
          });
      }
  }
}

// 根据实体名字删除实体(模糊删除)
function deleteEntityByName(name) {
  if (viewer) {
      let entitys = viewer.entities._entities._array;
      for (var na = entitys.length - 1; na >= 0; na--) {
          if (entitys[na]._name && entitys[na]._name === name) {
              viewer.entities.remove(entitys[na]);
          }
      }
  }
}
//折叠

function leftFoldClick() {
  leftWraFlag.value = !leftWraFlag.value;
  if (leftWraFlag.value) {
      let leftWra = document.querySelector('.leftWra');
      leftWra ? (leftWra.style.transform = 'translate(0,0)') : '';
  } else {
      let leftWra = document.querySelector('.leftWra');
      leftWra ? (leftWra.style.transform = 'translate(-107%,0)') : '';
  }
}
function rightFoldClick() {
  rightWraFlag.value = !rightWraFlag.value;
  if (rightWraFlag.value) {
      let rightWra = document.querySelector('.rightWra');
      rightWra.style.transform = 'translate(0,0)';
  } else {
      let rightWra = document.querySelector('.rightWra');
      rightWra.style.transform = 'translate(107%,0)';
  }
}

/*------------------接口--------------------*/
//产量预估
const getcornTotalYearValues = city => {
  getcornTotalYearValue({ divisions: city }).then(res => {
    console.log(res.data);
      estimate.value = res.data;
      areachar();
  });
};
//高标准农田
const getcornHeightStandardFarmlands = city => {
  getcornHeightStandardFarmland({ divisions: city }).then(res => {
      standardArr.value = res.data;
      farmland();
  });
};
//镇
const getcornGetAllTownss = () => {
  getcornGetAllTowns().then(res => {
      administration.value = res.data;
      Township.brr = JSON.parse(JSON.stringify(res.data));
      Township.arr = Township.brr.sort((a, b) => {
          return a.subName.length - b.subName.length;
      });
      Township.arr.unshift({
          subregion: '',
          subName: '全部',
      });
      let crr = [];
      let drr = [];
      Township.arr.forEach(item => {
          if (crr.indexOf(item.subName) == -1) {
              crr.push(item.subName);
              drr.push({
                  subName: item.subName,
                  subregion: item.subregion,
                  area: item.area,
                  type: item.type,
              });
          }
      });
      Township.arr = drr;
      ASdivision();
  });
};

//街道

const getcornGetAllVillagess = city => {
  getcornGetAllVillages({ divisions: city }).then(res => {
      administration.value = res.data;
      ASdivision();
  });
};

const selectTab = () => {
  console.log(value.value);
  if (value.value == '') {
      getcornGetAllTownss();
      removeWms(['village_CQL']);
      removeWms(['aaa']);
  } else {
      getcornGetAllVillagess(value.value);
  }
  getcornTotalYearValues(value.value);
};

//下载
/*---------------------------*/
const Deta = item => {
  getcornTotalYearValue({ divisions: value.value, whetherToDownload: true }).then(res => {
      downLoadFile(res.data[res.data.length - 1].excelPath);
  });
};
const Deta2 = item => {
  getcornHeightStandardFarmland().then(res => {
      exportExcel(res.data, `高标准农田`, 'Sheet1');
  });
};
const Deta3 = item => {
  if (value.value === '') {
      getcornGetAllTowns().then(res => {
          exportExcel(res.data, `行政区划`, 'Sheet1');
      });
  } else {
      getcornGetAllVillages({divisions:value.value}).then(res => {
          exportExcel(res.data, `行政区划`, 'Sheet1');
      });
  }
};

//表头数据切换  ----------前端生成excel
const changeTableHead = (tableData, fieldName) => {
  const list = tableData.map(item => {
      const obj = {};
      for (const k in item) {
          if (fieldName[k]) {
              obj[fieldName[k]] = item[k];
          }
      }
      return obj;
  });
  return list;
};
const exportExcel = (
  tableData,
  // tableData = [
  //     {
  //         region: '山东',
  //         湿润: '张三',
  //         适宜: 333,
  //         轻度干旱: 22,
  //         中度干旱: 22,
  //         重度干旱: 33,
  //         area: 44,
  //     },
  //     { index: 1, username: '李四', password: 444, age: 23 },
  // ],
  fileName = '用户列表',
  pageName = 'Sheet1'
) => {
  let fieldNameObj = {
      subName: '区域名称',
      corn_UnitOutputValue: '单产量(斤/亩)',
      cornOutput: '总产量(吨)',
  };
  const list = changeTableHead(tableData, fieldNameObj);
  // 创建工作表
  const data = xlsx.utils.json_to_sheet(list);
  // 创建工作簿
  const wb = xlsx.utils.book_new();
  // 将工作表放入工作簿中
  xlsx.utils.book_append_sheet(wb, data, pageName);
  // 生成文件并下载
  xlsx.writeFile(wb, `${fileName}.xlsx`);
};

/*-------------echarts--------------*/
function areachar() {
  const areaDivIntance = echarts.init(areaDiv.value);
  let data = {
      title: ['单产量', '总产量'],
      xData: [],
      yData: [
          {
              data: [],
              name: '单产量',
              type: 'line',
              yAxisIndex: 0,
              smooth: true,
              symbol: 'circle',
              symbolSize: 2,
          },
          {
              data: [],
              name: '总产量',
              type: 'line',
              yAxisIndex: 1,
              smooth: true,
              symbol: 'circle',
              symbolSize: 2,
          },
      ],
  };
  estimate.value.forEach(item => {
      data.xData.push(item.year);
      data.yData[0].data.push(item.corn_UnitOutputValue);
      data.yData[1].data.push(item.cornOutput);
  });

  //计算最大值
  const calMax = (arr, type = 0) => {
      let max = 0;
      arr.forEach(el => {
          el.yAxisIndex === type &&
              el.data.forEach(el1 => {
                  if (!(el1 === undefined || el1 === '')) {
                      if (max < el1) {
                          max = el1;
                      }
                  }
              });
      });
      let maxint = Math.ceil(max / 9.5); //不让最高的值超过最上面的刻度
      let maxval = maxint * 10; //让显示的刻度是整数
      return maxval;
  };

  // 绘制图表
  let option = {
      grid: {
          left: 50, //距离左边的距离
          right: 50, //距离右边的距离
          bottom: '14%', //距离下边的距离
          top: '22%', //距离上边的距离
      },
      color: ['rgba(205, 92, 92, 1)', 'rgba(0, 191, 255, 1)'],
      tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'cross',
          },
      },
      legend: {
          icon: 'rect',
          // itemWidth: 12, //指标线长度
          // itemGap: 24, //指标距离
          // itemHeight: 1, //指标高度，为1可去掉圆点
          textStyle: {
              color: 'rgba(255, 255, 255, 0.7)',
          },
          data: data.title,
          top: 40,
          x: 'center',
      },
      xAxis: [
          {
              type: 'category',
              data: data.xData,
              axisLine: {
                  lineStyle: {
                      color: 'rgba(255, 255, 255, 0.3)',
                  },
              },
              axisTick: {
                  //刻度线显示
                  show: false,
              },
              axisLabel: {
                  textStyle: {
                      color: 'rgba(255, 255, 255, 0.7)',
                  },
              },
              boundaryGap: false,
          },
      ],
      yAxis: [
          {
              type: 'value',
              name: '产量(吨)',
              min: 0,
              max: calMax(data.yData, 0),
              interval: calMax(data.yData, 0) / 5,
              axisLabel: {
                  formatter: '{value}',
              },
              axisLine: {
                  lineStyle: {
                      color: 'rgba(255, 255, 255, 0.8)',
                      opacity: 0, //y轴显示 0 - 1
                  },
              },
              axisTick: {
                  //刻度线显示
                  show: false,
              },
              splitLine: {
                  lineStyle: {
                      //分割线样式
                      // type: 'dashed',
                      color: 'rgba(255, 255, 255, 0.3)',
                  },
              },
          },
          {
              type: 'value',
              name: '产量(斤/亩)',
              min: 0,
              max: calMax(data.yData, 1),
              interval: calMax(data.yData, 1) / 5,
              axisLabel: {
                  formatter: '{value}',
              },
              axisLine: {
                  lineStyle: {
                      color: 'rgba(255, 255, 255, 0.8)',
                      opacity: 0, //y轴显示 0 - 1
                  },
              },
              axisTick: {
                  //刻度线显示
                  show: false,
              },
              splitLine: {
                  lineStyle: {
                      opacity: 0,
                  },
              },
          },
      ],
      series: data.yData,
  };

  option && areaDivIntance.setOption(option);

  window.addEventListener('resize', function () {
      areaDivIntance.resize();
  });
}

function farmland() {
  const farmlandDivIntance = echarts.init(farmlandDiv.value);
  let subNameArr = [];
  let wheatUnitOutputValueArr = [];
  let cornOutputArr = [];
  standardArr.value.forEach(item => {
    console.log(item);
      subNameArr.push(item.subName);
      wheatUnitOutputValueArr.push(item.corn_UnitOutputValue);
      cornOutputArr.push(item.cornOutput);
  });
  let option = {
      tooltip: {
          trigger: 'axis',
          formatter: function (params, ticket, callback) {
              var res = params[0].name;

              for (var i = 0, l = params.length; i < l; i++) {
                  if (params[i].seriesType === 'line') {
                      res +=
                          '<br/>' +
                          params[i].seriesName +
                          ' : ' +
                          (params[i].value ? params[i].value : '-') +
                          'h';
                  } else {
                      res +=
                          '<br/>' +
                          params[i].seriesName +
                          ' : ' +
                          (params[i].value ? params[i].value : '-') +
                          '';
                  }
              }
              return res;
          },
      },
      grid: {
          top: '15%',
          bottom: '15%',
          left: '15%',
          right: '15%',
      },
      legend: {
          data: ['单产量', '总产量'],
          textStyle: {
              color: '#fff',
              fontSize: 12,
          },
          type: 'scroll',
          top: '3%',
      },
      xAxis: [
          {
              type: 'category',
              nameTextStyle: {
                  fontSize: 12,
              },
              axisLabel: {
                  fontSize: 14,
                  relativeSize: -2,
                  textStyle: {
                      color: 'rgba(255, 255, 255, 0.7)',
                  },
              },
              splitLine: {
                  show: false,
              },
              axisTick: {
                  show: false,
              },
              axisLine: {
                  lineStyle: {
                      color: 'rgba(255, 255, 255, 0.3)',
                  },
              },
              axisPointer: {
                  type: 'shadow',
              },
              data: subNameArr,
          },
      ],
      yAxis: [
          {
              type: 'value',
              name: '产量(吨)',
              splitLine: {
                  show: true,
              },
              nameTextStyle: {
                  fontSize: 12,
              },
              axisLabel: {
                  fontSize: 14,
                  relativeSize: -2,
                  formatter: '{value}',
              },
              axisLine: {
                  lineStyle: {
                      color: '#fff',
                  },
              },
              splitLine: {
                  lineStyle: {
                      //分割线样式
                      // type: 'dashed',
                      color: 'rgba(255, 255, 255, 0.3)',
                  },
              },
              min: 0,
              position: 'top',
          },
          {
              type: 'value',
              name: '产量(斤/亩)',
              min: 0,
              position: 'bottom',
              splitLine: {
                  show: false,
              },
              nameTextStyle: {
                  fontSize: 12,
              },
              axisLabel: {
                  fontSize: 14,
                  relativeSize: -2,
                  formatter: '{value}',
              },
              axisLine: {
                  lineStyle: {
                      color: '#fff',
                  },
              },
          },
      ],
      series: [
          {
              name: '单产量',
              type: 'bar',
              barWidth: '10%',
              yAxisIndex: 0,
              data: wheatUnitOutputValueArr,
              itemStyle: {
                  normal: {
                      barBorderRadius: 2,
                      color: {
                          type: 'linear',
                          x: 0,
                          y: 0,
                          x2: 0,
                          y2: 1,
                          colorStops: [
                              {
                                  offset: 0,
                                  color: 'rgba(242, 252, 252, 1)', // 0% 处的颜色
                              },
                              {
                                  offset: 0.8,
                                  color: 'rgba(242, 252, 252, 0.2)', // 100% 处的颜色
                              },
                              {
                                  offset: 1,
                                  color: 'rgba(242, 252, 252, 0.1)', // 100% 处的颜色
                              },
                          ],
                          global: false, // 缺省为 false
                      },
                      // borderColor:'rgba(0, 170, 255, 0.9)',
                      shadowColor: 'rgba(255, 255, 255, 0.5)',
                      shadowBlur: 10,
                  },
              },
          },
          {
              name: '总产量',
              type: 'bar',
              yAxisIndex: 1,
              barWidth: '10%',
              data: cornOutputArr,
              itemStyle: {
                  normal: {
                      barBorderRadius: 2,
                      color: {
                          type: 'linear',
                          x: 0,
                          y: 0,
                          x2: 0,
                          y2: 1,
                          colorStops: [
                              {
                                  offset: 0,
                                  color: 'rgba(143, 186, 243,1)', // 0% 处的颜色
                              },
                              {
                                  offset: 0.8,
                                  color: 'rgba(143, 186, 243, 0.2)', // 100% 处的颜色
                              },
                              {
                                  offset: 1,
                                  color: 'rgba(143, 186, 243, 0.1)', // 100% 处的颜色
                              },
                          ],
                          global: false, // 缺省为 false
                      },
                      // borderColor:'rgba(0, 170, 255, 0.9)',
                      shadowColor: 'rgba(255, 255, 255, 0.5)',
                      shadowBlur: 10,
                  },
              },
          },
      ],
  };

  option && farmlandDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } });
  useEcharts(farmlandDivIntance, option);
}
// 添加wms
function addWms(layers, customName) {
  let map = new Cesium.WebMapServiceImageryProvider({
      url: serverAPI.geoserverUrl + `/shuzisannong/wms?`,
      layers: layers, //图层名
      parameters: {
          service: 'WMS',
          format: 'image/png',
          transparent: true, //是否透明
          // CQL_FILTER: `crop in (${name})`,
      },
  });
  map.customName = customName; //自己定义各种属性
  let dd = viewer.imageryLayers.addImageryProvider(map); //添加图层
  if (customName.indexOf('gbznt') > -1) {
      // viewer.imageryLayers.lower(dd);//将图层下移一层
      viewer.imageryLayers.lowerToBottom(dd); //将图层移到最底层
      viewer.imageryLayers.raise(dd); //将图层上移一层
  }
}
//返回
function back() {
  removeWms(['gbznt'], true);
  addWms('shuzisannong:huangdaoqu_town', 'tl');
  viewer.camera.flyTo({
      destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
      duration: 2,
  });
  flag.value = false;
}
function ASdivision() {
  const ASdivisionDivIntance = echarts.init(ASdivisionDiv.value);
  let subNameArr = [];
  let wheatUnitOutputValueArr = [];
  let cornOutputArr = [];
  administration.value.forEach(item => {
    console.log();
      subNameArr.push(item.subName);
      wheatUnitOutputValueArr.push(item.corn_UnitOutputValue);
      cornOutputArr.push(item.cornOutput);
  });
  let option = {
      tooltip: {
          trigger: 'axis',
          formatter: function (params, ticket, callback) {
              var res = params[0].name;

              for (var i = 0, l = params.length; i < l; i++) {
                  if (params[i].seriesType === 'line') {
                      res +=
                          '<br/>' +
                          params[i].seriesName +
                          ' : ' +
                          (params[i].value ? params[i].value : '-') +
                          'h';
                  } else {
                      res +=
                          '<br/>' +
                          params[i].seriesName +
                          ' : ' +
                          (params[i].value ? params[i].value : '-') +
                          '';
                  }
              }
              return res;
          },
      },
      grid: {
          top: '15%',
          bottom: '15%',
          left: '15%',
          right: '15%',
      },
      legend: {
          data: ['单产量', '总产量'],
          textStyle: {
              color: '#fff',
              fontSize: 12,
          },
          type: 'scroll',
          top: '5%',
      },
      xAxis: [
          {
              type: 'category',
              nameTextStyle: {
                  fontSize: 12,
              },
              axisLabel: {
                  fontSize: 14,
                  relativeSize: -2,
                  textStyle: {
                      color: 'rgba(255, 255, 255, 0.7)',
                  },
              },
              splitLine: {
                  show: false,
              },
              axisTick: {
                  show: false,
              },
              axisLine: {
                  lineStyle: {
                      color: 'rgba(255, 255, 255, 0.3)',
                  },
              },
              axisPointer: {
                  type: 'shadow',
              },
              data: subNameArr,
          },
      ],
      yAxis: [
          {
              type: 'value',
              name: '产量(吨)',
              splitLine: {
                  show: true,
              },
              nameTextStyle: {
                  fontSize: 12,
              },
              axisLabel: {
                  fontSize: 14,
                  relativeSize: -2,
                  formatter: '{value}',
              },
              axisLine: {
                  lineStyle: {
                      color: '#fff',
                  },
              },
              splitLine: {
                  lineStyle: {
                      //分割线样式
                      // type: 'dashed',
                      color: 'rgba(255, 255, 255, 0.3)',
                  },
              },
              min: 0,
              position: 'top',
          },
          {
              type: 'value',
              name: '产量(斤/亩)',
              min: 0,
              position: 'bottom',
              splitLine: {
                  show: false,
              },
              nameTextStyle: {
                  fontSize: 12,
              },
              axisLabel: {
                  fontSize: 14,
                  relativeSize: -2,
                  formatter: '{value}',
              },
              axisLine: {
                  lineStyle: {
                      color: '#fff',
                  },
              },
          },
      ],
      series: [
          {
              name: '单产量',
              type: 'bar',
              barWidth: '10%',
              yAxisIndex: 0,
              data: wheatUnitOutputValueArr,
              itemStyle: {
                  normal: {
                      barBorderRadius: 2,
                      color: {
                          type: 'linear',
                          x: 0,
                          y: 0,
                          x2: 0,
                          y2: 1,
                          colorStops: [
                              {
                                  offset: 0,
                                  color: 'rgba(4, 247, 227, 1)', // 0% 处的颜色
                              },
                              {
                                  offset: 0.8,
                                  color: 'rgba(4, 247, 227, 0.2)', // 100% 处的颜色
                              },
                              {
                                  offset: 1,
                                  color: 'rgba(4, 247, 227, 0.1)', // 100% 处的颜色
                              },
                          ],
                          global: false, // 缺省为 false
                      },
                      // borderColor:'rgba(0, 170, 255, 0.9)',
                      shadowColor: 'rgba(255, 255, 255, 0.5)',
                      shadowBlur: 10,
                  },
              },
          },
          {
              name: '总产量',
              type: 'bar',
              yAxisIndex: 1,
              barWidth: '10%',
              data: cornOutputArr,
              itemStyle: {
                  normal: {
                      barBorderRadius: 2,
                      color: {
                          type: 'linear',
                          x: 0,
                          y: 0,
                          x2: 0,
                          y2: 1,
                          colorStops: [
                              {
                                  offset: 0,
                                  color: 'rgba(33, 187, 251, 1)', // 0% 处的颜色
                              },
                              {
                                  offset: 0.8,
                                  color: 'rgba(33, 187, 251, 0.2)', // 100% 处的颜色
                              },
                              {
                                  offset: 1,
                                  color: 'rgba(33, 187, 251, 0.1)', // 100% 处的颜色
                              },
                          ],
                          global: false, // 缺省为 false
                      },
                      // borderColor:'rgba(0, 170, 255, 0.9)',
                      shadowColor: 'rgba(255, 255, 255, 0.5)',
                      shadowBlur: 10,
                  },
              },
          },
      ],
  };
  useEcharts(ASdivisionDivIntance, option);
}

/*--------------------------------------------------------------------------------------------*/
function getAreaFenlei() {
  let fl = fenleiRef.value;
  console.log('fl:', fl);
  axios({
      url:
          serverAPI.geoserverUrl +
          '/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
  })
      .then(res => {
          console.log('res1111:', res);
          let data = res.data.features;
          data.forEach((item, index) => {
              const rectangle = Cesium.Rectangle.fromDegrees(
                  item.bbox[0],
                  item.bbox[1],
                  item.bbox[2],
                  item.bbox[3]
              );
              const center = Cesium.Rectangle.center(rectangle); //获取视角范围中心点(得到的结果为弧度Cartographic)
              let longitude = Cesium.Math.toDegrees(center.longitude); //将弧度转为度
              let latitude = Cesium.Math.toDegrees(center.latitude);

              if (item.properties.XZDM === '370211011') {
                  //灵山卫街道
                  longitude = 120.0863;
                  latitude = 35.941;
              } else if (item.properties.XZDM === '370211003') {
                  //薛家岛街道
                  longitude = 120.243682;
                  latitude = 35.97123201;
              }
              const townData = fl[item.properties.XZMC];
              let label = [];
              if (townData) {
                  label = townData.map((it, inex) => {
                      // let dd = `${it.properties.crop} ：${(it.properties.Shape_Area / 666.67).toFixed(2)} 亩`
                      // return dd
                      return it.properties;
                  });
              }
              // label = label.join(' ')
              // console.log('label:', index, label,fl[item.properties.XZMC],item.properties.XZMC)
              // 添加点
              viewer.entities.add({
                  name: 'point' + item.properties.XZDM,
                  position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
                  point: new Cesium.PointGraphics({
                      show: true,
                      pixelSize: 10,
                      // heightReference: Cesium.HeightReference.NONE,
                      color: Cesium.Color.fromCssColorString('rgba(255, 255, 26, 1)'),
                      outlineColor: new Cesium.Color(0, 0, 0, 0),
                      outlineWidth: 0,
                      disableDepthTestDistance: Number.POSITIVE_INFINITY, //去掉地形遮挡
                      heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //贴地
                  }),
                  info: {
                      label: label,
                      ...item.properties,
                      // 经纬度，以便监听
                      lon: longitude,
                      lat: latitude,
                  },
              });
          });
      })
      .catch(err => {});
}
let fenleiRef = ref({});
function mbHandle() {
  axios({
      url:
          serverAPI.geoserverUrl +
          '/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afenlei&maxFeatures=137&outputFormat=application%2Fjson',
  })
      .then(res => {
          let features = res.data.features;
          let town = {};
          // 按镇分类
          features.forEach(item => {
              let key = item.properties.town;
              if (town[key]) {
                  town[key].push(item);
              } else {
                  town[key] = [item];
              }
          });
          fenleiRef.value = town;
          getAreaFenlei();
      })
      .catch(err => {});
}

// 地图移动时弹窗跟随
function infoWindowPostRender() {
  // let viewer = viewers.value;
  if (townZuowu.value && townZuowu.value.lon && townZuowu.value.lat) {
      //经纬度转为世界坐标

      const gisPosition = Cesium.Cartesian3.fromDegrees(
          Number(townZuowu.value.lon),
          Number(townZuowu.value.lat),
          0
      ); //转化为屏幕坐标
      var windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
          viewer.scene,
          gisPosition
      );

      if (Cesium.defined(windowPosition)) {
          const pop = document.getElementById('pop');
          pop.style.top = windowPosition.y - 10 + 'px';
          pop.style.left = windowPosition.x + 10 + 'px';
      }
  }
}
// 隐藏弹窗
function hiddenOverlayChart() {
  // 移除各种高亮
  XZDM = '';
  XZQDM = '';
  removeWms(['village_CQL']);
  removeWms(['aaa']);

  deleteEntityByName('villageLine');
  deleteEntityByName('townLine');

  const pop = document.getElementById('pop');
  pop.style.display = 'none'; // 清除监听事件
  viewer.scene.postRender.removeEventListener(infoWindowPostRender);
  // 重定位
  viewer.camera.flyTo({
      destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
      duration: 2,
  });
  removeWms(['gbznt'], true);
  // addWms('shuzisannong:huangdaoqu_town', 'tl');
  flag.value = false;
}
//显示弹窗
function showOverlayChart(position) {
  console.log(position);
  const pop = document.getElementById('pop');
  pop.style.display = 'block';
  pop.style.position = 'absolute';
  pop.style.top = position.y - 10 + 'px';
  pop.style.left = position.x + 10 + 'px';
  pop.style.zIndex = 99;
}

// function random(min, max) {
//     return Math.floor(Math.random() * (max - min)) + min;
// }

/*-------------------------------------------------------------------------------------------*/
</script>

<style lang="scss" scoped>
$height: calc(100vh - 100px);

.center {
  width: 100%;
  height: 100%;
  .imgrotate {
      transform: rotate(180deg);
  }
  .title {
      width: 100%;
      height: 45px;
      background: url('@/assets/images/title.png');
      background-repeat: no-repeat;
      background-size: 110% 100%;
      color: #fff;
      font-size: 18px;
      font-weight: 700;
      line-height: 45px;
      padding-left: 46px;
      display: flex;
      cursor: pointer;
      align-items: center;
      justify-content: space-between;

      span {
          width: 80%;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          background: linear-gradient(
              180deg,
              rgba(255, 255, 255, 1) 33.33%,
              rgba(41, 255, 219, 1) 100%
          );
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
      }

      p {
          width: 79px;
          height: 25px;
          border-radius: 20px;
          font-size: 14px;
          background: linear-gradient(
              180deg,
              rgba(16, 111, 111, 1) 0%,
              rgba(47, 214, 214, 1) 100%
          );
          border: 1.5px solid rgba(23, 194, 180, 1);
          display: flex;
          justify-content: center;
          align-items: center;
      }
  }
}

.leftWra {
  position: absolute;
  top: 10px;
  left: 20px;
  height: $height;
  width: 23%;
  background: rgba(2, 31, 26, 0.85);
  box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
  transition: transform 1s;
  .leftFoldDiv {
      width: 30px;
      height: 30px;
      position: absolute;
      right: -14%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 30px;
      color: #ccc;
  }
  .leftTop {
      width: 100%;
      display: flex;
      flex-direction: column;
      .areaDiv {
          width: 100%;
          height: 327px;
          opacity: 1;
          display: flex;
          padding: 1px;
          justify-content: center;
      }

      .ProgressBar {
          width: 100%;
          height: 9px;
          opacity: 1;
      }
  }

  .leftbottom {
      width: 100%;
      height: 455px;
      opacity: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      padding-top: 13px;

      .tableDiv {
          // background: rgba(255, 255, 255, 0.05);
          display: flex;
          justify-content: center;
          width: 85%;
          flex-direction: column;
          padding: 5px 10px 5px 10px;
          color: rgba(255, 255, 255, 1);

          .Crops {
              display: flex;
              width: 100%;
              margin-bottom: 10px;
              font-size: 14px;
              font-weight: 400;
              height: 31px;
              flex-direction: row;
              align-items: center;
              justify-content: space-around;
              opacity: 1;
              background: linear-gradient(
                  90deg,
                  rgba(21, 173, 148, 0.1) 0%,
                  rgba(21, 173, 148, 0) 100%
              );

              div {
                  display: flex;
                  align-items: center;
              }
          }

          .el-checkbox-group {
              display: flex;
              flex-direction: column;
          }

          :deep(.ones) {
              width: 100%;
              height: 171;
              display: flex;
              flex-direction: column;
              justify-content: flex-start;
              align-items: flex-start;
              --el-table-tr-bg-color: null;
              --el-table-border-color: null;
              font-size: 14px;
              font-weight: 400;
              letter-spacing: 0px;
              line-height: 0px;
              color: rgba(255, 255, 255, 1);
          }
      }
  }
}

.rightWra {
  position: absolute;
  top: 10px;
  right: 20px;
  width: 23%;
  height: $height;
  opacity: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(2, 31, 26, 0.85);
  box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
  transition: transform 1s;
  .rightFoldDiv {
      width: 30px;
      height: 30px;
      position: absolute;
      left: -8%;
      top: 50%;
      transform: translate(0, -50%);
      font-size: 30px;
      color: #ccc;
  }
  .rightTop {
      width: 100%;
      height: 40%;
      opacity: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;

      .farmlandDiv {
          width: 100%;
          height: 340px;
          opacity: 1;
          display: flex;
          justify-content: center;
      }

      .ProgressBar {
          width: 100%;
          height: 9px;
          opacity: 1;
      }
  }

  .rightbottom {
      width: 100%;
      height: 490px;
      opacity: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;

      .el-select {
          width: 80%;
          font-size: 14px;
          color: #333;
          background: rgba(22, 94, 102, 1);
          border: 1px solid rgba(4, 153, 153, 1) !important;
          margin-top: 20px;

          :deep(.el-input__wrapper) {
              background-color: transparent;
          }

          :deep(.el-input__inner) {
              color: rgba(255, 255, 255, 0.7);
          }
      }

      .ASdivision {
          width: 100%;
          height: 368px;
          opacity: 1;
          display: flex;
          justify-content: center;
      }
  }
}

.legend {
  position: absolute;
  right: 25%;
  bottom: 7%;
  width: 129px;
  border: 1px solid rgba(4, 153, 153, 1);

  // height: 50px;
  :deep(.el-collapse-item__header) {
      background: rgba(2, 31, 26, 0.6);
      color: rgba(255, 255, 255, 1);
      text-align: center;
      padding: 0 30px;
      font-size: 14px;
  }

  --el-collapse-content-bg-color {
      background: rgba(2, 31, 26, 0.6);
  }

  :deep(.el-collapse-item__content) {
      background: rgba(2, 31, 26, 0.6);
      padding: 0 10px;
      padding-bottom: 10px;
  }

  --el-collapse-border-color: none;
  --el-collapse-content-bg-color: none;

  // opacity: 1;
  // border-radius: 4px;
  // background: rgba(2, 31, 26, 0.6);
  // display: flex;
  // flex-direction: column;
  // justify-content: flex-start;
  // align-items: center;
  // padding: 10px 10px 10px 10px;
  p {
      margin: 10px;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 0px;
      color: rgba(255, 255, 255, 1);
      text-align: center;
  }

  .mt-4 {
      .el-checkbox {
          height: 30px;
          width: 100%;
          margin-bottom: 2px;
          padding-left: 10px;
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 0px;
          color: rgba(255, 255, 255, 1);
          text-align: left;
      }
  }

  :deep(.el-checkbox__label) {
      color: rgba(255, 255, 255, 1);
  }
}

.bottom_center {
  position: absolute;
  // left: calc(400px + 20px + 8vw);
  left: -2%;
  right: 0;
  margin: auto;
  width: calc(100% - (400px * 2) - (10vw * 2));
  min-width: 380px;
  bottom: 5%;
  height: 75px;
  opacity: 1;
  border-radius: 5px;
  background: rgba(2, 31, 26, 0.6);
  border: 1px solid rgba(4, 153, 153, 1);
}

.tool {
  position: absolute;
  right: 30%;
  top: 8%;
  width: 30px;
  height: 280px;
  opacity: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: none;
}

#popup {
  border-radius: 5px;
  background: rgba(2, 31, 26, 0.6);
  display: none;
  // justify-content: flex-start;
  // align-items: flex-end;
  padding: 30px 8px 20px 8px;

  & > div:nth-child(1) {
      font-weight: 400;
      letter-spacing: 0px;
      color: rgba(255, 255, 255, 1);
      // margin-top: 20px;
      line-height: 24px;
  }

  & > div:nth-child(2) {
      color: rgba(255, 255, 255, 1);
      width: 129px;
      height: 24px;
      opacity: 1;
      border-radius: 2px;
      background: rgba(217, 231, 255, 0.2);
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 2px 10px 2px 10px;
      // margin-top: 20px;
  }

  .cancel {
      position: absolute;
      right: 10px;
      top: 5px;
      color: rgba(255, 255, 255, 1);
      cursor: pointer;
  }
}

#pop {
  border-radius: 5px;
  background: rgba(2, 31, 26, 1);
  display: none;
  // justify-content: flex-start;
  // align-items: flex-end;
  padding: 30px 8px 20px 8px;

  .cancel {
      position: absolute;
      right: 10px;
      top: 5px;
      color: rgba(255, 255, 255, 1);
      cursor: pointer;
  }

  & > div {
      display: flex;
      margin-bottom: 10px;

      & > div:nth-child(1) {
          font-weight: 400;
          letter-spacing: 0px;
          color: rgba(255, 255, 255, 1);
          // margin-top: 20px;
          line-height: 24px;
          margin-right: 10px;
      }

      & > div:nth-child(2) {
          color: rgba(255, 255, 255, 1);
          width: 129px;
          height: 24px;
          opacity: 1;
          border-radius: 2px;
          background: rgba(217, 231, 255, 0.2);
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 2px 10px 2px 10px;
          // margin-top: 20px;
      }
  }
}
.back_button {
  position: absolute;
  right: 30%;
  top: 20px;
}

:deep(.el-select__popper.el-popper) {
}
</style>
<style lang="scss">
.select_city {
  background: rgba(2, 31, 26, 0.85);
  box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);

  .el-select-dropdown__item.hover {
      background: rgba(2, 31, 26, 0.95);
      box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.7);
  }

  .el-select-dropdown__item {
      color: #fff;
  }
}

.el-select__popper {
  border: none !important;
  background: transparent !important;
}

.el-popper {
  border: none !important;
  background: transparent !important;
}

.el-popper__arrow::before {
  background: rgba(41, 255, 255, 0.7) !important;
}
</style>
