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-07-24 18:07:54 +08:00
parent 79894eb7e8
commit 5bc7e7c3d1
461 changed files with 14666 additions and 8673 deletions
Download Patch File Download Diff File Expand all files Collapse all files

307
src/views/plough/abandonedLand/index.vue
View File

@ -5,13 +5,7 @@
<div class="rightbottom">
<div class="title">
<span>撂荒耕地面积统计</span>
<p
@click="
Deta(
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianjishijian.xlsx'
)
"
>
<p @click="Deta()">
下载 &nbsp;
<img
src="@/assets/icons/svg/downloads.svg"
@ -19,7 +13,13 @@
/>
</p>
</div>
<el-select popper-class="select_city" v-model="value" clearable placeholder="全部">
<el-select
v-if="limits"
popper-class="select_city"
v-model="value"
clearable
placeholder="全部"
>
<el-option
v-for="item in Township.arr"
:key="item.subregionCode"
@ -75,15 +75,22 @@
<el-checkbox
v-for="(value, item, key) in dic"
:key="key"
:style="{
background: value.color,
border: `1px solid ${value.color}`,
width: `100%`,
}"
v-model="checked3"
:v-model="value.disabled"
:disabled="value.disabled"
:label="item"
/>
>
<span
:style="{
background: value.color,
border: `1px solid ${value.color}`,
width: `10px`,
height: `10px`,
display: `flex`,
'margin-right': `5px`,
}"
></span>
{{ item }}
</el-checkbox>
</el-checkbox-group>
</div>
</el-collapse-item>
@ -140,6 +147,7 @@ import * as echarts from 'echarts';
import 'echarts-gl';
import TimeLine from '@/components/TimeLine/TimeLine.vue';
import { useEcharts } from '@/hooks/useEcharts';
import { downLoadFile } from '@/utils/download.js';
import {
getAbandon,
getNonFoodHuoChun,
@ -148,6 +156,7 @@ import {
getLhdyear,
} from '@/api/plough/abandonedLand.js';
import axios from 'axios';
import elementResizeDetectorMaker from 'element-resize-detector';
let viewer = ref(null);
const ASdivisionDiv = ref(null);
@ -155,30 +164,34 @@ const typesofDiv = ref(null);
let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
let townArr = ref([]);
const value = ref('370211');
const clickInfoMap = ref({ info: [] });
const flag = ref(false);
let leftWraFlag = ref(true);
let rightWraFlag = ref(true);
const checkList = ref([]);
let checkListdata = ref([]);
let alterArr = ref([]);
let dataSource = ref([]);
let oldDatas = ref('');
let limits = window.localStorage.getItem('divisions').length > 6 ? false : true;
let code =
window.localStorage.getItem('deptName') == '青岛西海岸新区'
? '黄岛区'
: window.localStorage.getItem('deptName');
//下载
/*---------------------------*/
const Deta = item => {
downloadURL(item);
};
const downloadURL = url => {
let link = document.createElement('a');
link.style.display = 'none';
link.href = url;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
let dd = {
小麦: [],
if (value.value == '370211') {
getAbandon({ yearMonth: oldDatas.value.name, whetherToDownload: true }).then(res => {
downLoadFile(res.data[res.data.length - 1].downloadPath);
});
} else {
getAbandonChun({
divisions: value.value,
yearMonth: oldDatas.value.name,
whetherToDownload: true,
}).then(res => {
downLoadFile(res.data[res.data.length - 1].downloadPath);
});
}
};
let dic = {
撂荒地: { color: 'rgba(175, 110, 250, 0.8)', disabled: false },
@ -186,8 +199,8 @@ let dic = {
// 图层字典
let layersDic = {
撂荒地: {
setOf: '2022-06-01-gengdi',
name: 'T2022_06_01_liaohuang',
setOf: '2022-12-31-liaohuang',
name: 'T2022_12_31_liaohuang',
},
};
let layers = ref(null); //村
@ -239,8 +252,13 @@ onUpdated(() => {
watch(
() => oldDatas.value,
(val, oldVal) => {
value.value = '370211';
getAbandons(oldDatas.value.name);
value.value = window.localStorage.getItem('divisions');
getCityAndCountZbs(value.value, oldDatas.value.name);
if (limits) {
getAbandons(oldDatas.value.name);
} else {
getAbandonChuns(value.value, oldDatas.value.name);
}
}
);
/*-------------地图------------------------*/
@ -259,6 +277,8 @@ function initmap() {
view: new ol.View({
center: [119.86763411957472, 35.88435182141938],
zoom: 11,
// 设置最大缩放级别
maxZoom: 16.5,
projection: 'EPSG:4326',
}),
layers: [
@ -291,28 +311,80 @@ function initmap() {
});
map.on('singleclick', function (e) {
var coodinate = e.coordinate;
var lon = coodinate[0];
var lat = coodinate[1];
var view = map.getView();
var zoom = map.getView().getZoom();
console.log(lon, lat);
view.animate({
center: [lon, lat],
duration: 1000,
});
if (zoom >= 13) {
QueryData(
e,
'CJQY3702112019WGS84@huangdaoqu_bianjie',
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie',
'村'
);
if (limits) {
var lon = coodinate[0];
var lat = coodinate[1];
var view = map.getView();
var zoom = map.getView().getZoom();
view.animate({
center: [lon, lat],
duration: 1000,
});
if (zoom >= 13) {
QueryData(
e,
'CJQY3702112019WGS84@huangdaoqu_bianjie',
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie',
'村'
);
} else {
QueryData(
e,
'XJQY3702112019WGS84@huangdaoqu_bianjie',
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie',
'镇'
);
}
} else {
QueryData(
e,
'XJQY3702112019WGS84@huangdaoqu_bianjie',
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie',
'镇'
let url = 'http://36.134.44.75:8090/iserver/services/data-huangdaoqu_bianjie/rest/data';
let sqlParam = new ol.supermap.GetFeaturesBySQLParameters({
queryParameter: {
name: 'XJQY3702112019WGS84@huangdaoqu_bianjie',
attributeFilter: `XJQYMC = '${code}'`,
},
datasetNames: ['huangdaoqu_bianjie:XJQY3702112019WGS84'],
});
new ol.supermap.FeatureService(url).getFeaturesBySQL(
sqlParam,
function (serviceResult) {
let geojson = new ol.format.GeoJSON().readFeatures(
serviceResult.result.features
);
let selectFeatureSource = new ol.source.Vector();
selectFeatureSource.addFeatures(geojson);
let vectorQuery = new ol.layer.Vector({
source: selectFeatureSource,
});
let features = vectorQuery.getSource().getFeatures();
for (var i = 0; i < features.length; i++) {
let polygon = features[i].getGeometry();
if (polygon.intersectsCoordinate(coodinate)) {
var lon = coodinate[0];
var lat = coodinate[1];
var view = map.getView();
var zoom = map.getView().getZoom();
view.animate({
center: [lon, lat],
duration: 1000,
});
if (zoom >= 13) {
QueryData(
e,
'CJQY3702112019WGS84@huangdaoqu_bianjie',
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/CJQY3702112019WGS84%40huangdaoqu_bianjie',
'村'
);
} else {
QueryData(
e,
'XJQY3702112019WGS84@huangdaoqu_bianjie',
'http://36.134.44.75:8090/iserver/services/map-huangdaoqu_bianjie/rest/maps/XJQY3702112019WGS84%40huangdaoqu_bianjie',
'镇'
);
}
}
}
}
);
}
});
@ -333,8 +405,73 @@ function initmap() {
});
// 开始监听父元素大小变化
resizeObserver.observe(parentElement);
SQLSearch(code);
}
//权限地图
function SQLSearch(name) {
let names = '';
let url = '';
let setName = '';
let setOf = '';
let quyu = '';
url = 'http://36.134.44.75:8090/iserver/services/data-huangdaoqu_bianjie/rest/data';
names = name;
setName = 'XJQY3702112019WGS84';
setOf = 'huangdaoqu_bianjie';
quyu = 'XJQYMC';
//SQL查询（模糊查询）
// var url = 'http://192.168.0.113:8090/iserver/services/data-liangquhuadingWGS84/rest/data';
var sqlParam = new ol.supermap.GetFeaturesBySQLParameters({
queryParameter: {
name: `${setName}@${setOf}`,
attributeFilter: `${quyu} like '%${names}%'`,
},
datasetNames: [`${setOf}:${setName}`],
});
new ol.supermap.FeatureService(url).getFeaturesBySQL(sqlParam, function (serviceResult) {
if (serviceResult.result.featureCount != 0) {
var layerzhezhao = map
.getLayers()
.getArray()
.find(layer => layer.get('id') === 'zhezhao');
map.removeLayer(layerzhezhao);
var layergaoliang = map
.getLayers()
.getArray()
.find(layer => layer.get('id') === 'dianjigaoliang');
map.removeLayer(layergaoliang);
var geojson = new ol.format.GeoJSON().readFeatures(serviceResult.result.features);
addConver(
serviceResult.result.features.features[0].geometry.coordinates,
'qu',
'rgba( 105, 105, 105, 1)',
9999
);
var selectFeatureSource = new ol.source.Vector();
selectFeatureSource.addFeatures(geojson);
//设置图层高亮样式
const style = new ol.style.Style({
// fill: new ol.style.Fill({
// color: 'rgba(0, 255, 0, 0.1)',
// }),
stroke: new ol.style.Stroke({
color: 'rgba(85, 255, 255, 1.0)',
// lineDash: [10, 10],
width: 2,
}),
});
var vectorQuery = new ol.layer.Vector({
id: 'dianjigaoliang',
source: selectFeatureSource,
});
vectorQuery.setStyle(style);
map.addLayer(vectorQuery);
map.getView().fit(selectFeatureSource.getExtent());
}
});
}
const cun = () => {
layers = new ol.layer.Tile({
source: new ol.source.TileSuperMapRest({
@ -398,7 +535,7 @@ function QueryData(e, name, url, item) {
let code = data.result.recordsets[0].features.features[0].properties.XJQYDM;
value.value = code;
let arr = [];
getAbandon({ divisions: '370211', yearMonth: oldDatas.value.name }).then(res => {
getAbandon({ yearMonth: oldDatas.value.name }).then(res => {
res.data.forEach(item => {
console.log(item.subregionCode, code);
if (item.subregionCode == code) {
@ -415,7 +552,7 @@ function QueryData(e, name, url, item) {
) {
let code = data.result.recordsets[0].features.features[0].properties.CJQYDM;
let arr = [];
getNonFoodHuoChun({ divisions: code, yearMonth: oldDatas.value.name }).then(res => {
getNonFoodHuoChun({ divisions: code, yearMonth: oldDatas.value.name }).then(res => {
res.data.forEach(item => {
if (item.subregionCode == code) {
name = item.subregionName;
@ -472,7 +609,7 @@ function QueryData(e, name, url, item) {
.find(layer => layer.get('id') === 'zhezhao');
map.removeLayer(layerzhezhao);
erase(newDataZh);
value.value = '370211';
value.value = window.localStorage.getItem('divisions');
layergaoliang = map
.getLayers()
.getArray()
@ -502,18 +639,19 @@ 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(),'huandao');
// addConver(ft.getGeometry().getCoordinates(), 'huandao');
});
}
//添加遮罩
function addConver(data,name) {
function addConver(data, name, color, index) {
let source = new ol.source.Vector();
var converLayer = new ol.layer.Vector({
id: name ? name : 'zhezhao',
source: source,
zIndex: index ? index : 50,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba( 105, 105, 105, 0.9)',
color: color ? color : 'rgba( 105, 105, 105, 0.9)',
}),
}),
});
@ -617,11 +755,10 @@ const getLhdyears = () => {
};
//镇
const getAbandons = (time) => {
Township.arr = [];
townArr.value = [];
getAbandon({yearMonth:time}).then(res => {
console.log(res.data);
const getAbandons = time => {
getAbandon({ yearMonth: time }).then(res => {
Township.arr = [];
townArr.value = [];
res.data.forEach(item => {
if (item.wasteland > 0) {
Township.arr.push(item);
@ -646,9 +783,9 @@ const getAbandons = (time) => {
});
};
//村
const getAbandonChuns = (city,time) => {
townArr.value = [];
getAbandonChun({ divisions: city ,yearMonth:time}).then(res => {
const getAbandonChuns = (city, time) => {
getAbandonChun({ divisions: city, yearMonth: time }).then(res => {
townArr.value = [];
res.data.forEach(item => {
if (item.wasteland > 0) {
townArr.value.push(item);
@ -659,8 +796,8 @@ const getAbandonChuns = (city,time) => {
});
};
//占比
const getCityAndCountZbs = city => {
getCityAndCountZb({ divisions: city }).then(res => {
const getCityAndCountZbs = (city, time) => {
getCityAndCountZb({ divisions: city, yearMonth: time }).then(res => {
console.log(res.data);
});
};
@ -668,7 +805,7 @@ const getCityAndCountZbs = city => {
const selectTab = () => {
if (value.value == '370211') {
//全部
getAbandons();
getAbandons(oldDatas.value.name);
} else if (value.value) {
getAbandonChuns(value.value, oldDatas.value.name);
}
@ -733,7 +870,6 @@ function ASdivision() {
nameList.push(item.subregionName);
dataList.push(Number(item.wasteland).toFixed(2));
});
console.log(dataList);
let ends = (3 / townArr.value.length) * 100;
var option = {
tooltip: {
@ -812,7 +948,7 @@ function ASdivision() {
textStyle: {
padding: [8, 0, 0, 0],
fontSize: 14,
color: 'rgba(21, 222, 255, 0.8)',
color: '#fff',
},
},
},
@ -840,7 +976,7 @@ function ASdivision() {
axisLabel: {
show: true,
textStyle: {
color: 'rgba(24, 255, 255, 0.8)',
color: '#fff',
fontSize: 14,
},
},
@ -883,6 +1019,12 @@ function ASdivision() {
ASdivisionDivIntance.on('click', param => ChartClickRB(param));
// option && ASdivisionDivIntance.setOption(option, true);
useEcharts(ASdivisionDivIntance, option);
let erd = elementResizeDetectorMaker();
erd.listenTo(ASdivisionDiv.value, () => {
nextTick(() => {
ASdivisionDivIntance.resize();
});
});
}
function typesof() {
const typesofDivIntance = echarts.init(typesofDiv.value);
@ -1021,6 +1163,12 @@ function typesof() {
};
useEcharts(typesofDivIntance, option);
let erd = elementResizeDetectorMaker();
erd.listenTo(typesofDiv.value, () => {
nextTick(() => {
typesofDivIntance.resize();
});
});
}
// 右下角图表点击事件
function ChartClickRB(param) {
@ -1303,8 +1451,12 @@ $height: calc(100vh - 100px);
}
}
// :deep(.el-checkbox__label) {
// color: #fff;
// }
:deep(.el-checkbox__label) {
color: black;
display: flex;
align-items: center;
}
}
@ -1377,11 +1529,12 @@ $height: calc(100vh - 100px);
text-decoration: none;
position: absolute;
top: 11px;
right: 8px;
color: rgba(47, 214, 214, 1) !important;
right: 15px;
color: #fff !important;
}
.ol-popup-closer:after {
content: '✖';
font-size: 18px;
}
#popup {
.pophead {