From 8fdd30ab943bcb915d91f638552dea937c3c9a2f Mon Sep 17 00:00:00 2001
From: tianlong <17603473476@163.com>
Date: Mon, 24 Apr 2023 17:08:25 +0800
Subject: [PATCH] up
---
src/views/crops/area/index.vue | 1161 +++++++++++++++++++---------
src/views/crops/classify/index.vue | 7 +-
2 files changed, 791 insertions(+), 377 deletions(-)
diff --git a/src/views/crops/area/index.vue b/src/views/crops/area/index.vue
index f100910..a6aa321 100644
--- a/src/views/crops/area/index.vue
+++ b/src/views/crops/area/index.vue
@@ -5,13 +5,19 @@
种植面积时间统计
-
+
下载
- 
+
@@ -20,12 +26,18 @@
种植面积统计
-
+
下载
-
+
@@ -35,40 +47,40 @@
小麦
-
12364亩
-
35%
+
12364亩
+
25%
玉米
-
12364亩
-
35%
+
12364亩
+
25%
大豆
-
12364亩
-
35%
+
12364亩
+
25%
地瓜
-
12364亩
-
35%
+
12364亩
+
25%
花生
-
12364亩
-
35%
+
12364亩
+
35%
@@ -77,12 +89,18 @@
作物类型统计-高标准农田
-
+
下载
-
+
@@ -91,22 +109,38 @@
作物类型统计-行政区划
-
+
下载
-
+
-
-
+
+
-
+
@@ -130,7 +164,7 @@
村名：
-
{{ townZuowu.XZQMC }}
+
{{ townZuowu.XZQMC }}
X
@@ -152,7 +186,7 @@ const typesofDiv = ref(null);
const farmlandDiv = ref(null);
const ProgressBarDiv = ref(null);
const ASdivisionDiv = ref(null);
-const value = ref('');
+const value = ref('370211');
const leftProgressBarDiv = ref(null);
let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
let OptionArr = reactive({ arr: [] });
@@ -341,7 +375,7 @@ function initMap() {
// 图层点击事件
layerClick();
// 蒙版
- mbHandle()
+ mbHandle();
//加载黄岛区村级地图服务
// Cesium.GeoJsonDataSource.load(
@@ -520,7 +554,7 @@ function getLevel(height) {
}
}
-let townZuowu = ref({ label: [] })//镇的作物
+let townZuowu = ref({ label: [] }); //镇的作物
let XZDM = '';
// 图层点击事件
function layerClick() {
@@ -583,7 +617,7 @@ function layerClick() {
deleteEntityByName('townLine');
// 高亮边界
addBoundaryHandle(
- item.geometry.coordinates,
+ item.geometry && item.geometry.coordinates,
'townLine',
'yellow'
);
@@ -598,12 +632,18 @@ function layerClick() {
// 显示该镇的种植结构
let entitys = viewer.entities._entities._array;
for (var na = entitys.length - 1; na >= 0; na--) {
- if (entitys[na]._name && entitys[na]._name === 'point' + newData.properties.XZDM) {
- let info = entitys[na]._info
+ if (
+ entitys[na]._name &&
+ entitys[na]._name ===
+ 'point' + newData.properties.XZDM
+ ) {
+ let info = entitys[na]._info;
// entitys[na].label.show = true
- townZuowu.value = info//保存数据
+ townZuowu.value = info; //保存数据
showOverlayChart(movement.position); // 添加地图移动监听：使地图移动弹窗跟着移动
- viewer.scene.postRender.addEventListener(infoWindowPostRender);
+ viewer.scene.postRender.addEventListener(
+ infoWindowPostRender
+ );
} else {
// if (entitys[na].label) {
// entitys[na].label.show = false
@@ -612,15 +652,15 @@ function layerClick() {
}
// 移除村高亮
deleteEntityByName('villageLine');
- XZQDM = ''
+ XZQDM = '';
} else {
// // 已经有镇了，监听村点击
- villageClick(layers, xy, level, cartographic)
+ villageClick(layers, xy, level, cartographic);
}
} else {
removeWms(['village_CQL']);
// 移除框框
- hiddenOverlayChart(); // 清除监听事件
+ hiddenOverlayChart(); // 清除监听事件
}
}
});
@@ -631,7 +671,7 @@ function layerClick() {
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
-let XZQDM = ''
+let XZQDM = '';
// 村点击高亮
function villageClick(layers, xy, level, cartographic) {
const index = layers.findIndex(
@@ -643,12 +683,7 @@ function villageClick(layers, xy, level, cartographic) {
const providerPoint = layers[index];
// 拿取最后一个图层
let provider = providerPoint._imageryProvider;
- if (
- provider &&
- provider.ready &&
- provider._layers &&
- providerPoint.show === true
- ) {
+ if (provider && provider.ready && provider._layers && providerPoint.show === true) {
xy = provider.tilingScheme.positionToTileXY(cartographic, level, xy);
let promise = provider.pickFeatures(
xy.x,
@@ -670,7 +705,7 @@ function villageClick(layers, xy, level, cartographic) {
deleteEntityByName('villageLine');
// 高亮边界
addBoundaryHandle(
- item.geometry.coordinates,
+ item.geometry && item.geometry.coordinates,
'villageLine',
'yellow'
);
@@ -694,15 +729,15 @@ function villageClick(layers, xy, level, cartographic) {
...item.properties,
// XZQMC
label: [
- { crop: "茶叶", Shape_Area: 2820 },
- { crop: "大豆", Shape_Area: 2767 },
- { crop: "花生", Shape_Area: 62356 },
- { crop: "蓝莓", Shape_Area: 5443 },
- { crop: "地瓜", Shape_Area: 897 },
- { crop: "小麦", Shape_Area: 20111 },
- ]
- }
- townZuowu.value = info//保存数据
+ { crop: '茶叶', Shape_Area: 2820 },
+ { crop: '大豆', Shape_Area: 2767 },
+ { crop: '花生', Shape_Area: 62356 },
+ { crop: '蓝莓', Shape_Area: 5443 },
+ { crop: '地瓜', Shape_Area: 897 },
+ { crop: '小麦', Shape_Area: 20111 },
+ ],
+ };
+ townZuowu.value = info; //保存数据
}
}
}
@@ -833,40 +868,40 @@ const selectTab = () => {
if (value.value == '370211') {
getTownships();
- tableData = [
- {
- date: '小麦',
- name: '2934362亩',
- address: '35%',
- },
- {
- date: '玉米',
- name: '1676778亩',
- address: '20%',
- },
- {
- date: '大豆',
- name: '1257584亩',
- address: '15%',
- },
- {
- date: '地瓜',
- name: '1341423亩',
- address: '16%',
- },
- {
- date: '花生',
- name: '1592939亩',
- address: '19%',
- },
- ];
- TypeTime = {
- 大豆: [1100, 1395, 1948, 2203, 3402, 1860, 2934, 2490],
- 小麦: [1283, 2883, 2939, 1233, 1992, 1928, 3949, 1929],
- 地瓜: [1823, 1948, 1928, 2294, 2302, 3903, 3493, 2323],
- 花生: [2374, 1934, 3943, 3493, 2083, 1928, 2984, 3279],
- };
- areatext = '8383894';
+ // tableData = [
+ // {
+ // date: '小麦',
+ // name: '2934362亩',
+ // address: '35%',
+ // },
+ // {
+ // date: '玉米',
+ // name: '1676778亩',
+ // address: '20%',
+ // },
+ // {
+ // date: '大豆',
+ // name: '1257584亩',
+ // address: '15%',
+ // },
+ // {
+ // date: '地瓜',
+ // name: '1341423亩',
+ // address: '16%',
+ // },
+ // {
+ // date: '花生',
+ // name: '1592939亩',
+ // address: '19%',
+ // },
+ // ];
+ // TypeTime = {
+ // 大豆: [1100, 1395, 1948, 2203, 3402, 1860, 2934, 2490],
+ // 小麦: [1283, 2883, 2939, 1233, 1992, 1928, 3949, 1929],
+ // 地瓜: [1823, 1948, 1928, 2294, 2302, 3903, 3493, 2323],
+ // 花生: [2374, 1934, 3943, 3493, 2083, 1928, 2984, 3279],
+ // };
+ // areatext = '8383894';
}
areatext = '1293842';
tableData = [
@@ -1319,107 +1354,389 @@ function areachar() {
function typesof() {
const typesofDivIntance = echarts.init(typesofDiv.value);
- var option = {
- title: [
+ let isSelected = '';
+ let isHovered = '';
+ let hoveredIndex = '';
+ let option = getPie3D(
+ [
{
- text: '总面积',
- x: 'center',
- top: '32%',
- textStyle: {
- color: 'rgba(255,255,255,1)',
- fontSize: 14,
- fontWeight: '400',
+ name: '小麦',
+ value: 101,
+ itemStyle: {
+ opacity: 0.5,
+ color: 'rgba(110, 209, 84, 0.9)',
},
},
{
- text: `${areatext}亩`,
- x: 'center',
- top: '50%',
- textStyle: {
- fontSize: 18,
- color: 'rgba(255, 213, 88, 1)',
- foontWeight: '400',
+ // 数据项名称
+ name: '玉米',
+ value: 56,
+ itemStyle: {
+ // 透明度
+ opacity: 0.5,
+ // 扇形颜色
+ color: 'rgba(251, 201, 3, 1)',
+ },
+ label: {
+ show: true,
+ },
+ },
+ {
+ // 数据项名称
+ name: '大豆',
+ value: 56,
+ itemStyle: {
+ // 透明度
+ opacity: 0.5,
+ // 扇形颜色
+ color: 'rgba(240, 129, 31, 0.9)',
+ },
+ label: {
+ show: true,
+ },
+ },
+ {
+ // 数据项名称
+ name: '地瓜',
+ value: 56,
+ itemStyle: {
+ // 透明度
+ opacity: 0.5,
+ // 扇形颜色
+ color: 'rgba(27, 85, 222, 1)',
+ },
+ label: {
+ show: true,
+ },
+ },
+ {
+ // 数据项名称
+ name: '花生',
+ value: 56,
+ itemStyle: {
+ // 透明度
+ opacity: 0.5,
+ // 扇形颜色
+ color: 'rgba(72, 102, 211, 0.9)',
},
- },
- ],
- tooltip: {
- trigger: 'item',
- formatter: '{a}
{b}: {c} ({d}%)',
- },
- color: [
- 'rgba(212,236,89,0.8)',
- 'rgba(102,142,214,0.8)',
- 'rgba(156,220,130,0.8)',
- 'rgba(255,225,104,0.8)',
- ], // 指定饼图颜色
- legend: {
- selectedMode: true, //图例上的点击事件
- type: 'plain',
- orient: 'vertical',
- left: '85%',
- top: 'center',
- align: 'left',
- itemGap: 20,
- itemWidth: 12, // 设置宽度
- itemHeight: 7, // 设置高度
- symbolKeepAspect: false,
- textStyle: {
- color: 'rgba(255,255,255,0.7)',
- rich: {
- name: {
- verticalAlign: 'right',
- align: 'left',
- width: 90,
- fontSize: 18,
- color: '#D8DDE3',
- },
- value: {
- align: 'left',
- width: 50,
- fontSize: 18,
- color: '#D8DDE3',
- },
- },
- },
- },
- series: [
- {
- name: '占比',
- type: 'pie',
- radius: ['50%', '70%'],
- avoidLabelOverlap: true,
label: {
- normal: {
- show: false, //饼图label文字
- position: 'left',
- textStyle: {
- color: 'rgba(41,255,219,1)',
- },
- },
- emphasis: {
- show: true,
- textStyle: {
- fontSize: '30',
- fontWeight: 'bold',
- },
- },
- },
- labelLine: {
show: true,
- normal: {
- show: true,
- },
},
- data: [
- { value: 25, name: '小麦' },
- { value: 25, name: '玉米' },
- { value: 25, name: '大豆' },
- { value: 25, name: '地瓜' },
- { value: 25, name: '花生' },
- ],
},
],
- };
+ 0.7
+ );
+ // 生成扇形的曲面参数方程
+ function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+ // 计算
+ const midRatio = (startRatio + endRatio) / 2;
+
+ const startRadian = startRatio * Math.PI * 2;
+ const endRadian = endRatio * Math.PI * 2;
+ const midRadian = midRatio * Math.PI * 2;
+
+ // 如果只有一个扇形，则不实现选中效果。
+ if (startRatio === 0 && endRatio === 1) {
+ // eslint-disable-next-line no-param-reassign
+ isSelected = false;
+ }
+
+ // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+ // eslint-disable-next-line no-param-reassign
+ k = typeof k !== 'undefined' ? k : 1 / 3;
+
+ // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+ const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+ const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+ // 计算高亮效果的放大比例（未高亮，则比例为 1）
+ const hoverRate = isHovered ? 1.05 : 1;
+
+ // 返回曲面参数方程
+ return {
+ u: {
+ min: -Math.PI,
+ max: Math.PI * 3,
+ step: Math.PI / 32,
+ },
+
+ v: {
+ min: 0,
+ max: Math.PI * 2,
+ step: Math.PI / 20,
+ },
+
+ x(u, v) {
+ if (u < startRadian) {
+ return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+ }
+ if (u > endRadian) {
+ return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+ }
+ return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+ },
+
+ y(u, v) {
+ if (u < startRadian) {
+ return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+ }
+ if (u > endRadian) {
+ return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+ }
+ return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+ },
+
+ z(u, v) {
+ if (u < -Math.PI * 0.5) {
+ return Math.sin(u);
+ }
+ if (u > Math.PI * 2.5) {
+ return Math.sin(u) * h * 0.1;
+ }
+ // 当前图形的高度是Z根据h（每个value的值决定的）
+ return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+ },
+ };
+ }
+ // 生成模拟 3D 饼图的配置项
+ function getPie3D(pieData, internalDiameterRatio) {
+ const series = [];
+ // 总和
+ let sumValue = 0;
+ let startValue = 0;
+ let endValue = 0;
+ const legendData = [];
+ const k =
+ typeof internalDiameterRatio !== 'undefined'
+ ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
+ : 1 / 3;
+
+ // 为每一个饼图数据，生成一个 series-surface 配置
+ for (let i = 0; i < pieData.length; i += 1) {
+ sumValue += pieData[i].value;
+
+ const seriesItem = {
+ name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
+ type: 'surface',
+ parametric: true,
+ wireframe: {
+ show: false,
+ },
+ pieData: pieData[i],
+ pieStatus: {
+ selected: false,
+ hovered: false,
+ k,
+ },
+ };
+
+ if (typeof pieData[i].itemStyle !== 'undefined') {
+ const { itemStyle } = pieData[i];
+
+ // eslint-disable-next-line no-unused-expressions
+ typeof pieData[i].itemStyle.color !== 'undefined'
+ ? (itemStyle.color = pieData[i].itemStyle.color)
+ : null;
+ // eslint-disable-next-line no-unused-expressions
+ typeof pieData[i].itemStyle.opacity !== 'undefined'
+ ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
+ : null;
+
+ seriesItem.itemStyle = itemStyle;
+ }
+ series.push(seriesItem);
+ }
+ // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+ // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+ console.log(series);
+ for (let i = 0; i < series.length; i += 1) {
+ endValue = startValue + series[i].pieData.value;
+
+ series[i].pieData.startRatio = startValue / sumValue;
+ series[i].pieData.endRatio = endValue / sumValue;
+ series[i].parametricEquation = getParametricEquation(
+ series[i].pieData.startRatio,
+ series[i].pieData.endRatio,
+ false,
+ false,
+ k,
+ // 我这里做了一个处理，使除了第一个之外的值都是10
+ series[i].pieData.value === series[0].pieData.value ? 35 : 10
+ );
+
+ startValue = endValue;
+
+ legendData.push(series[i].name);
+ }
+
+ // 准备待返回的配置项，把准备好的 legendData、series 传入。
+ const option = {
+ // animation: false,
+ legend: {
+ show: true,
+ top: 0,
+ textStyle: { color: 'rgba(255,255,255,.9)' },
+ },
+ tooltip: {
+ formatter: params => {
+ if (params.seriesName !== 'mouseoutSeries') {
+ return `${params.seriesName}
`;
+ }
+ return '';
+ },
+ },
+ xAxis3D: {
+ min: -1,
+ max: 1,
+ },
+ yAxis3D: {
+ min: -1,
+ max: 1,
+ },
+ zAxis3D: {
+ min: -1,
+ max: 1,
+ },
+ grid3D: {
+ show: false,
+ boxHeight: 10,
+ top: '-5%',
+ viewControl: {
+ // 3d效果可以放大、旋转等，请自己去查看官方配置
+ alpha: 40,
+ beta: 30,
+ rotateSensitivity: 1,
+ zoomSensitivity: 0,
+ panSensitivity: 0,
+ autoRotate: true,
+ distance: 170,
+ },
+ // 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
+ postEffect: {
+ // 配置这项会出现锯齿，请自己去查看官方配置有办法解决
+ enable: false,
+ bloom: {
+ enable: true,
+ bloomIntensity: 0.1,
+ },
+ SSAO: {
+ enable: true,
+ quality: 'medium',
+ radius: 2,
+ },
+ // temporalSuperSampling: {
+ // enable: true,
+ // },
+ },
+ },
+ series,
+ };
+ return option;
+ }
+ // 修正取消高亮失败的 bug
+ // 监听 mouseover，近似实现高亮（放大）效果
+ typesofDivIntance.on('mouseover', function (params) {
+ // 准备重新渲染扇形所需的参数
+ let isSelected;
+ let isHovered;
+ let startRatio;
+ let endRatio;
+ let k;
+ let i;
+
+ // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+ if (hoveredIndex === params.seriesIndex) {
+ return;
+
+ // 否则进行高亮及必要的取消高亮操作
+ } else {
+ // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+ if (hoveredIndex !== '') {
+ // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+ isSelected = option.series[hoveredIndex].pieStatus.selected;
+ isHovered = false;
+ startRatio = option.series[hoveredIndex].pieData.startRatio;
+ endRatio = option.series[hoveredIndex].pieData.endRatio;
+ k = option.series[hoveredIndex].pieStatus.k;
+ i =
+ option.series[hoveredIndex].pieData.value === option.series[0].pieData.value
+ ? 35
+ : 10;
+ // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+ option.series[hoveredIndex].parametricEquation = getParametricEquation(
+ startRatio,
+ endRatio,
+ isSelected,
+ isHovered,
+ k,
+ i
+ );
+ option.series[hoveredIndex].pieStatus.hovered = isHovered;
+
+ // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+ hoveredIndex = '';
+ }
+
+ // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+ if (params.seriesName !== 'mouseoutSeries') {
+ // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+ isSelected = option.series[params.seriesIndex].pieStatus.selected;
+ isHovered = true;
+ startRatio = option.series[params.seriesIndex].pieData.startRatio;
+ endRatio = option.series[params.seriesIndex].pieData.endRatio;
+ k = option.series[params.seriesIndex].pieStatus.k;
+
+ // 对当前点击的扇形，执行高亮操作（对 option 更新）
+ option.series[params.seriesIndex].parametricEquation = getParametricEquation(
+ startRatio,
+ endRatio,
+ isSelected,
+ isHovered,
+ k,
+ option.series[params.seriesIndex].pieData.value + 5
+ );
+ option.series[params.seriesIndex].pieStatus.hovered = isHovered;
+
+ // 记录上次高亮的扇形对应的系列号 seriesIndex
+ hoveredIndex = params.seriesIndex;
+ }
+
+ // 使用更新后的 option，渲染图表
+ typesofDivIntance.setOption(option);
+ }
+ });
+
+ // 修正取消高亮失败的 bug
+ typesofDivIntance.on('globalout', function () {
+ if (hoveredIndex !== '') {
+ // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+ isSelected = option.series[hoveredIndex].pieStatus.selected;
+ isHovered = false;
+ let k = option.series[hoveredIndex].pieStatus.k;
+ startRatio = option.series[hoveredIndex].pieData.startRatio;
+ endRatio = option.series[hoveredIndex].pieData.endRatio;
+ // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+ i =
+ option.series[hoveredIndex].pieData.value === option.series[0].pieData.value
+ ? 35
+ : 10;
+ option.series[hoveredIndex].parametricEquation = getParametricEquation(
+ startRatio,
+ endRatio,
+ isSelected,
+ isHovered,
+ k,
+ i
+ );
+ option.series[hoveredIndex].pieStatus.hovered = isHovered;
+
+ // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+ hoveredIndex = '';
+ }
+
+ // 使用更新后的 option，渲染图表
+ typesofDivIntance.setOption(option);
+ });
// option && typesofDivIntance.setOption(option);
useEcharts(typesofDivIntance, option);
@@ -1428,131 +1745,182 @@ function typesof() {
function farmland() {
const farmlandDivIntance = echarts.init(farmlandDiv.value);
var option = {
- title: {
- text: '',
- subtext: '',
- },
tooltip: {
trigger: 'axis',
axisPointer: {
- type: 'shadow',
+ // Use axis to trigger tooltip
+ type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+ },
+ },
+ legend: {
+ // data: ["已完成", "进行中"],
+ top: '10%',
+ left: '5%',
+ icon: 'rect',
+ textStyle: {
+ color: '#fff',
},
},
grid: {
- top: '15%',
- left: '16%',
- bottom: '19%',
+ top: '20%',
+ left: '5%',
+ right: '5%',
+ bottom: '10%',
+ containLabel: true,
},
xAxis: {
- type: 'category',
- data: ['区域一', '区域二', '区域三', '区域四', '区域五'],
+ type: 'value',
axisLine: {
lineStyle: {
- color: '#C0C4CC',
- width: 1,
+ color: 'rgba(255,255,255,0.8)',
},
},
- axisTick: {
- show: false,
- },
- axisLabel: {
- margin: 10,
- color: 'rgba(255, 255, 255, 0.7)',
- textStyle: {
- fontSize: 14,
+ splitLine: {
+ lineStyle: {
+ color: 'rgba(255,255,255,0.3)', // 分割线颜色
},
},
},
yAxis: {
- name: '面积(亩)',
- nameTextStyle: {
- color: 'rgba(255, 255, 255, 0.8)',
- fontSize: 14,
- },
- type: 'value',
- splitLine: {
- lineStyle: {
- color: 'rgba(192,196,204,1)',
- type: 'dashed',
- },
- },
+ type: 'category',
+ data: ["片区七", "片区六", "片区五", "片区四", "片区三",'片区二','片区一'],
axisLabel: {
- margin: 10,
- color: 'rgba(255, 255, 255, 0.7)',
- textStyle: {
- fontSize: 14,
- },
+ color: 'rgba(255,255,255,0.8)',
+
},
+ axisTick: {
+ lineStyle: {
+ color: '#668092',
+ width: 1,
+ },
+ show: false,
+ },
},
series: [
{
name: '小麦',
type: 'bar',
- barWidth: 14,
- stack: '数量',
- data: [1666, 1666, 1666, 1666, 1666],
+ stack: 'total',
+ label: {
+ show: true,
+ },
+ emphasis: {
+ focus: 'series',
+ },
+ // data: [121, 828, 144, 368, 390],
+ barWidth: 12,
itemStyle: {
- normal: {
- //颜色渐变
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: 'rgba(102, 142, 214, 0.8)',
- },
- {
- offset: 1,
- color: 'rgba(102, 142, 214, 0.8)',
- },
- ]),
+ label: {
+ show: true,
},
+ labelLine: {
+ show: false,
+ },
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+ { offset: 0, color: 'rgba(33, 187, 251, 0.05)' },
+ { offset: 1, color: 'rgba(33, 187, 251, 0.9)' },
+ ]),
+ borderColor: 'rgba(7,165,255,0.7)',
+ shadowBlur: 16,
+ shadowColor: 'rgba(7,165,255,1)',
},
},
{
name: '玉米',
type: 'bar',
- barWidth: 30,
- stack: '数量',
- data: [1666, 1666, 1666, 1666, 1666],
+ stack: 'total',
+ label: {
+ show: true,
+ },
+ emphasis: {
+ focus: 'series',
+ },
+ data: [271, 132, 413, 210, 521],
+ barWidth: 12,
itemStyle: {
- normal: {
- //颜色渐变
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: 'rgba(255, 225, 104, 0.8)',
- },
- {
- offset: 1,
- color: 'rgba(255, 225, 104, 0.8)',
- },
- ]),
+ label: {
+ show: true,
},
+ labelLine: {
+ show: false,
+ },
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+ { offset: 0, color: 'rgba(4, 247, 227, 0.05)' },
+ { offset: 1, color: 'rgba(4, 247, 227, 0.9)' },
+ ]),
+ borderColor: '#a2f9f7',
+ shadowBlur: 16,
+ shadowColor: '#a2f9f7',
},
},
{
name: '大豆',
type: 'bar',
- barWidth: 30,
- stack: '数量',
- data: [1666, 1666, 1666, 1666, 1666],
+ stack: 'total',
+ label: {
+ show: true,
+ },
+ emphasis: {
+ focus: 'series',
+ },
+ data: [271, 132, 413, 210, 521,232,343],
+ barWidth: 12,
itemStyle: {
- normal: {
- //颜色渐变
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: 'rgba(209, 91, 127, 0.8)',
- },
- {
- offset: 1,
- color: 'rgba(209, 91, 127, 0.8)',
- },
- ]),
+ label: {
+ show: true,
},
+ labelLine: {
+ show: false,
+ },
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+ { offset: 0, color: 'rgba(143, 186, 243, 0.05)' },
+ { offset: 1, color: 'rgba(143, 186, 243, 0.9)' },
+ ]),
+ borderColor: '#a2f9f7',
+ shadowBlur: 16,
+ shadowColor: '#a2f9f7',
+ },
+ },
+ {
+ name: '地瓜',
+ type: 'bar',
+ stack: 'total',
+ label: {
+ show: true,
+ },
+ emphasis: {
+ focus: 'series',
+ },
+ data: [271, 132, 413, 210, 521,234,321],
+ barWidth: 12,
+ itemStyle: {
+ label: {
+ show: true,
+ },
+ labelLine: {
+ show: false,
+ },
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+ { offset: 0, color: 'rgba(255, 225, 104, 0.05)' },
+ { offset: 1, color: 'rgba(255, 225, 104, 1)' },
+ ]),
+ borderColor: '#a2f9f7',
+ shadowBlur: 16,
+ shadowColor: '#a2f9f7',
},
},
],
+ // dataset: {
+ // source: [
+ // { status: '片区七', value1: 33, value2: 93, value3: 9 },
+ // { status: '配送中', value1: 53, value2: 32 },
+ // { status: '已出库', value1: 78, value2: 65 },
+ // { status: '采购中', value1: 12, value2: 35 },
+ // { status: '接单中', value1: 90, value2: 52 },
+ // ],
+ // },
};
+
farmlandDivIntance.on('click', function (params) {
console.log(params.name);
});
@@ -1866,108 +2234,111 @@ function ASdivision() {
/*--------------------------------------------------------------------------------------------*/
function getAreaFenlei() {
- let fl = fenleiRef.value
+ let fl = fenleiRef.value;
console.log('fl:', fl);
axios({
- url: serverAPI.geoserverUrl + '/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
- }).then(res => {
- console.log('res1111:', res);
- let data = res.data.features;
- data.forEach((item, index) => {
- const rectangle = Cesium.Rectangle.fromDegrees(
- item.bbox[0],
- item.bbox[1],
- item.bbox[2],
- item.bbox[3]
- );
- const center = Cesium.Rectangle.center(rectangle); //获取视角范围中心点(得到的结果为弧度Cartographic)
- let longitude = Cesium.Math.toDegrees(center.longitude); //将弧度转为度
- let latitude = Cesium.Math.toDegrees(center.latitude);
+ url:
+ serverAPI.geoserverUrl +
+ '/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
+ })
+ .then(res => {
+ console.log('res1111:', res);
+ let data = res.data.features;
+ data.forEach((item, index) => {
+ const rectangle = Cesium.Rectangle.fromDegrees(
+ item.bbox[0],
+ item.bbox[1],
+ item.bbox[2],
+ item.bbox[3]
+ );
+ const center = Cesium.Rectangle.center(rectangle); //获取视角范围中心点(得到的结果为弧度Cartographic)
+ let longitude = Cesium.Math.toDegrees(center.longitude); //将弧度转为度
+ let latitude = Cesium.Math.toDegrees(center.latitude);
- if (item.properties.XZDM === '370211011') {
- //灵山卫街道
- longitude = 120.0863;
- latitude = 35.941;
- } else if (item.properties.XZDM === '370211003') {
- //薛家岛街道
- longitude = 120.243682;
- latitude = 35.97123201;
- }
- const townData = fl[item.properties.XZMC]
- let label = []
- if (townData) {
- label = townData.map((it, inex) => {
- // let dd = `${it.properties.crop} ：${(it.properties.Shape_Area / 666.67).toFixed(2)} 亩`
- // return dd
- return it.properties
- })
- }
- // label = label.join(' ')
- // console.log('label:', index, label,fl[item.properties.XZMC],item.properties.XZMC)
- // 添加点
- viewer.entities.add({
- name: 'point' + item.properties.XZDM,
- position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
- point: new Cesium.PointGraphics({
- show: true,
- pixelSize: 10,
- // heightReference: Cesium.HeightReference.NONE,
- color: Cesium.Color.fromBytes(30, 144, 255),
- outlineColor: new Cesium.Color(0, 0, 0, 0),
- outlineWidth: 0,
- disableDepthTestDistance: Number.POSITIVE_INFINITY, //去掉地形遮挡
- heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,//贴地
- }),
- // label: {
- // show: false,
- // text: label.join(' '),
- // font: '12px sans-serif',
- // fillColor: Cesium.Color.WHITE,
- // showBackground: true,
- // backgroundColor: Cesium.Color.fromCssColorString('rgba(2, 31, 26, 0.6)'),//背景颜色
- // // style: Cesium.LabelStyle.FILL,
- // outlineWidth: 3,
- // verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
- // horizontalOrigin: Cesium.HorizontalOrigin.LEFT,//水平位置
- // pixelOffset: new Cesium.Cartesian2(-80, -10),
- // },
- info: {
- label: label,
- ...item.properties,
- // 经纬度，以便监听
- lon: longitude,
- lat: latitude,
- },
+ if (item.properties.XZDM === '370211011') {
+ //灵山卫街道
+ longitude = 120.0863;
+ latitude = 35.941;
+ } else if (item.properties.XZDM === '370211003') {
+ //薛家岛街道
+ longitude = 120.243682;
+ latitude = 35.97123201;
+ }
+ const townData = fl[item.properties.XZMC];
+ let label = [];
+ if (townData) {
+ label = townData.map((it, inex) => {
+ // let dd = `${it.properties.crop} ：${(it.properties.Shape_Area / 666.67).toFixed(2)} 亩`
+ // return dd
+ return it.properties;
+ });
+ }
+ // label = label.join(' ')
+ // console.log('label:', index, label,fl[item.properties.XZMC],item.properties.XZMC)
+ // 添加点
+ viewer.entities.add({
+ name: 'point' + item.properties.XZDM,
+ position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
+ point: new Cesium.PointGraphics({
+ show: true,
+ pixelSize: 10,
+ // heightReference: Cesium.HeightReference.NONE,
+ color: Cesium.Color.fromBytes(30, 144, 255),
+ outlineColor: new Cesium.Color(0, 0, 0, 0),
+ outlineWidth: 0,
+ disableDepthTestDistance: Number.POSITIVE_INFINITY, //去掉地形遮挡
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //贴地
+ }),
+ // label: {
+ // show: false,
+ // text: label.join(' '),
+ // font: '12px sans-serif',
+ // fillColor: Cesium.Color.WHITE,
+ // showBackground: true,
+ // backgroundColor: Cesium.Color.fromCssColorString('rgba(2, 31, 26, 0.6)'),//背景颜色
+ // // style: Cesium.LabelStyle.FILL,
+ // outlineWidth: 3,
+ // verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+ // horizontalOrigin: Cesium.HorizontalOrigin.LEFT,//水平位置
+ // pixelOffset: new Cesium.Cartesian2(-80, -10),
+ // },
+ info: {
+ label: label,
+ ...item.properties,
+ // 经纬度，以便监听
+ lon: longitude,
+ lat: latitude,
+ },
+ });
});
-
- });
- }).catch(err => { })
-
+ })
+ .catch(err => {});
}
-let fenleiRef = ref({})
+let fenleiRef = ref({});
function mbHandle() {
axios({
- url: serverAPI.geoserverUrl + '/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afenlei&maxFeatures=137&outputFormat=application%2Fjson',
- }).then(res => {
- let features = res.data.features
- let town = {}
- // 按镇分类
- features.forEach(item => {
- let key = item.properties.town
- if (town[key]) {
- town[key].push(item)
- } else {
- town[key] = [item]
- }
+ url:
+ serverAPI.geoserverUrl +
+ '/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afenlei&maxFeatures=137&outputFormat=application%2Fjson',
+ })
+ .then(res => {
+ let features = res.data.features;
+ let town = {};
+ // 按镇分类
+ features.forEach(item => {
+ let key = item.properties.town;
+ if (town[key]) {
+ town[key].push(item);
+ } else {
+ town[key] = [item];
+ }
+ });
+ fenleiRef.value = town;
+ getAreaFenlei();
})
- fenleiRef.value = town
- getAreaFenlei()
-
- }).catch(err => { })
-
+ .catch(err => {});
}
-
/*------------------------------------------柱状图--------------------------------------------*/
// function getJson() {
// let dic = {
@@ -2237,9 +2608,11 @@ $height: calc(100vh - 100px);
height: 25px;
border-radius: 20px;
font-size: 14px;
- background: linear-gradient(180deg,
- rgba(16, 111, 111, 1) 0%,
- rgba(47, 214, 214, 1) 100%);
+ background: linear-gradient(
+ 180deg,
+ rgba(16, 111, 111, 1) 0%,
+ rgba(47, 214, 214, 1) 100%
+ );
border: 1.5px solid rgba(23, 194, 180, 1);
display: flex;
justify-content: center;
@@ -2288,8 +2661,12 @@ $height: calc(100vh - 100px);
padding-top: 13px;
.typesofDiv {
- width: 100%;
- height: 200px;
+ width: 375px;
+ height: 397px;
+ background: url('@/assets/images/bj1_00000_iSpt.png');
+ background-repeat: no-repeat;
+ background-size: 85% 115%;
+ background-position: center;
}
.tableDiv {
@@ -2312,9 +2689,11 @@ $height: calc(100vh - 100px);
align-items: center;
justify-content: space-around;
opacity: 1;
- background: linear-gradient(90deg,
- rgba(21, 173, 148, 0.1) 0%,
- rgba(21, 173, 148, 0) 100%);
+ background: linear-gradient(
+ 90deg,
+ rgba(21, 173, 148, 0.1) 0%,
+ rgba(21, 173, 148, 0) 100%
+ );
div {
display: flex;
@@ -2494,7 +2873,7 @@ $height: calc(100vh - 100px);
// align-items: flex-end;
padding: 30px 8px 20px 8px;
- &>div:nth-child(1) {
+ & > div:nth-child(1) {
font-weight: 400;
letter-spacing: 0px;
color: rgba(255, 255, 255, 1);
@@ -2502,7 +2881,7 @@ $height: calc(100vh - 100px);
line-height: 24px;
}
- &>div:nth-child(2) {
+ & > div:nth-child(2) {
color: rgba(255, 255, 255, 1);
width: 129px;
height: 24px;
@@ -2541,11 +2920,11 @@ $height: calc(100vh - 100px);
cursor: pointer;
}
- &>div {
+ & > div {
display: flex;
margin-bottom: 10px;
- &>div:nth-child(1) {
+ & > div:nth-child(1) {
font-weight: 400;
letter-spacing: 0px;
color: rgba(255, 255, 255, 1);
@@ -2554,7 +2933,7 @@ $height: calc(100vh - 100px);
margin-right: 10px;
}
- &>div:nth-child(2) {
+ & > div:nth-child(2) {
color: rgba(255, 255, 255, 1);
width: 129px;
height: 24px;
@@ -2570,5 +2949,35 @@ $height: calc(100vh - 100px);
}
}
-:deep(.el-select__popper.el-popper) {}
+:deep(.el-select__popper.el-popper) {
+}
+
+
diff --git a/src/views/crops/classify/index.vue b/src/views/crops/classify/index.vue
index 2f6df79..5a3a6b2 100644
--- a/src/views/crops/classify/index.vue
+++ b/src/views/crops/classify/index.vue
@@ -137,6 +137,7 @@
X
+ 111111
@@ -1993,9 +1994,10 @@ $height: calc(100vh - 100px);
display: flex;
flex-direction: column;
max-width: calc(100% - 7px);
+ align-items: center;
.typesofDiv {
- width: 100%;
+ width: 375px;
height: 397px;
background: url('@/assets/images/bj1_00000_iSpt.png');
background-repeat: no-repeat;
@@ -2230,6 +2232,9 @@ $height: calc(100vh - 100px);
cursor: pointer;
}
}
+.back_button{
+ position: absolute;
+}