气象干预

package.json

@@ -34,6 +34,7 @@
     "@types/node": "^20.12.7",
     "@types/vue": "^2.0.0",
     "@vitejs/plugin-vue": "^5.0.4",
+    "sass": "^1.77.8",
     "vite": "^5.1.6",
     "vite-plugin-require-transform": "^1.0.21",
     "vuex": "^4.1.0"

src/router/index.js

 // 创建路由为历史
-import { createRouter, createWebHistory } from "vue-router";
+import {createRouter, createWebHistory} from "vue-router";
 import LoginPage from '@/views/login/login.vue'
 import HomePage from '@/views/home.vue'
 import AboutPage from '@/components/About.vue'
@@ -17,8 +17,8 @@ const routes = [
     {
         path: '/screenDisplay',
         component: screenDisplay
-    },{
-        path:'/iframe',
+    }, {
+        path: '/iframe',
         name: 'iframe',
         component: iframe
     },
@@ -38,28 +38,28 @@ const routes = [
             meta: {
                 title: '首页-实时热源'
             }
-            },{
+        }, {
             path: '/RealTransfer',
             name: '/RealTransPage',
             component: () => import('@/views/RealPage/RealTransPage.vue'),
             meta: {
                 title: '实时换热站'
             }
-            },{
+        }, {
             path: '/RealPipe',
             name: 'RealPipePage',
             component: () => import('@/views/RealPage/RealPipePage.vue'),
             meta: {
                 title: '实时总管'
             }
-            },{
+        }, {
             path: '/RealBoiler',
             name: 'RealBoilerPage',
             component: () => import('@/views/RealPage/RealBoilerPage.vue'),
             meta: {
                 title: '实时锅炉'
             }
-            },{
+        }, {
             path: '/RealEnergy',
             name: 'RealEnergyPage',
             component: () => import('@/views/RealPage/RealEnergyPage.vue'),
@@ -103,231 +103,231 @@ const routes = [
                 meta: {
                     title: '总管状态'
                 }
-            },{
+            }, {
                 path: '/BoilerStatus',
                 name: 'BoilerStatusPage',
                 component: () => import('@/views/StatusPage/BoilerStatusPage.vue'),
                 meta: {
                     title: '锅炉状态'
                 }
-            },{
+            }, {
                 path: '/TransferStatus',
                 name: 'TransferStatusPage',
                 component: () => import('@/views/StatusPage/TransferStatusPage.vue'),
                 meta: {
                     title: '换热站状态'
                 }
-            },{
+            }, {
                 path: '/BoilerArtwork',
                 name: 'BoilerArtworkPage',
                 component: () => import('@/views/ArtworkPage/BoilerArtworkPage.vue'),
                 meta: {
                     title: '锅炉工艺图'
                 }
-            },{
+            }, {
                 path: '/MeasurementArtwork',
                 name: 'MeasurementArtworkPage',
                 component: () => import('@/views/ArtworkPage/MeasurementArtworkPage.vue'),
                 meta: {
                     title: '计量站工艺图'
                 }
-            },{
+            }, {
                 path: '/AllBoilerArtwork',
                 name: 'AllBoilerArtworkPage',
                 component: () => import('@/views/ArtworkPage/AllBoilerArtworkPage.vue'),
                 meta: {
                     title: '全景工艺图'
                 }
-            },{
+            }, {
                 path: '/TransferArtwork',
                 name: 'TransferArtworkPage',
                 component: () => import('@/views/ArtworkPage/TransferArtworkPage.vue'),
                 meta: {
                     title: '换热站工艺图'
                 }
-            },{
+            }, {
                 path: '/AlarmStatus',
                 name: 'AlarmStatusPage',
                 component: () => import('@/views/AlarmPage/AlarmStatusPage.vue'),
                 meta: {
                     title: '报警状态'
                 }
-            },{
+            }, {
                 path: '/Alarm',
                 name: 'AlarmInfoPage',
                 component: () => import('@/views/AlarmPage/AlarmInfoPage.vue'),
                 meta: {
                     title: '报警信息'
                 }
-            },{
+            }, {
                 path: '/DataAnalysis',
                 name: 'DataAnalysisPage',
                 component: () => import('@/views/HandlerPage/DataAnalysisPage.vue'),
                 meta: {
                     title: '能耗分析'
                 }
-            },{
+            }, {
                 path: '/EnergyConsumption',
                 name: 'EnergyConsumptionPage',
                 component: () => import('@/views/HandlerPage/EnergyConsumptionPage.vue'),
                 meta: {
                     title: '能耗排名'
                 }
-            },{
+            }, {
                 path: '/Handler/EnerpriseEnergyView',
                 name: 'EnerpriseEnergyView',
                 component: () => import('@/views/HandlerPage/EnerpriseEnergyView.vue'),
                 meta: {
                     title: '企业趋势图'
                 }
-            },{
+            }, {
                 path: '/Handler/TransferEnergyView',
                 name: 'EnergyViewPage',
                 component: () => import('@/views/HandlerPage/TransferEnergyView.vue'),
                 meta: {
                     title: '换热站趋势图'
                 }
-            },{
+            }, {
                 path: '/Handler/QOQView',
                 name: 'QOQView',
                 component: () => import('@/views/HandlerPage/QOQ.vue'),
                 meta: {
                     title: '用量环比'
                 }
-            },{
+            }, {
                 path: '/Handler/YOYView',
                 name: 'YOYView',
                 component: () => import('@/views/HandlerPage/YOY.vue'),
                 meta: {
                     title: '用量同比'
                 }
-            },{
+            }, {
                 path: '/HeatAnalysis',
                 name: 'HeatAnalysisPage',
                 component: () => import('@/views/Report/HeatAnalysisPage.vue'),
                 meta: {
                     title: '热量分析'
                 }
-            },{
+            }, {
                 path: '/Forecast',
                 name: 'ForecastPage',
                 component: () => import('@/views/Report/ForecastPage.vue'),
                 meta: {
                     title: '明日预测'
                 }
-            },{
+            }, {
                 path: '/RealAnalysis',
                 name: 'RealAnalysisPage',
                 component: () => import('@/views/Report/RealAnalysisPage.vue'),
                 meta: {
                     title: '实时热量分析'
                 }
-            },{
+            }, {
                 path: '/TransferEnergy',
                 name: 'TransferEnergyPage',
                 component: () => import('@/views/Report/TransferEnergyPage.vue'),
                 meta: {
                     title: '换热站能耗'
                 }
-            },{
+            }, {
                 path: '/AreaInfo',
                 name: 'AreaInfoPage',
                 component: () => import('@/views/Report/AreaInfoPage.vue'),
                 meta: {
                     title: '面积统计'
                 }
-            },{
+            }, {
                 path: '/TodayPatrol',
                 name: 'PatrolPage',
                 component: () => import('@/views/PatrolPage/TodayPatrolPage.vue'),
                 meta: {
                     title: '今日巡更'
                 }
-            },{
+            }, {
                 path: '/HisPatrol',
                 name: 'HisPatrolPage',
                 component: () => import('@/views/PatrolPage/HisPatrolPage.vue'),
                 meta: {
                     title: '巡更历史'
                 }
-            },{
+            }, {
                 path: '/HeatUser',
                 name: 'HeatUserPage',
                 component: () => import('@/views/HeatUserPage/HeatUserPage.vue'),
                 meta: {
                     title: '热用户'
                 }
-            },{
+            }, {
                 path: '/HeatUser/Tap',
                 name: 'TapPage',
                 component: () => import('@/views/HeatUserPage/TapPage.vue'),
                 meta: {
                     title: '阀门'
                 }
-            },{
+            }, {
                 path: '/History/Pipe',
                 name: 'HisPipe',
                 component: () => import('@/views/HistoryPage/HisPipePage.vue'),
                 meta: {
                     title: '总管历史数据'
                 }
-            },{
+            }, {
                 path: '/History/Boiler',
                 name: 'HisBoiler',
                 component: () => import('@/views/HistoryPage/HisBoilerPage.vue'),
                 meta: {
                     title: '锅炉历史数据'
                 }
-            },{
+            }, {
                 path: '/History/Transfer',
                 name: 'HisTransfer',
                 component: () => import('@/views/HistoryPage/HisTransPage.vue'),
                 meta: {
                     title: '换热站历史数据'
                 }
-            },{
+            }, {
                 path: '/History/Gas',
                 name: 'HisGas',
                 component: () => import('@/views/HistoryPage/HisGasPage.vue'),
                 meta: {
                     title: '燃气历史数据'
                 }
-            },{
+            }, {
                 path: '/History/Water',
                 name: 'HisWater',
                 component: () => import('@/views/HistoryPage/HisWaterPage.vue'),
                 meta: {
                     title: '水表历史数据'
                 }
-            },{
+            }, {
                 path: '/History/Heat',
                 name: 'HisHeat',
                 component: () => import('@/views/HistoryPage/HisHeatPage.vue'),
                 meta: {
                     title: '热表历史数据'
                 }
-            },{
+            }, {
                 path: '/History/Electric',
                 name: 'HisElectric',
                 component: () => import('@/views/HistoryPage/HisElecPage.vue'),
                 meta: {
                     title: '电表历史数据'
                 }
-            },{
+            }, {
                 path: '/Handler/Overview',
                 name: 'Overview',
                 component: () => import('@/views/HandlerPage/OverviewPage.vue'),
                 meta: {
                     title: '数据总览'
                 }
-            },{
+            }, {
                 path: '/Handler/EnergyView',
                 name: 'EnergyView',
                 component: () => import('@/views/HandlerPage/QOQ.vue'),//EnergyViewPage
                 meta: {
                     title: '趋势图'
                 }
-            },{
+            }, {
                 path: '/Remote/Boiler',
                 name: 'BoilerRemotePage',
                 component: () => import('@/views/RemotePage/BoilerControlPage.vue'),
@@ -350,20 +350,27 @@ const routes = [
                 meta: {
                     title: '换热站远程控制'
                 }
-            },{
+            }, {
                 path: '/Remote/TransferPump',
                 name: 'TransferPumpPage',
                 component: () => import('@/views/RemotePage/TransferPumpPage.vue'),
                 meta: {
                     title: '循环泵压差控制'
                 }
-            },{
+            }, {
                 path: '/Video',
                 name: 'VideoPage',
                 component: () => import('@/views/Video/VideoViewPage.vue'),
                 meta: {
                     title: '视频监控'
                 }
+            }, {
+                path: '/Scheduling/WeatherManage',
+                name: 'WeatherManagePage',
+                component: () => import('@/views/Scheduling/WeatherManagePage.vue'),
+                meta: {
+                    title: '气象干预'
+                }
             }
         ]
     },
@@ -373,8 +380,8 @@ const routes = [
         component: AboutPage
     },
     {
-        path:'/GisHome',
-        name:'/GisHome',
+        path: '/GisHome',
+        name: '/GisHome',
         component: () => import('@/views/Gis/screenDisplay.vue'),
         meta: {
             title: '地图'
@@ -387,16 +394,16 @@ const routes = [
         component: () => import('@/views/404.vue')
     },
     {
-        path:'/TransferArt',
-        name:'/TransferArt',
+        path: '/TransferArt',
+        name: '/TransferArt',
         component: () => import('@/components/art/TransferArt.vue'),
         meta: {
             title: '换热站工艺图'
         }
     },
     {
-        path:'/BoilerArt',
-        name:'/BoilerArt',
+        path: '/BoilerArt',
+        name: '/BoilerArt',
         component: () => import('@/components/art/BoilerArt.vue'),
         meta: {
             title: '锅炉工艺图'
@@ -463,14 +470,13 @@ router.beforeEach(async (to, from, next) => {
     if (!userInfo && to.path !== '/login') return next('/login')
     //如果已登录避免重复登录
     if (userInfo && to.path == '/login') {
-        return next({ path: from.path ? from.path : '/' })
+        return next({path: from.path ? from.path : '/'})
     }
 
     let hasNewRoutes = false
     //如果用户登录成功，调用Vuex方法，存储用户信息
     if (userInfo && !isgetOrg) {
-        try
-        {
+        try {
             const res = await store.dispatch('getOrg')
             isgetOrg = true
         } catch (error) {

src/views/Scheduling/WeatherManagePage.vue

+<script setup>
+import {computed, isRef, ref, shallowRef} from "vue";
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import ReviseWindow from "./weatherManageSub/ReviseWindow.vue";
+import BindWindow from "./weatherManageSub/BindWindow.vue";
+
+const data = ref([
+  {
+    id: 1,
+    customName: '非节能（行政区）',   // 自定义名称
+    heatingStationName: '行政区供热站',   // 供热站名称
+    operateTime: '2024-03-19 21:33:50', // 操作时间
+    interventionMode: '气象仪模式',  // 干预模式
+    temperature: 15.5, // 温度
+    windSpeed: 0, // 风速
+    illumination: 0, // 光照
+    switching: '手动模式', // 手自动切换
+    deviationPercentage: 10,// 自动偏差百分比
+    verifyTime: '20', // 验证时间
+    adjustTemperature: 1, // 调节温度
+    sort: 1  // 排序
+  },
+  {
+    id: 2,
+    customName: '非节能（行政区）',   // 自定义名称
+    heatingStationName: '行政区供热站',   // 供热站名称
+    operateTime: '2024-03-19 21:33:50', // 操作时间
+    interventionMode: '气象仪模式',  // 干预模式
+    temperature: 15.5, // 温度
+    windSpeed: 0, // 风速
+    illumination: 0, // 光照
+    switching: '手动模式', // 手自动切换
+    deviationPercentage: 10,// 自动偏差百分比
+    verifyTime: '20', // 验证时间
+    adjustTemperature: 1, // 调节温度
+    sort: 2  // 排序
+  },
+  {
+    id: 3,
+    customName: '非节能（行政区）',   // 自定义名称
+    heatingStationName: '行政区供热站',   // 供热站名称
+    operateTime: '2024-03-19 21:33:50', // 操作时间
+    interventionMode: '气象仪模式',  // 干预模式
+    temperature: 15.5, // 温度
+    windSpeed: 0, // 风速
+    illumination: 0, // 光照
+    switching: '手动模式', // 手自动切换
+    deviationPercentage: 10,// 自动偏差百分比
+    verifyTime: '20', // 验证时间
+    adjustTemperature: 1, // 调节温度
+    sort: 3  // 排序
+  },
+  {
+    id: 4,
+    customName: '非节能（行政区）',   // 自定义名称
+    heatingStationName: '行政区供热站',   // 供热站名称
+    operateTime: '2024-03-19 21:33:50', // 操作时间
+    interventionMode: '气象仪模式',  // 干预模式
+    temperature: 15.5, // 温度
+    windSpeed: 0, // 风速
+    illumination: 0, // 光照
+    switching: '手动模式', // 手自动切换
+    deviationPercentage: 10,// 自动偏差百分比
+    verifyTime: '20', // 验证时间
+    adjustTemperature: 1, // 调节温度
+    sort: 4  // 排序
+  }
+])
+const currentPage = ref(1)    // 当前页码
+const pageSize = ref(30)    // 每页显示条数
+const reviseWindowOpen = ref(false)  // 修改按钮弹窗状态
+const bindWindowOpen = ref(false)   // 绑定按钮弹窗状态
+const totalPageCount = computed(() => {  // 页面左下角总页数计算
+  return Math.ceil(data.value.length / pageSize.value)
+})
+const dependentSub = ref({})  // 弹窗数据
+const tableHeaderClass = data => {  // 表头样式
+  return 'table-header-class'
+}
+const tableBodyClass = data => {   // 表体样式
+  return 'table-body-class'
+}
+const setCellStyle = (row, column, rowIndex, columnIndex) => {
+  let css_color = {}
+  css_color['padding-left'] = '0px'
+  css_color['padding-right'] = '0px'
+  css_color['padding-top'] = '3px'
+  css_color['padding-bottom'] = '3px'
+  return css_color
+}
+
+const revise = (row) => { // 修改按钮单击事件
+  dependentSub.value = row
+  reviseWindowOpen.value = true
+}
+
+const bind = (row) => { // 绑定按钮单击事件
+  dependentSub.value = row
+  bindWindowOpen.value = true
+}
+
+const confirmRevise = val => { // 修改弹窗确认按钮事件
+  for (let i = 0; i < data.value.length; i++) {
+    if (data.value[i].id === val.id) {
+      data.value[i].customName = val.customName
+      data.value[i].interventionMode = val.interventionMode
+      data.value[i].temperature = val.temperature
+      data.value[i].windSpeed = val.windSpeed
+      data.value[i].illumination = val.illumination
+      data.value[i].switching = val.switching
+      data.value[i].deviationPercentage = val.deviationPercentage
+      data.value[i].verifyTime = val.verifyTime
+      data.value[i].adjustTemperature = val.adjustTemperature
+      data.value[i].sort = val.sort
+      break
+    }
+  }
+  reviseWindowOpen.value = false
+}
+const confirmBind = val =>{
+  console.log("处理换热站绑定")
+  bindWindowOpen.value = false
+}
+</script>
+
+<template>
+  <div class="container">
+    <div class="table-wrapper">
+      <el-table
+          :data="data"
+          stripe
+          border
+          style="width: 100%"
+          :cell-style="setCellStyle"
+          :header-cell-class-name="tableHeaderClass"
+          :row-class-name="tableBodyClass">
+        <el-table-column label="序号" type="index" align="center" width="60"/>
+        <el-table-column prop="customName" label="自定义名称" width="200"/>
+        <el-table-column prop="heatingStationName" label="供热站名称" width="160"/>
+        <el-table-column prop="operateTime" label="操作时间" width="210"/>
+        <el-table-column prop="interventionMode" label="干预模式" width="120"/>
+        <el-table-column prop="temperature" label="温度" width="60"/>
+        <el-table-column prop="windSpeed" label="风速" width="60"/>
+        <el-table-column prop="illumination" label="光照" width="60"/>
+        <el-table-column prop="switching" label="手自动切换" width="120"/>
+        <el-table-column prop="deviationPercentage" label="自动偏差百分比"/>
+        <el-table-column prop="verifyTime" label="验证时间"/>
+        <el-table-column prop="adjustTemperature" label="调节温度"/>
+        <el-table-column prop="sort" label="排序" width="60"/>
+        <el-table-column label="操作" width="200">
+          <template #default="scope">
+            <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>
+      </el-table>
+    </div>
+
+    <div class="pagination-wrapper">
+      <div class="pagination-text-area">
+        <div class="pagination-text">
+          共{{ data.length }}条记录，当前为第{{ currentPage }}页，共{{ totalPageCount }}页
+        </div>
+      </div>
+      <el-config-provider :locale="zhCn">
+        <el-pagination
+            v-model:current-page="currentPage"
+            v-model:page-size="pageSize"
+            :page-sizes="[30, 40, 50, 100, 200, 300]"
+            :small="true"
+            layout="sizes, prev, pager, next, jumper"
+            :total="data.length"
+            @change="data"
+            class="pagination"/>
+      </el-config-provider>
+    </div>
+
+    <div class="dialog-wrapper">
+      <ReviseWindow
+          :open="reviseWindowOpen"
+          :data="dependentSub"
+          @onCancel="reviseWindowOpen = false"
+          @onConfirm="confirmRevise"
+      ></ReviseWindow>
+      <BindWindow
+          :open="bindWindowOpen"
+          :data="dependentSub"
+          @onCancel="bindWindowOpen = false"
+          @onConfirm="confirmBind"></BindWindow>
+    </div>
+  </div>
+
+
+</template>
+
+<style scoped>
+:deep(.table-header-class) {
+  text-align: center;
+  background-color: #c4d8f1 !important;
+  color: #124c6a;
+  font-weight: normal;
+
+}
+
+:deep(.table-body-class) {
+  color: black;
+}
+
+.table-operate-column {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.table-operate-column .el-button {
+  color: #124c6a;
+  font-size: 12px;
+}
+
+.pagination-wrapper {
+  padding: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.pagination-text {
+  font-size: 12px;
+}
+
+.pagination {
+
+}
+
+::v-deep .el-table__body tr:hover>td {
+  background: linear-gradient(to top, rgb(0, 198, 255), rgb(255, 255, 255)) !important;
+}
+</style>
\ No newline at end of file

src/views/Scheduling/weatherManageSub/BindWindow.vue

+<script setup>
+import {ref, defineProps, defineEmits, watchEffect} from "vue";
+
+const props = defineProps({
+  open: {
+    type: Boolean,
+    default: false,
+    required: true
+  },
+  data: {
+    type: Object,
+    default: null,
+    required: true
+  }
+})
+const emit = defineEmits({
+  onCancel: null,
+  onConfirm: ({}) => {
+    return true
+  }
+})
+const bindData = ref({})
+watchEffect(()=>{
+  bindData.value.id = props.data.id
+  bindData.value.customName = props.data.customName
+  bindData.value.heatingStationName = props.data.heatingStationName
+})
+const inputStyle = {
+  color: 'black',
+  height: '24px'
+}
+const heatingStationList = ref([
+    '行政区供热站',
+    '二号供热站',
+    '三号供热站'
+]) // 供热站列表
+const heatExchangeList = ref([
+    '兴安里',
+    '永明里',
+    '润泽园',
+    '凯旋一期',
+    '凯旋二期',
+    '凯旋三期',
+    '兴旺里东区',
+    '兴旺里西区',
+    '兴盛里南环',
+    '兴盛里北环',
+    '七邻里',
+    '胜利里南区',
+    '胜利里北区',
+    '兴慧里',
+    '兴德里',
+    '行政办公区',
+    '开元里',
+    '振业里'
+]) // 换热站列表
+
+const onSubmit = ()=>{
+  emit('onConfirm', bindData)
+} // 点击保存按钮
+</script>
+
+<template>
+  <el-dialog
+      v-model="props.open"
+      width="1000px"
+      @close="emit('onCancel')">
+    <template #header>
+      <div class="dialog-custom-header">
+        换热站绑定
+      </div>
+    </template>
+    <template #default>
+      <div class="dialog-content">
+        <el-row style="border-top: #a6c3e9 1px solid" class="not-select-row">
+          <el-col :span="8" class="content-col-label">自定义名称：</el-col>
+          <el-col :span="16" class="content-col-value">
+            <el-input v-model="bindData.customName" style="width: 510px" :input-style="inputStyle"/>
+          </el-col>
+        </el-row>
+        <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.heatingStationName" style="width: 210px;" class="custom-select" size="small">
+              <el-option v-for="item in heatingStationList" :key="item" :label="item" :value="item"/>
+            </el-select>
+          </el-col>
+        </el-row>
+        <el-row class="select-row">
+          <el-col :span="8" class="content-col-label">换热站：</el-col>
+          <el-col :span="16" class="content-col-value">
+            <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>
+    </template>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="onSubmit">保存</el-button>
+        <el-button type="primary" @click="emit('onCancel')">关闭</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.not-select-row {
+  color: black;
+  height: 35px;
+  border-bottom: #a6c3e9 1px solid;
+  border-left: #a6c3e9 1px solid;
+  border-right: #a6c3e9 1px solid;
+}
+.select-row{
+  color: black;
+  border-bottom: #a6c3e9 1px solid;
+  border-left: #a6c3e9 1px solid;
+  border-right: #a6c3e9 1px solid;
+}
+
+.content-col-label {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  background-color: #dfe8f6;
+  border-right: #a6c3e9 1px solid;
+  padding-right: 5px;
+}
+
+.content-col-value {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  padding-left: 5px;
+}
+
+.el-input {
+  color: black;
+}
+
+.el-checkbox{
+  color: black;
+}
+.custom-select .el-input__inner{
+  color: yellow;
+  background-color: #dfe8f6;
+}
+</style>
\ No newline at end of file

src/views/Scheduling/weatherManageSub/ReviseWindow.vue

+<script setup>
+import {ref, defineProps, defineEmits, computed, isRef, onMounted, watchEffect} from "vue";
+
+const props = defineProps({
+  open: {
+    type: Boolean,
+    default: false,
+    required: true
+  },
+  data: {
+    type: Object,
+    default: {},
+    required:true
+  }
+})
+const emit = defineEmits({
+  onCancel: null,
+  onConfirm: data => {
+    return true
+  }
+})
+const reviseData = ref({})
+watchEffect(()=>{
+  reviseData.value.id = props.data.id
+  reviseData.value.customName = props.data.customName
+  reviseData.value.interventionMode = props.data.interventionMode
+  reviseData.value.temperature = props.data.temperature
+  reviseData.value.windSpeed = props.data.windSpeed
+  reviseData.value.illumination = props.data.illumination
+  reviseData.value.sort = props.data.sort
+  reviseData.value.switching = props.data.switching
+  reviseData.value.deviationPercentage = props.data.deviationPercentage
+  reviseData.value.verifyTime = props.data.verifyTime
+  reviseData.value.adjustTemperature = props.data.adjustTemperature
+})
+const inputStyle = {
+  color: 'black',
+  height: '24px'
+}
+const switchingModel = computed({
+  get() {
+    return reviseData.value.switching === '自动模式'
+  },
+  set(newValue) {
+    if (newValue) {
+      reviseData.value.switching = '自动模式'
+    } else {
+      reviseData.value.switching = '手动模式'
+    }
+  }
+})  // 可写计算属性
+</script>
+
+<template>
+  <el-dialog
+      v-model="props.open"
+      width="1000px"
+      @close="emit('onCancel')">
+    <template #header>
+      <div class="dialog-custom-header">
+        自定义修改
+      </div>
+    </template>
+    <template #default>
+      <div class="dialog-content">
+        <el-row style="border-top: #a6c3e9 1px solid">
+          <el-col :span="8" class="content-col-label">自定义名称：</el-col>
+          <el-col :span="16" class="content-col-value">
+            <el-input :input-style="inputStyle" v-model="reviseData.customName" style="width: 510px"/>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8" class="content-col-label">干预模式：</el-col>
+          <el-col :span="16" class="content-col-value">
+            <el-radio-group v-model="reviseData.interventionMode">
+              <el-radio value="固定模式" :style="{marginLeft:'10px'}">固定模式</el-radio>
+              <el-radio value="气象仪模式" :style="{marginLeft:'-15px'}">气象仪模式</el-radio>
+            </el-radio-group>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8" class="content-col-label">温度：</el-col>
+          <el-col :span="16" class="content-col-value">
+            <el-input :input-style="inputStyle" v-model="reviseData.temperature" style="width: 510px"/>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8" class="content-col-label">风速：</el-col>
+          <el-col :span="16" class="content-col-value">
+            <el-input :input-style="inputStyle" v-model="reviseData.windSpeed" style="width: 510px"/>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8" class="content-col-label">光照：</el-col>
+          <el-col :span="16" class="content-col-value">
+            <el-input :input-style="inputStyle" v-model="reviseData.illumination" style="width: 510px"/>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8" class="content-col-label">排序：</el-col>
+          <el-col :span="16" class="content-col-value">
+            <el-input :input-style="inputStyle" v-model="reviseData.sort" style="width: 510px"/>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="5" class="content-col-label">切换自动模式：</el-col>
+          <el-col :span="7" class="content-col-value">
+            <el-checkbox :style="{marginLeft:'10px'}" v-model="switchingModel" label="自动模式"/>
+          </el-col>
+          <el-col :span="5" class="content-col-label">自动偏差百分比（%d）：</el-col>
+          <el-col :span="7" class="content-col-value">
+            <el-input :input-style="inputStyle" v-model="reviseData.deviationPercentage" style="width: 240px"/>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="5" class="content-col-label">自动验证循环时间（分钟）：</el-col>
+          <el-col :span="7" class="content-col-value">
+            <el-input :input-style="inputStyle" v-model="reviseData.verifyTime" style="width: 240px"/>
+          </el-col>
+          <el-col :span="5" class="content-col-label">自动调节温度（℃）：</el-col>
+          <el-col :span="7" class="content-col-value">
+            <el-input :input-style="inputStyle" v-model="reviseData.adjustTemperature" style="width: 240px"/>
+          </el-col>
+        </el-row>
+      </div>
+    </template>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="emit('onConfirm', reviseData)">保存</el-button>
+        <el-button type="primary" @click="emit('onCancel')">关闭</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+
+.el-row {
+  color: black;
+  height: 35px;
+  border-bottom: #a6c3e9 1px solid;
+  border-left: #a6c3e9 1px solid;
+  border-right: #a6c3e9 1px solid;
+}
+
+.content-col-label {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  background-color: #dfe8f6;
+  border-right: #a6c3e9 1px solid;
+  padding-right: 5px;
+}
+
+.content-col-value {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  padding-left: 5px;
+}
+
+.el-input {
+  color: black;
+}
+.el-radio{
+  color: black;
+}
+.el-checkbox{
+  color: black;
+}
+</style>
\ No newline at end of file