7.15.5

src/views/RemotePage/TransferPumpPage.vue

 <template>
-    <el-card style="max-width: 100%">
+    <el-card :style="conheight">
         <template #header>
             <div class="card-header">
                 <el-row>
@@ -7,7 +7,7 @@
                         <div class="grid-content">
                             请选择换热机组：
                             <el-cascader :options="options" :props="props" v-model="option" collapse-tags clearable
-                                :show-all-levels="false" placeholder="请选择" style="min-width: 210px;" />
+                                :show-all-levels="false" placeholder="请选择" style="min-width: 210px;" ref="articleOrgRef" @change="handleChange" />
                         </div>
                     </el-col>
                     <el-col :span="12">
@@ -49,13 +49,17 @@
                 <div class="grid-content"><el-input-number v-model="num" size="mx-4" /></div>
             </el-col>
             <el-col :span="3">
-                <div class="grid-content"></div>
+                <div class="grid-content"><el-input v-model="input" style="width: 70px" /></div>
             </el-col>
             <el-col :span="3">
-                <div class="grid-content"></div>
+                <div class="grid-content"><el-input v-model="input" style="width: 70px" /></div>
             </el-col>
             <el-col :span="3">
-                <div class="grid-content"></div>
+                <div class="grid-content">
+                    <el-select v-model="value" style="width: 120px">
+                        <el-option v-for="item in yns" :key="item.value" :label="item.label" :value="item.value" />
+                    </el-select>
+                </div>
             </el-col>
             <el-col :span="4">
                 <div class="grid-content"></div>
@@ -72,13 +76,17 @@
                 <div class="grid-content"><el-input-number v-model="num" size="mx-4" /></div>
             </el-col>
             <el-col :span="3">
-                <div class="grid-content"></div>
+                <div class="grid-content"><el-input v-model="input" style="width: 70px" /></div>
             </el-col>
             <el-col :span="3">
-                <div class="grid-content"></div>
+                <div class="grid-content"><el-input v-model="input" style="width: 70px" /></div>
             </el-col>
             <el-col :span="3">
-                <div class="grid-content"></div>
+                <div class="grid-content">
+                    <el-select v-model="value" style="width: 120px">
+                        <el-option v-for="item in yns" :key="item.value" :label="item.label" :value="item.value" />
+                    </el-select>
+                </div>
             </el-col>
             <el-col :span="4">
                 <div class="grid-content"></div>
@@ -95,19 +103,23 @@
                 <div class="grid-content"><el-input-number v-model="num" size="mx-4" /></div>
             </el-col>
             <el-col :span="3">
-                <div class="grid-content"></div>
+                <div class="grid-content"><el-input v-model="input" style="width: 70px" /></div>
             </el-col>
             <el-col :span="3">
-                <div class="grid-content"></div>
+                <div class="grid-content"><el-input v-model="input" style="width: 70px" /></div>
             </el-col>
             <el-col :span="3">
-                <div class="grid-content"></div>
+                <div class="grid-content">
+                    <el-select v-model="value" style="width: 120px">
+                        <el-option v-for="item in yns" :key="item.value" :label="item.label" :value="item.value" />
+                    </el-select>
+                </div>
             </el-col>
             <el-col :span="4">
-                <div class="grid-content"></div>
+                <div class="grid-content"><el-time-picker v-model="starttime" style="width: 180px;"/></div>
             </el-col>
             <el-col :span="4">
-                <div class="grid-content"></div>
+                <div class="grid-content"><el-time-picker v-model="endtime" style="width: 180px;"/></div>
             </el-col>
         </el-row>
         <el-row>
@@ -118,13 +130,17 @@
                 <div class="grid-content"><el-input-number v-model="num" size="mx-4" /></div>
             </el-col>
             <el-col :span="3">
-                <div class="grid-content"></div>
+                <div class="grid-content"><el-input v-model="input" style="width: 70px" /></div>
             </el-col>
             <el-col :span="3">
-                <div class="grid-content"></div>
+                <div class="grid-content"><el-input v-model="input" style="width: 70px" /></div>
             </el-col>
             <el-col :span="3">
