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-07-11 08:43:34 +08:00
parent d0eea9c22a
commit 79894eb7e8
257 changed files with 2056 additions and 1503 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -357,7 +357,6 @@ import { useEcharts } from '@/hooks/useEcharts';
import {
getTownship,
getvillage,
getareas,
getcropper,
getcropTypeStatistics,
gethighStandard,
@ -880,14 +879,14 @@ let dd = {
};
let dic = {
小麦: { color: 'rgba(25, 196, 22, 1)', disabled: false },
玉米: { color: 'rgba(255, 240, 26, 1)', disabled: true },
玉米: { color: 'rgba(255, 240, 26, 1)', disabled: false },
大豆: { color: 'rgba(255, 184, 148, 1)', disabled: false },
地瓜: { color: 'rgba(255, 18, 18, 1)', disabled: false },
花生: { color: 'rgba(255, 140, 255, 1)', disabled: false },
蓝莓: { color: ' rgba(0, 153, 255, 1)', disabled: false },
茶叶: { color: 'rgba(0, 209, 195, 1)', disabled: false },
马铃薯: { color: 'rgba(253, 127, 1, 1)', disabled: true },
白菜和萝卜: { color: 'rgba(201, 255, 148, 1)', disabled: true },
马铃薯: { color: 'rgba(253, 127, 1, 1)', disabled: false },
白菜和萝卜: { color: 'rgba(201, 255, 148, 1)', disabled: false },
其他: { color: 'rgba(166, 224, 255, 1)', disabled: false },
};
// 图层字典
@ -1103,7 +1102,6 @@ onMounted(() => {
// 初始化
function initonMounted() {
theTimes(); //年
getaArea(); //面积
//地图
initmap();
showDaChangArea();
@ -1128,9 +1126,11 @@ function initonMounted() {
}
onUpdated(() => {
if (localStorage.getItem(router.currentRoute.value.path) == 'false') {
document.querySelector('.mode').style.display = 'block';
document.querySelector('.mode').innerText = '地图模式';
window.document.querySelector('#screenfull').style.display = 'none';
} else {
document.querySelector('.mode').style.display = 'block';
document.querySelector('.mode').innerText = '列表模式';
window.document.querySelector('#screenfull').style.display = 'block';
}
@ -1228,14 +1228,14 @@ function showDaChangArea() {
axios.get('/json/huangdao.json').then(({ data }) => {
const fts = new ol.format.GeoJSON().readFeatures(data);
const ft = fts[0];
addConver(ft.getGeometry().getCoordinates());
addConver(ft.getGeometry().getCoordinates(), 'huandao');
});
}
//添加遮罩
function addConver(data) {
function addConver(data, name) {
let source = new ol.source.Vector();
var converLayer = new ol.layer.Vector({
id: 'zhezhao',
id: name ? name : 'zhezhao',
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({
@ -1326,9 +1326,8 @@ function QueryData(e, name, url, item) {
if (item == '镇' && data.result.recordsets[0].features.features[0].properties.XJQYDM) {
let code = data.result.recordsets[0].features.features[0].properties.XJQYDM;
value.value = code;
getTownships();
let arr = [];
getTownship('370211').then(res => {
getTownship({ divisions: '370211', yearMonth: oldDatas.value.name }).then(res => {
res.data.forEach(item => {
if (item.tomeCode == code) {
name = item.tomeName;
@ -1344,7 +1343,7 @@ function QueryData(e, name, url, item) {
) {
let code = data.result.recordsets[0].features.features[0].properties.CJQYDM;
let arr = [];
getAdministrativeChun({ divisions: code }).then(res => {
getAdministrativeChun({ divisions: code, yearMonth: oldDatas.value.name }).then(res => {
res.data.forEach(item => {
arr.push(item);
});
@ -1671,7 +1670,7 @@ const getTownships = (city, time) => {
});
};
//村
const getvillages = city => {
const getvillages = (city, time) => {
dd = {
小麦: [],
玉米: [],
@ -1684,7 +1683,7 @@ const getvillages = city => {
白菜和萝卜: [],
其他: [],
};
getvillage({ divisions: city }).then(res => {
getvillage({ divisions: city, yearMonth: time }).then(res => {
Township.brr = res.data;
let arr = [...res.data];
let brr = [];
@ -1713,33 +1712,6 @@ const getvillages = city => {
ASdivision();
});
};
//面积
const getaArea = () => {
let arr = [];
let a = {};
getareas().then(res => {
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);
}
});
});
}
ASdivision();
// selectTab();
});
};
//作物分类面积统计
const getcroppers = (city, time) => {
@ -1853,7 +1825,6 @@ const getlistModes = value => {
function areachar() {
if (areaDiv.value) {
const areaDivIntance = echarts.init(areaDiv.value);
console.log(classData);
let option = {
// backgroundColor: 'rgba(255, 255, 255, 0.1)',
textStyle: {
@ -2018,7 +1989,7 @@ function areachar() {
],
tooltip: {
show: true,
formatter: '面积:{c0}',
// formatter: '面积:{c0}',
},
};
// option && areaDivIntance.setOption(option);
@ -2547,7 +2518,7 @@ function farmland() {
},
},
},
{
{
name: '地瓜',
type: 'bar',
barWidth: 12,
@ -2569,6 +2540,72 @@ function farmland() {
},
},
},
{
name: '玉米',
type: 'bar',
barWidth: 12,
stack: 'stack',
data: highStandarditem.玉米,
itemStyle: {
normal: {
barBorderRadius: 0,
color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
{
offset: 1,
color: 'rgba(255, 240, 26, 1)',
},
{
offset: 0,
color: 'rgba(255, 240, 26, 1)',
},
]),
},
},
},
{
name: '马铃薯',
type: 'bar',
barWidth: 12,
stack: 'stack',
data: highStandarditem.马铃薯,
itemStyle: {
normal: {
barBorderRadius: 0,
color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
{
offset: 1,
color: 'rgba(253, 127, 1, 1)',
},
{
offset: 0,
color: 'rgba(253, 127, 1, 1)',
},
]),
},
},
},
{
name: '白菜和萝卜',
type: 'bar',
barWidth: 12,
stack: 'stack',
data: highStandarditem.白菜和萝卜,
itemStyle: {
normal: {
barBorderRadius: 0,
color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
{
offset: 1,
color: 'rgba(201, 255, 148, 1)',
},
{
offset: 0,
color: 'rgba(201, 255, 148, 1)',
},
]),
},
},
},
{
name: '其他',
type: 'bar',
@ -2960,6 +2997,120 @@ function ASdivision() {
},
data: dd.蓝莓, // 系列中的数据内容数组
},
{
type: 'bar', // 系列类型
name: '玉米', // 系列名称, 用于tooltip的显示, legend 的图例筛选
// 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
stack: '总量',
barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
// 图形上的文本标签
label: {
show: true,
position: 'inside',
formatter: '玉米',
textStyle: {
fontSize: 12,
fontWeight: 'bolder',
color: 'black',
},
},
// 图形样式
itemStyle: {
barBorderRadius: [0, 0, 0, 0],
barBorderRadius: [0, 0, 0, 0], //
borderWidth: 1, // 设置边框宽度
borderColor: 'rgba(255, 240, 26, 1)', // 设置边框颜色
color: {
colorStops: [
{
offset: 0,
color: ' rgba(255, 240, 26, 1)', // 0% 处的颜色
},
{
offset: 1,
color: ' rgba(255, 240, 26, 1)', // 100% 处的颜色
},
],
},
},
data: dd.玉米, // 系列中的数据内容数组
},
{
type: 'bar', // 系列类型
name: '马铃薯', // 系列名称, 用于tooltip的显示, legend 的图例筛选
// 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
stack: '总量',
barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
// 图形上的文本标签
label: {
show: true,
position: 'inside',
formatter: '马铃薯',
textStyle: {
fontSize: 12,
fontWeight: 'bolder',
color: 'black',
},
},
// 图形样式
itemStyle: {
barBorderRadius: [0, 0, 0, 0],
barBorderRadius: [0, 0, 0, 0], //
borderWidth: 1, // 设置边框宽度
borderColor: 'rgba(253, 127, 1, 1)', // 设置边框颜色
color: {
colorStops: [
{
offset: 0,
color: ' rgba(253, 127, 1, 1)', // 0% 处的颜色
},
{
offset: 1,
color: ' rgba(253, 127, 1, 1)', // 100% 处的颜色
},
],
},
},
data: dd.马铃薯, // 系列中的数据内容数组
},
{
type: 'bar', // 系列类型
name: '白菜和萝卜', // 系列名称, 用于tooltip的显示, legend 的图例筛选
// 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
stack: '总量',
barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
// 图形上的文本标签
label: {
show: true,
position: 'inside',
formatter: '白菜和萝卜',
textStyle: {
fontSize: 12,
fontWeight: 'bolder',
color: 'black',
},
},
// 图形样式
itemStyle: {
barBorderRadius: [0, 0, 0, 0],
barBorderRadius: [0, 0, 0, 0], //
borderWidth: 1, // 设置边框宽度
borderColor: 'rgba(201, 255, 148, 1)', // 设置边框颜色
color: {
colorStops: [
{
offset: 0,
color: ' rgba(201, 255, 148, 1)', // 0% 处的颜色
},
{
offset: 1,
color: ' rgba(201, 255, 148, 1)', // 100% 处的颜色
},
],
},
},
data: dd.白菜和萝卜, // 系列中的数据内容数组
},
{
type: 'bar', // 系列类型
name: '其他', // 系列名称, 用于tooltip的显示, legend 的图例筛选
@ -3855,7 +4006,7 @@ $height: calc(100vh - 100px);
align-items: center;
justify-content: space-between;
p {
width: 223px;
width: 50%;
height: 28px;
line-height: 28px;
font-size: 14px;