Commit 790a707d authored by 裴文涛's avatar 裴文涛

年度参数列表页面完成

parent aba77d57
This diff is collapsed.
<script setup>
import {ref} from "vue";
import {zhCn} from "element-plus/es/locale/index";
const data = [
{
paramId: "4229478e-9923-4fce-985d-0109efc1e95f", // 编号
supplyId: "33104782-c1ad-432c-953e-e31c2e031be4", // 所属供热站编号
energyType: '三步节能', // 类型(能源)
year: "2024", // 年度
standard: 44.2, // 热指标
degreeStandard: null, // 度日数标定值
indoorTemperature: 23.0, // 室内温度
outdoorTemperature: -9.0, // 室外温度
backWaterTemperature: 46.0, // 回水温度
updateNullFields: null // 无用
},
{
paramId: "4229478e-9923-4fce-985d-0109efc1e95f", // 编号
supplyId: "33104782-c1ad-432c-953e-e31c2e031be4", // 所属供热站编号
energyType: "二步节能", // 类型(能源)
year: "2024", // 年度
standard: 44.2, // 热指标
degreeStandard: null, // 度日数标定值
indoorTemperature: 23.0, // 室内温度
outdoorTemperature: -9.0, // 室外温度
backWaterTemperature: 46.0, // 回水温度
updateNullFields: null // 无用
},
{
paramId: "4229478e-9923-4fce-985d-0109efc1e95f", // 编号
supplyId: "33104782-c1ad-432c-953e-e31c2e031be4", // 所属供热站编号
energyType: null, // 类型(能源)
year: "2024", // 年度
standard: 44.2, // 热指标
degreeStandard: null, // 度日数标定值
indoorTemperature: 23.0, // 室内温度
outdoorTemperature: -9.0, // 室外温度
backWaterTemperature: 46.0, // 回水温度
updateNullFields: null // 无用
},
{
paramId: "4229478e-9923-4fce-985d-0109efc1e95f", // 编号
supplyId: "33104782-c1ad-432c-953e-e31c2e031be4", // 所属供热站编号
energyType: "二步节能", // 类型(能源)
year: "2024", // 年度
standard: 44.2, // 热指标
degreeStandard: null, // 度日数标定值
indoorTemperature: 23.0, // 室内温度
outdoorTemperature: -9.0, // 室外温度
backWaterTemperature: 46.0, // 回水温度
updateNullFields: null // 无用
},
{
paramId: "4229478e-9923-4fce-985d-0109efc1e95f", // 编号
supplyId: "33104782-c1ad-432c-953e-e31c2e031be4", // 所属供热站编号
energyType: "二步节能", // 类型(能源)
year: "2024", // 年度
standard: 44.2, // 热指标
degreeStandard: null, // 度日数标定值
indoorTemperature: 23.0, // 室内温度
outdoorTemperature: -9.0, // 室外温度
backWaterTemperature: 46.0, // 回水温度
updateNullFields: null // 无用
}
]
const tableHeaderClass = data => { // 表头样式
return 'table-header-class'
}
const tableBodyClass = data => { // 表体样式
return 'table-body-class'
}
const searchKey = ref('') // 查询参数
const currentPage = ref(1) // 当前页码
const pageSize = ref(30) // 每页显示条数
function handleEdit(val) {
} // 处理修改
function handleDelete(val) {
} // 处理删除
function handleAdd() {
} // 处理新增
function handleSearch() {
} // 处理查询
</script>
<template>
<div class="annual-param-container">
<div class="search-add-wrapper">
<el-row>
<el-col :span="8" label>年度:</el-col>
<el-col :span="16">
<el-input v-model="searchKey"/>
</el-col>
</el-row>
<el-button type="primary" class="add-search-btn" @click="handleAdd">新增</el-button>
<el-button type="primary" class="add-search-btn" @click="handleSearch">查询</el-button>
</div>
<div class="table-wrapper">
<el-table
:data="data"
border
stripe
:header-cell-class-name="tableHeaderClass"
:row-class-name="tableBodyClass"
style="width: 100%">
<el-table-column label="序号" type="index" align="center" width="60"/>
<el-table-column label="节能类型" prop="energyType"/>
<el-table-column label="年度" prop="year"/>
<el-table-column label="热指标(W/m²)" prop="standard"/>
<el-table-column label="度日数标定值" prop="degreeStandard"/>
<el-table-column label="室内温度(℃)" prop="indoorTemperature"/>
<el-table-column label="室外温度(℃)" prop="outdoorTemperature"/>
<el-table-column label="回水温度(℃)" prop="backWaterTemperature"/>
<el-table-column label="操作">
<template #default="scope">
<div class="table-operate-column">
<el-button link type="primary" @click="handleEdit(scope.row)">修改</el-button>
<el-button link type="primary" @click="handleDelete(scope.row)">删除</el-button>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="pagination-wrapper">
<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="total, sizes, prev, pager, next, jumper"
:total="data.length"
@change="data"
class="pagination"/>
</el-config-provider>
</div>
</div>
</template>
<style scoped lang="less">
.annual-param-container {
width: 100%;
margin: 4px;
}
.search-add-wrapper {
width: 100%;
display: flex;
justify-content: start;
}
.search-add-wrapper .el-row {
width: 50%;
margin: 5px 10px 5px 5px;
}
.el-col[label] {
display: flex;
justify-content: end;
align-items: center;
}
.add-search-btn{
margin: 5px 10px 5px 0;
}
:deep(.table-header-class) {
text-align: center;
font-size: 12px;
background-color: #c4d8f1 !important;
color: #124c6a;
}
:deep(.table-body-class) {
font-size: 12px;
color: black;
}
.table-operate-column {
display: flex;
justify-content: center;
align-items: center;
}
.table-operate-column .el-button {
font-size: 12px;
}
::v-deep .el-table__body tr:hover > td {
background: linear-gradient(to top, rgb(0, 198, 255), rgb(255, 255, 255)) !important;
}
.pagination-wrapper{
padding: 5px;
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
\ No newline at end of file
......@@ -82,10 +82,10 @@ const tableBodyClass = data => { // 表体样式
}
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'
// css_color['padding-left'] = '0px'
// css_color['padding-right'] = '0px'
// css_color['padding-top'] = '3px'
// css_color['padding-bottom'] = '3px'
return css_color
}
......@@ -117,14 +117,24 @@ const confirmRevise = val => { // 修改弹窗确认按钮事件
}
reviseWindowOpen.value = false
}
const confirmBind = val =>{
const confirmBind = val => {
console.log("处理换热站绑定")
bindWindowOpen.value = false
}
</script>
<template>
<div class="container">
<div class="weather-manage-container">
<el-row>
<el-col :span="15" left-col>
</el-col>
<el-col :span="9" right-col>
<!-- <el-button type="primary" @click="reviseWindowOpen = true" class="add-btn">新增</el-button>-->
<el-button type="primary" class="add-btn">新增</el-button>
<el-button type="primary">查询</el-button>
</el-col>
</el-row>
<div class="table-wrapper">
<el-table
:data="data"
......@@ -143,13 +153,16 @@ const confirmBind = val =>{
<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="deviationPercentage" label="自动偏差百分比" width="170"/>
<el-table-column prop="verifyTime" label="验证时间" width="100"/>
<el-table-column prop="adjustTemperature" label="调节温度" width="100"/>
<el-table-column prop="sort" label="排序" width="60"/>
<el-table-column label="操作" width="200">
<template #default="scope">
<div class="table-operate-column">
<!-- <el-link :underline="false" @click="revise(scope.row)" type="primary">修改</el-link>-->
<!-- <el-link :underline="false" @click="bind(scope.row)" type="primary">绑定换热站</el-link>-->
<!-- <el-link :underline="false" type="primary">详情</el-link>-->
<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>
......@@ -160,18 +173,29 @@ const confirmBind = val =>{
</div>
<div class="pagination-wrapper">
<div class="pagination-text-area">
<div class="pagination-text">
共{{ data.length }}条记录,当前为第{{ currentPage }}页,共{{ totalPageCount }}页
</div>
</div>
<!-- <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>-->
<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"
layout="total, sizes, prev, pager, next, jumper"
:total="data.length"
@change="data"
class="pagination"/>
......@@ -197,18 +221,45 @@ const confirmBind = val =>{
</template>
<style scoped>
.weather-manage-container {
width: 100%;
margin: 4px;
}
.el-col[left-col] {
border-right: 1px solid #a6c3e9;
}
.el-row {
width: 100%;
border: 1px solid #a6c3e9;
margin: 5px 0 10px 0;
}
.el-col[right-col] {
padding-left: 10px;
}
.add-btn {
margin: 5px 0;
}
:deep(.table-header-class) {
text-align: center;
font-size: 12px;
background-color: #c4d8f1 !important;
color: #124c6a;
font-weight: normal;
}
:deep(.table-body-class) {
font-size: 12px;
color: black;
}
.table-wrapper {
}
.table-operate-column {
display: flex;
justify-content: center;
......@@ -216,12 +267,11 @@ const confirmBind = val =>{
}
.table-operate-column .el-button {
color: #124c6a;
font-size: 12px;
}
.pagination-wrapper {
padding: 10px;
padding: 5px;
display: flex;
justify-content: space-between;
align-items: center;
......@@ -235,7 +285,7 @@ const confirmBind = val =>{
}
::v-deep .el-table__body tr:hover>td {
::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
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