Agriculture-front-end/src/views/meteorological/monitor/drought/index.vue

<template>
  <div class="center">
    <div style="width: 100%; height: 100%" id="cesiumContainer"></div>
    <div class="rightWra">
      <div class="farmlandHeader">
        监测日期:&emsp;
        <!--                <el-select-->
        <!--                    v-model="value"-->
        <!--                    popper-class="select_city"-->
        <!--                    class="m-2"-->
        <!--                    placeholder="Select"-->
        <!--                    @change="selectTime"-->
        <!--                >-->
        <!--                    <el-option v-for="item in options" :key="item" :label="item" :value="item" />-->
        <!--                </el-select>-->
        <el-date-picker
            popper-class="date_poper"
            class="m-2" v-model="value" @change="selectTime"
            format="YYYY 年 MM 月 DD 日" value-format="YYYY-MM-DD"
            type="date" placeholder="选择日期"/>


      </div>
      <div class="rightTop">
        <div class="title">
          <span>预警信息发布</span>
        </div>
        <div class="farmlandDiv">
          <div class="radioDiv">
            预警范围：
            <el-radio-group @change="onclick()" v-model="radio1" class="ml-4">
              <el-radio :label="5000" size="large">5km</el-radio>
              <el-radio :label="10000" size="large">10km</el-radio>
            </el-radio-group>
          </div>
          <div class="selectDiv">
            站点名称:
            <el-select v-model="zdmcValue" placeholder="请选择">
              <el-option
                  v-for="item in zdmcList"
                  :key="item.msName"
                  :label="item.msName"
                  :value="item.msName"
              >
              </el-option>
            </el-select>
          </div>
          <div class="selectDiv" style="margin-top: 10px">
            预警情况:
            <el-select v-model="warnValue" placeholder="请选择">
              <el-option
                  v-for="item in warnList"
                  :key="item.flag"
                  :label="item.label"
                  :value="item.label"
              >
              </el-option>
            </el-select>
          </div>
          <div class="btws">
            <el-button class="bt1" @click="query">查询</el-button>
            <el-button class="bt2">重置</el-button>
          </div>

          <el-table
              :cell-style="{ textAlign: 'center' }"
              :header-cell-style="{ 'text-align': 'center' }"
              :data="SaveResultsDiv"
              style="width: 100%"
              max-height="470px"
              @selection-change="handleSelectionChange"

          >
            <el-table-column type="selection" width="20"/>
            <el-table-column prop="devCode" width="80" label="站点名称"/>
            <el-table-column prop="warning" label="预警情况"/>
            <el-table-column prop="name" width="80" label="联系人"/>
            <el-table-column prop="telephone" label="联系电话"/>
          </el-table>
          <el-button
              class="but"
              type="primary"
              :disabled="multipleSelection.length < 1"
              @click="subText"
          >
            发布预警短信
          </el-button>
        </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="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>
        <div class="rowWra">
          <span>设备：</span>
          <span>{{ regionName }}</span>
        </div>
        <div class="rowWra">
          <span>经度：</span>
          <span>{{ popdata.msLongitude }}</span>
        </div>
        <div class="rowWra">
          <span>纬度：</span>

          <span>{{ popdata.msLatitude }}</span>
        </div>
      </div>
      <div class="cancel" @click="hiddenOverlayChart">X</div>
    </div>
    <div id="pop">
      <div>
        <div class="rowWra">
          <span>设备：</span>
          <span>{{ regionName }}</span>
        </div>
        <div v-for="(item, index) in clickInfoMap.info" :key="index" class="rowWra">
          <span>经度：</span>
          <span>{{ item.msLongitude }}</span>
          <span>纬度：</span>
          <span>{{ item.msLatitude }}</span>
        </div>
      </div>
      <div class="cancel" @click="hiddenOverlayChart">X</div>
    </div>
    <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="{
                                backgroundColor: value.color,
                                border: `1px solid value.color`,
                                width: `100%`,
                            }"
                :v-model="value.disabled"
                :disabled="value.disabled"
                :label="item"
            />
          </el-checkbox-group>
        </div>
      </el-collapse-item>
    </el-collapse>

    <el-button v-if="flag" class="back_button" @click="back()">返回</el-button>
  </div>
</template>

