up
This commit is contained in:
@ -3,22 +3,66 @@
|
||||
<div style="width: 100%; height: 100%" id="cesiumContainer"></div>
|
||||
<div class="leftWra">
|
||||
<div class="leftTop">
|
||||
<div class="title">1111</div>
|
||||
<div class="title">
|
||||
种植面积时间统计
|
||||
<p>
|
||||
下载
|
||||
<img
|
||||
src="@/assets/icons/svg/downloads.svg"
|
||||
style="width: 14px; height: 14px; cursor: pointer"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div ref="areaDiv" class="areaDiv"></div>
|
||||
<div ref="leftProgressBarDiv" class="ProgressBar"></div>
|
||||
</div>
|
||||
<div class="leftbottom">
|
||||
<div class="title">1111</div>
|
||||
<div class="title">
|
||||
种植面积统计
|
||||
<p>
|
||||
下载
|
||||
<img
|
||||
src="@/assets/icons/svg/downloads.svg"
|
||||
style="width: 14px; height: 14px; cursor: pointer"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div ref="typesofDiv" class="typesofDiv"></div>
|
||||
<div class="tableDiv">
|
||||
<el-table max-height="200" class="ones" :data="tableData" style="width: 415px">
|
||||
<el-table-column prop="date" label="类型" />
|
||||
<el-table-column prop="name" label="面积" />
|
||||
<el-table-column prop="address" label="占比" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightWra">
|
||||
<div class="rightTop">
|
||||
<div class="title">1111</div>
|
||||
<div class="title">
|
||||
作物类型统计-高标准农田
|
||||
<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">1111</div>
|
||||
<div class="title">
|
||||
作物类型统计-行政区划
|
||||
<p>
|
||||
下载
|
||||
<img
|
||||
src="@/assets/icons/svg/downloads.svg"
|
||||
style="width: 14px; height: 14px; cursor: pointer"
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<el-select v-model="value" clearable placeholder="Select">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
@ -108,6 +152,14 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom_center"></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>
|
||||
|
||||
@ -122,13 +174,16 @@ const farmlandDiv = ref(null);
|
||||
const ProgressBarDiv = ref(null);
|
||||
const ASdivisionDiv = ref(null);
|
||||
const value = ref('');
|
||||
const leftProgressBarDiv = ref(null);
|
||||
|
||||
//行政区划数据
|
||||
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],
|
||||
soybean: [45.3, null, null, null, 333.3, null, 333.3, null],
|
||||
peanut: [145.3, 500, 500, null, 333.3, 500, 333.3, null],
|
||||
wheat: [200, 500, null, 500, null, 500, null, null],
|
||||
Blueberries: [124, null, null, null, null, null, null, 500],
|
||||
};
|
||||
const options = [
|
||||
{
|
||||
@ -140,6 +195,35 @@ const options = [
|
||||
label: 'Option2',
|
||||
},
|
||||
];
|
||||
|
||||
//表格数据
|
||||
const tableData = [
|
||||
{
|
||||
date: '小麦',
|
||||
name: '12364亩',
|
||||
address: '35%',
|
||||
},
|
||||
{
|
||||
date: '玉米',
|
||||
name: '6823亩',
|
||||
address: '20%',
|
||||
},
|
||||
{
|
||||
date: '大豆',
|
||||
name: '5682亩',
|
||||
address: '15%',
|
||||
},
|
||||
{
|
||||
date: '地瓜',
|
||||
name: '8964亩',
|
||||
address: '16%',
|
||||
},
|
||||
{
|
||||
date: '花生',
|
||||
name: '3550亩',
|
||||
address: '14%',
|
||||
},
|
||||
];
|
||||
// 组件挂载完成后执行
|
||||
onMounted(() => {
|
||||
initMap();
|
||||
@ -148,6 +232,7 @@ onMounted(() => {
|
||||
farmland();
|
||||
ProgressBar();
|
||||
ASdivision();
|
||||
leftProgressBar();
|
||||
});
|
||||
function initMap() {
|
||||
viewer.value = new Cesium.Viewer('cesiumContainer', {});
|
||||
@ -155,119 +240,306 @@ function initMap() {
|
||||
|
||||
//
|
||||
function areachar() {
|
||||
const xAxisData = [
|
||||
'2023/03/06',
|
||||
'2023/04/06',
|
||||
'2023/05/06',
|
||||
'2023/06/06',
|
||||
'2023/07/06',
|
||||
'2023/08/06',
|
||||
'2023/09/06',
|
||||
];
|
||||
const areaDivIntance = echarts.init(areaDiv.value);
|
||||
var option = {
|
||||
// backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
||||
textStyle: {
|
||||
fontFamily: 'Din-Light',
|
||||
},
|
||||
color: [
|
||||
'#123dac',
|
||||
'#73e2e2',
|
||||
'#ff7e85',
|
||||
'#9b52ff',
|
||||
'#fac524',
|
||||
'#46caff',
|
||||
'#a1e867',
|
||||
'#10b2b2',
|
||||
'#ec87f7',
|
||||
'#f4905a',
|
||||
'#00baba',
|
||||
'#facf24',
|
||||
'#e89d67',
|
||||
'#23c6c6',
|
||||
'#fa8699',
|
||||
'#40b7fc',
|
||||
'#006d75',
|
||||
'#595959',
|
||||
'#f4764f',
|
||||
'#a640fc',
|
||||
'#fda23f',
|
||||
'#2d7ae4',
|
||||
'#5092ff',
|
||||
'#9351ed',
|
||||
'#8a89fe',
|
||||
'#df89e8',
|
||||
'#2797ff',
|
||||
'#6ad089',
|
||||
'#7c92e8 ',
|
||||
],
|
||||
title: {
|
||||
text: '',
|
||||
left: '47%',
|
||||
textStyle: {
|
||||
fontSize: 24,
|
||||
},
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
lineStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(0, 255, 233,0)',
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: 'rgba(255, 255, 255,1)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0, 255, 233,0)',
|
||||
},
|
||||
],
|
||||
global: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: '15%',
|
||||
right: '3%',
|
||||
left: '11%',
|
||||
bottom: '12%',
|
||||
left: 60,
|
||||
right: 25,
|
||||
top: 50,
|
||||
bottom: 50,
|
||||
},
|
||||
xAxis: [
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
data: xAxisData,
|
||||
axisLabel: {
|
||||
color: 'rgba(255,255,255,0.7)',
|
||||
//X轴标签 label 做了特殊处理，防止左右溢出
|
||||
formatter: (value, index) => {
|
||||
if (index === 0 || index === xAxisData.length - 1) {
|
||||
return '';
|
||||
}
|
||||
return value;
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: '面积(亩)',
|
||||
nameTextStyle: {
|
||||
color: 'gray',
|
||||
},
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
color: 'rgba(255,255,255,0.7)',
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
},
|
||||
},
|
||||
minInterval: 1,
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['小麦', '玉米', '大豆', '花生', '蓝莓'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#C0C4CC',
|
||||
width: 1,
|
||||
},
|
||||
name: '白起',
|
||||
data: [
|
||||
1200, 1700, 1340, 2460, 2790, 211, 124, 131, 124, 360, 124, 78, 160, 604, 17, 0,
|
||||
0, 0, 2, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
|
||||
],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
smoothMonotone: 'x',
|
||||
cursor: 'pointer',
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
shadowColor: 'rgba(18,61,172,0.5)',
|
||||
shadowBlur: 10,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
name: '李泽言',
|
||||
data: [
|
||||
2200, 1790, 2494, 3130, 2710, 3180, 2350, 3410, 51, 146, 31, 41, 61, 485, 5, 0,
|
||||
0, 0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
|
||||
],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
smoothMonotone: 'x',
|
||||
cursor: 'pointer',
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
shadowColor: 'rgba(115,226,226,0.5)',
|
||||
shadowBlur: 10,
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 10,
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '许墨',
|
||||
data: [
|
||||
2800, 1740, 3450, 2340, 2710, 1430, 3232, 42, 42, 115, 41, 33, 64, 312, 4, 0, 0,
|
||||
0, 3, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
|
||||
],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
smoothMonotone: 'x',
|
||||
cursor: 'pointer',
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
shadowColor: 'rgba(255,126,133,0.5)',
|
||||
shadowBlur: 10,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '许墨',
|
||||
data: [
|
||||
3500, 1400, 2342, 1299, 3420, 2233, 2321, 42, 42, 115, 41, 33, 64, 312, 4, 0, 0,
|
||||
0, 3, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
|
||||
],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
smoothMonotone: 'x',
|
||||
cursor: 'pointer',
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
shadowColor: 'rgba(255,120,133,0.5)',
|
||||
shadowBlur: 10,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
option && areaDivIntance.setOption(option);
|
||||
|
||||
|
||||
window.addEventListener("resize",function (){
|
||||
areaDivIntance.resize();
|
||||
});
|
||||
|
||||
}
|
||||
function leftProgressBar() {
|
||||
const leftProgressBarrDivIntance = echarts.init(leftProgressBarDiv.value);
|
||||
var option = {
|
||||
// backgroundColor: '#031d33',
|
||||
grid: {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: '10%',
|
||||
right: '10%',
|
||||
},
|
||||
xAxis: {
|
||||
show: false,
|
||||
type: 'value',
|
||||
boundaryGap: [0, 0],
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(192,196,204,1)',
|
||||
type: 'dashed',
|
||||
type: 'category',
|
||||
data: [''],
|
||||
axisLine: { show: false },
|
||||
axisTick: [
|
||||
{
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
name: '面积(亩)',
|
||||
],
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '面积',
|
||||
name: '金额',
|
||||
type: 'bar',
|
||||
data: [3598, 1235, 2354, 3251, 1652],
|
||||
barWidth: '14px',
|
||||
zlevel: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(71,179,161,0.8)', // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(212,236,89,1) ', // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
barBorderRadius: [30, 30, 30, 30],
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
formatter: '{c}',
|
||||
textStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.8)',
|
||||
fontSize: '14',
|
||||
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,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
legend: {
|
||||
right: 0,
|
||||
top: 14,
|
||||
data: ['面积'],
|
||||
textStyle: {
|
||||
color: ' rgba(255,255,255,0.7)',
|
||||
fontSize: '14',
|
||||
},
|
||||
},
|
||||
};
|
||||
option && areaDivIntance.setOption(option);
|
||||
option && leftProgressBarrDivIntance.setOption(option);
|
||||
}
|
||||
|
||||
function typesof() {
|
||||
const typesofDivIntance = echarts.init(typesofDiv.value);
|
||||
var option = {
|
||||
title: [
|
||||
{
|
||||
text: '总面积',
|
||||
x: 'center',
|
||||
top: '32%',
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,1)',
|
||||
fontSize: 14,
|
||||
fontWeight: '400',
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '123459亩',
|
||||
x: 'center',
|
||||
top: '50%',
|
||||
textStyle: {
|
||||
fontSize: 18,
|
||||
color: 'rgba(255, 213, 88, 1)',
|
||||
foontWeight: '400',
|
||||
},
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
||||
@ -279,14 +551,33 @@ function typesof() {
|
||||
'rgba(255,225,104,0.8)',
|
||||
], // 指定饼图颜色
|
||||
legend: {
|
||||
orient: 'vertical', //图例方向分水平和垂直
|
||||
icon: 'rect', //图例样式
|
||||
x: 'center', //图例位置
|
||||
bottom: 'bottom',
|
||||
data: ['花生', '小麦', '大豆', '玉米'],
|
||||
selectedMode: true, //图例上的点击事件
|
||||
type: 'plain',
|
||||
orient: 'vertical',
|
||||
left: '85%',
|
||||
top: 'center',
|
||||
align: 'left',
|
||||
itemGap: 20,
|
||||
itemWidth: 12, // 设置宽度
|
||||
itemHeight: 7, // 设置高度
|
||||
symbolKeepAspect: false,
|
||||
textStyle: {
|
||||
color: ' rgba(255,255,255,0.7)',
|
||||
fontSize: '14',
|
||||
color: 'rgba(255,255,255,0.7)',
|
||||
rich: {
|
||||
name: {
|
||||
verticalAlign: 'right',
|
||||
align: 'left',
|
||||
width: 90,
|
||||
fontSize: 18,
|
||||
color: '#D8DDE3',
|
||||
},
|
||||
value: {
|
||||
align: 'left',
|
||||
width: 50,
|
||||
fontSize: 18,
|
||||
color: '#D8DDE3',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
@ -297,7 +588,7 @@ function typesof() {
|
||||
avoidLabelOverlap: true,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
show: false, //饼图label文字
|
||||
position: 'left',
|
||||
textStyle: {
|
||||
color: 'rgba(41,255,219,1)',
|
||||
@ -318,10 +609,11 @@ function typesof() {
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{ value: 25, name: '花生' },
|
||||
{ value: 25, name: '小麦' },
|
||||
{ value: 25, name: '大豆' },
|
||||
{ value: 25, name: '玉米' },
|
||||
{ value: 25, name: '大豆' },
|
||||
{ value: 25, name: '地瓜' },
|
||||
{ value: 25, name: '花生' },
|
||||
],
|
||||
},
|
||||
],
|
||||
@ -515,7 +807,6 @@ function ProgressBar() {
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(255, 255, 255, 0.2)',
|
||||
|
||||
barBorderRadius: 50,
|
||||
},
|
||||
},
|
||||
@ -528,27 +819,6 @@ function ProgressBar() {
|
||||
function ASdivision(params) {
|
||||
const ASdivisionDivIntance = echarts.init(ASdivisionDiv.value);
|
||||
var option = {
|
||||
// title: {
|
||||
// text: 'BY制程单位：',
|
||||
// left: '1%',
|
||||
// top: '1%',
|
||||
// textStyle: {
|
||||
// fontSize: 16,
|
||||
// color: '#9d9d9d',
|
||||
// fontWeight: 'bold',
|
||||
// },
|
||||
// },
|
||||
// legend: {
|
||||
// data: ['正式工占比', '派遣工占比'],
|
||||
// orient: 'horizontal',
|
||||
// itemHeight: 20,
|
||||
// itemWidth: 40,
|
||||
// left: '30%',
|
||||
// top: '8%',
|
||||
// textStyle: {
|
||||
// fontSize: 16,
|
||||
// },
|
||||
// },
|
||||
// 设置图表的位置
|
||||
grid: {
|
||||
bottom: '8%',
|
||||
@ -627,7 +897,10 @@ function ASdivision(params) {
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
formatter: '玉米',
|
||||
formatter: function (p) {
|
||||
console.log(p);
|
||||
return p.value > 400 ? p.value : '';
|
||||
},
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
fontWeight: 'bolder',
|
||||
@ -650,7 +923,7 @@ function ASdivision(params) {
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
formatter: '大豆',
|
||||
formatter: '',
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
fontWeight: 'bolder',
|
||||
@ -673,7 +946,7 @@ function ASdivision(params) {
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
formatter: '花生',
|
||||
formatter: '',
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
fontWeight: 'bolder',
|
||||
@ -696,7 +969,7 @@ function ASdivision(params) {
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
formatter: '小麦',
|
||||
formatter: '',
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
fontWeight: 'bolder',
|
||||
@ -719,7 +992,7 @@ function ASdivision(params) {
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
formatter: '蓝莓',
|
||||
formatter: '',
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
fontWeight: 'bolder',
|
||||
@ -746,21 +1019,44 @@ $height: calc(100vh - 100px);
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
background: #ccc;
|
||||
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;
|
||||
justify-content: space-between;
|
||||
p {
|
||||
width: 79px;
|
||||
height: 25px;
|
||||
border-radius: 20px;
|
||||
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;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.leftWra {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 50px;
|
||||
width: 455px;
|
||||
top: 3%;
|
||||
width: 24%;
|
||||
height: 957px;
|
||||
opacity: 1;
|
||||
background: rgba(2, 31, 26, 0.3);
|
||||
|
||||
.leftTop {
|
||||
width: 455px;
|
||||
width: 100%;
|
||||
height: 397px;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
@ -768,15 +1064,20 @@ $height: calc(100vh - 100px);
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.areaDiv {
|
||||
width: 415px;
|
||||
width: 100%;
|
||||
height: 327px;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
padding: 1px;
|
||||
}
|
||||
.ProgressBar {
|
||||
width: 372px;
|
||||
height: 9px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.leftbottom {
|
||||
width: 455px;
|
||||
width: 100%;
|
||||
height: 337px;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
@ -787,14 +1088,35 @@ $height: calc(100vh - 100px);
|
||||
width: 410px;
|
||||
height: 267px;
|
||||
}
|
||||
.tableDiv {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
:deep(.ones) {
|
||||
width: 100%;
|
||||
height: 171;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
--el-table-tr-bg-color: null;
|
||||
--el-table-border-color: null;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0px;
|
||||
line-height: 0px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rightWra {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
position:absolute;
|
||||
top: 3%;
|
||||
right: 20px;
|
||||
width: 455px;
|
||||
width: 24%;
|
||||
height: 957px;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
@ -802,7 +1124,7 @@ $height: calc(100vh - 100px);
|
||||
align-items: center;
|
||||
background: rgba(2, 31, 26, 0.3);
|
||||
.rightTop {
|
||||
width: 455px;
|
||||
width: 100%;
|
||||
height: 439px;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
@ -810,7 +1132,7 @@ $height: calc(100vh - 100px);
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.farmlandDiv {
|
||||
width: 415px;
|
||||
width: 100%;
|
||||
height: 340px;
|
||||
opacity: 1;
|
||||
}
|
||||
@ -821,7 +1143,7 @@ $height: calc(100vh - 100px);
|
||||
}
|
||||
}
|
||||
.rightbottom {
|
||||
width: 455px;
|
||||
width: 100%;
|
||||
height: 490px;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
@ -850,7 +1172,7 @@ $height: calc(100vh - 100px);
|
||||
|
||||
.legend {
|
||||
position: absolute;
|
||||
left: 1296px;
|
||||
right: 26%;
|
||||
top: 540px;
|
||||
width: 129px;
|
||||
height: 338px;
|
||||
@ -893,8 +1215,8 @@ $height: calc(100vh - 100px);
|
||||
|
||||
.bottom_center {
|
||||
position: absolute;
|
||||
left: 693px;
|
||||
top: 900px;
|
||||
right: 26%;
|
||||
bottom: 5%;
|
||||
width: 732px;
|
||||
height: 75px;
|
||||
opacity: 1;
|
||||
@ -902,4 +1224,16 @@ $height: calc(100vh - 100px);
|
||||
background: rgba(2, 31, 26, 0.6);
|
||||
border: 1px solid rgba(4, 153, 153, 1);
|
||||
}
|
||||
.tool {
|
||||
position: absolute;
|
||||
right: 26%;
|
||||
top: 103px;
|
||||
width: 30px;
|
||||
height: 280px;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user