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-23 14:57:17 +08:00
parent d20a1e0ca1
commit 49bcfb120c
6 changed files with 240 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
package-lock.json generated
View File

@ -17,6 +17,7 @@
"element-plus": "2.2.21", "element-plus": "2.2.21",
"file-saver": "2.0.5", "file-saver": "2.0.5",
"fuse.js": "6.6.2", "fuse.js": "6.6.2",
"highcharts": "^10.3.3",
"js-cookie": "3.0.1", "js-cookie": "3.0.1",
"jsencrypt": "3.3.1", "jsencrypt": "3.3.1",
"lib-flexible": "^0.3.2", "lib-flexible": "^0.3.2",
@ -2068,6 +2069,11 @@
"he": "bin/he" "he": "bin/he"
} }
}, },
"node_modules/highcharts": {
"version": "10.3.3",
"resolved": "https://registry.npmjs.org/highcharts/-/highcharts-10.3.3.tgz",
"integrity": "sha512-r7wgUPQI9tr3jFDn3XT36qsNwEIZYcfgz4mkKEA6E4nn5p86y+u1EZjazIG4TRkl5/gmGRtkBUiZW81g029RIw=="
},
"node_modules/htmlparser2": { "node_modules/htmlparser2": {
"version": "3.10.1", "version": "3.10.1",
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz", "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
@ -6114,6 +6120,11 @@
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
"dev": true "dev": true
}, },
"highcharts": {
"version": "10.3.3",
"resolved": "https://registry.npmjs.org/highcharts/-/highcharts-10.3.3.tgz",
"integrity": "sha512-r7wgUPQI9tr3jFDn3XT36qsNwEIZYcfgz4mkKEA6E4nn5p86y+u1EZjazIG4TRkl5/gmGRtkBUiZW81g029RIw=="
},
"htmlparser2": { "htmlparser2": {
"version": "3.10.1", "version": "3.10.1",
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz", "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",

1
package.json
View File

@ -23,6 +23,7 @@
"element-plus": "2.2.21", "element-plus": "2.2.21",
"file-saver": "2.0.5", "file-saver": "2.0.5",
"fuse.js": "6.6.2", "fuse.js": "6.6.2",
"highcharts": "^10.3.3",
"js-cookie": "3.0.1", "js-cookie": "3.0.1",
"jsencrypt": "3.3.1", "jsencrypt": "3.3.1",
"lib-flexible": "^0.3.2", "lib-flexible": "^0.3.2",

2
public/config.js
View File

@ -1,5 +1,5 @@
window.serverAPI = { window.serverAPI = {
baseUrl: "http://118.24.27.47:6802", baseUrl: "http://192.168.2.96:8080",
// geoserver // geoserver
geoserverUrl: "http://192.168.2.20:9080/geoserver", geoserverUrl: "http://192.168.2.20:9080/geoserver",

4
src/main.js
View File

@ -12,6 +12,10 @@ import store from './store'
import router from './router' import router from './router'
import directive from './directive' // directive import directive from './directive' // directive
import highcharts from 'highcharts'
import highcharts3d from 'highcharts/highcharts-3d'
highcharts3d(highcharts)
// 注册指令 // 注册指令
import plugins from './plugins' // plugins import plugins from './plugins' // plugins

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

@ -385,7 +385,6 @@ function initMap() {
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455), destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
duration: 2, duration: 2,
}); });
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas); var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function (movement) { handler.setInputAction(function (movement) {
var ray = viewer.camera.getPickRay(movement.position); var ray = viewer.camera.getPickRay(movement.position);
@ -397,16 +396,16 @@ function initMap() {
let alti = viewer.camera.positionCartographic.height; let alti = viewer.camera.positionCartographic.height;
let level = getLevel(alti); let level = getLevel(alti);
const layers = viewer.imageryLayers._layers; const layers = viewer.imageryLayers._layers;
console.log(layers); let providerPoint =null
const providerPoint = layers[layers.length - 1]; layers.forEach(item => {
if (item._imageryProvider._layers == "shuzisannong:huangdaoqu_town") {
providerPoint=item
}
});
// 拿取最后一个图层 // 拿取最后一个图层
let provider = providerPoint._imageryProvider; let provider = providerPoint._imageryProvider;
if ( console.log(providerPoint);
provider && if (provider && provider.ready && provider._layers && providerPoint.show === true) {
provider.ready &&
provider._layers &&
providerPoint.show === true
) {
xy = provider.tilingScheme.positionToTileXY(cartographic, level, xy); xy = provider.tilingScheme.positionToTileXY(cartographic, level, xy);
let promise = provider.pickFeatures( let promise = provider.pickFeatures(
xy.x, xy.x,
@ -426,8 +425,6 @@ function initMap() {
} }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK); }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
//加载黄岛区村级地图服务 //加载黄岛区村级地图服务
// Cesium.GeoJsonDataSource.load( // Cesium.GeoJsonDataSource.load(
// 'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_village&maxFeatures=1180&outputFormat=application%2Fjson', // 'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_village&maxFeatures=1180&outputFormat=application%2Fjson',
@ -602,7 +599,6 @@ function getLevel(height) {
} }
} }
/*------------------接口--------------------*/ /*------------------接口--------------------*/
const getArea = () => { const getArea = () => {
getarea({ time: '2023-04-19', subregion: '0', parent: '黄岛区' }).then(res => { getarea({ time: '2023-04-19', subregion: '0', parent: '黄岛区' }).then(res => {

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

@ -208,6 +208,7 @@ var data = {
wheat: [null, 500, null, 500, null, 500, null, null], wheat: [null, 500, null, 500, null, 500, null, null],
Blueberries: [null, null, null, null, null, null, null, 500], Blueberries: [null, null, null, null, null, null, null, 500],
}; };
let classData = [200, 85, 112, 275, 305];
const options = [ const options = [
{ {
value: 'Option1', value: 'Option1',
@ -319,6 +320,46 @@ function initMap() {
duration: 2, duration: 2,
}); });
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function (movement) {
var ray = viewer.camera.getPickRay(movement.position);
var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
if (cartesian) {
let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
if (cartographic) {
let xy = new Cesium.Cartesian2();
let alti = viewer.camera.positionCartographic.height;
let level = getLevel(alti);
const layers = viewer.imageryLayers._layers;
let providerPoint = null;
layers.forEach(item => {
if (item._imageryProvider._layers == 'shuzisannong:huangdaoqu_town') {
providerPoint = item;
}
});
// 拿取最后一个图层
let provider = providerPoint._imageryProvider;
console.log(provider);
if (provider && provider.ready && provider._layers && providerPoint.show === true) {
xy = provider.tilingScheme.positionToTileXY(cartographic, level, xy);
let promise = provider.pickFeatures(
xy.x,
xy.y,
level,
cartographic.longitude,
cartographic.latitude
);
if (promise) {
promise.then(data => {
if (data.length > 0) {
}
});
}
}
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
addwms(); addwms();
//加载黄岛区村级地图服务 //加载黄岛区村级地图服务
@ -429,6 +470,48 @@ function initMap() {
const checkList = ref(Object.keys(dic)); const checkList = ref(Object.keys(dic));
function getLevel(height) {
if (height > 48000000) {
return 0;
} else if (height > 24000000) {
return 1;
} else if (height > 12000000) {
return 2;
} else if (height > 6000000) {
return 3;
} else if (height > 3000000) {
return 4;
} else if (height > 1500000) {
return 5;
} else if (height > 750000) {
return 6;
} else if (height > 375000) {
return 7;
} else if (height > 187500) {
return 8;
} else if (height > 93750) {
return 9;
} else if (height > 46875) {
return 10;
} else if (height > 23437.5) {
return 11;
} else if (height > 11718.75) {
return 12;
} else if (height > 5859.38) {
return 13;
} else if (height > 2929.69) {
return 14;
} else if (height > 1464.84) {
return 15;
} else if (height > 732.42) {
return 16;
} else if (height > 366.21) {
return 17;
} else {
return 18;
}
}
function change(e) { function change(e) {
console.log('e:', e); console.log('e:', e);
console.log('checkList:', checkList.value); console.log('checkList:', checkList.value);
@ -465,12 +548,12 @@ function addwms() {
} }
//接口 //接口
const getArea = () => { const getArea = (item, index) => {
getarea({ time: '2023-04-19', subregion: '0', parent: '黄岛区' }).then(response => { return getarea({ time: '2023-04-19', subregion: index, parent: item }).then(response => {
console.log(response); console.log(response.data);
return response.data;
}); });
}; };
//镇 //镇
const getTownships = () => { const getTownships = () => {
getTownship().then(res => { getTownship().then(res => {
@ -501,9 +584,10 @@ const getvillages = () => {
//面积 //面积
const getaArea = () => { const getaArea = () => {
let arr = []; let arr = [];
let a = {};
getareas().then(res => { getareas().then(res => {
Township.crr = res.features; Township.crr = res.features;
data.title.forEach((item, index) => { data.title.forEach((item, indexs) => {
let town = res.features.map(i => { let town = res.features.map(i => {
if (item === i.properties.town) { if (item === i.properties.town) {
return i.properties; return i.properties;
@ -512,25 +596,27 @@ const getaArea = () => {
Object.keys(dd).forEach(it => { Object.keys(dd).forEach(it => {
const index = town.findIndex(a => a && a.crop === it); const index = town.findIndex(a => a && a.crop === it);
if (index > -1) { if (index > -1) {
dd[it].push(town[index].Shape_Area); dd[it].push(1);
} else { } else {
dd[it].push(null); dd[it].push(null);
} }
}); });
}); });
console.log(dd);
ASdivision(); ASdivision();
}); });
}; };
const selectTab = () => { const selectTab = () => {
console.log(value.value); classData = [116, 75, 96, 168, 245];
areachar();
if (value.value == '370211') { if (value.value == '370211') {
getTownships(); getTownships();
} }
let arr = [...Township.arr]; let arr = [...Township.arr];
arr.forEach(item => { arr.forEach(item => {
if (item.properties.XZDM == value.value) { if (item.properties.XZDM == value.value) {
console.log(item.properties);
getArea(item.properties.XZMC, '2');
viewer.camera.flyTo({ viewer.camera.flyTo({
destination: Cesium.Rectangle.fromDegrees( destination: Cesium.Rectangle.fromDegrees(
item.bbox[0], item.bbox[0],
@ -674,7 +760,7 @@ function areachar() {
}, },
series: [ series: [
{ {
data: [200, 85, 112, 275, 305], data: classData,
type: 'bar', type: 'bar',
barMaxWidth: 'auto', barMaxWidth: 'auto',
barWidth: 30, barWidth: 30,
@ -690,7 +776,14 @@ function areachar() {
offset: 0, offset: 0,
color: ' rgba(0, 208, 255, 0.1)', color: ' rgba(0, 208, 255, 0.1)',
}, },
{
offset: 0.5,
color: '#86eef1', // 左边的右边 颜色
},
{
offset: 0.5,
color: '#5ad6d9', // 右边的左边 颜色
},
{ {
offset: 1, offset: 1,
color: 'rgba(0, 208, 255, 0.9) ', color: 'rgba(0, 208, 255, 0.9) ',
@ -714,7 +807,7 @@ function areachar() {
symbolSize: [30, 15], symbolSize: [30, 15],
}, },
{ {
data: [200, 85, 112, 275, 305], data: classData,
type: 'pictorialBar', type: 'pictorialBar',
barMaxWidth: '20', barMaxWidth: '20',
@ -1025,7 +1118,7 @@ function ASdivision() {
dataZoom: [ dataZoom: [
{ {
type: 'slider', type: 'slider',
show: true, show: false,
zoomLock: true, //禁止拉伸 zoomLock: true, //禁止拉伸
width: 8, width: 8,
yAxisIndex: [0], yAxisIndex: [0],
@ -1145,7 +1238,22 @@ function ASdivision() {
}, },
// 图形样式 // 图形样式
itemStyle: { itemStyle: {
color: '#fdad3c', barBorderRadius: [0, 0, 0, 0],
barBorderRadius: [0, 0, 0, 0], //
borderWidth: 1, // 设置边框宽度
borderColor: ' rgba(222, 194, 7, 0.8)', // 设置边框颜色
color: {
colorStops: [
{
offset: 0,
color: 'rgba(222, 194, 7, 0.9)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(222, 194, 7, 0.25)', // 100% 处的颜色
},
],
},
}, },
data: dd.玉米, // 系列中的数据内容数组 data: dd.玉米, // 系列中的数据内容数组
}, },
@ -1168,7 +1276,21 @@ function ASdivision() {
}, },
// 图形样式 // 图形样式
itemStyle: { itemStyle: {
color: 'rgba(156, 220, 130, 0.8)', barBorderRadius: [0, 0, 0, 0], //
borderWidth: 1, // 设置边框宽度
borderColor: 'rgba(255, 161, 59, 0.8)', // 设置边框颜色
color: {
colorStops: [
{
offset: 0,
color: 'rgba(255, 161, 59, 0.9)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(255, 161, 59, 0.3)', // 100% 处的颜色
},
],
},
}, },
data: dd.大豆, // 系列中的数据内容数组 data: dd.大豆, // 系列中的数据内容数组
}, },
@ -1191,7 +1313,22 @@ function ASdivision() {
}, },
// 图形样式 // 图形样式
itemStyle: { itemStyle: {
color: 'rgba(212, 236, 89, 0.8)', barBorderRadius: [0, 0, 0, 0],
barBorderRadius: [0, 0, 0, 0], //
borderWidth: 1, // 设置边框宽度
borderColor: 'rgba(236, 80, 129, 0.8)', // 设置边框颜色
color: {
colorStops: [
{
offset: 0,
color: 'rgba(236, 80, 129, 0.9)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(236, 80, 129, 0.25)', // 100% 处的颜色
},
],
},
}, },
data: dd.花生, // 系列中的数据内容数组 data: dd.花生, // 系列中的数据内容数组
}, },
@ -1214,7 +1351,22 @@ function ASdivision() {
}, },
// 图形样式 // 图形样式
itemStyle: { itemStyle: {
color: 'rgba(102, 142, 214, 0.8)', barBorderRadius: [0, 0, 0, 0],
barBorderRadius: [0, 0, 0, 0], //
borderWidth: 1, // 设置边框宽度
borderColor: 'rgba(30, 200, 23, 0.8)', // 设置边框颜色
color: {
colorStops: [
{
offset: 0,
color: 'rgba(30, 200, 23, 0.9)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(30, 200, 23, 0.25)', // 100% 处的颜色
},
],
},
}, },
data: dd.小麦, // 系列中的数据内容数组 data: dd.小麦, // 系列中的数据内容数组
}, },
@ -1237,7 +1389,22 @@ function ASdivision() {
}, },
// 图形样式 // 图形样式
itemStyle: { itemStyle: {
color: 'rgba(50, 211, 235, 0.8)', barBorderRadius: [0, 0, 0, 0],
barBorderRadius: [0, 0, 0, 0], //
borderWidth: 1, // 设置边框宽度
borderColor: 'rgba(14, 223, 255, 0.8)', // 设置边框颜色
color: {
colorStops: [
{
offset: 0,
color: 'rgba(14, 223, 255, 0.9)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(14, 223, 255, 0.25) ', // 100% 处的颜色
},
],
},
}, },
data: dd.蓝莓, // 系列中的数据内容数组 data: dd.蓝莓, // 系列中的数据内容数组
}, },
@ -1383,6 +1550,9 @@ $height: calc(100vh - 100px);
} }
} }
} }
:deep(.el-select-dropdown) {
background: red !important;
}
.legend { .legend {
position: absolute; position: absolute;