feat:监测和溯源
This commit is contained in:
parent
151f1e0221
commit
19008742f7
@ -23,11 +23,9 @@
|
||||
@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-left>
|
||||
<el-button type="primary" icon="plus" @click="onThreshold">阀值设置</el-button>
|
||||
</template>
|
||||
<template #menu="scope">
|
||||
<custom-table-operate :actions="state.options.actions" :data="scope" />
|
||||
</template>
|
||||
@ -35,17 +33,22 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<custom-info ref="customInfoRef" :row="state.currentRow" />
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useApp } from '@/hooks';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { CRUD_OPTIONS } from '@/config';
|
||||
import { mockData, sleep } from '@/utils';
|
||||
import CustomInfo from './info.vue';
|
||||
|
||||
const { VITE_APP_BASE_API } = import.meta.env;
|
||||
const { VITE_APP_BASE_API, VITE_APP_NAME } = import.meta.env;
|
||||
const app = useApp();
|
||||
const UserStore = useUserStore();
|
||||
const router = useRouter();
|
||||
const crudRef = ref(null);
|
||||
const landTypeData = ref([
|
||||
{
|
||||
@ -78,6 +81,7 @@ const state = reactive({
|
||||
options: {
|
||||
...CRUD_OPTIONS,
|
||||
addBtnText: '阀值设置',
|
||||
addBtn: false,
|
||||
selection: false,
|
||||
column: [
|
||||
{
|
||||
@ -230,16 +234,16 @@ const state = reactive({
|
||||
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: 'success',
|
||||
// name: ({ row }) => {
|
||||
// return row.status === 1 ? '禁用' : '启用';
|
||||
// },
|
||||
// icon: ({ row }) => {
|
||||
// return row.status === 1 ? 'turnOff' : 'open';
|
||||
// },
|
||||
// event: ({ row }) => rowStatus(row),
|
||||
// },
|
||||
{
|
||||
type: 'danger',
|
||||
name: '删除',
|
||||
@ -301,7 +305,7 @@ const loadData = async () => {
|
||||
p16: '正常',
|
||||
p17: '偏低',
|
||||
p18: '正常',
|
||||
status: 1,
|
||||
// status: 1,
|
||||
createTime: '2025-01-01',
|
||||
updateTime: '2025-01-15',
|
||||
},
|
||||
@ -348,8 +352,10 @@ const selectionChange = (rows) => {
|
||||
};
|
||||
|
||||
// 查看
|
||||
const customInfoRef = ref(null);
|
||||
const rowView = (row) => {
|
||||
crudRef.value && crudRef.value.rowView(row);
|
||||
state.currentRow = row;
|
||||
customInfoRef.value && customInfoRef.value.show();
|
||||
};
|
||||
|
||||
// 启用、禁用
|
||||
@ -403,4 +409,9 @@ const rowUpdate = (row, index, done, loading) => {
|
||||
|
||||
// 删除
|
||||
const rowDel = (row) => {};
|
||||
|
||||
// 阀值设置
|
||||
const onThreshold = () => {
|
||||
router.push({ path: `/${VITE_APP_NAME}/threshold-value-setting` });
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,292 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="state.visible"
|
||||
draggable
|
||||
title="查看"
|
||||
width="70%"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
@close="state.visible = false"
|
||||
>
|
||||
<div class="monitor">
|
||||
<div class="monitor-tabs">
|
||||
<el-radio-group v-model="state.currentTab">
|
||||
<el-radio-button :value="1">环境检测报告</el-radio-button>
|
||||
<el-radio-button :value="2">环境监测数据</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div v-if="state.currentTab === 1" class="monitor-panel">
|
||||
<div class="monitor-panel-item">
|
||||
<h3>土壤环境报告</h3>
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="酸碱度（PH值）">正常</el-descriptions-item>
|
||||
<el-descriptions-item label="土壤质地">砂土含量大，通气性良好，含水性较差</el-descriptions-item>
|
||||
<el-descriptions-item label="养分含量">氮元素含量不足</el-descriptions-item>
|
||||
<el-descriptions-item label="重金属含量">重金属含量超标</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<div class="suggestion">
|
||||
<el-tag type="primary">处理建议</el-tag>
|
||||
<p>根据大气情况及时浇灌，适宜施加配肥，清理田中污染物。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="monitor-panel-item">
|
||||
<h3>水环境报告</h3>
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="水温">偏高</el-descriptions-item>
|
||||
<el-descriptions-item label="浑浊度">正常</el-descriptions-item>
|
||||
<el-descriptions-item label="酸碱度">正常</el-descriptions-item>
|
||||
<el-descriptions-item label="盐分含量">正常</el-descriptions-item>
|
||||
<el-descriptions-item label="重金属和有毒物">铜金属含量接近预警值</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<div class="suggestion">
|
||||
<el-tag type="primary">处理建议</el-tag>
|
||||
<p>温度偏高，不宜在此处取水灌溉，建议观察水源。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="monitor-panel-item">
|
||||
<h3>大气环境报告</h3>
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="温度">正常</el-descriptions-item>
|
||||
<el-descriptions-item label="湿度">偏低</el-descriptions-item>
|
||||
<el-descriptions-item label="风速">微风</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<div class="suggestion">
|
||||
<el-tag type="primary">处理建议</el-tag>
|
||||
<p>可进行适量浇灌，如需进行浇灌，农药喷洒，请注意风向。同时注解。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="state.currentTab === 2" class="monitor-panel">
|
||||
<div class="monitor-panel-item">
|
||||
<h3>土壤环境检测</h3>
|
||||
<div class="data-row">
|
||||
<span class="label">酸碱度（PH值）：</span>
|
||||
<span class="value">6.3</span>
|
||||
</div>
|
||||
|
||||
<div class="data-row">
|
||||
<span class="label">土壤质地：</span>
|
||||
<div class="value">
|
||||
<el-descriptions :column="3" border>
|
||||
<el-descriptions-item label="砂土含量">75%</el-descriptions-item>
|
||||
<el-descriptions-item label="土壤含量">50%</el-descriptions-item>
|
||||
<el-descriptions-item label="黏土含量">30%</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="data-row nutrient-table">
|
||||
<span class="label">养分含量：</span>
|
||||
<div class="value">
|
||||
<el-descriptions :column="3" border>
|
||||
<el-descriptions-item v-for="(item, index) in nutrientData" :key="index" :label="item.name">{{ item.value }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="data-row">
|
||||
<span class="label">重金属含量：</span>
|
||||
<div class="value">
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item v-for="(item, index) in waterMetalData" :key="index" :label="item.name">{{ item.value }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="monitor-panel-item">
|
||||
<h3>水环境检测</h3>
|
||||
<div class="data-row">
|
||||
<span class="label"></span>
|
||||
<div class="value">
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="水温">15℃%</el-descriptions-item>
|
||||
<el-descriptions-item label="浑浊度">8NTU</el-descriptions-item>
|
||||
<el-descriptions-item label="酸碱度">5.8</el-descriptions-item>
|
||||
<el-descriptions-item label="盐分含量">1500us/cm</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="data-row">
|
||||
<span class="label">重金属和有毒物：</span>
|
||||
<div class="value">
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item v-for="(item, index) in waterMetalData" :key="index" :label="item.name">{{ item.value }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="monitor-panel-item">
|
||||
<h3>大气环境检测</h3>
|
||||
<div class="data-row">
|
||||
<span class="label"></span>
|
||||
<div class="value">
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="温度">15℃</el-descriptions-item>
|
||||
<el-descriptions-item label="湿度">50%</el-descriptions-item>
|
||||
<el-descriptions-item label="风速">1.5m/s</el-descriptions-item>
|
||||
<el-descriptions-item label="风向">东南风</el-descriptions-item>
|
||||
<el-descriptions-item label="光照强度">10000lx</el-descriptions-item>
|
||||
<el-descriptions-item label="降雨量">500mm</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="monitor-panel-item">
|
||||
<h3>传感器工作情况</h3>
|
||||
<div class="data-row">
|
||||
<span class="label"></span>
|
||||
<div class="value sensor-status">
|
||||
<div class="status-item">
|
||||
<span>土壤传感器</span>
|
||||
<el-tag type="success">正常</el-tag>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span>水传感器</span>
|
||||
<el-tag type="success">正常</el-tag>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span>大气传感器</span>
|
||||
<el-tag type="danger">异常</el-tag>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span>雨量剂</span>
|
||||
<el-tag type="success">正常</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
row: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
visible: false,
|
||||
currentTab: 1,
|
||||
});
|
||||
|
||||
const nutrientData = ref([
|
||||
{ name: '全氮', value: '0.2%' },
|
||||
{ name: '有效磷', value: '20mg/kg' },
|
||||
{ name: '速效钾', value: '150mg/kg' },
|
||||
{ name: '硼元素', value: '300mg/kg' },
|
||||
{ name: '锌元素', value: '40mg/kg' },
|
||||
{ name: '铁元素', value: '10mg/kg' },
|
||||
{ name: '锰元素', value: '5mg/kg' },
|
||||
{ name: '铜元素', value: '3mg/kg' },
|
||||
]);
|
||||
|
||||
const metalData = ref([
|
||||
{ name: '铅', value: '0.2mg/kg' },
|
||||
{ name: '铬', value: '45mg/kg' },
|
||||
{ name: '汞', value: '1.3mg/kg' },
|
||||
{ name: '镉', value: '0.3mg/kg' },
|
||||
]);
|
||||
|
||||
const waterMetalData = ref([
|
||||
{ name: '铜', value: '0.5mg/L' },
|
||||
{ name: '锌', value: '1.5mg/L' },
|
||||
{ name: '铅', value: '0.08mg/L' },
|
||||
{ name: '镉', value: '0.005mg/L' },
|
||||
]);
|
||||
|
||||
defineExpose({
|
||||
show: () => {
|
||||
state.visible = true;
|
||||
},
|
||||
hide: () => {
|
||||
state.visible = false;
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.monitor {
|
||||
padding: 20px;
|
||||
margin: 0 auto;
|
||||
|
||||
&-tabs {
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-panel {
|
||||
&-item {
|
||||
margin-bottom: 20px;
|
||||
|
||||
h3 {
|
||||
margin-bottom: 16px;
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.suggestion {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-top: 16px;
|
||||
padding: 10px;
|
||||
background-color: var(--el-color-info-light-9);
|
||||
border-radius: 4px;
|
||||
color: var(--el-text-color-secondary);
|
||||
|
||||
p {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-descriptions__label) {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
:deep(.el-descriptions__content) {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.data-row {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.label {
|
||||
min-width: 120px;
|
||||
color: var(--el-text-color-secondary);
|
||||
text-align: right;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.value {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sensor-status {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -35,6 +35,7 @@ import { useRouter } from 'vue-router';
|
||||
import { useApp } from '@/hooks';
|
||||
import { isEmpty, getAssetsFile } from '@/utils';
|
||||
|
||||
const { VITE_APP_NAME } = import.meta.env;
|
||||
const router = useRouter();
|
||||
const app = useApp();
|
||||
const code = ref('');
|
||||
@ -44,7 +45,7 @@ const onSearch = () => {
|
||||
app.$message.error('请输入溯源码进行查询！');
|
||||
return;
|
||||
}
|
||||
router.push({ path: '/trace-info', query: { code: code.value } });
|
||||
router.push({ path: `/${VITE_APP_NAME}/trace-info`, query: { code: code.value } });
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -105,6 +105,7 @@ import { CRUD_VIEW_OPTIONS } from '@/config';
|
||||
import { isEmpty } from '@/utils';
|
||||
import { GetTraceDetail } from '@/apis/coding';
|
||||
|
||||
const { VITE_APP_NAME } = import.meta.env;
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const app = useApp();
|
||||
@ -209,7 +210,7 @@ const onSelect = (index) => {
|
||||
};
|
||||
|
||||
const onBack = () => {
|
||||
router.push({ path: '/trace-search' });
|
||||
router.push({ path: `/${VITE_APP_NAME}/trace-search` });
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user