feat: 同步2

src/views/lps/yjsb/AddOrEdite/index.vue

@@ -1,67 +1,83 @@
 <template>
-  <MOSTY.FromPage :title="props.formData.title" @closeDialog="closepost">
+  <MOSTY.FromPage :title="props.editObj.title" @closeDialog="closepost">
     <template #content>
       <MOSTY.Assort :title="'基础信息'" />
-      <el-form :model="props.formData" ref="ruleFormRef" label-position="right" :rules="rules" label-width="150px"
-        :disabled='!props.formData.saveBtnShow'>
+      <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="props.formData.sblx" placeholder="请选择设备类型" clearable style="width: 337px">
+          <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="props.formData.sbmc" style="width: 337px" />
+          <el-input v-model="data.config.sbmc" style="width: 337px" />
         </el-form-item>
         <el-form-item label="设备编号:" prop="sbbh">
-          <el-input v-model="props.formData.sbbh" style="width: 337px" />
+          <el-input v-model="data.config.sbbh" style="width: 337px" />
         </el-form-item>
         <el-form-item label="设备状态：" prop="sbzt">
-          <el-select v-model="props.formData.sbzt" placeholder="请选择设备状态" clearable style="width: 337px">
+          <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="props.formData.parentname" style="width: 337px" readonly clearable>
+          <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="name">
-          <el-input v-model="props.formData.name" style="width: 337px" disabled />
-        </el-form-item>
         <el-form-item label="所属场所:" prop="sitename">
-          <el-input v-model="props.formData.sitename" style="width: 337px" disabled />
+          <el-input v-model="data.config.sitename" style="width: 337px" disabled />
         </el-form-item>
-        <el-form-item :label="props.formData.publicarea == '1' ? '所属场区:' : '所属建筑物:'" prop="buildingname">
-          <el-input v-model="props.formData.buildingname" style="width: 337px" disabled />
+        <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="props.formData.publicarea != '1'">
-          <el-input v-model="props.formData.floorname" style="width: 337px" disabled />
+        <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="props.formData.partname" style="width: 337px" disabled />
+          <el-input v-model="data.config.partname" style="width: 337px" disabled />
         </el-form-item>
         <el-form-item label="责任部门:" prop="deptname">
-          <el-input v-model="props.formData.deptname" style="width: 337px" disabled />
+          <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="props.formData.responsibilitypersonname" :rows="3" type="textarea" style="width:1310px"
+          <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="props.formData.location" :rows="3" type="textarea" style="width:1310px" />
+          <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="props.formData.bz" :rows="3" type="textarea" style="width:1310px" />
+          <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.formData.saveBtnShow'> <el-icon>
+      <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>
@@ -70,18 +86,17 @@
     </template>
   </MOSTY.FromPage>
   <div>
-    <Sbss v-model="showSbss" :data="props.formData.parentid" :sbid="leaderid" :sblx="sblx" @choosedSbss="choosedSbss"
+    <Sbss v-model="showSbss" :data="data.config.parentid" :sbid="leaderid" :sblx="sblx" @choosedSbss="choosedSbss"
       searchType="04"></Sbss>
   </div>
 </template>
 
 <script setup>
-import { ref, getCurrentInstance, defineAsyncComponent, onMounted, watch } from "vue";
+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 * as rule from "@/utils/rules.js";
-import { getItem } from "@/utils/storage";
 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")
