Skip to content

Z
zhongtong-avi-web
Commit 6098f48c authored by 车宾's avatar 车宾
Browse files
Options

fea（烘干室温度监测）：静态开发与功能联调，完成。

parent 3ca20030
Show whitespace changes
Inline Side-by-side
Showing with 336 additions and 3 deletions
src/views/DryingRoomChart/components/ViewDialog.vue 0 → 100644
View file @ 6098f48c
<template>
<el-dialog
title="烘干室监控折线图"
:show-close="false"
:close-on-press-escape="false"
:close-on-click-modal="false"
:visible.sync="dialogVisible"
width="700px">
<!-- 烘干室温度折线图 -->
<div
id="temperatureLineGraph">
</div>
<span slot="footer" class="dialog-footer">
<el-button class="close" size="small" @click="doCancelClick()">关闭</el-button>
</span>
</el-dialog>
</template>
<script>
import Moment from 'moment'
export default {
props: {
startTime: {},
endTime: {},
equipCode: {}
},
data () {
return {
echartsData: [],
dialogVisible: false,
// 图表X轴数据
echartXData: [],
// 图表Y轴数据
echartYData: [],
// echart元素
domItem: ''
}
},
watch: {
dialogVisible (newVal, oldVal) {
if (this.dialogVisible) {
this.getTemperatureLineGraphEchartData();
}
}
},
methods: {
doCancelClick () {
setTimeout(() => {
this.echartXData = [];
this.echartYData = [];
this.dialogVisible = false;
echarts.dispose(this.domItem);
}, 0)
},
// 渲染echarts图表
renderEcharts () {
let self = this;
this.domItem = document.getElementById('temperatureLineGraph');
let echart = echarts.init(this.domItem);
echart.setOption({
grid: {
left: 60,
right: 30,
top: 30,
bottom: 30
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
xAxis: {
type: 'category',
data: this.echartXData
},
yAxis: {
type: 'value'
},
series: [{
data: this.echartYData,
type: 'line'
}]
})
},
// 请求烘干室温度趋势图表数据
getTemperatureLineGraphEchartData () {
let queryParams = { beginTime: this.startTime, endTime: this.endTime, equipCode: this.equipCode }
this.$fetch('drying-room-temp-controller/temp-get', queryParams).then(res => {
for (let item of res) {
this.echartXData.push(this.formatTime(item.createTime, 'HH:mm'))
this.echartYData.push(item.temperature)
}
// 渲染echarts图表
this.renderEcharts()
})
},
// 时间日期格式化
formatTime (time, format) {
if (time !== null && time !== '') {
return Moment(time).format(format)
} else {
return '暂无'
}
}
}
}
</script>
<style lang="scss" scoped>
#temperatureLineGraph {
margin: 0 auto;
height: 300px;
width: 607px;
}
</style>
\ No newline at end of file
src/views/DryingRoomChart/list.vue
View file @ 6098f48c
......@@ -5,22 +5,209 @@
<span class="page-title-text">烘干室温度</span>
</div>
<div class="float-right page-refresh">
<span class="pointer">
<span class="pointer" @click="refresh()">
<svg-icon icon-class="refresh"></svg-icon>
<span class="ml-10">刷新</span>
</span>
</div>
</div>
<div class="search-pack">
<el-row>
<el-col :span="8">
<div class="grid-content pl-10 pr-10">
<span>设备编号：</span>
<el-input
v-model="equipCodetValue"
clearable
placeholder="请输入内容"
size="small">
</el-input>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content pl-10 pr-10">
<span>时间：</span>
<el-date-picker
clearable
v-model="beginTime"
size="small"
type="date"
placeholder="请选择日期">
</el-date-picker>
</div>
</el-col>
<el-col :span="8">
<div class="grid-content pl-10">
<el-button @click="searchClick" type="primary" size="mini">搜索</el-button>
<el-button @click="resetClick" class="reset" size="mini">重置</el-button>
</div>
</el-col>
</el-row>
</div>
<div class="general-list-main-pack pl-15 pr-15 pb-15">
<div>
<Table
:tableConfig="tableConfig"
@onPageSizeChange="onPageSizeChange"
@onCurrentPageChange="onCurrentPageChange">
<template slot="beginTime">
<el-table-column
label="开始时间"
width="150">
<template slot-scope="scope">
{{ formatTime(scope.row.beginTime, 'YYYY-MM-DD') }}
</template>
</el-table-column>
</template>
<template slot="endTime">
<el-table-column
label="结束时间"
width="150">
<template slot-scope="scope">
{{ formatTime(scope.row.endTime, 'YYYY-MM-DD') }}
</template>
</el-table-column>
</template>
<template slot="operationColumn">
<el-table-column
label="操作"
width="55">
<template slot-scope="scope">
<el-button
type="text"
@click="ViewtemperatureClick(scope.row)">
查看
</el-button>
</template>
</el-table-column>
</template>
</Table>
</div>
</div>
<!-- 查看弹窗 -->
<ViewDialog
ref="ViewDialog"
:startTime = "propStartTime"
:endTime = "propEndTime"
:equipCode = "propEquipCode"
></ViewDialog>
</div>
</template>
<script>
import Moment from 'moment'
import Table from '@/components/Table'
import Search from '@/components/Search'
import ViewDialog from './components/ViewDialog'
export default {
name: 'dryingRoomChart',
components: {
Table,
Search,
ViewDialog
},
data () {
return {}
return {
// 开始时间
propStartTime: '',
//结束时间
propEndTime: '',
// 设备编号
propEquipCode: '',
// 搜索组件输入框输入内容
equipCodetValue: '',
// 搜索条件时间字段
beginTime: '',
// 搜索组件关键字列表
searchList: {},
// 表格配置项
tableConfig: {
height: 0,
data: [],
fieldList: [
{ label: '设备名称', value: 'alias' },
{ label: '设备编号', value: 'equipCode' },
{ label: '开始时间', value: 'beginTime', slot: 'beginTime' },
{ label: '结束时间', value: 'endTime', slot: 'endTime' }
],
paginationToggle: true,
paginationConfig: {
total: 0,
currentPage: 1,
pageSize: 20
}
}
}
},
mounted () {
setTimeout(() => {
this.tableConfig.height = document.querySelector('.page-pack').offsetHeight - 175;
this.getTemperatureList();
}, 0)
},
methods: {
// 时间日期格式化
formatTime (time, format) {
if (time !== null && time !== '') {
return Moment(time).format(format)
} else {
return '暂无'
}
},
// 点击搜索按钮
searchClick () {
this.getTemperatureList();
},
// 重置按钮
resetClick () {
this.equipCodetValue = '';
this.beginTime = '';
this.tableConfig.paginationConfig.currentPage = 1;
this.tableConfig.paginationConfig.pageSize = 20;
this.getTemperatureList();
},
// 刷新
refresh () {
this.getTemperatureList().then((res) => {
this.$message.success('刷新成功！');
})
},
// 查看
ViewtemperatureClick (row) {
this.$refs.ViewDialog.dialogVisible = true
this.propStartTime = this.formatTime(row.beginTime, 'YYYY-MM-DD HH:mm:ss')
this.propEndTime = this.formatTime(row.endTime, 'YYYY-MM-DD HH:mm:ss')
this.propEquipCode = row.equipCode;
},
// 页数数量配置发生改变
onPageSizeChange () {
this.tableConfig.paginationConfig.currentPage = 1
this.tableConfig.paginationConfig.pageSize = pageSize
this.getTemperatureList()
},
// 当前页发生跳转
onCurrentPageChange () {
this.tableConfig.paginationConfig.currentPage = currentPage
this.getTemperatureList()
},
// 获取温度状态列表
getTemperatureList () {
return new Promise((resolve, reject) => {
let params = {
pageSize: this.tableConfig.paginationConfig.pageSize,
pageNum: this.tableConfig.paginationConfig.currentPage,
equipCode: this.equipCodetValue,
beginTime: this.beginTime
};
this.$fetch('drying-room-temp-controller/equipPage-get', params).then(res => {
this.tableConfig.data = _.cloneDeep(res.list)
this.tableConfig.paginationConfig.total = _.cloneDeep(res.total)
resolve(res);
}).catch((res) => {
reject(res);
})
})
}
}
}
</script>
......@@ -40,6 +227,29 @@
border-bottom: 1px solid #d2d3d5;
}
.search-pack {
padding-top: 16px;
padding-bottom: 16px;
.grid-content {
min-height: 36px;
margin-bottom: 10px;
display: flex;
align-items: center;
span {
display: inline-block;
width: 175px;
font-size: 14px;
white-space: nowrap;
text-align: right;
overflow: hidden;
text-overflow: ellipsis;
}
/deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner {
width: 100% !important;
}
}
}
.tool-pack {
padding-top: 16px;
padding-bottom: 16px;
......@@ -106,5 +316,9 @@
}
}
}
.view {
color: #1284fa;
cursor: pointer;
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment