up
This commit is contained in:
parent
35a86dc2fe
commit
4192cb142f
@ -104,6 +104,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="leftFoldDiv" @click="leftFoldClick()">
|
||||
<el-icon><ArrowRightBold /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightWra">
|
||||
<div class="rightTop">
|
||||
@ -159,6 +162,9 @@
|
||||
</el-select>
|
||||
<div ref="ASdivisionDiv" class="ASdivision"></div>
|
||||
</div>
|
||||
<div class="rightFoldDiv" @click="rightFoldClick()">
|
||||
<el-icon><ArrowLeftBold /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom_center">
|
||||
@ -217,6 +223,8 @@ const clickInfoMap = ref({ name: '', value: '' });
|
||||
const checkedCities = ref([]);
|
||||
const formLandRef = ref([]);
|
||||
const flag = ref(false);
|
||||
let leftWraFlag = ref(true);
|
||||
let rightWraFlag = ref(true);
|
||||
let ff = ref('{x:765,y:191}');
|
||||
let Pie3D = reactive({
|
||||
arr: [
|
||||
@ -472,6 +480,8 @@ function initMap() {
|
||||
// // maximumLevel: 18
|
||||
}),
|
||||
});
|
||||
// 去除logo
|
||||
viewer.cesiumWidget.creditContainer.style.display = 'none';
|
||||
//加载地图服务
|
||||
// let map = new Cesium.WebMapServiceImageryProvider({
|
||||
// url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms`,
|
||||
@ -935,10 +945,32 @@ function deleteEntityByName(name) {
|
||||
}
|
||||
}
|
||||
}
|
||||
//折叠
|
||||
|
||||
function leftFoldClick() {
|
||||
leftWraFlag.value = !leftWraFlag.value;
|
||||
if (leftWraFlag.value) {
|
||||
let leftWra = document.querySelector('.leftWra');
|
||||
leftWra.style.transform = 'translate(0,0)';
|
||||
} else {
|
||||
let leftWra = document.querySelector('.leftWra');
|
||||
leftWra.style.transform = 'translate(-107%,0)';
|
||||
}
|
||||
}
|
||||
function rightFoldClick() {
|
||||
rightWraFlag.value = !rightWraFlag.value;
|
||||
if (rightWraFlag.value) {
|
||||
let rightWra = document.querySelector('.rightWra');
|
||||
rightWra.style.transform = 'translate(0,0)';
|
||||
} else {
|
||||
let rightWra = document.querySelector('.rightWra');
|
||||
rightWra.style.transform = 'translate(107%,0)';
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------接口--------------------*/
|
||||
const getArea = () => {
|
||||
getarea({ time: '2023-04-19', subregion: '1', parent: '黄岛区' }).then(res => {
|
||||
getarea({ time: '2023-04-25', subregion: '1', parent: '黄岛区' }).then(res => {
|
||||
console.log(res);
|
||||
});
|
||||
};
|
||||
@ -1200,7 +1232,7 @@ const selectTab = () => {
|
||||
},
|
||||
],
|
||||
});
|
||||
hiddenOverlayChart()
|
||||
hiddenOverlayChart();
|
||||
}
|
||||
areatext = '1293842';
|
||||
tableData = [
|
||||
@ -1271,7 +1303,7 @@ const selectTab = () => {
|
||||
removeWms(['aaa']);
|
||||
// 添加村
|
||||
addvillage(`XZDM=${value.value}`, 'aaa');
|
||||
getarea({ time: '2023-04-19', subregion: '1', parent: '黄岛区' }).then(res => {
|
||||
getarea({ time: '2023-04-26', subregion: '1', parent: '黄岛区' }).then(res => {
|
||||
let arr = [];
|
||||
res.data.map((item, index) => {
|
||||
if (item.region == townData.properties.XZMC) {
|
||||
@ -1315,7 +1347,6 @@ function areachar() {
|
||||
'2023/06/06',
|
||||
'2023/07/06',
|
||||
'2023/08/06',
|
||||
'2023/09/06',
|
||||
];
|
||||
const areaDivIntance = echarts.init(areaDiv.value);
|
||||
var option = {
|
||||
@ -2358,7 +2389,7 @@ function ASdivision() {
|
||||
return (
|
||||
params.seriesName +
|
||||
'<span style="font-size: 14px; color: #f00;">' +
|
||||
params.value +
|
||||
(params.value / 66.72).toFixed(2) +
|
||||
'</span>' +
|
||||
'亩'
|
||||
);
|
||||
@ -3036,6 +3067,8 @@ $height: calc(100vh - 100px);
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
background: url('@/assets/images/title.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 110% 100%;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
@ -3076,10 +3109,20 @@ $height: calc(100vh - 100px);
|
||||
top: 10px;
|
||||
left: 20px;
|
||||
height: $height;
|
||||
width: 25%;
|
||||
width: 23%;
|
||||
background: rgba(2, 31, 26, 0.85);
|
||||
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
|
||||
|
||||
transition: transform 1s;
|
||||
.leftFoldDiv {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
right: -12%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 30px;
|
||||
color: #ccc;
|
||||
}
|
||||
.leftTop {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@ -3180,7 +3223,7 @@ $height: calc(100vh - 100px);
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
width: 25%;
|
||||
width: 23%;
|
||||
height: $height;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
@ -3188,7 +3231,17 @@ $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);
|
||||
|
||||
transition: transform 1s;
|
||||
.rightFoldDiv {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
left: -8%;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
font-size: 30px;
|
||||
color: #ccc;
|
||||
}
|
||||
.rightTop {
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
|
||||
@ -28,6 +28,9 @@
|
||||
</div>
|
||||
<div ref="typesofDiv" class="typesofDiv"></div>
|
||||
</div>
|
||||
<div class="leftFoldDiv" @click="leftFoldClick()">
|
||||
<el-icon><ArrowRightBold /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightWra">
|
||||
<div class="rightTop">
|
||||
@ -71,6 +74,9 @@
|
||||
</el-select>
|
||||
<div ref="ASdivisionDiv" class="ASdivision"></div>
|
||||
</div>
|
||||
<div class="rightFoldDiv" @click="rightFoldClick()">
|
||||
<el-icon><ArrowLeftBold /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<el-collapse class="legend" accordion>
|
||||
<el-collapse-item name="1">
|
||||
@ -201,6 +207,8 @@ let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
|
||||
const value = ref('370211');
|
||||
const clickInfoMap = ref({ info: [] });
|
||||
const flag = ref(false);
|
||||
let leftWraFlag = ref(true);
|
||||
let rightWraFlag = ref(true);
|
||||
let dd = {
|
||||
小麦: [],
|
||||
玉米: [],
|
||||
@ -849,6 +857,30 @@ function back() {
|
||||
});
|
||||
flag.value = false;
|
||||
}
|
||||
|
||||
//折叠
|
||||
|
||||
function leftFoldClick() {
|
||||
leftWraFlag.value = !leftWraFlag.value;
|
||||
if (leftWraFlag.value) {
|
||||
let leftWra = document.querySelector('.leftWra');
|
||||
leftWra.style.transform = 'translate(0,0)';
|
||||
} else {
|
||||
let leftWra = document.querySelector('.leftWra');
|
||||
leftWra.style.transform = 'translate(-107%,0)';
|
||||
}
|
||||
}
|
||||
function rightFoldClick() {
|
||||
rightWraFlag.value = !rightWraFlag.value;
|
||||
if (rightWraFlag.value) {
|
||||
let rightWra = document.querySelector('.rightWra');
|
||||
rightWra.style.transform = 'translate(0,0)';
|
||||
} else {
|
||||
let rightWra = document.querySelector('.rightWra');
|
||||
rightWra.style.transform = 'translate(107%,0)';
|
||||
}
|
||||
}
|
||||
|
||||
//接口
|
||||
const getArea = (item, index) => {
|
||||
return getarea({ time: '2023-04-19', subregion: index, parent: item }).then(response => {
|
||||
@ -916,26 +948,23 @@ const selectTab = () => {
|
||||
classData = [302034, 243990, 42344, 34234, 304235];
|
||||
deleteEntityByName('townLine');
|
||||
removeWms(['village_CQL']);
|
||||
} else if (value.value) {
|
||||
classData = [102034, 173990, 22344, 14234, 104235];
|
||||
}
|
||||
|
||||
Pie3D.arr = [
|
||||
Pie3D = reactive({
|
||||
arr: [
|
||||
{
|
||||
name: '小麦',
|
||||
value: 20,
|
||||
value: 101,
|
||||
itemStyle: {
|
||||
opacity: 0.5,
|
||||
opacity: 0.8,
|
||||
color: 'rgba(110, 209, 84, 0.9)',
|
||||
},
|
||||
},
|
||||
{
|
||||
// 数据项名称
|
||||
name: '花生',
|
||||
value: 10,
|
||||
value: 156,
|
||||
itemStyle: {
|
||||
// 透明度
|
||||
opacity: 0.5,
|
||||
opacity: 0.8,
|
||||
// 扇形颜色
|
||||
color: 'rgba(251, 201, 3, 1)',
|
||||
},
|
||||
@ -946,10 +975,10 @@ const selectTab = () => {
|
||||
{
|
||||
// 数据项名称
|
||||
name: '大豆',
|
||||
value: 13,
|
||||
value: 156,
|
||||
itemStyle: {
|
||||
// 透明度
|
||||
opacity: 0.5,
|
||||
opacity: 0.8,
|
||||
// 扇形颜色
|
||||
color: 'rgba(240, 129, 31, 0.9)',
|
||||
},
|
||||
@ -960,10 +989,10 @@ const selectTab = () => {
|
||||
{
|
||||
// 数据项名称
|
||||
name: '地瓜',
|
||||
value: 18,
|
||||
value: 156,
|
||||
itemStyle: {
|
||||
// 透明度
|
||||
opacity: 0.5,
|
||||
opacity: 0.8,
|
||||
// 扇形颜色
|
||||
color: 'rgba(27, 85, 222, 1)',
|
||||
},
|
||||
@ -971,7 +1000,94 @@ const selectTab = () => {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
];
|
||||
{
|
||||
// 数据项名称
|
||||
name: '蓝莓',
|
||||
value: 56,
|
||||
itemStyle: {
|
||||
// 透明度
|
||||
opacity: 0.8,
|
||||
// 扇形颜色
|
||||
color: 'rgba(72, 102, 211, 0.9)',
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
} else if (value.value) {
|
||||
classData = [102034, 173990, 22344, 14234, 104235];
|
||||
Pie3D = reactive({
|
||||
arr: [
|
||||
{
|
||||
name: '小麦',
|
||||
value: 101,
|
||||
itemStyle: {
|
||||
opacity: 0.8,
|
||||
color: 'rgba(110, 209, 84, 0.9)',
|
||||
},
|
||||
},
|
||||
{
|
||||
// 数据项名称
|
||||
name: '花生',
|
||||
value: 156,
|
||||
itemStyle: {
|
||||
// 透明度
|
||||
opacity: 0.8,
|
||||
// 扇形颜色
|
||||
color: 'rgba(251, 201, 3, 1)',
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
// 数据项名称
|
||||
name: '大豆',
|
||||
value: 156,
|
||||
itemStyle: {
|
||||
// 透明度
|
||||
opacity: 0.8,
|
||||
// 扇形颜色
|
||||
color: 'rgba(240, 129, 31, 0.9)',
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
// 数据项名称
|
||||
name: '地瓜',
|
||||
value: 0,
|
||||
itemStyle: {
|
||||
// 透明度
|
||||
opacity: 0.8,
|
||||
// 扇形颜色
|
||||
color: 'rgba(27, 85, 222, 1)',
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
// 数据项名称
|
||||
name: '蓝莓',
|
||||
value: 156,
|
||||
itemStyle: {
|
||||
// 透明度
|
||||
opacity: 0.8,
|
||||
// 扇形颜色
|
||||
color: 'rgba(72, 102, 211, 0.9)',
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
typesof();
|
||||
areachar();
|
||||
let arr = [...Township.arr];
|
||||
arr.forEach(item => {
|
||||
@ -1349,50 +1465,7 @@ function typesof() {
|
||||
return '';
|
||||
},
|
||||
},
|
||||
// visualMap: [
|
||||
// {
|
||||
// show: false,
|
||||
// dimension: 2, // [x, y, z, u, v]
|
||||
// min: -1,
|
||||
// seriesIndex: 0,
|
||||
// max: 1,
|
||||
// inRange: {
|
||||
// color: ['#ff0', '#f00'],
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// show: false,
|
||||
// dimension: 4, // [x, y, z, u, v]
|
||||
// min: 0,
|
||||
// seriesIndex: 1,
|
||||
// max: Math.PI * 2,
|
||||
// inRange: {
|
||||
// color: ['#0bf', '#0f0', '#0bf'],
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// show: false,
|
||||
// dimension: 3, // [x, y, z, u, v]
|
||||
// min: 0,
|
||||
// seriesIndex: 2,
|
||||
// max: Math.PI * 2,
|
||||
// inRange: {
|
||||
// color: [
|
||||
// '#a50026',
|
||||
// '#d73027',
|
||||
// '#f46d43',
|
||||
// '#fdae61',
|
||||
// '#fee090',
|
||||
// '#ffffbf',
|
||||
// '#e0f3f8',
|
||||
// '#abd9e9',
|
||||
// '#74add1',
|
||||
// '#4575b4',
|
||||
// '#313695',
|
||||
// ],
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
@ -1713,7 +1786,7 @@ function ChartClick(item) {
|
||||
// 移除作物
|
||||
removeWms(['huangdaoqu_town'], true);
|
||||
removeWms(['shuzisannong:huangdaoqu_town']);
|
||||
selectTab()
|
||||
selectTab();
|
||||
let layername = 'shuzisannong:farmland';
|
||||
|
||||
// 判断是否存在避免重复添加
|
||||
@ -2080,6 +2153,8 @@ $height: calc(100vh - 100px);
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
background: url('@/assets/images/title.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 110% 100%;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
@ -2123,7 +2198,17 @@ $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);
|
||||
|
||||
transition: transform 1s;
|
||||
.leftFoldDiv {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
right: -12%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 30px;
|
||||
color: #ccc;
|
||||
}
|
||||
.leftTop {
|
||||
// height: 35%;
|
||||
max-width: calc(100% - 20px);
|
||||
@ -2134,8 +2219,8 @@ $height: calc(100vh - 100px);
|
||||
width: 100%;
|
||||
height: 327px;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
padding: 1px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@ -2170,7 +2255,17 @@ $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);
|
||||
|
||||
transition: transform 1s;
|
||||
.rightFoldDiv {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
left: -8%;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
font-size: 30px;
|
||||
color: #ccc;
|
||||
}
|
||||
.rightTop {
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
@ -2184,6 +2279,8 @@ $height: calc(100vh - 100px);
|
||||
width: 100%;
|
||||
height: 340px;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ProgressBar {
|
||||
@ -2223,9 +2320,11 @@ $height: calc(100vh - 100px);
|
||||
}
|
||||
|
||||
.ASdivision {
|
||||
width: 415px;
|
||||
width: 100%;
|
||||
height: 368px;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
:deep(.el-select__popper) {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user