<script setup>
import {ref, onMounted, inject, reactive, watch} from 'vue';
import {ElMessage} from 'element-plus';
import * as echarts from 'echarts';
import TimeLine from '@/components/TimeLine/TimeLine.vue';
import moment from 'Moment';
import * as turf from '@turf/turf';
import {useEcharts} from '@/hooks/useEcharts';
import {ElLoading} from 'element-plus';
import ganhan1 from '@/assets/images/ganhan1.png';
import ganhan2 from '@/assets/images/ganhan2.png';
import ganhan3 from '@/assets/images/ganhan3.png';
import ganhan4 from '@/assets/images/ganhan4.png';
import ganhan0 from '@/assets/images/ganhan0.png';
import pun from '@/assets/images/personUnselected.png';
import pse from '@/assets/images/personSelected.png';
import {
  getmeteorologicalFreeze,
  getsendSms,
  getmeteorologyEquipment, meteorologicalsPeople, meteorology, zdmc,
} from '@/api/meteorological/monitor/information.js';
import axios from 'axios';
import 'echarts-gl';
import {download} from '@/utils/request';
import qs from 'qs';

let viewer = ref(null);
const value = ref()

let Township = reactive({arr: [], brr: [], crr: []}); //街道
let clickInfoMap = ref({name: '', value: ''});
const formLandRef = ref([]);
const flag = ref(false);
let rightWraFlag = ref(false);
const checkList = ref(['false']);
const areaDiv = ref(null);
const value1 = ref('');
const options = ref([]);
let informationData = ref([]);
let clickInformationData = reactive({
  lat: '',
  lan: '',
  name: ''
})
let peopleData = ref([]);
let windArr = ref([]);
let pressureArr = ref([]);
let typhoonTime = ref([]);
const SaveResultsDiv = ref([]);
const radio1 = ref(5000);
const multipleSelection = ref([]);
let popdata = ref({});
const circleLayer = ref([]);
const iconLayer = ref([]);
const personIconLayer = ref([]);
var baozi =
    'data:image/png;base64,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
let dic = {
  轻度干旱: {color: 'rgba(9, 187, 222, 1)', disabled: false},
  中度干旱: {color: 'rgba(255, 235, 59, 1)', disabled: false},
  严重干旱: {color: 'rgba(234, 165, 93, 1)', disabled: false},
  特大干旱: {color: 'rgba(215, 25, 28, 1)', disabled: false},
};
const warnValue =ref()
function query(){
  getmeteorology()


}
const warnList = [
  {
    label:'轻度干旱',
    flag:1,
  },
  {
    label:'中度干旱',
    flag:2,
  },
  {
    label:'严重干旱',
    flag:3,
  },
  {
    label:'特大干旱',
    flag:4,
  },
]

const rules = reactive({
  power: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
  count: [
    {
      required: true,
      message: 'Please select Activity count',
      trigger: 'change',
    },
  ],
  date1: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a date',
      trigger: 'change',
    },
  ],
  date2: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  type: [
    {
      type: 'array',
      required: true,
      message: 'Please select at least one activity type',
      trigger: 'change',
    },
  ],
  resource: [
    {
      required: true,
      message: 'Please select activity resource',
      trigger: 'change',
    },
  ],
  desc: [{required: true, message: 'Please input activity form', trigger: 'blur'}],
});
watch(
    () => value1.value,
    val => {
      let startTime = moment(value1.value[0]).format('YYYY-MM-DD')
          ? moment(value1.value[0]).format('YYYY-MM-DD ')
          : '';
      let endTime = moment(value1.value[1]).format('YYYY-MM-DD')
          ? moment(value1.value[1]).format('YYYY-MM-DD')
          : '';
    }
);

function getIcon(val) {
  if (val === '轻度干旱') return ganhan1
  if (val === '中度干旱') return ganhan2
  if (val === '严重干旱') return ganhan3
  if (val === '特大干旱') return ganhan4
  if (val === '无灾害') return ganhan0
}


const getYesterday = () => {
  let d = new Date()
  d.setDate(d.getDate() - 1)

  return d
}

