Merge branch 'dev' of http://192.168.18.88:8077/sznyb/daimp-front into dev
This commit is contained in:
commit
035ecef88d
@ -5,15 +5,8 @@
|
||||
<el-dropdown-menu v-if="!isEmpty(actions)">
|
||||
<template v-for="item in actions" :key="item.name">
|
||||
<el-dropdown-item v-if="onPermission(item)" @click="item.event(data)">
|
||||
<el-button
|
||||
:type="item.type ?? 'primary'"
|
||||
:icon="typeof item.name === 'function' ? item.icon(data) : item.icon"
|
||||
:size="item.size"
|
||||
:disabled="item.disabled"
|
||||
text
|
||||
>
|
||||
<!-- {{ item.name }} -->
|
||||
{{ typeof item.name === 'function' ? item.name(data) : item.name }}
|
||||
<el-button :type="item.type ?? 'primary'" :icon="formatterIcon(item)" :size="item.size" :disabled="item.disabled" text>
|
||||
{{ formatterName(item) }}
|
||||
</el-button>
|
||||
</el-dropdown-item>
|
||||
</template>
|
||||
@ -33,6 +26,14 @@ const onPermission = (row) => {
|
||||
if (row.auth === undefined) return true;
|
||||
return typeof row.auth === 'function' ? row.auth(props.data) : row.auth;
|
||||
};
|
||||
|
||||
const formatterName = (row) => {
|
||||
return typeof row.name === 'function' ? row.name(props.data) : row.name;
|
||||
};
|
||||
|
||||
const formatterIcon = (row) => {
|
||||
return typeof row.icon === 'function' ? row.icon(props.data) : row.icon;
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.custom-table-operate {
|
||||
|
||||
67
main/src/components/custom-table-tree/index.vue
Normal file
67
main/src/components/custom-table-tree/index.vue
Normal file
@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div :class="`custom-table-tree ${shadow ? 'custom-table-tree__shadow' : ''}`">
|
||||
<div v-if="title" class="title">{{ title }}</div>
|
||||
<el-tree
|
||||
node-key="id"
|
||||
:data="data"
|
||||
:show-checkbox="option.showCheckbox"
|
||||
:default-expanded-keys="option.defaultExpandedKeys"
|
||||
:default-checked-keys="option.defaultCheckedKeys"
|
||||
:props="option.defaultProps"
|
||||
@node-click="handleNodeClick"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="custom-table-tree">
|
||||
const props = defineProps({
|
||||
title: { type: String, default: '' },
|
||||
shadow: { type: Boolean, default: true },
|
||||
data: { type: Array, default: () => [] },
|
||||
option: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
showCheckbox: false,
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label',
|
||||
},
|
||||
defaultExpandedKeys: [],
|
||||
defaultCheckedKeys: [],
|
||||
};
|
||||
},
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(['node-click']);
|
||||
|
||||
const handleNodeClick = (data) => {
|
||||
emit('node-click', data);
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.custom-table-tree {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 200px;
|
||||
@include flex-column();
|
||||
|
||||
&__shadow {
|
||||
box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 36px;
|
||||
padding: 0 20px;
|
||||
line-height: 36px;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
background: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.el-tree {
|
||||
padding: 16px 10px 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,6 @@
|
||||
import SvgIcon from './svg-icon';
|
||||
import CustomTableOperate from './custom-table-operate';
|
||||
import CustomTableTree from './custom-table-tree';
|
||||
import CustomImportExcel from './custom-import-excel';
|
||||
import CustomRichEditor from './custom-rich-editor';
|
||||
import CustomEchartBar from './custom-echart-bar';
|
||||
@ -7,4 +8,14 @@ import CustomEchartPie from './custom-echart-pie';
|
||||
import CustomEchartLine from './custom-echart-line';
|
||||
import CustomEchartMixin from './custom-echart-mixin';
|
||||
|
||||
export { SvgIcon, CustomTableOperate, CustomImportExcel, CustomRichEditor, CustomEchartBar, CustomEchartPie, CustomEchartLine, CustomEchartMixin };
|
||||
export {
|
||||
SvgIcon,
|
||||
CustomTableOperate,
|
||||
CustomTableTree,
|
||||
CustomImportExcel,
|
||||
CustomRichEditor,
|
||||
CustomEchartBar,
|
||||
CustomEchartPie,
|
||||
CustomEchartLine,
|
||||
CustomEchartMixin,
|
||||
};
|
||||
|
||||
@ -3,17 +3,16 @@
|
||||
* @Author: zenghua.wang
|
||||
* @Date: 2023-06-20 11:48:41
|
||||
* @LastEditors: zenghua.wang
|
||||
* @LastEditTime: 2025-03-06 16:11:29
|
||||
* @LastEditTime: 2025-03-11 16:51:49
|
||||
*/
|
||||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
import Layout from '@/layouts/index.vue';
|
||||
|
||||
import resourceRouter from './modules/resource';
|
||||
import traceRouter from './modules/trace';
|
||||
import landsRoutes from './modules/lands';
|
||||
import dictRoutes from './modules/dict';
|
||||
import productOperateMainRoutes from './modules/productOperateMain';
|
||||
import inputSuppliesRoutes from './modules/inputSupplies';
|
||||
import plantingAndBreedingRouter from './modules/plantingAndBreeding';
|
||||
|
||||
export const constantRoutes = [
|
||||
{
|
||||
@ -45,10 +44,9 @@ export const constantRoutes = [
|
||||
},
|
||||
...resourceRouter,
|
||||
...traceRouter,
|
||||
// ...landsRoutes,
|
||||
// ...dictRoutes,
|
||||
...productOperateMainRoutes,
|
||||
...inputSuppliesRoutes,
|
||||
...plantingAndBreedingRouter,
|
||||
];
|
||||
|
||||
/**
|
||||
|
||||
@ -0,0 +1,25 @@
|
||||
import Layout from '@/layouts/index.vue';
|
||||
|
||||
export default [
|
||||
{
|
||||
path: '/sub-government-affairs-service/plantingAndBreeding',
|
||||
name: 'plantingAndBreeding',
|
||||
component: Layout,
|
||||
redirect: '/sub-government-affairs-service/breeding-base-information',
|
||||
meta: { title: '种养植综合管理', icon: 'Document' },
|
||||
children: [
|
||||
{
|
||||
path: '/sub-government-affairs-service/environment-monitor',
|
||||
name: 'environment-monitor',
|
||||
component: () => import('@/views/plantingAndBreeding/environment/index.vue'),
|
||||
meta: { title: '环境监测信息', icon: 'Document' },
|
||||
},
|
||||
// {
|
||||
// path: '/sub-government-affairs-service/breeding-base-information',
|
||||
// name: 'breeding-base-information',
|
||||
// component: () => import('@/views/plantingAndBreeding/base/index.vue'),
|
||||
// meta: { title: '种养殖基地信息', icon: 'Document' },
|
||||
// },
|
||||
],
|
||||
},
|
||||
];
|
||||
@ -0,0 +1,406 @@
|
||||
<template>
|
||||
<div class="custom-page">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="4">
|
||||
<custom-table-tree title="土地分类" :data="landTypeData" @node-click="onNodeClick" />
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<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-del="rowDel"
|
||||
@row-save="rowSave"
|
||||
@row-update="rowUpdate"
|
||||
>
|
||||
<!-- <template #menu-left>
|
||||
<el-button type="primary" icon="Plus" @click="onAdd">新增</el-button>
|
||||
<el-button type="success" icon="download" @click="onExport">导出</el-button>
|
||||
</template> -->
|
||||
|
||||
<template #menu="scope">
|
||||
<custom-table-operate :actions="state.options.actions" :data="scope" />
|
||||
</template>
|
||||
</avue-crud>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { useApp } from '@/hooks';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { CRUD_OPTIONS } from '@/config';
|
||||
import { mockData, sleep } from '@/utils';
|
||||
|
||||
const { VITE_APP_BASE_API } = import.meta.env;
|
||||
const app = useApp();
|
||||
const UserStore = useUserStore();
|
||||
const crudRef = ref(null);
|
||||
const landTypeData = ref([
|
||||
{
|
||||
label: '农用地',
|
||||
id: '0',
|
||||
children: [
|
||||
{ label: '耕地', id: '01', children: [], pId: '0' },
|
||||
{ label: '园地', children: [], id: '02', pId: '0' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '建设用地',
|
||||
id: '1',
|
||||
children: [{ label: '城乡建设用地', children: [], id: '11', pId: '10' }],
|
||||
},
|
||||
{
|
||||
label: '住宅用地',
|
||||
id: '2',
|
||||
children: [],
|
||||
},
|
||||
]);
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
query: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
},
|
||||
form: {},
|
||||
// selection: [],
|
||||
options: {
|
||||
...CRUD_OPTIONS,
|
||||
addBtnText: '阀值设置',
|
||||
selection: false,
|
||||
column: [
|
||||
{
|
||||
label: '地块名称',
|
||||
prop: 'p1',
|
||||
search: true,
|
||||
width: 200,
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请输入',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '地点',
|
||||
prop: 'p2',
|
||||
width: 200,
|
||||
// type: 'cascader',
|
||||
// hide: true,
|
||||
// addDisplay: true,
|
||||
// editDisplay: true,
|
||||
// viewDisplay: false,
|
||||
// props: {
|
||||
// label: 'areaName',
|
||||
// value: 'areaCode',
|
||||
// children: 'areaChildVOS',
|
||||
// },
|
||||
// dicUrl: `${VITE_APP_BASE_API}/system/area/region?areaCode=530000`,
|
||||
// dicHeaders: {
|
||||
// authorization: UserStore.token,
|
||||
// },
|
||||
// dicFormatter: (res) => res.data ?? [],
|
||||
rules: {
|
||||
required: true,
|
||||
message: '请选择',
|
||||
trigger: 'blur',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '土壤环境报告',
|
||||
children: [
|
||||
{
|
||||
label: '酸碱度(PH值)',
|
||||
prop: 'p3',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
label: '土壤质地',
|
||||
prop: 'p4',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
label: '养分含量',
|
||||
prop: 'p5',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
label: '重金属含量',
|
||||
prop: 'p6',
|
||||
width: 150,
|
||||
overHidden: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '水环境报告',
|
||||
children: [
|
||||
{
|
||||
label: '水温',
|
||||
prop: 'p7',
|
||||
},
|
||||
{
|
||||
label: '浑浊度',
|
||||
prop: 'p8',
|
||||
},
|
||||
{
|
||||
label: '酸碱度',
|
||||
prop: 'p9',
|
||||
},
|
||||
{
|
||||
label: '盐分含量',
|
||||
prop: 'p10',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
label: '重金属和有害物质',
|
||||
prop: 'p11',
|
||||
width: 150,
|
||||
overHidden: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '大气环境报告',
|
||||
children: [
|
||||
{
|
||||
label: '温度',
|
||||
prop: 'p12',
|
||||
},
|
||||
{
|
||||
label: '湿度',
|
||||
prop: 'p13',
|
||||
},
|
||||
{
|
||||
label: '风速',
|
||||
prop: 'p14',
|
||||
},
|
||||
{
|
||||
label: '风向',
|
||||
prop: 'p15',
|
||||
},
|
||||
{
|
||||
label: '光照强度',
|
||||
prop: 'p16',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
label: '降雨量',
|
||||
prop: 'p17',
|
||||
},
|
||||
{
|
||||
label: '有害气体',
|
||||
prop: 'p18',
|
||||
width: 150,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '创建时间',
|
||||
prop: 'createTime',
|
||||
width: 200,
|
||||
search: true,
|
||||
display: false,
|
||||
},
|
||||
{
|
||||
label: '更新时间',
|
||||
prop: 'updateTime',
|
||||
width: 200,
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
name: '查看',
|
||||
icon: 'view',
|
||||
event: ({ row }) => rowView(row),
|
||||
},
|
||||
{
|
||||
name: '编辑',
|
||||
icon: 'edit',
|
||||
event: ({ row }) => rowEdit(row),
|
||||
},
|
||||
{
|
||||
type: 'success',
|
||||
name: ({ row }) => {
|
||||
return row.status === 1 ? '禁用' : '启用';
|
||||
},
|
||||
icon: ({ row }) => {
|
||||
return row.status === 1 ? 'turnOff' : 'open';
|
||||
},
|
||||
event: ({ row }) => rowStatus(row),
|
||||
},
|
||||
{
|
||||
type: 'danger',
|
||||
name: '删除',
|
||||
icon: 'delete',
|
||||
event: ({ row }) => rowDel(row),
|
||||
},
|
||||
],
|
||||
},
|
||||
pageData: {
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
data: [],
|
||||
currentRow: {},
|
||||
});
|
||||
|
||||
const loadData = async () => {
|
||||
//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;
|
||||
// });
|
||||
|
||||
state.loading = true;
|
||||
await sleep(500);
|
||||
state.data = mockData(
|
||||
{
|
||||
p1: '202501号地',
|
||||
p2: '耿马县/耿马镇',
|
||||
p3: '酸性',
|
||||
p4: '正常',
|
||||
p5: '正常',
|
||||
p7: '正常',
|
||||
p6: '正常',
|
||||
p8: '正常',
|
||||
p9: '正常',
|
||||
p10: '正常',
|
||||
p11: '铜含量接近阀值',
|
||||
p12: '正常',
|
||||
p13: '正常',
|
||||
p14: '正常',
|
||||
p15: '东南风',
|
||||
p16: '正常',
|
||||
p17: '偏低',
|
||||
p18: '正常',
|
||||
status: 1,
|
||||
createTime: '2025-01-01',
|
||||
updateTime: '2025-01-15',
|
||||
},
|
||||
10
|
||||
);
|
||||
state.loading = false;
|
||||
};
|
||||
|
||||
loadData();
|
||||
|
||||
const onNodeClick = (data) => {
|
||||
console.log('onNodeClick', data);
|
||||
};
|
||||
|
||||
// 页数
|
||||
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 rowView = (row) => {
|
||||
crudRef.value && crudRef.value.rowView(row);
|
||||
};
|
||||
|
||||
// 启用、禁用
|
||||
const rowStatus = (row) => {
|
||||
console.info('操作状态');
|
||||
};
|
||||
|
||||
// 新增
|
||||
const onAdd = () => {
|
||||
crudRef.value && crudRef.value.rowAdd();
|
||||
};
|
||||
|
||||
const rowSave = (row, done, loading) => {
|
||||
// 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) => {
|
||||
crudRef.value && crudRef.value.rowEdit(row);
|
||||
};
|
||||
|
||||
const rowUpdate = (row, index, done, loading) => {
|
||||
// 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) => {};
|
||||
</script>
|
||||
@ -20,7 +20,7 @@ const initChart = () => {
|
||||
// 配置项
|
||||
const option = {
|
||||
title: {
|
||||
text: '耿马县地图散点图',
|
||||
text: '',
|
||||
left: 'center',
|
||||
},
|
||||
tooltip: {
|
||||
@ -33,14 +33,14 @@ const initChart = () => {
|
||||
},
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
show: false,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
feature: {
|
||||
dataView: { readOnly: false },
|
||||
restore: {},
|
||||
saveAsImage: {},
|
||||
// dataView: { readOnly: false },
|
||||
// restore: {},
|
||||
// saveAsImage: {},
|
||||
},
|
||||
},
|
||||
geo: {
|
||||
@ -72,10 +72,10 @@ const initChart = () => {
|
||||
borderWidth: 1, // 设置镇边界的宽度
|
||||
areaColor: 'transparent', // 设置背景透明，只显示边界
|
||||
},
|
||||
emphasis: {
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2,
|
||||
},
|
||||
// emphasis: {
|
||||
// borderColor: '#fff',
|
||||
// borderWidth: 2,
|
||||
// },
|
||||
},
|
||||
},
|
||||
// 闪烁散点图系列
|
||||
@ -113,7 +113,7 @@ const initChart = () => {
|
||||
scale: 3, // 波纹缩放比例
|
||||
brushType: 'stroke', // 波纹绘制方式：'stroke' 或 'fill'
|
||||
},
|
||||
hoverAnimation: true,
|
||||
hoverAnimation: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user