种植规划
This commit is contained in:
lzc
parent
60892a3c06
commit
eb86d6cc1a
@ -44,35 +44,25 @@ export function delPlanCrop(params) {
|
||||
|
||||
//种植产物对应的种植阶段相关
|
||||
// #region
|
||||
// export function getPlanStage(params = {}) {
|
||||
// return request('land-resource/baseInfo/planTypePage', {
|
||||
// method: 'GET',
|
||||
// params,
|
||||
// });
|
||||
// }
|
||||
export function getPlanStage(params = {}) {
|
||||
return request('land-resource/baseInfo/stageTypePage', {
|
||||
method: 'GET',
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
// export function upPlanStage(data = {}) {
|
||||
// return request('land-resource/baseInfo/planTypeEdit', {
|
||||
// method: 'PUT',
|
||||
// data,
|
||||
// });
|
||||
// }
|
||||
export function upPlanStage(data = {}) {
|
||||
return request('land-resource/baseInfo/stageTypeEdit', {
|
||||
method: 'PUT',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
// export function exportPlanStage(params = {}) {
|
||||
// return request('/land-resource/baseInfo/planTypeExport', {
|
||||
// method: 'GET',
|
||||
// params,
|
||||
// responseType: 'blob',
|
||||
// });
|
||||
// }
|
||||
|
||||
// export function delPlanStage(params) {
|
||||
// return request('land-resource/baseInfo/planTypeDelete/' + params.id, {
|
||||
// method: 'DELETE',
|
||||
// });
|
||||
// }
|
||||
|
||||
// #endregion
|
||||
export function delPlanStage(params) {
|
||||
return request('land-resource/baseInfo/stageTypeDelete/' + params.id, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
}
|
||||
|
||||
export function savePlanStage(data) {
|
||||
return request('land-resource/baseInfo/stageTypeSave', {
|
||||
@ -81,6 +71,14 @@ export function savePlanStage(data) {
|
||||
});
|
||||
}
|
||||
|
||||
export function getWorkPage(params = {}) {
|
||||
return request('land-resource/planManage/workPage', {
|
||||
method: 'GET',
|
||||
params,
|
||||
});
|
||||
}
|
||||
// #endregion
|
||||
|
||||
/* ------ 土壤类型 ------ */
|
||||
// #region
|
||||
|
||||
|
||||
@ -99,6 +99,13 @@ export function delPlan(params) {
|
||||
});
|
||||
}
|
||||
|
||||
export function getPlanHistory(params = {}) {
|
||||
return request('land-resource/planManage/historyPlanPage', {
|
||||
method: 'GET',
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
//种植阶段相关
|
||||
export function getPlantingStage(params = {}) {
|
||||
return request('land-resource/planManage/pageStage', {
|
||||
|
||||
@ -0,0 +1,326 @@
|
||||
<template>
|
||||
<div style="margin-top: 16px">
|
||||
<!-- <el-dialog v-model="isShowVal" title="种植阶段详情" width="1000" center @closed="stageClose"> -->
|
||||
<el-text class="mx-1" size="large">种植阶段详情</el-text>
|
||||
<div style="margin-top: 16px">
|
||||
<avue-crud
|
||||
ref="stateCrudRef"
|
||||
v-model="stageState.form"
|
||||
v-model:search="stageState.query"
|
||||
v-model:page="stageState.pageData"
|
||||
:table-loading="stageState.loading"
|
||||
:data="stageState.data"
|
||||
:option="stageState.options"
|
||||
@refresh-change="stageRefresh"
|
||||
@search-reset="stageSearch"
|
||||
@search-change="stageSearch"
|
||||
@selection-change="stageSelection"
|
||||
@current-change="stageCurrent"
|
||||
@size-change="stageSize"
|
||||
@row-del="stageRowDel"
|
||||
@row-save="stageRowSave"
|
||||
@row-update="stageRowUpdate"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button type="primary" icon="Plus" @click="onStateAdd">新增</el-button>
|
||||
</template>
|
||||
|
||||
<template #stage="{ row }">
|
||||
<el-tag size="small">{{ stageObj[row.stage] }}</el-tag>
|
||||
</template>
|
||||
|
||||
<template #cropId="{ row }">
|
||||
{{ row.cropName }}
|
||||
</template>
|
||||
|
||||
<template #menu="scope">
|
||||
<custom-table-operate :actions="stageState.options.actions" :data="scope" />
|
||||
</template>
|
||||
</avue-crud>
|
||||
<!-- </el-dialog> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref, watch } from 'vue';
|
||||
import { useApp } from '@/hooks';
|
||||
import { CRUD_OPTIONS } from '@/config';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { getPlanStage, savePlanStage, upPlanStage, delPlanStage } from '@/apis/baseInfo.js';
|
||||
import { isEmpty, imageToBase64, getAssetsFile, downloadFile } from '@/utils';
|
||||
|
||||
const props = defineProps({
|
||||
isShow: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
rowOriginal: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
const { VITE_APP_BASE_API } = import.meta.env;
|
||||
const app = useApp();
|
||||
const UserStore = useUserStore();
|
||||
const stateCrudRef = ref(null);
|
||||
const stageOptions = reactive([
|
||||
{ value: '0', label: '苗期' },
|
||||
{ value: '1', label: '花果期' },
|
||||
{ value: '2', label: '采收期' },
|
||||
]);
|
||||
|
||||
const workOptions = reactive([
|
||||
{ label: '作业计划1', value: '000001' },
|
||||
{ label: '作业计划2', value: '000002' },
|
||||
]);
|
||||
|
||||
const stageObj = reactive({
|
||||
0: '苗期',
|
||||
1: '花果期',
|
||||
2: '采收期',
|
||||
});
|
||||
|
||||
const isShowVal = ref(false);
|
||||
let currentRow = reactive({});
|
||||
|
||||
const loadList = () => {
|
||||
if (isShowVal.value) {
|
||||
console.info('loadList', props);
|
||||
getStageList();
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
isShowVal.value = props.isShow;
|
||||
currentRow = props.rowOriginal;
|
||||
loadList();
|
||||
// console.info('onMounted', props);
|
||||
});
|
||||
watch(
|
||||
() => (props.isShow, props.rowOriginal),
|
||||
() => {
|
||||
isShowVal.value = props.isShow;
|
||||
currentRow = props.rowOriginal;
|
||||
console.info('watch', props);
|
||||
loadList();
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
let stageState = reactive({
|
||||
loading: false,
|
||||
query: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
stage: null,
|
||||
},
|
||||
form: {},
|
||||
options: {
|
||||
...CRUD_OPTIONS,
|
||||
addBtn: false,
|
||||
selection: false,
|
||||
column: [
|
||||
{
|
||||
label: '种植产物',
|
||||
prop: 'cropId',
|
||||
type: 'select',
|
||||
remote: false,
|
||||
width: '160px',
|
||||
showOverflowTooltip: true,
|
||||
props: {
|
||||
label: 'crop',
|
||||
value: 'id',
|
||||
},
|
||||
dicHeaders: {
|
||||
authorization: UserStore.token,
|
||||
},
|
||||
dicUrl: `${VITE_APP_BASE_API}/land-resource/baseInfo/planTypePage?current=1&size=999`,
|
||||
dicFormatter: (res) => res.data.records ?? [],
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '所属阶段',
|
||||
prop: 'stage',
|
||||
type: 'select',
|
||||
search: true,
|
||||
dicData: stageOptions,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '作业类型',
|
||||
prop: 'workType',
|
||||
// type: 'select',
|
||||
search: false,
|
||||
// dicData: workOptions,
|
||||
rules: { required: true, message: '请选择', trigger: 'blur' },
|
||||
},
|
||||
{
|
||||
label: '作业时间(多少天后)',
|
||||
prop: 'workTime',
|
||||
rules: { required: true, message: '请输入', trigger: 'blur' },
|
||||
props: {
|
||||
type: 'Number',
|
||||
},
|
||||
addDisplay: true,
|
||||
editDisplay: true,
|
||||
},
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
name: '编辑',
|
||||
icon: 'edit',
|
||||
event: ({ row }) => stageRowEdit(row),
|
||||
},
|
||||
{
|
||||
type: 'danger',
|
||||
name: '删除',
|
||||
icon: 'delete',
|
||||
event: ({ row }) => stageRowDel(row),
|
||||
},
|
||||
],
|
||||
},
|
||||
pageData: {
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
data: [],
|
||||
currentRow: {},
|
||||
});
|
||||
|
||||
async function getStageList() {
|
||||
if (!currentRow.id) {
|
||||
return app.$message.success('请选择种植产物');
|
||||
}
|
||||
stageState.loading = true;
|
||||
getPlanStage({ ...stageState.query, cropId: currentRow.id })
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
const { current, size, total, records } = res.data;
|
||||
stageState.data = records || [];
|
||||
stageState.pageData = {
|
||||
currentPage: current || 1,
|
||||
pageSize: size || 10,
|
||||
total: total,
|
||||
};
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
stageState.data = [];
|
||||
})
|
||||
.finally(() => {
|
||||
stageState.loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
const stageSearch = (params, done) => {
|
||||
if (done) done();
|
||||
stageState.query = params;
|
||||
stageState.query.current = 1;
|
||||
getStageList();
|
||||
};
|
||||
|
||||
const stageSelection = (rows) => {
|
||||
stageState.selection = rows;
|
||||
};
|
||||
|
||||
const stageCurrent = (current) => {
|
||||
stageState.query.current = current;
|
||||
getStageList();
|
||||
};
|
||||
|
||||
const stageSize = (size) => {
|
||||
stageState.query.size = size;
|
||||
getStageList();
|
||||
};
|
||||
|
||||
const stageRowDel = (row, index, done) => {
|
||||
if (isEmpty(row)) return;
|
||||
app
|
||||
.$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
console.info('删除');
|
||||
delPlanStage({ id: row.id })
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('删除成功！');
|
||||
getStageList();
|
||||
done();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
const stageRowEdit = (row) => {
|
||||
stateCrudRef.value.rowEdit(row);
|
||||
};
|
||||
|
||||
const onStateAdd = () => {
|
||||
if (!currentRow.id) {
|
||||
app.$message.error('请选择种植产物');
|
||||
return;
|
||||
}
|
||||
stateCrudRef.value.rowAdd();
|
||||
};
|
||||
|
||||
const stageRowSave = (row, done, loading) => {
|
||||
console.info('stageRowSave', row);
|
||||
savePlanStage({ ...row })
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('添加成功！');
|
||||
done();
|
||||
getStageList();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
})
|
||||
.finally(() => {
|
||||
loading();
|
||||
});
|
||||
};
|
||||
|
||||
const stageRowUpdate = (row, index, done, loading) => {
|
||||
console.info('stageRowUpdate');
|
||||
upPlanStage(row)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('更新成功！');
|
||||
done();
|
||||
getStageList();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
})
|
||||
.finally(() => {
|
||||
loading();
|
||||
});
|
||||
};
|
||||
const stageClose = () => {
|
||||
isShowVal.value = false;
|
||||
emit('close');
|
||||
};
|
||||
</script>
|
||||
@ -33,39 +33,8 @@
|
||||
</template>
|
||||
</avue-crud>
|
||||
|
||||
<stageList :is-show="stageShow" :row-original="state.currentRow" @close="stageHide"></stageList>
|
||||
<el-text class="mx-1" size="large">种植阶段详情</el-text>
|
||||
<div style="margin-top: 16px">
|
||||
<avue-crud
|
||||
ref="stateCrudRef"
|
||||
v-model="stageState.form"
|
||||
v-model:search="stageState.query"
|
||||
v-model:page="stageState.pageData"
|
||||
:table-loading="stageState.loading"
|
||||
:data="stageState.data"
|
||||
:option="stageState.options"
|
||||
@refresh-change="stageRefresh"
|
||||
@search-reset="stageSearch"
|
||||
@search-change="stageSearch"
|
||||
@selection-change="stageSelection"
|
||||
@current-change="stageCurrent"
|
||||
@size-change="stageSize"
|
||||
@row-del="stageRowDel"
|
||||
@row-save="stageRowSave"
|
||||
@row-update="stageRowUpdate"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button type="primary" icon="Plus" @click="onStateAdd">新增</el-button>
|
||||
</template>
|
||||
|
||||
<template #stage="{ row }">
|
||||
<el-tag size="small">{{ stageObj[row.stage] }}</el-tag>
|
||||
</template>
|
||||
|
||||
<template #menu="scope">
|
||||
<custom-table-operate :actions="stageState.options.actions" :data="scope" />
|
||||
</template>
|
||||
</avue-crud>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
@ -75,7 +44,8 @@ import { CRUD_OPTIONS } from '@/config';
|
||||
import { isEmpty, downloadFile } from '@/utils';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { compact } from 'lodash';
|
||||
import { getPlanCrop, savePlanCrop, upPlanCrop, exportPlanCrop, delPlanCrop } from '@/apis/baseInfo';
|
||||
import { getPlanCrop, savePlanCrop, upPlanCrop, exportPlanCrop, delPlanCrop, getPlanStage } from '@/apis/baseInfo';
|
||||
import stageList from '../dictCrop/component/stage.vue';
|
||||
|
||||
const { VITE_APP_BASE_API } = import.meta.env;
|
||||
const app = useApp();
|
||||
@ -83,21 +53,7 @@ const UserStore = useUserStore();
|
||||
const crudRef = ref(null);
|
||||
const stateCrudRef = ref(null);
|
||||
|
||||
const stageOptions = reactive([
|
||||
{ value: '0', label: '苗期' },
|
||||
{ value: '1', label: '花果期' },
|
||||
{ value: '2', label: '采收期' },
|
||||
]);
|
||||
|
||||
const stageObj = reactive({
|
||||
0: '苗期',
|
||||
1: '花果期',
|
||||
2: '采收期',
|
||||
});
|
||||
const workOptions = reactive([
|
||||
{ planName: '作业计划1', id: '000001' },
|
||||
{ planName: '作业计划2', id: '000002' },
|
||||
]);
|
||||
let stageShow = ref(false);
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
query: {
|
||||
@ -134,19 +90,19 @@ const state = reactive({
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '种植时间',
|
||||
prop: 'planDate',
|
||||
type: 'date',
|
||||
format: 'YYYY-MM-DD',
|
||||
valueFormat: 'YYYY-MM-DD',
|
||||
width: 160,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请选择作业日期',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
// {
|
||||
// label: '种植时间',
|
||||
// prop: 'planDate',
|
||||
// type: 'date',
|
||||
// format: 'YYYY-MM-DD',
|
||||
// valueFormat: 'YYYY-MM-DD',
|
||||
// width: 160,
|
||||
// rules: {
|
||||
// required: true,
|
||||
// message: '请选择作业日期',
|
||||
// trigger: 'blur',
|
||||
// },
|
||||
// },
|
||||
{
|
||||
label: '状态',
|
||||
prop: 'status',
|
||||
@ -191,68 +147,6 @@ const state = reactive({
|
||||
currentRow: {},
|
||||
});
|
||||
|
||||
const stageState = reactive({
|
||||
loading: false,
|
||||
query: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
},
|
||||
form: {},
|
||||
options: {
|
||||
...CRUD_OPTIONS,
|
||||
addBtn: false,
|
||||
selection: false,
|
||||
column: [
|
||||
{
|
||||
label: '所属阶段',
|
||||
prop: 'stage',
|
||||
type: 'select',
|
||||
search: true,
|
||||
dicData: stageOptions,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '作业计划',
|
||||
prop: 'workId',
|
||||
type: 'select',
|
||||
search: true,
|
||||
dicData: workOptions,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{ label: '作业时间', prop: 'coordinate', disabled: true, addDisplay: false, editDisplay: false },
|
||||
{ label: '结束时间', prop: 'createTime', disabled: true, addDisplay: false, editDisplay: false },
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
name: '编辑',
|
||||
icon: 'edit',
|
||||
event: ({ row }) => stageRowEdit(row),
|
||||
},
|
||||
{
|
||||
type: 'danger',
|
||||
name: '删除',
|
||||
icon: 'delete',
|
||||
event: ({ row }) => stageRowDel(row),
|
||||
},
|
||||
],
|
||||
},
|
||||
pageData: {
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
data: [],
|
||||
currentRow: {},
|
||||
});
|
||||
|
||||
// 加载
|
||||
const loadData = () => {
|
||||
state.loading = true;
|
||||
@ -380,13 +274,6 @@ const rowUpdate = (row, index, done, loading) => {
|
||||
});
|
||||
};
|
||||
|
||||
//种植阶段相关
|
||||
// 刷新
|
||||
const stageRefresh = () => {
|
||||
// loadData();
|
||||
app.$message.success('刷新成功');
|
||||
};
|
||||
|
||||
const rowStatus = (row) => {
|
||||
console.info('操作状态');
|
||||
let parmer = {
|
||||
@ -433,126 +320,10 @@ const rowDel = (row, index, done) => {
|
||||
|
||||
const rowClick = (row) => {
|
||||
state.currentRow = { ...row };
|
||||
stageShow.value = true;
|
||||
console.info('rowClick', state.currentRow);
|
||||
getStageList();
|
||||
};
|
||||
async function getStageList() {
|
||||
// stageState.loading = true;
|
||||
// getPlantingStage({ ...stageState.query, planId: state.currentRow.id })
|
||||
// .then((res) => {
|
||||
// if (res.code === 200) {
|
||||
// const { current, size, total, records } = res.data;
|
||||
// stageState.data = records || [];
|
||||
// stageState.pageData = {
|
||||
// currentPage: current || 1,
|
||||
// pageSize: size || 10,
|
||||
// total: total,
|
||||
// };
|
||||
// }
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// app.$message.error(err.msg);
|
||||
// stageState.data = [];
|
||||
// })
|
||||
// .finally(() => {
|
||||
// stageState.loading = false;
|
||||
// });
|
||||
}
|
||||
|
||||
const stageSearch = (params, done) => {
|
||||
if (done) done();
|
||||
stageState.query = params;
|
||||
stageState.query.current = 1;
|
||||
getStageList();
|
||||
};
|
||||
|
||||
const stageSelection = (rows) => {
|
||||
stageState.selection = rows;
|
||||
};
|
||||
|
||||
const stageCurrent = (current) => {
|
||||
stageState.query.current = current;
|
||||
getStageList();
|
||||
};
|
||||
|
||||
const stageSize = (size) => {
|
||||
stageState.query.size = size;
|
||||
getStageList();
|
||||
};
|
||||
|
||||
const stageRowDel = (row, index, done) => {
|
||||
if (isEmpty(row)) return;
|
||||
app
|
||||
.$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
console.info('删除');
|
||||
// delPlantingStage({ id: row.id })
|
||||
// .then((res) => {
|
||||
// if (res.code === 200) {
|
||||
// app.$message.success('删除成功！');
|
||||
// getStageList();
|
||||
// done();
|
||||
// }
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// app.$message.error(err.msg);
|
||||
// });
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
const stageRowEdit = (row) => {
|
||||
stateCrudRef.value.rowEdit(row);
|
||||
};
|
||||
|
||||
const onStateAdd = () => {
|
||||
if (!state.currentRow.id) {
|
||||
app.$message.error('请选择种植产物');
|
||||
return;
|
||||
}
|
||||
// stageInfoData.landName = state.currentRow.landName || '';
|
||||
// stageInfoData.crop = state.currentRow.crop || '';
|
||||
// stageInfoVisible.value = true;
|
||||
stateCrudRef.value.rowAdd();
|
||||
};
|
||||
|
||||
const stageRowSave = (row, done, loading) => {
|
||||
row.planId = state.currentRow.planId;
|
||||
console.info('stageRowSave', row);
|
||||
// savePlantingStage({ ...row })
|
||||
// .then((res) => {
|
||||
// if (res.code === 200) {
|
||||
// app.$message.success('添加成功！');
|
||||
// done();
|
||||
// getStageList();
|
||||
// }
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// app.$message.error(err.msg);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// loading();
|
||||
// });
|
||||
};
|
||||
|
||||
const stageRowUpdate = (row, index, done, loading) => {
|
||||
console.info('stageRowUpdate');
|
||||
// editPlantingStage(row)
|
||||
// .then((res) => {
|
||||
// if (res.code === 200) {
|
||||
// app.$message.success('更新成功！');
|
||||
// done();
|
||||
// getStageList();
|
||||
// }
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// app.$message.error(err.msg);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// loading();
|
||||
// });
|
||||
const stageHide = () => {
|
||||
stageShow.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,259 @@
|
||||
<template>
|
||||
<div style="margin-top: 16px">
|
||||
<el-dialog v-model="isShowVal" title="规划记录" width="1000" center @closed="stageClose">
|
||||
<avue-crud
|
||||
ref="listRef"
|
||||
v-model="stageState.form"
|
||||
v-model:search="stageState.query"
|
||||
v-model:page="stageState.pageData"
|
||||
:table-loading="stageState.loading"
|
||||
:data="stageState.data"
|
||||
:option="stageState.options"
|
||||
@refresh-change="stageRefresh"
|
||||
@search-reset="stageSearch"
|
||||
@search-change="stageSearch"
|
||||
@selection-change="stageSelection"
|
||||
@current-change="stageCurrent"
|
||||
@size-change="stageSize"
|
||||
@row-del="stageRowDel"
|
||||
@row-save="stageRowSave"
|
||||
@row-update="stageRowUpdate"
|
||||
>
|
||||
<template #menu-left>
|
||||
<!-- <el-button type="primary" icon="Plus" @click="onStateAdd">新增</el-button> -->
|
||||
</template>
|
||||
|
||||
<template #planId="{ row }">
|
||||
{{ row.planName }}
|
||||
</template>
|
||||
|
||||
<template #menu="scope">
|
||||
<custom-table-operate :actions="stageState.options.actions" :data="scope" />
|
||||
</template>
|
||||
</avue-crud>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref, watch } from 'vue';
|
||||
import { useApp } from '@/hooks';
|
||||
import { CRUD_OPTIONS } from '@/config';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { getPlantingStage, savePlantingStage, editPlantingStage, delPlantingStage, getPlanHistory } from '@/apis/land.js';
|
||||
import { isEmpty, imageToBase64, getAssetsFile, downloadFile } from '@/utils';
|
||||
|
||||
const props = defineProps({
|
||||
isShow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
rowOriginal: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
const { VITE_APP_BASE_API } = import.meta.env;
|
||||
const app = useApp();
|
||||
const UserStore = useUserStore();
|
||||
const listRef = ref(null);
|
||||
const stageOptions = reactive([
|
||||
{ value: '0', label: '苗期' },
|
||||
{ value: '1', label: '花果期' },
|
||||
{ value: '2', label: '采收期' },
|
||||
]);
|
||||
|
||||
const workOptions = reactive([
|
||||
{ label: '作业计划1', value: '000001' },
|
||||
{ label: '作业计划2', value: '000002' },
|
||||
]);
|
||||
|
||||
const stageObj = reactive({
|
||||
0: '苗期',
|
||||
1: '花果期',
|
||||
2: '采收期',
|
||||
});
|
||||
|
||||
const isShowVal = ref(false);
|
||||
let currentRow = reactive({});
|
||||
|
||||
const loadList = () => {
|
||||
if (isShowVal.value) {
|
||||
console.info('loadList', props);
|
||||
getList();
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
isShowVal.value = props.isShow;
|
||||
currentRow = props.rowOriginal;
|
||||
loadList();
|
||||
// console.info('onMounted', props);
|
||||
});
|
||||
watch(
|
||||
() => (props.isShow, props.rowOriginal),
|
||||
() => {
|
||||
isShowVal.value = props.isShow;
|
||||
currentRow = props.rowOriginal;
|
||||
console.info('watch', props);
|
||||
loadList();
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
const stageState = reactive({
|
||||
loading: false,
|
||||
query: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
},
|
||||
form: {},
|
||||
options: {
|
||||
...CRUD_OPTIONS,
|
||||
addBtn: false,
|
||||
selection: false,
|
||||
column: [
|
||||
{
|
||||
label: '年度计划',
|
||||
prop: 'planId',
|
||||
type: 'select',
|
||||
remote: false,
|
||||
width: '160px',
|
||||
showOverflowTooltip: true,
|
||||
props: {
|
||||
label: 'planName',
|
||||
value: 'id',
|
||||
},
|
||||
dicHeaders: {
|
||||
authorization: UserStore.token,
|
||||
},
|
||||
dicUrl: `${VITE_APP_BASE_API}/land-resource/annualManage/page`,
|
||||
dicFormatter: (res) => res.data.records ?? [],
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
},
|
||||
{ label: '供应商', prop: 'seedSupplier', addDisplay: false, editDisplay: true },
|
||||
{ label: '种植日期', prop: 'planDate', addDisplay: true, editDisplay: true },
|
||||
{ label: '种植产物', prop: 'crop', addDisplay: false, editDisplay: false },
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
name: '编辑',
|
||||
icon: 'edit',
|
||||
event: ({ row }) => stageRowEdit(row),
|
||||
},
|
||||
],
|
||||
},
|
||||
pageData: {
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
data: [],
|
||||
currentRow: {},
|
||||
});
|
||||
|
||||
async function getList() {
|
||||
stageState.loading = true;
|
||||
getPlanHistory({ ...stageState.query, landId: currentRow.landId })
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
const { current, size, total, records } = res.data;
|
||||
stageState.data = records || [];
|
||||
stageState.pageData = {
|
||||
currentPage: current || 1,
|
||||
pageSize: size || 10,
|
||||
total: total,
|
||||
};
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
stageState.data = [];
|
||||
})
|
||||
.finally(() => {
|
||||
stageState.loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
const stageSearch = (params, done) => {
|
||||
if (done) done();
|
||||
stageState.query = params;
|
||||
stageState.query.current = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
const stageSelection = (rows) => {
|
||||
stageState.selection = rows;
|
||||
};
|
||||
|
||||
const stageCurrent = (current) => {
|
||||
stageState.query.current = current;
|
||||
getList();
|
||||
};
|
||||
|
||||
const stageSize = (size) => {
|
||||
stageState.query.size = size;
|
||||
getList();
|
||||
};
|
||||
|
||||
const stageRowEdit = (row) => {
|
||||
listRef.value.rowEdit(row);
|
||||
};
|
||||
|
||||
const onStateAdd = () => {
|
||||
if (!currentRow.landId) {
|
||||
app.$message.error('请选择种植规划');
|
||||
return;
|
||||
}
|
||||
listRef.value.rowAdd();
|
||||
};
|
||||
|
||||
const stageRowSave = (row, done, loading) => {
|
||||
row.landId = currentRow.landId;
|
||||
console.info('stageRowSave', row);
|
||||
savePlantingStage({ ...row })
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('添加成功！');
|
||||
done();
|
||||
getList();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
})
|
||||
.finally(() => {
|
||||
loading();
|
||||
});
|
||||
};
|
||||
|
||||
const stageRowUpdate = (row, index, done, loading) => {
|
||||
console.info('stageRowUpdate');
|
||||
editPlantingStage(row)
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
app.$message.success('更新成功！');
|
||||
done();
|
||||
getList();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
app.$message.error(err.msg);
|
||||
})
|
||||
.finally(() => {
|
||||
loading();
|
||||
});
|
||||
};
|
||||
const stageClose = () => {
|
||||
isShowVal.value = false;
|
||||
emit('close');
|
||||
};
|
||||
</script>
|
||||
@ -78,12 +78,17 @@ const stageObj = reactive({
|
||||
2: '采收期',
|
||||
});
|
||||
|
||||
const handleWorkChange = async (value, form, done) => {
|
||||
stageState.form.workTime = value.item?.workTime || '';
|
||||
};
|
||||
|
||||
const isShowVal = ref(false);
|
||||
let currentRow = reactive({});
|
||||
|
||||
const loadList = () => {
|
||||
if (isShowVal.value) {
|
||||
console.info('loadList', props);
|
||||
getStageList();
|
||||
}
|
||||
};
|
||||
onMounted(() => {
|
||||
@ -107,13 +112,37 @@ const stageState = reactive({
|
||||
query: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
stage: null,
|
||||
},
|
||||
form: {},
|
||||
options: {
|
||||
...CRUD_OPTIONS,
|
||||
addBtn: false,
|
||||
selection: false,
|
||||
group: [
|
||||
{ label: '所属阶段', prop: 'stage' },
|
||||
{ label: '作业类型', prop: 'workType' },
|
||||
{ label: '作业时间', prop: 'operationDate' },
|
||||
],
|
||||
column: [
|
||||
// {
|
||||
// label: '种植产物',
|
||||
// prop: 'cropId',
|
||||
// type: 'select',
|
||||
// remote: false,
|
||||
// width: '160px',
|
||||
// showOverflowTooltip: true,
|
||||
// props: {
|
||||
// label: 'crop',
|
||||
// value: 'id',
|
||||
// },
|
||||
// dicHeaders: {
|
||||
// authorization: UserStore.token,
|
||||
// },
|
||||
// dicUrl: `${VITE_APP_BASE_API}/land-resource/baseInfo/planTypePage?current=1&size=999`,
|
||||
// dicFormatter: (res) => res.data.records ?? [],
|
||||
// rules: [{ required: true, message: '请选择', trigger: 'blur' }],
|
||||
// },
|
||||
{
|
||||
label: '所属阶段',
|
||||
prop: 'stage',
|
||||
@ -127,19 +156,42 @@ const stageState = reactive({
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '作业计划',
|
||||
label: '作业类型',
|
||||
prop: 'workId',
|
||||
type: 'select',
|
||||
search: true,
|
||||
dicData: workOptions,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'blur',
|
||||
search: false,
|
||||
remote: false,
|
||||
width: '160px',
|
||||
showOverflowTooltip: true,
|
||||
props: {
|
||||
label: 'workType',
|
||||
value: 'id',
|
||||
},
|
||||
dicHeaders: {
|
||||
authorization: UserStore.token,
|
||||
},
|
||||
dicUrl: `${VITE_APP_BASE_API}/land-resource/planManage/workPage?current=1&size=999`,
|
||||
dicFormatter: (res) => res.data.records ?? [],
|
||||
rules: { required: true, message: '请选择', trigger: 'blur' },
|
||||
change: handleWorkChange,
|
||||
},
|
||||
{
|
||||
label: '作业时间(多少天后)',
|
||||
prop: 'workTime',
|
||||
rules: { required: true, message: '请输入', trigger: 'blur' },
|
||||
props: {
|
||||
type: 'Number',
|
||||
},
|
||||
addDisabled: true,
|
||||
editDisplay: false,
|
||||
viewDisplay: false,
|
||||
},
|
||||
{
|
||||
label: '作业时间',
|
||||
prop: 'operationDate',
|
||||
editDisplay: false,
|
||||
addDisplay: false,
|
||||
},
|
||||
{ label: '作业时间', prop: 'coordinate', addDisplay: false, editDisplay: false },
|
||||
{ label: '结束时间', prop: 'createTime', addDisplay: false, editDisplay: false },
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
@ -166,7 +218,7 @@ const stageState = reactive({
|
||||
|
||||
async function getStageList() {
|
||||
stageState.loading = true;
|
||||
getPlantingStage({ ...stageState.query, planId: currentRow.currentRow.id })
|
||||
getPlantingStage({ ...stageState.query, planId: currentRow.id })
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
const { current, size, total, records } = res.data;
|
||||
@ -245,7 +297,7 @@ const onStateAdd = () => {
|
||||
};
|
||||
|
||||
const stageRowSave = (row, done, loading) => {
|
||||
row.planId = currentRow.planId;
|
||||
row.planId = currentRow.id;
|
||||
console.info('stageRowSave', row);
|
||||
savePlantingStage({ ...row })
|
||||
.then((res) => {
|
||||
@ -51,7 +51,8 @@
|
||||
</template>
|
||||
</avue-crud>
|
||||
|
||||
<stageList :is-show="stageShow" :row-original="stageRowVal" @close="stageHide"></stageList>
|
||||
<stageList :is-show="stageShow" :row-original="currentRowVal" @close="stageHide"></stageList>
|
||||
<historyList :is-show="historyShow" :row-original="currentRowVal" @close="historyHide"></historyList>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
@ -71,7 +72,8 @@ import {
|
||||
delPlantingStage,
|
||||
} from '@/apis/land.js';
|
||||
import { isEmpty, imageToBase64, getAssetsFile, downloadFile } from '@/utils';
|
||||
import stageList from '../../component/plantPlan/compoent/stage.vue';
|
||||
import stageList from '../../component/plantPlan/component/stage.vue';
|
||||
import historyList from '../../component/plantPlan/component/history.vue';
|
||||
|
||||
const { VITE_APP_BASE_API } = import.meta.env;
|
||||
const app = useApp();
|
||||
@ -90,7 +92,8 @@ const workOptions = reactive([
|
||||
]);
|
||||
|
||||
let stageShow = ref(false);
|
||||
let stageRowVal = reactive({});
|
||||
let currentRowVal = reactive({});
|
||||
let historyShow = ref(false);
|
||||
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
@ -229,6 +232,11 @@ const state = reactive({
|
||||
icon: 'edit',
|
||||
event: ({ row }) => toStage(row),
|
||||
},
|
||||
{
|
||||
name: '规划记录',
|
||||
icon: 'Memo',
|
||||
event: ({ row }) => toHistory(row),
|
||||
},
|
||||
{
|
||||
type: 'danger',
|
||||
name: '删除',
|
||||
@ -409,9 +417,9 @@ const rowDel = (row, index, done) => {
|
||||
};
|
||||
|
||||
const toStage = (row) => {
|
||||
stageRowVal = row;
|
||||
currentRowVal = row;
|
||||
stageShow.value = true;
|
||||
console.info('toStage', stageRowVal);
|
||||
console.info('toStage', currentRowVal);
|
||||
};
|
||||
|
||||
//导入
|
||||
@ -467,4 +475,12 @@ const rowClick = (row) => {
|
||||
const stageHide = () => {
|
||||
stageShow.value = false;
|
||||
};
|
||||
|
||||
const toHistory = (row) => {
|
||||
currentRowVal = row;
|
||||
historyShow.value = true;
|
||||
};
|
||||
const historyHide = () => {
|
||||
historyShow.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -45,7 +45,7 @@ onMounted(() => {
|
||||
valStr = m.val.toFixed(0);
|
||||
}
|
||||
m.valStr = [...valStr];
|
||||
console.info('valStr', m.valStr);
|
||||
// console.info('valStr', m.valStr);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@ -5,20 +5,23 @@
|
||||
<div class="item-td" :style="{ width: 'calc(100% / ' + listKeys.length + ')' }">{{ listKeysHeader[h] }}</div>
|
||||
</template>
|
||||
</div> -->
|
||||
<!-- <vue3ScrollSeamless class="scroll-wrap" :class-options="classOptions" :data-list="list"> -->
|
||||
<div v-for="(item, index) in list" :key="index" class="list-item">
|
||||
<vue3ScrollSeamless class="scroll-wrap" :class-options="classOptions" :data-list="datalist">
|
||||
<div v-for="(item, index) in datalist" :key="index" class="list-item">
|
||||
<div class="list-item-content">
|
||||
<div class="list-item-boday item-warp" :style="{ flex: listKeys.length }">
|
||||
<div class="item-content">
|
||||
<div class="label">{{ item.title }}</div>
|
||||
<div class="val">
|
||||
<el-progress :percentage="50" :show-text="false" :stroke-width="12" color="#6cd1f9" />
|
||||
<!-- <el-progress :percentage="50" :show-text="false" :indeterminate="false" :stroke-width="12" color="#6cd1f9" :duration="8" /> -->
|
||||
<div class="progress-warp" :style="{ width: item.percent + 'px' }">
|
||||
<div class="progress"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </vue3ScrollSeamless> -->
|
||||
</div>
|
||||
</vue3ScrollSeamless>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</template>
|
||||
@ -41,6 +44,19 @@ let list = reactive([
|
||||
{ title: '农机', value: 45 },
|
||||
]);
|
||||
|
||||
let datalist = computed(() => {
|
||||
return list.map((m) => {
|
||||
return { ...m, percent: parseInt(Number(m.value / max.value) * 200) };
|
||||
});
|
||||
});
|
||||
|
||||
let max = computed(() => {
|
||||
let valueList = new Set(list.map((item) => item.value));
|
||||
let sortValue = [...valueList].sort((a, b) => b - a) || [];
|
||||
// console.info('valueList', sortValue);
|
||||
return sortValue.length ? sortValue[0] : 0;
|
||||
});
|
||||
|
||||
const listKeys = reactive(['title', 'value']);
|
||||
const listKeysHeader = reactive({
|
||||
title: '分类',
|
||||
@ -50,6 +66,7 @@ const listKeysHeader = reactive({
|
||||
const classOptions = {
|
||||
singleHeight: 48,
|
||||
};
|
||||
onMounted(() => {});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -113,6 +130,23 @@ const classOptions = {
|
||||
}
|
||||
.val {
|
||||
width: calc(100% - 50px);
|
||||
.progress-warp {
|
||||
.progress {
|
||||
height: 10px;
|
||||
border-radius: 6px;
|
||||
background: linear-gradient(90deg, #45bfe9 0%, #01589c 100%);
|
||||
animation: expandWidth 1s ease-in-out forwards;
|
||||
}
|
||||
|
||||
@keyframes expandWidth {
|
||||
from {
|
||||
width: 0;
|
||||
}
|
||||
to {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="distribution-charts">
|
||||
<custom-echart-pie :chart-data="plantBreed.valData" height="100%" :option="plantBreed.option" />
|
||||
<custom-echart-pie :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
|
||||
const plantBreed = reactive({
|
||||
const chartsData = reactive({
|
||||
option: {
|
||||
color: ['#3685fe', '#41b879', '#ffd500'],
|
||||
title: {
|
||||
@ -42,6 +42,9 @@ const plantBreed = reactive({
|
||||
itemStyle: {
|
||||
borderRadius: 5,
|
||||
},
|
||||
// animationDuration: 15000,
|
||||
// // 可选：设置动画缓动效果
|
||||
// animationEasing: 'elasticOut',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div class="insect-pests-charts">
|
||||
<custom-echart-bar :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
const chartsData = reactive({
|
||||
option: {
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '2%',
|
||||
top: '18%',
|
||||
containLabel: true,
|
||||
},
|
||||
title: {
|
||||
text: ' ',
|
||||
textStyle: {
|
||||
color: '#333',
|
||||
},
|
||||
},
|
||||
label: {
|
||||
color: '#333',
|
||||
},
|
||||
barStyle: {
|
||||
barWidth: 15,
|
||||
itemStyle: {
|
||||
borderRadius: [8, 8, 0, 0], // 设置柱子的圆角半径
|
||||
},
|
||||
color: {
|
||||
type: 'linear', // 线性渐变
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: '#45bfe9' },
|
||||
{ offset: 1, color: '#01589c' },
|
||||
],
|
||||
global: false, // 默认为 false
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
valData: [
|
||||
{ value: 80, type: '经销商', name: '耿马镇' },
|
||||
{ value: 105, type: '经销商', name: '勐撒镇' },
|
||||
{ value: 100, type: '经销商', name: '勐永镇' },
|
||||
{ value: 125, type: '经销商', name: '孟定镇' },
|
||||
{ value: 217, type: '经销商', name: '勐简乡' },
|
||||
{ value: 200, type: '经销商', name: '贺派乡' },
|
||||
{ value: 155, type: '经销商', name: '四排山乡' },
|
||||
{ value: 80, type: '经销商', name: '芒洪乡' },
|
||||
{ value: 105, type: '经销商', name: '大兴乡' },
|
||||
],
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.insect-pests-charts {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div class="plant-type-charts">
|
||||
<custom-echart-pie :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
|
||||
const chartsData = reactive({
|
||||
option: {
|
||||
color: ['#3685fe', '#41b879', '#ffd500'],
|
||||
title: {
|
||||
text: ' ',
|
||||
textStyle: {
|
||||
color: '#333',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['甘蔗', '菠萝', '土豆', '番茄', '白菜', '其他'],
|
||||
right: '0', // 距离左侧10%的位置
|
||||
top: 'middle', // 垂直居中
|
||||
orient: 'vertical', // 图例垂直排列
|
||||
itemWidth: 15, // 图例标记的宽度
|
||||
itemHeight: 8, // 图例标记的高度
|
||||
textStyle: {
|
||||
fontSize: 10, // 图例文字的字体大小
|
||||
color: '#fff', // 图例文字的颜色
|
||||
},
|
||||
},
|
||||
label: {
|
||||
color: '#333',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: [20, 80],
|
||||
roseType: 'area',
|
||||
center: ['40%', '50%'],
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
borderRadius: 5,
|
||||
},
|
||||
// animationDuration: 15000,
|
||||
// // 可选：设置动画缓动效果
|
||||
// animationEasing: 'elasticOut',
|
||||
},
|
||||
],
|
||||
},
|
||||
valData: [
|
||||
{ value: 205.6, name: '甘蔗' },
|
||||
{ value: 308.7, name: '菠萝' },
|
||||
{ value: 359.6, name: '土豆' },
|
||||
{ value: 452.6, name: '番茄' },
|
||||
{ value: 388.9, name: '白菜' },
|
||||
{ value: 512.5, name: '其他' },
|
||||
],
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (chartsData.valData && chartsData.valData.length) {
|
||||
chartsData.valData.forEach((m, index) => {
|
||||
let num = 100;
|
||||
m.value = (Number(m.value) + Math.random() + num).toFixed(2);
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.plant-type-charts {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -4,15 +4,53 @@
|
||||
<template #center>
|
||||
<el-row style="width: 100%; height: 100%">
|
||||
<el-col :span="6" class="left-charts">
|
||||
<div class="left-charts-item"></div>
|
||||
<div class="left-charts-item"></div>
|
||||
<div class="left-charts-item"></div>
|
||||
<div class="left-charts-item">
|
||||
<customBack top-title="智慧种植种类分析" :top-postion="'left'">
|
||||
<template #back>
|
||||
<plantTypeCharts></plantTypeCharts>
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="left-charts-item">
|
||||
<customBack top-title="昆虫害监测" :top-postion="'left'">
|
||||
<template #back></template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="left-charts-item">
|
||||
<customBack top-title="病理害监测" :top-postion="'left'">
|
||||
<template #back></template>
|
||||
</customBack>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-row style="height: 60%">
|
||||
<el-col :span="24"> 1-1</el-col>
|
||||
</el-row>
|
||||
<el-row style="height: 40%">
|
||||
<el-col :span="12">
|
||||
<customBack top-title="水肥检测分析" :top-postion="'left'"> <template #back></template> </customBack>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<customBack top-title="智慧水肥灌溉" :top-postion="'right'"> <template #back></template> </customBack>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="12"></el-col>
|
||||
<el-col :span="6" class="right-charts">
|
||||
<div class="right-charts-item"></div>
|
||||
<div class="right-charts-item"></div>
|
||||
<div class="right-charts-item"></div>
|
||||
<div class="right-charts-item">
|
||||
<customBack top-title="智慧监控 A区 QQI" :top-postion="'right'">
|
||||
<template #back></template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="right-charts-item">
|
||||
<customBack top-title="种植产量分析" :top-postion="'right'">
|
||||
<template #back></template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="right-charts-item">
|
||||
<customBack top-title="水质检测分析" :top-postion="'right'">
|
||||
<template #back></template>
|
||||
</customBack>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
@ -21,6 +59,8 @@
|
||||
</template>
|
||||
<script setup>
|
||||
import baseBg from '@/components/baseBg.vue';
|
||||
import customBack from '@/components/customBack.vue';
|
||||
import plantTypeCharts from './components/plantTypeCharts.vue';
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.data-home-index {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user