-                <div class="grid-content"></div>
+                <div class="grid-content">
+                    <el-select v-model="value" style="width: 120px">
+                        <el-option v-for="item in yns" :key="item.value" :label="item.label" :value="item.value" />
+                    </el-select>
+                </div>
             </el-col>
             <el-col :span="4">
                 <div class="grid-content"></div>
@@ -141,13 +157,17 @@
                 <div class="grid-content"><el-input-number v-model="num" size="mx-4" /></div>
             </el-col>
             <el-col :span="3">
-                <div class="grid-content"></div>
+                <div class="grid-content"><el-input v-model="input" style="width: 70px" /></div>
             </el-col>
             <el-col :span="3">
-                <div class="grid-content"></div>
+                <div class="grid-content"><el-input v-model="input" style="width: 70px" /></div>
             </el-col>
             <el-col :span="3">
-                <div class="grid-content"></div>
+                <div class="grid-content">
+                    <el-select v-model="value" style="width: 120px">
+                        <el-option v-for="item in yns" :key="item.value" :label="item.label" :value="item.value" />
+                    </el-select>
+                </div>
             </el-col>
             <el-col :span="4">
                 <div class="grid-content"></div>
@@ -156,28 +176,13 @@
                 <div class="grid-content"></div>
             </el-col>
         </el-row>
-        <el-row><el-col :span="24"></el-col></el-row>
-        <el-row><el-col :span="24"></el-col></el-row>
-        <el-row><el-col :span="24"></el-col></el-row>
-        <el-row><el-col :span="24"></el-col></el-row>
-        <el-row><el-col :span="24"></el-col></el-row>
-        <el-row><el-col :span="24"></el-col></el-row>
-        <el-row><el-col :span="24"></el-col></el-row>
-        <el-row><el-col :span="24"></el-col></el-row>
-        <el-row><el-col :span="24"></el-col></el-row>
-        <el-row><el-col :span="24"></el-col></el-row>
-        <el-row><el-col :span="24"></el-col></el-row>
-        <el-row><el-col :span="24"></el-col></el-row>
-        <el-row><el-col :span="24"></el-col></el-row>
-        <el-row><el-col :span="24"></el-col></el-row>
-        <el-row><el-col :span="24"></el-col></el-row>
-        <el-row><el-col :span="24"></el-col></el-row>
-        <el-row><el-col :span="24"></el-col></el-row>
-        <el-row><el-col :span="24"></el-col></el-row>
+        <!-- <template #footer>换热站群控列表：
+            <template v-for="item in unitlist"><span style="width: 380px;">{{ item }}</span></template>
+        </template> -->
     </el-card>
 </template>
 <script lang="ts" setup>
-import { ref, reactive } from 'vue'
+import { ref, reactive, onMounted, onUnmounted } from 'vue'
 import store from "../../store/index";
 
 const options = reactive([]);
@@ -185,6 +190,21 @@ const option = reactive([]);
 const enterpriseId = ref();
 const checked = ref(true);
 const num = ref(20);
+const input = ref(0.88);
+const articleOrgRef = ref(null)
+const unitlist = reactive([]);
+const conheight = reactive({height:""});
+const starttime = ref();
+const endtime = ref();
+const value = ref(true);
+const yns = reactive([{
+    value: true,
+    label: '是',
+  },
+  {
+    value: false,
+    label: '否',
+  }])
 
 getEnterprise();
 function getEnterprise() {
@@ -227,6 +247,22 @@ function getSupplys() {
     }
     option.push(options[0].children[0].children[0].value);
 }
+const handleChange = ()=> {
+    unitlist.length = 0;
+    articleOrgRef.value.getCheckedNodes().forEach(element => {
+        unitlist.push(element.label);
+    });
+}
+function setContentHeight() {
+    conheight.height = window.innerHeight - 122 + "px";
+}
+onMounted(() => {
+  setContentHeight();
+  window.addEventListener('resize', setContentHeight);
+})
+onUnmounted(() => {
+  window.removeEventListener('resize', setContentHeight);
+})
 </script>
 <style lang="scss">
 .el-row {