12号晚最后一次提交

src/views/SchedulingPage/WeatherManagePage.vue

 <script setup>
-import {computed, isRef, onMounted, reactive, ref, shallowRef} from "vue";
+import {computed, isRef, onBeforeMount, onMounted, reactive, ref, shallowRef} from "vue";
 import ReviseWindow from "./weatherManageSub/ReviseWindow.vue";
 import BindWindow from "./weatherManageSub/BindWindow.vue";
-import {getWeatherMagData, alterWeatherMagData, deleteWeatherMagData} from '@/api/scheduling.js'
+import {
+  getWeatherMagData,
+  alterWeatherMagData,
+  deleteWeatherMagData,
+  getOrganizationStructureInterface
+} from '@/api/scheduling.js'
 import AddWindow from "./weatherManageSub/AddWindow.vue";
 import {ElMessage, ElMessageBox} from "element-plus";
 import store from "@/store/index.js";
@@ -10,6 +15,7 @@ import cloneDeep from 'lodash/cloneDeep'
 import {vFloatNumber} from "@/utils/directives.js";
 
 const data = ref()
+const dataBackup = ref([]);
 const reviseWindowOpen = ref(false)  // 修改按钮弹窗状态
 const bindWindowOpen = ref(false)   // 绑定按钮弹窗状态
 const addWindowOpen = ref(false) // 新增按钮弹窗状态
