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-12 17:02:41 +08:00
parent a163876af8
commit 0b17a7ad2d
254 changed files with 9532 additions and 2434 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -193,7 +193,7 @@
</div>
<div class="rowWra">
<span>面积：</span>
<span>{{ item.Shape_Area }} 亩</span>
<span>{{ item.Shape_Area.toFixed(2) }} 亩</span>
</div>
<div class="rowWra">
<span>镇名：</span>
@ -373,7 +373,9 @@ import axios from 'axios';
import * as xlsx from 'xlsx'; // Vue3 版本
import { ElMessage } from 'element-plus';
import townJson from './town.json';
import { useRouter } from 'vue-router';
const router = useRouter();
let viewer = ref(null);
const areaDiv = ref(null);
const typesofDiv = ref(null);
@ -861,15 +863,15 @@ let dd = {
其他: [],
};
let dic = {
小麦: { color: 'rgba(255, 141, 26, 1)', disabled: false },
玉米: { color: 'rgba(255, 255, 26, 1)', disabled: true },
大豆: { color: 'rgba(255, 201, 148, 1)', disabled: false },
地瓜: { color: 'rgba(255, 84, 84, 1)', disabled: false },
小麦: { color: 'rgba(25, 196, 22, 1)', disabled: false },
玉米: { color: 'rgba(255, 240, 26, 1)', disabled: true },
大豆: { color: 'rgba(255, 184, 148, 1)', disabled: false },
地瓜: { color: 'rgba(255, 77, 77, 1)', disabled: false },
花生: { color: 'rgba(255, 140, 255, 1)', disabled: false },
蓝莓: { color: 'rgba(26, 255, 255, 1)', disabled: false },
茶叶: { color: 'rgba(26, 255, 140, 1)', disabled: false },
蓝莓: { color: 'rgba(26, 110, 255, 1)', disabled: false },
茶叶: { color: 'rgba(0, 209, 195, 1)', disabled: false },
马铃薯: { color: 'rgba(255, 171, 87, 1)', disabled: true },
白菜和萝卜: { color: 'rgba(140, 255, 26, 1)', disabled: true },
白菜和萝卜: { color: 'rgba(201, 255, 148, 1)', disabled: true },
其他: { color: 'rgba(140, 26, 255, 1)', disabled: false },
};
// 图层字典
@ -900,7 +902,7 @@ let dictionaryArr = [
value: 0,
itemStyle: {
opacity: 0.8,
color: 'rgba(255, 141, 26, 1)',
color: 'rgba(25, 196, 22, 1)',
},
area: '',
},
@ -909,7 +911,7 @@ let dictionaryArr = [
value: 0,
itemStyle: {
opacity: 0.8,
color: 'rgba(255, 255, 26, 1)',
color: 'rgba(255, 240, 26, 1)',
},
area: '',
},
@ -937,7 +939,7 @@ let dictionaryArr = [
// 透明度
opacity: 0.8,
// 扇形颜色
color: 'rgba(255, 201, 148, 1)',
color: 'rgba(255, 184, 148, 1)',
},
label: {
show: true,
@ -952,7 +954,7 @@ let dictionaryArr = [
// 透明度
opacity: 0.8,
// 扇形颜色
color: 'rgba(255, 84, 84, 1)',
color: 'rgba(255, 77, 77, 1)',
},
label: {
show: true,
@ -967,7 +969,7 @@ let dictionaryArr = [
// 透明度
opacity: 0.8,
// 扇形颜色
color: 'rgba(26, 255, 255, 1)',
color: 'rgba(26, 110, 255, 1)',
},
label: {
show: true,
@ -982,7 +984,7 @@ let dictionaryArr = [
// 透明度
opacity: 0.8,
// 扇形颜色
color: 'rgba(26, 255, 140, 1)',
color: 'rgba(0, 209, 195, 1)',
},
label: {
show: true,
@ -1012,7 +1014,7 @@ let dictionaryArr = [
// 透明度
opacity: 0.8,
// 扇形颜色
color: 'rgba(140, 255, 26, 1)',
color: 'rgba(201, 255, 148, 1)',
},
label: {
show: true,
@ -1081,7 +1083,16 @@ function initonMounted() {
leftWra ? (leftWra.style.transform = 'translate(-107%,0)') : '';
let rightWra = document.querySelector('.rightWra');
rightWra.style.transform = 'translate(107%,0)';
localStorage.setItem(router.currentRoute.value.path, true);
}
onUpdated(() => {
console.log(localStorage.getItem(router.currentRoute.value.path));
if (localStorage.getItem(router.currentRoute.value.path) == 'false') {
document.querySelector('.mode').innerText = '地图模式';
} else {
document.querySelector('.mode').innerText = '列表模式';
}
});
const mapOption = {
url:
'http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0' +
@ -1798,6 +1809,18 @@ function rightFoldClick() {
//接口
//镇
const getTownships = city => {
dd = {
小麦: [],
玉米: [],
大豆: [],
地瓜: [],
花生: [],
蓝莓: [],
茶叶: [],
马铃薯: [],
白菜和萝卜: [],
其他: [],
};
getTownship({ divisions: city }).then(res => {
res.data.forEach((item, i) => {
for (let index = 0; index < Object.values(item).length; index++) {
@ -1860,6 +1883,18 @@ const getTownships = city => {
};
//村
const getvillages = city => {
dd = {
小麦: [],
玉米: [],
大豆: [],
地瓜: [],
花生: [],
蓝莓: [],
茶叶: [],
马铃薯: [],
白菜和萝卜: [],
其他: [],
};
getvillage({ divisions: city }).then(res => {
Township.brr = res.data;
let arr = [...res.data];
@ -1878,7 +1913,7 @@ const getvillages = city => {
}
});
Object.keys(dd).forEach(it => {
const index = town.findIndex(a => a && a.type === it);
const index = town.findIndex(a => a && a.name === it && Number(a.area) > 0);
if (index > -1) {
dd[it].push(1);
} else {
@ -2595,10 +2630,8 @@ function farmland() {
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;
}
@ -2665,11 +2698,11 @@ function farmland() {
color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
{
offset: 1,
color: 'rgba(255, 141, 26, 1)',
color: 'rgba(25, 196, 22, 1)',
},
{
offset: 0,
color: 'rgba(255, 141, 26, 1)',
color: 'rgba(25, 196, 22, 1)',
},
]),
},
@ -2687,11 +2720,11 @@ function farmland() {
color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
{
offset: 1,
color: 'rgba(255, 201, 148, 1)',
color: 'rgba(255, 184, 148, 1)',
},
{
offset: 0,
color: 'rgba(255, 201, 148, 1)',
color: 'rgba(255, 184, 148, 1)',
},
]),
},
@ -2709,11 +2742,11 @@ function farmland() {
color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
{
offset: 1,
color: 'rgba(26, 255, 140, 1)',
color: 'rgba(0, 209, 195, 1)',
},
{
offset: 0,
color: 'rgba(26, 255, 140, 1)',
color: 'rgba(0, 209, 195, 1)',
},
]),
},
@ -2949,16 +2982,16 @@ function ASdivision() {
barBorderRadius: [0, 0, 0, 0],
barBorderRadius: [0, 0, 0, 0], //
borderWidth: 1, // 设置边框宽度
borderColor: 'rgba(26, 255, 140, 1)', // 设置边框颜色
borderColor: 'rgba(0, 209, 195, 1)', // 设置边框颜色
color: {
colorStops: [
{
offset: 0,
color: 'rgba(26, 255, 140, 1)', // 0% 处的颜色
color: 'rgba(0, 209, 195, 1)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(26, 255, 140, 1)', // 100% 处的颜色
color: 'rgba(0, 209, 195, 1)', // 100% 处的颜色
},
],
},
@ -2987,16 +3020,16 @@ function ASdivision() {
barBorderRadius: [0, 0, 0, 0],
barBorderRadius: [0, 0, 0, 0], //
borderWidth: 1, // 设置边框宽度
borderColor: 'rgba(255, 84, 84, 1)', // 设置边框颜色
borderColor: 'rgba(255, 77, 77, 1)', // 设置边框颜色
color: {
colorStops: [
{
offset: 0,
color: 'rgba(255, 84, 84, 1)', // 0% 处的颜色
color: 'rgba(255, 77, 77, 1)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(255, 84, 84, 1)', // 100% 处的颜色
color: 'rgba(255, 77, 77, 1)', // 100% 处的颜色
},
],
},
@ -3024,16 +3057,16 @@ function ASdivision() {
itemStyle: {
barBorderRadius: [0, 0, 0, 0], //
borderWidth: 1, // 设置边框宽度
borderColor: 'rgba(255, 201, 148, 1)', // 设置边框颜色
borderColor: 'rgba(255, 184, 148, 1)', // 设置边框颜色
color: {
colorStops: [
{
offset: 0,
color: 'rgba(255, 201, 148, 1)', // 0% 处的颜色
color: 'rgba(255, 184, 148, 1)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(255, 201, 148, 1)', // 100% 处的颜色
color: 'rgba(255, 184, 148, 1)', // 100% 处的颜色
},
],
},
@ -3100,16 +3133,16 @@ function ASdivision() {
barBorderRadius: [0, 0, 0, 0],
barBorderRadius: [0, 0, 0, 0], //
borderWidth: 1, // 设置边框宽度
borderColor: 'rgba(255, 141, 26, 1)', // 设置边框颜色
borderColor: 'rgba(25, 196, 22, 1)', // 设置边框颜色
color: {
colorStops: [
{
offset: 0,
color: 'rgba(255, 141, 26, 1)', // 0% 处的颜色
color: 'rgba(25, 196, 22, 1)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(255, 141, 26, 1)', // 100% 处的颜色
color: 'rgba(25, 196, 22, 1)', // 100% 处的颜色
},
],
},
@ -3138,16 +3171,16 @@ function ASdivision() {
barBorderRadius: [0, 0, 0, 0],
barBorderRadius: [0, 0, 0, 0], //
borderWidth: 1, // 设置边框宽度
borderColor: 'rgba(26, 255, 255, 1)', // 设置边框颜色
borderColor: 'rgba(26, 110, 255, 1)', // 设置边框颜色
color: {
colorStops: [
{
offset: 0,
color: 'rgba(26, 255, 255, 1)', // 0% 处的颜色
color: 'rgba(26, 110, 255, 1)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(26, 255, 255, 1)', // 100% 处的颜色
color: 'rgba(26, 110, 255, 1)', // 100% 处的颜色
},
],
},
@ -3225,6 +3258,7 @@ function chartModes() {
item.白菜和萝卜 !== undefined && Cabbage.push(item.白菜和萝卜);
item.其他 !== undefined && Other.push(item.其他);
});
let ends = (10 / arr.length) * 100;
let option = {
tooltip: {
trigger: 'axis',
@ -3250,19 +3284,45 @@ function chartModes() {
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
},
},
dataZoom: [
{
type: 'slider',
width: '40%',
top: '90%',
start: 0,
end: ends,
showDataShadow: false,
showDetail: false,
fillerColor: 'rgba(64, 158, 255)',
borderRadius: '50%',
moveHandleSize: 0,
moveHandleStyle: {},
left: '30%',
height: 12,
handleSize: '80%',
handleIcon: 'path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z',
handleStyle: {
borderWidth: 0,
color: 'rgba(64, 158, 255)',
},
},
{
type: 'inside',
},
],
legend: {
top: 10,
left: 10,
icon: 'rect',
itemWidth: 4, // 图例图表宽度
itemHeight: 12, // 图例图标高度
data: ['餐费', '打车费', '零食', '日用品'],
data: [],
},
grid: {
left: '3%',
right: '13%',
bottom: '8%',
top: '15%',
bottom: '15%',
top: '10%',
containLabel: true,
},
xAxis: {
@ -3271,7 +3331,7 @@ function chartModes() {
axisLabel: {
fontSize: 12,
interval: 0,
rotate: 40,
rotate: 0,
},
axisLine: {
lineStyle: {
@ -3309,7 +3369,7 @@ function chartModes() {
barWidth: 13,
stack: '分类',
itemStyle: {
color: 'rgba(255, 141, 26, 1)',
color: 'rgba(25, 196, 22, 1)',
},
data: WheatArr,
},
@ -3319,7 +3379,7 @@ function chartModes() {
barWidth: 13,
stack: '分类',
itemStyle: {
color: 'rgba(255, 255, 26, 1)',
color: 'rgba(255, 240, 26, 1)',
},
data: CornArr,
},
@ -3329,7 +3389,7 @@ function chartModes() {
barWidth: 13,
stack: '分类',
itemStyle: {
color: 'rgba(255, 201, 148, 1)',
color: 'rgba(255, 184, 148, 1)',
},
data: Soybean,
},
@ -3339,7 +3399,7 @@ function chartModes() {
barWidth: 13,
stack: '分类',
itemStyle: {
color: 'rgba(255, 84, 84, 1)',
color: 'rgba(255, 77, 77, 1)',
},
data: SweetPotato,
},
@ -3359,7 +3419,7 @@ function chartModes() {
barWidth: 13,
stack: '分类',
itemStyle: {
color: 'rgba(26, 255, 255, 1)',
color: 'rgba(26, 110, 255, 1)',
},
data: Blueberries,
},
@ -3369,7 +3429,7 @@ function chartModes() {
barWidth: 13,
stack: '分类',
itemStyle: {
color: 'rgba(26, 255, 140, 1)',
color: 'rgba(0, 209, 195, 1)',
},
data: Tea,
},
@ -3389,7 +3449,7 @@ function chartModes() {
barWidth: 13,
stack: '分类',
itemStyle: {
color: 'rgba(140, 255, 26, 1)',
color: 'rgba(201, 255, 148, 1)',
},
data: Cabbage,
},