制作远程控制页面

src/components/Remote/CurveControl.vue

+<template>
+    曲线对应参数组
+    <el-table>
+
+    </el-table>
+</template>
\ No newline at end of file

src/components/Remote/HeatControl.vue

+<template>
+    热量
+    <el-table>
+
+    </el-table>
+</template>
\ No newline at end of file

src/components/Remote/HolidayControl.vue

+<template>
+    节假日参数设定
+    <el-table>
+
+    </el-table>
+</template>
\ No newline at end of file

src/components/Remote/LimitControl.vue

+<template>
+    温度上下限
+    <el-table>
+
+    </el-table>
+</template>
\ No newline at end of file

src/components/Remote/NightControl.vue

+<template>
+    夜间降温参数组
+    <el-table>
+
+    </el-table>
+</template>
\ No newline at end of file

src/components/Remote/NightFrequency.vue

+<template>
+    循环泵夜间降频
+    <el-table>
+
+    </el-table>
+</template>
\ No newline at end of file

src/components/Remote/OutdoorTempControl.vue

+<template>
+    室外温度控制参数组
+    <el-table>
+
+    </el-table>
+</template>
\ No newline at end of file

src/components/Remote/SecTempControl.vue

+<template>
+    二次网供水温度参数组
+    <el-table>
+
+    </el-table>
+</template>
\ No newline at end of file

src/components/Remote/TransferRegControl.vue

+<template>
+    寄存器值
+    <el-table>
+
+    </el-table>
+</template>
\ No newline at end of file

src/components/Remote/TransferStatusControl.vue

+<template>
+    状态
+    <el-table>
+
+    </el-table>
+</template>
\ No newline at end of file

src/components/Remote/WeatherControl.vue

+<template>
+    气象仪参数组
+    <el-table>
+
+    </el-table>
+</template>
\ No newline at end of file

src/components/Remote/WinDirectionControl.vue

+<template>
+    温度上下限
+    <el-table>
+
+    </el-table>
+</template>
\ No newline at end of file

src/router/index.js

@@ -150,7 +150,7 @@ const routes = [
                 name: 'AlarmStatusPage',
                 component: () => import('@/views/AlarmPage/AlarmStatusPage.vue'),
                 meta: {
-                    title: '报警信息'
+                    title: '报警状态'
                 }
             },{
                 path: '/Alarm',

src/views/RemotePage/TransControlPage.vue

 
 <template>
-     <el-card class="card-contianer">
-        <div class="div-header">
-            <el-form-item label="换热机组：">
-        <el-cascader :options="options" v-model="HistransferInfo.id" :props="props" collapse-tags clearable :show-all-levels="false"
-        placeholder="请选择" style="min-width: 210px;" />
-        <!-- <el-select v-model="HistransferInfo.id" multiple="true" collapse-tags placeholder="请选择" style="width: 170px"
-          @change="checkAge">
-          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
-            :disabled="item.disabled" />
-        </el-select> -->
-      </el-form-item>
-        </div>
-     </el-card>
+  <el-card class="card-contianer">
+      <label>片区：</label>
+      <el-radio-group v-model="radioList" style="height: auto; margin-top: -10px; margin-left: 50px;">
+        <el-radio :label="3">重阳里</el-radio>
+        <el-radio :label="6">福苑里</el-radio>
+        <el-radio :label="9">行政区</el-radio>
+        <el-radio :label="10">东部北区</el-radio>
+        <el-radio :label="11">东部南区</el-radio>
+        <el-radio :label="12">小王庄</el-radio>
+      </el-radio-group>
+  </el-card>
+  <el-tabs :tab-position="tabPosition" style="height: 100%" class="demo-tabs">
+    <el-tab-pane label="换热站状态">
+      <TransferStatusControl/>
+    </el-tab-pane>
+    <el-tab-pane label="远程寄存器">
+      <TransferRegControl/>
+    </el-tab-pane>
+    <el-tab-pane label="节假日参数组">
+      <HolidayControl/>
+    </el-tab-pane>
+    <el-tab-pane label="夜间参数组">
+      <NightControl/>
+    </el-tab-pane>
+    <el-tab-pane label="二次网供水温度">
+      <SecTempControl/>
+    </el-tab-pane>
+    <el-tab-pane label="曲线对应">
+      <CurveControl/>
+    </el-tab-pane>
+    <el-tab-pane label="气象仪">
+      <WeatherControl/>
+    </el-tab-pane>
+    <el-tab-pane label="温度上下限">
+      <LimitControl/>
+    </el-tab-pane>
+    <el-tab-pane label="风向控制">
+      <WinDirectionControl/>
+    </el-tab-pane>
+    <el-tab-pane label="热量">
+      <HeatControl/>
+    </el-tab-pane>
+    <el-tab-pane label="室外温度控制">
+      <OutdoorTempControl/>
+    </el-tab-pane>
+    <el-tab-pane label="循环泵夜间降频">
+      <NightFrequency/>
+    </el-tab-pane>
+  </el-tabs>
 </template>
 
-<script>
+<script lang="ts" setup>
+  import { ref, reactive, onMounted, onUnmounted } from 'vue';
+  import http from '../../api/http';
+  import TransferStatusControl from '../../components/Remote/TransferStatusControl.vue';
+  import TransferRegControl from '../../components/Remote/TransferRegControl.vue';
+  import HolidayControl from '../../components/Remote/HolidayControl.vue';
+  import NightControl from '../../components/Remote/NightControl.vue';
+  import SecTempControl from '../../components/Remote/SecTempControl.vue';
+  import CurveControl from '../../components/Remote/CurveControl.vue';
+  import WinDirectionControl from '../../components/Remote/WinDirectionControl.vue';
+  import WeatherControl from '../../components/Remote/WeatherControl.vue';
+  import LimitControl from '../../components/Remote/LimitControl.vue';
+  import HeatControl from '../../components/Remote/HeatControl.vue';
+  import OutdoorTempControl from '../../components/Remote/OutdoorTempControl.vue';
+  import NightFrequency from '../../components/Remote/NightFrequency.vue';
+
+  const tabPosition = ref('left');
+  const radioList = ref(null);
+
+  function initRadioList(){
+    
+  }
+
+  initRadioList();
 
 </script>
 
@@ -23,13 +82,22 @@
 
 .card-contianer {
   width: auto;
-  height: 70px;
+  height: 50px;
+  vertical-align: middle;
+  margin: 0;
+  padding: 0;
+}
 
-  .div-header {
-    width: 100%;
-    display: flex;
-    margin: 20px;
-  }
+.demo-tabs > .el-tabs__content {
+  padding: 32px;
+  color: #6b778c;
+  font-size: 32px;
+  font-weight: 600;
+}
+
+.el-tabs--right .el-tabs__content,
+.el-tabs--left .el-tabs__content {
+  height: 100%;
 }
 
 </style>
\ No newline at end of file