//行政区划数据
var data = {
  title: [],
};
let map = ref(null);
const cun = () => {
  layers = new ol.layer.Tile({
    source: new ol.source.TileSuperMapRest({
      url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/huangdaoqu_village@huangdaoqu_bianjie',
      //rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
      cacheEnabled: false,
    }),
    name: 'huangdaoqu_village',
    projection: 'EPSG:4326', //3857
    zIndex: 9999,
  });
  map.addLayer(layers);
  // var layersArray = map.getLayers();
  // layersArray.insertAt(999, layers);
};
const zhen = () => {
  var layer = new ol.layer.Tile({
    source: new ol.source.TileSuperMapRest({
      url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/huangdaoqu_town@huangdaoqu_bianjie',
      //rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
      cacheEnabled: false,
    }),
    projection: 'EPSG:4326', //3857
    zIndex: 9999,
  });
  map.addLayer(layer);
};
let layers = ref(null); //村
// 组件挂载完成后执行
onMounted(() => {
  value.value = getYesterday().toJSON().substr(0, 10);
  //地图
  initMap();

  meteorologicals()
  let rightWra = document.querySelector('.rightWra');
  rightWra.style.transform = 'translate(107%,0)';
});
let alterData = ref([]);
let newArr = ref([]);
const zdmcList = ref([])
const zdmcValue = ref('')

function getmeteorology() {
  meteorology({data: value.value, alertRange: radio1.value, flag: 1,msName:zdmcValue.value,warning:warnValue.value}).then(res=>{
    SaveResultsDiv.value=res.data
  })
}
getmeteorology()


function getZdmc() {
  zdmc().then(res => {
    zdmcList.value = res.data
  })
}

getZdmc()

