1471 lines
49 KiB
Vue
1471 lines
49 KiB
Vue
<template>
|
||
<div class="center">
|
||
<div style="width: 100%; height: 100%" id="cesiumContainer"></div>
|
||
<div class="leftWra">
|
||
<div class="leftTop">
|
||
<div class="title"><span>作物分类面积统计</span></div>
|
||
<div ref="areaDiv" class="areaDiv"></div>
|
||
</div>
|
||
<div class="leftbottom">
|
||
<div class="title"><span>作物类型统计</span></div>
|
||
<div ref="typesofDiv" class="typesofDiv"></div>
|
||
</div>
|
||
</div>
|
||
<div class="rightWra">
|
||
<div class="rightTop">
|
||
<div class="title">
|
||
<span>作物类型统计-高标准农田</span>
|
||
<p>
|
||
下载
|
||
<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>
|
||
下载
|
||
<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-select>
|
||
<div ref="ASdivisionDiv" class="ASdivision"></div>
|
||
</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
|
||
style="
|
||
background: rgba(251, 171, 60, 1);
|
||
border: 1px solid rgba(251, 171, 60, 1);
|
||
width: 100%;
|
||
"
|
||
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="
|
||
background: rgba(244, 218, 136, 1);
|
||
border: 1px solid rgba(244, 218, 136, 1);
|
||
width: 100%;
|
||
"
|
||
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="
|
||
background: rgba(242, 177, 167, 1);
|
||
border: 1px solid rgba(242, 177, 167, 1);
|
||
width: 100%;
|
||
"
|
||
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="
|
||
background: rgba(91, 196, 159, 1);
|
||
border: 1px solid rgba(91, 196, 159, 1);
|
||
width: 100%;
|
||
"
|
||
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="
|
||
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="其他"
|
||
/>
|
||
</el-checkbox-group>
|
||
</div>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
<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>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, inject } from 'vue';
|
||
import * as echarts from 'echarts';
|
||
import TimeLine from '@/components/TimeLine/TimeLine.vue';
|
||
import { useEcharts } from '@/hooks/useEcharts';
|
||
import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js';
|
||
|
||
let viewer = ref(null);
|
||
const areaDiv = ref(null);
|
||
const typesofDiv = ref(null);
|
||
const farmlandDiv = ref(null);
|
||
const ProgressBarDiv = ref(null);
|
||
const ASdivisionDiv = ref(null);
|
||
let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
|
||
const value = ref('');
|
||
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)',
|
||
};
|
||
var data = {
|
||
title: ['区域一', '区域二', '区域三', '区域四', '区域五', '区域六', '区域七', '区域八'],
|
||
corn: [333.3, null, 500, 500, 333.3, null, 333.3, 500],
|
||
soybean: [333.3, null, null, null, 333.3, null, 333.3, null],
|
||
peanut: [333.3, 500, 500, null, 333.3, 500, 333.3, null],
|
||
wheat: [null, 500, null, 500, null, 500, null, null],
|
||
Blueberries: [null, null, null, null, null, null, null, 500],
|
||
};
|
||
const options = [
|
||
{
|
||
value: 'Option1',
|
||
label: 'Option1',
|
||
},
|
||
{
|
||
value: 'Option2',
|
||
label: 'Option2',
|
||
},
|
||
];
|
||
// 组件挂载完成后执行
|
||
onMounted(() => {
|
||
getaArea(); //面积
|
||
getTownships();
|
||
getvillages(); //村
|
||
initMap(); //地图
|
||
areachar(); //图表
|
||
typesof(); //图表
|
||
farmland(); //图表
|
||
ProgressBar(); //图表
|
||
ASdivision(); //图表
|
||
getArea(); //请求
|
||
});
|
||
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,
|
||
// url: "http://service.sdmap.gov.cn/hisimage/weipian202209?tk=9cc3e9deb3cf643b6f133717c333d16d",
|
||
// layer: "c",
|
||
// style: ",c",
|
||
// format: "image/png",
|
||
// tileMatrixSetID: "EPSG:4490",
|
||
// rectangle: Cesium.Rectangle.fromDegrees(114.8, 34.35, 122.82, 38.43),
|
||
// // 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
|
||
}),
|
||
});
|
||
//加载地图服务
|
||
let map = new Cesium.WebMapServiceImageryProvider({
|
||
url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms`,
|
||
layers: 'shuzisannong:huangdaoqu_town', //图层名
|
||
parameters: {
|
||
service: 'WMS',
|
||
format: 'image/png',
|
||
transparent: true, //是否透明
|
||
},
|
||
});
|
||
viewer.imageryLayers.addImageryProvider(map);
|
||
|
||
viewer.camera.flyTo({
|
||
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
|
||
duration: 2,
|
||
});
|
||
|
||
addwms();
|
||
|
||
//加载黄岛区村级地图服务
|
||
// Cesium.GeoJsonDataSource.load(
|
||
// 'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_village&maxFeatures=1180&outputFormat=application%2Fjson',
|
||
// {
|
||
// stroke: Cesium.Color.fromCssColorString('red'), //轮廓颜色
|
||
// fill: Cesium.Color.fromCssColorString('rgba(0,0,0,0.1)'), //内部颜色
|
||
// strokeWidth: 3, //轮廓宽度 clampToGround: true,//是否贴地
|
||
// }
|
||
// ).then(function (dataSource) {
|
||
// // dataSource.name = 'geojsonDataSource'//自定义属性，方便以后操作
|
||
// viewer.dataSources.add(dataSource); //添加
|
||
// viewer.flyTo(dataSource, {
|
||
// duration: 5,
|
||
// offset: {
|
||
// heading: 0.0,
|
||
// pitch: -90, //保持垂直视角
|
||
// },
|
||
// }); //移动到该位置
|
||
// });
|
||
//加载黄岛区镇级地图服务
|
||
// Cesium.GeoJsonDataSource.load(
|
||
// 'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
|
||
// {
|
||
// stroke: Cesium.Color.fromCssColorString('#fff'), //轮廓颜色
|
||
// fill: Cesium.Color.fromCssColorString('rgba(0,0,0,0.1)'), //内部颜色
|
||
// strokeWidth: 3, //轮廓宽度 clampToGround: true,//是否贴地
|
||
// }
|
||
// ).then(function (dataSource) {
|
||
// // dataSource.name = 'geojsonDataSource'//自定义属性，方便以后操作
|
||
// viewer.dataSources.add(dataSource); //添加
|
||
// viewer.flyTo(dataSource, {
|
||
// duration: 5,
|
||
// offset: {
|
||
// heading: 0.0,
|
||
// pitch: -90, //保持垂直视角
|
||
// },
|
||
// }); //移动到该位置
|
||
// });
|
||
|
||
// axios({
|
||
// method: 'get',
|
||
// url: 'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
|
||
// })
|
||
// .then(res => {
|
||
// res.data.features.forEach(item => {
|
||
// addBoundaryHandle(item.geometry.coordinates, '');
|
||
// });
|
||
// })
|
||
// .catch(error => {});
|
||
|
||
//作物分类面积提取地图服务
|
||
// let map2 = new Cesium.WebMapServiceImageryProvider({
|
||
// url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms`,
|
||
// layers: 'shuzisannong:fenlei', //图层名
|
||
// parameters: {
|
||
// service: 'WMS',
|
||
// format: 'image/png',
|
||
// CQL_FILTER: `crop=${city_code}`,
|
||
// transparent: true, //是否透明
|
||
// },
|
||
// });
|
||
// viewer.imageryLayers.addImageryProvider(map2);
|
||
|
||
// Cesium.GeoJsonDataSource.load(
|
||
// 'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afenlei&maxFeatures=50&outputFormat=application%2Fjson',
|
||
// {
|
||
// stroke: Cesium.Color.fromCssColorString('rgba(165,214,63,1)'), //轮廓颜色
|
||
// fill: Cesium.Color.fromCssColorString('rgba(0,0,0,0.1)'), //内部颜色
|
||
// strokeWidth: 3, //轮廓宽度 clampToGround: true,//是否贴地
|
||
// }
|
||
// ).then(function (dataSource) {
|
||
// // dataSource.name = 'geojsonDataSource'//自定义属性，方便以后操作
|
||
// viewer.dataSources.add(dataSource); //添加
|
||
// viewer.flyTo(dataSource, {
|
||
// duration: 5,
|
||
// offset: {
|
||
// heading: 0.0,
|
||
// pitch: -90, //保持垂直视角
|
||
// },
|
||
// }); //移动到该位置
|
||
// });
|
||
//全球注记
|
||
// let zhujiLayer = new Cesium.WebMapTileServiceImageryProvider({
|
||
// url: 'http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=5956e6519f2bb0ae8e57bc834298c9f1',
|
||
// layer: 'tdtImgBasicLayer',
|
||
// style: 'default',
|
||
// format: 'image/jpeg',
|
||
// tileMatrixSetID: 'GoogleMapsCompatible',
|
||
// show: false,
|
||
// });
|
||
// viewer.imageryLayers.addImageryProvider(zhujiLayer);
|
||
|
||
// viewer.camera.flyTo(
|
||
// {
|
||
// destination: new Cesium.Cartesian3.fromDegrees(104.9, 36.35, 8000000),
|
||
// duration: 0,
|
||
// },
|
||
// {
|
||
// offset: {
|
||
// heading: Cesium.Math.toRadians(0.0),
|
||
// pitch: Cesium.Math.toRadians(-25),
|
||
// },
|
||
// }
|
||
// );
|
||
}
|
||
|
||
const checkList = ref(Object.keys(dic));
|
||
|
||
function change(e) {
|
||
console.log('e:', e);
|
||
console.log('checkList:', checkList.value);
|
||
removeWms('crop');
|
||
addwms();
|
||
}
|
||
|
||
function removeWms(name) {
|
||
// 倒叙遍历，customName是自定义的属性
|
||
// let viewer = viewers.value
|
||
const layers = viewer.imageryLayers._layers;
|
||
for (let f = layers.length - 1; f >= 0; f--) {
|
||
if (layers[f]._imageryProvider.customName === name) {
|
||
viewer.imageryLayers.remove(layers[f]);
|
||
}
|
||
}
|
||
}
|
||
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', //图层名
|
||
parameters: {
|
||
service: 'WMS',
|
||
format: 'image/png',
|
||
transparent: true, //是否透明
|
||
CQL_FILTER: `crop in (${name})`,
|
||
},
|
||
});
|
||
map.customName = 'crop'; //自己定义各种属性
|
||
viewer.imageryLayers.addImageryProvider(map); //添加图层
|
||
}
|
||
|
||
//接口
|
||
const getArea = () => {
|
||
getarea({ time: '2023-04-19', subregion: '0', parent: '黄岛区' }).then(response => {
|
||
console.log(response);
|
||
});
|
||
};
|
||
|
||
//镇
|
||
const getTownships = () => {
|
||
getTownship().then(res => {
|
||
Township.arr = res.features;
|
||
Township.arr.unshift({
|
||
bbox: [119.5091, 35.5671, 120.3285, 36.1455],
|
||
properties: {
|
||
XZDM: '370211',
|
||
XZMC: '全部',
|
||
},
|
||
});
|
||
let arr = [...res.features];
|
||
let brr = [];
|
||
arr.splice(0, 1);
|
||
arr.forEach(item => {
|
||
brr.push(item.properties.XZMC);
|
||
});
|
||
data.title = [...Object.values(brr)];
|
||
ASdivision();
|
||
});
|
||
};
|
||
//村
|
||
const getvillages = () => {
|
||
getvillage().then(res => {
|
||
Township.brr = res.features;
|
||
});
|
||
};
|
||
//面积
|
||
const getaArea = () => {
|
||
let arr = [];
|
||
getareas().then(res => {
|
||
Township.crr = res.features;
|
||
data.title.forEach((item, index) => {
|
||
let town = res.features.map(i => {
|
||
if (item === i.properties.town) {
|
||
return i.properties;
|
||
}
|
||
});
|
||
Object.keys(dd).forEach(it => {
|
||
const index = town.findIndex(a => a && a.crop === it);
|
||
if (index > -1) {
|
||
dd[it].push(town[index].Shape_Area);
|
||
} else {
|
||
dd[it].push(null);
|
||
}
|
||
});
|
||
});
|
||
console.log(dd);
|
||
ASdivision();
|
||
});
|
||
};
|
||
|
||
const selectTab = () => {
|
||
console.log(value.value);
|
||
if (value.value == '370211') {
|
||
getTownships();
|
||
}
|
||
let arr = [...Township.arr];
|
||
arr.forEach(item => {
|
||
if (item.properties.XZDM == value.value) {
|
||
viewer.camera.flyTo({
|
||
destination: Cesium.Rectangle.fromDegrees(
|
||
item.bbox[0],
|
||
item.bbox[1],
|
||
item.bbox[2],
|
||
item.bbox[3]
|
||
),
|
||
duration: 2,
|
||
});
|
||
}
|
||
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();
|
||
});
|
||
const layers = viewer.imageryLayers._layers;
|
||
for (let f = layers.length - 1; f >= 0; f--) {
|
||
if (layers[f]._imageryProvider.aaa === 'aaa') {
|
||
viewer.imageryLayers.remove(layers[f]);
|
||
}
|
||
}
|
||
let map2 = new Cesium.WebMapServiceImageryProvider({
|
||
url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms`,
|
||
layers: 'shuzisannong:huangdaoqu_village', //图层名
|
||
parameters: {
|
||
service: 'WMS',
|
||
format: 'image/png',
|
||
transparent: true, //是否透明
|
||
CQL_FILTER: `XZDM=${value.value}`,
|
||
},
|
||
});
|
||
map2.aaa = 'aaa';
|
||
viewer.imageryLayers.addImageryProvider(map2);
|
||
};
|
||
|
||
//图表
|
||
function areachar() {
|
||
const areaDivIntance = echarts.init(areaDiv.value);
|
||
|
||
let option = {
|
||
// backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
||
textStyle: {
|
||
color: '#c0c3cd',
|
||
fontSize: 14,
|
||
},
|
||
toolbox: {
|
||
show: false,
|
||
feature: {
|
||
saveAsImage: {
|
||
backgroundColor: '#031245',
|
||
},
|
||
restore: {},
|
||
},
|
||
iconStyle: {
|
||
borderColor: '#c0c3cd',
|
||
},
|
||
},
|
||
legend: {
|
||
top: 10,
|
||
itemWidth: 8,
|
||
itemHeight: 8,
|
||
icon: 'circle',
|
||
left: 'center',
|
||
padding: 0,
|
||
textStyle: {
|
||
color: '#c0c3cd',
|
||
fontSize: 14,
|
||
padding: [2, 0, 0, 0],
|
||
},
|
||
},
|
||
color: ['#00D7E9', 'rgba(0, 215, 233, 0.9)'],
|
||
grid: {
|
||
containLabel: true,
|
||
left: 20,
|
||
right: 20,
|
||
bottom: 10,
|
||
top: 40,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: ['小麦', '玉米', '大豆', '花生', '蓝莓'],
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#C0C4CC',
|
||
width: 1,
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
margin: 10,
|
||
color: 'rgba(255, 255, 255, 0.7)',
|
||
textStyle: {
|
||
fontSize: 14,
|
||
},
|
||
},
|
||
},
|
||
],
|
||
yAxis: {
|
||
nameTextStyle: {
|
||
color: '#c0c3cd',
|
||
padding: [0, 0, 0, 0],
|
||
fontSize: 14,
|
||
},
|
||
axisLabel: {
|
||
color: '#c0c3cd',
|
||
fontSize: 14,
|
||
},
|
||
axisTick: {
|
||
lineStyle: {
|
||
color: '#668092',
|
||
width: 1,
|
||
},
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.7)',
|
||
type: 'dashed',
|
||
},
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.7)',
|
||
width: 1,
|
||
// "type": "dashed"
|
||
},
|
||
show: false,
|
||
},
|
||
name: '面积(亩)',
|
||
},
|
||
series: [
|
||
{
|
||
data: [200, 85, 112, 275, 305],
|
||
type: 'bar',
|
||
barMaxWidth: 'auto',
|
||
barWidth: 30,
|
||
itemStyle: {
|
||
color: {
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
type: 'linear',
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: ' rgba(0, 208, 255, 0.1)',
|
||
},
|
||
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(0, 208, 255, 0.9) ',
|
||
},
|
||
],
|
||
},
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
distance: 10,
|
||
color: '#fff',
|
||
},
|
||
},
|
||
{
|
||
data: [1, 1, 1, 1, 1],
|
||
type: 'pictorialBar',
|
||
barMaxWidth: '20',
|
||
symbol: 'diamond',
|
||
symbolOffset: [0, '50%'],
|
||
symbolSize: [30, 15],
|
||
},
|
||
{
|
||
data: [200, 85, 112, 275, 305],
|
||
type: 'pictorialBar',
|
||
barMaxWidth: '20',
|
||
|
||
symbolPosition: 'end',
|
||
symbol: 'diamond',
|
||
symbolOffset: [0, '-50%'],
|
||
symbolSize: [30, 12],
|
||
zlevel: 2,
|
||
},
|
||
],
|
||
tooltip: {
|
||
show: true,
|
||
formatter: '面积:{c0}',
|
||
},
|
||
};
|
||
|
||
// option && areaDivIntance.setOption(option);
|
||
useEcharts(areaDivIntance, option);
|
||
}
|
||
|
||
function typesof() {
|
||
const typesofDivIntance = echarts.init(typesofDiv.value);
|
||
var option = {
|
||
// tooltip: {
|
||
// trigger: 'item',
|
||
// formatter: '{a} <br/>{b}: {c} ({d}%)',
|
||
// },
|
||
color: [
|
||
'rgba(212,236,89,0.8)',
|
||
'rgba(102,142,214,0.8)',
|
||
'rgba(156,220,130,0.8)',
|
||
'rgba(255,225,104,0.8)',
|
||
], // 指定饼图颜色
|
||
legend: {
|
||
orient: 'vertical', //图例方向分水平和垂直
|
||
icon: 'rect', //图例样式
|
||
x: 'center', //图例位置
|
||
bottom: 'bottom',
|
||
data: ['花生', '小麦', '大豆', '玉米'],
|
||
textStyle: {
|
||
color: ' rgba(255,255,255,0.7)',
|
||
fontSize: '14',
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: '占比',
|
||
type: 'pie',
|
||
radius: ['50%', '70%'],
|
||
avoidLabelOverlap: true,
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: 'left',
|
||
textStyle: {
|
||
color: 'rgba(41,255,219,1)',
|
||
},
|
||
},
|
||
emphasis: {
|
||
show: true,
|
||
textStyle: {
|
||
fontSize: '30',
|
||
fontWeight: 'bold',
|
||
},
|
||
},
|
||
},
|
||
labelLine: {
|
||
show: true,
|
||
normal: {
|
||
show: true,
|
||
},
|
||
},
|
||
data: [
|
||
{ value: 25, name: '花生' },
|
||
{ value: 25, name: '小麦' },
|
||
{ value: 25, name: '大豆' },
|
||
{ value: 25, name: '玉米' },
|
||
],
|
||
},
|
||
],
|
||
};
|
||
|
||
// option && typesofDivIntance.setOption(option);
|
||
useEcharts(typesofDivIntance, option);
|
||
}
|
||
|
||
function farmland() {
|
||
const farmlandDivIntance = echarts.init(farmlandDiv.value);
|
||
let option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
// 坐标轴指示器，坐标轴触发有效
|
||
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
|
||
},
|
||
},
|
||
legend: {
|
||
top: 10,
|
||
left: 10,
|
||
icon: 'rect',
|
||
itemWidth: 4, // 图例图表宽度
|
||
itemHeight: 12, // 图例图标高度
|
||
data: ['餐费', '打车费', '零食', '日用品'],
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '13%',
|
||
bottom: '8%',
|
||
top: '25%',
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
// name: '日期',
|
||
axisLabel: {
|
||
fontSize: 14,
|
||
interval: 0,
|
||
// rotate: 40,//旋转
|
||
margin: 10,
|
||
color: 'rgba(255, 255, 255, 0.7)',
|
||
textStyle: {
|
||
fontSize: 14,
|
||
},
|
||
formatter: function (params, index) {
|
||
return params;
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false, // 不显示x轴刻度
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
// color: '#cbeaf6', // x坐标轴线颜色
|
||
},
|
||
},
|
||
data: ['区域一', '区域二', '区域三', '区域四', '区域五'],
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
// name: '花费',
|
||
axisLabel: {
|
||
// color: '#cbeaf6', // 坐标轴label文字颜色
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(255, 255, 255, 0.7)',
|
||
// color: '#cbeaf6', // y坐标轴线颜色
|
||
},
|
||
},
|
||
splitLine: {
|
||
// 网格线
|
||
lineStyle: {
|
||
type: 'dashed', // 设置网格线类型 dotted：虚线 solid:实线
|
||
color: '#395367',
|
||
},
|
||
show: true, // 隐藏或显示
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: '小麦',
|
||
type: 'bar',
|
||
barWidth: 13,
|
||
stack: '分类',
|
||
itemStyle: {
|
||
color: 'rgba(255, 141, 26, 1)',
|
||
},
|
||
data: [402, 35, 40, 30, 35, 50],
|
||
},
|
||
{
|
||
name: '玉米',
|
||
type: 'bar',
|
||
barWidth: 13,
|
||
stack: '分类',
|
||
itemStyle: {
|
||
color: 'rgba(255, 255, 26, 1)',
|
||
},
|
||
data: [12, 13, 15, 12, 11, 12],
|
||
},
|
||
{
|
||
name: '大豆',
|
||
type: 'bar',
|
||
barWidth: 13,
|
||
stack: '分类',
|
||
itemStyle: {
|
||
color: 'rgba(255, 201, 148, 1)',
|
||
},
|
||
data: [25, 23, 19, 20, 22, 30],
|
||
},
|
||
{
|
||
name: '地瓜',
|
||
type: 'bar',
|
||
barWidth: 13,
|
||
stack: '分类',
|
||
itemStyle: {
|
||
color: 'rgba(255, 84, 84, 1)',
|
||
},
|
||
data: [12, 13, 12, 50, 10, 16],
|
||
},
|
||
],
|
||
};
|
||
|
||
var series = option.series;
|
||
var tooltip = option.tooltip;
|
||
// 提示框自定义内容包括总合及文字
|
||
function formatFun(params) {
|
||
// console.log('params====>', params)
|
||
let tipStr = params[0].axisValueLabel + '</br>'; // 初始化提示框文字默认当前轴名称并换行
|
||
let totalNum = 0; // 用于存储当前列总数
|
||
// params为当前柱状图数组数量 遍历求和并添加类目label：value
|
||
for (let i = 0; i < params.length; i++) {
|
||
if (params[i].seriesName !== '合计') {
|
||
const dotHtml = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params[i].color}"></span>`;
|
||
|
||
tipStr += dotHtml + params[i].seriesName + '</br>';
|
||
}
|
||
}
|
||
return tipStr;
|
||
}
|
||
tooltip.formatter = formatFun;
|
||
// 加载页面时候替换最后一个series的formatter
|
||
option && farmlandDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } });
|
||
useEcharts(farmlandDivIntance, option);
|
||
}
|
||
function ProgressBar() {
|
||
const ProgressBarDivIntance = echarts.init(ProgressBarDiv.value);
|
||
var option = {
|
||
// backgroundColor: '#031d33',
|
||
grid: {
|
||
top: 0,
|
||
bottom: '10%',
|
||
left: '10%',
|
||
right: '10%',
|
||
},
|
||
xAxis: {
|
||
show: false,
|
||
type: 'value',
|
||
boundaryGap: [0, 0],
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: 'category',
|
||
data: [''],
|
||
axisLine: { show: false },
|
||
axisTick: [
|
||
{
|
||
show: false,
|
||
},
|
||
],
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: '金额',
|
||
type: 'bar',
|
||
zlevel: 1,
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderRadius: 30,
|
||
color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(7,99,84,0.95) ',
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(71,179,161,0.95)',
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
barWidth: 20,
|
||
data: [10],
|
||
},
|
||
{
|
||
name: '背景',
|
||
type: 'bar',
|
||
barWidth: 20,
|
||
barGap: '-100%',
|
||
data: [20],
|
||
itemStyle: {
|
||
normal: {
|
||
color: 'rgba(255, 255, 255, 0.2)',
|
||
|
||
barBorderRadius: 50,
|
||
},
|
||
},
|
||
},
|
||
],
|
||
};
|
||
option && ProgressBarDivIntance.setOption(option);
|
||
useEcharts(ProgressBarDivIntance, option);
|
||
}
|
||
|
||
function ASdivision() {
|
||
const ASdivisionDivIntance = echarts.init(ASdivisionDiv.value);
|
||
var option = {
|
||
// 设置图表的位置
|
||
grid: {
|
||
bottom: '8%',
|
||
left: '10%',
|
||
right: '6%',
|
||
top: '6%',
|
||
containLabel: true,
|
||
},
|
||
dataZoom: [
|
||
{
|
||
type: 'slider',
|
||
show: true,
|
||
zoomLock: true, //禁止拉伸
|
||
width: 8,
|
||
yAxisIndex: [0],
|
||
bottom: 30,
|
||
top: 20,
|
||
right: 10,
|
||
startValue: 0,
|
||
endValue: 4,
|
||
handleIcon:
|
||
'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
|
||
handleSize: '100%',
|
||
handleStyle: {
|
||
color: '#DBDBDB',
|
||
height: '100%',
|
||
},
|
||
backgroundColor: 'transparent',
|
||
fillerColor: '#DBDBDB',
|
||
textStyle: {
|
||
color: 'transparent',
|
||
},
|
||
dataBackground: {
|
||
lineStyle: {
|
||
color: 'transparent',
|
||
},
|
||
areaStyle: {
|
||
color: 'transparent',
|
||
},
|
||
},
|
||
borderColor: 'transparent',
|
||
},
|
||
{
|
||
type: 'inside',
|
||
id: 'insideY',
|
||
yAxisIndex: 0,
|
||
start: 0,
|
||
end: 50,
|
||
zoomOnMouseWheel: false,
|
||
moveOnMouseMove: true,
|
||
moveOnMouseWheel: true,
|
||
},
|
||
],
|
||
// X轴
|
||
xAxis: {
|
||
type: 'value', // 坐标轴类型, 'value' 数值轴，适用于连续数据
|
||
// 坐标轴刻度
|
||
axisTick: {
|
||
show: false, // 是否显示坐标轴刻度 默认显示
|
||
},
|
||
// 坐标轴轴线
|
||
axisLine: {
|
||
// 是否显示坐标轴轴线 默认显示
|
||
show: false, // 是否显示坐标轴轴线 默认显示
|
||
},
|
||
// 坐标轴在图表区域中的分隔线
|
||
splitLine: {
|
||
show: false, // 是否显示分隔线。默认数值轴显示
|
||
},
|
||
// 坐标轴刻度标签
|
||
axisLabel: {
|
||
show: false, // 是否显示刻度标签 默认显示
|
||
},
|
||
},
|
||
// Y轴
|
||
yAxis: [
|
||
// 左侧Y轴
|
||
{
|
||
// 坐标轴类型, 'category' 类目轴，适用于离散的类目数据
|
||
// 为该类型时必须通过 data 设置类目数据
|
||
type: 'category',
|
||
// 坐标轴刻度
|
||
axisTick: {
|
||
show: false, // 是否显示坐标轴刻度 默认显示
|
||
},
|
||
// 坐标轴轴线
|
||
axisLine: {
|
||
// 是否显示坐标轴轴线 默认显示
|
||
show: false, // 是否显示坐标轴轴线 默认显示
|
||
lineStyle: {
|
||
// 坐标轴线线的颜色
|
||
color: '#cdd3ee',
|
||
},
|
||
},
|
||
// 坐标轴在图表区域中的分隔线
|
||
splitLine: {
|
||
show: false, // 是否显示分隔线。默认数值轴显示
|
||
},
|
||
// 坐标轴刻度标签
|
||
axisLabel: {
|
||
show: true, // 是否显示刻度标签 默认显示
|
||
fontSize: 12, // 文字的字体大小
|
||
color: 'rgba(255, 255, 255, 1)', // 刻度标签文字的颜色
|
||
// 使用字符串模板，模板变量为刻度默认标签 {value}
|
||
formatter: '{value}',
|
||
},
|
||
// 类目数据，在类目轴（type: 'category'）中有效
|
||
data: data.title,
|
||
inverse: true,
|
||
},
|
||
],
|
||
// 系列列表
|
||
series: [
|
||
{
|
||
type: 'bar', // 系列类型
|
||
name: '玉米', // 系列名称, 用于tooltip的显示, legend 的图例筛选
|
||
// 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
|
||
stack: '总量',
|
||
barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
|
||
// 图形上的文本标签
|
||
label: {
|
||
show: true,
|
||
position: '玉米',
|
||
textStyle: {
|
||
fontSize: 12,
|
||
fontWeight: 'bolder',
|
||
color: 'rgba(255,255,255,1)',
|
||
},
|
||
},
|
||
// 图形样式
|
||
itemStyle: {
|
||
color: '#fdad3c',
|
||
},
|
||
data: dd.玉米, // 系列中的数据内容数组
|
||
},
|
||
{
|
||
type: 'bar', // 系列类型
|
||
name: '大豆', // 系列名称, 用于tooltip的显示, legend 的图例筛选
|
||
// 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
|
||
stack: '总量',
|
||
barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
|
||
// 图形上的文本标签
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
formatter: '大豆',
|
||
textStyle: {
|
||
fontSize: 12,
|
||
fontWeight: 'bolder',
|
||
color: 'rgba(255,255,255,1)',
|
||
},
|
||
},
|
||
// 图形样式
|
||
itemStyle: {
|
||
color: 'rgba(156, 220, 130, 0.8)',
|
||
},
|
||
data: dd.大豆, // 系列中的数据内容数组
|
||
},
|
||
{
|
||
type: 'bar', // 系列类型
|
||
name: '花生', // 系列名称, 用于tooltip的显示, legend 的图例筛选
|
||
// 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
|
||
stack: '总量',
|
||
barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
|
||
// 图形上的文本标签
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
formatter: '花生',
|
||
textStyle: {
|
||
fontSize: 12,
|
||
fontWeight: 'bolder',
|
||
color: 'rgba(255,255,255,1)',
|
||
},
|
||
},
|
||
// 图形样式
|
||
itemStyle: {
|
||
color: 'rgba(212, 236, 89, 0.8)',
|
||
},
|
||
data: dd.花生, // 系列中的数据内容数组
|
||
},
|
||
{
|
||
type: 'bar', // 系列类型
|
||
name: '小麦', // 系列名称, 用于tooltip的显示, legend 的图例筛选
|
||
// 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
|
||
stack: '总量',
|
||
barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
|
||
// 图形上的文本标签
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
formatter: '小麦',
|
||
textStyle: {
|
||
fontSize: 12,
|
||
fontWeight: 'bolder',
|
||
color: 'rgba(255,255,255,1)',
|
||
},
|
||
},
|
||
// 图形样式
|
||
itemStyle: {
|
||
color: 'rgba(102, 142, 214, 0.8)',
|
||
},
|
||
data: dd.小麦, // 系列中的数据内容数组
|
||
},
|
||
{
|
||
type: 'bar', // 系列类型
|
||
name: '蓝莓', // 系列名称, 用于tooltip的显示, legend 的图例筛选
|
||
// 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
|
||
stack: '总量',
|
||
barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
|
||
// 图形上的文本标签
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
formatter: '蓝莓',
|
||
textStyle: {
|
||
fontSize: 12,
|
||
fontWeight: 'bolder',
|
||
color: 'rgba(255,255,255,1)',
|
||
},
|
||
},
|
||
// 图形样式
|
||
itemStyle: {
|
||
color: 'rgba(50, 211, 235, 0.8)',
|
||
},
|
||
data: dd.蓝莓, // 系列中的数据内容数组
|
||
},
|
||
],
|
||
};
|
||
// option && ASdivisionDivIntance.setOption(option, true);
|
||
useEcharts(ASdivisionDivIntance, option);
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
$height: calc(100vh - 100px);
|
||
.center {
|
||
width: 100%;
|
||
height: 100%;
|
||
.title {
|
||
width: 100%;
|
||
height: 45px;
|
||
background: url('@/assets/images/title.png');
|
||
color: #fff;
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
line-height: 45px;
|
||
padding-left: 46px;
|
||
display: flex;
|
||
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%
|
||
);
|
||
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);
|
||
.leftTop {
|
||
// height: 35%;
|
||
max-width: calc(100% - 20px);
|
||
display: flex;
|
||
flex-direction: column;
|
||
.areaDiv {
|
||
width: 100%;
|
||
height: 327px;
|
||
opacity: 1;
|
||
display: flex;
|
||
padding: 1px;
|
||
}
|
||
}
|
||
.leftbottom {
|
||
height: 35%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.typesofDiv {
|
||
width: 100%;
|
||
height: 267px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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);
|
||
.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;
|
||
}
|
||
.ProgressBar {
|
||
width: 100%;
|
||
height: 9px;
|
||
opacity: 1;
|
||
}
|
||
}
|
||
.rightbottom {
|
||
width: 100%;
|
||
height: 455px;
|
||
opacity: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
padding-top: 13px;
|
||
.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: 415px;
|
||
height: 368px;
|
||
opacity: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.legend {
|
||
position: absolute;
|
||
right: 25%;
|
||
bottom: 7%;
|
||
width: 129px;
|
||
// 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;
|
||
}
|
||
--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);
|
||
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;
|
||
}
|
||
</style>
|