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-13 14:00:48 +08:00
parent 0b17a7ad2d
commit c2ce122a52
11 changed files with 394 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files

402
src/views/crops/output/wheat/index.vue
View File

@ -246,9 +246,6 @@
<el-option label="花生" value="花生" /> -->
</el-select>
</el-form-item>
<el-form-item label="面积(亩)>">
<el-input-number v-model="num" :min="1" @change="handleChange" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
<el-button plain @click="resetForm" :disabled="!SwitchFlag ? true : false">
@ -277,28 +274,18 @@
>
<el-table-column align="center" prop="合计" width="80" />
<el-table-column
v-for="(item, index) in tableItem"
v-for="(item, index) in tableItemAll"
:key="index"
:prop="item.value"
:label="index == 0 ? item.lable : item.lable + '(亩)'"
:label="item.lable"
align="center"
/>
<el-table-column prop="address" v-if="operate" align="center" label="操作">
<template #default="scope">
<span
style="color: rgba(67, 181, 143, 1); cursor: pointer"
@click="download(scope.row)"
>
下载
</span>
</template>
</el-table-column>
</el-table>
</div>
<el-table
:data="tableNewData"
:header-cell-style="{ 'text-align': 'center' }"
height="70%"
height="80%"
highlight-current-row
header-row-class-name="tabth"
>
@ -313,19 +300,9 @@
v-for="(item, index) in tableItem"
:key="index"
:prop="item.value"
:label="index == 0 ? item.lable : item.lable + '(亩)'"
:label="item.lable"
align="center"
/>
<el-table-column prop="address" v-if="operate" align="center" label="操作">
<template #default="scope">
<span
style="color: rgba(67, 181, 143, 1); cursor: pointer"
@click="download(scope.row)"
>
下载
</span>
</template>
</el-table-column>
</el-table>
<div class="example-pagination-block">
共{{ insectarr.length }}条
@ -358,12 +335,14 @@ import {
getwheatGetAllTowns,
getwheatGetAllVillages,
getparameterEstimationYear,
getparameterEstimation
getparameterEstimation,
} from '@/api/crops/wheat.js';
import axios from 'axios';
import 'echarts-gl';
import { downLoadFile } from '@/utils/download.js';
import { useRouter } from 'vue-router';
const router = useRouter();
let viewer = ref(null);
const areaDiv = ref(null);
const farmlandDiv = ref(null);
@ -385,16 +364,14 @@ let currentPage = ref(1); //当前页
let pageSize = ref(12); //每页条数
let tableNewData = ref([]);
let tableItem = ref([]);
let tableItemAll = ref([]);
const num = ref(1);
let operate = ref(true);
const chartModeDiv = ref(null);
let amount = ref([
{
湿润: 0,
适宜: 0,
轻度干旱: 0,
中度干旱: 0,
重度干旱: 0,
wheatUnitOutputValue: 0,
wheatOutput: 0,
},
]);
//搜索
@ -424,6 +401,10 @@ let areatext = '8383894';
// 组件挂载完成后执行
onMounted(() => {
initonMounted();
});
function initonMounted() {
getwheatTotalYearValues(); //作物产量预估
getwheatHeightStandardFarmlands(); //高标准农田
getwheatGetAllTownss(); //镇级
@ -434,6 +415,13 @@ onMounted(() => {
// ProgressBar();
ASdivision();
getFarmland();
}
onUpdated(() => {
if (localStorage.getItem(router.currentRoute.value.path) == 'false') {
document.querySelector('.mode').innerText = '地图模式';
} else {
document.querySelector('.mode').innerText = '列表模式';
}
});
/*-------------地图------------------------*/
@ -895,7 +883,7 @@ const getparameterEstimationYears = () => {
console.log(res.data);
formInline.value.time = res.data[res.data.length - 1];
timeArr.value = res.data;
onSubmit()
onSubmit();
});
};
@ -987,6 +975,13 @@ const Deta3 = item => {
});
}
};
const dowcity = () => {
console.log(insectarr);
let arr = JSON.parse(JSON.stringify(amount.value[0]));
console.log(arr);
insectarr.value.push(arr);
exportExcel(insectarr.value, '干旱面积统计表', 'Sheet1');
};
const onSubmit = () => {
let arr = [];
@ -995,10 +990,9 @@ const onSubmit = () => {
getparameterEstimation({
year: formInline.value.time,
statistical: formInline.value.statistical,
type:formInline.value.droughtRating,
type: formInline.value.droughtRating,
area: formInline.value.area,
}).then(res => {
console.log(res.data)
tableItem.value = [
{
lable: '地区',
@ -1006,66 +1000,46 @@ const onSubmit = () => {
},
{
lable: '单产量(斤/亩)',
value: '适宜',
value: 'wheatUnitOutputValue',
},
{
lable: '总产量(吨)',
value: '湿润',
value: 'wheatOutput',
},
];
tableItemAll.value = [
{
lable: '',
value: 'subName',
},
{
lable: '单产量(斤/亩)',
value: 'wheatUnitOutputValue',
},
{
lable: '总产量(吨)',
value: 'wheatOutput',
},
];
res.data.forEach(item => {
if (arr.indexOf(item.region) == -1) {
arr.push(item.region);
}
});
arr.forEach(item => {
brr.push(
Object.create(null, {
regio: {
value: item,
},
})
);
});
brr.forEach(item => {
res.data.map(i => {
if (item.regio === i.region) {
item['region'] = i.region;
item[i.level] = Number(i.area).toFixed(2);
}
});
});
operate.value = false;
insectarr.value = brr;
tableNewData.value = brr.slice(
insectarr.value = res.data;
tableNewData.value = res.data.slice(
(currentPage.value - 1) * pageSize.value,
(currentPage.value - 1) * pageSize.value + pageSize.value
);
amount.value[0]['适宜'] = 0;
amount.value[0]['湿润'] = 0;
amount.value[0]['轻度干旱'] = 0;
amount.value[0]['中度干旱'] = 0;
amount.value[0]['重度干旱'] = 0;
amount.value[0]['region'] = '合计';
brr.forEach(item => {
item.适宜
? (amount.value[0]['适宜'] += Number(item.适宜) !== NaN ? Number(item.适宜) : 0)
amount.value[0]['wheatUnitOutputValue'] = 0;
amount.value[0]['wheatOutput'] = 0;
amount.value[0]['subName'] = '合计';
res.data.forEach(item => {
item.wheatUnitOutputValue
? (amount.value[0]['wheatUnitOutputValue'] +=
Number(item.wheatUnitOutputValue) !== NaN
? Number(item.wheatUnitOutputValue)
: 0)
: 0;
item.湿润
? (amount.value[0]['湿润'] += Number(item.湿润) !== NaN ? Number(item.湿润) : 0)
: 0;
item.轻度干旱
? (amount.value[0]['轻度干旱'] +=
Number(item.轻度干旱) !== NaN ? Number(item.轻度干旱) : 0)
: 0;
item.中度干旱
? (amount.value[0]['中度干旱'] +=
Number(item.中度干旱) !== NaN ? Number(item.中度干旱) : 0)
: 0;
item.重度干旱
? (amount.value[0]['重度干旱'] +=
Number(item.重度干旱) !== NaN ? Number(item.重度干旱) : 0)
item.wheatOutput
? (amount.value[0]['wheatOutput'] +=
Number(item.wheatOutput) !== NaN ? Number(item.wheatOutput) : 0)
: 0;
});
for (const key in amount.value[0]) {
@ -1074,6 +1048,7 @@ const onSubmit = () => {
amount.value[0][key] = amount.value[0][key].toFixed(2);
}
}
console.log(amount);
const statInfo = chartModeDiv.value; // 获取图表元素
statInfo.style.width = window.innerWidth - 100 + 'px'; //初始化echarts图表宽度
statInfo.style.height = window.innerHeight - 100 + 'px';
@ -1738,58 +1713,60 @@ function ASdivision() {
function chartModes() {
const ASdivisionDivIntance = echarts.init(chartModeDiv.value);
let arr = [];
let 湿润 = [];
let 适宜 = [];
let 轻度干旱 = [];
let 中度干旱 = [];
let 重度干旱 = [];
let 单产量 = [];
let 总产量 = [];
insectarr.value.forEach(item => {
console.log(item.重度干旱);
arr.push(item.region);
item.湿润 !== undefined ? 湿润.push(item.湿润) : 湿润.push(0);
item.适宜 !== undefined ? 适宜.push(item.适宜) : 适宜.push(0);
item.轻度干旱 !== undefined ? 轻度干旱.push(item.轻度干旱) : 轻度干旱.push(0);
item.中度干旱 !== undefined ? 中度干旱.push(item.中度干旱) : 中度干旱.push(0);
item.重度干旱 !== undefined ? 重度干旱.push(item.重度干旱) : 重度干旱.push(0);
arr.push(item.subName);
item.wheatUnitOutputValue !== undefined
? 单产量.push(item.wheatUnitOutputValue)
: 单产量.push(0);
item.wheatOutput !== undefined ? 总产量.push(item.wheatOutput) : 总产量.push(0);
});
let ends = (10 / arr.length) * 100;
let option = {
// backgroundColor: 'rgba(5, 38, 75, 0.1)',
color: ['rgba(4, 247, 227, 1)', 'rgba(33, 187, 251, 1)'],
tooltip: {
trigger: 'axis',
formatter: function (params) {
let tipStr = params[0].axisValueLabel + '</br>';
let totalNum = 0;
for (let i = 0; i < params.length; i++) {
totalNum += params[i].value;
if (params[i].seriesName !== '合计') {
tipStr += params[i].seriesName + '：' + params[i].value + '</br>';
formatter: function (params, ticket, callback) {
var res = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
if (params[i].seriesType === 'line') {
res +=
'<br/>' +
params[i].seriesName +
' : ' +
(params[i].value ? params[i].value : '-') +
'h';
} else {
res +=
'<br/>' +
params[i].seriesName +
' : ' +
(params[i].value ? params[i].value : '-');
}
}
for (let i = 0; i < params.length; i++) {
totalNum += Number(params[i].value);
if (params[i].seriesName === '合计') {
tipStr += '合计：' + totalNum;
}
}
return tipStr;
},
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
return res;
},
},
legend: {
top: 5,
left: 10,
icon: 'rect',
itemWidth: 4, // 图例图表宽度
itemHeight: 12, // 图例图标高度
data: [],
grid: {
top: '15%',
bottom: '15%',
},
// legend: {
// data: ['人群数量', '基金金额'],
// textStyle: {
// color: '#fff',
// fontSize: 12,
// },
// type: 'scroll',
// },
dataZoom: [
{
type: 'slider',
width: '40%',
zoomLock: true,
top: '90%',
start: 0,
end: ends,
@ -1812,142 +1789,101 @@ function chartModes() {
type: 'inside',
},
],
grid: {
left: '3%',
right: '10%',
bottom: '15%',
top: '5%',
containLabel: true,
},
xAxis: {
type: 'category',
name: '区域',
axisLabel: {
fontSize: 12,
interval: 0,
rotate: 0,
},
axisLine: {
lineStyle: {
// color: '#cbeaf6', // x坐标轴线颜色
},
},
data: arr,
},
yAxis: [
xAxis: [
{
type: 'value',
name: '面积（亩）',
type: 'category',
nameTextStyle: {
fontSize: 12,
},
axisLabel: {
// color: '#cbeaf6', // 坐标轴label文字颜色
fontSize: 14,
relativeSize: -2,
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
// color: '#cbeaf6', // y坐标轴线颜色
color: 'rgba(102, 102, 102, 1)',
},
},
axisPointer: {
type: 'shadow',
},
data: arr,
},
],
yAxis: [
{
type: 'value',
name: '单产量(斤/亩)',
splitLine: {
// 网格线
show: true,
lineStyle: {
// type: 'dashed', // 设置网格线类型 dotted：虚线 solid:实线
// color: '#395367',
type: 'dashed',
},
},
nameTextStyle: {
fontSize: 12,
},
axisLabel: {
fontSize: 14,
relativeSize: -2,
formatter: '{value}',
},
axisLine: {
lineStyle: {
color: 'rgba(102, 102, 102, 1)',
},
},
min: 0,
position: 'top',
},
{
type: 'value',
name: '总产量(吨)',
min: 0,
position: 'bottom',
splitLine: {
show: false,
},
nameTextStyle: {
fontSize: 12,
},
axisLabel: {
fontSize: 14,
relativeSize: -2,
formatter: '{value}',
},
axisLine: {
lineStyle: {
color: 'rgba(102, 102, 102, 1)',
},
show: true, // 隐藏或显示
},
},
],
series: [
{
name: '湿润',
name: '单产量(斤/亩)',
type: 'bar',
barWidth: 13,
stack: '分类',
itemStyle: {
color: 'rgba(255, 141, 26, 1)',
},
data: 湿润,
yAxisIndex: 0,
data: 单产量,
},
{
name: '适宜',
name: '总产量(吨)',
type: 'bar',
barWidth: 13,
stack: '分类',
itemStyle: {
color: 'rgba(255, 255, 26, 1)',
},
data: 适宜,
},
{
name: '轻度干旱',
type: 'bar',
barWidth: 13,
stack: '分类',
itemStyle: {
color: 'rgba(255, 201, 148, 1)',
},
data: 轻度干旱,
},
{
name: '中度干旱',
type: 'bar',
barWidth: 13,
stack: '分类',
itemStyle: {
color: 'rgba(255, 84, 84, 1)',
},
data: 中度干旱,
},
{
name: '重度干旱',
type: 'bar',
barWidth: 13,
stack: '分类',
itemStyle: {
color: 'rgba(255, 140, 255, 1)',
},
data: 重度干旱,
yAxisIndex: 1,
data: 总产量,
},
],
};
var series = option.series;
var tooltip = option.tooltip;
// 提示框自定义内容包括总合及文字
function formatFun(params) {
// console.log('params====>', params)
let tipStr = params[0].axisValueLabel + '</br>'; // 初始化提示框文字默认当前轴名称并换行
let totalNum = 0; // 用于存储当前列总数
// params为当前柱状图数组数量 遍历求和并添加类目label：value
for (let i = 0; i < params.length; i++) {
if (params[i].seriesName !== '合计') {
const dotHtml = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params[i].color}"></span>`;
totalNum += params[i].value;
tipStr += dotHtml + params[i].seriesName + '：' + params[i].value + '</br>';
}
}
// 添加最后的合计行 数据为每列总合
for (let i = 0; i < params.length; i++) {
if (params[i].seriesName === '合计') {
tipStr += '合计：' + totalNum;
}
}
return tipStr;
}
tooltip.formatter = formatFun;
// 指定函数计算总合
function fun(params) {
var dataSum = 0;
for (var i = 0; i < series.length; i++) {
dataSum += series[i].data[params.dataIndex];
}
return dataSum;
}
// 加载页面时候替换最后一个series的formatter
// series[series.length - 1].label.normal.formatter = fun;
useEcharts(ASdivisionDivIntance, option);
}
/*--------------------------------------------------------------------------------------------*/
function getAreaFenlei() {
let fl = fenleiRef.value;