function initMap() {
  var parentElement = document.querySelector('.center');
  var mapContainer = document.getElementById('cesiumContainer');
  map = new ol.Map({
    target: 'cesiumContainer',
    controls: [],
    view: new ol.View({
      center: [119.86763411957472, 35.88435182141938],
      zoom: 11,
      projection: 'EPSG:4326',
    }),
    layers: [
      new ol.layer.Tile({
        source: new ol.source.Tianditu({
          layerType: 'img',
          key: '1d109683f4d84198e37a38c442d68311',
        }),
      }),
    ],
  });


  cun();
  zhen();
  const infoOverlay = new ol.Overlay({
    element: document.createElement('div'), // 创建一个用于显示信息的div元素
    positioning: 'bottom-center', // 设置覆盖层相对于锚点的位置
    offset: [0, -10], // 设置偏移量以便覆盖层不会遮挡图标
    stopEvent: false, // 允许地图事件继续传播（例如，缩放和拖动）
  });

  //滚轮控制村级矢量
  map.on('moveend', function (e) {
    var zoom = map.getView().getZoom(); //获取当前地图的缩放级别
    if (zoom >= 13) {
      layers.setVisible(true); //显示图层
    } else {
      layers.setVisible(false);
    }
  });
  map.on('singleclick', function (e) {
    alterData = ref([]);
    const pixel = map.getEventPixel(e.originalEvent);
    var coodinate = e.coordinate;
    var lon = coodinate[0];
    var lat = coodinate[1];
    var view = map.getView();
    var zoom = map.getView().getZoom();
    view.animate({
      center: [lon, lat],
      duration: 1000,
    });
    newArr.value.forEach(item => {
      if (layersDic[item]) {
        QueryData(
            e,
            layersDic[item].setOf,
            `http://192.168.0.113:8090/iserver/services/${layersDic[item].name}/rest/maps/${layersDic[item].setOf}`,
            item
        );
      } else if (layersGbz[item]) {
        QueryData(
            e,
            layersGbz[item].setOf,
            `http://192.168.0.113:8090/iserver/services/${layersGbz[item].name}/rest/maps/${layersGbz[item].setOf}`,
            item
        );
      }
    });
    map.forEachFeatureAtPixel(pixel, (feature, layer) => {


      // 获取Feature的其他属性（例如，自定义属性'id'）
      const featureId = feature.get('id');
      const featureType = feature.get('type');

// 将覆盖层添加到地图
      map.addOverlay(infoOverlay);
      if (featureType === '1') {
        for (const i in informationData.value) {
          if (featureId === informationData.value[i].msName) {
            clickInformationData.name = featureId
            clickInformationData.lon = informationData.value[i].msLongitude
            clickInformationData.lat = informationData.value[i].msLatitude
          }
        }
        infoOverlay.setPosition(feature.getGeometry().getCoordinates());
        // 设置覆盖层的内容
        infoOverlay.getElement().innerHTML = `
      <div class="info-window" style="padding: 10px 20px 10px 20px;background: rgba(2, 31, 26, 0.6);">
      <span  class="close-btn" style="color:white;display: flex;justify-content: end;cursor:pointer;" >X</span>
      <div style="color:white;font-size: 18px">
        <div style="margin-top: 10px"><span>名称:</span><span>${clickInformationData.name}</span></div>
        <div style="margin-top: 10px"><span>经度:</span><span>${clickInformationData.lon}</span></div>
        <div style="margin-top: 10px"><span>维度:</span><span>${clickInformationData.lat}</span></div>
      </div>
      </div>
    `;
        // 为关闭按钮添加点击事件监听器
        const closeButton = infoOverlay.getElement().querySelector('.close-btn');
        if (closeButton) {
          closeButton.addEventListener('click', () => {
            // 隐藏覆盖层
            infoOverlay.setPosition(undefined);
          });
        }
      } else if (featureType === '0') {
        for (const i in peopleData.value) {
          if (featureId === peopleData.value[i].contacts) {
            clickInformationData.name = featureId
            clickInformationData.phone = peopleData.value[i].phone
            clickInformationData.region = peopleData.value[i].region
          }
        }
        infoOverlay.setPosition(feature.getGeometry().getCoordinates());
        // 设置覆盖层的内容
        infoOverlay.getElement().innerHTML = `
      <div class="info-window" style="padding: 10px 20px 10px 20px;background: rgba(2, 31, 26, 0.6);">
      <span  class="close-btn" style="color:white;display: flex;justify-content: end;cursor:pointer;" >X</span>
      <div style="color:white;font-size: 18px">
        <div style="margin-top: 10px"><span>姓名:</span><span>${clickInformationData.name}</span></div>
        <div style="margin-top: 10px"><span>手机:</span><span>${clickInformationData.phone}</span></div>
        <div style="margin-top: 10px"><span>位置:</span><span>${clickInformationData.region}</span></div>
      </div>
      </div>
    `;
        // 为关闭按钮添加点击事件监听器
        const closeButton = infoOverlay.getElement().querySelector('.close-btn');
        if (closeButton) {
          closeButton.addEventListener('click', () => {
            // 隐藏覆盖层
            infoOverlay.setPosition(undefined);

            map.getLayers().forEach(function (layer) {
              if (layer instanceof ol.layer.Vector) {
                let fea = layer.getSource().getFeatures()[0]
                if (fea.get('type') === '0') {
                  fea.setStyle(new ol.style.Style({
                    image: new ol.style.Icon({
                      src: pun,
                      scale: 0.5 // 图标的缩放比例
                    })
                  }))
                }

              }
            });


          });
        }

        //切换图片
        feature.setStyle(new ol.style.Style({
          image: new ol.style.Icon({
            src: pse,
            scale: 0.5 // 图标的缩放比例
          })
        }))

        map.getLayers().forEach(function (layer) {
          if (layer instanceof ol.layer.Vector) {
            let fea = layer.getSource().getFeatures()[0]
            if (fea.get('type') === '0' && fea !== feature) {
              fea.setStyle(new ol.style.Style({
                image: new ol.style.Icon({
                  src: pun,
                  scale: 0.5 // 图标的缩放比例
                })
              }))
            }

          }
        });

      }


    });


  });
  // 监听父元素大小变化
  var resizeObserver = new ResizeObserver(function (entries) {
    entries.forEach(function (entry) {
      // 获取父元素的新大小
      var newWidth = entry.contentRect.width;
      var newHeight = entry.contentRect.height;

      // 调整地图容器的大小
      mapContainer.style.width = newWidth + 'px';
      mapContainer.style.height = newHeight + 'px';

      // 重新渲染地图
      map.updateSize();
    });
  });
  // 开始监听父元素大小变化
  resizeObserver.observe(parentElement);
}


