Browse Source

1.测试修改主机运行记录功能

2.修改生活热水-实时监控页面热泵、水位、温度数据内容
meizhou
selia-zx 6 days ago
parent
commit
ff44d006db
  1. 4
      .env.development
  2. 27
      src/api/centerairC/hostRunReport.js
  3. 7
      src/api/region.js
  4. BIN
      src/assets/flowimg/circulate-move - 副本.gif
  5. BIN
      src/assets/flowimg/circulate-move.gif
  6. BIN
      src/assets/flowimg/circulate-nomove - 副本.png
  7. BIN
      src/assets/flowimg/circulate-nomove.png
  8. BIN
      src/assets/flowimg/waterBox - 副本.png
  9. BIN
      src/assets/flowimg/waterBox.png
  10. 12
      src/assets/styles/element-ui.scss
  11. 915
      src/views/centerairC/hostRunReport/index.vue
  12. 1112
      src/views/hotWater/waterMonitor/index copy.vue
  13. 679
      src/views/hotWater/waterMonitor/index.vue
  14. 6
      src/views/system/menu/index.vue

4
.env.development

@ -7,9 +7,9 @@ ENV = 'development'
# 开发环境
# VUE_APP_BASE_API = '/dev-api'
# 后台
# VUE_APP_BASE_API = 'http://192.168.1.222:8080'
VUE_APP_BASE_API = 'http://192.168.1.222:8080'
# 梅州云端
VUE_APP_BASE_API = 'http://106.55.173.225:8091'
# VUE_APP_BASE_API = 'http://106.55.173.225:8091'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

27
src/api/centerairC/hostRunReport.js

@ -0,0 +1,27 @@
import request from "@/utils/request";
// 查询运行记录
export function reportSysList(data) {
return request({
url: "/reportSys/list",
method: "post",
data,
});
}
// 编辑运行记录
export function reportSysEdit(data) {
return request({
url: "/reportSys/edit",
method: "put",
data,
});
}
// 导出
export function reportSysExport(data) {
return request({
url: "/reportSys/export",
method: "post",
data,
responseType: 'blob',
});
}

7
src/api/region.js

