统计分析页面构建
This commit is contained in:
lzc
parent
ac0eef1407
commit
91cf7b3b3c
@ -21,7 +21,7 @@
|
||||
"@wangeditor/editor": "^5.1.23",
|
||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||
"axios": "^1.6.5",
|
||||
"echarts": "^5.5.0",
|
||||
"echarts": "^5.6.0",
|
||||
"element-plus": "^2.7.2",
|
||||
"js-base64": "^3.7.6",
|
||||
"lodash": "^4.17.21",
|
||||
|
||||
@ -58,9 +58,8 @@ export function exportAnnua(params = {}) {
|
||||
}
|
||||
|
||||
export function delAnnual(params) {
|
||||
return request('/trace/code/annualManage/delete', {
|
||||
return request('/trace/code/annualManage/delete/' + params.id, {
|
||||
method: 'DELETE',
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
@ -93,3 +92,37 @@ export function exportPlan(params = {}) {
|
||||
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 landsRoutes from './modules/lands';
|
||||
import annualplanRoutes from './modules/annualplan';
|
||||
import statisticsRoutes from './modules/statistics';
|
||||
|
||||
const { VITE_APP_NAME } = import.meta.env;
|
||||
|
||||
@ -58,6 +59,7 @@ export const constantRoutes = [
|
||||
...plantingAndBreedingRouter,
|
||||
...annualplanRoutes,
|
||||
...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="planStatus" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.planStatus == '1'" type="warning">待提交</el-tag>
|
||||
<el-tag v-if="row.planStatus == '2'" type="primary">审核中</el-tag>
|
||||
<el-tag v-if="row.planStatus == '3'" type="success">通过</el-tag>
|
||||
<el-tag v-if="row.planStatus == '4'" type="danger">拒绝</el-tag>
|
||||
<el-tag v-if="row.planStatus == '1'" type="warning" size="small">待提交</el-tag>
|
||||
<el-tag v-if="row.planStatus == '2'" type="primary" size="small">审核中</el-tag>
|
||||
<el-tag v-if="row.planStatus == '3'" type="success" size="small">通过</el-tag>
|
||||
<el-tag v-if="row.planStatus == '4'" type="danger" size="small">拒绝</el-tag>
|
||||
</template>
|
||||
</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 }">
|
||||
<el-button type="primary" @click="doExam(row)">审核</el-button>
|
||||
<el-button type="primary" @click="doEdit(row)">编辑</el-button>
|
||||
<el-button type="primary" @click="doDetail(row)">详情</el-button>
|
||||
<el-button type="danger" @click="doDel(row)">删除</el-button>
|
||||
<el-button type="primary" size="small" @click="doExam(row)">审核</el-button>
|
||||
<el-button type="primary" size="small" @click="doEdit(row)">编辑</el-button>
|
||||
<el-button type="primary" size="small" @click="doDetail(row)">详情</el-button>
|
||||
<el-button type="danger" size="small" @click="doDel(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
@ -1,19 +1,355 @@
|
||||
<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>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
<template #menu="scope">
|
||||
<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 --------------- */
|
||||
// #region
|
||||
const { VITE_APP_BASE_API } = import.meta.env;
|
||||
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 --------------- */
|
||||
// #region
|
||||
const state = reactive({
|
||||
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>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
{{ item.label }}
|
||||
</el-button>
|
||||
</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="index"> </el-table-column>
|
||||
<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="planName" 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 }">
|
||||
<el-button type="primary" @click="doEdit(row)">编辑</el-button>
|
||||
<el-button type="danger" @click="doDel(row)">删除</el-button>
|
||||
<el-button type="primary" size="small" @click="doEdit(row)">编辑</el-button>
|
||||
<el-button type="danger" size="small" @click="doDel(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@ -103,9 +103,6 @@
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<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
|
||||
v-model:value="infoData.planId"
|
||||
:set="{
|
||||
@ -144,24 +141,83 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<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-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<el-table :data="sublist">
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column type="index"> </el-table-column>
|
||||
<el-table-column label="所属阶段" prop="landName" width="240" show-overflow-tooltip />
|
||||
<el-table-column label="作业计划" prop="address" show-overflow-tooltip />
|
||||
<el-table-column label="作业时间" prop="owner" show-overflow-tooltip />
|
||||
<el-table-column label="结束时间" prop="owner" show-overflow-tooltip />
|
||||
<el-table-column label="所属阶段" prop="stage">
|
||||
<template #default="{ row }">
|
||||
<el-tag size="small">{{ stageObj[row.stage] }}</el-tag>
|
||||
</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-button type="primary" @click="doSubEdit()">编辑</el-button>
|
||||
<el-button type="danger" @click="doSubDel()">删除</el-button>
|
||||
<template #default="{ row }">
|
||||
<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>
|
||||
<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>
|
||||
</CustCard>
|
||||
@ -171,7 +227,17 @@
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import Pagina from '@/components/pagina.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 CustomSelect from '@/components/CustomSelect.vue';
|
||||
import { isEmpty, imageToBase64, getAssetsFile, downloadFile } from '@/utils';
|
||||
@ -287,15 +353,9 @@ const infoRules = reactive({
|
||||
seedSupplier: [{ required: true, message: '请输入供应商', trigger: 'blur' }],
|
||||
planDate: [{ required: true, message: '请选择种植时间', trigger: 'blur' }],
|
||||
});
|
||||
const options = reactive([
|
||||
{
|
||||
value: '年度计划1',
|
||||
label: 'Option1',
|
||||
},
|
||||
{
|
||||
value: '年度计划2',
|
||||
label: 'Option2',
|
||||
},
|
||||
const workOptions = reactive([
|
||||
{ value: '作业计划1', label: 'Option1' },
|
||||
{ value: '作业计划2', label: 'Option2' },
|
||||
]);
|
||||
|
||||
const subPageData = reactive({
|
||||
@ -309,16 +369,34 @@ const stageInfo = reactive({
|
||||
});
|
||||
const stageRef = ref();
|
||||
const stageOptions = reactive([
|
||||
{
|
||||
value: '阶段1',
|
||||
label: 'Option1',
|
||||
},
|
||||
{
|
||||
value: '阶段2',
|
||||
label: 'Option2',
|
||||
},
|
||||
{ value: '0', label: '苗期' },
|
||||
{ value: '1', label: '花果期' },
|
||||
{ value: '2', label: '采收期' },
|
||||
]);
|
||||
|
||||
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
|
||||
|
||||
/* --------------- methods --------------- */
|
||||
@ -381,7 +459,7 @@ function doEdit(row) {
|
||||
console.info('编辑', infoData);
|
||||
}
|
||||
|
||||
function doDel() {
|
||||
function doDel(row) {
|
||||
console.info('删除');
|
||||
app
|
||||
.$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
|
||||
@ -390,16 +468,16 @@ function doDel() {
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
// DeleteEntity({ ids: ids.join(',') })
|
||||
// .then((res) => {
|
||||
// if (res.code === 200) {
|
||||
// app.$message.success('删除成功！');
|
||||
// loadData();
|
||||
// }
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// app.$message.error(err.msg);
|
||||
// });
|
||||
delPlan({ id: row.id })
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('删除成功！');
|
||||
getList();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
@ -458,12 +536,20 @@ const infoHide = () => {
|
||||
|
||||
const addSub = () => {
|
||||
console.log('新增阶段');
|
||||
if (!currentRow.id) {
|
||||
app.$message.error('请选择种植规划');
|
||||
return;
|
||||
}
|
||||
stageInfoData.landName = currentRow.landName || '';
|
||||
stageInfoData.crop = currentRow.crop || '';
|
||||
stageInfoVisible.value = true;
|
||||
};
|
||||
|
||||
async function getStageList() {
|
||||
// const params = { current: pageData.page, size: pageData.size };
|
||||
// let res = await getLandsList(params);
|
||||
// console.log('res ---------', res);
|
||||
const params = { current: subPageData.page, size: subPageData.size, planId: currentRow.id };
|
||||
let { code, data, msg } = await getPlantingStage(params);
|
||||
sublist.value = data.records || [];
|
||||
subPageData.total = data.total;
|
||||
}
|
||||
|
||||
function handleResetStage() {
|
||||
@ -473,12 +559,97 @@ function handleResetStage() {
|
||||
getStageList();
|
||||
}
|
||||
|
||||
const doSubEdit = () => {
|
||||
console.log('编辑sub');
|
||||
const handleSearchStage = () => {
|
||||
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');
|
||||
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
|
||||
|
||||
@ -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"
|
||||
integrity sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==
|
||||
|
||||
echarts@^5.5.0:
|
||||
echarts@^5.6.0:
|
||||
version "5.6.0"
|
||||
resolved "https://registry.npmmirror.com/echarts/-/echarts-5.6.0.tgz#2377874dca9fb50f104051c3553544752da3c9d6"
|
||||
integrity sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user