tianlong/Agriculture-front-end
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
tianlong 2023-04-27 11:44:35 +08:00
parent 35a86dc2fe
commit 4192cb142f
4 changed files with 6240 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/views/crops/area/index.vue
View File

@ -104,6 +104,9 @@
</div> </div>
</div> </div>
</div> </div>
<div class="leftFoldDiv" @click="leftFoldClick()">
<el-icon><ArrowRightBold /></el-icon>
</div>
</div> </div>
<div class="rightWra"> <div class="rightWra">
<div class="rightTop"> <div class="rightTop">
@ -159,6 +162,9 @@
</el-select> </el-select>
<div ref="ASdivisionDiv" class="ASdivision"></div> <div ref="ASdivisionDiv" class="ASdivision"></div>
</div> </div>
<div class="rightFoldDiv" @click="rightFoldClick()">
<el-icon><ArrowLeftBold /></el-icon>
</div>
</div> </div>
<div class="bottom_center"> <div class="bottom_center">
@ -217,6 +223,8 @@ const clickInfoMap = ref({ name: '', value: '' });
const checkedCities = ref([]); const checkedCities = ref([]);
const formLandRef = ref([]); const formLandRef = ref([]);
const flag = ref(false); const flag = ref(false);
let leftWraFlag = ref(true);
let rightWraFlag = ref(true);
let ff = ref('{x:765,y:191}'); let ff = ref('{x:765,y:191}');
let Pie3D = reactive({ let Pie3D = reactive({
arr: [ arr: [
@ -472,6 +480,8 @@ function initMap() {
// // maximumLevel: 18 // // maximumLevel: 18
}), }),
}); });
// 去除logo
viewer.cesiumWidget.creditContainer.style.display = 'none';
//加载地图服务 //加载地图服务
// 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`,
@ -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 = () => { 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); console.log(res);
}); });
}; };
@ -1200,7 +1232,7 @@ const selectTab = () => {
}, },
], ],
}); });
hiddenOverlayChart() hiddenOverlayChart();
} }
areatext = '1293842'; areatext = '1293842';
tableData = [ tableData = [
@ -1271,7 +1303,7 @@ const selectTab = () => {
removeWms(['aaa']); removeWms(['aaa']);
// 添加村 // 添加村
addvillage(`XZDM=${value.value}`, '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 = []; let arr = [];
res.data.map((item, index) => { res.data.map((item, index) => {
if (item.region == townData.properties.XZMC) { if (item.region == townData.properties.XZMC) {
@ -1315,7 +1347,6 @@ function areachar() {
'2023/06/06', '2023/06/06',
'2023/07/06', '2023/07/06',
'2023/08/06', '2023/08/06',
'2023/09/06',
]; ];
const areaDivIntance = echarts.init(areaDiv.value); const areaDivIntance = echarts.init(areaDiv.value);
var option = { var option = {
@ -2358,7 +2389,7 @@ function ASdivision() {
return ( return (
params.seriesName + params.seriesName +
'<span style="font-size: 14px; color: #f00;">' + '<span style="font-size: 14px; color: #f00;">' +
params.value + (params.value / 66.72).toFixed(2) +
'</span>' + '</span>' +
'亩' '亩'
); );
@ -3036,6 +3067,8 @@ $height: calc(100vh - 100px);
width: 100%; width: 100%;
height: 45px; height: 45px;
background: url('@/assets/images/title.png'); background: url('@/assets/images/title.png');
background-repeat: no-repeat;
background-size: 110% 100%;
color: #fff; color: #fff;
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
@ -3076,10 +3109,20 @@ $height: calc(100vh - 100px);
top: 10px; top: 10px;
left: 20px; left: 20px;
height: $height; height: $height;
width: 25%; 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);
transition: transform 1s;
.leftFoldDiv {
width: 30px;
height: 30px;
position: absolute;
right: -12%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 30px;
color: #ccc;
}
.leftTop { .leftTop {
width: 100%; width: 100%;
display: flex; display: flex;
@ -3180,7 +3223,7 @@ $height: calc(100vh - 100px);
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 20px; right: 20px;
width: 25%; width: 23%;
height: $height; height: $height;
opacity: 1; opacity: 1;
display: flex; display: flex;
@ -3188,7 +3231,17 @@ $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);
transition: transform 1s;
.rightFoldDiv {
width: 30px;
height: 30px;
position: absolute;
left: -8%;
top: 50%;
transform: translate(0, -50%);
font-size: 30px;
color: #ccc;
}
.rightTop { .rightTop {
width: 100%; width: 100%;
height: 40%; height: 40%;

225
src/views/crops/classify/index.vue
View File

@ -28,6 +28,9 @@
</div> </div>
<div ref="typesofDiv" class="typesofDiv"></div> <div ref="typesofDiv" class="typesofDiv"></div>
</div> </div>
<div class="leftFoldDiv" @click="leftFoldClick()">
<el-icon><ArrowRightBold /></el-icon>
</div>
</div> </div>
<div class="rightWra"> <div class="rightWra">
<div class="rightTop"> <div class="rightTop">
@ -71,6 +74,9 @@
</el-select> </el-select>
<div ref="ASdivisionDiv" class="ASdivision"></div> <div ref="ASdivisionDiv" class="ASdivision"></div>
</div> </div>
<div class="rightFoldDiv" @click="rightFoldClick()">
<el-icon><ArrowLeftBold /></el-icon>
</div>
</div> </div>
<el-collapse class="legend" accordion> <el-collapse class="legend" accordion>
<el-collapse-item name="1"> <el-collapse-item name="1">
@ -201,6 +207,8 @@ let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
const value = ref('370211'); const value = ref('370211');
const clickInfoMap = ref({ info: [] }); const clickInfoMap = ref({ info: [] });
const flag = ref(false); const flag = ref(false);
let leftWraFlag = ref(true);
let rightWraFlag = ref(true);
let dd = { let dd = {
小麦: [], 小麦: [],
玉米: [], 玉米: [],
@ -849,6 +857,30 @@ function back() {
}); });
flag.value = false; 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) => { 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 => {
@ -916,26 +948,23 @@ const selectTab = () => {
classData = [302034, 243990, 42344, 34234, 304235]; classData = [302034, 243990, 42344, 34234, 304235];
deleteEntityByName('townLine'); deleteEntityByName('townLine');
removeWms(['village_CQL']); removeWms(['village_CQL']);
} else if (value.value) { Pie3D = reactive({
classData = [102034, 173990, 22344, 14234, 104235]; arr: [
}
Pie3D.arr = [
{ {
name: '小麦', name: '小麦',
value: 20, value: 101,
itemStyle: { itemStyle: {
opacity: 0.5, opacity: 0.8,
color: 'rgba(110, 209, 84, 0.9)', color: 'rgba(110, 209, 84, 0.9)',
}, },
}, },
{ {
// 数据项名称 // 数据项名称
name: '花生', name: '花生',
value: 10, value: 156,
itemStyle: { itemStyle: {
// 透明度 // 透明度
opacity: 0.5, opacity: 0.8,
// 扇形颜色 // 扇形颜色
color: 'rgba(251, 201, 3, 1)', color: 'rgba(251, 201, 3, 1)',
}, },
@ -946,10 +975,10 @@ const selectTab = () => {
{ {
// 数据项名称 // 数据项名称
name: '大豆', name: '大豆',
value: 13, value: 156,
itemStyle: { itemStyle: {
// 透明度 // 透明度
opacity: 0.5, opacity: 0.8,
// 扇形颜色 // 扇形颜色
color: 'rgba(240, 129, 31, 0.9)', color: 'rgba(240, 129, 31, 0.9)',
}, },
@ -960,10 +989,10 @@ const selectTab = () => {
{ {
// 数据项名称 // 数据项名称
name: '地瓜', name: '地瓜',
value: 18, value: 156,
itemStyle: { itemStyle: {
// 透明度 // 透明度
opacity: 0.5, opacity: 0.8,
// 扇形颜色 // 扇形颜色
color: 'rgba(27, 85, 222, 1)', color: 'rgba(27, 85, 222, 1)',
}, },
@ -971,7 +1000,94 @@ const selectTab = () => {
show: true, 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(); areachar();
let arr = [...Township.arr]; let arr = [...Township.arr];
arr.forEach(item => { arr.forEach(item => {
@ -1349,50 +1465,7 @@ function typesof() {
return ''; 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: { xAxis3D: {
min: -1, min: -1,
max: 1, max: 1,
@ -1713,7 +1786,7 @@ function ChartClick(item) {
// 移除作物 // 移除作物
removeWms(['huangdaoqu_town'], true); removeWms(['huangdaoqu_town'], true);
removeWms(['shuzisannong:huangdaoqu_town']); removeWms(['shuzisannong:huangdaoqu_town']);
selectTab() selectTab();
let layername = 'shuzisannong:farmland'; let layername = 'shuzisannong:farmland';
// 判断是否存在避免重复添加 // 判断是否存在避免重复添加
@ -2080,6 +2153,8 @@ $height: calc(100vh - 100px);
width: 100%; width: 100%;
height: 45px; height: 45px;
background: url('@/assets/images/title.png'); background: url('@/assets/images/title.png');
background-repeat: no-repeat;
background-size: 110% 100%;
color: #fff; color: #fff;
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
@ -2123,7 +2198,17 @@ $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);
transition: transform 1s;
.leftFoldDiv {
width: 30px;
height: 30px;
position: absolute;
right: -12%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 30px;
color: #ccc;
}
.leftTop { .leftTop {
// height: 35%; // height: 35%;
max-width: calc(100% - 20px); max-width: calc(100% - 20px);
@ -2134,8 +2219,8 @@ $height: calc(100vh - 100px);
width: 100%; width: 100%;
height: 327px; height: 327px;
opacity: 1; opacity: 1;
display: flex;
padding: 1px; padding: 1px;
display: flex;
justify-content: center; justify-content: center;
} }
} }
@ -2170,7 +2255,17 @@ $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);
transition: transform 1s;
.rightFoldDiv {
width: 30px;
height: 30px;
position: absolute;
left: -8%;
top: 50%;
transform: translate(0, -50%);
font-size: 30px;
color: #ccc;
}
.rightTop { .rightTop {
width: 100%; width: 100%;
height: 40%; height: 40%;
@ -2184,6 +2279,8 @@ $height: calc(100vh - 100px);
width: 100%; width: 100%;
height: 340px; height: 340px;
opacity: 1; opacity: 1;
display: flex;
justify-content: center;
} }
.ProgressBar { .ProgressBar {
@ -2223,9 +2320,11 @@ $height: calc(100vh - 100px);
} }
.ASdivision { .ASdivision {
width: 415px; width: 100%;
height: 368px; height: 368px;
opacity: 1; opacity: 1;
display: flex;
justify-content: center;
} }
:deep(.el-select__popper) { :deep(.el-select__popper) {

2709
src/views/crops/output/wheat/index.vue
View File

File diff suppressed because it is too large Load Diff

3275
src/views/crops/site/index.vue
View File

File diff suppressed because it is too large Load Diff