up
This commit is contained in:
@ -169,7 +169,11 @@
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
<div class="bottom_center">
|
||||
<TimeLine />
|
||||
<TimeLine
|
||||
v-if="dataSource.length > 0"
|
||||
:dataSource="dataSource"
|
||||
@dataHandle="handleData"
|
||||
/>
|
||||
</div>
|
||||
<div class="tool">
|
||||
<span><img src="@/assets/images/LAYER.png" alt="" /></span>
|
||||
@ -181,33 +185,26 @@
|
||||
</div>
|
||||
<div id="pop"></div>
|
||||
<div id="popup" class="ol-popup">
|
||||
<div class="pophead" style="width: 100%; height: 20px">
|
||||
<div class="pophead" style="width: 100%">
|
||||
<div
|
||||
id="popup-title"
|
||||
style="
|
||||
font: bold 15px sans-serif;
|
||||
align: left;
|
||||
position: absolute;
|
||||
/* top: 5px; */
|
||||
left: 17px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1px;
|
||||
color: rgba(246, 255, 255, 1);
|
||||
line-height: 42px;
|
||||
padding-left: 45px;
|
||||
"
|
||||
></div>
|
||||
<a
|
||||
href="#"
|
||||
id="popup-closer"
|
||||
class="ol-popup-closer"
|
||||
style="color: #8e908c"
|
||||
></a>
|
||||
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
|
||||
</div>
|
||||
<div id="popup-content" style="padding: 10px">
|
||||
<div v-for="(item, index) in alterArr" :key="index">
|
||||
<p>
|
||||
<span>{{ item.name }}</span>
|
||||
:
|
||||
<span>{{ item.area }}(亩)</span>
|
||||
</p>
|
||||
</div>
|
||||
<div id="popup-content" style="padding: 30px">
|
||||
<p v-for="(item, index) in alterArr" :key="index">
|
||||
<img src="@/assets/images/icon.png" />
|
||||
<span class="label">{{ item.name }}：</span>
|
||||
<span>{{ item.area }}（亩）</span>
|
||||
</p>
|
||||
</div>
|
||||
<div id="popup-pagination"></div>
|
||||
</div>
|
||||
@ -374,6 +371,7 @@ import * as xlsx from 'xlsx'; // Vue3 版本
|
||||
import { ElMessage } from 'element-plus';
|
||||
import townJson from './town.json';
|
||||
import { useRouter } from 'vue-router';
|
||||
import moment from 'Moment';
|
||||
// import {}
|
||||
|
||||
const router = useRouter();
|
||||
@ -401,14 +399,16 @@ let SwitchFlag = ref(true);
|
||||
let regionName = ref('');
|
||||
let layers = ref(null); //村
|
||||
let alterArr = ref([]);
|
||||
let dataSource = ref([]);
|
||||
let oldDatas = ref('');
|
||||
let highStandard = [
|
||||
'高标准农田1',
|
||||
'高标准农田2',
|
||||
'高标准农田3',
|
||||
'高标准农田4',
|
||||
'高标准农田5',
|
||||
'高标准农田6',
|
||||
'高标准农田7',
|
||||
'高标准农田1.0',
|
||||
'高标准农田2.0',
|
||||
'高标准农田3.0',
|
||||
'高标准农田4.0',
|
||||
'高标准农田5.0',
|
||||
'高标准农田6.0',
|
||||
'高标准农田7.0',
|
||||
];
|
||||
let highStandarditem = {
|
||||
小麦: [],
|
||||
@ -441,6 +441,18 @@ watch(
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => oldDatas.value,
|
||||
(val, oldVal) => {
|
||||
console.log(oldDatas);
|
||||
value.value = '370211';
|
||||
getcroppers(value.value, oldDatas.value.name); //作物分类面积请求
|
||||
getcropTypeStatisticss(value.value, oldDatas.value.name); //作物类型统计百分比
|
||||
getvillages(value.value, oldDatas.value.name);
|
||||
getTownships(value.value, oldDatas.value.name);
|
||||
gethighStandards(oldDatas.value.name); //高标准农田
|
||||
}
|
||||
);
|
||||
|
||||
const onSubmit = () => {
|
||||
if (!formInline.value.yearMonth) {
|
||||
@ -1090,19 +1102,16 @@ onMounted(() => {
|
||||
});
|
||||
// 初始化
|
||||
function initonMounted() {
|
||||
getcroppers('370211'); //作物分类面积请求
|
||||
getcropTypeStatisticss('370211'); //作物类型统计百分比
|
||||
theTimes(); //年
|
||||
getaArea(); //面积
|
||||
getTownships('370211');
|
||||
//地图
|
||||
initmap();
|
||||
showDaChangArea();
|
||||
areachar(); //图表
|
||||
typesof(); //图表
|
||||
farmland(); //图表
|
||||
ASdivision(); //图表
|
||||
// getFarmland();
|
||||
gethighStandards(); //高标准农田
|
||||
theTimes(); //年
|
||||
alter();
|
||||
for (const key in dic) {
|
||||
if (dic[key].disabled !== true) {
|
||||
@ -1176,36 +1185,22 @@ function initmap() {
|
||||
var lat = coodinate[1];
|
||||
var view = map.getView();
|
||||
var zoom = map.getView().getZoom();
|
||||
console.log(lon, lat);
|
||||
view.animate({
|
||||
center: [lon, lat],
|
||||
duration: 1000,
|
||||
});
|
||||
console.log(zoom, 'zoom========================');
|
||||
// if (zoom >= 15) {
|
||||
// checkList.value.forEach(item => {
|
||||
// if (layersDic[item]) {
|
||||
// QueryData(
|
||||
// e,
|
||||
// `${layersDic[item].name}@${layersDic[item].setOf}`,
|
||||
// `http://36.134.44.75:8090/iserver/services/map-${layersDic[item].setOf}/rest/maps/${layersDic[item].name}@${layersDic[item].setOf}`,
|
||||
// item
|
||||
// );
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
if (zoom >= 13) {
|
||||
QueryData(
|
||||
e,
|
||||
'huangdaoqu_village@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/huangdaoqu_village@huangdaoqu_bianjie',
|
||||
'CJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie',
|
||||
'村'
|
||||
);
|
||||
} else {
|
||||
QueryData(
|
||||
e,
|
||||
'huangdaoqu_town@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/huangdaoqu_town@huangdaoqu_bianjie',
|
||||
'XJQY3702112019WGS84@huangdaoqu_bianjie',
|
||||
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie',
|
||||
'镇'
|
||||
);
|
||||
}
|
||||
@ -1228,6 +1223,14 @@ function initmap() {
|
||||
// 开始监听父元素大小变化
|
||||
resizeObserver.observe(parentElement);
|
||||
}
|
||||
//创建蒙层，凸显黄岛区域
|
||||
function showDaChangArea() {
|
||||
axios.get('/json/huangdao.json').then(({ data }) => {
|
||||
const fts = new ol.format.GeoJSON().readFeatures(data);
|
||||
const ft = fts[0];
|
||||
addConver(ft.getGeometry().getCoordinates());
|
||||
});
|
||||
}
|
||||
//添加遮罩
|
||||
function addConver(data) {
|
||||
let source = new ol.source.Vector();
|
||||
@ -1264,7 +1267,7 @@ function erase(data) {
|
||||
const cun = () => {
|
||||
layers = new ol.layer.Tile({
|
||||
source: new ol.source.TileSuperMapRest({
|
||||
url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/huangdaoqu_village@huangdaoqu_bianjie',
|
||||
url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie',
|
||||
//rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
|
||||
cacheEnabled: false,
|
||||
}),
|
||||
@ -1277,7 +1280,7 @@ const cun = () => {
|
||||
const zhen = () => {
|
||||
var layer = new ol.layer.Tile({
|
||||
source: new ol.source.TileSuperMapRest({
|
||||
url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/huangdaoqu_town@huangdaoqu_bianjie',
|
||||
url: 'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie',
|
||||
//rasterfunction: new SuperMap.NDVIParameter({ redIndex: 0, nirIndex: 2 }),
|
||||
cacheEnabled: false,
|
||||
}),
|
||||
@ -1325,14 +1328,16 @@ function QueryData(e, name, url, item) {
|
||||
value.value = code;
|
||||
getTownships();
|
||||
let arr = [];
|
||||
Township.brr.forEach(item => {
|
||||
if (item.tomeCode == code) {
|
||||
name = item.tomeName;
|
||||
arr.push(item);
|
||||
}
|
||||
getTownship('370211').then(res => {
|
||||
res.data.forEach(item => {
|
||||
if (item.tomeCode == code) {
|
||||
name = item.tomeName;
|
||||
arr.push(item);
|
||||
}
|
||||
});
|
||||
alterArr.value = arr;
|
||||
alter();
|
||||
});
|
||||
alter();
|
||||
} else if (
|
||||
item == '村' &&
|
||||
data.result.recordsets[0].features.features[0].properties.CJQYDM
|
||||
@ -1585,9 +1590,14 @@ function rightFoldClick() {
|
||||
}
|
||||
}
|
||||
|
||||
const handleData = oldData => {
|
||||
oldDatas.value = oldData;
|
||||
};
|
||||
|
||||
//接口
|
||||
//镇
|
||||
const getTownships = city => {
|
||||
const getTownships = (city, time) => {
|
||||
console.log(time);
|
||||
dd = {
|
||||
小麦: [],
|
||||
玉米: [],
|
||||
@ -1600,7 +1610,7 @@ const getTownships = city => {
|
||||
白菜和萝卜: [],
|
||||
其他: [],
|
||||
};
|
||||
getTownship({ divisions: city }).then(res => {
|
||||
getTownship({ divisions: city, yearMonth: time }).then(res => {
|
||||
res.data.forEach((item, i) => {
|
||||
for (let index = 0; index < Object.values(item).length; index++) {
|
||||
if (Object.values(item)[index] == '0.0') {
|
||||
@ -1732,13 +1742,10 @@ const getaArea = () => {
|
||||
};
|
||||
|
||||
//作物分类面积统计
|
||||
const getcroppers = city => {
|
||||
console.log(111);
|
||||
classData = ref([]);
|
||||
namedata = ref([]);
|
||||
console.log(classData);
|
||||
getcropper({ divisions: city }).then(res => {
|
||||
console.log(res.data);
|
||||
const getcroppers = (city, time) => {
|
||||
getcropper({ divisions: city, yearMonth: time }).then(res => {
|
||||
classData = ref([]);
|
||||
namedata = ref([]);
|
||||
res.data.forEach(item => {
|
||||
classData.value.unshift(item.area);
|
||||
namedata.value.unshift(item.name);
|
||||
@ -1747,9 +1754,9 @@ const getcroppers = city => {
|
||||
});
|
||||
};
|
||||
//作物类型统计
|
||||
const getcropTypeStatisticss = city => {
|
||||
Pie3D.arr = [];
|
||||
getcropTypeStatistics({ divisions: city }).then(res => {
|
||||
const getcropTypeStatisticss = (city, time) => {
|
||||
getcropTypeStatistics({ divisions: city, yearMonth: time }).then(res => {
|
||||
Pie3D.arr = [];
|
||||
let arr = [];
|
||||
res.data.forEach(item => {
|
||||
for (let index = 0; index < dictionaryArr.length; index++) {
|
||||
@ -1779,8 +1786,8 @@ const getcropTypeStatisticss = city => {
|
||||
};
|
||||
//高标准农田//highStandarditem
|
||||
let highStandardArr = ref([]);
|
||||
const gethighStandards = () => {
|
||||
gethighStandard().then(res => {
|
||||
const gethighStandards = time => {
|
||||
gethighStandard({ yearMonth: time }).then(res => {
|
||||
highStandardArr.value = res.data;
|
||||
console.log(res.data);
|
||||
highStandard.forEach((item, indexs) => {
|
||||
@ -1792,7 +1799,7 @@ const gethighStandards = () => {
|
||||
Object.keys(dd).forEach(it => {
|
||||
const index = town.findIndex(a => a && a.name === it && Number(a.area) > 0);
|
||||
if (index > -1) {
|
||||
highStandarditem[it].push(100);
|
||||
highStandarditem[it].push(70);
|
||||
} else {
|
||||
highStandarditem[it].push(null);
|
||||
}
|
||||
@ -1804,22 +1811,30 @@ const gethighStandards = () => {
|
||||
|
||||
const selectTab = () => {
|
||||
if (value.value == '370211') {
|
||||
getTownships('370211');
|
||||
getcroppers('370211'); //作物分类面积请求
|
||||
getcropTypeStatisticss('370211'); //作物类型统计百分比
|
||||
getTownships('370211', oldDatas.value.name);
|
||||
getcroppers('370211', oldDatas.value.name); //作物分类面积请求
|
||||
getcropTypeStatisticss('370211', oldDatas.value.name); //作物类型统计百分比
|
||||
return;
|
||||
} else {
|
||||
getcroppers(value.value); //作物分类面积请求
|
||||
getcropTypeStatisticss(value.value); //作物类型统计百分比
|
||||
getvillages(value.value);
|
||||
console.log(oldDatas);
|
||||
|
||||
getcroppers(value.value, oldDatas.value.name); //作物分类面积请求
|
||||
getcropTypeStatisticss(value.value, oldDatas.value.name); //作物类型统计百分比
|
||||
getvillages(value.value, oldDatas.value.name);
|
||||
}
|
||||
};
|
||||
//列表模式-年
|
||||
const theTimes = () => {
|
||||
gettheTime().then(res => {
|
||||
oldDatas.value = { name: res.data[0] };
|
||||
timeArr.value = res.data;
|
||||
formInline.value.yearMonth = res.data[0];
|
||||
getlistModes(res.data[0]);
|
||||
res.data.forEach(item => {
|
||||
dataSource.value.push({ name: item });
|
||||
});
|
||||
console.log(dataSource.value);
|
||||
console.log('1111');
|
||||
});
|
||||
};
|
||||
//列表模式-默认展示
|
||||
@ -2510,6 +2525,72 @@ function farmland() {
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '蓝莓',
|
||||
type: 'bar',
|
||||
barWidth: 12,
|
||||
stack: 'stack',
|
||||
data: highStandarditem.蓝莓,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 0,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0, 153, 255, 1)',
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(0, 153, 255, 1)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '地瓜',
|
||||
type: 'bar',
|
||||
barWidth: 12,
|
||||
stack: 'stack',
|
||||
data: highStandarditem.地瓜,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 0,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(255, 18, 18, 1)',
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(255, 18, 18, 1)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '其他',
|
||||
type: 'bar',
|
||||
barWidth: 12,
|
||||
stack: 'stack',
|
||||
data: highStandarditem.其他,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 0,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(166, 224, 255, 1)',
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(166, 224, 255, 1)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
@ -3711,12 +3792,12 @@ $height: calc(100vh - 100px);
|
||||
/*设置弹出框样式*/
|
||||
.ol-popup {
|
||||
position: absolute;
|
||||
background-color: #eeeeee;
|
||||
// background-color: #eeeeee;
|
||||
-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
|
||||
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
|
||||
padding: 15px;
|
||||
// padding: 15px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #cccccc;
|
||||
// border: 1px solid #cccccc;
|
||||
bottom: 12px;
|
||||
left: -50px;
|
||||
min-width: 280px;
|
||||
@ -3746,22 +3827,56 @@ $height: calc(100vh - 100px);
|
||||
.ol-popup-closer {
|
||||
text-decoration: none;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
top: 11px;
|
||||
right: 8px;
|
||||
color: rgba(47, 214, 214, 1) !important;
|
||||
}
|
||||
.ol-popup-closer:after {
|
||||
content: '✖';
|
||||
}
|
||||
#popup {
|
||||
border-radius: 5px;
|
||||
background: rgba(2, 31, 26, 1);
|
||||
// display: none;
|
||||
// justify-content: flex-start;
|
||||
// align-items: flex-end;
|
||||
padding: 30px 8px 20px 8px;
|
||||
color: #fff;
|
||||
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
|
||||
border: rgba(41, 255, 255, 1);
|
||||
.pophead {
|
||||
background-image: url('@/assets/images/top.png') !important;
|
||||
background-repeat: no-repeat;
|
||||
height: 42px;
|
||||
opacity: 1;
|
||||
background: linear-gradient(270deg, rgba(19, 92, 98, 0.4) 0%, rgba(19, 92, 98, 1) 100%);
|
||||
}
|
||||
#popup-content {
|
||||
background-image: url('@/assets/images/bottom.png') !important;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% !important;
|
||||
width: 522px;
|
||||
height: 365px;
|
||||
opacity: 1;
|
||||
background: rgba(2, 31, 26, 0.7);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
p {
|
||||
width: 223px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
font-size: 14px;
|
||||
background: linear-gradient(
|
||||
270deg,
|
||||
rgba(19, 92, 98, 0) 0%,
|
||||
rgba(33, 169, 169, 0.36) 100%
|
||||
);
|
||||
padding-left: 18px;
|
||||
display: flex;
|
||||
background-image: url('@/assets/images/duande.png') !important;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% !important;
|
||||
.label {
|
||||
color: rgba(47, 214, 214, 1);
|
||||
}
|
||||
span {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.back_button {
|
||||
|
||||
Reference in New Issue
Block a user