Skip to content

W
web-project
Commit f39ae078 authored by 王亚晖's avatar 王亚晖
Browse files
Options

Merge branch 'master' of https://gitee.com/tj-wang-yahui/AMS_HeatSys_Vue_V10

parents 7e8f18d3 639266c3
Show whitespace changes
Inline Side-by-side
Showing with 1302 additions and 36 deletions
src/views/AlarmPage/AlarmInfoPage.vue
View file @ f39ae078
<template>
报警信息
<!-- 条件筛选卡片 -->
<el-card class="card-contianer">
<div class="div-header">
<!-- 控制表格和图表的开关 -->
<el-form-item>
<el-switch v-model="value" active-text="表格" inactive-text="曲线图"
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;min-width: 130px;" @change="getchart" />
</el-form-item>
<el-form-item label="供热站：">
<el-select v-model="HisPipeInfo.id" multiple="true" collapse-tags placeholder="请选择" style="min-width: 170px"
@change="checkAge">
<el-option v-for="item in options" :label="item.label" :value="item.value"
:disabled="item.disabled" />
</el-select>
</el-form-item>
<el-form-item label="开始时间：">
<el-config-provider :locale="zhCn">
<el-date-picker v-model="HisPipeInfo.startTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
placeholder="选择开始时间" style="min-width: 180px;" /> <!-- 日期时间格式 2024-1-1 00:00:00-->
</el-config-provider>
</el-form-item>
<el-form-item label="结束时间：">
<el-config-provider :locale="zhCn">
<el-date-picker v-model="HisPipeInfo.endTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
placeholder="选择结束时间" style="min-width: 180px;" />
</el-config-provider>
</el-form-item>
<el-form-item label="时间间隔">
<el-select v-model="HisPipeInfo.interval" placeholder="1小时/次" style="min-width: 105px" clearable>
<el-option label="全部" :value=0 />
<el-option label="1分钟/次" :value=1 />
<el-option label="1小时/次" :value=2 />
<el-option label="1天/次" :value=3 />
<el-option label="1周/次" :value=4 />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getdata" style="min-width: 70px;">查询</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" style="min-width: 70px;" @click="autoColBoxShow = !autoColBoxShow">自定义列</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="exportExcel" style="min-width: 70px;">导出表格</el-button>
</el-form-item>
</div>
</el-card>
<el-card v-show="value" class="moduleCard" :height="tableHeight">
<el-table :data="tableData" :height="tableHeight" v-loading="loading" :cell-style="setCellStyle" id="out-table"
border highlight-current-row :header-cell-style="setHeaderCellStyle" @sort-change="sortMethod" :header-cell-class-name="handleHeadAddClass">
<el-table-column v-for="(item, i) in frozenList" :prop="item.field" :label="item.alias" :width="item.width" :sortable="(item.field === 'name' || item.field === 'gatherTime') ? true : false"
fixed />
<template v-for="(item, i) in otherList">
<el-table-column v-if="item.isVisible" :prop="item.enName" :label="item.alias" :width="item.width"></el-table-column>
</template>
</el-table>
</el-card>
<el-footer style="height: 8px;" v-show="value">
<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" :disabled="disabled" :background="background"
layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getdata" @current-change="getdata"
class="pagination" />
</el-config-provider>
</el-footer>
<el-card v-show="(value === false)">
<div id="chart" style="width: 99%; height: 690px" ></div>
</el-card>
<CfgSupply v-model="autoColBoxShow" @onChangeDialog="onChangeDialog" :titleData="value? titleData:curveTitleData" :height="500" :width="950" :deviceType="HisPipeInfo.deviceType" :title="title" :cfgType="value?0:1"/>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';//引入echarts核心模块
import http from '../../api/http';
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
// // 引入导出Excel表格依赖
// import * as XLSX from "xlsx";
import store from "../../store/index";
import { getFileName } from '../../utils/utils';
import CfgSupply from '../../components/CfgSupply.vue';
//分页设置
const currentPage = ref(1)
var pageSize = ref(30)
const disabled = ref(false)
const background = ref(false)
const total = ref()
const options = reactive([]);
var frozenList = reactive([]);
var otherList = reactive([]);
const tableData = ref([]);
const timeList = reactive([]);
const option = ref([]);
const value = ref(true);//控制表格和图表的开关
const loading = ref(true);
const tableHeight = ref(500);
const enterpriseId = ref();
const sortField = reactive({});
const titleData = ref([]);//自定义标题
const autoColBoxShow = ref(false);//显示自定义列
const curveTitleData = ref([]);//曲线图自定义标题
const title = ref('总管历史数据自定义列');
const onChangeDialog = (val) => {
// console.log('onclick',val);
autoColBoxShow.value = false;
if(value){
getPipe();
}else{
getchart();
}
}
getEnterprise();
function getEnterprise(){
var result = store.getters.getEnterprise();
if (result) {
enterpriseId.value = result[0].enterpriseId;
}
}
function setContentHeight() {
tableHeight.value = window.innerHeight - 240;
}
//获取排序的方法
function sortMethod({ order, prop }){
// 触发的排序和缓存的排序相同时，取消该字段的排序
if (!order || sortField[prop] === order) {
sortField[prop] = null
} else {
sortField[prop] = order
}
// console.log(sortField)
let sortname = "";
let sortnames = "";
let direction = '';
for (const i in sortField) {
if (sortField[i] == 'ascending') {
direction = 'ASC'
} else if (sortField[i] == 'descending') {
direction = 'DESC'
}
if(i === "name"){
sortname = "PipeName";
}else if(i === "gatherTime"){
sortname = "GatherTime";
}
// console.log(sortname)
if(sortnames===""){
sortnames = sortnames + sortname + " " + direction;
}else{
sortnames = sortnames + "," + sortname + " " + direction;
}
HisPipeInfo.sort = sortnames;
}
getdata() //调用后端查询接口
}
function handleHeadAddClass({ column }) {
if (sortField[column.property]) {
column.order = sortField[column.property]
}
}
var date = new Date();
var year = date.getFullYear();
var day = 0;
var dateArr = [
date.getMonth() + 1, //月份从0~11，所以加一
date.getDate(),
date.getHours(),
date.getMinutes(),
date.getSeconds(),
];
for (var i = 0; i < dateArr.length; i++) {
if (dateArr[i] >= 1 && dateArr[i] <= 9) {
dateArr[i] = "0" + dateArr[i];
}
}
day = dateArr[1] - 1;
if (day >= 1 && day <= 9) {
day = "0" + day;
}
// var endTime = year + "-" + dateArr[0] + "-" + dateArr[1] + " " + dateArr[2] + ":" + dateArr[3] + ":" + dateArr[4];
// var startTime = year + "-" + dateArr[0] + "-" + day + " " + dateArr[2] + ":" + dateArr[3] + ":" + dateArr[4];
var startTime = sessionStorage.getItem("DeviceQueryStart");
if(!startTime){
startTime = year + "-" + dateArr[0] + "-" + day + " " + dateArr[2] + ":" + dateArr[3] + ":" + dateArr[4];
sessionStorage.setItem("DeviceQueryStart", startTime);
}
var endTime = sessionStorage.getItem("DeviceQueryEnd");
if(!endTime){
endTime = year + "-" + dateArr[0] + "-" + dateArr[1] + " " + dateArr[2] + ":" + dateArr[3] + ":" + dateArr[4];
sessionStorage.setItem("DeviceQueryEnd", endTime);
}
const HisPipeInfo = reactive({
"enterpriseId": enterpriseId.value,
"supplyId": [],
"deviceType": 8,
"id": [],
"startTime": startTime,
"endTime": endTime,
"interval": 2,
"sort": "",
"pageIndex": 0,
"pageCount": 30
})
//获取下拉列表
function getoptions(){
var result = store.getters.getEnterprise();
if (result) {
console.log(result)
result.forEach(element=>{
if(element.enterpriseId === enterpriseId.value){
if(element.enterpriseId === "9BCA54BC-8F27-4849-8D7D-50C5099E1949".toLowerCase()){
element.serviceCenterList.forEach(center=>{
center.supplyList.forEach(supply => {
options.push({ value: supply.pipeInfo.pipeId, label: supply.pipeInfo.pipeName,pipeType: (supply.pipeInfo.pipeType === 1 ? 8 : 1),disabled: true });
});
})
}else{
element.supplyList.forEach(supply => {
options.push({ value: supply.pipeInfo.pipeId, label: supply.pipeInfo.pipeName,pipeType: (supply.pipeInfo.pipeType === 1 ? 8 : 1),disabled: true });
})
}
}
});
}
options.forEach(element =>{
if(element.pipeType === 8){
HisPipeInfo.id.push(element.value);
}
})
}
function checkAge() {
options.forEach(element => {
if(element.value === HisPipeInfo.id[0]){
HisPipeInfo.deviceType = element.pipeType;
}
});
if (HisPipeInfo.id.length === 0) {
options.forEach(element => {
element.disabled = false;
})
} else {
options.forEach(element => {
if(element.value === HisPipeInfo.id[0]){
options.forEach(opt =>{
if(opt.pipeType !== element.pipeType){
opt.disabled = true;
}else{
opt.disabled = false;
}
})
}
})
}
};
getdata();
getoptions();
checkAge();
getcolumn();
function getdata() {
loading.value = true;
sessionStorage.setItem("DeviceQueryStart", HisPipeInfo.startTime);
sessionStorage.setItem("DeviceQueryEnd", HisPipeInfo.endTime);
getcolumn();
getPipe();
getchart();
}
function getcolumn() {
http.post("/api/pipe/Title", { enterpriseId: enterpriseId.value, deviceType: HisPipeInfo.deviceType }).then((result) => {
if(result.success){
titleData.value = result.data.otherList;
frozenList.length = 0;
result.data.frozenList.forEach((element) => {
//生成固定表头
frozenList.push({
field: element.field[0].toLowerCase() + element.field.substring(1),
alias: element.title,
sortable: element.sortable,
width: element.width,
filter: element.filter,
color: element.color,
isVisible: true
});
});
let i = 0;
otherList.length = 0;
result.data.otherList.forEach((element) => {
//生成非固定表头
otherList.push({
alias: element.alias,
backColor: element.backColor,
baseId: element.baseId,
decimalPoint: element.decimalPoint,
enName: element.enName[0].toLowerCase() + element.enName.substring(1),
orderNum: element.orderNum,
width: element.width,
isVisible: element.isVisible
})
i++;
})
}
})
}
//获取数据列表
function getPipe() {
console.log(HisPipeInfo.startTime);
if (currentPage.value == 1) {
HisPipeInfo.pageIndex = 0;
HisPipeInfo.pageCount = pageSize.value;
} else {
HisPipeInfo.pageIndex = ((currentPage.value - 1) * pageSize.value) + 1;
HisPipeInfo.pageCount = pageSize.value - 1;
}
if (HisPipeInfo.interval === undefined) {
HisPipeInfo.interval = 2;
}
http.post("/api/pipe/History", HisPipeInfo).then((result) => {
tableData.value = result.data.dataInfoList;
total.value = result.data.rowCount;
if(result.data === null || HisPipeInfo.id.length < 1){
tableData.value = null;
total.value = 0;
}
loading.value = false;
});
}
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';
frozenList.forEach(element => {
if (element.field === column.property) {
css_color['background-color'] = '#' + element.color;
}
})
otherList.forEach(element => {
if (element.enName === column.property) {
css_color['background-color'] = '#' + element.backColor;
}
})
return css_color;
}
function setHeaderCellStyle({ row, column, rowIndex, columnIndex }) {
let css_color;
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' };
}
})
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 currentTime() {
// var date = new Date();
// var year = date.getFullYear(); //月份从0~11，所以加一
// let month = date.getMonth();
// console.log("month", month);
// var dateArr = [
// date.getMonth() + 1,
// date.getDate(),
// date.getHours(),
// date.getMinutes(),
// date.getSeconds(),
// ];
// //如果格式是MM则需要此步骤，如果是M格式则此循环注释掉
// for (var i = 0; i < dateArr.length; i++) {
// if (dateArr[i] >= 1 && dateArr[i] <= 9) {
// dateArr[i] = "0" + dateArr[i];
// }
// }
// var strDate = year + dateArr[0] + dateArr[1] + dateArr[2] + dateArr[3] + dateArr[4];
// //此处可以拿外部的变量接收 strDate:2022-05-01 13:25:30
// //this.date = strDate;
// return strDate;
// }
// 导出表格 按钮点击后触发事件
async function exportExcel() {
sessionStorage.setItem("DeviceQueryStart", HisPipeInfo.startTime);
sessionStorage.setItem("DeviceQueryEnd", HisPipeInfo.endTime);
HisPipeInfo.pageIndex = 0;
HisPipeInfo.pageCount = 100000;
if (HisPipeInfo.interval === undefined) {
HisPipeInfo.interval = 2;
}
var fileName = getFileName("总管历史数据");
await http.post("/api/pipe/hisExport", HisPipeInfo, '正在导出数据....', { responseType: 'blob' }).then((content) => {
try{
const blob = new Blob([content]);
if ('download' in document.createElement('a')) {
// 非IE下载
const elink = document.createElement('a');
elink.download = fileName;
elink.style.display = 'none';
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href);
document.body.removeChild(elink);
} else {
// IE10+下载
navigator.msSaveBlob(blob, fileName);
}
}catch(error){
console.log(error);
}
});
// const enNameToCnName = {};
// HisPipeInfo.pageCount = 999999;
// frozenList.forEach(element => {
// enNameToCnName[element.field] = element.alias;
// })
// otherList.forEach(element => {
// enNameToCnName[element.enName] = element.alias;
// })
// console.log(enNameToCnName);
// http.post("/api/pipe/History", HisPipeInfo).then((result) => {
// console.log(result);
// let excelData = result.data.dataInfoList.map(n => {
// // console.log(Object.keys(n))
// let newItem = [];
// Object.keys(n).forEach(k => {
// // console.log(n[k])
// newItem[enNameToCnName[k]] = n[k]
// })
// return newItem
// });
// const xlsx0bj = {
// SheetNames: ['sheet1'],//指定有序 sheet 的 name
// Sheets: {
// // 表格数据内容
// ['sheet1']: XLSX.utils.json_to_sheet(excelData)
// }
// }
// XLSX.writeFile(xlsx0bj, '123.xlsx');
// });
}
onMounted(() => {
setContentHeight();
window.addEventListener('resize', setContentHeight);
})
onUnmounted(() => {
window.removeEventListener('resize', setContentHeight);
})
//获取折线图
function getchart() {
if (value.value === false) {
const series = reactive([]);
const titles = reactive([]);
const title = ref();
let id = "";
id = HisPipeInfo.id[0];
HisPipeInfo.id = [];
HisPipeInfo.id.push(id);
HisPipeInfo.pageCount = 999999;
options.forEach(element =>{
if(element.value === id){
title.value = element.label;
}
})
http.post("/api/pipe/Curve", HisPipeInfo).then((result) => {
curveTitleData.value = result.data.title;
console.log(result);
result.data.title.forEach(element => {
titles.push(element.alias);
let da = new Array();
result.data.data.forEach(elements => {
da.push(elements[element.enName[0].toLowerCase() + element.enName.substring(1)])
})
timeList.length = 0;
result.data.data.forEach(ele => {
timeList.push(ele.gatherTime)
})
series.push({
name: element.alias,
type: 'line',
data: da
})
})
option.value = {
title: {
text: title.value + '历史数据'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: titles
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: timeList
},
yAxis: {
type: 'value',
axisLabel: {
formatter:'{value} ℃'
}
},
series: series
};
console.log(option.value);
var myChart = echarts.init(document.getElementById('chart'));
myChart.setOption(option.value);
//图表响应式
window.addEventListener('resize', () => {
myChart.resize();
})
})
}
}
</script>
<style lang="less" scoped>
.moduleCard {
width: auto;
overflow: auto;
//max-height: 540px;
padding: 2px;
::v-deep .el-card__body {
padding: 0px;
}
}
.pagination {
padding: 4px;
margin-left: 20px;
height: 30px;
//background-color: #8939cf;
vertical-align: middle;
}
//鼠标所在行的颜色
::v-deep .el-table__body tr:hover>td {
background: linear-gradient(to top, rgb(0, 198, 255), rgb(255, 255, 255)) !important;
}
::v-deep .el-table__body tr.current-row>td {
background-color: #92cbf1 !important;
}
.card-contianer {
width: auto;
height: 70px;
.div-header {
width: 100%;
display: flex;
margin: 20px;
}
}
.el-form-item {
margin-top: -20px;
margin-right: 30px;
}
.search-box {
background: #fefefe;
margin-top: 0px;
border: 1px solid #eae8e8;
position: absolute;
z-index: 999;
//left: 15px;
// right: 15px;
padding: 25px 20px;
padding-bottom: 0;
border-top: 0;
box-shadow: 0 7px 18px -12px #bdc0bb;
width: 100%;
height: 160px;
}
</style>
\ No newline at end of file
src/views/HandlerPage/EnergyConsumptionPage.vue
View file @ f39ae078
......@@ -22,7 +22,7 @@
@change="changeFun"
/>
</el-form-item>
<el-form-item label="排名时间" v-show="switchV">
<el-form-item label="排名时间" v-show="!switchV">
<el-select
v-model="enertyInfo.hour"
placeholder="请选择"
......@@ -36,7 +36,7 @@
/>
</el-select>
</el-form-item>
<el-form-item label="排名数量" v-show="switchV">
<el-form-item label="排名数量" v-show="!switchV">
<el-select
v-model="enertyInfo.top"
placeholder="请选择"
......@@ -50,7 +50,7 @@
/>
</el-select>
</el-form-item>
<el-form-item label="开始时间：" prop="startTime" v-show="!switchV">
<el-form-item label="开始时间：" prop="startTime" v-show="switchV">
<el-config-provider :locale="zhCn">
<el-date-picker
type="datetime"
......@@ -61,7 +61,7 @@
/>
</el-config-provider>
</el-form-item>
<el-form-item label="结束时间：" prop="endTime" v-show="!switchV">
<el-form-item label="结束时间：" prop="endTime" v-show="switchV">
<el-config-provider :locale="zhCn">
<el-date-picker
type="datetime"
......@@ -219,7 +219,7 @@
</tr>
<tr v-for="item in topHeatUCList.value" :key="item.rankingIndex">
<td>{{ item.rankingIndex }}</td>
<td>{{ item.transferName }}</td>
<td>{{ item.supplyName }}</td>
<td>{{ item.transferName }}</td>
<td>{{ item.uc.toFixed(2) }}</td>
</tr>
......@@ -241,7 +241,7 @@
</tr>
<tr v-for="item in topDayHeatUC.value" :key="item.rankingIndex">
<td>{{ item.rankingIndex }}</td>
<td>{{ item.transferName }}</td>
<td>{{ item.supplyName }}</td>
<td>{{ item.transferName }}</td>
<td>{{ item.uc.toFixed(2) }}</td>
</tr>
......@@ -263,7 +263,7 @@
</tr>
<tr v-for="item in topWaterUC.value" :key="item.rankingIndex">
<td>{{ item.rankingIndex }}</td>
<td>{{ item.transferName }}</td>
<td>{{ item.supplyName }}</td>
<td>{{ item.transferName }}</td>
<td>{{ item.uc.toFixed(2) }}</td>
</tr>
......@@ -285,7 +285,7 @@
</tr>
<tr v-for="item in topElecUC.value" :key="item.rankingIndex">
<td>{{ item.rankingIndex }}</td>
<td>{{ item.transferName }}</td>
<td>{{ item.supplyName }}</td>
<td>{{ item.transferName }}</td>
<td>{{ item.uc.toFixed(2) }}</td>
</tr>
......@@ -307,7 +307,7 @@
</tr>
<tr v-for="item in topElecUC.value" :key="item.rankingIndex">
<td>{{ item.rankingIndex }}</td>
<td>{{ item.transferName }}</td>
<td>{{ item.supplyName }}</td>
<td>{{ item.transferName }}</td>
<td>{{ item.uc.toFixed(2) }}</td>
</tr>
......@@ -329,7 +329,7 @@
</tr>
<tr v-for="item in topFirsFlow.value" :key="item.rankingIndex">
<td>{{ item.rankingIndex }}</td>
<td>{{ item.transferName }}</td>
<td>{{ item.supplyName }}</td>
<td>{{ item.transferName }}</td>
<td>{{ item.uc.toFixed(2) }}</td>
</tr>
......@@ -351,7 +351,7 @@
</tr>
<tr v-for="item in topFirsFlow.value" :key="item.rankingIndex">
<td>{{ item.rankingIndex }}</td>
<td>{{ item.transferName }}</td>
<td>{{ item.supplyName }}</td>
<td>{{ item.transferName }}</td>
<td>{{ item.uc.toFixed(2) }}</td>
</tr>
......@@ -373,7 +373,7 @@
</tr>
<tr v-for="item in topBHXLXJ1.value" :key="item.rankingIndex">
<td>{{ item.rankingIndex }}</td>
<td>{{ item.transferName }}</td>
<td>{{ item.supplyName }}</td>
<td>{{ item.transferName }}</td>
<td>{{ item.uc.toFixed(2) }}</td>
</tr>
......@@ -393,9 +393,12 @@
<th>机组名称</th>
<th>数据</th>
</tr>
<tr v-for="item in topSecondTempAvg.value" :key="item.rankingIndex">
<tr
v-for="item in topSecondTempAvg.value"
:key="item.rankingIndex"
>
<td>{{ item.rankingIndex }}</td>
<td>{{ item.transferName }}</td>
<td>{{ item.supplyName }}</td>
<td>{{ item.transferName }}</td>
<td>{{ item.uc.toFixed(2) }}</td>
</tr>
......@@ -415,9 +418,12 @@
<th>机组名称</th>
<th>数据</th>
</tr>
<tr v-for="item in topSecondTempAvg.value" :key="item.rankingIndex">
<tr
v-for="item in topSecondTempAvg.value"
:key="item.rankingIndex"
>
<td>{{ item.rankingIndex }}</td>
<td>{{ item.transferName }}</td>
<td>{{ item.supplyName }}</td>
<td>{{ item.transferName }}</td>
<td>{{ item.uc.toFixed(2) }}</td>
</tr>
......@@ -437,9 +443,12 @@
<th>机组名称</th>
<th>数据</th>
</tr>
<tr v-for="item in topSecondTempAvg.value" :key="item.rankingIndex">
<tr
v-for="item in topSecondTempAvg.value"
:key="item.rankingIndex"
>
<td>{{ item.rankingIndex }}</td>
<td>{{ item.transferName }}</td>
<td>{{ item.supplyName }}</td>
<td>{{ item.transferName }}</td>
<td>{{ item.uc.toFixed(2) }}</td>
</tr>
......@@ -459,9 +468,12 @@
<th>机组名称</th>
<th>数据</th>
</tr>
<tr v-for="item in topSecondTempAvg.value" :key="item.rankingIndex">
<tr
v-for="item in topSecondTempAvg.value"
:key="item.rankingIndex"
>
<td>{{ item.rankingIndex }}</td>
<td>{{ item.transferName }}</td>
<td>{{ item.supplyName }}</td>
<td>{{ item.transferName }}</td>
<td>{{ item.uc.toFixed(2) }}</td>
</tr>
......@@ -478,10 +490,20 @@ import * as echarts from "echarts";
import http from "../../api/http";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import { ElMessage } from "element-plus";
import { postTopHeatUC, postTopDayHeatUC, postTopWaterUC, postTopElecUC, postTopFirsHW, postTopFirsFlow, postTopBHXL, postTopBHXLXJ1, postTopSecondTempAvg } from "../../api/ranking";
import {
postTopHeatUC,
postTopDayHeatUC,
postTopWaterUC,
postTopElecUC,
postTopFirsHW,
postTopFirsFlow,
postTopBHXL,
postTopBHXLXJ1,
postTopSecondTempAvg,
} from "../../api/ranking";
const curwidth = ref(1700);
const curheight = ref(1000);
const switchV = ref(true);
const switchV = ref(false);
const enertyInfo = reactive({
supplyIdList: [
"a523dc33-c8b8-41c2-9751-a32083627344",
......@@ -490,6 +512,7 @@ const enertyInfo = reactive({
"dfa20074-8731-457f-b63f-4e1858cfe266",
"b354f45b-23e5-42be-a210-0fb92394f457",
],
queryType: 0,
startTime: null,
endTime: null,
hour: 1,
......@@ -544,6 +567,68 @@ const rules = {
endTime: [{ required: true, message: "请选择结束时间", trigger: "blur" }],
};
function timeFun() {
var date = new Date();
var year = date.getFullYear();
var dateArr = [
date.getMonth() + 1,
date.getDate(),
date.getHours(),
date.getMinutes(),
date.getSeconds(),
];
var startTimeDay = dateArr[1] - 1;
var endTimeHour = dateArr[2] - 1;
if (startTimeDay < 10) {
startTimeDay = "0" + dateArr[2];
}
if (endTimeHour < 10) {
endTimeHour = "0" + dateArr[2];
}
if (dateArr[0] < 10) {
dateArr[0] = "0" + dateArr[0];
}
if (dateArr[1] < 10) {
dateArr[1] = "0" + dateArr[1];
}
if (dateArr[2] < 10) {
dateArr[2] = "0" + dateArr[1];
}
if (dateArr[3] < 10) {
dateArr[3] = "0" + dateArr[3];
}
if (dateArr[4] < 10) {
dateArr[4] = "0" + dateArr[4];
}
let startTimes =
year +
"-" +
dateArr[0] +
"-" +
startTimeDay +
" " +
dateArr[2] +
":" +
dateArr[3] +
":" +
dateArr[4];
let endTimes =
year +
"-" +
dateArr[0] +
"-" +
dateArr[1] +
" " +
endTimeHour +
":" +
dateArr[3] +
":" +
dateArr[4];
enertyInfo.startTime = startTimes;
enertyInfo.endTime = endTimes;
}
//换热站机组排名（热单耗）
function postTopHeatUCFun(enertySend) {
postTopHeatUC(enertySend).then((res) => {
......@@ -643,10 +728,22 @@ function postTopSecondTempAvgFun(enertySend) {
});
}
function sendClick() {}
onMounted(() => {
let enertySend = ref(enertyInfo);
enertySend.value.nature = -1;
function sendClick() {
if(enertyInfo.switchV) {
enertyInfo.queryType = 1;
}else{
enertyInfo.queryType = 0;
}
if(enertyInfo.nature.length == 2) {
enertyInfo.nature = -1;
}else if(enertyInfo.nature == "民用") {
enertyInfo.nature = 0;
}else{
enertyInfo.nature = 1;
}
console.log(enertyInfo);
}
function sendFun(enertySend) {
postTopHeatUCFun(enertySend.value);
postTopDayHeatUCFun(enertySend.value);
postTopWaterUCFun(enertySend.value);
......@@ -656,6 +753,25 @@ onMounted(() => {
postTopBHXLFun(enertySend.value);
postTopBHXLXJ1Fun(enertySend.value);
postTopSecondTempAvgFun(enertySend.value);
}
onMounted(() => {
const enertySend = ref({
supplyIdList: [
"a523dc33-c8b8-41c2-9751-a32083627344",
"ccfb0595-86f7-4c0a-a134-8e945180ee48",
"33104782-c1ad-432c-953e-e31c2e031be4",
"dfa20074-8731-457f-b63f-4e1858cfe266",
"b354f45b-23e5-42be-a210-0fb92394f457",
],
queryType: 0,
startTime: null,
endTime: null,
hour: 1,
top: 10,
nature: -1,
});
timeFun();
sendFun(enertySend)
});
onUnmounted(() => {
// window.removeEventListener("resize", setContentHeight);
......
src/views/HeatUserPage/HeatUserPage.vue
View file @ f39ae078
<template>
<el-card class="card-contianer" :body-style="{ 'padding': '0px 0px 0px 0px', 'height': '110px' }">
<div class="div-header">
<el-row>
<el-col :span="2">
<div class="div-button">
<el-button class="el-button-button" type="primary" :span="6" @click="refresh" icon="Search">
搜&nbsp;&nbsp;索</el-button>
</div>
</el-col>
<el-col :span="7">
<div class="div-dropdown text-center">
<span>小区名称&nbsp;:&nbsp;</span>
<el-cascader :options="TransferInfo.tree" v-model="TransferInfo.id" :props="props" collapse-tags
clearable :show-all-levels="false" filterable placeholder="请选择" style="min-width: 200px;" />
</div>
</el-col>
<el-col :span="4">
<div>
<el-date-picker v-model="value1" type="datetime" placeholder="Pick a Date"
format="YYYY/MM/DD hh:mm:ss" />
</div>
</el-col>
<el-col :span="11">
<div class="div-button">
<el-row :gutter="10">
<el-col :span="3">
</el-col>
<el-col :span="3">
</el-col>
<el-col :span="3">
</el-col>
<el-col :span="5">
</el-col>
<el-col :span="10">
<div style="display: flex;">
<div class="div-autoRefresh">
<el-switch v-model="autoRefresh" class="switch-autoRefresh" active-text="历史数据"
inactive-text="实时数据"
style="--el-switch-on-color: #13ce66; --el-switch-off-color: rgb(64, 158, 255)"
@change="changeRefresh" />
</div>
</div>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
</div>
</el-card>
<template>
热用户数据
<el-card class="moduleCard" :height="tableHeight">
<el-table :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"
fixed />
<template v-for="(item, i) in tableInfo.title.otherList">
<el-table-column :prop="item.enName" :label="item.alias" :width="item.width">
</el-table-column>
</template>
</el-table>
</el-card>
<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" :disabled="disabled" :background="background"
layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getdata"
@current-change="getdata" class="pagination" />
</el-config-provider>
</template>
<style lang="less" scoped>
.moduleCard {
width: auto;
overflow: auto;
//max-height: 540px;
padding: 0px;
::v-deep .el-card__body {
padding: 0px;
}
}
.pagination {
padding: 4px;
margin-left: 20px;
height: 30px;
//background-color: #8939cf;
vertical-align: middle;
}
//鼠标所在行的颜色
::v-deep .el-table__body tr:hover>td {
background: linear-gradient(to top, rgb(0, 198, 255), rgb(255, 255, 255)) !important;
}
::v-deep .el-table__body tr.current-row>td {
background-color: #92cbf1 !important;
}
//------
.card-contianer {
width: calc(100%-1px);
font-size: medium;
height: 60px;
overflow: hidden;
.div-header {
width: 100%;
margin: 5px;
height: 80px;
}
.div-list {
// margin-left: -50px;
padding-top: 10px;
widows: 100%;
.span-time {
font-family: simhei;
font-weight: bold;
font-size: medium;
}
}
.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 {
background-color: white;
color: rgb(64, 158, 255);
// padding-right: 10px;
display: flex;
margin-top: 5px;
border-radius: var(--el-border-radius-base);
padding: 6px 15px;
font-size: 14px;
height: 20px;
overflow: hidden;
}
.switch-autoRefresh {
margin-left: 0px;
margin-top: -6px;
}
}
}
.card-form {
width: 100%;
height: 300px;
}
.div-dropdown {
//display: flex;
padding-top: 7px;
height: 50px;
padding-left: 10px;
.el-dropdown-link {
margin-top: 5px;
color: white;
}
}
.text-center {
text-align: center;
}
:deep(.div-form-img) {
display: flex;
align-items: center;
justify-content: center;
}
:deep(.col-center) {
display: flex;
align-items: center;
justify-content: center;
}
.span-text {}
</style>
<script setup>
import { ref, reactive, onMounted, onUnmounted, provide, computed, handleError } from 'vue'
import DataForm from '../../components/DataForm.vue';
import { useRoute } from 'vue-router'
import http from '../../api/http'
import store from "../../store/index";
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import {
Search,
ArrowLeft,
ArrowRight,
Warning
} from '@element-plus/icons-vue'
import CfgSupply from '../../components/CfgSupply.vue';
// import { ca } from 'element-plus/es/locale';
const enterpriseId = ref(null);
enterpriseId.value = store.getters.getEnterpriseId();
var gatherTime = ref([]);
var showSupply = ref([])
var showBoilder = ref([])
var useDropdown = ref([false]);
//ref([{label:'全部',value:''}])
var selectList = reactive({ supplyList: [], dropdownList: [], pipeInfo: {} });
var cardForms = reactive({ tableData: [], alarm: [], forms: [], title: [] });//无排序和筛选
var autoRefresh = ref(false);
var refreshTime = ref(60);
var timer;
const props = { multiple: true, emitPath: false }
const TransferInfo = reactive({
"enterpriseId": enterpriseId.value,
tree: [],
"supplyId": [],
"deviceType": 3,
"id": [],
"name": [],
"interval": 2,
"sort": "",
"pageIndex": 0,
"pageCount": 30
})
//分页
const currentPage = ref(1)
var pageSize = ref(30)
const total = ref(100)
const disabled = ref(false)
const background = ref(false)
//表格
var h = window.innerHeight - 230
const tableHeight = ref(h);
var tableInfo = reactive({
tableData: [],
title: { frozenList: [], otherList: [] }
})
const loading = ref(false);
const value = ref(true);
</script>
\ No newline at end of file
src/views/HeatUserPage/TapPage.vue
View file @ f39ae078
<template>
阀门数据
<el-card class="card-contianer" :body-style="{ 'padding': '0px 0px 0px 0px', 'height': '110px' }">
<div class="div-header">
<el-row>
<el-col :span="7">
<div class="div-dropdown text-center">
<span>小区名称&nbsp;:&nbsp;</span>
<el-cascader :options="TransferInfo.tree" v-model="TransferInfo.id" :props="props" collapse-tags
clearable :show-all-levels="false" filterable placeholder="请选择" style="min-width: 310px;" />
</div>
</el-col>
<el-col :span="2">
<div class="div-button">
<el-button class="el-button-button" type="primary" :span="6" @click="refresh"
icon="Search">
搜&nbsp;&nbsp;索</el-button>
</div>
</el-col>
<el-col :span="4">
</el-col>
<el-col :span="11">
<div class="div-button">
<el-row :gutter="10">
<el-col :span="13">
</el-col>
<el-col :span="3">
</el-col>
<el-col :span="3">
</el-col>
<el-col :span="5">
</el-col>
</el-row>
</div>
</el-col>
</el-row>
</div>
</el-card>
<el-card class="moduleCard" :height="tableHeight">
<el-table :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"
fixed />
<template v-for="(item, i) in tableInfo.title.otherList">
<el-table-column :prop="item.enName" :label="item.alias" :width="item.width">
</el-table-column>
</template>
</el-table>
</el-card>
<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" :disabled="disabled" :background="background"
layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getdata"
@current-change="getdata" class="pagination" />
</el-config-provider>
</template>
<style lang="less" scoped>
.moduleCard {
width: auto;
overflow: auto;
//max-height: 540px;
padding: 0px;
::v-deep .el-card__body {
padding: 0px;
}
}
.pagination {
padding: 4px;
margin-left: 20px;
height: 30px;
//background-color: #8939cf;
vertical-align: middle;
}
//鼠标所在行的颜色
::v-deep .el-table__body tr:hover>td {
background: linear-gradient(to top, rgb(0, 198, 255), rgb(255, 255, 255)) !important;
}
::v-deep .el-table__body tr.current-row>td {
background-color: #92cbf1 !important;
}
//------
.card-contianer {
width: calc(100%-1px);
font-size: medium;
height: 60px;
overflow: hidden;
.div-header {
width: 100%;
margin: 5px;
height: 80px;
}
.div-list {
// margin-left: -50px;
padding-top: 10px;
widows: 100%;
.span-time {
font-family: simhei;
font-weight: bold;
font-size: medium;
}
}
.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 {
background-color: white;
color: rgb(64, 158, 255);
// padding-right: 10px;
display: flex;
margin-top: 5px;
border-radius: var(--el-border-radius-base);
padding: 6px 15px;
font-size: 14px;
height: 20px;
overflow: hidden;
}
.switch-autoRefresh {
margin-left: 0px;
margin-top: -6px;
}
}
}
.card-form {
width: 100%;
height: 300px;
}
.div-dropdown {
//display: flex;
padding-top: 7px;
height: 50px;
padding-left: 10px;
.el-dropdown-link {
margin-top: 5px;
color: white;
}
}
.text-center {
text-align: center;
}
:deep(.div-form-img) {
display: flex;
align-items: center;
justify-content: center;
}
:deep(.col-center) {
display: flex;
align-items: center;
justify-content: center;
}
.span-text {}
</style>
<script setup>
import { ref, reactive, onMounted, onUnmounted, provide, computed, handleError } from 'vue'
import DataForm from '../../components/DataForm.vue';
import { useRoute } from 'vue-router'
import http from '../../api/http'
import store from "../../store/index";
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import {
Search,
ArrowLeft,
ArrowRight,
Warning
} from '@element-plus/icons-vue'
import CfgSupply from '../../components/CfgSupply.vue';
// import { ca } from 'element-plus/es/locale';
const enterpriseId = ref(null);
enterpriseId.value = store.getters.getEnterpriseId();
var gatherTime = ref([]);
var showSupply = ref([])
var showBoilder = ref([])
var useDropdown = ref([false]);
//ref([{label:'全部',value:''}])
var selectList = reactive({ supplyList: [], dropdownList: [], pipeInfo: {} });
var cardForms = reactive({ tableData: [], alarm: [], forms: [], title: [] });//无排序和筛选
var autoRefresh = ref(false);
var refreshTime = ref(60);
var timer;
const props = { multiple: true, emitPath: false }
const TransferInfo = reactive({
"enterpriseId": enterpriseId.value,
tree: [],
"supplyId": [],
"deviceType": 3,
"id": [],
"name": [],
"interval": 2,
"sort": "",
"pageIndex": 0,
"pageCount": 30
})
//分页
const currentPage = ref(1)
var pageSize = ref(30)
const total = ref(100)
const disabled = ref(false)
const background = ref(false)
//表格
var h = window.innerHeight - 230
const tableHeight = ref(h);
var tableInfo = reactive({
tableData: [],
title: { frozenList: [], otherList: [] }
})
const loading = ref(false);
const value = ref(true);
</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