<template>
<div class="app-container">
<div class="box-card">
<div class="top-title">
<span class="line"></span >
<span class="title-text">历史记录</span>
</div>
<el-form
:model="queryParams"
size="small"
:inline="true"
label-width="80px"
class="searchform"
>
<el-form-item label="设备名称:" prop="equipmentName">
<el-select
v-model="queryParams.equipmentName"
clearable
placeholder="请选择设备"
>
<el-option
v-for="item in selectList"
:key="item.value"
:label="item.name"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="时间:" prop="time">
<el-date-picker
:default-time="['00:00:00', '23:59:59']"
style="width: 350px !important;"
v-model="queryParams.time"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
clearable
value-format="yyyy-MM-dd HH:mm:ss"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
@click="toSearch"
style="margin-left: 20px;"
>搜索</el-button>
</el-form-item>
<el-form-item>
<el-button
type="info"
icon="el-icon-setting"
@click="resetTable"
style="margin-left: 20px;"
>重置</el-button>
</el-form-item>
</el-form>
<el-table :data="dmList" height="255">
<el-table-column label="序号" align="center" width="60" type="index"/>
<el-table-column label="设备名称" align="center" prop="equipmentName" />
<el-table-column label="监测点位" align="center" prop="monitoringPoint" />
<el-table-column label="振动监测值(mm)" align="center" prop="value" />
<el-table-column label="监测时间" align="center" prop="jctime" />
<el-table-column align="center" prop="ifbj" label="报警状态">
<template slot-scope="scope">
<span v-if="scope.row.ifbj==='正常'" style="color:#02d808;">
<i class="el-icon-message-solid icolor" style="color:#02d808"></i>
{{scope.row.ifbj}}
</span>
<span v-else style="color: #f21616;">
<i class="el-icon-message-solid icolor" style="color:#f21616"></i>
{{scope.row.ifbj}}
</span>
</template>
</el-table-column>
</el-table>
<el-pagination
style="padding:10px 1px 10px 0px;margin-left:20px;"
:page-sizes="[10, 20, 30, 40]"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@pagination="allData"
/>
</div>
<div class="box-chart">
<div class="top-title">
<span class="line"></span >
<span class="title-text">振动监测图表</span>
</div>
<el-form
:model="querychart"
size="small"
:inline="true"
label-width="80px"
class="searchform"
>
<el-form-item label="设备名称:" prop="equipmentName">
<el-select
v-model="querychart.equipmentName"
clearable
placeholder="请选择设备"
>
<el-option
v-for="item in selectList"
:key="item.value"
:label="item.name"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="时间:" prop="time">
<el-date-picker
:default-time="['00:00:00', '23:59:59']"
style="width: 350px !important;"
v-model="querychart.time"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
clearable
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="{shortcuts: shortcuts}"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
@click="searchChart($event)"
style="margin-left: 20px;"
>搜索</el-button>
</el-form-item>
</el-form>
<div class='chart' id='chart'></div>
</div>
</div>
</template>
<script>
import {tableList,searchSb,reqChart} from "@/api/monitor/server";
import * as echarts from "echarts";
import { parseTime } from "../../utils/index.js";
export default {
data() {
return {
// 总条数
total: 0,
dmList: [],
selectList:[],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询表格参数
queryParams: {
pageNum: 1,
pageSize: 10,
equipmentName: null,
time:null
},
querychart: {
equipmentName: null,
time:null
},
chartData:{}
};
},
mounted(){
const now = new Date();
const oneMonthBefore = new Date(now - 30 * 24 * 60 * 60 * 1000);
this.querychart.time = [oneMonthBefore, now]; // 设置日期范围为最近一个月
this.searchEqu();
this.allData();
this.drawChart();
this.$watermark.set(" ",this.$refs.content)
},
beforeDestroy() {
this.$watermark.set("",this.$refs.content);
},
computed: {
shortcuts() {
const now = new Date();
let yesterday = new Date();
const oneMonthBefore = new Date(now - 30 * 24 * 60 * 60 * 1000);
yesterday.setDate(yesterday.getDate() - 1);
}
},
methods: {
//设备名称下拉
searchEqu() {
var param ={
equipmentType:'振动监测'
}
searchSb(param).then((res) => {
var body = res.data||[];
this.selectList = body;
this.querychart.equipmentName = this.selectList[0].value;
this.searchChart({target:{value:this.querychart.equipmentName}})
});
},
//表格
allData() {
var param ={
pageNum:this.queryParams.pageNum,
pageSize: this.queryParams.pageSize
}
tableList(param).then((res) => {
var body = res.rows || [];
this.dmList = body;
this.total = res.total;
});
},
handleSizeChange(val) {
this.queryParams.pageSize =val;
this.toSearch()
},
handleCurrentChange(val) {
this.queryParams.pageNum = val;
this.toSearch()
},
toSearch() {
var param = this.queryParams;
if (this.queryParams.time instanceof Array) {
param.startTime = parseTime(new Date(this.queryParams.time[0]));
param.endTime = parseTime(new Date(this.queryParams.time[1]));
}
tableList(param).then((res) => {
var body = res.rows || [];
this.dmList = body;
this.total = res.total;
});
},
//表格重置
resetTable(){
this.queryParams={}
this.allData()
},
//图表
searchChart(event){
var params ={
equipmentName:this.querychart.equipmentName
}
if (this.querychart.time instanceof Array) {
params.startTime = parseTime(new Date(this.querychart.time[0]));
params.endTime = parseTime(new Date(this.querychart.time[1]));
}
reqChart(params).then((res) => {
var body = res.data||[];
this.chartData = body[0]||{}
this.drawChart()
});
},
drawChart () {
// 基于准备好的dom，初始化echarts实例
let chart = this.$echarts.init(document.getElementById('chart'))
// 监听屏幕变化自动缩放图表
window.addEventListener('resize', function () { chart.resize() })
chart.setOption({
color:['#55b5d1'],
// 设置图表的位置
grid: {
x: 60, // 左间距
y: 40, // 上间距
x2: 30, // 右间距
y2: 60, // 下间距
containLabel: true // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景
},
// dataZoom 组件 用于区域缩放
dataZoom: [
{
type: 'inside',
xAxisIndex: [0], // 设置 dataZoom-inside 组件控制的 x 轴
// 数据窗口范围的起始和结束百分比 范围: 0 ~ 100
start: 0,
end: 80
}
],
// 提示框组件
tooltip: {
trigger: 'axis', // 触发类型, axis: 坐标轴触发
axisPointer: {
type: 'line' // 指示器类型
},
textStyle: {
color: '#d5dbff' // 文字颜色
},
formatter: '时间: {b}<br/>设备名称: {a0}<br/>监测值: {c0} mm<br />'
},
// 图例组件
legend: {
top: 13, // 定位
right: 10,
textStyle: { // 文本样式
fontSize: 14,
fontWeight:400,
color: '#030303'
}
},
// X轴
xAxis: [
{
type: 'category',
// 坐标轴轴线
axisLine: {
show: true, // 是否显示坐标轴轴线 默认显示
lineStyle: {
type: 'dotted', // 坐标轴线线的类型 'solid', 'dashed', 'dotted'
width: 1, // 坐标轴线线宽, 不设置默认值为 1
color: '#cccccc' // 坐标轴线线的颜色
}
},
// 分隔线
splitLine: {
show: false,// 是否显示分隔线 默认数值轴显示
},
// 坐标轴刻度
axisTick: {
show: false,
interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
},
axisLabel: {
interval: 'auto', // 只显示最大和最小坐标
textStyle: {
show: true,
color: "#000000",
fontSize: "12",
}
},
// 类目名称
data: this.chartData.times||[]
}
],
yAxis: [
// 左侧Y轴
{
type: 'value', // 坐标轴类型, 'value' 数值轴，适用于连续数据
// 坐标轴在图表区域中的分隔线
name:"单位/mm",
splitLine: {
show: true, // 是否显示分隔线 默认数值轴显示
lineStyle: {
type:'dashed',// 分隔线颜色，可以设置成单个颜色。
color: '#d9d9d9'
}
},
// 坐标轴刻度
axisTick: {
show: false,
interval: 0, // 坐标轴刻度的显示间隔，在类目轴中有效。不设置时默认同 axisLabel.interval 一样。设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
inside: true, // 默认值false。true 表示坐标轴刻度朝内，false 表示坐标轴刻度朝外
},
// 坐标轴轴线。
axisLine: {
show: true, // 是否显示坐标轴轴线 默认显示
lineStyle: {
type: 'dotted', // 坐标轴线线的类型 'solid', 'dashed', 'dotted'
width: 1, // 坐标轴线线宽, 不设置默认值为 1
color: '#555555' // 坐标轴线线的颜色
}
},
axisLabel: {
show: true, // 是否显示刻度标签 默认显示
color: '#555555', // 刻度标签文字的颜色
fontSize: 12, // 文字的字体大小
margin: 10, // 刻度标签与轴线之间的距离 默认值 8
formatter: '{value}'
}
}
],
series : [
{
name: this.chartData.equipmentName,
type: 'line',
color:'#6495ed',
data: this.chartData.value||[],
smooth: true,
symbolSize: 6,
areaStyle: {},
itemStyle: {
borderWidth: 2,
},
},
]
})
}
}
};
</script>
<style rel="stylesheet/scss" lang="scss" scope>
.searchform{
width: 100%;
height: 40px;
background-color: #fff;
display: flex;
justify-content: flex-start;
align-items: center;
padding-left: 30px;
margin-bottom: 0.9375rem;
.el-form-item{
margin-bottom: 0px!important;
}
}
.resetting{
margin:20px 20px 20px 0px;
}
.el-table--scrollable-y .el-table__body-wrappe{
overflow-y: scroll!important;
}
.tableline{
width:50%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box-card {
width: 100%;
height: 25rem;
background-color: #fff;
.top-title {
width: 100%;
height: 50px;
display: flex;
justify-content: flex-start;
align-items:center;
padding-left: 20px;
.line {
width: 6px;
height: 22px;
background: #0d85f4;
}
.title-text{
font-size: 18px;
font-weight:bold;
color: #333333;
line-height: 30px;
padding-left: 10px;
}
}
}
.box-chart{
width: 100%;
height: 25rem;
background-color: #fff;
margin-top: 20px;
.top-title {
width: 100%;
height: 50px;
display: flex;
justify-content: flex-start;
align-items:center;
padding-left: 20px;
.line {
width: 6px;
height: 22px;
background: #0d85f4;
}
.title-text{
font-size: 18px;
font-weight:bold;
color: #333333;
line-height: 30px;
padding-left: 10px;
}
}
.chart{
width: 100%;
height: 85%!important;
}
}
</style>