统计分析页面构建
This commit is contained in:
lzc
parent
ac0eef1407
commit
91cf7b3b3c
@ -21,7 +21,7 @@
|
|||||||
"@wangeditor/editor": "^5.1.23",
|
"@wangeditor/editor": "^5.1.23",
|
||||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||||
"axios": "^1.6.5",
|
"axios": "^1.6.5",
|
||||||
"echarts": "^5.5.0",
|
"echarts": "^5.6.0",
|
||||||
"element-plus": "^2.7.2",
|
"element-plus": "^2.7.2",
|
||||||
"js-base64": "^3.7.6",
|
"js-base64": "^3.7.6",
|
||||||
"lodash": "^4.17.21",
|
"lodash": "^4.17.21",
|
||||||
|
|||||||
@ -58,9 +58,8 @@ export function exportAnnua(params = {}) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function delAnnual(params) {
|
export function delAnnual(params) {
|
||||||
return request('/trace/code/annualManage/delete', {
|
return request('/trace/code/annualManage/delete/' + params.id, {
|
||||||
method: 'DELETE',
|
method: 'DELETE',
|
||||||
params,
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -93,3 +92,37 @@ export function exportPlan(params = {}) {
|
|||||||
responseType: 'blob',
|
responseType: 'blob',
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function delPlan(params) {
|
||||||
|
return request('land-resource/planManage/delete/' + params.id, {
|
||||||
|
method: 'DELETE',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
//种植阶段相关
|
||||||
|
export function getPlantingStage(params = {}) {
|
||||||
|
return request('land-resource/planManage/pageStage', {
|
||||||
|
method: 'GET',
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function savePlantingStage(data) {
|
||||||
|
return request('land-resource/planManage/stageSave', {
|
||||||
|
method: 'POST',
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function editPlantingStage(data = {}) {
|
||||||
|
return request('land-resource/planManage/editStage', {
|
||||||
|
method: 'PUT',
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function delPlantingStage(params) {
|
||||||
|
return request('land-resource/planManage/deleteStage/' + params.id, {
|
||||||
|
method: 'DELETE',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|||||||
@ -13,6 +13,7 @@ import resourceRouter from './modules/resource';
|
|||||||
import plantingAndBreedingRouter from './modules/plantingAndBreeding';
|
import plantingAndBreedingRouter from './modules/plantingAndBreeding';
|
||||||
import landsRoutes from './modules/lands';
|
import landsRoutes from './modules/lands';
|
||||||
import annualplanRoutes from './modules/annualplan';
|
import annualplanRoutes from './modules/annualplan';
|
||||||
|
import statisticsRoutes from './modules/statistics';
|
||||||
|
|
||||||
const { VITE_APP_NAME } = import.meta.env;
|
const { VITE_APP_NAME } = import.meta.env;
|
||||||
|
|
||||||
@ -58,6 +59,7 @@ export const constantRoutes = [
|
|||||||
...plantingAndBreedingRouter,
|
...plantingAndBreedingRouter,
|
||||||
...annualplanRoutes,
|
...annualplanRoutes,
|
||||||
...landsRoutes,
|
...landsRoutes,
|
||||||
|
...statisticsRoutes,
|
||||||
];
|
];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@ -0,0 +1,32 @@
|
|||||||
|
import Layout from '@/layouts/index.vue';
|
||||||
|
|
||||||
|
const statisticsRoutes = [
|
||||||
|
{
|
||||||
|
path: '/statistics',
|
||||||
|
name: 'statistics',
|
||||||
|
component: Layout,
|
||||||
|
redirect: '/utilizePlan',
|
||||||
|
meta: { title: '统计分析', icon: 'Document' },
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '/utilizePlan',
|
||||||
|
name: 'utilizePlan',
|
||||||
|
component: () => import('@/views/statistics/component/utilizePlan/index.vue'),
|
||||||
|
meta: { title: '土地利用与规划分析', icon: 'Document' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/agriculture',
|
||||||
|
name: 'agriculture',
|
||||||
|
component: () => import('@/views/statistics/component/agriculture/index.vue'),
|
||||||
|
meta: { title: '农业生产效率分析', icon: 'Document' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/environment',
|
||||||
|
name: 'environment',
|
||||||
|
component: () => import('@/views/statistics/component/environment/index.vue'),
|
||||||
|
meta: { title: '环境影响与经济效益分析', icon: 'Document' },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
export default statisticsRoutes;
|
||||||
@ -30,18 +30,18 @@
|
|||||||
<el-table-column label="计划进度" prop="planProgress" show-overflow-tooltip />
|
<el-table-column label="计划进度" prop="planProgress" show-overflow-tooltip />
|
||||||
<el-table-column label="状态" prop="planStatus" show-overflow-tooltip>
|
<el-table-column label="状态" prop="planStatus" show-overflow-tooltip>
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<el-tag v-if="row.planStatus == '1'" type="warning">待提交</el-tag>
|
<el-tag v-if="row.planStatus == '1'" type="warning" size="small">待提交</el-tag>
|
||||||
<el-tag v-if="row.planStatus == '2'" type="primary">审核中</el-tag>
|
<el-tag v-if="row.planStatus == '2'" type="primary" size="small">审核中</el-tag>
|
||||||
<el-tag v-if="row.planStatus == '3'" type="success">通过</el-tag>
|
<el-tag v-if="row.planStatus == '3'" type="success" size="small">通过</el-tag>
|
||||||
<el-tag v-if="row.planStatus == '4'" type="danger">拒绝</el-tag>
|
<el-tag v-if="row.planStatus == '4'" type="danger" size="small">拒绝</el-tag>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column fixed="right" label="操作" width="380" show-overflow-tooltip>
|
<el-table-column fixed="right" label="操作" width="280" show-overflow-tooltip>
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<el-button type="primary" @click="doExam(row)">审核</el-button>
|
<el-button type="primary" size="small" @click="doExam(row)">审核</el-button>
|
||||||
<el-button type="primary" @click="doEdit(row)">编辑</el-button>
|
<el-button type="primary" size="small" @click="doEdit(row)">编辑</el-button>
|
||||||
<el-button type="primary" @click="doDetail(row)">详情</el-button>
|
<el-button type="primary" size="small" @click="doDetail(row)">详情</el-button>
|
||||||
<el-button type="danger" @click="doDel(row)">删除</el-button>
|
<el-button type="danger" size="small" @click="doDel(row)">删除</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
|
|||||||
@ -1,19 +1,355 @@
|
|||||||
<template>
|
<template>
|
||||||
<section>作业记录</section>
|
<div class="custom-page">
|
||||||
|
<avue-crud
|
||||||
|
ref="crudRef"
|
||||||
|
v-model="state.form"
|
||||||
|
v-model:search="state.query"
|
||||||
|
v-model:page="state.pageData"
|
||||||
|
:table-loading="state.loading"
|
||||||
|
:data="state.data"
|
||||||
|
:option="state.options"
|
||||||
|
@refresh-change="refreshChange"
|
||||||
|
@search-reset="searchChange"
|
||||||
|
@search-change="searchChange"
|
||||||
|
@selection-change="selectionChange"
|
||||||
|
@current-change="currentChange"
|
||||||
|
@size-change="sizeChange"
|
||||||
|
@row-save="rowSave"
|
||||||
|
@row-update="rowUpdate"
|
||||||
|
@row-del="rowDel"
|
||||||
|
>
|
||||||
|
<template #menu-left>
|
||||||
|
<el-button type="success" icon="download" @click="onExport">导出</el-button>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<template #menu="scope">
|
||||||
import { ref } from 'vue';
|
<custom-table-operate :actions="state.options.actions" :data="scope" />
|
||||||
|
</template>
|
||||||
|
</avue-crud>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { reactive, ref } from 'vue';
|
||||||
|
import { useApp } from '@/hooks';
|
||||||
|
import { CRUD_OPTIONS } from '@/config';
|
||||||
|
import { isEmpty, downloadFile } from '@/utils';
|
||||||
|
import { useUserStore } from '@/store/modules/user';
|
||||||
|
import { compact } from 'lodash';
|
||||||
|
import { GetEntityList, AddEntity, UpdateEntity, DeleteEntity, ExportEntity } from '@/apis/grid';
|
||||||
|
|
||||||
/* --------------- data --------------- */
|
const { VITE_APP_BASE_API } = import.meta.env;
|
||||||
// #region
|
const app = useApp();
|
||||||
|
const UserStore = useUserStore();
|
||||||
|
const crudRef = ref(null);
|
||||||
|
const handleLandChange = async (value, form, done) => {
|
||||||
|
if (!value) return; // 如果没有选择任何地块，则直接返回
|
||||||
|
state.form.address = value.item?.address || '';
|
||||||
|
};
|
||||||
|
|
||||||
// #endregion
|
const JobTypeChange = async (value, form, done) => {
|
||||||
|
if (!value) return;
|
||||||
|
state.form.productName = value.item?.productName || '';
|
||||||
|
};
|
||||||
|
|
||||||
/* --------------- methods --------------- */
|
const state = reactive({
|
||||||
// #region
|
loading: false,
|
||||||
|
query: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
},
|
||||||
|
form: {},
|
||||||
|
selection: [],
|
||||||
|
options: {
|
||||||
|
...CRUD_OPTIONS,
|
||||||
|
addBtnText: '新增作业',
|
||||||
|
column: [
|
||||||
|
{
|
||||||
|
label: '作业日期',
|
||||||
|
prop: 'buyTime',
|
||||||
|
type: 'date',
|
||||||
|
format: 'YYYY-MM-DD',
|
||||||
|
valueFormat: 'YYYY-MM-DD',
|
||||||
|
width: 200,
|
||||||
|
rules: {
|
||||||
|
required: true,
|
||||||
|
message: '请选择作业日期',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '执行人',
|
||||||
|
prop: 'user',
|
||||||
|
type: 'select',
|
||||||
|
search: true,
|
||||||
|
dicData: [
|
||||||
|
{ label: '小A', value: 0 },
|
||||||
|
{ label: '小B', value: 1 },
|
||||||
|
{ label: '小C', value: 2 },
|
||||||
|
],
|
||||||
|
rules: {
|
||||||
|
required: true,
|
||||||
|
message: '请选择',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '地块',
|
||||||
|
prop: 'landId',
|
||||||
|
type: 'select',
|
||||||
|
remote: true,
|
||||||
|
props: {
|
||||||
|
label: 'landName',
|
||||||
|
value: 'id',
|
||||||
|
},
|
||||||
|
dicHeaders: {
|
||||||
|
authorization: UserStore.token,
|
||||||
|
},
|
||||||
|
dicUrl: `${VITE_APP_BASE_API}/land-resource/landManage/page?current=1&size=10&draftsSaveType=0&landType=1&landName=&gridName=&owner=`,
|
||||||
|
dicFormatter: (res) => res.data.records ?? [],
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请选择地块',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
change: handleLandChange,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '位置',
|
||||||
|
prop: 'address',
|
||||||
|
fixed: true,
|
||||||
|
disabled: true,
|
||||||
|
rules: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '产物',
|
||||||
|
prop: 'gridManager',
|
||||||
|
rules: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '作业类型',
|
||||||
|
prop: 'jobType',
|
||||||
|
type: 'select',
|
||||||
|
search: true,
|
||||||
|
dicData: [
|
||||||
|
{ label: '育苗', value: 0, productName: '旱地水稻' },
|
||||||
|
{ label: '灌溉', value: 1, productName: '化肥水' },
|
||||||
|
{ label: '施肥', value: 2, productName: '氮肥' },
|
||||||
|
],
|
||||||
|
rules: {
|
||||||
|
required: true,
|
||||||
|
message: '请选择',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
change: JobTypeChange,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '投入品名',
|
||||||
|
prop: 'productName',
|
||||||
|
rules: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '投入品牌',
|
||||||
|
prop: 'contactInfo',
|
||||||
|
rules: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
name: '编辑',
|
||||||
|
icon: 'edit',
|
||||||
|
event: ({ row }) => rowEdit(row),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'danger',
|
||||||
|
name: '删除',
|
||||||
|
icon: 'delete',
|
||||||
|
event: ({ row }) => rowDel(row),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
pageData: {
|
||||||
|
total: 0,
|
||||||
|
currentPage: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
},
|
||||||
|
data: [],
|
||||||
|
currentRow: {},
|
||||||
|
});
|
||||||
|
|
||||||
// #endregion
|
// 加载
|
||||||
|
const loadData = () => {
|
||||||
|
state.loading = true;
|
||||||
|
// GetEntityList(state.query)
|
||||||
|
// .then((res) => {
|
||||||
|
// if (res.code === 200) {
|
||||||
|
// const { current, size, total, records } = res.data;
|
||||||
|
// state.data = records;
|
||||||
|
// state.pageData = {
|
||||||
|
// currentPage: current || 1,
|
||||||
|
// pageSize: size || 10,
|
||||||
|
// total: total,
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// .catch((err) => {
|
||||||
|
// app.$message.error(err.msg);
|
||||||
|
// state.data = [];
|
||||||
|
// })
|
||||||
|
// .finally(() => {
|
||||||
|
// state.loading = false;
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
|
||||||
|
loadData();
|
||||||
|
|
||||||
|
// 页数
|
||||||
|
const currentChange = (current) => {
|
||||||
|
state.query.current = current;
|
||||||
|
loadData();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 条数
|
||||||
|
const sizeChange = (size) => {
|
||||||
|
state.query.size = size;
|
||||||
|
loadData();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 搜索
|
||||||
|
const searchChange = (params, done) => {
|
||||||
|
if (done) done();
|
||||||
|
state.query = params;
|
||||||
|
state.query.current = 1;
|
||||||
|
loadData();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 刷新
|
||||||
|
const refreshChange = () => {
|
||||||
|
loadData();
|
||||||
|
app.$message.success('刷新成功');
|
||||||
|
};
|
||||||
|
|
||||||
|
// 选择
|
||||||
|
const selectionChange = (rows) => {
|
||||||
|
state.selection = rows;
|
||||||
|
};
|
||||||
|
|
||||||
|
const setCity = (row) => {
|
||||||
|
if (!isEmpty(row.cities)) {
|
||||||
|
row.provinceCode = row?.cities[0] ?? null;
|
||||||
|
row.cityCode = row?.cities[1] ?? null;
|
||||||
|
row.gridAreaCode = row?.cities[2] ?? null;
|
||||||
|
row.townCode = row?.cities[3] ?? null;
|
||||||
|
row.village = row?.cities[3] ?? null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 新增
|
||||||
|
const rowSave = (row, done, loading) => {
|
||||||
|
console.info('新增');
|
||||||
|
// AddEntity(row)
|
||||||
|
// .then((res) => {
|
||||||
|
// if (res.code === 200) {
|
||||||
|
// app.$message.success('添加成功！');
|
||||||
|
// done();
|
||||||
|
// loadData();
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// .catch((err) => {
|
||||||
|
// app.$message.error(err.msg);
|
||||||
|
// })
|
||||||
|
// .finally(() => {
|
||||||
|
// loading();
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
|
||||||
|
// 编辑
|
||||||
|
const rowEdit = (row) => {
|
||||||
|
console.info('编辑');
|
||||||
|
// row.cities = compact([row.provinceCode, row.cityCode, row.gridAreaCode ?? '', row.townCode ?? '', row.village ?? '']);
|
||||||
|
crudRef.value.rowEdit(row);
|
||||||
|
};
|
||||||
|
const rowUpdate = (row, index, done, loading) => {
|
||||||
|
console.info('更新');
|
||||||
|
// UpdateEntity(row)
|
||||||
|
// .then((res) => {
|
||||||
|
// if (res.code === 200) {
|
||||||
|
// app.$message.success('更新成功！');
|
||||||
|
// done();
|
||||||
|
// loadData();
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// .catch((err) => {
|
||||||
|
// app.$message.error(err.msg);
|
||||||
|
// })
|
||||||
|
// .finally(() => {
|
||||||
|
// loading();
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
|
||||||
|
// 删除
|
||||||
|
const rowDel = (row, index, done) => {
|
||||||
|
if (isEmpty(row)) return;
|
||||||
|
app
|
||||||
|
.$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
console.info('删除');
|
||||||
|
// DeleteEntity({ id: row.id })
|
||||||
|
// .then((res) => {
|
||||||
|
// if (res.code === 200) {
|
||||||
|
// app.$message.success('删除成功！');
|
||||||
|
// done();
|
||||||
|
// loadData();
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// .catch((err) => {
|
||||||
|
// app.$message.error(err.msg);
|
||||||
|
// });
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 导出
|
||||||
|
const onExport = () => {
|
||||||
|
if (isEmpty(state.data)) {
|
||||||
|
app.$message.error('当前暂时没有可供导出的数据！');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
state.loading = true;
|
||||||
|
const fileName = '作业记录明细表';
|
||||||
|
// ExportEntity(state.query)
|
||||||
|
// .then((res) => {
|
||||||
|
// if (res.status === 200) {
|
||||||
|
// downloadFile(res.data, `${fileName}.xlsx`, 'blob');
|
||||||
|
// app.$message.success('导出成功！');
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// .catch((err) => {
|
||||||
|
// app.$message.error('导出失败！');
|
||||||
|
// })
|
||||||
|
// .finally(() => {
|
||||||
|
// state.loading = false;
|
||||||
|
// });
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
|
||||||
|
|||||||
@ -29,7 +29,7 @@
|
|||||||
{{ item.label }}
|
{{ item.label }}
|
||||||
</el-button>
|
</el-button>
|
||||||
</div>
|
</div>
|
||||||
<el-table :data="list" @selection-change="selectionChange">
|
<el-table :data="list" @selection-change="selectionChange" @row-click="rowClick">
|
||||||
<el-table-column type="selection" width="55" />
|
<el-table-column type="selection" width="55" />
|
||||||
<el-table-column type="index"> </el-table-column>
|
<el-table-column type="index"> </el-table-column>
|
||||||
<el-table-column label="地块名" prop="landName" width="240" show-overflow-tooltip />
|
<el-table-column label="地块名" prop="landName" width="240" show-overflow-tooltip />
|
||||||
@ -47,10 +47,10 @@
|
|||||||
<el-table-column label="种子供应商" prop="seedSupplier" show-overflow-tooltip />
|
<el-table-column label="种子供应商" prop="seedSupplier" show-overflow-tooltip />
|
||||||
<el-table-column label="年度计划" prop="planName" show-overflow-tooltip />
|
<el-table-column label="年度计划" prop="planName" show-overflow-tooltip />
|
||||||
<el-table-column label="种植日期" prop="planDate" show-overflow-tooltip />
|
<el-table-column label="种植日期" prop="planDate" show-overflow-tooltip />
|
||||||
<el-table-column fixed="right" label="操作" width="200" show-overflow-tooltip>
|
<el-table-column fixed="right" label="操作" width="160" show-overflow-tooltip>
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<el-button type="primary" @click="doEdit(row)">编辑</el-button>
|
<el-button type="primary" size="small" @click="doEdit(row)">编辑</el-button>
|
||||||
<el-button type="danger" @click="doDel(row)">删除</el-button>
|
<el-button type="danger" size="small" @click="doDel(row)">删除</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
@ -103,9 +103,6 @@
|
|||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-form-item label="年度计划" prop="planId">
|
<el-form-item label="年度计划" prop="planId">
|
||||||
<!-- <el-select v-model="infoData.plan" placeholder="请选择年度计划" style="width: 240px" :clearable="true">
|
|
||||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
|
||||||
</el-select> -->
|
|
||||||
<CustomSelect
|
<CustomSelect
|
||||||
v-model:value="infoData.planId"
|
v-model:value="infoData.planId"
|
||||||
:set="{
|
:set="{
|
||||||
@ -144,24 +141,83 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<el-button type="primary" @click="getStageList()">查询</el-button>
|
<el-button type="primary" @click="handleSearchStage">查询</el-button>
|
||||||
<el-button type="" @click="handleResetStage">重置</el-button>
|
<el-button type="" @click="handleResetStage">重置</el-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</el-form>
|
</el-form>
|
||||||
<el-table :data="sublist">
|
<el-table :data="sublist">
|
||||||
<el-table-column type="selection" width="55" />
|
|
||||||
<el-table-column type="index"> </el-table-column>
|
<el-table-column type="index"> </el-table-column>
|
||||||
<el-table-column label="所属阶段" prop="landName" width="240" show-overflow-tooltip />
|
<el-table-column label="所属阶段" prop="stage">
|
||||||
<el-table-column label="作业计划" prop="address" show-overflow-tooltip />
|
<template #default="{ row }">
|
||||||
<el-table-column label="作业时间" prop="owner" show-overflow-tooltip />
|
<el-tag size="small">{{ stageObj[row.stage] }}</el-tag>
|
||||||
<el-table-column label="结束时间" prop="owner" show-overflow-tooltip />
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="作业计划" prop="operationType" show-overflow-tooltip />
|
||||||
|
<el-table-column label="作业时间" prop="operationDate" show-overflow-tooltip />
|
||||||
|
<el-table-column label="结束时间" prop="createTime" show-overflow-tooltip />
|
||||||
<el-table-column fixed="right" label="操作" width="200" show-overflow-tooltip>
|
<el-table-column fixed="right" label="操作" width="200" show-overflow-tooltip>
|
||||||
<el-button type="primary" @click="doSubEdit()">编辑</el-button>
|
<template #default="{ row }">
|
||||||
<el-button type="danger" @click="doSubDel()">删除</el-button>
|
<el-button type="primary" size="small" @click="doSubEdit(row)">编辑</el-button>
|
||||||
|
<el-button type="danger" size="small" @click="doSubDel(row)">删除</el-button>
|
||||||
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
<Pagina :page-data="subPageData" />
|
<Pagina :page-data="subPageData" />
|
||||||
|
<el-dialog v-model="stageInfoVisible" title="种植阶段" width="800" center>
|
||||||
|
<el-form ref="stageInfoRef" :model="stageInfoData" :rules="stageInfoRules">
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="地块:" prop="landName">
|
||||||
|
<el-input v-model="stageInfoData.landName" placeholder="请输入地块" style="width: 240px" :disabled="true"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="种植产物" prop="crop">
|
||||||
|
<el-input v-model="stageInfoData.crop" placeholder="请输入种植产物" style="width: 240px" :disabled="true"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="种植阶段" prop="stage">
|
||||||
|
<CustomSelect
|
||||||
|
v-model:value="stageInfoData.stage"
|
||||||
|
:set="{
|
||||||
|
url: '',
|
||||||
|
options: stageOptions,
|
||||||
|
props: {
|
||||||
|
value: 'value',
|
||||||
|
label: 'label',
|
||||||
|
},
|
||||||
|
}"
|
||||||
|
placeholder="请选择种植阶段"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="作业计划" prop="workId">
|
||||||
|
<CustomSelect
|
||||||
|
v-model:value="stageInfoData.workId"
|
||||||
|
:set="{
|
||||||
|
url: '',
|
||||||
|
options: workOptions,
|
||||||
|
props: {
|
||||||
|
value: 'id',
|
||||||
|
label: 'planName',
|
||||||
|
},
|
||||||
|
}"
|
||||||
|
placeholder="请选择作业计划"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<el-button @click="infoCancel">取消</el-button>
|
||||||
|
<el-button type="primary" @click="subMitStateInfo(stageInfoRef)"> 确认 </el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</CustCard>
|
</CustCard>
|
||||||
@ -171,7 +227,17 @@
|
|||||||
import { ref, reactive, onMounted } from 'vue';
|
import { ref, reactive, onMounted } from 'vue';
|
||||||
import Pagina from '@/components/pagina.vue';
|
import Pagina from '@/components/pagina.vue';
|
||||||
import CustCard from '@/components/CustCard.vue';
|
import CustCard from '@/components/CustCard.vue';
|
||||||
import { getPlanList, savePlan, exportPlan, editAlan } from '@/apis/land.js';
|
import {
|
||||||
|
getPlanList,
|
||||||
|
savePlan,
|
||||||
|
exportPlan,
|
||||||
|
editAlan,
|
||||||
|
delPlan,
|
||||||
|
getPlantingStage,
|
||||||
|
savePlantingStage,
|
||||||
|
editPlantingStage,
|
||||||
|
delPlantingStage,
|
||||||
|
} from '@/apis/land.js';
|
||||||
import { useApp } from '@/hooks';
|
import { useApp } from '@/hooks';
|
||||||
import CustomSelect from '@/components/CustomSelect.vue';
|
import CustomSelect from '@/components/CustomSelect.vue';
|
||||||
import { isEmpty, imageToBase64, getAssetsFile, downloadFile } from '@/utils';
|
import { isEmpty, imageToBase64, getAssetsFile, downloadFile } from '@/utils';
|
||||||
@ -287,15 +353,9 @@ const infoRules = reactive({
|
|||||||
seedSupplier: [{ required: true, message: '请输入供应商', trigger: 'blur' }],
|
seedSupplier: [{ required: true, message: '请输入供应商', trigger: 'blur' }],
|
||||||
planDate: [{ required: true, message: '请选择种植时间', trigger: 'blur' }],
|
planDate: [{ required: true, message: '请选择种植时间', trigger: 'blur' }],
|
||||||
});
|
});
|
||||||
const options = reactive([
|
const workOptions = reactive([
|
||||||
{
|
{ value: '作业计划1', label: 'Option1' },
|
||||||
value: '年度计划1',
|
{ value: '作业计划2', label: 'Option2' },
|
||||||
label: 'Option1',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: '年度计划2',
|
|
||||||
label: 'Option2',
|
|
||||||
},
|
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const subPageData = reactive({
|
const subPageData = reactive({
|
||||||
@ -309,16 +369,34 @@ const stageInfo = reactive({
|
|||||||
});
|
});
|
||||||
const stageRef = ref();
|
const stageRef = ref();
|
||||||
const stageOptions = reactive([
|
const stageOptions = reactive([
|
||||||
{
|
{ value: '0', label: '苗期' },
|
||||||
value: '阶段1',
|
{ value: '1', label: '花果期' },
|
||||||
label: 'Option1',
|
{ value: '2', label: '采收期' },
|
||||||
},
|
|
||||||
{
|
|
||||||
value: '阶段2',
|
|
||||||
label: 'Option2',
|
|
||||||
},
|
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
let currentRow = reactive({});
|
||||||
|
const stageObj = reactive({
|
||||||
|
0: '苗期',
|
||||||
|
1: '花果期',
|
||||||
|
2: '采收期',
|
||||||
|
});
|
||||||
|
|
||||||
|
let stageInfoVisible = ref(false);
|
||||||
|
const stageInfoRef = ref();
|
||||||
|
let stageInfoData = reactive({
|
||||||
|
landId: '', //土地主键id
|
||||||
|
planId: '', //种植规划主键id
|
||||||
|
crop: '', //种植产物
|
||||||
|
stage: '', //所属阶段
|
||||||
|
workId: '', //作业计划Id
|
||||||
|
landName: '', //地块
|
||||||
|
});
|
||||||
|
|
||||||
|
const stageInfoRules = reactive({
|
||||||
|
stage: [{ required: true, message: '请选择所属阶段', trigger: 'blur' }],
|
||||||
|
workId: [{ required: true, message: '请选择作业计划', trigger: 'blur' }],
|
||||||
|
});
|
||||||
|
|
||||||
// #endregion
|
// #endregion
|
||||||
|
|
||||||
/* --------------- methods --------------- */
|
/* --------------- methods --------------- */
|
||||||
@ -381,7 +459,7 @@ function doEdit(row) {
|
|||||||
console.info('编辑', infoData);
|
console.info('编辑', infoData);
|
||||||
}
|
}
|
||||||
|
|
||||||
function doDel() {
|
function doDel(row) {
|
||||||
console.info('删除');
|
console.info('删除');
|
||||||
app
|
app
|
||||||
.$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
|
.$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
|
||||||
@ -390,16 +468,16 @@ function doDel() {
|
|||||||
type: 'warning',
|
type: 'warning',
|
||||||
})
|
})
|
||||||
.then(() => {
|
.then(() => {
|
||||||
// DeleteEntity({ ids: ids.join(',') })
|
delPlan({ id: row.id })
|
||||||
// .then((res) => {
|
.then((res) => {
|
||||||
// if (res.code === 200) {
|
if (res.code === 200) {
|
||||||
// app.$message.success('删除成功！');
|
app.$message.success('删除成功！');
|
||||||
// loadData();
|
getList();
|
||||||
// }
|
}
|
||||||
// })
|
})
|
||||||
// .catch((err) => {
|
.catch((err) => {
|
||||||
// app.$message.error(err.msg);
|
app.$message.error(err.msg);
|
||||||
// });
|
});
|
||||||
})
|
})
|
||||||
.catch(() => {});
|
.catch(() => {});
|
||||||
}
|
}
|
||||||
@ -458,12 +536,20 @@ const infoHide = () => {
|
|||||||
|
|
||||||
const addSub = () => {
|
const addSub = () => {
|
||||||
console.log('新增阶段');
|
console.log('新增阶段');
|
||||||
|
if (!currentRow.id) {
|
||||||
|
app.$message.error('请选择种植规划');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
stageInfoData.landName = currentRow.landName || '';
|
||||||
|
stageInfoData.crop = currentRow.crop || '';
|
||||||
|
stageInfoVisible.value = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
async function getStageList() {
|
async function getStageList() {
|
||||||
// const params = { current: pageData.page, size: pageData.size };
|
const params = { current: subPageData.page, size: subPageData.size, planId: currentRow.id };
|
||||||
// let res = await getLandsList(params);
|
let { code, data, msg } = await getPlantingStage(params);
|
||||||
// console.log('res ---------', res);
|
sublist.value = data.records || [];
|
||||||
|
subPageData.total = data.total;
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleResetStage() {
|
function handleResetStage() {
|
||||||
@ -473,12 +559,97 @@ function handleResetStage() {
|
|||||||
getStageList();
|
getStageList();
|
||||||
}
|
}
|
||||||
|
|
||||||
const doSubEdit = () => {
|
const handleSearchStage = () => {
|
||||||
console.log('编辑sub');
|
if (!currentRow.id) {
|
||||||
|
app.$message.error('请选择种植规划');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
getStageList();
|
||||||
};
|
};
|
||||||
|
|
||||||
const doSubDel = () => {
|
const rowClick = (row) => {
|
||||||
|
currentRow = reactive({ ...row });
|
||||||
|
getStageList();
|
||||||
|
};
|
||||||
|
|
||||||
|
const doSubEdit = (row) => {
|
||||||
|
console.log('编辑sub');
|
||||||
|
stageInfoData.landName = row.landName || '';
|
||||||
|
stageInfoData.crop = row.crop || '';
|
||||||
|
stageInfoVisible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const doSubDel = (row) => {
|
||||||
console.log('删除sub');
|
console.log('删除sub');
|
||||||
|
app
|
||||||
|
.$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
delPlantingStage({ id: row.id })
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
app.$message.success('删除成功！');
|
||||||
|
getStageList();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
app.$message.error(err.msg);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
};
|
||||||
|
|
||||||
|
const stageinfoHide = () => {
|
||||||
|
stageInfoRef.value && stageInfoRef.value.resetFields();
|
||||||
|
stageInfoVisible.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const subMitStateInfo = (formEl) => {
|
||||||
|
if (!formEl) return;
|
||||||
|
formEl.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
let parmer = {
|
||||||
|
planId: currentRow.id || '', //种植规划主键id
|
||||||
|
stage: stageInfoData.stage || 0, //种植阶段:0->苗期,1>花果期,2->采收期
|
||||||
|
workId: stageInfoData.workId || '',
|
||||||
|
};
|
||||||
|
|
||||||
|
console.info('新增种植阶段', parmer);
|
||||||
|
|
||||||
|
if (parmer.id) {
|
||||||
|
editPlantingStage(parmer)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
app.$message.success('编辑成功！');
|
||||||
|
getStageList();
|
||||||
|
stageinfoHide();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
app.$message.error(err.msg);
|
||||||
|
})
|
||||||
|
.finally(() => {});
|
||||||
|
} else {
|
||||||
|
savePlantingStage(parmer)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
getStageList();
|
||||||
|
stageinfoHide();
|
||||||
|
app.$message.success('添加成功！');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
app.$message.error(err.msg);
|
||||||
|
})
|
||||||
|
.finally(() => {});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.log('error submit!');
|
||||||
|
}
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// #endregion
|
// #endregion
|
||||||
|
|||||||
@ -0,0 +1,261 @@
|
|||||||
|
<template>
|
||||||
|
<section>农业生产效率分析</section>
|
||||||
|
<div>
|
||||||
|
<el-row :gutter="20" style="margin: 16px 0">
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-card>
|
||||||
|
<div ref="rOI" style="width: 100%; height: 200px"></div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="24" style="margin: 16px 0">
|
||||||
|
<el-card>
|
||||||
|
<div ref="yieldSingle" style="width: 100%; height: 200px"></div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-card>
|
||||||
|
<div ref="yieldTrend" style="width: 100%; height: 200px"></div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, reactive, onMounted } from 'vue';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
/* --------------- data --------------- */
|
||||||
|
const rOI = ref(null);
|
||||||
|
const yieldSingle = ref(null);
|
||||||
|
const yieldTrend = ref(null);
|
||||||
|
|
||||||
|
// #region
|
||||||
|
|
||||||
|
// #endregion
|
||||||
|
onMounted(() => {
|
||||||
|
const rOIChart = echarts.init(rOI.value);
|
||||||
|
const yieldSingleChart = echarts.init(yieldSingle.value);
|
||||||
|
const yieldTrendChart = echarts.init(yieldTrend.value);
|
||||||
|
|
||||||
|
const rOIoption = {
|
||||||
|
// color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae'], // 全局颜色列表
|
||||||
|
title: {
|
||||||
|
text: '产量趋势',
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['土豆', '花生', '水稻', '西红柿', '玉米'],
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
feature: {
|
||||||
|
saveAsImage: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: ['2020', '2021', '2022', '2023', '2024'],
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '土豆',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
data: [120, 132, 101, 100, 90, 230, 210],
|
||||||
|
color: 'rgb(80,135,236)',
|
||||||
|
smooth: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '花生',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
data: [100, 101, 191, 234, 290, 158, 259],
|
||||||
|
color: 'rgb(104,187,196)',
|
||||||
|
smooth: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '水稻',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
data: [150, 232, 201, 154, 190, 200, 250],
|
||||||
|
color: 'rgb(88,165,92)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '西红柿',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
data: [128, 156, 180, 60, 190, 157, 169],
|
||||||
|
color: 'rgb(242,189,66)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '玉米',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
data: [100, 232, 201, 154, 190, 330, 200],
|
||||||
|
color: 'rgb(238,117,47)',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
const yieldSingloption = {
|
||||||
|
title: {
|
||||||
|
text: '单产水平',
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: ['新乡镇', '马关镇', '五华区', '官渡区', '北市区', '呈贡区', '西山区'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '花生',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '12px',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series',
|
||||||
|
},
|
||||||
|
data: [320, 332, 301, 334, 390, 330, 320],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '土豆',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '12px',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series',
|
||||||
|
},
|
||||||
|
data: [120, 132, 101, 134, 90, 230, 210],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '玉米',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '12px',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series',
|
||||||
|
},
|
||||||
|
data: [220, 182, 191, 234, 290, 330, 310],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '水稻',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '12px',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series',
|
||||||
|
},
|
||||||
|
data: [150, 232, 201, 154, 190, 330, 410],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '西红柿',
|
||||||
|
barWidth: '12px',
|
||||||
|
type: 'bar',
|
||||||
|
data: [862, 1018, 964, 1026, 1679, 1600, 1570],
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series',
|
||||||
|
},
|
||||||
|
// markLine: {
|
||||||
|
// lineStyle: {
|
||||||
|
// type: 'dashed',
|
||||||
|
// },
|
||||||
|
// data: [[{ type: 'min' }, { type: 'max' }]],
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const yieldTrendoption = {
|
||||||
|
// color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae'], // 全局颜色列表
|
||||||
|
title: {
|
||||||
|
text: '产量趋势',
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['土豆', '花生', '水稻', '西红柿', '玉米'],
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
feature: {
|
||||||
|
saveAsImage: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: ['2020', '2021', '2022', '2023', '2024'],
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '耕地',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
data: [120, 132, 101, 134, 90, 230, 210],
|
||||||
|
color: 'rgb(80,135,236)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '林地',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
data: [220, 182, 191, 234, 290, 330, 310],
|
||||||
|
color: 'rgb(104,187,196)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '建设用地',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
data: [150, 232, 201, 154, 190, 330, 410],
|
||||||
|
color: 'rgb(88,165,92)',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
rOIoption && rOIChart.setOption(rOIoption);
|
||||||
|
yieldSingloption && yieldSingleChart.setOption(yieldSingloption);
|
||||||
|
});
|
||||||
|
|
||||||
|
/* --------------- methods --------------- */
|
||||||
|
// #region
|
||||||
|
|
||||||
|
// #endregion
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
@ -0,0 +1,265 @@
|
|||||||
|
<template>
|
||||||
|
<section>环境影响与经济效益分析</section>
|
||||||
|
<div>
|
||||||
|
<el-row :gutter="20" style="margin: 16px 0">
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-card>
|
||||||
|
<div ref="environment" style="width: 100%; height: 200px"></div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="24" style="margin: 16px 0">
|
||||||
|
<el-card>
|
||||||
|
<div ref="market" style="width: 100%; height: 200px"></div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="24">
|
||||||
|
<el-card>
|
||||||
|
<div ref="profit" style="width: 100%; height: 200px"></div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, reactive, onMounted } from 'vue';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
/* --------------- data --------------- */
|
||||||
|
const environment = ref(null);
|
||||||
|
const market = ref(null);
|
||||||
|
const profit = ref(null);
|
||||||
|
|
||||||
|
// #region
|
||||||
|
|
||||||
|
// #endregion
|
||||||
|
onMounted(() => {
|
||||||
|
const environmentChart = echarts.init(environment.value);
|
||||||
|
const marketChart = echarts.init(market.value);
|
||||||
|
const profitChart = echarts.init(profit.value);
|
||||||
|
|
||||||
|
const environmentOption = {
|
||||||
|
// color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae'], // 全局颜色列表
|
||||||
|
title: {
|
||||||
|
text: '土壤质量监测',
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['土壤肥力', '酸碱度', '重金属含量'],
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
feature: {
|
||||||
|
saveAsImage: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: ['2020', '2021', '2022', '2023', '2024'],
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '土壤肥力',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
data: [120, 132, 101, 100, 90, 230, 210],
|
||||||
|
color: 'rgb(80,135,236)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '酸碱度',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
data: [100, 101, 191, 234, 290, 158, 259],
|
||||||
|
color: 'rgb(104,187,196)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '重金属含量',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
data: [150, 232, 201, 154, 190, 200, 250],
|
||||||
|
color: 'rgb(88,165,92)',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const marketOption = {
|
||||||
|
// color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae'], // 全局颜色列表
|
||||||
|
title: {
|
||||||
|
text: '市场价格波动',
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['土豆', '花生', '水稻', '西红柿', '玉米'],
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
feature: {
|
||||||
|
saveAsImage: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: ['2020', '2021', '2022', '2023', '2024'],
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '土豆',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
data: [120, 132, 101, 100, 90, 230, 210],
|
||||||
|
color: 'rgb(80,135,236)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '花生',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
data: [100, 101, 191, 234, 290, 158, 259],
|
||||||
|
color: 'rgb(104,187,196)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '水稻',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
data: [150, 232, 201, 154, 190, 200, 250],
|
||||||
|
color: 'rgb(88,165,92)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '西红柿',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
data: [128, 156, 180, 60, 190, 157, 169],
|
||||||
|
color: 'rgb(242,189,66)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '玉米',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
smooth: true,
|
||||||
|
data: [100, 232, 201, 154, 190, 330, 200],
|
||||||
|
color: 'rgb(238,117,47)',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const profitOption = {
|
||||||
|
title: {
|
||||||
|
text: '成本收益分析',
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
data: ['2021', '2022', '2023', '2024', '2025'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '',
|
||||||
|
min: 0,
|
||||||
|
max: 250,
|
||||||
|
interval: 50,
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value}',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '利润',
|
||||||
|
min: 0,
|
||||||
|
max: 25,
|
||||||
|
interval: 5,
|
||||||
|
axisLabel: {
|
||||||
|
formatter: '{value} %',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '成本',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '12px',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series',
|
||||||
|
},
|
||||||
|
data: [320, 332, 301, 334, 390, 330, 320],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '收入',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '12px',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series',
|
||||||
|
},
|
||||||
|
data: [120, 132, 101, 134, 90, 230, 210],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '利润',
|
||||||
|
type: 'line',
|
||||||
|
barWidth: '12px',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series',
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
valueFormatter: function (value) {
|
||||||
|
return value + ' %';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: [60, 60, 30, 40, 60, 50, 80],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
environmentOption && environmentChart.setOption(environmentOption);
|
||||||
|
marketOption && marketChart.setOption(marketOption);
|
||||||
|
profitOption && profitChart.setOption(profitOption);
|
||||||
|
});
|
||||||
|
|
||||||
|
/* --------------- methods --------------- */
|
||||||
|
// #region
|
||||||
|
|
||||||
|
// #endregion
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
@ -0,0 +1,187 @@
|
|||||||
|
<template>
|
||||||
|
<section>土地利用与规划分析</section>
|
||||||
|
<div>
|
||||||
|
<el-row :gutter="20" style="margin: 16px 0">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-card>
|
||||||
|
<div ref="planUsed" style="width: 100%; height: 300px"></div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-card>
|
||||||
|
<div ref="cropStructure" style="width: 100%; height: 300px"></div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="24" style="margin: 16px 0">
|
||||||
|
<el-card>
|
||||||
|
<div ref="changeTrend" style="width: 100%; height: 300px"></div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, reactive, onMounted } from 'vue';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
|
/* --------------- data --------------- */
|
||||||
|
const planUsed = ref(null);
|
||||||
|
const cropStructure = ref(null);
|
||||||
|
const changeTrend = ref(null);
|
||||||
|
// #region
|
||||||
|
|
||||||
|
// #endregion
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
const planUsedChart = echarts.init(planUsed.value);
|
||||||
|
const cropStructureChart = echarts.init(cropStructure.value);
|
||||||
|
const changeTrendChart = echarts.init(changeTrend.value);
|
||||||
|
|
||||||
|
const planUsedoption = {
|
||||||
|
// color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae'], // 全局颜色列表
|
||||||
|
title: {
|
||||||
|
text: '土地用途分析',
|
||||||
|
subtext: '',
|
||||||
|
left: 'left',
|
||||||
|
top: '0px',
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
orient: 'horizontal',
|
||||||
|
left: 'center',
|
||||||
|
top: '10%',
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '占比',
|
||||||
|
type: 'pie',
|
||||||
|
radius: '50%',
|
||||||
|
center: ['50%', '60%'],
|
||||||
|
data: [
|
||||||
|
{ value: 1048, name: '耕地', itemStyle: { color: 'rgb(88,165,92)' } },
|
||||||
|
{ value: 735, name: '林地', itemStyle: { color: 'rgb(80,135,236)' } },
|
||||||
|
{ value: 580, name: '建设用地', itemStyle: { color: 'rgb(104,187,196)' } },
|
||||||
|
],
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const cropStructureoption = {
|
||||||
|
// color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae'], // 全局颜色列表
|
||||||
|
title: {
|
||||||
|
text: '作物种植结构',
|
||||||
|
subtext: '',
|
||||||
|
left: 'left',
|
||||||
|
top: '0px',
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
orient: 'horizontal',
|
||||||
|
left: 'center',
|
||||||
|
top: '10%',
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '占比',
|
||||||
|
type: 'pie',
|
||||||
|
radius: '50%',
|
||||||
|
center: ['50%', '60%'],
|
||||||
|
data: [
|
||||||
|
{ value: 1048, name: '土豆', itemStyle: { color: 'rgb(80,135,236)' } },
|
||||||
|
{ value: 735, name: '西红柿', itemStyle: { color: 'rgb(104,187,196)' } },
|
||||||
|
{ value: 580, name: '玉米', itemStyle: { color: 'rgb(88,165,92)' } },
|
||||||
|
{ value: 580, name: '花生', itemStyle: { color: 'rgb(242,189,66)' } },
|
||||||
|
{ value: 580, name: '水稻', itemStyle: { color: 'rgb(238,117,47)' } },
|
||||||
|
],
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const changeTrendoption = {
|
||||||
|
// color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae'], // 全局颜色列表
|
||||||
|
title: {
|
||||||
|
text: '土地变更趋势',
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['耕地', '林地', '建设用地'],
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
feature: {
|
||||||
|
saveAsImage: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: ['2020', '2021', '2022', '2023', '2024'],
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '耕地',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
mooth: true,
|
||||||
|
data: [120, 132, 101, 134, 90, 230, 210],
|
||||||
|
color: 'rgb(80,135,236)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '林地',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
mooth: true,
|
||||||
|
data: [220, 182, 191, 234, 290, 330, 310],
|
||||||
|
color: 'rgb(104,187,196)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '建设用地',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total',
|
||||||
|
mooth: true,
|
||||||
|
data: [150, 232, 201, 154, 190, 330, 410],
|
||||||
|
color: 'rgb(88,165,92)',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
planUsedoption && planUsedChart.setOption(planUsedoption);
|
||||||
|
cropStructureoption && cropStructureChart.setOption(cropStructureoption);
|
||||||
|
changeTrendoption && changeTrendChart.setOption(changeTrendoption);
|
||||||
|
});
|
||||||
|
|
||||||
|
/* --------------- methods --------------- */
|
||||||
|
// #region
|
||||||
|
|
||||||
|
// #endregion
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
<template>
|
||||||
|
<router-view></router-view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
/* --------------- data --------------- */
|
||||||
|
// #region
|
||||||
|
|
||||||
|
// #endregion
|
||||||
|
|
||||||
|
/* --------------- methods --------------- */
|
||||||
|
// #region
|
||||||
|
|
||||||
|
// #endregion
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
@ -2171,7 +2171,7 @@ earcut@2.2.4:
|
|||||||
resolved "https://registry.npmmirror.com/earcut/-/earcut-2.2.4.tgz#6d02fd4d68160c114825d06890a92ecaae60343a"
|
resolved "https://registry.npmmirror.com/earcut/-/earcut-2.2.4.tgz#6d02fd4d68160c114825d06890a92ecaae60343a"
|
||||||
integrity sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==
|
integrity sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==
|
||||||
|
|
||||||
echarts@^5.5.0:
|
echarts@^5.6.0:
|
||||||
version "5.6.0"
|
version "5.6.0"
|
||||||
resolved "https://registry.npmmirror.com/echarts/-/echarts-5.6.0.tgz#2377874dca9fb50f104051c3553544752da3c9d6"
|
resolved "https://registry.npmmirror.com/echarts/-/echarts-5.6.0.tgz#2377874dca9fb50f104051c3553544752da3c9d6"
|
||||||
integrity sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==
|
integrity sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user