@ -7,6 +7,13 @@ export function spaceTree() {
method: "get",
});
}
export function floorTree() {
return request({
url: "/space/floorTree",
method: "get",
});
}
// 获取区域信息
export function getAreaList(query) {

BIN
src/assets/flowimg/circulate-move - 副本.gif

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

BIN
src/assets/flowimg/circulate-move.gif

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 21 KiB

BIN
src/assets/flowimg/circulate-nomove - 副本.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

BIN
src/assets/flowimg/circulate-nomove.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 10 KiB

BIN
src/assets/flowimg/waterBox - 副本.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 119 KiB

BIN
src/assets/flowimg/waterBox.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 119 KiB

After

Width:  |  Height:  |  Size: 188 KiB

12
src/assets/styles/element-ui.scss

@ -1430,7 +1430,7 @@
min-width: 50px !important;
z-index: 0;
}
.el-input__suffix{
.el-input__suffix {
z-index: 10;
}
.el-cascader__tags {
@ -1439,3 +1439,13 @@
align-items: center;
flex-wrap: nowrap;
}
.el-table--group,
.el-table--border {
border: 1px solid #00264f !important;
}
.el-table--border .el-table__cell {
border-right: 1px solid #00264f !important;
}
.el-table--border th.el-table__cell {
border-bottom: 1px solid #00264f !important;
}

915
src/views/centerairC/hostRunReport/index.vue

@ -0,0 +1,915 @@
<template>
<div class="app-container">
<div class="btn-condition">
<div class="condition-left" v-show="showSearch">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
>
<el-form-item label="主机编号" prop="deviceNum">
<el-select
v-model="queryParams.deviceNum"
placeholder="请选择主机编号"
clearable
>
<el-option label="1号主机" value="1" />
<el-option label="2号主机" value="2" />
<el-option label="3号主机" value="3" />
</el-select>
</el-form-item>
<el-form-item label="日期范围" prop="timeArr">
<el-date-picker
style="width: 220px"
v-model="timeArr"
type="daterange"
unlink-panels
range-separator="~"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
@change="dateChange"
>
</el-date-picker>
</el-form-item>
</el-form>
<div class="primary-btn">
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
</div>
<div class="cancel-btn">
<el-button
type="cancel"
icon="el-icon-refresh"
size="mini"
@click="resetQuery"
>重置</el-button
>
</div>
</div>
</div>
<el-row :gutter="10" class="mb8">
<!-- <el-col :span="1.5">
<div class="success-btn">
<el-button
type="success"
@click="leadingPrint"
icon="el-icon-printer"
size="mini"
>打印</el-button
>
</div>
</el-col> -->
<el-col :span="1.5">
<div class="warning-btn">
<el-button
type="warning"
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出</el-button
>
</div>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="postList" stripe>
<el-table-column label="主机id" align="center" prop="deviceNum" />
<el-table-column label="时间" align="center" prop="curTime" />
<el-table-column label="蒸发器">
<el-table-column
label="冷冻水进水温度(℃)"
align="center"
prop="tempInChillerWater" />
<el-table-column
label="冷冻水出水温度(℃)"
align="center"
prop="tempOutChillerWater" />
<el-table-column label="设计流量(%)" align="center" prop="designFlow" />
<el-table-column
label="蒸发器压力(kpa)"
align="center"
prop="pressEvapSaturation" />
<el-table-column
label="蒸发器饱和温度(℃)"
align="center"
prop="tempEvapSaturation" />
<el-table-column
label="蒸发器趋近温度(℃)"
align="center"
prop="tempEvapApproaching"
/></el-table-column>
<el-table-column label="冷凝器">
<el-table-column
label="冷却水进水温度(℃)"
align="center"
prop="tempInCoolingWater"
/>
<el-table-column
label="冷却水出水温度(℃)"
align="center"
prop="tempOutCoolingWater"
/>
<el-table-column
label="冷凝器压力(kpa)"
align="center"
prop="pressCondenserSaturation"
/>
<el-table-column
label="冷凝器饱和温度(℃)"
align="center"
prop="tempCondenserSaturation"
/>
<el-table-column
label="冷凝器趋近温度(℃)"
align="center"
prop="tempCondenserApproaching"
/>
</el-table-column>
<el-table-column label="系统">
<el-table-column
label="冷冻水设定值(℃)"
align="center"
prop="setChillerWater"
/>
<el-table-column label="冷水机需求(%)" align="center" prop="setLoad" />
<el-table-column label="总电流(%)" align="center" prop="currentTotal" />
<el-table-column
label="总输入功率(kw)"
align="center"
prop="inputPowerTotal"
/>
<el-table-column
label="压缩机1_压缩比"
align="center"
prop="ratioCompOne"
/>
<el-table-column
label="压缩机2_压缩比"
align="center"
prop="ratioCompTwo"
/>
<el-table-column
label="压缩机3_压缩比"
align="center"
prop="ratioCompThree"
/>
<el-table-column label="膨胀阀开度(%)" align="center" prop="openExv" />
<el-table-column
label="运行中的压缩机数量"
align="center"
prop="runCompNum"
/>
</el-table-column>
<el-table-column label="冷冻泵">
<el-table-column
label="冷冻水泵频率(hz)"
align="center"
prop="frequencyChiller"
/>
<el-table-column
label="冷冻水出水压力(kpa)"
align="center"
prop="pressOutChillerWater"
/>
<el-table-column
label="冷冻水进水压力(kpa)"
align="center"
prop="pressInChillerWater"
/>
</el-table-column>
<el-table-column label="冷却泵">
<el-table-column
label="冷却水泵频率(hz)"
align="center"
prop="frequencyCooling"
/>
<el-table-column
label="冷却水出水压力(kpa)"
align="center"
prop="pressOutCoolingWater"
/>
<el-table-column
label="冷却水进水压力(kpa)"
align="center"
prop="pressInCoolingWater"
/>
</el-table-column>
<el-table-column label="冷却塔">
<el-table-column
label="冷却塔水泵频率(hz)"
align="center"
prop="frequencyCoolingTower"
/>
<el-table-column
label="冷却塔运行数量"
align="center"
prop="runCoolingTower"
/>
</el-table-column>
<el-table-column label="室外温度(℃)" align="center" prop="tempOutdoor" />
<el-table-column
label="室外湿度(%)"
align="center"
prop="humidityOutdoor"
/>
<el-table-column
label="恒压补水罐压力(Mpa)"
align="center"
prop="pressConstantWaterTank"
/>
<el-table-column label="巡查记录人" align="center" prop="recorder" />
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['device:ledger:edit']"
>修改</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改设备台账对话框 -->
<el-dialog :title="title" :visible.sync="open" append-to-body>
<el-form ref="form" :model="form" :rules="rules">
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item label="主机编号" prop="deviceNum">
<el-select
v-model="form.deviceNum"
placeholder="请选择主机编号"
clearable
>
<el-option label="1号主机" value="1" />
<el-option label="2号主机" value="2" />
<el-option label="3号主机" value="3" />
</el-select> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="设计流量(%)" prop="designFlow">
<el-input v-model="form.designFlow" placeholder="请输入流量(%)" />
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item label="冷冻水进水温度(℃)" prop="tempInChillerWater">
<el-input
v-model="form.tempInChillerWater"
placeholder="请输入温度(℃)"
/> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="冷冻水出水温度(℃)" prop="tempOutChillerWater">
<el-input
v-model="form.tempOutChillerWater"
placeholder="请输入温度(℃)"
/>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item label="蒸发器饱和温度(℃)" prop="tempEvapSaturation">
<el-input
v-model="form.tempEvapSaturation"
placeholder="请输入温度(℃)"
/> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="蒸发器趋近温度(℃)" prop="tempEvapApproaching">
<el-input
v-model="form.tempEvapApproaching"
placeholder="请输入温度(℃)"
/>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item label="蒸发器压力(kpa)" prop="pressEvapSaturation">
<el-input
v-model="form.pressEvapSaturation"
placeholder="请输入压力(kpa)"
/> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item
label="冷凝器压力(kpa)"
prop="pressCondenserSaturation"
>
<el-input
v-model="form.pressCondenserSaturation"
placeholder="请输入压力(kpa)"
/> </el-form-item
></el-col>
</el-row>
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item label="冷却水进水温度(℃)" prop="tempInCoolingWater">
<el-input
v-model="form.tempInCoolingWater"
placeholder="请输入温度(℃)"
/> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="冷却水出水温度(℃)" prop="tempOutCoolingWater">
<el-input
v-model="form.tempOutCoolingWater"
placeholder="请输入温度(℃)"
/>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item
label="冷凝器饱和温度(℃)"
prop="tempCondenserSaturation"
>
<el-input
v-model="form.tempCondenserSaturation"
placeholder="请输入温度(℃)"
/> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item
label="冷凝器趋近温度(℃)"
prop="tempCondenserApproaching"
>
<el-input
v-model="form.tempCondenserApproaching"
placeholder="请输入温度(℃)"
/>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item label="冷冻水设定值(℃)" prop="setChillerWater">
<el-input
v-model="form.setChillerWater"
placeholder="请输入温度(℃)"
/> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="冷水机需求(%)" prop="setLoad">
<el-input v-model="form.setLoad" placeholder="请输入(%)" />
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item label="总输入功率(kw)" prop="inputPowerTotal">
<el-input
v-model="form.inputPowerTotal"
placeholder="请输入功率(kw)"
/> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="总电流(%)" prop="currentTotal">
<el-input v-model="form.currentTotal" placeholder="请输入(%)" />
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item label="压缩机1_压缩比" prop="ratioCompOne">
<el-input
v-model="form.ratioCompOne"
placeholder="请输入压缩比"
/> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="压缩机2_压缩比" prop="ratioCompTwo">
<el-input
v-model="form.ratioCompTwo"
placeholder="请输入压缩比"
/>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item label="压缩机3_压缩比" prop="ratioCompThree">
<el-input
v-model="form.ratioCompThree"
placeholder="请输入压缩比"
/> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="膨胀阀开度(%)" prop="openExv">
<el-input v-model="form.openExv" placeholder="请输入(%)" />
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item label="运行中的压缩机数量" prop="runCompNum">
<el-input
v-model="form.runCompNum"
placeholder="请输入数量"
/> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="冷冻水泵频率(hz)" prop="frequencyChiller">
<el-input v-model="form.openExv" placeholder="请输入频率(hz)" />
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item
label="冷冻水出水压力(kpa)"
prop="pressOutChillerWater"
>
<el-input
v-model="form.pressOutChillerWater"
placeholder="请输入压力(kpa)"
/> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item
label="冷冻水进水压力(kpa)"
prop="pressInChillerWater"
>
<el-input
v-model="form.pressInChillerWater"
placeholder="请输入压力(kpa)"
/> </el-form-item
></el-col>
</el-row>
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item
label="冷却水出水压力(kpa)"
prop="pressOutCoolingWater"
>
<el-input
v-model="form.pressOutCoolingWater"
placeholder="请输入压力(kpa)"
/> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item
label="冷却水进水压力(kpa)"
prop="pressInCoolingWater"
>
<el-input
v-model="form.pressInCoolingWater"
placeholder="请输入压力(kpa)"
/> </el-form-item
></el-col>
</el-row>
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item label="冷却水泵频率(hz)" prop="frequencyCooling">
<el-input
v-model="form.frequencyCooling"
placeholder="请输入频率(hz)"
/> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item
label="冷却塔水泵频率(hz)"
prop="frequencyCoolingTower"
>
<el-input
v-model="form.frequencyCoolingTower"
placeholder="请输入频率(hz)"
/> </el-form-item
></el-col>
</el-row>
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item label="冷却塔运行数量" prop="runCoolingTower">
<el-input
v-model="form.runCoolingTower"
placeholder="请输入数量"
/> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item
label="恒压补水罐压力(Mpa)"
prop="pressConstantWaterTank"
>
<el-input
v-model="form.pressConstantWaterTank"
placeholder="请输入压力(Mpa)"
/> </el-form-item
></el-col>
</el-row>
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item label="室外温度" prop="tempOutdoor">
<el-input
v-model="form.tempOutdoor"
placeholder="请输入温度(℃)"
/> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="室外湿度(%)" prop="humidityOutdoor">
<el-input
v-model="form.humidityOutdoor"
placeholder="请输入湿度(%)"
/> </el-form-item
></el-col>
</el-row>
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item label="巡查记录人" prop="recorder">
<el-input
v-model="form.recorder"
placeholder="请输入巡查记录人"
/> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="备注" prop="remark">
<el-input
v-model="form.remark"
placeholder="请输入备注"
/> </el-form-item
></el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel"> </el-button>
<el-button type="primary" @click="submitForm"> </el-button>
</div>
</el-dialog>
<el-dialog
:visible.sync="dialogPrintVisible"
title="打印预览"
class="print-dialog"
>
<div id="report" ref="report" class="report">
<table
border="1"
style="
table-layout: fixed;
width: 100%;
border: 1px solid #e2e6f0;
margin-bottom: 35px;
"
>
<thead>
<tr>
<th rowspan="1" colspan="32">磁悬浮水冷冷水机组数据运行记录表</th>
</tr>
<tr>
<th>主机id</th>
<th>时间</th>
<th colspan="6">蒸发器</th>
<th colspan="5">冷凝器</th>
<th colspan="7">系统</th>
<th colspan="3">冷冻泵</th>
<th colspan="3">冷却泵</th>
<th colspan="2">冷却塔</th>
<th>室外温度()</th>
<th>室外湿度(%)</th>
<th>恒压补水罐压力(Mpa)</th>
<th>巡查记录人</th>
</tr>
<tr>
<th></th>
<th></th>
<th>冷冻水进水温度()</th>
<th>冷冻水出水温度()</th>
<th>设计流量(%)</th>
<th>蒸发器压力(kpa)</th>
<th>蒸发器饱和温度()</th>
<th>蒸发器趋近温度()</th>
<th>冷却水进水温度()</th>
<th>冷却水出水温度()</th>
<th>冷凝器压力(kpa)</th>
<th>冷凝器饱和温度()</th>
<th>冷凝器趋近温度()</th>
<th>冷冻水设定值()</th>
<th>冷水机需求(%)</th>
<th>总电流(%)</th>
<th>总输入功率(kw)</th>
<th>压缩机1_压缩比</th>
<th>膨胀阀开度(%)</th>
<th>运行中的压缩机数量</th>
<th>冷冻水泵频率(hz)</th>
<th>冷冻水出水压力(kpa)</th>
<th>冷冻水进水压力(kpa)</th>
<th>冷却水泵频率(hz)</th>
<th>冷却水出水压力(kpa)</th>
<th>冷却水进水压力(kpa)</th>
<th>冷却塔水泵频率(hz)</th>
<th>冷却塔运行数量</th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tr v-for="(item, index) in postList" :key="index">
<td align="center" v-for="(value, key) in item" :key="key">
{{ value }}
</td>
</tr>
</table>
<div
class="detail"
style="
display: flex;
flex-direction: row;
font-size: 14px;
justify-content: space-between;
flex-wrap: nowrap;
width: 40%;
color: #ffffff;
"
>
<div>操作员: {{ this.userName }}</div>
<div class="print-date">日期 {{ this.operationDate }}</div>
</div>
</div>
<el-row type="flex" justify="end" style="margin-top: 0.2rem">
<el-col :span="2">
<el-button type="info" @click="dialogPrintVisible = false"
>取消</el-button
>
</el-col>
<el-col :span="2" style="margin-left: 60px">
<el-button type="success" @click="surePrint">确认</el-button>
</el-col>
</el-row>
</el-dialog>
</div>
</template>
<script>
import {
reportSysList,
reportSysEdit,
reportSysExport,
} from "@/api/centerairC/hostRunReport";
import { format2, getDay } from "@/utils/datetime";
export default {
name: "ledger",
data() {
return {
timeArr: [],
//
loading: false,
//
ids: [],
//
single: true,
//
multiple: true,
//
showSearch: true,
//
total: 0,
//
postList: [],
//
title: "",
//
open: false,
//
queryParams: {
pageNum: 1,
pageSize: 10,
deviceNum: "",
params: {
startTime: "",
endTime: "",
},
},
//
form: {},
//
rules: {
deviceName: [
{ required: true, message: "设备名称不能为空", trigger: "blur" },
],
},
dialogPrintVisible: false,
userName: "", //
operationDate: getDay(0), //
titleDate: "",
};
},
created() {
this.userName = sessionStorage.getItem("userName");
this.queryParams.deviceNum = "1";
this.getList();
},
methods: {
//
dateChange() {
// console.log("", this.timeArr);
if (!this.timeArr) {
this.$nextTick(() => {
this.timeArr = [];
this.queryParams.params.startTime = "";
this.queryParams.params.endTime = "";
});
} else {
this.queryParams.params.startTime = this.timeArr[0];
this.queryParams.params.endTime = this.timeArr[1];
}
},
/** 查询设备台账列表 */
getList() {
this.loading = true;
reportSysList(this.queryParams).then((response) => {
if (response.code == 200) {
this.postList = response.rows;
this.total = response.total;
this.loading = false;
} else {
this.postList = [];
this.total = 0;
this.loading = false;
}
});
},
//
cancel() {
this.open = false;
this.reset();
this.form.id = "";
},
//
reset() {
this.form = {
id: "",
deviceNum: "",
curTime: "",
tempInChillerWater: "",
tempOutChillerWater: "",
designFlow: "",
pressEvapSaturation: "",
tempEvapSaturation: "",
tempEvapApproaching: "",
tempInCoolingWater: "",
tempOutCoolingWater: "",
pressCondenserSaturation: "",
tempCondenserSaturation: "",
tempCondenserApproaching: "",
setChillerWater: "",
setLoad: "",
currentTotal: "",
inputPowerTotal: "",
ratioCompOne: "",
openExv: "",
runCompNum: "",
frequencyChiller: "",
pressOutChillerWater: "",
pressInChillerWater: "",
frequencyCooling: "",
pressOutCoolingWater: "",
pressInCoolingWater: "",
frequencyCoolingTower: "",
runCoolingTower: "",
pressConstantWaterTank: "",
tempOutdoor: "",
humidityOutdoor: "",
recorder: "",
remark: "",
ratioCompTwo: "",
ratioCompThree: "",
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
this.form = Object.assign({}, row);
this.open = true;
this.title = "修改主机运行记录";
},
/** 提交按钮 */
submitForm: function () {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.id != undefined) {
reportSysEdit(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
console.log("新增参数", this.form);
}
}
});
},
/** 导出按钮操作 */
handleExport() {
reportSysExport(this.queryParams).then((res) => {
console.log("导出返回", res);
if (res.code == 200) {
//
// blob URL
const url = window.URL.createObjectURL(new Blob([res]));
// <a>hrefdownload
const link = document.createElement("a");
link.href = url;
link.setAttribute("download", "主机运行记录报表.xls"); //
//
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
// blob URL
window.URL.revokeObjectURL(url);
this.$message({
type: "success",
message: "导出成功!",
});
} else {
this.$message.error("导出失败!");
}
});
},
//
leadingPrint() {
this.dialogPrintVisible = true;
},
//
surePrint() {
const printHTML = document.querySelector("#report").innerHTML;
//
window.document.body.innerHTML = printHTML;
window.print(); // window
window.location.reload(); //
},
},
};
</script>
<style scoped lang="scss">
/* 媒体查询,适配大于2000px分辨率的大屏样式 - element样式 */
@media (max-width: 2000px) {
::v-deep .el-dialog {
width: 800px !important;
}
::v-deep .print-dialog .el-dialog {
width: 1200px !important;
}
::v-deep .el-dialog .el-form-item__label {
width: 150px !important;
}
::v-deep .el-dialog .el-form-item {
display: flex;
flex-direction: row;
align-items: center;
}
}
@media (min-width: 2000px) {
// ::v-deep .el-dialog {
// width: 8rem !important;
// }
// ::v-deep .el-dialog .el-form-item__label {
// width: 1.5rem !important;
// }
// ::v-deep .el-dialog .el-form-item {
// display: flex;
// flex-direction: row;
// align-items: center;
// }
}
</style>

