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-06-08 09:27:01 +08:00
parent 6c488cf7d6 8d96ed92fb
commit c995f921f0
254 changed files with 1549 additions and 455 deletions
Download Patch File Download Diff File Expand all files Collapse all files

316
src/views/crops/classify/Classify.vue
View File

@ -109,7 +109,6 @@
popper-class="select_city"
@change="selectTab(item)"
v-model="value"
clearable
placeholder="全部"
>
<el-option
@ -368,10 +367,12 @@ import {
gethighStandard,
gettheTime,
getlistMode,
getgarrison,
} from '@/api/crops/classify.js';
import axios from 'axios';
import * as xlsx from 'xlsx'; // Vue3 版本
import { ElMessage } from 'element-plus';
import townJson from './town.json';
let viewer = ref(null);
const areaDiv = ref(null);
@ -659,7 +660,6 @@ const onSubmit = () => {
(currentPage.value - 1) * pageSize.value,
(currentPage.value - 1) * pageSize.value + pageSize.value
);
console.log(tableNewData);
const statInfo = chartModeDiv.value; // 获取图表元素
statInfo.style.width = window.innerWidth - 100 + 'px'; //初始化echarts图表宽度
statInfo.style.height = window.innerHeight - 100 + 'px';
@ -769,7 +769,7 @@ const Deta4 = item => {
});
});
exportExcel(brr, `${region}作物长势等级统计-行政区划`, 'Sheet1');
exportExcel(brr, `${region}作物类型统计-行政区划`, 'Sheet1');
});
} else {
getvillage({ divisions: value.value, whetherToDownload: false }).then(res => {
@ -797,8 +797,7 @@ const Deta4 = item => {
}
});
});
console.log(brr);
exportExcel(brr, `${region}作物长势等级统计-行政区划`, 'Sheet1');
exportExcel(brr, `${region}作物类型统计-行政区划`, 'Sheet1');
});
}
};
@ -1164,21 +1163,26 @@ function initMap() {
// 图层点击事件
layerClick();
// 监听相机移动，实现根据缩放级别村级矢量的显隐
// cameraMove()
// 图层遮罩
// maskLayer()
// // 添加镇级矢量
// addWms('shuzisannong:huangdaoqu_town', 'shuzisannong:huangdaoqu_town');
let cityDS = Cesium.GeoJsonDataSource.load(
`${serverAPI.geoserverUrl}/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson`,
{
fill: Cesium.Color.YELLOW.withAlpha(0.01),
strokeWidth: 3,
markerSymbol: '?',
clampToGround: true,
outline: true,
outlineColor: Cesium.Color.BLACK,
}
);
viewer.dataSources.add(cityDS);
// let cityDS = Cesium.GeoJsonDataSource.load(
// `${serverAPI.geoserverUrl}/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson`,
// {
// fill: Cesium.Color.YELLOW.withAlpha(0.01),
// strokeWidth: 3,
// markerSymbol: '?',
// clampToGround: true,
// outline: true,
// outlineColor: Cesium.Color.BLACK,
// }
// );
// viewer.dataSources.add(cityDS);
zoomInCenter(viewer);
}
@ -1227,7 +1231,6 @@ function getLevel(height) {
}
function change(e, a) {
// console.log('e:', e, a);
// removeWms('crop');
// addwms();
}
@ -1239,8 +1242,8 @@ function zoomInCenter(viewer) {
if (!isNaN(Amount)) {
viewer.scene.camera.zoomIn(Amount);
var ray = viewer.camera.getPickRay(movement.position);
var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
// var ray = viewer.camera.getPickRay(movement.position);
// var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
}
}, Cesium.ScreenSpaceEventType.WHEEL);
}
@ -1296,7 +1299,6 @@ function addWms(layers, customName, bottom) {
map.customName = customName; //自己定义各种属性
let dd = viewer.imageryLayers.addImageryProvider(map); //添加图层
// if (customName.indexOf('gbznt') > -1) {
// console.log('dididididi');
// // viewer.imageryLayers.lower(dd);//将图层下移一层
// viewer.imageryLayers.lowerToBottom(dd); //将图层移到最底层
// viewer.imageryLayers.raise(dd); //将图层上移一层
@ -1306,10 +1308,122 @@ function addWms(layers, customName, bottom) {
viewer.imageryLayers.raise(dd); //将图层上移一层
}
}
// 根据根据级别显示村级矢量
function cameraMove() {
if (viewer) {
viewer.scene.camera.moveEnd.addEventListener(function () {
// 获取级别
let alti = viewer.camera.positionCartographic.height;
if (alti && alti < 20000) {
// 根据中心点经纬度添加，前提是添加过镇的实体
// let centerResult = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(viewer.canvas.clientWidth / 2, viewer.canvas.clientHeight / 2))
// if (Cesium.defined(centerResult)) {
// let curPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(centerResult)
// let pick = viewer.scene.pick(curPosition)
// if (pick) {
// let info = pick.id.properties.XZDM || null
// removeWms(['village'], false)
// if (info) {
// addvillage(
// `XZDM=${info._value}`,
// 'village'
// );
// }
// }
// }
// 添加全部
addWms('shuzisannong:huangdaoqu_village', 'village');
} else {
removeWms(['village'], false);
}
});
}
}
let previousPickedEntity = 1;
// 图层遮罩鼠标移动高亮
function maskLayer() {
// 添加矢量遮罩
if (viewer) {
// let url = `${serverAPI.geoserverUrl}/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson`
let url = townJson;
Cesium.GeoJsonDataSource.load(url, {
stroke: Cesium.Color.fromCssColorString('rgba(22, 69, 153, 0)'), //轮廓颜色
fill: Cesium.Color.fromCssColorString('rgba(22, 69, 153, 0.01)'), //内部颜色
// strokeWidth: 3, //轮廓宽度,无效
// clampToGround: true,//是否贴地
}).then(function (dataSource) {
dataSource.name = 'geojsonDataSource'; //自定义属性，方便以后操作
viewer.dataSources.add(dataSource); //添加
// let entities = dataSource.entities.values;
// for (var i = 0; i < entities.length; i++) {
// let entity = entities[i];
// entity.polygon.material = Cesium.Color.fromCssColorString("rgba(22, 69, 153, 0.8)")
// }
});
// 监听鼠标移动
let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(async function (movement) {
const earthPosition = viewer.camera.pickEllipsoid(
movement.position,
viewer.scene.globe.ellipsoid
); //当前世界坐标笛卡尔积
if (Cesium.defined(earthPosition)) {
let pickedFeature = viewer.scene.pick(movement.position); //返回最上层模型属性
if (pickedFeature && typeof pickedFeature != 'undefined') {
// 取消先前要素高亮
if (previousPickedEntity && Cesium.defined(previousPickedEntity)) {
if (previousPickedEntity === 1) {
// 第一次添加，全部加暗
//layerName是加载时给geojson添加的属性
const dataSources = viewer.dataSources._dataSources;
for (let k = dataSources.length - 1; k >= 0; k--) {
// if (dataSources[k].name.indexOf('geojsonDataSource') > -1) {
if (
dataSources[k].name &&
dataSources[k].name === 'geojsonDataSource'
) {
// this.viewer.dataSources.remove(dataSources[k])
let entities = dataSources[k].entities.values;
for (var i = 0; i < entities.length; i++) {
let entity = entities[i];
entity.polygon.material =
Cesium.Color.fromCssColorString(
'rgba(22, 69, 153, 0.4)'
);
}
}
}
} else {
previousPickedEntity.polygon.material =
Cesium.Color.fromCssColorString('rgba(22, 69, 153, 0.4)');
previousPickedEntity = null;
}
}
// 高亮当前选中要素
if (
Cesium.defined(pickedFeature.id) &&
Cesium.defined(pickedFeature.id.polygon)
) {
pickedFeature.id.polygon.material =
Cesium.Color.fromCssColorString('rgba(22, 69, 153, 0)');
previousPickedEntity = pickedFeature.id;
}
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
}
// 图层点击事件
let XZDM = '';
function layerClick() {
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(async function (movement) {
var ray = viewer.camera.getPickRay(movement.position);
var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
@ -1376,6 +1490,7 @@ function layerClick() {
// 移除以前的
removeWms(['village_CQL']);
// 添加新的
// 更改为根据级别添加村级矢量
addvillage(
`XZDM=${newData.properties.XZDM}`,
'village_CQL'
@ -1401,6 +1516,7 @@ function layerClick() {
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
// 种植结构
async function zuowuClick(layers, cartographic, level, xy, movement) {
let newData = [];
@ -1595,8 +1711,9 @@ function showOverlayChart(position) {
pop.style.left = position.x + 10 + 'px';
pop.style.zIndex = 99;
}
//列表模式模式切换
const SwitchMode = () => {
function SwitchMode() {
SwitchFlag.value = !SwitchFlag.value;
const statInfo = chartModeDiv.value; // 获取图表元素
statInfo.style.width = window.innerWidth - 100 + 'px'; //初始化echarts图表宽度
@ -1609,7 +1726,7 @@ const SwitchMode = () => {
myChart.resize();
});
chartModes();
};
}
const formLandRef = ref([]);
// 获取高标准农田
function getFarmland() {
@ -1777,22 +1894,24 @@ const getaArea = () => {
let arr = [];
let a = {};
getareas().then(res => {
Township.crr = res.features;
data.title.forEach((item, indexs) => {
let town = res.features.map(i => {
if (item === i.properties.town) {
return i.properties;
}
if (res.features) {
Township.crr = res.features;
data.title.forEach((item, indexs) => {
let town = res.features.map(i => {
if (item === i.properties.town) {
return i.properties;
}
});
Object.keys(dd).forEach(it => {
const index = town.findIndex(a => a && a.crop === it);
if (index > -1) {
dd[it].push(1);
} else {
dd[it].push(null);
}
});
});
Object.keys(dd).forEach(it => {
const index = town.findIndex(a => a && a.crop === it);
if (index > -1) {
dd[it].push(1);
} else {
dd[it].push(null);
}
});
});
}
ASdivision();
// selectTab();
});
@ -1840,8 +1959,11 @@ const getcropTypeStatisticss = city => {
});
};
//高标准农田//highStandarditem
let highStandardArr = ref([]);
const gethighStandards = () => {
gethighStandard().then(res => {
highStandardArr.value = res.data;
console.log(res.data);
highStandard.forEach((item, indexs) => {
let town = res.data.map(i => {
if (item === i.region) {
@ -1849,7 +1971,7 @@ const gethighStandards = () => {
}
});
Object.keys(dd).forEach(it => {
const index = town.findIndex(a => a && a.name === it);
const index = town.findIndex(a => a && a.name === it && Number(a.area) > 0);
if (index > -1) {
highStandarditem[it].push(100);
} else {
@ -1871,14 +1993,36 @@ const selectTab = () => {
XZDM = null;
deleteEntityByName('townLine');
removeWms(['village_CQL']);
viewer.camera.flyTo({
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
duration: 2,
});
return;
}
getvillages(value.value);
areachar();
let arr = [...Township.arr];
getgarrison().then(res => {
res.features.forEach(item => {
if (item.properties.XZDM == value.value) {
deleteEntityByName('townLine');
addBoundaryHandle(item.geometry.coordinates, 'townLine', 'yellow');
viewer.camera.flyTo({
destination: Cesium.Rectangle.fromDegrees(
item.bbox[0],
item.bbox[1],
item.bbox[2],
item.bbox[3]
),
duration: 0,
});
}
});
});
// arr.forEach(item => {
// console.log(item)
// if (item.properties.XZDM == value.value) {
// getArea(item.properties.XZMC, '2');
// // getArea(item.properties.XZMC, '2');
// viewer.camera.flyTo({
// destination: Cesium.Rectangle.fromDegrees(
// item.bbox[0],
@ -2438,14 +2582,35 @@ function farmland() {
top: '10%',
containLabel: true,
},
legend: {
show: true,
top: '10',
left: 'center',
textStyle: { color: 'rgba(255,255,255,.9)' },
itemWidth: 20,
itemHeight: 12.5,
icon: 'stack',
// legend: {
// show: true,
// top: '10',
// left: 'center',
// textStyle: { color: 'rgba(255,255,255,.9)' },
// itemWidth: 20,
// itemHeight: 12.5,
// icon: 'stack',
// },
tooltip: {
formatter: function (params) {
// 自定义悬浮文字的格式，params.value 为当前柱状图的数值
console.log(params);
let a = 0;
highStandardArr.value.forEach(item => {
console.log(item);
if (item.name == params.seriesName && item.region == params.name) {
a = item.area;
}
});
return (
params.seriesName +
'<span style="font-size: 14px; color: #f00;">' +
a +
'</span>' +
'亩'
);
},
},
xAxis: {
@ -2500,11 +2665,11 @@ function farmland() {
color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
{
offset: 1,
color: 'rgba(33, 187, 251, 0.9)',
color: 'rgba(255, 141, 26, 1)',
},
{
offset: 0,
color: 'rgba(33, 187, 251, 0.05)',
color: 'rgba(255, 141, 26, 1)',
},
]),
},
@ -2522,33 +2687,33 @@ function farmland() {
color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
{
offset: 1,
color: 'rgba(143, 186, 243, 0.9)',
color: 'rgba(255, 201, 148, 1)',
},
{
offset: 0,
color: 'rgba(143, 186, 243, 0.05)',
color: 'rgba(255, 201, 148, 1)',
},
]),
},
},
},
{
name: '地瓜',
name: '茶叶',
type: 'bar',
barWidth: 12,
stack: 'stack',
data: highStandarditem.地瓜,
data: highStandarditem.茶叶,
itemStyle: {
normal: {
barBorderRadius: 0,
color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
{
offset: 1,
color: 'rgba(255, 225, 104, 1)',
color: 'rgba(26, 255, 140, 1)',
},
{
offset: 0,
color: 'rgba(255, 225, 104, 0.05)',
color: 'rgba(26, 255, 140, 1)',
},
]),
},
@ -2566,11 +2731,11 @@ function farmland() {
color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
{
offset: 1,
color: 'rgba(4, 247, 227, 0.9)',
color: 'rgba(255, 140, 255, 1)',
},
{
offset: 0,
color: 'rgba(4, 247, 227, 0.25)',
color: 'rgba(255, 140, 255, 1)',
},
]),
},
@ -2585,7 +2750,6 @@ function farmland() {
}
// 图表点击事件
function ChartClick(item) {
console.log('item:', item);
// 移除镇边界
removeWms(['huangdaoqu_town'], true);
removeWms(['shuzisannong:huangdaoqu_town']);
@ -3262,7 +3426,6 @@ function chartModes() {
var tooltip = option.tooltip;
// 提示框自定义内容包括总合及文字
function formatFun(params) {
// console.log('params====>', params)
let tipStr = params[0].axisValueLabel + '</br>'; // 初始化提示框文字默认当前轴名称并换行
let totalNum = 0; // 用于存储当前列总数
// params为当前柱状图数组数量 遍历求和并添加类目label：value
@ -3304,6 +3467,7 @@ $height: calc(100vh - 100px);
.centerBox {
width: 100%;
height: 100%;
.imgrotate {
transform: rotate(180deg);
}
@ -3356,14 +3520,18 @@ $height: calc(100vh - 100px);
}
}
}
.tabulation {
display: none;
padding: 20px;
.tableBox {
padding: 0 10px;
.tableBorder {
border-radius: 8px;
margin-bottom: 10px;
.el-table--fit {
border-radius: 8px;
border: 2px solid rgba(100, 195, 164, 0.8);
@ -3371,39 +3539,49 @@ $height: calc(100vh - 100px);
0px 1px 2px 0px rgba(100, 195, 164, 0.8);
}
}
:deep(
.el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th
) {
color: rgba(0, 0, 0, 1);
}
height: 90%;
:deep(.el-table__inner-wrapper) {
height: 96% !important;
}
.example-pagination-block {
display: flex;
align-items: center;
justify-content: flex-end;
}
:deep(.tabth) {
background-color: rgba(247, 247, 247, 1);
}
}
.chartMode {
width: 100%;
height: 85%;
.chartModeDiv {
width: 100%;
height: 100%;
}
}
.searchDiv {
display: flex;
.dow {
float: right;
margin-right: 10px;
}
.modeDiv {
width: 234px;
height: 26px;
@ -3424,11 +3602,13 @@ $height: calc(100vh - 100px);
border-radius: 8px;
line-height: 26px;
}
.Selected {
background: rgba(100, 195, 164, 1);
border-radius: 8px 0px 0px 8px;
color: rgba(255, 255, 255, 1);
}
.Selecteds {
background: rgba(100, 195, 164, 1);
border-radius: 0px 8px 8px 0px;
@ -3437,6 +3617,7 @@ $height: calc(100vh - 100px);
}
}
}
.leftWra {
position: absolute;
top: 10px;
@ -3446,6 +3627,7 @@ $height: calc(100vh - 100px);
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;
@ -3456,6 +3638,7 @@ $height: calc(100vh - 100px);
font-size: 30px;
color: #ccc;
}
.leftTop {
height: 40%;
max-width: 100%;
@ -3489,6 +3672,7 @@ $height: calc(100vh - 100px);
margin-bottom: 10px;
}
}
.tableDiv {
// background: rgba(255, 255, 255, 0.05);
width: 100%;
@ -3496,24 +3680,30 @@ $height: calc(100vh - 100px);
color: rgba(255, 255, 255, 1);
height: 20%;
overflow: hidden;
::-webkit-scrollbar {
display: none;
}
:deep(.el-table tr) {
background-color: transparent;
}
:deep(.el-table) {
--el-table-border-color: none;
color: rgba(255, 255, 255, 1);
}
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
background-color: revert;
}
div {
width: 100%;
height: 100%;
overflow-y: auto;
}
.Crops {
display: flex;
width: 100%;
@ -3574,6 +3764,7 @@ $height: calc(100vh - 100px);
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;
@ -3584,6 +3775,7 @@ $height: calc(100vh - 100px);
font-size: 30px;
color: #ccc;
}
.rightTop {
width: 100%;
height: 40%;
@ -3753,6 +3945,7 @@ $height: calc(100vh - 100px);
align-items: flex-start;
display: none;
}
#pop {
border-radius: 5px;
position: absolute;
@ -3847,6 +4040,7 @@ $height: calc(100vh - 100px);
background: rgba(41, 255, 255, 0.7) !important;
display: none;
}
.selectCity {
background: #fff;
}