@@ -20,7 +26,33 @@ const tableHeaderClass = data => {  // 表头样式
 const tableBodyClass = data => {   // 表体样式
   return 'table-body-class'
 }
+const isAutoSearchKey = ref()  // 手自动模式查询
+const supplySearchKey = ref() // 供热站查询
+const organizationStructure = ref([]) // 组织结构数据
+const supplyData = ref([]) // 供热站数据
+const transferStructData = ref([]) // 换热站结构数据，每个供热站和一定数量的换热站对应
 
+function search() {
+  if(!isAutoSearchKey.value && !supplySearchKey.value){
+    getData()
+  }else {
+    if(isAutoSearchKey.value && supplySearchKey.value){
+      data.value = dataBackup.value.filter(item => {
+        return item.isAuto === isAutoSearchKey.value && item.supplyName.includes(supplySearchKey.value)
+      })
+    }else {
+      if(isAutoSearchKey.value){
+        data.value = dataBackup.value.filter(item => {
+          return item.isAuto === isAutoSearchKey.value
+        })
+      }else {
+        data.value = dataBackup.value.filter(item => {
+          return item.supplyName.includes(supplySearchKey.value)
+        })
+      }
+    }
+  }
+}
 const revise = (row) => { // 修改按钮单击事件
   dependentSub.value = row
   reviseWindowOpen.value = true
@@ -99,11 +131,16 @@ const onCancelBind = () => {
   getData()
 }
 onMounted(() => {
+
+})
+onBeforeMount(()=>{
   getData()
+  getOrganizationStructure()
 })
 function getData() {
   getWeatherMagData().then(res => {
     data.value = res.data
+    dataBackup.value = [...data.value];
   })
 }
 function handleAddWinOpenClose(){
@@ -143,17 +180,69 @@ function getCurrentDateTime() {
 
   return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
 } // 生成时间
+
+function getSupply() {
+  supplyData.value = []
+  organizationStructure.value[0].serviceCenterList.forEach(fir_item => {
+    fir_item.supplyList.forEach(sec_item => {
+      let temp = {
+        supplyId: sec_item.supplyId,
+        supplyName: sec_item.supplyName,
+      }
+      supplyData.value.push({...temp})
+    })
+  })
+} // 根据组织结构获取供热站数据
+function getAllTransfer() {
+  organizationStructure.value[0].serviceCenterList.forEach(serviceCenter => { // 共有两个服务中心
+    let supplyList = serviceCenter.supplyList  // 供热站列表，每个服务中心对应一定的供热站
+    supplyList.forEach(supply => { // 供热站
+      transferStructData.value.push(
+          {
+            supplyId: supply.supplyId,
+            supplyName: supply.supplyName,
+            transferList: supply.transferList
+          }
+      )
+    })
+    transferStructData.value.forEach(item=>{
+      item.transferList.forEach((unit)=>{
+        unit.isUsed = false
+        unit.customizeId = ''
+      })
+    })
+  })
+} // 根据组织结构获取换热站结构数据
+function getOrganizationStructure() {
+  getOrganizationStructureInterface().then(res => {
+    organizationStructure.value = res.data
+    getSupply()
+    getAllTransfer()
+  }).catch(err => {
+    ElMessage.error('接口异常，获取数据失败.')
+  })
+} // 获取组织结构
 </script>
 
 <template>
   <div class="weather-manage-container">
     <el-row>
       <el-col :span="15" left-col>
-        <el-button type="primary" @click="addWindowOpen = true" class="add-btn">新增</el-button>
-        <el-button type="primary" @click="getData">查询</el-button>
+        <div class="isAuto-search-area">
+          手自动模式：
+          <el-select v-model="isAutoSearchKey" style="width: 300px" placeholder="请选择手自动模式" clearable>
+            <el-option :label="手动模式" value="手动模式"/>
+            <el-option :label="自动模式" value="自动模式"/>
+          </el-select>
+        </div>
+        <div class="supplyName-search-area">
+          供热站名称：
+          <el-input v-model="supplySearchKey" placeholder="请输入供热站名称" clearable style="width: 300px"/>
+        </div>
       </el-col>
       <el-col :span="9" right-col>
-
+        <el-button type="primary" @click="addWindowOpen = true" class="add-btn">新增</el-button>
+        <el-button type="primary" @click="search">查询</el-button>
       </el-col>
     </el-row>
     <div class="table-wrapper">
@@ -162,7 +251,7 @@ function getCurrentDateTime() {
           stripe
           border
           style="width: 100%"
-          height="900px"
+          height="720px"
           :header-cell-class-name="tableHeaderClass"
           :row-class-name="tableBodyClass">
         <el-table-column prop="allowPagingId" label="编号" align="center" width="60"/>
@@ -183,7 +272,6 @@ function getCurrentDateTime() {
             <div class="table-operate-column">
               <el-button link @click="revise(scope.row)" type="primary">修改</el-button>
               <el-button link @click="bind(scope.row)" type="primary">绑定换热站</el-button>
-              <el-button link type="primary">详情</el-button>
             </div>
           </template>
         </el-table-column>
@@ -203,22 +291,34 @@ function getCurrentDateTime() {
       <BindWindow
           :open="bindWindowOpen"
           :data="dependentSub"
+          :supply="supplyData"
+          :transfer="transferStructData"
+          :all-weather-mag-data="dataBackup"
           @onCancel="onCancelBind"
           @onConfirm="confirmBind"></BindWindow>
     </div>
   </div>
-
-
 </template>
 
 <style scoped>
 .weather-manage-container {
   width: 100%;
-  margin: 4px;
 }
 
-.el-col[left-col] {
+.el-col[left-col]{
   border-right: 1px solid #a6c3e9;
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  padding-left: 20px;
+  font-size: 14px;
+
+  .isAuto-search-area{
+    margin-right: 20px;
+  }
+  .supplyName-search-area{
+
+  }
 }
 
 .el-row {

src/views/SchedulingPage/weatherManageSub/BindWindow.vue

 <script setup>
-import {ref, defineProps, defineEmits, watchEffect, onMounted, reactive, computed} from "vue";
-import {getTransfer,getOrganizationStructureInterface} from "@/api/scheduling.js"
-import {getWeatherMagData, alterWeatherMagData, deleteWeatherMagData} from '@/api/scheduling.js'
+import {ref, defineProps, defineEmits, watchEffect, onMounted, reactive, computed, onBeforeMount} from "vue";
+import {getTransfer, getWeatherMagData} from "@/api/scheduling.js"
+import { ElLoading } from 'element-plus'
 import store from "@/store/index.js";
 import cloneDeep from 'lodash/cloneDeep'
 import http from "@/api/http.js";
@@ -17,6 +17,21 @@ const props = defineProps({
     type: Object,
     default: null,
     required: true
+  },
+  supply: {
+    type: Array,
+    default: [],
+    required: true
+  },
+  transfer: {
+    type: Array,
+    default: [],
+    required: true
+  },
+  allWeatherMagData: {
+    type: Array,
+    default: [],
+    required: true
   }
 })
 const emit = defineEmits({
@@ -26,52 +41,59 @@ const emit = defineEmits({
   }
 })
 const bindData = ref({})
+const supplyData = ref([]) // 供热站数据
+let loadingInstance = null
+const transferData = ref([]) // 换热站结构数据，每个供热站和一定数量的换热站对应
+const weatherMagData = ref([])
 let preSupplyName = bindData.value.supplyName // 上一选中的供热站
-watchEffect(()=>{
-  // bindData.value = {...props.data}
-  bindData.value = cloneDeep(props.data) // 深拷贝数据
-})
-watchEffect(()=>{
-  if(bindData.value.supplyName !== preSupplyName){
-    checkboxGroup.value.length = 0
-    preSupplyName = bindData.value.supplyName
-  }
-})
+let alreadyBindTransfer = ref([])  // 已绑定的换热站数据（和供热站一一对应）
 const inputStyle = {
   color: 'black',
   height: '24px'
 }
-const organizationStructure = ref([]) // 组织结构数据
-const supplyData = ref([]) // 供热站数据
-const transferStructData = ref([]) // 换热站结构数据，每个供热站和一定数量的换热站对应
 const BindTransferData = ref([]) // 绑定换热站数据
 const checkboxGroup = ref([]) // checkboxGroup上绑定的数据，是根据自定义Id获取到的换热站数据
 const checkBoxTransferList = ref([]) // 根据供热站变化展示的不同的transfer
-onMounted(()=>{
-  getOrganizationStructure()
+onMounted(() => {
+
+})
+watchEffect(() => {
+  bindData.value = cloneDeep(props.data) // 深拷贝数据
+  supplyData.value = cloneDeep(props.supply)
+  transferData.value = cloneDeep(props.transfer)
+  weatherMagData.value = cloneDeep(props.allWeatherMagData)
+})  // 监听props的变化，传入依赖
+watchEffect(() => {
+  if (bindData.value.supplyName !== preSupplyName) {
+    // checkboxGroup.value.length = 0
+    preSupplyName = bindData.value.supplyName
+  }
 })
-watchEffect(()=>{
+watchEffect(() => {
   // 监听绑定的bindData.supplyName的变换，返回对应的换热站数据
-  checkBoxTransferList.value.length =0 // 每次供热站的值变化后，清空当前展示的数据，重新赋值
-  transferStructData.value.forEach(item=>{
-    if(item.supplyName === bindData.value.supplyName){
-      item.transferList.forEach(transferObj =>{
+  checkBoxTransferList.value.length = 0 // 每次供热站的值变化后，清空当前展示的数据，重新赋值
+  transferData.value.forEach(item => {
+    if (item.supplyName === bindData.value.supplyName) {
+      item.transferList.forEach(transferObj => {
         checkBoxTransferList.value.push({
-          unitId:transferObj.unitId,
-          unitName:transferObj.unitName
+          unitId: transferObj.unitId,
+          unitName: transferObj.unitName,
+          isUsed: transferObj.isUsed,
+          customizeId: transferObj.customizeId
         })
       })
     }
   })
   // console.log("根据供热站变化的换热站数据计算属性",selTransferCheckBoxLs.value)
 })
-const onSubmit = ()=>{
-  supplyData.value.forEach(item=>{
-    if(item.supplyName === bindData.value.supplyName){
+
+function onSubmit() {
+  supplyData.value.forEach(item => {
+    if (item.supplyName === bindData.value.supplyName) {
       bindData.value.supplyId = item.supplyId
     }
   })
-  checkboxGroup.value.forEach(item=>{
+  checkboxGroup.value.forEach(item => {
     bindData.value.transfers.push({
       customizeId: bindData.value.customizeId,
       unitId: item,
@@ -80,59 +102,66 @@ const onSubmit = ()=>{
   })
   emit('onConfirm', bindData.value)
 } // 点击保存按钮
-function getBindTransferData(){ // 获取绑定换热站数据，若在onMounted中无法调用失败（id可能为空）,则在opOpen时操作
+function getBindTransfer() { // 获取绑定换热站数据，若在onMounted中无法调用失败（id可能为空）,则在opOpen时操作
   let param = {
     id: bindData.value.customizeId
   }
-  getTransfer(param).then(res=>{
+  getTransfer(param).then(res => {
     BindTransferData.value = res.data
     checkboxGroup.value.length = 0  // 每一次打开弹窗都会根据新的Id获取获取对应的换热站数据，并且清空原数组，重新赋值
-    BindTransferData.value.forEach(item=>{
+    BindTransferData.value.forEach(item => {
       checkboxGroup.value.push(item.unitId)
     })
   })
+} // 获取当前绑定的换热站数据
+
+function onOpen() {
+  loadingInstance = ElLoading.service({target: '.el-dialog'})
+  getBindTransfer()
+  getAlreadyBindTransfer()
+  console.log('--------------->>>',alreadyBindTransfer.value)
+  console.log('++++++++++++++>>>>',BindTransferData.value)
+
 }
-function getSupply(){
-  organizationStructure.value[0].serviceCenterList.forEach(fir_item =>{
-    fir_item.supplyList.forEach(sec_item=>{
-      supplyData.value.push({
-        supplyId: sec_item.supplyId,
-        supplyName: sec_item.supplyName,
-      })
-    })
-  })
-} // 根据组织结构获取供热站数据
-function getAllTransfer(){
-  organizationStructure.value[0].serviceCenterList.forEach(serviceCenter=>{ // 共有两个服务中心
-    let supplyList = serviceCenter.supplyList  // 供热站列表，每个服务中心对应一定的供热站
-    supplyList.forEach(supply=>{ // 供热站
-      transferStructData.value.push(
-          {
-            supplyId: supply.supplyId,
-            supplyName: supply.supplyName,
-            transferList:supply.transferList
-          }
-      )
-    })
-  })
-} // 根据组织结构获取换热站结构数据
-function getOrganizationStructure(){
-  getOrganizationStructureInterface().then(res=>{
-      organizationStructure.value = res.data
-      getSupply()
-      getAllTransfer()
-}).catch(err=>{
-    ElMessage.error('接口异常，获取数据失败.')
-  })
-} // 获取组织结构
-function onOpen(){
-  getBindTransferData()
+function checkBoxChange(val) {
+
 }
-function checkBoxChange(val){
 
+
+// 获取所有已绑定换热站数据
+async function getAlreadyBindTransfer() {
+  alreadyBindTransfer.value = []
+  for (const supplyItem of supplyData.value) {
+    let tempObj = {supplyName: "", transfers: []}
+    tempObj.supplyName = supplyItem.supplyName
+    for (let weaItem of weatherMagData.value) {
+      if (supplyItem.supplyName === weaItem.supplyName) {
+        const res = await getTransfer({id: weaItem.customizeId})
+        if (res.data.length) {
+          res.data.forEach(item => {
+            tempObj.transfers.push({...item})
+          })
+        }
+      }
+    }
+    alreadyBindTransfer.value.push(cloneDeep(tempObj))
+  } // 找到所有已绑定的换热站
+  for (const alreadyEle of alreadyBindTransfer.value) {
+    for (const alreadyTransItem of alreadyEle.transfers) {
+      for (const transferEle of transferData.value) {
+        for (const transferItem of transferEle.transferList) {
+          if(alreadyTransItem.unitId === transferItem.unitId){
+            transferItem.isUsed = true
+            transferItem.customizeId = alreadyTransItem.customizeId
+            break  // 找到一个相同的换热站，标记状态为以使用，跳出循环
+          }
+        }
+      }
+    }
+  } // 为以绑定的换热站标记为以使用，并加入绑定的气象干预数据
+  loadingInstance.close()
 }
 </script>
-
 <template>
   <el-dialog
       v-model="props.open"
@@ -151,8 +180,10 @@ function checkBoxChange(val){
         <el-row class="not-select-row">
           <el-col :span="8" class="content-col-label">供热站：</el-col>
           <el-col :span="16" class="content-col-value">
-            <el-select v-model="bindData.supplyName" placeholder="" style="width: 210px;" class="custom-select" size="small">
-              <el-option v-for="item in supplyData" :key="item.supplyId" :label="item.supplyName" :value="item.supplyName"/>  <!--此处还需考虑-->
+            <el-select v-model="bindData.supplyName" placeholder="" style="width: 210px;" class="custom-select"
+                       size="small">
+              <el-option v-for="item in supplyData" :key="item.supplyId" :label="item.supplyName"
+                         :value="item.supplyName"/>  <!--此处还需考虑-->
             </el-select>
           </el-col>
         </el-row>
@@ -160,11 +191,12 @@ function checkBoxChange(val){
           <el-col :span="8" class="content-col-label">换热站：</el-col>
           <el-col :span="16" class="content-col-value">
             <el-checkbox-group @change="checkBoxChange" v-model="checkboxGroup" style="width: 510px">
-              <el-checkbox v-for="item in checkBoxTransferList" :key="item.unitId" :label="item.unitName" :value="item.unitId"></el-checkbox>
+              <el-checkbox v-for="item in checkBoxTransferList" :disabled="item.isUsed  && item.customizeId !== bindData.customizeId" :key="item.unitId"
+                           :label="item.unitName" :value="item.unitId"></el-checkbox>
             </el-checkbox-group>
-<!--            <el-checkbox-group v-model="bindData.heatExchangeList" style="width: 510px">-->
-<!--              <el-checkbox v-for="item in heatExchangeList" :key="item" :label="item"/>-->
-<!--            </el-checkbox-group>-->
+            <!--            <el-checkbox-group v-model="bindData.heatExchangeList" style="width: 510px">-->
+            <!--              <el-checkbox v-for="item in heatExchangeList" :key="item" :label="item"/>-->
+            <!--            </el-checkbox-group>-->
           </el-col>
         </el-row>
       </div>
@@ -186,7 +218,8 @@ function checkBoxChange(val){
   border-left: #a6c3e9 1px solid;
   border-right: #a6c3e9 1px solid;
 }
-.select-row{
+
+.select-row {
   color: black;
   border-bottom: #a6c3e9 1px solid;
   border-left: #a6c3e9 1px solid;
@@ -213,10 +246,11 @@ function checkBoxChange(val){
   color: black;
 }
 
-.el-checkbox{
+.el-checkbox {
   color: black;
 }
-.custom-select .el-input__inner{
+
+.custom-select .el-input__inner {
   color: yellow;
   background-color: #dfe8f6;
 }