1112
src/views/hotWater/waterMonitor/index copy.vue

File diff suppressed because it is too large Load Diff

679
src/views/hotWater/waterMonitor/index.vue

@ -2,7 +2,7 @@
<div class="app-container">
<div class="left-tree">
<!-- el-tree 设置一个固定的高度和滚动条 -->
<div style="height: 5.08rem; overflow-y: auto">
<div style="height: 4.5rem; overflow-y: auto">
<el-tree
ref="tree"
:data="treeData"
@ -155,7 +155,144 @@
alt=""
/>
<!-- 热泵定位 -->
<div :class="getHotPumPositionClass">
<div
class="hotPump-li"
v-for="(item, index) in tableData"
:key="index"
>
<template v-if="tableData.length === 2">
<template v-if="index === 0">
<div class="hotPump-name">{{ item.pumpName }}</div>
<img class="hotPump-img" :src="getImageSrc(item)" alt="" />
<!-- <div class="hotPump-tem1">温度:{{ item.waterTemp }}</div>
-->
<img
class="tem2"
src="../../../assets/flowimg/thermometer.png"
alt=""
/>
<div class="temContainer2">
<div
class="temprogress"
:style="{ height: item.waterTemp + '%' }"
></div>
</div>
<b class="temdiv2">{{ item.waterTemp }}</b>
</template>
<template v-else>
<img class="hotPump-img" :src="getImageSrc(item)" alt="" />
<div class="hotPump-name">{{ item.pumpName }}</div>
<img
class="tem2"
src="../../../assets/flowimg/thermometer.png"
alt=""
/>
<div class="temContainer2">
<div
class="temprogress"
:style="{ height: item.waterTemp + '%' }"
></div>
</div>
<b class="temdiv2">{{ item.waterTemp }}</b>
</template>
</template>
<template v-else-if="tableData.length === 4">
<template v-if="index < 2">
<template v-if="index === 0">
<div class="hotPump-name">{{ item.pumpName }}</div>
<img
class="hotPump-img"
:src="getImageSrc(item)"
alt=""
/>
<!-- <div class="hotPump-tem1">温度:{{ item.waterTemp }}</div>
-->
<img
class="tem2"
src="../../../assets/flowimg/thermometer.png"
alt=""
/>
<div class="temContainer2">
<div
class="temprogress"
:style="{ height: item.waterTemp + '%' }"
></div>
</div>
<b class="temdiv2">{{ item.waterTemp }}</b>
</template>
<template v-else>
<div class="hotPump-name">{{ item.pumpName }}</div>
<img
class="hotPump-img"
:src="getImageSrc(item)"
alt=""
/>
<img
class="tem1"
src="../../../assets/flowimg/thermometer.png"
alt=""
/>
<div class="temContainer1">
<div
class="temprogress"
:style="{ height: item.waterTemp + '%' }"
></div>
</div>
<b class="temdiv1">{{ item.waterTemp }}</b>
</template>
</template>
<template v-else>
<template v-if="index === 2">
<img
class="hotPump-img"
:src="getImageSrc(item)"
alt=""
/>
<div class="hotPump-name">{{ item.pumpName }}</div>
<!-- <div class="hotPump-tem1">温度:{{ item.waterTemp }}</div>
-->
<img
class="tem2"
src="../../../assets/flowimg/thermometer.png"
alt=""
/>
<div class="temContainer2">
<div
class="temprogress"
:style="{ height: item.waterTemp + '%' }"
></div>
</div>
<b class="temdiv2">{{ item.waterTemp }}</b>
</template>
<template v-else>
<img
class="hotPump-img"
:src="getImageSrc(item)"
alt=""
/>
<div class="hotPump-name">{{ item.pumpName }}</div>
<img
class="tem1"
src="../../../assets/flowimg/thermometer.png"
alt=""
/>
<div class="temContainer1">
<div
class="temprogress"
:style="{ height: item.waterTemp + '%' }"
></div>
</div>
<b class="temdiv1">{{ item.waterTemp }}</b>
</template>
</template>
</template>
</div>
</div>
<!-- 热泵名称定位 -->
<!-- <div class="pumname">{{ this.pumname }}</div> -->
<!-- 热泵定位 -->
<!-- <img
class="hotpum"
v-if="this.hotPumState === '1' && this.isBad !== '1'"
src="../../../assets/flowimg/starthotpum.png"
@ -172,7 +309,7 @@
v-else
src="../../../assets/flowimg/closehotpum.png"
alt=""
/>
/> -->
<!-- 无线网关定位 无状态-->
<img
class="web"
@ -189,30 +326,46 @@
src="../../../assets/flowimg/waterBox.png"
alt=""
/>
<!-- 热泵名称定位 -->
<div class="pumname">{{ this.pumname }}</div>
<!-- 温度定位 -->
<img
class="tem"
<!-- 温度定位1 -->
<!-- <img
class="tem1"
src="../../../assets/flowimg/thermometer.png"
alt=""
/>
<div class="temContainer">
<div class="temContainer1">
<div class="temprogress" :style="{ height: temdata + '%' }"></div>
</div>
<b class="temdiv">{{ temdata }}</b>
<!-- 水位定位 -->
<div class="progressContainer1" v-if="progress > 50">
<div class="progress" :style="{ height: progress + '%' }">
<!-- <b class="propo">{{ progress }}%</b> -->
<b class="temdiv1">{{ temdata }}</b> -->
<!-- 温度定位2 -->
<!-- <img
class="tem2"
src="../../../assets/flowimg/thermometer.png"
alt=""
/>
<div class="temContainer2">
<div class="temprogress" :style="{ height: temdata + '%' }"></div>
</div>
<!-- 水位定位 -->
<b class="propo">{{ progress }}%</b>
<b class="temdiv2">{{ temdata }}</b> -->
<!-- 水位定位1 -->
<div class="progressContainer1" v-if="progress1 > 50">
<div class="progress" :style="{ height: progress1 + '%' }"></div>
<b class="propo">{{ progress1 }}%</b>
</div>
<div class="progressContainer2" v-else>
<div class="progress" :style="{ height: progress + '%' }"></div>
<b class="propo">{{ progress }}%</b>
<div class="progress" :style="{ height: progress1 + '%' }"></div>
<b class="propo">{{ progress1 }}%</b>
</div>
<div class="progressName1">{{ progressName1 }}</div>
<!-- 水位定位2 -->
<div class="progressContainer3" v-if="progress2 > 50">
<div class="progress" :style="{ height: progress2 + '%' }"></div>
<b class="propo">{{ progress2 }}%</b>
</div>
<div class="progressContainer4" v-else>
<div class="progress" :style="{ height: progress2 + '%' }"></div>
<b class="propo">{{ progress2 }}%</b>
</div>
<div class="progressName2">{{ progressName2 }}</div>
</div>
</div>
<div class="changecontent">
@ -251,22 +404,42 @@
<span>{{ row.waterTemp }} </span>
</template>
</el-table-column>
<!-- 裙楼高区 -->
<el-table-column
prop="levelSet"
label="设置水位(%)"
prop="levelSet1"
label="设置水位1(%)"
min-width="100"
>
<template slot-scope="{ row }">
<span>{{ row.levelSet }}</span>
<span>{{ row.levelSet1 }}</span>
</template>
</el-table-column>
<el-table-column
prop="waterLevel"
label="实际水位(%)"
prop="waterLevel1"
label="实际水位1(%)"
min-width="100"
>
<template slot-scope="{ row }">
<span>{{ row.waterLevel }} </span>
<span>{{ row.waterLevel1 }} </span>
</template>
</el-table-column>
<!-- 中厨中区 -->
<el-table-column
prop="levelSet2"
label="设置水位2(%)"
min-width="100"
>
<template slot-scope="{ row }">
<span>{{ row.levelSet2 }}</span>
</template>
</el-table-column>
<el-table-column
prop="waterLevel2"
label="实际水位2(%)"
min-width="100"
>
<template slot-scope="{ row }">
<span>{{ row.waterLevel2 }} </span>
</template>
</el-table-column>
<el-table-column prop="upWaterState1" label="供水泵1状态">
@ -313,7 +486,7 @@
</template>
<script>
import { spaceTree } from "@/api/region";
import { floorTree } from "@/api/region";
import { waterPublic, waterMonitorList } from "@/api/hotWater/waterMonitor";
export default {
data() {
@ -345,19 +518,43 @@ export default {
// 线 0线 1线
webstate: 1,
//
progress: 0,
progress1: 0,
progress2: 0,
progressName1: "",
progressName2: "",
//
temdata: 0,
//
pumname: "",
};
},
computed: {
getHotPumPositionClass() {
if (this.tableData.length === 4) {
return "hotPumPosition-four";
} else if (this.tableData.length === 2) {
return "hotPumPosition-two";
}
return "";
},
},
mounted() {
this.getSysBuild();
},
methods: {
getImageSrc(item) {
console.log("item", item);
if (item.runState === "1" && item.isFault !== "1") {
// 使 require
return require("@/assets/flowimg/starthotpum.png");
} else if (item.isFault === "1") {
return require("@/assets/flowimg/badhotpum.png");
} else {
return require("@/assets/flowimg/closehotpum.png");
}
},
getSysBuild() {
spaceTree().then((res) => {
floorTree().then((res) => {
if (res.code == 200) {
//
console.log("楼栋返回值", res);
@ -397,6 +594,13 @@ export default {
console.log("当前选中节点ID", this.currentId);
console.log("当前选中节点层级", this.currentLevel);
console.log("当前选中节点名称", this.currentName);
if (this.currentName === "-1楼") {
this.progressName1 = "裙楼";
this.progressName2 = "中厨";
} else if (this.currentName === "3楼") {
this.progressName1 = "高区";
this.progressName2 = "中区";
}
this.baseMessgae();
this.sysStatus();
}
@ -488,6 +692,13 @@ export default {
this.baseMessgae();
this.sysStatus();
}
if (this.currentName === "-1楼") {
this.progressName1 = "裙楼";
this.progressName2 = "中厨";
} else if (this.currentName === "3楼") {
this.progressName1 = "高区";
this.progressName2 = "中区";
}
},
handleClick(tab, event) {
console.log(tab, event);
@ -497,7 +708,8 @@ export default {
handlerow(row, event, column) {
console.log("row", row);
//
this.progress = row.waterLevel;
this.progress1 = row.waterLevel1;
this.progress2 = row.waterLevel2;
this.temdata = row.waterTemp;
this.pumname = row.pumpName;
//
@ -690,7 +902,7 @@ export default {
margin-bottom: 20px;
}
.base-height {
height: 2.02rem;
height: 2.6rem;
overflow-y: auto;
.base-li {
margin-bottom: 20px;
@ -787,8 +999,8 @@ export default {
.text7 {
position: absolute;
top: 2.6rem;
left: 5.6rem;
top: 3.1rem;
left: 5.75rem;
z-index: 1;
}
.text8 {
@ -802,7 +1014,7 @@ export default {
position: absolute;
top: 0.7rem;
left: 0rem;
width:2.55rem;
width: 2.55rem;
height: 0.34rem;
z-index: 1;
}
@ -821,7 +1033,7 @@ export default {
top: 1.5rem;
left: 4.8rem;
width: 3.5rem;
height: 0.7rem;
height: 1.2rem;
}
.coolpum {
@ -861,7 +1073,7 @@ export default {
width: 1rem;
height: 0.78rem;
position: absolute;
top: 1.68rem;
top: 2.15rem;
left: 5.64rem;
}
@ -881,23 +1093,50 @@ export default {
right: 0.36rem;
}
.tem {
width: 0.8rem;
height: 1.5rem;
.tem1 {
width: 0.6rem;
height: 1.15rem;
position: absolute;
top: 1.68rem;
left: 4rem;
top: 2.25rem;
left: 3.2rem;
z-index: 3;
}
.temContainer {
width: 0.076rem;
height: 0.84rem;
.tem2 {
width: 0.6rem;
height: 1.15rem;
position: absolute;
top: 2.25rem;
left: 4.51rem;
z-index: 3;
}
.temContainer1 {
width: 0.06rem;
height: 0.65rem;
background-color: #02072d;
// background-color: #11aaea;
position: absolute;
top: 2.17rem;
left: 4.36rem;
top: 2.63rem;
left: 3.46rem;
z-index: 3;
.temprogress {
background-color: #d22727;
width: 100%;
position: absolute;
bottom: 0;
z-index: 3;
}
}
.temContainer2 {
width: 0.06rem;
height: 0.65rem;
background-color: #02072d;
// background-color: #11aaea;
position: absolute;
top: 2.63rem;
left: 4.77rem;
z-index: 3;
.temprogress {
@ -918,30 +1157,40 @@ export default {
z-index: 2;
}
.temdiv {
.temdiv1 {
font-size: 0.15rem;
line-height: 0.18rem;
letter-spacing: 0.01rem;
color: #d22727;
position: absolute;
top: 2.15rem;
left: 3.2rem;
z-index: 3;
}
.temdiv2 {
font-size: 0.15rem;
line-height: 0.18rem;
letter-spacing: 0.01rem;
color: #d22727;
position: absolute;
top: 3.26rem;
left: 4.3rem;
top: 2.15rem;
left: 4.5rem;
z-index: 3;
}
.progressContainer1 {
width: 0.42rem;
height: 2.03rem;
width: 0.3rem;
height: 1.7rem;
background-color: #dff1fa;
margin-left: 2%;
position: absolute;
top: 1.47rem;
left: 2.6rem;
top: 1.8rem;
left: 2.8rem;
border: solid 0.01rem #11aaea;
z-index: 3;
.progress {
background-color: #1c89ee;
background-color: #1167db;
width: 100%;
position: absolute;
bottom: 0;
@ -961,13 +1210,13 @@ export default {
}
.progressContainer2 {
width: 0.42rem;
height: 2.03rem;
width: 0.3rem;
height: 1.7rem;
background-color: #dff1fa;
margin-left: 2%;
position: absolute;
top: 1.45rem;
left: 2.6rem;
top: 1.8rem;
left: 2.8rem;
border: solid 0.01rem red;
z-index: 3;
@ -990,6 +1239,90 @@ export default {
z-index: 3;
}
}
.progressContainer3 {
width: 0.3rem;
height: 1.7rem;
background-color: #dff1fa;
margin-left: 2%;
position: absolute;
top: 1.8rem;
left: 4.2rem;
border: solid 0.01rem #11aaea;
z-index: 3;
.progress {
background-color: #1167db;
width: 100%;
position: absolute;
bottom: 0;
z-index: 3;
}
b {
font-family: AdobeHeitiStd-Regular;
font-size: 0.17rem;
line-height: 0.2rem;
letter-spacing: 0rem;
color: #d22727;
position: absolute;
top: -0.3rem;
z-index: 3;
}
}
.progressContainer4 {
width: 0.3rem;
height: 1.7rem;
background-color: #dff1fa;
margin-left: 2%;
position: absolute;
top: 1.8rem;
left: 4.2rem;
border: solid 0.01rem red;
z-index: 3;
.progress {
background-color: red;
width: 100%;
position: absolute;
bottom: 0;
z-index: 3;
}
b {
font-family: AdobeHeitiStd-Regular;
font-size: 0.17rem;
line-height: 0.2rem;
letter-spacing: 0rem;
color: #d22727;
position: absolute;
top: -0.3rem;
z-index: 3;
}
}
.progressName1 {
font-size: 0.17rem;
font-weight: normal;
font-stretch: normal;
line-height: 0.2rem;
letter-spacing: 0.01rem;
color: #0a3797;
position: absolute;
top: 2rem;
left: 2.6rem;
z-index: 3;
}
.progressName2 {
font-size: 0.17rem;
font-weight: normal;
font-stretch: normal;
line-height: 0.2rem;
letter-spacing: 0.01rem;
color: #0a3797;
position: absolute;
top: 2rem;
left: 4rem;
z-index: 3;
}
.pumname {
font-size: 0.17rem;
@ -1003,14 +1336,240 @@ export default {
left: 8.8rem;
z-index: 1;
}
/* 四个元素时的样式 */
.hotPumPosition-four {
font-size: 0.17rem;
font-weight: normal;
font-stretch: normal;
line-height: 0.2rem;
letter-spacing: 0.01rem;
color: #fefefe;
position: absolute;
top: 0.7rem;
left: 7.8rem;
z-index: 1;
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 2.3rem !important;
.hotPump-li {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 50% !important;
position: relative;
// margin-bottom: 0.2rem;
.hotPump-img {
width: 1rem;
height: 1rem;
margin: 0.1rem 0;
}
.hotPump-tem1 {
position: absolute;
bottom: 0.2rem;
color: #ee3a7f;
font-size: 0.13rem;
font-weight: bold;
}
.hotPump-tem2 {
position: absolute;
bottom: 0.4rem;
color: #ee3a7f;
font-size: 0.13rem;
font-weight: bold;
}
.tem1 {
width: 0.4rem;
height: 0.7rem;
position: absolute;
top: 0.3rem;
left: 1rem;
z-index: 3;
}
.tem2 {
width: 0.4rem;
height: 0.7rem;
position: absolute;
top: 0.3rem;
left: -0.3rem;
z-index: 3;
}
.temContainer2 {
width: 0.042rem;
height: 0.4rem;
background-color: #02072d;
// background-color: #11aaea;
position: absolute;
top: 0.52rem;
left: -0.12rem;
z-index: 3;
.temprogress {
background-color: #d22727;
width: 100%;
position: absolute;
bottom: 0;
z-index: 3;
}
}
.temdiv2 {
font-size: 0.15rem;
line-height: 0.18rem;
letter-spacing: 0.01rem;
color: #d22727;
position: absolute;
top: 1rem;
left: -0.5rem;
z-index: 3;
}
.temContainer1 {
width: 0.042rem;
height: 0.4rem;
background-color: #02072d;
// background-color: #11aaea;
position: absolute;
top: 0.52rem;
left: 1.18rem;
z-index: 3;
.temprogress {
background-color: #d22727;
width: 100%;
position: absolute;
bottom: 0;
z-index: 3;
}
}
.temdiv1 {
font-size: 0.15rem;
line-height: 0.18rem;
letter-spacing: 0.01rem;
color: #d22727;
position: absolute;
top: 1rem;
left: 1.1rem;
z-index: 3;
}
}
}
/* 两个元素时的样式 */
.hotPumPosition-two {
font-size: 0.17rem;
font-weight: normal;
font-stretch: normal;
line-height: 0.2rem;
letter-spacing: 0.01rem;
color: #fefefe;
position: absolute;
top: 0.7rem;
left: 7.8rem;
z-index: 1;
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 1.2rem !important;
.hotPump-li {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100% !important;
position: relative;
// margin-bottom: 0.2rem;
.hotPump-img {
width: 1rem;
height: 1rem;
margin: 0.1rem 0;
}
.hotPump-tem1 {
position: absolute;
bottom: 0.2rem;
color: #ee3a7f;
font-size: 0.13rem;
font-weight: bold;
}
.hotPump-tem2 {
position: absolute;
bottom: 0.4rem;
color: #ee3a7f;
font-size: 0.13rem;
font-weight: bold;
}
.tem2 {
width: 0.4rem;
height: 0.7rem;
position: absolute;
top: 0.3rem;
left: -0.3rem;
z-index: 3;
}
.temContainer2 {
width: 0.042rem;
height: 0.4rem;
background-color: #02072d;
// background-color: #11aaea;
position: absolute;
top: 0.52rem;
left: -0.12rem;
z-index: 3;
.temprogress {
background-color: #d22727;
width: 100%;
position: absolute;
bottom: 0;
z-index: 3;
}
}
.temdiv2 {
font-size: 0.15rem;
line-height: 0.18rem;
letter-spacing: 0.01rem;
color: #d22727;
position: absolute;
top: 1rem;
left: -0.5rem;
z-index: 3;
}
.temContainer1 {
width: 0.042rem;
height: 0.4rem;
background-color: #02072d;
// background-color: #11aaea;
position: absolute;
top: 0.52rem;
left: -0.12rem;
z-index: 3;
.temprogress {
background-color: #d22727;
width: 100%;
position: absolute;
bottom: 0;
z-index: 3;
}
}
.temdiv1 {
font-size: 0.15rem;
line-height: 0.18rem;
letter-spacing: 0.01rem;
color: #d22727;
position: absolute;
top: 1rem;
left: -0.5rem;
z-index: 3;
}
}
}
}
}
.changecontent {
background: #142c4e;
border-radius: 6px;
height: 300px;
padding: 15px 10px 0 10px;
height: 310px;
padding: 15px 10px 10px 10px;
overflow: hidden;
margin-top: 30px;
@ -1076,7 +1635,7 @@ export default {
margin-bottom: 0.2rem !important;
}
.base-height {
height: 2.02rem !important;
height: 2.6rem !important;
.base-li {
margin-bottom: 0.2rem !important;
.deepColor {
@ -1088,8 +1647,8 @@ export default {
}
.changecontent {
border-radius: 0.06rem !important;
height: 3rem !important;
padding: 0.15rem 0.1rem 0 0.1rem !important;
height: 3.1rem !important;
padding: 0.15rem 0.1rem 0.1rem 0.1rem !important;
margin-top: 0.3rem !important;
.tablemaeta {

6
src/views/system/menu/index.vue

@ -570,14 +570,14 @@ export default {
/* 媒体查询,适配大于2000px分辨率的大屏样式 - element样式 */
@media (max-width: 2000px) {
::v-deep .el-dialog {
width: 680px !important;
width: 700px !important;
}
::v-deep .el-form-item--medium .el-form-item__content {
width: 100%;
}
::v-deep .el-dialog .el-form-item__label {
width: 120px !important;
width: 140px !important;
}
::v-deep .el-dialog .el-form-item {
display: flex;
@ -591,7 +591,7 @@ export default {
}
::v-deep .el-dialog .el-form-item__label {
width: 1.2rem !important;
width: 1.4rem !important;
}
::v-deep .el-dialog .el-form-item {
display: flex;

Loading…
Cancel
Save