//折叠
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 onclick = () => {
  //选择范围
  // getmeteorologicalFreezes();
  meteorologicals()
};
const meteorologicals = () => {
  for (const i in circleLayer.value) {
    map.removeLayer(circleLayer.value[i]);
  }
  circleLayer.value = []

  for (const i in iconLayer.value) {
    map.removeLayer(iconLayer.value[i]);
  }
  iconLayer.value = []
  for (const i in personIconLayer.value) {
    map.removeLayer(personIconLayer.value[i]);
  }
  personIconLayer.value = []
  getmeteorologyEquipment({flag: 1, data: value.value}).then(res => {
    informationData.value = res.data
    for (const i in informationData.value) {
      const centerLonLat = [parseFloat(informationData.value[i].msLongitude),
        parseFloat(informationData.value[i].msLatitude)];
      const radius = radio1.value / map.getView().getProjection().getMetersPerUnit(); // 将半径从米转换为度（EPSG:4326）
      const circleGeometry = new ol.geom.Circle(centerLonLat, radius);
      // 创建一个矢量图层
      circleLayer.value[i] = new ol.layer.Vector({
        source: new ol.source.Vector({
          features: [
            new ol.Feature({
              geometry: circleGeometry
            })
          ]
        }),
        style: new ol.style.Style({
          // fill: new ol.style.Fill({
          //   color: 'rgba(255,255,255,0.5)'
          // }),
          stroke: new ol.style.Stroke({
            color: 'rgb(255,255,0)', // 设置红色边框
            width: 2
          }),
        })
      });
      // 添加矢量图层到地图
      map.addLayer(circleLayer.value[i]);

      // 创建一个点几何对象，使用EPSG:4326投影坐标
      const iconPointGeometry = new ol.geom.Point(centerLonLat);
      // 创建一个Feature，并将其几何对象设置为刚创建的点
      const iconFeature = new ol.Feature({
        geometry: iconPointGeometry,
        id: informationData.value[i].msName,
        type: informationData.value[i].flag
      });

// 设置Feature的样式，包括图标
      iconFeature.setStyle(new ol.style.Style({
        image: new ol.style.Icon({
          src: getIcon(informationData.value[i].warning),
          scale: 0.5 // 图标的缩放比例
        })
      }));
// 创建一个矢量图层，并将Feature添加到该图层
      iconLayer.value[i] = new ol.layer.Vector({
        source: new ol.source.Vector({
          features: [iconFeature]
        })
      });

      map.addLayer(iconLayer.value[i]);

    }
  })


  meteorologicalsPeople().then(res => {
    peopleData.value = res.data

    for (const i in peopleData.value) {
      const centerLonLat = [parseFloat(peopleData.value[i].latitude),
        parseFloat(peopleData.value[i].longitude)];
      const iconPointGeometry = new ol.geom.Point(centerLonLat);
      // 创建一个Feature，并将其几何对象设置为刚创建的点
      const iconFeature = new ol.Feature({
        geometry: iconPointGeometry,
        id: peopleData.value[i].contacts,
        type: peopleData.value[i].flag
      });
      // 设置Feature的样式，包括图标
      iconFeature.setStyle(new ol.style.Style({
        image: new ol.style.Icon({
          src: pun,
          scale: 0.5 // 图标的缩放比例
        })
      }));
      personIconLayer.value[i] = new ol.layer.Vector({
        source: new ol.source.Vector({
          features: [iconFeature]
        })
      });
      map.addLayer(personIconLayer.value[i]);
    }
  })


}
const selectTime = (val) => {
  //选择时间

  meteorologicals()
  // getmeteorologicalFreezes();
};
const subText = () => {
  //发送短信
  getsendSms({meteorologicalStations: multipleSelection.value}).then(res => {
    console.log(res.data);
  });
};
const handleSelectionChange = val => {
  multipleSelection.value = val;
};
/*------------------接口--------------------*/

const getmeteorologicalFreezes = () => {
  getmeteorologicalFreeze({
    monitoringTime: value.value,
    alertRange: radio1.value,
    flag: '1',
  }).then(res => {
    SaveResultsDiv.value = res.data;
  });
};


</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;

    :deep(.el-input__wrapper) {
      width: 100px;
      border-radius: 30px;
      border: 1px solid rgba(23, 194, 180, 1);
      background: rgba(41, 255, 255, 0.1);
      height: 34px;
    }

    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: 120px;
      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;
    }
  }

}

.frame {
  :deep(.el-table__cell) {
    color: #333;
  }
}