@@ -93,39 +108,65 @@ const rules = {
   sbmc: [{ required: true, message: "请输入预警设备名称" }],
   sbbh: [{ required: true, message: "请输入设备编号" }],
   sbzt: [{ required: true, message: "请选择设备状态" }],
+  sblx: [{ required: true, message: "请选择设备类型" }],
   parentname: [{ required: true, message: "请选择绑定设备" }],
-  name: [{ 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 emits = defineEmits(["saveSuccess", '"update:modelValue"']);
+const emit = defineEmits(["saveSuccess", '"update:modelValue"']);
 // 接收子组件传来的
 const props = defineProps({
-  modelValue: {
-    type: Boolean,
-    required: true
-  },
-  formData: {
+  editObj: {
     type: Object,
-    default: {}
+    default: () => { }
   }
 });
+const data = reactive({
+  fromObj: {},
+  config: {
+    title: "",
+    saveBtnShow: true,
+    type: ""
+  }
+})
 watch(
-  () => props.formData.sblx,
+  () => data.config.sblx,
   (val) => {
     let arr = [['01', '200101030500'], ['02', '200101020200'], ['03', '200101020100'], ['04', '200101020300'],
-    ['05', '200101030100']];
+    ['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
       }
     }
@@ -136,45 +177,67 @@ watch(
   }
 );
 onMounted(() => {
-  props.formData.publicarea = '1'
-  //获取建筑物详情
-  if (props.formData.buildingid) {
-    getApi({}, `/mosty-jcgl/building/getBuildingById/${props.formData.buildingid}`).then(res => {
-      props.formData.publicarea = res.publicarea ? res.publicarea : "2"
+  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(data) {
-  props.formData.parentid = data.id
-  props.formData.parentname = data.name
-  props.formData.location = data.location
-  // 查询主设备信息
-  getApi({}, "/mosty-jcgl/sbglAqsbss/queryTbSbglAqsbssById?id=" + data.zbid).then((res) => {
-    if (res) {
-      props.formData.siteid = res.siteid
-      props.formData.sitename = res.sitename
-      props.formData.buildingid = res.buildingid
-      props.formData.buildingname = res.buildingname
-      // 查询建筑物
-      //获取建筑物详情
-      getApi({}, `/mosty-jcgl/building/getBuildingById/${res.buildingid}`).then(res => {
-        props.formData.publicarea = res.publicarea ? res.publicarea : "2"
-      })
-      props.formData.floorid = res.floorid
-      props.formData.floorname = res.floorname
-      props.formData.partid = res.partid
-      props.formData.partname = res.partname
-      props.formData.sbid = res.id
-      props.formData.name = res.name
-      props.formData.deptcode = res.responsibilitydeptid
-      props.formData.deptname = res.responsibilitydeptname
-      props.formData.responsibilitypersonname = res.responsibilitypersonname
-      props.formData.responsibilityperson = res.responsibilityperson
-    } else {
-      ElMessage.error("未找到设备信息");
-    }
+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() {
@@ -185,12 +248,12 @@ function chooseSb() {
   showSbss.value = true
 }
 function closepost() {
-  if (props.formData.saveBtnShow) {
+  if (props.editObj.saveBtnShow) {
     proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？').then(() => {
-      emits("saveSuccess");
+      emit("changePage", "Main")
     })
   } else {
-    emits("saveSuccess");
+    emit("changePage", "Main")
   }
 }
 // 保存数据
@@ -199,17 +262,17 @@ const saveData = async (ruleFormRef) => {
   if (!ruleFormRef) return
   ruleFormRef.validate((valid) => {
     if (valid) {
-      if (!props.formData.id) {
-        postApi(props.formData, "/mosty-lps/yjsbInfo/add").then((res) => {
+      if (!props.editObj.id) {
+        postApi(data.config, "/mosty-lps/yjsbInfo/add").then((res) => {
           ElMessage.success("新增成功");
-          emits("saveSuccess");
+          emit("changePage", "Main")
         }).finally(() => {
           saveloading.value = false
         })
       } else {
-        postApi(props.formData, "/mosty-lps/yjsbInfo/edit").then((res) => {
+        postApi(data.config, "/mosty-lps/yjsbInfo/edit").then((res) => {
           ElMessage.success("修改成功");
-          emits("saveSuccess");
+          emit("changePage", "Main")
         }).finally(() => {
           saveloading.value = false
         })