Skip to content

W
web-project
Commit b5efd9cf authored by 裴文涛's avatar 裴文涛
Browse files
Options

气象干预

parent 01bbb5be
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 663 additions and 94 deletions
src/router/index.js
View file @ b5efd9cf
This diff is collapsed.
src/views/Scheduling/WeatherManagePage.vue 0 → 100644
View file @ b5efd9cf
<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 0 → 100644
View file @ b5efd9cf
<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 0 → 100644
View file @ b5efd9cf
<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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment