326 lines
12 KiB
Vue
326 lines
12 KiB
Vue
<template>
|
||
<MOSTY.FromPage :title="props.editObj.title" @closeDialog="closepost">
|
||
<template #content>
|
||
<MOSTY.Assort :title="'基础信息'" />
|
||
<el-form :model="data.config" ref="ruleFormRef" label-position="right" :rules="rules" label-width="150px"
|
||
:disabled='!props.editObj.saveBtnShow'>
|
||
<el-form-item label="设备类型：" prop="sblx">
|
||
<el-select v-model="data.config.sblx" placeholder="请选择设备类型" clearable style="width: 337px">
|
||
<el-option v-for="item in D_BZ_YJSBLX" :key="item.value" :label="item.label"
|
||
:value="item.value"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="预警设备名称:" prop="sbmc">
|
||
<el-input v-model="data.config.sbmc" style="width: 337px" />
|
||
</el-form-item>
|
||
<el-form-item label="设备编号:" prop="sbbh">
|
||
<el-input v-model="data.config.sbbh" style="width: 337px" />
|
||
</el-form-item>
|
||
<el-form-item label="设备状态：" prop="sbzt">
|
||
<el-select v-model="data.config.sbzt" placeholder="请选择设备状态" clearable style="width: 337px">
|
||
<el-option v-for="item in D_BZ_DLSBZT" :key="item.value" :label="item.label"
|
||
:value="item.value"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="IP地址：" prop="ipaddr">
|
||
<el-input v-model="data.config.ipaddr" placeholder="请输入IP地址" style="width: 337px"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="端口号：" prop="port">
|
||
<el-input v-model="data.config.port" type="number" placeholder="请输入端口号" style="width: 337px"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="绑定设备:" prop="parentname">
|
||
<el-input v-model="data.config.parentname" style="width: 337px" readonly clearable>
|
||
<template #append>
|
||
<el-button class='cursor' @click="chooseSb()">选择</el-button>
|
||
</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item label="所属场所:" prop="sitename">
|
||
<el-input v-model="data.config.sitename" style="width: 337px" disabled />
|
||
</el-form-item>
|
||
<el-form-item :label="data.config.publicarea == '1' ? '所属场区:' : '所属建筑物:'" prop="buildingname">
|
||
<el-input v-model="data.config.buildingname" style="width: 337px" disabled />
|
||
</el-form-item>
|
||
<el-form-item label="所属楼层:" prop="floorname" v-if="data.config.publicarea != '1'">
|
||
<el-input v-model="data.config.floorname" style="width: 337px" disabled />
|
||
</el-form-item>
|
||
<el-form-item label="部位名称:" prop="partname">
|
||
<el-input v-model="data.config.partname" style="width: 337px" disabled />
|
||
</el-form-item>
|
||
<el-form-item label="责任部门:" prop="deptname">
|
||
<el-input v-model="data.config.deptname" style="width: 337px" disabled />
|
||
</el-form-item>
|
||
<el-form-item label="责任人：" style="width: 100%; " prop="responsibilitypersonname">
|
||
<el-input v-model="data.config.responsibilitypersonname" :rows="3" type="textarea" style="width:1310px"
|
||
disabled />
|
||
</el-form-item>
|
||
<el-form-item label="具体位置：" style="width: 100%; " prop="location">
|
||
<el-input v-model="data.config.location" :rows="3" type="textarea" style="width:1310px" />
|
||
</el-form-item>
|
||
<el-form-item label="备注：" style="width: 100%; ">
|
||
<el-input v-model="data.config.bz" :rows="3" type="textarea" style="width:1310px" />
|
||
</el-form-item>
|
||
</el-form>
|
||
<MOSTY.Assort v-if="data.config.id" :title="'关联信息(固定信息)'" />
|
||
<div>
|
||
<div v-if="data.config.id">
|
||
<div class="table-lable">
|
||
<span>动态信息</span>
|
||
<img :src="getImgUrl('img/icon-jt.png')" style="cursor: pointer" @click="isShowdt = !isShowdt" />
|
||
</div>
|
||
<div v-if="data.config.id">
|
||
<MOSTY.TabList :tablist="tablist2" :obj="data.config" :showCount="true" :sblx="sblx"
|
||
:isEdit="props.editObj.saveBtnShow" @tableChange="tableChange" @resetChange="resetChange" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<template #footer>
|
||
<el-button type="primary" @click="saveData(ruleFormRef)" v-loading="saveloading" v-if='props.editObj.saveBtnShow'>
|
||
<el-icon>
|
||
<DocumentChecked />
|
||
</el-icon>保存 </el-button>
|
||
<el-button @click="closepost"><el-icon>
|
||
<DocumentDelete />
|
||
</el-icon>关闭</el-button>
|
||
</template>
|
||
</MOSTY.FromPage>
|
||
<div>
|
||
<Sbss v-model="showSbss" :data="data.config.parentid" :sbid="leaderid" :sblx="sblx" @choosedSbss="choosedSbss"
|
||
searchType="04"></Sbss>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { getImgUrl } from "@/utils/tools.js"
|
||
import { ref, getCurrentInstance, onMounted, watch, reactive, defineAsyncComponent } from "vue";
|
||
import * as MOSTY from "@/components/MyComponents/index";
|
||
import Sbss from "@/components/MyComponents/ChooseUser/sbss.vue";
|
||
import { ElMessage } from "element-plus";
|
||
import { getApi, postApi } from "@/api/tobAcco_api.js";
|
||
const { proxy } = getCurrentInstance();
|
||
const { D_BZ_DLSBZT, D_BZ_YJSBLX } = proxy.$dict("D_BZ_DLSBZT", "D_BZ_YJSBLX")
|
||
const rules = {
|
||
sitename: [{ required: true, message: "请输入场所名称" }],
|
||
partname: [{ required: true, message: "请输入部位名称" }],
|
||
buildingname: [{ required: true, message: "请输入所属建筑物" }],
|
||
floorname: [{ required: true, message: "请输入所属楼层" }],
|
||
sbmc: [{ required: true, message: "请输入预警设备名称" }],
|
||
sbbh: [{ required: true, message: "请输入设备编号" }],
|
||
sbzt: [{ required: true, message: "请选择设备状态" }],
|
||
sblx: [{ required: true, message: "请选择设备类型" }],
|
||
parentname: [{ required: true, message: "请选择绑定设备" }],
|
||
ipaddr: [{ required: true, message: "请输入IP地址" }],
|
||
port: [{ required: true, message: "请输入端口号" }],
|
||
deptname: [{ required: true, message: "责任部门不能为空" }],
|
||
responsibilitypersonname: [{ required: true, message: "责任人不能为空" }],
|
||
location: [{ required: true, message: "请输入具体位置" }]
|
||
};
|
||
const tablist2 = ref([])
|
||
const saveloading = ref(false)
|
||
const showSbss = ref(false);
|
||
const ruleFormRef = ref();
|
||
const sblx = ref(null)
|
||
const emit = defineEmits(["saveSuccess", '"update:modelValue"']);
|
||
// 接收子组件传来的
|
||
const props = defineProps({
|
||
editObj: {
|
||
type: Object,
|
||
default: () => { }
|
||
}
|
||
});
|
||
const data = reactive({
|
||
fromObj: {},
|
||
config: {
|
||
title: "",
|
||
saveBtnShow: true,
|
||
type: ""
|
||
}
|
||
})
|
||
watch(
|
||
() => data.config.sblx,
|
||
(val) => {
|
||
let arr = [['01', '200101030500'], ['02', '200101020200'], ['03', '200101020100'], ['04', '200101020300'],
|
||
['05', '200101030100'], ['06', '200102010000']];
|
||
for (let i = 0; i < arr.length; i++) {
|
||
const item = arr[i];
|
||
let zddm = item[0];
|
||
let sblxdm = item[1];
|
||
if (zddm == val) {
|
||
sblx.value = sblxdm;
|
||
if (["200101060100", '200101060200', '200101030500', '200101020200',
|
||
'200101020100', '200101020300', '200102010000', "200101030100"].includes(sblx.value)) {
|
||
let title = '附属设备'
|
||
if (['200101020200', '200101020100'].includes(sblx.value)) {
|
||
title = '液位仪';
|
||
} else if ('200101020300' == sblx.value) {
|
||
title = '压力传感器'
|
||
} else if ('200102010000' == sblx.value) {
|
||
title = '视频摄像头'
|
||
}
|
||
tablist2.value.push({
|
||
title: title,
|
||
num: 0,
|
||
icon: "sbss2",
|
||
sblx: sblx.value,
|
||
actives: true,
|
||
components: defineAsyncComponent(() => import("@/components/MyComponents/TabList/Fssblb.vue"))
|
||
})
|
||
}
|
||
break
|
||
}
|
||
}
|
||
},
|
||
{
|
||
immediate: true,
|
||
deep: true
|
||
}
|
||
);
|
||
onMounted(() => {
|
||
data.config.publicarea = '1'
|
||
if (props.editObj) {
|
||
data.config = props.editObj
|
||
}
|
||
getMain(data.config.id)
|
||
})
|
||
//子表总数
|
||
function gettabcount() {
|
||
getApi({ id: data.config.parentid }, "/mosty-jcgl/aqsbssZb/countAll").then(res => {
|
||
tablist2.value.forEach(item => {
|
||
if (["附属设备", "液位仪", "压力传感器", "视频摄像头"].includes(item.title)) {
|
||
item.num = res ? res : 0
|
||
}
|
||
})
|
||
})
|
||
}
|
||
// 获取详情
|
||
function getMain(id) {
|
||
if (id) {
|
||
getApi({ id: id }, "/mosty-lps/yjsbInfo/getInfo").then(res => {
|
||
if (res) {
|
||
data.config = res
|
||
//获取建筑物详情
|
||
if (data.fromObj.buildingid) {
|
||
getApi({}, `/mosty-jcgl/building/getBuildingById/${data.fromObj.buildingid}`).then(res => {
|
||
data.config.publicarea = res.publicarea ? res.publicarea : "2"
|
||
})
|
||
}
|
||
//统计各类总数
|
||
gettabcount()
|
||
}
|
||
})
|
||
}
|
||
}
|
||
//获取子表数据
|
||
function tableChange(val) {
|
||
gettabcount()
|
||
}
|
||
// 选择设备设施
|
||
function choosedSbss(res) {
|
||
data.config.parentid = res.id
|
||
data.config.parentname = res.name
|
||
data.config.location = res.location
|
||
data.config.siteid = res.siteid
|
||
data.config.sitename = res.sitename
|
||
data.config.buildingid = res.buildingid
|
||
data.config.buildingname = res.buildingname
|
||
//获取建筑物详情
|
||
getApi({}, `/mosty-jcgl/building/getBuildingById/${res.buildingid}`).then(resp => {
|
||
data.config.publicarea = resp.publicarea ? resp.publicarea : "2"
|
||
})
|
||
data.config.floorid = res.floorid
|
||
data.config.floorname = res.floorname
|
||
data.config.partid = res.partid
|
||
data.config.partname = res.partname
|
||
data.config.sbid = res.id
|
||
data.config.name = res.name
|
||
data.config.deptcode = res.responsibilitydeptid
|
||
data.config.deptname = res.responsibilitydeptname
|
||
data.config.responsibilitypersonname = res.responsibilitypersonname
|
||
data.config.responsibilityperson = res.responsibilityperson
|
||
}
|
||
// 打开选择设备弹窗
|
||
function chooseSb() {
|
||
if (!sblx.value) {
|
||
ElMessage.success("请先选择设备类型");
|
||
return;
|
||
}
|
||
showSbss.value = true
|
||
}
|
||
function closepost() {
|
||
if (props.editObj.saveBtnShow) {
|
||
proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？').then(() => {
|
||
emit("changePage", "Main")
|
||
})
|
||
} else {
|
||
emit("changePage", "Main")
|
||
}
|
||
}
|
||
// 保存数据
|
||
const saveData = async (ruleFormRef) => {
|
||
saveloading.value = true
|
||
if (!ruleFormRef) return
|
||
ruleFormRef.validate((valid) => {
|
||
if (valid) {
|
||
if (!props.editObj.id) {
|
||
postApi(data.config, "/mosty-lps/yjsbInfo/add").then((res) => {
|
||
ElMessage.success("新增成功");
|
||
emit("changePage", "Main")
|
||
}).finally(() => {
|
||
saveloading.value = false
|
||
})
|
||
} else {
|
||
postApi(data.config, "/mosty-lps/yjsbInfo/edit").then((res) => {
|
||
ElMessage.success("修改成功");
|
||
emit("changePage", "Main")
|
||
}).finally(() => {
|
||
saveloading.value = false
|
||
})
|
||
}
|
||
} else {
|
||
saveloading.value = false
|
||
ElMessage.warning('请输入必填项！！！')
|
||
}
|
||
})
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
::v-deep .el-dialog {
|
||
--el-dialog-margin-top: 10vh !important;
|
||
}
|
||
|
||
::v-deep .el-form {
|
||
width: 90%;
|
||
margin: 10px 20px;
|
||
padding: 10px;
|
||
flex-wrap: wrap;
|
||
justify-content: start;
|
||
}
|
||
|
||
::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item {
|
||
color: #fff;
|
||
}
|
||
|
||
::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
|
||
color: var(--el-color-primary);
|
||
}
|
||
|
||
.table-lable {
|
||
margin: 10px;
|
||
color: var(--el-color-primary);
|
||
}
|
||
|
||
::v-deep ::-webkit-scrollbar {
|
||
display: none !important;
|
||
}
|
||
|
||
::v-deep .el-pagination {
|
||
justify-content: center !important;
|
||
}
|
||
|
||
::v-deep .el-form-item__content {
|
||
margin-left: 0px !important;
|
||
}
|
||
</style>
|