From c1e2ec17485606ba8d2d6de9520396e55248ff6d Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期二, 25 三月 2025 17:10:50 +0800
Subject: [PATCH] feat:添加界面，接入设备数据
---
src/views/facility/monitorList/index.vue | 68 +++++++++++++++++++++------------
1 files changed, 43 insertions(+), 25 deletions(-)
diff --git a/src/views/facility/monitorList/index.vue b/src/views/facility/monitorList/index.vue
index e757b17..936c6ca 100644
--- a/src/views/facility/monitorList/index.vue
+++ b/src/views/facility/monitorList/index.vue
@@ -8,7 +8,6 @@
-->
<script setup>
import pointApi from "@/api/facility/point";
-import {getMonitorTypeList} from '@/api/facility/monitorType.js'
import {ref, onMounted} from "vue";
import setPostParams from "@/utils/searchParams.js";
@@ -43,7 +42,7 @@
let tableHeader = ref({
pointName: '监控点名称',
pointCode: '监控点编号',
- pointTypeName: '监控类型',
+ pointType: '监控类型',
address: '详细地址',
createTimeView: '创建时间',
imageUrl: '图片',
@@ -54,7 +53,7 @@
async function getList(val) {
loading.value = true;
let postParam = setPostParams(val)
- await pointApi().search({ ...postParam, ...searchParams.value}).then((res) => {
+ await pointApi().search({...postParam, ...searchParams.value}).then((res) => {
tableData.value = res.data.list
pageParam.value.total = res.data.total
pageParam.value.limit = res.data.limit
@@ -69,20 +68,22 @@
const formLabel = ({
pointName: '监控点名称',
pointCode: '监控点编号',
- pointTypeId: '监控类型',
+ pointType: '监控点类型',
+ parentId: '父级监控点',
address: '详细地址',
imageUrl: '图片',
remark: '备注'
})
const rules = ref({
- pointName: [{required: true, message: `请输入${ formLabel.pointName}`, trigger: "blur"}],
- pointCode: [{required: true, message: `请输入${ formLabel.address}`, trigger: "blur"}],
- pointTypeId: [{required: true, message: `请输入${ formLabel.pointTypeId}`, trigger: "blur"}],
+ pointName: [{required: true, message: `请输入${formLabel.pointName}`, trigger: "blur"}],
+ pointCode: [{required: true, message: `请输入${formLabel.address}`, trigger: "blur"}],
+ pointType: [{required: true, message: `请输入${formLabel.pointType}`, trigger: "blur"}],
});
const form = ref({
pointName: '',
pointCode: '',
- pointTypeId: '',
+ pointType: '',
+ parentId: '',
address: '',
imageUrl: '',
remark: ''
@@ -90,8 +91,15 @@
const searchParams = ref({
keywords: '',
});
+// 监控点列表
+const monityList = ref([]);
// 监控点类型
-const monityTypeList = ref([]);
+const monityTypeList = [
+ {id: 1, name: '水温监测点'},
+ {id: 2, name: '生态流量监测点'}
+];
+const cascaderOption = { label: 'pointName', value: 'id', children: 'childrenList', checkStrictly: true, expandTrigger: 'hover', emitPath: false }; //级联选择器配置
+
/** 新增按钮操作 */
async function handleAdd() {
reset();
@@ -123,11 +131,11 @@
});
}
-// 获取监控点类型
-const getMonitryType = () => {
- let postParam = { limit: 100, page: 1 }
- getMonitorTypeList(postParam).then(res => {
- monityTypeList.value = res.data.list;
+
+// 获取监控点列表
+const getMonitryList = () => {
+ pointApi().getParentPoint().then(res => {
+ monityList.value = res.data;
})
}
@@ -179,9 +187,10 @@
/** 表单重置 */
function reset() {
form.value = {
+ parentId: '',
pointName: '',
pointCode: '',
- pointTypeId: '',
+ pointType: '',
address: '',
imageUrl: '',
remark: ''
@@ -191,7 +200,7 @@
onMounted(() => {
getList();
- getMonitryType()
+ getMonitryList();
})
</script>
<template>
@@ -236,6 +245,9 @@
<div v-if="key === 'imageUrl'">
<img :src="scope.row.headImg" class="table-headImg"/>
</div>
+ <div v-else-if="key === 'pointType'">
+ {{ scope.row.pointType === 1 ? '水温监测点' : '生态流量监测点' }}
+ </div>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -259,14 +271,11 @@
<!-- 添加/修改表单 -->
<el-dialog :title="title" v-model="open" append-to-body center>
<el-form class="form-box" ref="formRef" :model="form" :rules="rules" label-width='auto'>
- <el-form-item :label="formLabel.pointName" prop="pointName">
- <el-input v-model="form.pointName" :placeholder="'请输入'+formLabel.pointName"/>
+ <el-form-item :label="formLabel.parentId" prop="parentId">
+ <el-cascader v-model="form.parentId" :options="monityList" :show-all-levels="false" :props="cascaderOption" />
</el-form-item>
- <el-form-item :label="formLabel.pointCode" prop="pointCode">
- <el-input v-model="form.pointCode" :placeholder="'请输入'+formLabel.pointCode"/>
- </el-form-item>
- <el-form-item :label="formLabel.pointTypeId" prop="pointTypeId">
- <el-select v-model="form.pointTypeId" :placeholder="'请输入'+formLabel.pointTypeId">
+ <el-form-item :label="formLabel.pointType" prop="pointType">
+ <el-select v-model="form.pointType" :placeholder="'请输入'+formLabel.pointType">
<el-option
v-for="(item,index) in monityTypeList"
:label="item.name"
@@ -275,13 +284,19 @@
></el-option>
</el-select>
</el-form-item>
+ <el-form-item :label="formLabel.pointName" prop="pointName">
+ <el-input v-model="form.pointName" :placeholder="'请输入'+formLabel.pointName"/>
+ </el-form-item>
+ <el-form-item :label="formLabel.pointCode" prop="pointCode">
+ <el-input v-model="form.pointCode" :placeholder="'请输入'+formLabel.pointCode"/>
+ </el-form-item>
<el-form-item :label="formLabel.address" prop="address">
<el-input v-model="form.address" :placeholder="'请输入'+formLabel.address"/>
</el-form-item>
<el-form-item :label="formLabel.remark" prop="address">
<el-input v-model="form.remark" :placeholder="'请输入'+formLabel.remark"/>
</el-form-item>
- <el-form-item></el-form-item>
+ <!-- <el-form-item></el-form-item>-->
<el-form-item label="图片" prop="imageUrl" style="flex: 1">
<upload-icons @uploadData="uploadData" :imageList="form.imageUrl" :limit="1"></upload-icons>
<span style="display: block;">(请上传1张设备图片)</span>
@@ -298,7 +313,10 @@
</template>
<style lang="scss" scoped>
-.form-box{
+.form-box {
justify-content: normal;
+ :deep(.el-cascader){
+ flex-grow: 1;
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3