.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;

  .farmlandHeader {
    display: flex;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0px;
    align-items: center;
    color: rgba(255, 255, 255, 1);
    margin: 20px 0;
    padding: 0 10px;

    ::v-deep .m-2 {

      .el-input__wrapper {
        box-shadow: none;
        border-radius: 4px;
        background: transparent linear-gradient(
                180deg,
                rgba(38, 212, 191, 0.5) 0%,
                rgba(43, 186, 186, 0.5) 25.69%,
                rgba(45, 165, 181, 0.5) 66.67%,
                rgba(54, 111, 168, 0.5) 100%
        );

        border: 1px solid rgba(137, 211, 245, 1);
      }

      :deep(.el-input__inner) {
        color: #fff;
      }
    }
  }

  .rightFoldDiv {
    width: 30px;
    height: 30px;
    position: absolute;
    left: -8%;
    top: 50%;
    transform: translate(0, -50%);
    font-size: 30px;
    color: #ccc;
  }

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

    .farmlandDiv {
      // background: rgba(255, 255, 255, 0.05);
      display: flex;
      width: 95%;
      flex-direction: column;
      padding: 5px 10px 5px 10px;
      color: rgba(255, 255, 255, 1);
      height: 100%;

      :deep(.el-table--fit) {
        height: 90%;
      }

      .but {
        width: 100px;
        margin: 10px auto;
      }

      .radioDiv {
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }

      .selectDiv {
        .el-select{
          ::v-deep .el-input__wrapper{
            box-shadow: none;
            border-radius: 4px;
            background: transparent linear-gradient(
                    180deg,
                    rgba(38, 212, 191, 0.5) 0%,
                    rgba(43, 186, 186, 0.5) 25.69%,
                    rgba(45, 165, 181, 0.5) 66.67%,
                    rgba(54, 111, 168, 0.5) 100%
            );

            border: none;
          }
        }
      }
    .btws{
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 10px;
      margin-bottom: 10px;
      .el-button{
        color:white;
        border-radius: 4px;


        border: 1.5px solid rgba(23, 194, 180, 1);
      }
      .bt1{
        background: linear-gradient(180deg, rgba(16, 111, 111, 1) 0%, rgba(47, 214, 214, 1) 100%);
      }
      .bt2{
        background: rgba(22, 94, 102, 1);
      }
    }
      :deep(.el-table tr) {
        background-color: transparent;
      }

      :deep(.el-table) {
        --el-table-border-color: none;
        color: rgba(255, 255, 255, 1);
      }

      :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
        background-color: revert;
      }

      .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: 170px;
        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);
      }
    }

    .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;

    .ASdivision {
      display: flex;
      justify-content: center;
      width: 95%;
      flex-direction: column;
      padding: 5px 10px 5px 10px;
      color: rgba(255, 255, 255, 1);
      height: 40%;

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

      :deep(.el-table) {
        --el-table-border-color: none;
        color: rgba(255, 255, 255, 1);
      }

      :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
        background-color: revert;
      }

      .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: 170px;
        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);
      }
    }
  }
}

:deep(.el-input__wrapper) {
  opacity: 1;
  border-radius: 4px;
  // background: rgba(22, 94, 102, 1);
  // border: 1px solid rgba(4, 153, 153, 1);
  // box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.25);dsawe
  width: 70%;

  .el-input__inner {
    color: white;
  }
}

.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: black;
  }
}


.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, 1);
  display: none;
  // justify-content: flex-start;
  // align-items: flex-end;
  padding: 30px 8px 20px 8px;
  border: 2px solid rgba(4, 153, 153, 1);

  .rowWra {
    display: flex;
    margin-bottom: 10px;
    justify-content: space-between;

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

    & > span:nth-child(2) {
      color: rgba(255, 255, 255, 1);
      width: 179px;
      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;
    }
  }

  .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;
}

</style>
<style lang="scss">
//.date_poper {
//  background: linear-gradient(180deg,
//      rgba(38, 212, 191, 0.5) 0%,
//      rgba(43, 186, 186, 0.5) 25.69%,
//      rgba(45, 165, 181, 0.5) 66.67%,
//      rgba(54, 111, 168, 0.5) 100%) !important;
//  color: white;
//  .el-picker-panel__body{
//    background: linear-gradient(180deg,
//        rgba(38, 212, 191, 0.5) 0%,
//        rgba(43, 186, 186, 0.5) 25.69%,
//        rgba(45, 165, 181, 0.5) 66.67%,
//        rgba(54, 111, 168, 0.5) 100%) !important;
//    color: white;
//  }
//}
</style>