up
This commit is contained in:
@ -178,7 +178,6 @@
|
||||
popper-class="select_city"
|
||||
@change="selectTab(item)"
|
||||
v-model="value"
|
||||
clearable
|
||||
placeholder="全部"
|
||||
>
|
||||
<el-option
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
1
src/views/crops/classify/town.json
Normal file
1
src/views/crops/classify/town.json
Normal file
File diff suppressed because one or more lines are too long
@ -86,8 +86,7 @@
|
||||
<el-select
|
||||
popper-class="select_city"
|
||||
@change="selectTab(item)"
|
||||
v-model="value"
|
||||
clearable
|
||||
v-model="value"
|
||||
placeholder="全部"
|
||||
>
|
||||
<el-option
|
||||
|
||||
@ -98,8 +98,7 @@
|
||||
<el-select
|
||||
popper-class="select_city"
|
||||
@change="selectTab(item)"
|
||||
v-model="value"
|
||||
clearable
|
||||
v-model="value"
|
||||
placeholder="全部"
|
||||
>
|
||||
<el-option
|
||||
@ -1870,10 +1869,10 @@ function farmland() {
|
||||
],
|
||||
};
|
||||
|
||||
farmlandDivIntance.on('click', function (params) {
|
||||
console.log(params.name);
|
||||
});
|
||||
farmlandDivIntance.on('click', param => ChartClick(param));
|
||||
// farmlandDivIntance.on('click', function (params) {
|
||||
// console.log(params.name);
|
||||
// });
|
||||
// farmlandDivIntance.on('click', param => ChartClick(param));
|
||||
option && farmlandDivIntance.setOption(option, { notMerge: true, grid: { bottom: 20 } });
|
||||
useEcharts(farmlandDivIntance, option);
|
||||
}
|
||||
1215
src/views/index.vue
1215
src/views/index.vue
File diff suppressed because it is too large
Load Diff
@ -34,7 +34,7 @@
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
:header-cell-style="{ 'text-align': 'center' }"
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<el-table-column prop="type" label="类型" />
|
||||
<el-table-column prop="yesFlooding" label="面积" />
|
||||
@ -91,7 +91,7 @@
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
:header-cell-style="{ 'text-align': 'center' }"
|
||||
:data="highStandardArr"
|
||||
style="width: 100%"
|
||||
style="width: 100%;font-size: 6px;"
|
||||
>
|
||||
<el-table-column prop="region" label="区域名称" />
|
||||
<el-table-column
|
||||
@ -119,7 +119,6 @@
|
||||
popper-class="select_city"
|
||||
@change="selectTab(item)"
|
||||
v-model="value"
|
||||
clearable
|
||||
placeholder="全部"
|
||||
>
|
||||
<el-option
|
||||
@ -134,7 +133,7 @@
|
||||
:cell-style="{ textAlign: 'center' }"
|
||||
:header-cell-style="{ 'text-align': 'center' }"
|
||||
:data="ZoningData"
|
||||
style="width: 100%"
|
||||
style="width: 100%;font-size: 6px;"
|
||||
>
|
||||
<el-table-column prop="name" label="区域名称" />
|
||||
<el-table-column
|
||||
@ -1156,14 +1155,15 @@ const getproportions = city => {
|
||||
const gethighStandards = () => {
|
||||
gethighStandard().then(res => {
|
||||
console.log(res.data);
|
||||
highStandardArr.value = res.data;
|
||||
res.data.forEach(item => {
|
||||
highStandardArr.value.push({
|
||||
region: item.region,
|
||||
yesFlooding: item.yesFlooding,
|
||||
createdTime: item.createdTime,
|
||||
});
|
||||
});
|
||||
highStandardArr.value = JSON.parse(JSON.stringify(res.data));
|
||||
// res.data.forEach(item => {
|
||||
// highStandardArr.value.push({
|
||||
// region: item.region,
|
||||
// yesFlooding: item.yesFlooding,
|
||||
// createdTime: item.createdTime,
|
||||
// });
|
||||
// });
|
||||
console.log(highStandardArr.value);
|
||||
});
|
||||
};
|
||||
|
||||
@ -2238,6 +2238,9 @@ $height: calc(100vh - 100px);
|
||||
}
|
||||
.searchDiv {
|
||||
display: flex;
|
||||
:deep(.el-input__wrapper){
|
||||
width: 100px;
|
||||
}
|
||||
.dow {
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
|
||||
@ -101,7 +101,6 @@
|
||||
popper-class="select_city"
|
||||
@change="selectTab(item)"
|
||||
v-model="value"
|
||||
clearable
|
||||
placeholder="全部"
|
||||
>
|
||||
<el-option
|
||||
@ -1536,7 +1535,7 @@ const Deta4 = item => {
|
||||
region = item.subregionName == '全部' ? '黄岛区' : item.subregionName;
|
||||
}
|
||||
});
|
||||
getTownship({ divisions: value.value, whetherToDownload: false }).then(res => {
|
||||
getTownship({ divisions: value.value}).then(res => {
|
||||
let arr = [];
|
||||
let brr = [];
|
||||
res.data.forEach(item => {
|
||||
@ -1598,7 +1597,7 @@ const Deta4 = item => {
|
||||
}
|
||||
});
|
||||
});
|
||||
exportExcel(brr, `${region}作物长势等级统计-行政区划`, 'Sheet1');
|
||||
exportExcel(brr, `${region}作物干旱等级统计-行政区划`, 'Sheet1');
|
||||
});
|
||||
}
|
||||
};
|
||||
@ -3008,6 +3007,9 @@ $height: calc(100vh - 100px);
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
}
|
||||
:deep(.el-input__wrapper){
|
||||
width: 100px;
|
||||
}
|
||||
.modeDiv {
|
||||
width: 234px;
|
||||
height: 26px;
|
||||
|
||||
@ -103,9 +103,16 @@
|
||||
:data="SaveResultsDiv"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column prop="createdTime" label="时间" />
|
||||
<el-table-column width="110" prop="createdTime" label="时间" />
|
||||
<el-table-column prop="tyName" label="台风名称" />
|
||||
<el-table-column prop="weizhi" label="位置" />
|
||||
<el-table-column prop="weizhi" label="位置">
|
||||
<template #default="scope">
|
||||
<span
|
||||
>
|
||||
{{`${scope.row.longitude}°E/${scope.row.latitude}°N` }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="affectedArea" label="受灾面积(公顷)" />
|
||||
<el-table-column prop="name" label="详情">
|
||||
<template #default="scope">
|
||||
@ -248,7 +255,7 @@
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="风圈半径" prop="radius">
|
||||
<el-input disabled v-model="ruleForm.radius">
|
||||
<el-input disabled v-model="ruleForm.radius7">
|
||||
<template #append>千米</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
@ -314,7 +321,7 @@
|
||||
</div>
|
||||
<div>
|
||||
<span>位置</span>
|
||||
<p>{{detailsArr.weizhi}}</p>
|
||||
<p>{{`${detailsArr.longitude}°E/${detailsArr.latitude}°N`}}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span>预计受影响人口（单位：人）</span>
|
||||
@ -462,7 +469,6 @@ watch(
|
||||
? moment(value1.value[1]).format('YYYY-MM-DD')
|
||||
: '';
|
||||
gettyphoonDamageSelect({ startTime: startTime, endTime: endTime }).then(res => {
|
||||
console.log(res.data);
|
||||
SaveResultsDiv.value = res.data;
|
||||
});
|
||||
}
|
||||
@ -2093,7 +2099,7 @@ const getyears = () => {
|
||||
const gettyphoonDamageSelects = () => {
|
||||
gettyphoonDamageSelect({ startTime: '', endTime: '' }).then(res => {
|
||||
SaveResultsDiv.value = res.data;
|
||||
|
||||
console.log(res.data);
|
||||
|
||||
});
|
||||
};
|
||||
@ -2901,9 +2907,6 @@ $height: calc(100vh - 100px);
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-date-editor .el-range-input) {
|
||||
// color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
.rightWra {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
@ -2931,7 +2934,7 @@ $height: calc(100vh - 100px);
|
||||
|
||||
.rightTop {
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
height: 99%;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -2946,6 +2949,9 @@ $height: calc(100vh - 100px);
|
||||
padding: 5px 10px 5px 10px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
height: 100%;
|
||||
:deep(.el-table--fit){
|
||||
height:100
|
||||
}
|
||||
.farmlandHeader {
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
@ -2954,6 +2960,14 @@ $height: calc(100vh - 100px);
|
||||
align-items: center;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
margin: 20px 0;
|
||||
:deep(.el-input__wrapper){
|
||||
background-color: rgba(22, 94, 102, 1);
|
||||
box-shadow: none;
|
||||
border: 1px solid rgba(4, 153, 153, 1);
|
||||
}
|
||||
:deep(.el-date-editor .el-range-input) {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
}
|
||||
:deep(.el-table tr) {
|
||||
background-color: transparent;
|
||||
|
||||
@ -99,8 +99,7 @@
|
||||
<el-select
|
||||
popper-class="select_city"
|
||||
@change="selectTab(item)"
|
||||
v-model="value"
|
||||
clearable
|
||||
v-model="value"
|
||||
placeholder="全部"
|
||||
>
|
||||
<el-option
|
||||
@ -2012,16 +2011,16 @@ function chartModes() {
|
||||
const ASdivisionDivIntance = echarts.init(chartModeDiv.value);
|
||||
let arr = [];
|
||||
let 无冻害 = [];
|
||||
let 轻度冻害 = [];
|
||||
let 轻度冻害=[];
|
||||
let 中度冻害 = [];
|
||||
let 重度冻害 = [];
|
||||
insectarr.value.forEach(item => {
|
||||
console.log(item.重度干旱);
|
||||
console.log(item.轻度冻害);
|
||||
arr.push(item.region);
|
||||
item.无冻害 !== undefined ? 无冻害.push(item.无冻害) : 无冻害.push(0);
|
||||
item.轻度冻害 !== undefined ? 轻度冻害.push(item.轻度冻害) : 轻度冻害.psuh(0);
|
||||
item.中度冻害 !== undefined ? 中度冻害.push(item.中度冻害) : 中度冻害.push(0);
|
||||
item.重度冻害 !== undefined ? 重度冻害.push(item.重度冻害) : 重度冻害.push(0);
|
||||
item.轻度冻害 !== undefined ? 轻度冻害.push(item.轻度冻害) : 轻度冻害.push(0);
|
||||
});
|
||||
let option = {
|
||||
tooltip: {
|
||||
@ -2832,6 +2831,9 @@ $height: calc(100vh - 100px);
|
||||
}
|
||||
.searchDiv {
|
||||
display: flex;
|
||||
:deep(.el-input__wrapper){
|
||||
width: 100px;
|
||||
}
|
||||
.dow {
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
|
||||
@ -43,7 +43,6 @@
|
||||
popper-class="select_city"
|
||||
@change="selectTab(item)"
|
||||
v-model="value"
|
||||
clearable
|
||||
placeholder="全部"
|
||||
>
|
||||
<el-option
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
class="seach_input"
|
||||
v-model="input"
|
||||
placeholder="请输入要筛选摄像头名"
|
||||
clearable
|
||||
|
||||
/>
|
||||
<el-select
|
||||
popper-class="selectCity"
|
||||
|
||||
@ -760,7 +760,7 @@ function addBoundaryHandle(data, name, color) {
|
||||
// customName地图服务自定义属性名
|
||||
function addvillage(CQL_FILTER, customName) {
|
||||
let map2 = new Cesium.WebMapServiceImageryProvider({
|
||||
url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms`,
|
||||
url: `http://36.134.44.75:9080/geoserver/shuzisannong/wms`,
|
||||
layers: 'shuzisannong:huangdaoqu_village', //图层名
|
||||
parameters: {
|
||||
service: 'WMS',
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
<el-input
|
||||
v-model="queryParams.roleName"
|
||||
placeholder="请输入角色名称"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
@ -14,7 +13,6 @@
|
||||
<el-input
|
||||
v-model="queryParams.roleKey"
|
||||
placeholder="请输入权限字符"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
@ -23,7 +21,6 @@
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
placeholder="角色状态"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option
|
||||
|
||||
Reference in New Issue
Block a user