lijianfu
/
eemcs_ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

添加蒸汽机运行记录页面

gh_ers
selia-zx 2 months ago
parent
9c44565d0f
commit
411d17da66
2 changed files with 524 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 27
      src/api/boiler/boilerRunReport.js
  2. 497
      src/views/boilerSys/boilerRunReport/index.vue

27
src/api/boiler/boilerRunReport.js
Unescape View File

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

497
src/views/boilerSys/boilerRunReport/index.vue
Unescape View File

@ -0,0 +1,497 @@
<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="msgCode">
<el-date-picker
v-model="dayDate"
type="daterange"
range-separator="至"
value-format="yyyy-MM-dd"
start-placeholder="开始日期"
end-placeholder="结束日期"
@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="warning-btn">
<el-button
type="warning"
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出</el-button
>
</div>
</div>
</div>
<el-table
:data="tableData"
border
style="width: 100%"
v-loading="loading"
:cell-style="tableRowStyle"
class="log_table"
>
<el-table-column prop="curTime" label="记录时间" width="110">
</el-table-column>
<el-table-column prop="runStatus" label="运行状态"> </el-table-column>
<el-table-column prop="flameIntensity" label="火焰强度">
</el-table-column>
<el-table-column prop="tempFlueGas" label="烟气温度(℃)">
</el-table-column>
<el-table-column prop="percentFlameIntensity" label="火焰百分比(%)">
</el-table-column>
<el-table-column prop="waterLevel" label="液位(%)"> </el-table-column>
<el-table-column prop="tempCur" label="蒸汽温度(℃)"> </el-table-column>
<el-table-column prop="pressCur" label="当前压力(Mpa)"> </el-table-column>
<el-table-column prop="pressSet" label="压力设定值(Mpa)">
</el-table-column>
<el-table-column prop="pressStartDiff" label="启动压差(Mpa)">
</el-table-column>
<el-table-column prop="pressShutdownDiff" label="停止压差(Mpa)">
</el-table-column>
<el-table-column prop="pressInstance" label="瞬时压力(Mpa)">
</el-table-column>
<el-table-column prop="flowInstance" label="瞬时流量(t/h)">
</el-table-column>
<el-table-column prop="flowTotal" label="累计流量(t)"> </el-table-column>
<el-table-column prop="recorder" label="巡查记录人"> </el-table-column>
<el-table-column prop="remark" label="备注"> </el-table-column>
<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)"
>修改</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="felx-start">
<el-col :span="12">
<el-form-item label="记录时间" prop="curTime">
<el-input
v-model="form.curTime"
disabled
placeholder=""
/> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="运行状态" prop="runStatus">
<el-input
v-model="form.runStatus"
disabled
placeholder=""
/> </el-form-item
></el-col>
</el-row>
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item label="火焰强度" prop="flameIntensity">
<el-input
clearable
v-model="form.flameIntensity"
placeholder="请输入"
/> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="烟气温度℃" prop="tempFlueGas">
<el-input
clearable
v-model="form.tempFlueGas"
placeholder="请输入温度℃"
/>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item label="火焰百分比%" prop="percentFlameIntensity">
<el-input
clearable
v-model="form.percentFlameIntensity"
placeholder="请输入百分比℃"
/> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="液位%" prop="waterLevel">
<el-input
clearable
v-model="form.waterLevel"
placeholder="请输入液位%"
/>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item label="蒸汽温度℃" prop="tempCur">
<el-input
clearable
v-model="form.tempCur"
placeholder="请输入温度℃"
/> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="当前压力Mpa" prop="pressCur">
<el-input
clearable
v-model="form.pressCur"
placeholder="请输入压力Mpa"
/>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item label="压力设定值Mpa" prop="pressSet">
<el-input
clearable
v-model="form.pressSet"
placeholder="请输入压力Mpa"
/> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="启动压差Mpa" prop="pressStartDiff">
<el-input
clearable
v-model="form.pressStartDiff"
placeholder="请输入压差Mpa"
/>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item label="停止压差Mpa" prop="pressShutdownDiff">
<el-input
clearable
v-model="form.pressShutdownDiff"
placeholder="请输入压差Mpa"
/> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="瞬时压力Mpa" prop="pressInstance">
<el-input
clearable
v-model="form.pressInstance"
placeholder="请输入压力Mpa"
/>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" justify="center">
<el-col :span="12">
<el-form-item label="瞬间流量(t/h)" prop="flowInstance">
<el-input
clearable
v-model="form.flowInstance"
placeholder="请输入流量(t/h)"
/> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="累计流量t" prop="flowTotal">
<el-input
clearable
v-model="form.flowTotal"
placeholder="请输入流量t"
/>
</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
clearable
v-model="form.recorder"
placeholder="请输入"
/> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="备注" prop="remark">
<el-input
clearable
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>
</div>
</template>
<script>
import {
boilerSysList,
boilerSysEdit,
boilerSysExport,
} from "@/api/boiler/boilerRunReport";
export default {
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 表格数据
postList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
params: {},
},
dayDate: "",
tableData: [],
// 表单参数
form: {},
// 表单校验
rules: {
deviceName: [
{ required: true, message: "设备名称不能为空", trigger: "blur" },
],
},
deviceRun: [
{
label: "不运行",
value: 0,
},
{
label: "运行",
value: 1,
},
],
};
},
mounted() {
this.initializeTimeDate();
this.getList();
},
methods: {
// 初始化时间
initializeTimeDate() {
let date = new Date(); //获取新的时间
//获取当前年份,并且转为字符串
let year = date.getFullYear().toString();
//获取当前月份，因为月份是要从0开始，此处要加1，
//使用三元表达式，判断是否小于10，如果是的话，就在字符串前面拼接'0'
let month =
date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1).toString()
: (date.getMonth() + 1).toString();
//获取天，判断是否小于10，如果是的话，就在在字符串前面拼接'0'
let day =
date.getDate() < 10
? "0" + date.getDate().toString()
: date.getDate().toString();
//字符串拼接，将开始时间和结束时间进行拼接
let start1 = year + "-" + month + "-01"; //当月第一天
let end1 = year + "-" + month + "-" + day; //当天
this.dayDate = [start1, end1]; // 更新
},
tableRowStyle({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 2 || columnIndex === 6 || columnIndex === 13) {
return "color: #fd1e00;!important;text-align:center;font-weight: bold;";
}
// return "text-align:center";
},
// 选中日期事件
dateChange() {
// console.log("打印时间", this.timeform.time1);
if (!this.dayDate) {
this.$nextTick(() => {
this.dayDate = [];
});
}
},
/** 查询表格数据 */
getList() {
this.loading = true;
this.queryParams.params.startTime =
this.dayDate.length > 0 ? this.dayDate[0] : "";
this.queryParams.params.endTime =
this.dayDate.length > 0 ? this.dayDate[1] : "";
boilerSysList(this.queryParams).then((res) => {
console.log("列表返回", res);
if (res.code == 200 && res.rows) {
this.tableData = res.rows;
this.total = res.total;
this.loading = false;
} else {
this.tableData = [];
this.total = 0;
this.loading = false;
}
});
// 处理表格数据
this.loading = false;
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 导出按钮操作 */
handleExport() {
this.queryParams.params.startTime =
this.dayDate.length > 0 ? this.dayDate[0] : "";
this.queryParams.params.endTime =
this.dayDate.length > 0 ? this.dayDate[1] : "";
boilerSysExport(this.queryParams).then((res) => {
console.log("导出返回", res);
if (res) {
// 请求的结果就是文件
// 创建一个blob URL，用于生成下载链接
const url = window.URL.createObjectURL(new Blob([res]));
// 创建一个<a>元素，并设置其href和download属性
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("导出失败!");
}
});
// .catch((err) => {
// this.$message.error('导出失败!');
// })
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
this.form.id = "";
},
// 表单重置
reset() {
this.form = {
id: "",
curTime: "",
runStatus: "",
flameIntensity: "",
tempFlueGas: "",
percentFlameIntensity: "",
waterLevel: "",
tempCur: "",
pressCur: "",
pressSet: "",
pressStartDiff: "",
pressShutdownDiff: "",
pressInstance: "",
flowInstance: "",
flowTotal: "",
recorder: "",
remark: "",
};
},
/** 修改按钮操作 */
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) {
boilerSysEdit(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
console.log("新增参数", this.form);
}
}
});
},
},
};
</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: 130px !important;
}
::v-deep .el-dialog .el-form-item {
display: flex;
flex-direction: row;
align-items: center;
}
::v-deep .el-dialog .el-form-item__content {
width: 220px !important;
}
}
</style>
Write Preview
Loading…
Cancel
Save