This commit is contained in:
伊丽莎白 2023-04-23 18:18:06 +08:00
parent 2a384502ab
commit dac2b7a581
2 changed files with 333 additions and 108 deletions

View File

@ -2,7 +2,7 @@ window.serverAPI = {
baseUrl: "http://192.168.2.96:8080", baseUrl: "http://192.168.2.96:8080",
// geoserver // geoserver
geoserverUrl: "http://192.168.2.20:9080/geoserver", geoserverUrl: "http://121.36.229.60:9080/geoserver",
username: "admin", username: "admin",
password: 'geoserver', password: 'geoserver',
} }

View File

@ -17,10 +17,7 @@
<span>作物类型统计-高标准农田</span> <span>作物类型统计-高标准农田</span>
<p> <p>
下载 &nbsp; 下载 &nbsp;
<img <img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
src="@/assets/icons/svg/downloads.svg"
style="width: 14px; height: 14px; cursor: pointer"
/>
</p> </p>
</div> </div>
<div ref="farmlandDiv" class="farmlandDiv"></div> <div ref="farmlandDiv" class="farmlandDiv"></div>
@ -31,19 +28,12 @@
<span>作物类型统计-行政区划</span> <span>作物类型统计-行政区划</span>
<p> <p>
下载 &nbsp; 下载 &nbsp;
<img <img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
src="@/assets/icons/svg/downloads.svg"
style="width: 14px; height: 14px; cursor: pointer"
/>
</p> </p>
</div> </div>
<el-select @change="selectTab(item)" v-model="value" clearable placeholder="全部"> <el-select @change="selectTab(item)" v-model="value" clearable placeholder="全部">
<el-option <el-option v-for="item in Township.arr" :key="item.properties.XZDM" :label="item.properties.XZMC"
v-for="item in Township.arr" :value="item.properties.XZDM" />
:key="item.properties.XZDM"
:label="item.properties.XZMC"
:value="item.properties.XZDM"
/>
</el-select> </el-select>
<div ref="ASdivisionDiv" class="ASdivision"></div> <div ref="ASdivisionDiv" class="ASdivision"></div>
</div> </div>
@ -53,96 +43,62 @@
<template #title>图例</template> <template #title>图例</template>
<div class="mt-4"> <div class="mt-4">
<el-checkbox-group v-model="checkList" @change="change"> <el-checkbox-group v-model="checkList" @change="change">
<el-checkbox <el-checkbox v-for="(value, item, key) in dic" :key="key" :style="{
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); background: rgba(251, 171, 60, 1);
border: 1px solid rgba(251, 171, 60, 1); border: 1px solid rgba(251, 171, 60, 1);
width: 100%; width: 100%;
" " v-model="checked3" label="小麦" />
v-model="checked3" <el-checkbox style="
label="小麦"
/>
<el-checkbox
style="
background: rgba(251, 219, 13, 1); background: rgba(251, 219, 13, 1);
border: 1px solid rgba(251, 219, 13, 1); border: 1px solid rgba(251, 219, 13, 1);
width: 100%; width: 100%;
" " v-model="checked4" label="玉米" />
v-model="checked4" <el-checkbox style="
label="玉米"
/>
<el-checkbox
style="
background: rgba(244, 218, 136, 1); background: rgba(244, 218, 136, 1);
border: 1px solid rgba(244, 218, 136, 1); border: 1px solid rgba(244, 218, 136, 1);
width: 100%; width: 100%;
" " v-model="checked3" label="大豆" />
v-model="checked3" <el-checkbox style="
label="大豆"
/>
<el-checkbox
style="
background: rgba(174, 83, 110, 1); background: rgba(174, 83, 110, 1);
border: 1px solid rgba(174, 83, 110, 1); border: 1px solid rgba(174, 83, 110, 1);
width: 100%; width: 100%;
" " v-model="checked4" label="地瓜" />
v-model="checked4" <el-checkbox style="
label="地瓜"
/>
<el-checkbox
style="
background: rgba(242, 177, 167, 1); background: rgba(242, 177, 167, 1);
border: 1px solid rgba(242, 177, 167, 1); border: 1px solid rgba(242, 177, 167, 1);
width: 100%; width: 100%;
" " v-model="checked3" label="花生" />
v-model="checked3" <el-checkbox style="
label="花生"
/>
<el-checkbox
style="
background: rgba(50, 211, 235, 0.8); background: rgba(50, 211, 235, 0.8);
border: 1px solid rgba(50, 211, 235, 1); border: 1px solid rgba(50, 211, 235, 1);
width: 100%; width: 100%;
" " v-model="checked4" label="蓝莓" />
v-model="checked4" <el-checkbox style="
label="蓝莓"
/>
<el-checkbox
style="
background: rgba(91, 196, 159, 1); background: rgba(91, 196, 159, 1);
border: 1px solid rgba(91, 196, 159, 1); border: 1px solid rgba(91, 196, 159, 1);
width: 100%; width: 100%;
" " v-model="checked3" label="茶叶" />
v-model="checked3" <el-checkbox style="
label="茶叶"
/>
<el-checkbox
style="
background: rgba(225, 153, 75, 1); background: rgba(225, 153, 75, 1);
border: 1px solid rgba(225, 153, 75, 1); border: 1px solid rgba(225, 153, 75, 1);
width: 100%; width: 100%;
" " v-model="checked3" label="马铃薯" />
v-model="checked3" <el-checkbox style="
label="马铃薯"
/>
<el-checkbox
style="
background: rgba(166, 209, 82, 1); background: rgba(166, 209, 82, 1);
border: 1px solid rgba(166, 209, 82, 1); border: 1px solid rgba(166, 209, 82, 1);
width: 100%; width: 100%;
" " v-model="checked3" label="白菜和萝卜" />
v-model="checked3" <el-checkbox style=" -->
label="白菜和萝卜"
/>
<el-checkbox
style="
background: rgba(175, 110, 250, 0.8); background: rgba(175, 110, 250, 0.8);
border: 1px solid rgba(175, 110, 250, 0.8); border: 1px solid rgba(175, 110, 250, 0.8);
width: 100%; width: 100%;
" " v-model="checked3" label="其他" />
v-model="checked3"
label="其他"
/>
</el-checkbox-group> </el-checkbox-group>
</div> </div>
</el-collapse-item> </el-collapse-item>
@ -158,11 +114,21 @@
<span><img src="@/assets/images/face.png" alt="" /></span> <span><img src="@/assets/images/face.png" alt="" /></span>
<span><img src="@/assets/images/position.png" alt="" /></span> <span><img src="@/assets/images/position.png" alt="" /></span>
</div> </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> </div>
</template> </template>
<script setup> <script setup>
import { ref, onMounted, inject } from 'vue'; import { ref, onMounted, inject, watch } from 'vue';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import TimeLine from '@/components/TimeLine/TimeLine.vue'; import TimeLine from '@/components/TimeLine/TimeLine.vue';
import { useEcharts } from '@/hooks/useEcharts'; import { useEcharts } from '@/hooks/useEcharts';
@ -176,6 +142,7 @@ const ProgressBarDiv = ref(null);
const ASdivisionDiv = ref(null); const ASdivisionDiv = ref(null);
let Township = reactive({ arr: [], brr: [], crr: [] }); // let Township = reactive({ arr: [], brr: [], crr: [] }); //
const value = ref(''); const value = ref('');
const clickInfoMap = ref({ info: [] });
let dd = { let dd = {
小麦: [], 小麦: [],
玉米: [], 玉米: [],
@ -189,17 +156,30 @@ let dd = {
其他: [], 其他: [],
}; };
let dic = { let dic = {
小麦: 'rgba(102, 142, 214, 0.8)', 小麦: { color: 'rgba(255, 141, 26, 1)', disabled: false },
玉米: 'rgba(255, 225, 104, 0.8)', 玉米: { color: 'rgba(255, 255, 26, 1)', disabled: true },
大豆: 'rgba(156, 220, 130, 0.8)', 大豆: { color: 'rgba(255, 201, 148, 1)', disabled: false },
地瓜: 'rgba(156, 220, 130, 0.8)', 地瓜: { color: 'rgba(255, 84, 84, 1)', disabled: false },
花生: 'rgba(212, 236, 89, 0.8)', 花生: { color: 'rgba(255, 140, 255, 1)', disabled: false },
蓝莓: 'rgba(50, 211, 235, 0.8)', 蓝莓: { color: 'rgba(26, 255, 255, 1)', disabled: false },
茶叶: 'rgba(91, 196, 159, 0.8)', 茶叶: { color: 'rgba(26, 255, 140, 1)', disabled: false },
马铃薯: 'rgba(254, 182, 77, 0.8)', 马铃薯: { color: 'rgba(255, 171, 87, 1)', disabled: true },
白菜和萝卜: 'rgba(250, 129, 109, 0.8)', 白菜和萝卜: { color: 'rgba(140, 255, 26, 1)', disabled: true },
其他: 'rgba(250, 129, 109, 0.8)', 其他: { 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 = { var data = {
title: ['区域一', '区域二', '区域三', '区域四', '区域五', '区域六', '区域七', '区域八'], title: ['区域一', '区域二', '区域三', '区域四', '区域五', '区域六', '区域七', '区域八'],
corn: [333.3, null, 500, 500, 333.3, null, 333.3, 500], corn: [333.3, null, 500, 500, 333.3, null, 333.3, 500],
@ -231,6 +211,9 @@ onMounted(() => {
ProgressBar(); // ProgressBar(); //
ASdivision(); // ASdivision(); //
getArea(); // getArea(); //
checkList.value = Object.keys(dic)
// checkList.value = Object.keys(dic.filter(item => !item.disabled))
}); });
const mapOption = { const mapOption = {
url: url:
@ -342,7 +325,6 @@ function initMap() {
}); });
// //
let provider = providerPoint._imageryProvider; let provider = providerPoint._imageryProvider;
console.log(providerPoint);
if (provider && provider.ready && provider._layers && providerPoint.show === true) { if (provider && provider.ready && provider._layers && providerPoint.show === true) {
xy = provider.tilingScheme.positionToTileXY(cartographic, level, xy); xy = provider.tilingScheme.positionToTileXY(cartographic, level, xy);
let promise = provider.pickFeatures( let promise = provider.pickFeatures(
@ -363,7 +345,9 @@ function initMap() {
} }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK); }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
addwms(); // addwms();
//
layerClick()
// //
// Cesium.GeoJsonDataSource.load( // Cesium.GeoJsonDataSource.load(
@ -471,7 +455,7 @@ function initMap() {
// ); // );
} }
const checkList = ref(Object.keys(dic)); const checkList = ref([]);
function getLevel(height) { function getLevel(height) {
if (height > 48000000) { if (height > 48000000) {
@ -515,13 +499,47 @@ function getLevel(height) {
} }
} }
function change(e) { function change(e, a) {
console.log('e:', e); console.log('e:', e, a);
console.log('checkList:', checkList.value); // console.log('checkList:', checkList.value);
removeWms('crop'); // removeWms('crop');
addwms(); // 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)
})
// namewms
function removeWms(name) { function removeWms(name) {
// customName // customName
// let viewer = viewers.value // let viewer = viewers.value
@ -535,7 +553,6 @@ function removeWms(name) {
function addwms() { function addwms() {
// let viewer = viewers.value // let viewer = viewers.value
const name = "'" + checkList.value.join("','") + "'"; const name = "'" + checkList.value.join("','") + "'";
console.log('name:', name);
let map = new Cesium.WebMapServiceImageryProvider({ let map = new Cesium.WebMapServiceImageryProvider({
url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms?`, url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms?`,
layers: 'shuzisannong:fenlei', // layers: 'shuzisannong:fenlei', //
@ -549,11 +566,151 @@ function addwms() {
map.customName = 'crop'; // map.customName = 'crop'; //
viewer.imageryLayers.addImageryProvider(map); // 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) => { const getArea = (item, index) => {
return getarea({ time: '2023-04-19', subregion: index, parent: item }).then(response => { return getarea({ time: '2023-04-19', subregion: index, parent: item }).then(response => {
console.log(response.data);
return response.data; return response.data;
}); });
}; };
@ -618,7 +775,6 @@ const selectTab = () => {
let arr = [...Township.arr]; let arr = [...Township.arr];
arr.forEach(item => { arr.forEach(item => {
if (item.properties.XZDM == value.value) { if (item.properties.XZDM == value.value) {
console.log(item.properties);
getArea(item.properties.XZMC, '2'); getArea(item.properties.XZMC, '2');
viewer.camera.flyTo({ viewer.camera.flyTo({
destination: Cesium.Rectangle.fromDegrees( destination: Cesium.Rectangle.fromDegrees(
@ -632,13 +788,11 @@ const selectTab = () => {
} }
let arr = [...Township.brr]; let arr = [...Township.brr];
let brr = []; let brr = [];
// console.log(Township.brr);
arr.forEach(item => { arr.forEach(item => {
if (item.properties.XZDM == value.value) { if (item.properties.XZDM == value.value) {
brr.push(item.properties.XZQMC); brr.push(item.properties.XZQMC);
} }
}); });
// console.log(brr);
data.title = [...Object.values(brr)]; data.title = [...Object.values(brr)];
ASdivision(); ASdivision();
}); });
@ -1015,7 +1169,6 @@ function farmland() {
var tooltip = option.tooltip; var tooltip = option.tooltip;
// //
function formatFun(params) { function formatFun(params) {
// console.log('params====>', params)
let tipStr = params[0].axisValueLabel + '</br>'; // let tipStr = params[0].axisValueLabel + '</br>'; //
let totalNum = 0; // let totalNum = 0; //
// params labelvalue // params labelvalue
@ -1416,9 +1569,11 @@ function ASdivision() {
<style lang="scss" scoped> <style lang="scss" scoped>
$height: calc(100vh - 100px); $height: calc(100vh - 100px);
.center { .center {
width: 100%; width: 100%;
height: 100%; height: 100%;
.title { .title {
width: 100%; width: 100%;
height: 45px; height: 45px;
@ -1432,22 +1587,22 @@ $height: calc(100vh - 100px);
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
justify-content: space-between; justify-content: space-between;
span { span {
width: 80%; width: 80%;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
} }
p { p {
width: 79px; width: 79px;
height: 25px; height: 25px;
border-radius: 20px; border-radius: 20px;
font-size: 14px; font-size: 14px;
background: linear-gradient( background: linear-gradient(180deg,
180deg,
rgba(16, 111, 111, 1) 0%, rgba(16, 111, 111, 1) 0%,
rgba(47, 214, 214, 1) 100% rgba(47, 214, 214, 1) 100%);
);
border: 1.5px solid rgba(23, 194, 180, 1); border: 1.5px solid rgba(23, 194, 180, 1);
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -1464,11 +1619,13 @@ $height: calc(100vh - 100px);
width: 23%; width: 23%;
background: rgba(2, 31, 26, 0.85); background: rgba(2, 31, 26, 0.85);
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5); box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
.leftTop { .leftTop {
// height: 35%; // height: 35%;
max-width: calc(100% - 20px); max-width: calc(100% - 20px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.areaDiv { .areaDiv {
width: 100%; width: 100%;
height: 327px; height: 327px;
@ -1477,10 +1634,12 @@ $height: calc(100vh - 100px);
padding: 1px; padding: 1px;
} }
} }
.leftbottom { .leftbottom {
height: 35%; height: 35%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.typesofDiv { .typesofDiv {
width: 100%; width: 100%;
height: 267px; height: 267px;
@ -1500,6 +1659,7 @@ $height: calc(100vh - 100px);
align-items: center; align-items: center;
background: rgba(2, 31, 26, 0.85); background: rgba(2, 31, 26, 0.85);
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5); box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
.rightTop { .rightTop {
width: 100%; width: 100%;
height: 40%; height: 40%;
@ -1508,17 +1668,20 @@ $height: calc(100vh - 100px);
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
.farmlandDiv { .farmlandDiv {
width: 100%; width: 100%;
height: 340px; height: 340px;
opacity: 1; opacity: 1;
} }
.ProgressBar { .ProgressBar {
width: 100%; width: 100%;
height: 9px; height: 9px;
opacity: 1; opacity: 1;
} }
} }
.rightbottom { .rightbottom {
width: 100%; width: 100%;
height: 455px; height: 455px;
@ -1528,6 +1691,7 @@ $height: calc(100vh - 100px);
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
padding-top: 13px; padding-top: 13px;
.el-select { .el-select {
width: 80%; width: 80%;
font-size: 14px; font-size: 14px;
@ -1535,13 +1699,16 @@ $height: calc(100vh - 100px);
background: rgba(22, 94, 102, 1); background: rgba(22, 94, 102, 1);
border: 1px solid rgba(4, 153, 153, 1) !important; border: 1px solid rgba(4, 153, 153, 1) !important;
margin-top: 20px; margin-top: 20px;
:deep(.el-input__wrapper) { :deep(.el-input__wrapper) {
background-color: transparent; background-color: transparent;
} }
:deep(.el-input__inner) { :deep(.el-input__inner) {
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
} }
} }
.ASdivision { .ASdivision {
width: 415px; width: 415px;
height: 368px; height: 368px;
@ -1549,6 +1716,7 @@ $height: calc(100vh - 100px);
} }
} }
} }
:deep(.el-select-dropdown) { :deep(.el-select-dropdown) {
background: red !important; background: red !important;
} }
@ -1558,6 +1726,8 @@ $height: calc(100vh - 100px);
right: 25%; right: 25%;
bottom: 7%; bottom: 7%;
width: 129px; width: 129px;
border: 1px solid rgba(4, 153, 153, 1);
// height: 50px; // height: 50px;
:deep(.el-collapse-item__header) { :deep(.el-collapse-item__header) {
background: rgba(2, 31, 26, 0.6); background: rgba(2, 31, 26, 0.6);
@ -1566,15 +1736,19 @@ $height: calc(100vh - 100px);
padding: 0 30px; padding: 0 30px;
font-size: 14px; font-size: 14px;
} }
--el-collapse-content-bg-color { --el-collapse-content-bg-color {
background: rgba(2, 31, 26, 0.6); background: rgba(2, 31, 26, 0.6);
} }
:deep(.el-collapse-item__content) { :deep(.el-collapse-item__content) {
background: rgba(2, 31, 26, 0.6); background: rgba(2, 31, 26, 0.6);
padding: 0 10px; padding: 0 10px;
} }
--el-collapse-border-color: none; --el-collapse-border-color: none;
--el-collapse-content-bg-color: none; --el-collapse-content-bg-color: none;
// opacity: 1; // opacity: 1;
// border-radius: 4px; // border-radius: 4px;
// background: rgba(2, 31, 26, 0.6); // background: rgba(2, 31, 26, 0.6);
@ -1592,6 +1766,7 @@ $height: calc(100vh - 100px);
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
text-align: center; text-align: center;
} }
.mt-4 { .mt-4 {
.el-checkbox { .el-checkbox {
height: 30px; height: 30px;
@ -1606,6 +1781,7 @@ $height: calc(100vh - 100px);
text-align: left; text-align: left;
} }
} }
:deep(.el-checkbox__label) { :deep(.el-checkbox__label) {
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
} }
@ -1623,6 +1799,7 @@ $height: calc(100vh - 100px);
background: rgba(2, 31, 26, 0.6); background: rgba(2, 31, 26, 0.6);
border: 1px solid rgba(4, 153, 153, 1); border: 1px solid rgba(4, 153, 153, 1);
} }
.tool { .tool {
position: absolute; position: absolute;
right: 30%; right: 30%;
@ -1636,4 +1813,52 @@ $height: calc(100vh - 100px);
align-items: flex-start; align-items: flex-start;
display: none; 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> </style>