Skip to content

W
web-project
Commit 6f7545c4 authored by moonby's avatar moonby
Browse files
Options

240727

parent 574c95e7
Hide whitespace changes
Inline Side-by-side
Showing with 206 additions and 18 deletions
src/views/HeatUserPage/HeatUserPage.vue
View file @ 6f7545c4
......@@ -16,9 +16,12 @@
</div>
</el-col>
<el-col :span="4">
<div>
<el-date-picker v-model="value1" type="datetime" placeholder="Pick a Date"
<div class="div-time-picker" v-show="isHisData">
<el-config-provider :locale="zhCn">
<el-date-picker v-model="value1" type="datetime" placeholder="Pick a Date"
format="YYYY/MM/DD hh:mm:ss" />
</el-config-provider>
</div>
</el-col>
<el-col :span="11">
......@@ -35,10 +38,10 @@
<el-col :span="10">
<div style="display: flex;">
<div class="div-autoRefresh">
<el-switch v-model="autoRefresh" class="switch-autoRefresh" active-text="历史数据"
<el-switch v-model="isHisData" class="switch-autoRefresh" active-text="历史数据"
inactive-text="实时数据"
style="--el-switch-on-color: #13ce66; --el-switch-off-color: rgb(64, 158, 255)"
@change="changeRefresh" />
@change="changeData" />
</div>
</div>
</el-col>
......@@ -51,11 +54,23 @@
</el-card>
<el-card class="moduleCard" :height="tableHeight">
<el-table :data="tableInfo.tableData" :height="tableHeight" v-loading="loading" :cell-style="setCellStyle"
<el-table v-show="!isHisData" :data="tableInfo.tableData" :height="tableHeight" v-loading="loading" :cell-style="setCellStyle"
border highlight-current-row :header-cell-style="setHeaderCellStyle"
:header-cell-class-name="handleHeadAddClass">
<el-table-column v-for="(item, i) in tableInfo.title.frozenList" :prop="item.field" :label="item.title"
:width="item.width" :sortable="(item.field === 'name' || item.field === 'gatherTime') ? true : false"
:width="item.width" sortable
fixed />
<template v-for="(item, i) in tableInfo.title.otherList">
<el-table-column :prop="item.enName" :label="item.alias" :width="item.width" sortable>
</el-table-column>
</template>
</el-table>
<el-table v-show="isHisData" :data="tableInfo.tableData" :height="tableHeight" v-loading="loading" :cell-style="setCellStyle"
border highlight-current-row :header-cell-style="setHeaderCellStyle"
:header-cell-class-name="handleHeadAddClass">
<el-table-column v-for="(item, i) in tableInfo.title.frozenList" :prop="item.field" :label="item.title"
:width="item.width"
fixed />
<template v-for="(item, i) in tableInfo.title.otherList">
<el-table-column :prop="item.enName" :label="item.alias" :width="item.width">
......@@ -76,7 +91,6 @@
.moduleCard {
width: auto;
overflow: auto;
//max-height: 540px;
padding: 0px;
::v-deep .el-card__body {
......@@ -89,7 +103,6 @@
padding: 4px;
margin-left: 20px;
height: 30px;
//background-color: #8939cf;
vertical-align: middle;
}
......@@ -106,6 +119,10 @@
//------
.div-time-picker{
padding-top: 10px;
}
.card-contianer {
width: calc(100%-1px);
font-size: medium;
......@@ -119,7 +136,6 @@
}
.div-list {
// margin-left: -50px;
padding-top: 10px;
widows: 100%;
......@@ -131,23 +147,15 @@
}
.div-button {
// width: 100%;
text-align: right;
// margin-left: 10px;
//margin-right: 10px;
padding-top: 2px;
padding-left: 15px;
padding-right: 0px;
height: 80px;
.el-button-button {
margin-top: 5px;
width: 80px;
// height: 40px;
// color: rgb(64, 158, 255);
}
.div-autoRefresh {
......@@ -236,7 +244,7 @@ var useDropdown = ref([false]);
var selectList = reactive({ supplyList: [], dropdownList: [], pipeInfo: {} });
var cardForms = reactive({ tableData: [], alarm: [], forms: [], title: [] });//无排序和筛选
var autoRefresh = ref(false);
var isHisData = ref(false);
var refreshTime = ref(60);
var timer;
......@@ -266,10 +274,190 @@ var h = window.innerHeight - 230
const tableHeight = ref(h);
var tableInfo = reactive({
tableData: [],
realData:[],
hisData:[],
title: { frozenList: [], otherList: [] }
})
const loading = ref(false);
const value = ref(true);
//数据控制，根据isHisData的值决定数据控制逻辑，false为实时数据，true为历史数据
var dataUrl=isHisData.value?'/api/tiger/TigerHeatUser/Real':'/api/tiger/TigerHeatUser/Real';
function initTitle(){
tableInfo.title.frozenList.length=0;
pushFrozenList("gatherTime", "采集时间", true, 180, true)
pushFrozenList("supplyName", "供热站", false, 180, true);
pushFrozenList("name", "小区", true, 180, true);
pushFrozenList("append", "设备名称", true, 180, true);
tableInfo.title.otherList.length=0;
pushOtherList('building',"楼栋");
pushOtherList('unit',"单元");
pushOtherList('household',"户");
pushOtherList('tempTar',"目标室温");
pushOtherList('tempTar',"实际室温");
pushOtherList('houseType',"户型");
pushOtherList('toward',"安装朝向");
pushOtherList('position',"安装位置");
}
//固定列标题添加
function pushFrozenList(field, title, sortable, width, isVisible) {
var tmpFrozen = {
field: field,
title: title,
sortable: sortable,
width: width,
color: "b5e6ff",
isVisible: isVisible
}
tableInfo.title.frozenList.push(tmpFrozen);
}
//非固定列标题添加
function pushOtherList(enName,alias, width) {
var tmpOther = {
alias: alias,
backColor: 'FFFFFF',
enName: enName,
width: width,
}
tableInfo.title.otherList.push(tmpOther);
}
//初始化控制
function init(){
initTitle();
if(isHisData.value){
initHis();
}else{
initReal();
}
}
//数据切换
function changeData(){
init();
}
//实时数据初始化
function initReal(){
dataUrl='/api/tiger/TigerHeatUser/Real';
tableInfo.tableData.length=0;
tableInfo.realData.length=0;
getRealData();
}
//历史数据初始化
function initHis(){
dataUrl='/api/tiger/TigerHeatUser/Real';
tableInfo.tableData.length=0;
tableInfo.hisData.length=0;
getHisData();
}
//获得数据
async function getRealData(){
loading.value = true
await http.post(dataUrl).then((result) => {
if (result.status === 0) {
//处理返回数据
tableInfo.realData=result.data;
setshowData();
} else {
tableInfo.tableData.length=0;
}
})
loading.value = false
}
async function getHisData(){
loading.value = true
await http.post(dataUrl).then((result) => {
if (result.status === 0) {
//处理返回数据
makeFormsTitle(result.data.title);
titleData.value = result.data.title;
makeFormsData(result.data.realData);
} else {
makeFormsData([]);
}
})
loading.value = false
}
function setshowData(){
if(isHisData.value){
tableInfo.tableData=tableInfo.hisData;
}else{
tableInfo.tableData=tableInfo.realData;
}
}
//排序
//实时数据，本地排序
//历史数据，接口排序
//搜索
//实时数据，本地搜索
//历史数据，接口排序
//分页
//实时数据，本地分页
function changeRealPage(){
}
//历史数据，接口分页
function changeHisPage(){
}
//表格样式设置
function setHeaderCellStyle({ row, column, rowIndex, columnIndex }) {
let css_color;
tableInfo.title.frozenList.forEach(element => {
if (element.field === column.property) {
var backcolor = (element.color == 'FFFFFF') ? 'd9f1ff' : element.color;
css_color = { 'background-color': '#' + backcolor, 'padding-left': '0px', 'padding-right': '0px', 'borderColor': '#97d5fd', 'color': '#000', 'text-align': 'center', 'vertical-align': 'top' };
}
})
tableInfo.title.otherList.forEach(element => {
if (element.enName === column.property) {
var backcolor = (element.backColor == 'FFFFFF') ? 'd9f1ff' : element.backColor;
css_color = { 'background-color': '#' + backcolor, 'padding-left': '0px', 'padding-right': '0px', 'borderColor': '#97d5fd', 'color': '#000', 'text-align': 'center', 'vertical-align': 'top' };
}
})
return css_color;
}
function setCellStyle({ row, column, rowIndex, columnIndex }) {
let css_color = {};
css_color['padding-left'] = '0px';
css_color['padding-right'] = '0px';
css_color['borderColor'] = '#97d5fd';
css_color['padding'] = '0px';
tableInfo.title.frozenList.forEach(element => {
if (element.field === column.property) {
css_color['background-color'] = '#' + element.color;
}
})
tableInfo.title.otherList.forEach(element => {
if (element.enName === column.property) {
css_color['background-color'] = '#' + element.backColor;
}
})
return css_color;
}
//页面载入
init();
</script>
\ 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