作物
This commit is contained in:
@@ -2,7 +2,7 @@ window.serverAPI = {
|
||||
baseUrl: "http://192.168.2.96:8080",
|
||||
|
||||
// geoserver
|
||||
geoserverUrl: "http://192.168.2.20:9080/geoserver",
|
||||
geoserverUrl: "http://121.36.229.60:9080/geoserver",
|
||||
username: "admin",
|
||||
password: 'geoserver',
|
||||
}
|
||||
@@ -17,10 +17,7 @@
|
||||
<span>作物类型统计-高标准农田</span>
|
||||
<p>
|
||||
下载
|
||||
<img
|
||||
src="@/assets/icons/svg/downloads.svg"
|
||||
style="width: 14px; height: 14px; cursor: pointer"
|
||||
/>
|
||||
<img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
|
||||
</p>
|
||||
</div>
|
||||
<div ref="farmlandDiv" class="farmlandDiv"></div>
|
||||
@@ -31,19 +28,12 @@
|
||||
<span>作物类型统计-行政区划</span>
|
||||
<p>
|
||||
下载
|
||||
<img
|
||||
src="@/assets/icons/svg/downloads.svg"
|
||||
style="width: 14px; height: 14px; cursor: pointer"
|
||||
/>
|
||||
<img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
|
||||
</p>
|
||||
</div>
|
||||
<el-select @change="selectTab(item)" v-model="value" clearable placeholder="全部">
|
||||
<el-option
|
||||
v-for="item in Township.arr"
|
||||
:key="item.properties.XZDM"
|
||||
:label="item.properties.XZMC"
|
||||
:value="item.properties.XZDM"
|
||||
/>
|
||||
<el-option v-for="item in Township.arr" :key="item.properties.XZDM" :label="item.properties.XZMC"
|
||||
:value="item.properties.XZDM" />
|
||||
</el-select>
|
||||
<div ref="ASdivisionDiv" class="ASdivision"></div>
|
||||
</div>
|
||||
@@ -53,96 +43,62 @@
|
||||
<template #title>图例</template>
|
||||
<div class="mt-4">
|
||||
<el-checkbox-group v-model="checkList" @change="change">
|
||||
<el-checkbox
|
||||
style="
|
||||
<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(251, 171, 60, 1);
|
||||
border: 1px solid rgba(251, 171, 60, 1);
|
||||
width: 100%;
|
||||
"
|
||||
v-model="checked3"
|
||||
label="小麦"
|
||||
/>
|
||||
<el-checkbox
|
||||
style="
|
||||
" v-model="checked3" label="小麦" />
|
||||
<el-checkbox style="
|
||||
background: rgba(251, 219, 13, 1);
|
||||
border: 1px solid rgba(251, 219, 13, 1);
|
||||
width: 100%;
|
||||
"
|
||||
v-model="checked4"
|
||||
label="玉米"
|
||||
/>
|
||||
<el-checkbox
|
||||
style="
|
||||
" v-model="checked4" label="玉米" />
|
||||
<el-checkbox style="
|
||||
background: rgba(244, 218, 136, 1);
|
||||
border: 1px solid rgba(244, 218, 136, 1);
|
||||
width: 100%;
|
||||
"
|
||||
v-model="checked3"
|
||||
label="大豆"
|
||||
/>
|
||||
<el-checkbox
|
||||
style="
|
||||
" v-model="checked3" label="大豆" />
|
||||
<el-checkbox style="
|
||||
background: rgba(174, 83, 110, 1);
|
||||
border: 1px solid rgba(174, 83, 110, 1);
|
||||
width: 100%;
|
||||
"
|
||||
v-model="checked4"
|
||||
label="地瓜"
|
||||
/>
|
||||
<el-checkbox
|
||||
style="
|
||||
" v-model="checked4" label="地瓜" />
|
||||
<el-checkbox style="
|
||||
background: rgba(242, 177, 167, 1);
|
||||
border: 1px solid rgba(242, 177, 167, 1);
|
||||
width: 100%;
|
||||
"
|
||||
v-model="checked3"
|
||||
label="花生"
|
||||
/>
|
||||
<el-checkbox
|
||||
style="
|
||||
" v-model="checked3" label="花生" />
|
||||
<el-checkbox style="
|
||||
background: rgba(50, 211, 235, 0.8);
|
||||
border: 1px solid rgba(50, 211, 235, 1);
|
||||
width: 100%;
|
||||
"
|
||||
v-model="checked4"
|
||||
label="蓝莓"
|
||||
/>
|
||||
<el-checkbox
|
||||
style="
|
||||
" v-model="checked4" label="蓝莓" />
|
||||
<el-checkbox style="
|
||||
background: rgba(91, 196, 159, 1);
|
||||
border: 1px solid rgba(91, 196, 159, 1);
|
||||
width: 100%;
|
||||
"
|
||||
v-model="checked3"
|
||||
label="茶叶"
|
||||
/>
|
||||
<el-checkbox
|
||||
style="
|
||||
" v-model="checked3" label="茶叶" />
|
||||
<el-checkbox style="
|
||||
background: rgba(225, 153, 75, 1);
|
||||
border: 1px solid rgba(225, 153, 75, 1);
|
||||
width: 100%;
|
||||
"
|
||||
v-model="checked3"
|
||||
label="马铃薯"
|
||||
/>
|
||||
<el-checkbox
|
||||
style="
|
||||
" v-model="checked3" label="马铃薯" />
|
||||
<el-checkbox style="
|
||||
background: rgba(166, 209, 82, 1);
|
||||
border: 1px solid rgba(166, 209, 82, 1);
|
||||
width: 100%;
|
||||
"
|
||||
v-model="checked3"
|
||||
label="白菜和萝卜"
|
||||
/>
|
||||
<el-checkbox
|
||||
style="
|
||||
background: rgba(175, 110, 250, 0.8);
|
||||
border: 1px solid rgba(175, 110, 250, 0.8);
|
||||
width: 100%;
|
||||
"
|
||||
v-model="checked3"
|
||||
label="其他"
|
||||
/>
|
||||
" v-model="checked3" label="白菜和萝卜" />
|
||||
<el-checkbox style=" -->
|
||||
background: rgba(175, 110, 250, 0.8);
|
||||
border: 1px solid rgba(175, 110, 250, 0.8);
|
||||
width: 100%;
|
||||
" v-model="checked3" label="其他" />
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
@@ -158,11 +114,21 @@
|
||||
<span><img src="@/assets/images/face.png" alt="" /></span>
|
||||
<span><img src="@/assets/images/position.png" alt="" /></span>
|
||||
</div>
|
||||
<div id="popup1">
|
||||
<div v-for="(item, index) in clickInfoMap.info" :key="index">
|
||||
<div class="rowWra"><span>作物：</span><span>{{ item.crop }}</span></div>
|
||||
<div class="rowWra"><span>面积：</span><span>{{ item.Shape_Area }}</span></div>
|
||||
<div class="rowWra"><span>镇名：</span><span>{{ item.town }}</span></div>
|
||||
<div class="rowWra" v-if="item.village"><span>村名：</span><span>{{ item.village }}</span></div>
|
||||
<div class="rowWra" v-if="item.people"><span>土地所有人：</span><span>{{ item.people }}</span></div>
|
||||
</div>
|
||||
<div class="cancel" @click="hiddenOverlayChart">X</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, inject } from 'vue';
|
||||
import { ref, onMounted, inject, watch } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import TimeLine from '@/components/TimeLine/TimeLine.vue';
|
||||
import { useEcharts } from '@/hooks/useEcharts';
|
||||
@@ -176,6 +142,7 @@ const ProgressBarDiv = ref(null);
|
||||
const ASdivisionDiv = ref(null);
|
||||
let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
|
||||
const value = ref('');
|
||||
const clickInfoMap = ref({ info: [] });
|
||||
let dd = {
|
||||
小麦: [],
|
||||
玉米: [],
|
||||
@@ -189,17 +156,30 @@ let dd = {
|
||||
其他: [],
|
||||
};
|
||||
let dic = {
|
||||
小麦: 'rgba(102, 142, 214, 0.8)',
|
||||
玉米: 'rgba(255, 225, 104, 0.8)',
|
||||
大豆: 'rgba(156, 220, 130, 0.8)',
|
||||
地瓜: 'rgba(156, 220, 130, 0.8)',
|
||||
花生: 'rgba(212, 236, 89, 0.8)',
|
||||
蓝莓: 'rgba(50, 211, 235, 0.8)',
|
||||
茶叶: 'rgba(91, 196, 159, 0.8)',
|
||||
马铃薯: 'rgba(254, 182, 77, 0.8)',
|
||||
白菜和萝卜: 'rgba(250, 129, 109, 0.8)',
|
||||
其他: 'rgba(250, 129, 109, 0.8)',
|
||||
小麦: { color: 'rgba(255, 141, 26, 1)', disabled: false },
|
||||
玉米: { color: 'rgba(255, 255, 26, 1)', disabled: true },
|
||||
大豆: { color: 'rgba(255, 201, 148, 1)', disabled: false },
|
||||
地瓜: { color: 'rgba(255, 84, 84, 1)', disabled: false },
|
||||
花生: { color: 'rgba(255, 140, 255, 1)', disabled: false },
|
||||
蓝莓: { color: 'rgba(26, 255, 255, 1)', disabled: false },
|
||||
茶叶: { color: 'rgba(26, 255, 140, 1)', disabled: false },
|
||||
马铃薯: { color: 'rgba(255, 171, 87, 1)', disabled: true },
|
||||
白菜和萝卜: { color: 'rgba(140, 255, 26, 1)', disabled: true },
|
||||
其他: { color: 'rgba(140, 26, 255, 1)', disabled: false },
|
||||
};
|
||||
// 图层字典
|
||||
let layersDic = {
|
||||
小麦: 'shuzisannong:xiaomai',
|
||||
// 玉米: 'shuzisannong:yumi',
|
||||
大豆: 'shuzisannong:dadou',
|
||||
地瓜: 'shuzisannong:digua',
|
||||
花生: 'shuzisannong:huasheng',
|
||||
蓝莓: 'shuzisannong:lanmei',
|
||||
茶叶: 'shuzisannong:chaye',
|
||||
其他: 'shuzisannong:other',
|
||||
// 马铃薯: 'rgba(225, 153, 75, 1)',
|
||||
// 白菜和萝卜: 'rgba(166, 209, 82, 1)',
|
||||
}
|
||||
var data = {
|
||||
title: ['区域一', '区域二', '区域三', '区域四', '区域五', '区域六', '区域七', '区域八'],
|
||||
corn: [333.3, null, 500, 500, 333.3, null, 333.3, 500],
|
||||
@@ -231,6 +211,9 @@ onMounted(() => {
|
||||
ProgressBar(); //图表
|
||||
ASdivision(); //图表
|
||||
getArea(); //请求
|
||||
|
||||
checkList.value = Object.keys(dic)
|
||||
// checkList.value = Object.keys(dic.filter(item => !item.disabled))
|
||||
});
|
||||
const mapOption = {
|
||||
url:
|
||||
@@ -342,7 +325,6 @@ function initMap() {
|
||||
});
|
||||
// 拿取最后一个图层
|
||||
let provider = providerPoint._imageryProvider;
|
||||
console.log(providerPoint);
|
||||
if (provider && provider.ready && provider._layers && providerPoint.show === true) {
|
||||
xy = provider.tilingScheme.positionToTileXY(cartographic, level, xy);
|
||||
let promise = provider.pickFeatures(
|
||||
@@ -363,7 +345,9 @@ function initMap() {
|
||||
}
|
||||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||||
|
||||
addwms();
|
||||
// addwms();
|
||||
// 图层点击事件
|
||||
layerClick()
|
||||
|
||||
//加载黄岛区村级地图服务
|
||||
// Cesium.GeoJsonDataSource.load(
|
||||
@@ -471,7 +455,7 @@ function initMap() {
|
||||
// );
|
||||
}
|
||||
|
||||
const checkList = ref(Object.keys(dic));
|
||||
const checkList = ref([]);
|
||||
|
||||
function getLevel(height) {
|
||||
if (height > 48000000) {
|
||||
@@ -515,13 +499,47 @@ function getLevel(height) {
|
||||
}
|
||||
}
|
||||
|
||||
function change(e) {
|
||||
console.log('e:', e);
|
||||
console.log('checkList:', checkList.value);
|
||||
removeWms('crop');
|
||||
addwms();
|
||||
function change(e, a) {
|
||||
console.log('e:', e, a);
|
||||
// console.log('checkList:', checkList.value);
|
||||
// removeWms('crop');
|
||||
// addwms();
|
||||
}
|
||||
|
||||
watch(() => checkList.value, (val, oldVal) => {
|
||||
if (val.length > oldVal.length) {
|
||||
// 挑选出增多的数据
|
||||
const newData = val.filter(item => {
|
||||
const index = oldVal.findIndex(it => it === item)
|
||||
if (index < 0) {
|
||||
return item
|
||||
}
|
||||
})
|
||||
newData.forEach(item => {
|
||||
if (layersDic[item]) {
|
||||
addLayerWms(layersDic[item], item)
|
||||
}
|
||||
})
|
||||
} else if (val.length < oldVal.length) {
|
||||
// 挑选出减少的数据
|
||||
const newData = oldVal.filter(item => {
|
||||
const index = val.findIndex(it => it === item)
|
||||
if (index < 0) {
|
||||
return item
|
||||
}
|
||||
})
|
||||
newData.forEach(item => {
|
||||
if (layersDic[item]) {
|
||||
removeWms(item)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
watch(() => clickInfoMap.value, (val) => {
|
||||
console.log('valvalvalvalvalvalvalvalvalval:', val)
|
||||
|
||||
})
|
||||
// 根据name移除wms
|
||||
function removeWms(name) {
|
||||
// 倒叙遍历，customName是自定义的属性
|
||||
// let viewer = viewers.value
|
||||
@@ -535,7 +553,6 @@ function removeWms(name) {
|
||||
function addwms() {
|
||||
// let viewer = viewers.value
|
||||
const name = "'" + checkList.value.join("','") + "'";
|
||||
console.log('name:', name);
|
||||
let map = new Cesium.WebMapServiceImageryProvider({
|
||||
url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms?`,
|
||||
layers: 'shuzisannong:fenlei', //图层名
|
||||
@@ -549,11 +566,151 @@ function addwms() {
|
||||
map.customName = 'crop'; //自己定义各种属性
|
||||
viewer.imageryLayers.addImageryProvider(map); //添加图层
|
||||
}
|
||||
// 添加wms
|
||||
function addLayerWms(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; //自己定义各种属性
|
||||
viewer.imageryLayers.addImageryProvider(map); //添加图层
|
||||
}
|
||||
// 图层点击事件
|
||||
function layerClick() {
|
||||
|
||||
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
|
||||
handler.setInputAction(async 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;
|
||||
console.log('layers:', layers);
|
||||
// 筛选出种植结构的最后一个图层
|
||||
// let newLayer = layers.filter(item => {
|
||||
// const index = Object.values(layersDic).findIndex(it => item._imageryProvider._layers && it === item._imageryProvider._layers)
|
||||
// if (index > -1) {
|
||||
// return item
|
||||
// }
|
||||
// })
|
||||
let newData = []
|
||||
let promise = layers.map(async item => {
|
||||
console.log('item')
|
||||
if (item._imageryProvider._layers) {
|
||||
// 是种植结构图层
|
||||
if (Object.values(layersDic).findIndex(it => it === item._imageryProvider._layers) > -1) {
|
||||
const providerPoint = item;
|
||||
// 拿取最后一个图层
|
||||
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) {
|
||||
await promise.then(data => {
|
||||
if (data.length > 0) {
|
||||
let info = data['0'].properties
|
||||
console.log('info:', info)
|
||||
const ind = newData.findIndex(ii => ii && ii.crop === info.crop)
|
||||
if (ind < 0) {
|
||||
console.log('push:', info)
|
||||
newData.push(info)
|
||||
console.log('newData:', newData)
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
await Promise.all(promise)
|
||||
console.log('newDatanewDatanewDatanewDatanewData:', newData)
|
||||
if (newData.length > 0) {
|
||||
const coordinate = movement.position; //屏幕坐标 // 转为经纬度，保存，用于监听时转换坐标
|
||||
var ellipsoid = viewer.scene.globe.ellipsoid; // 将屏幕坐标转为地理坐标
|
||||
var cartesian = viewer.camera.pickEllipsoid(coordinate, ellipsoid);
|
||||
console.log('cartesian:', cartesian);
|
||||
if (cartesian) {
|
||||
let cartographic = ellipsoid.cartesianToCartographic(cartesian);
|
||||
let longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
|
||||
let latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
|
||||
console.log('longitudeString:', longitudeString);
|
||||
// newData.lon = longitudeString;
|
||||
// newData.lat = latitudeString; /*保存（弹窗）的数据*/
|
||||
|
||||
console.log('data:', newData);
|
||||
clickInfoMap.value = {
|
||||
info: newData,
|
||||
// ...newData['0'],
|
||||
lon: longitudeString,
|
||||
lat: latitudeString,
|
||||
};
|
||||
}
|
||||
showOverlayChart(coordinate); // 添加地图移动监听：使地图移动弹窗跟着移动
|
||||
viewer.scene.postRender.addEventListener(infoWindowPostRender);
|
||||
} else {
|
||||
hiddenOverlayChart(); // 清除监听事件 // viewer.scene.postRender.removeEventListener(infoWindowPostRender);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||||
|
||||
}
|
||||
// 地图移动时弹窗跟随
|
||||
function infoWindowPostRender() {
|
||||
// let viewer = viewers.value;
|
||||
// console.log('clickInfoMap.value:', clickInfoMap.value);
|
||||
if (clickInfoMap.value && clickInfoMap.value.lon && clickInfoMap.value.lat) {
|
||||
//经纬度转为世界坐标
|
||||
const gisPosition = Cesium.Cartesian3.fromDegrees(
|
||||
Number(clickInfoMap.value.lon),
|
||||
Number(clickInfoMap.value.lat),
|
||||
0
|
||||
); //转化为屏幕坐标
|
||||
var windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
|
||||
viewer.scene,
|
||||
gisPosition
|
||||
);
|
||||
|
||||
if (Cesium.defined(windowPosition)) {
|
||||
const pop = document.getElementById('popup1');
|
||||
pop.style.top = windowPosition.y - 10 + 'px';
|
||||
pop.style.left = windowPosition.x + 10 + 'px';
|
||||
}
|
||||
}
|
||||
}
|
||||
// 隐藏弹窗
|
||||
function hiddenOverlayChart() {
|
||||
// let viewer = viewers.value;
|
||||
const pop = document.getElementById('popup1');
|
||||
pop.style.display = 'none'; // 清除监听事件
|
||||
viewer.scene.postRender.removeEventListener(infoWindowPostRender);
|
||||
}
|
||||
//显示弹窗
|
||||
function showOverlayChart(position) {
|
||||
console.log('显示')
|
||||
const pop = document.getElementById('popup1');
|
||||
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;
|
||||
}
|
||||
|
||||
//接口
|
||||
const getArea = (item, index) => {
|
||||
return getarea({ time: '2023-04-19', subregion: index, parent: item }).then(response => {
|
||||
console.log(response.data);
|
||||
return response.data;
|
||||
});
|
||||
};
|
||||
@@ -618,7 +775,6 @@ const selectTab = () => {
|
||||
let arr = [...Township.arr];
|
||||
arr.forEach(item => {
|
||||
if (item.properties.XZDM == value.value) {
|
||||
console.log(item.properties);
|
||||
getArea(item.properties.XZMC, '2');
|
||||
viewer.camera.flyTo({
|
||||
destination: Cesium.Rectangle.fromDegrees(
|
||||
@@ -632,13 +788,11 @@ const selectTab = () => {
|
||||
}
|
||||
let arr = [...Township.brr];
|
||||
let brr = [];
|
||||
// console.log(Township.brr);
|
||||
arr.forEach(item => {
|
||||
if (item.properties.XZDM == value.value) {
|
||||
brr.push(item.properties.XZQMC);
|
||||
}
|
||||
});
|
||||
// console.log(brr);
|
||||
data.title = [...Object.values(brr)];
|
||||
ASdivision();
|
||||
});
|
||||
@@ -1015,7 +1169,6 @@ function farmland() {
|
||||
var tooltip = option.tooltip;
|
||||
// 提示框自定义内容包括总合及文字
|
||||
function formatFun(params) {
|
||||
// console.log('params====>', params)
|
||||
let tipStr = params[0].axisValueLabel + '</br>'; // 初始化提示框文字默认当前轴名称并换行
|
||||
let totalNum = 0; // 用于存储当前列总数
|
||||
// params为当前柱状图数组数量 遍历求和并添加类目label：value
|
||||
@@ -1416,9 +1569,11 @@ function ASdivision() {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$height: calc(100vh - 100px);
|
||||
|
||||
.center {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
@@ -1432,22 +1587,22 @@ $height: calc(100vh - 100px);
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
justify-content: space-between;
|
||||
|
||||
span {
|
||||
width: 80%;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
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%
|
||||
);
|
||||
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;
|
||||
@@ -1464,11 +1619,13 @@ $height: calc(100vh - 100px);
|
||||
width: 23%;
|
||||
background: rgba(2, 31, 26, 0.85);
|
||||
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
|
||||
|
||||
.leftTop {
|
||||
// height: 35%;
|
||||
max-width: calc(100% - 20px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.areaDiv {
|
||||
width: 100%;
|
||||
height: 327px;
|
||||
@@ -1477,10 +1634,12 @@ $height: calc(100vh - 100px);
|
||||
padding: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.leftbottom {
|
||||
height: 35%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.typesofDiv {
|
||||
width: 100%;
|
||||
height: 267px;
|
||||
@@ -1500,6 +1659,7 @@ $height: calc(100vh - 100px);
|
||||
align-items: center;
|
||||
background: rgba(2, 31, 26, 0.85);
|
||||
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
|
||||
|
||||
.rightTop {
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
@@ -1508,17 +1668,20 @@ $height: calc(100vh - 100px);
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.farmlandDiv {
|
||||
width: 100%;
|
||||
height: 340px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ProgressBar {
|
||||
width: 100%;
|
||||
height: 9px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.rightbottom {
|
||||
width: 100%;
|
||||
height: 455px;
|
||||
@@ -1528,6 +1691,7 @@ $height: calc(100vh - 100px);
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
padding-top: 13px;
|
||||
|
||||
.el-select {
|
||||
width: 80%;
|
||||
font-size: 14px;
|
||||
@@ -1535,13 +1699,16 @@ $height: calc(100vh - 100px);
|
||||
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: 415px;
|
||||
height: 368px;
|
||||
@@ -1549,6 +1716,7 @@ $height: calc(100vh - 100px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-select-dropdown) {
|
||||
background: red !important;
|
||||
}
|
||||
@@ -1558,6 +1726,8 @@ $height: calc(100vh - 100px);
|
||||
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);
|
||||
@@ -1566,15 +1736,19 @@ $height: calc(100vh - 100px);
|
||||
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;
|
||||
}
|
||||
|
||||
--el-collapse-border-color: none;
|
||||
--el-collapse-content-bg-color: none;
|
||||
|
||||
// opacity: 1;
|
||||
// border-radius: 4px;
|
||||
// background: rgba(2, 31, 26, 0.6);
|
||||
@@ -1592,6 +1766,7 @@ $height: calc(100vh - 100px);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
.el-checkbox {
|
||||
height: 30px;
|
||||
@@ -1606,6 +1781,7 @@ $height: calc(100vh - 100px);
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-checkbox__label) {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
@@ -1623,6 +1799,7 @@ $height: calc(100vh - 100px);
|
||||
background: rgba(2, 31, 26, 0.6);
|
||||
border: 1px solid rgba(4, 153, 153, 1);
|
||||
}
|
||||
|
||||
.tool {
|
||||
position: absolute;
|
||||
right: 30%;
|
||||
@@ -1636,4 +1813,52 @@ $height: calc(100vh - 100px);
|
||||
align-items: flex-start;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#popup1 {
|
||||
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;
|
||||
border: 2px solid rgba(4, 153, 153, 1);
|
||||
|
||||
|
||||
.rowWra {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&>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: 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;
|
||||
}
|
||||
}
|
||||
|
||||
.cancel {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 5px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user