|
|
@@ -3,12 +3,12 @@
|
|
|
<!-- 头部标题区域 -->
|
|
|
<div class="top-title-container u-flex-jac">
|
|
|
<div class="title-content">
|
|
|
- <span class="text" :data-attr="titleName">{{titleName}}</span>
|
|
|
+ <span class="text" :data-attr="titleName">{{ titleName }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 报警按钮 -->
|
|
|
<div class="alarm-btn u-flex-jac" @click="clickAlarmBtn">
|
|
|
- <div>故障<br/>报警</div>
|
|
|
+ <div>故障<br />报警</div>
|
|
|
</div>
|
|
|
<!-- 数据内容区域 -->
|
|
|
<div class="content-container u-flex">
|
|
|
@@ -71,33 +71,33 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <j-modal
|
|
|
- :title="title"
|
|
|
- :visible="visible"
|
|
|
- @cancel="curveClose"
|
|
|
- cancelText="关闭"
|
|
|
- class="u-modal-box">
|
|
|
- <div v-if="title==='全程曲线'" class="table-page-search-wrapper">
|
|
|
+ <j-modal :title="title" :visible="visible" @cancel="curveClose" cancelText="关闭" class="u-modal-box">
|
|
|
+ <div v-if="title === '全程曲线'" class="table-page-search-wrapper">
|
|
|
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
|
|
<a-row :gutter="24">
|
|
|
- <a-col :lg="18" :md="12" style="width:400px;">
|
|
|
+ <a-col :lg="18" :md="12" style="width: 400px">
|
|
|
<a-form-item label="试验开始时间">
|
|
|
- <j-date placeholder="请选择试验开始时间" v-model="queryParam.starttime" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
|
|
|
+ <j-date
|
|
|
+ placeholder="请选择试验开始时间"
|
|
|
+ v-model="queryParam.starttime"
|
|
|
+ :show-time="true"
|
|
|
+ date-format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
<a-col :lg="6" :md="12">
|
|
|
- <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
|
|
+ <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
|
|
|
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
|
|
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
|
|
</span>
|
|
|
</a-col>
|
|
|
-
|
|
|
</a-row>
|
|
|
</a-form>
|
|
|
</div>
|
|
|
- <yuzhi-curve v-if="title==='预制曲线'" :data="yuzhiData" :marks="yuzhiMarkData" ref="yuzhiCurveM"></yuzhi-curve>
|
|
|
- <real-time-curve v-if="title==='实时曲线'" :data="realTimeData"></real-time-curve>
|
|
|
- <full-curve-model v-if="title==='全程曲线'" :data="fullModelData" ref="fullCurveModel"></full-curve-model>
|
|
|
+ <yuzhi-curve v-if="title === '预制曲线'" :data="yuzhiData" :marks="yuzhiMarkData" ref="yuzhiCurveM"></yuzhi-curve>
|
|
|
+ <real-time-curve v-if="title === '实时曲线'" :data="realTimeData"></real-time-curve>
|
|
|
+ <full-curve-model v-if="title === '全程曲线'" :data="fullModelData" ref="fullCurveModel"></full-curve-model>
|
|
|
<template slot="footer">
|
|
|
<a-button @click="curveClose">关闭</a-button>
|
|
|
</template>
|
|
|
@@ -107,7 +107,7 @@
|
|
|
|
|
|
<script>
|
|
|
import commonTitle from './components/commonTitle.vue'
|
|
|
-import AlarmModalList from "./modules/AlarmModalList.vue";
|
|
|
+import AlarmModalList from './modules/AlarmModalList.vue'
|
|
|
import YuzhiCurve from './modules/YuzhiCurve.vue'
|
|
|
import RealTimeCurve from './modules/RealTimeCurve.vue'
|
|
|
import FullCurve from './modules/FullCurve.vue'
|
|
|
@@ -126,6 +126,8 @@ import Vue from 'vue'
|
|
|
import signMd5Utils from '@/utils/encryption/signMd5Utils'
|
|
|
import { axios } from '@/utils/request'
|
|
|
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
|
|
+import axios111 from 'axios'
|
|
|
+import moment from 'moment'
|
|
|
|
|
|
export default {
|
|
|
name: '',
|
|
|
@@ -144,7 +146,7 @@ export default {
|
|
|
TestInformation,
|
|
|
TestStatusInfo,
|
|
|
},
|
|
|
- data () {
|
|
|
+ data() {
|
|
|
return {
|
|
|
titleName: '高温高湿试验项目',
|
|
|
eqRealData: [],
|
|
|
@@ -158,25 +160,53 @@ export default {
|
|
|
title: '',
|
|
|
visible: false,
|
|
|
curveType: '',
|
|
|
+ // 设备状态
|
|
|
+ equipmentStatus: 1,
|
|
|
// 弹窗搜索
|
|
|
queryParam: {},
|
|
|
isFullWebSocket: true, // 判断：当搜索之后就不随websocket进行改变了
|
|
|
+ tagParams: {Tags: [
|
|
|
+ { Name: '运行方式设定' }, { Name: '设备状态' }, { Name: '试验运行时间' }, { Name: '全部循环设定值' },
|
|
|
+ { Name: '内部循环设定值' }, { Name: '全部循环运行值' }, { Name: '内部循环运行值' }, { Name: '预计结束时间' },
|
|
|
+ { Name: '内部循环1_启始段' }, { Name: '内部循环1_结束段' }, { Name: '内部循环1_次数' },
|
|
|
+ { Name: '内部循环2_启始段' }, { Name: '内部循环2_结束段' }, { Name: '内部循环2_次数' },
|
|
|
+ { Name: '内部循环3_启始段' }, { Name: '内部循环3_结束段' }, { Name: '内部循环3_次数' },
|
|
|
+ { Name: '内部循环4_启始段' }, { Name: '内部循环4_结束段' }, { Name: '内部循环4_次数' },
|
|
|
+ { Name: '总的运行段数' }, { Name: '总的设定段数' }, { Name: '当前运行程序号' }, { Name: '当前运行段号' },
|
|
|
+ { Name: '程序段运行时间' }, { Name: '程序段设定时间' }, { Name: '当前湿度值' }, { Name: '当前温度值' },
|
|
|
+ { Name: '温度输出率' }, { Name: '起始温度值' }, { Name: '温度设定值' }, { Name: '湿度输出率' },
|
|
|
+ { Name: '起始湿度值' }, { Name: '湿度设定值' }, { Name: '定值温度斜率值' },
|
|
|
+ { Name: 'A1压机吸气压力' }, { Name: 'A1压机排气压力' }, { Name: 'A2压机吸气压力' }, { Name: 'A2压机排气压力' },
|
|
|
+ { Name: 'B1压机吸气压力' }, { Name: 'B1压机排气压力' }, { Name: 'B2压机吸气压力' }, { Name: 'B2压机排气压力' },
|
|
|
+ { Name: 'C1压机吸气压力' }, { Name: 'C1压机排气压力' }, { Name: 'C2压机吸气压力' }, { Name: 'C2压机排气压力' },
|
|
|
+ { Name: 'D1压机吸气压力' }, { Name: 'D1压机排气压力' }, { Name: 'D2压机吸气压力' }, { Name: 'D2压机排气压力' },
|
|
|
+ { Name: 'E1压机吸气压力' }, { Name: 'E1压机排气压力' }, { Name: 'E2压机吸气压力' }, { Name: 'E2压机排气压力' },
|
|
|
+ { Name: 'F1压机吸气压力' }, { Name: 'F1压机排气压力' }, { Name: 'F2压机吸气压力' }, { Name: 'F2压机排气压力' },
|
|
|
+ { Name: 'G1压机吸气压力' }, { Name: 'G1压机排气压力' }, { Name: 'G2压机吸气压力' }, { Name: 'G2压机排气压力' },
|
|
|
+ { Name: 'H1压机吸气压力' }, { Name: 'H1压机排气压力' }, { Name: 'H2压机吸气压力' }, { Name: 'H2压机排气压力' },
|
|
|
+ { Name: 'I1压机吸气压力' }, { Name: 'I1压机排气压力' }, { Name: 'I2压机吸气压力' }, { Name: 'I2压机排气压力' },
|
|
|
+ { Name: 'J1压机吸气压力' }, { Name: 'J1压机排气压力' }, { Name: 'J2压机吸气压力' }, { Name: 'J2压机排气压力' },
|
|
|
+ { Name: '氧浓度1采集值' }, { Name: '氧浓度2采集值' }, { Name: '氧浓度3采集值' }, { Name: '氧浓度4采集值' },
|
|
|
+ { Name: '压差1采集值' }, { Name: '压差2采集值' }, { Name: '前风道鼓风变频器' }, { Name: '后风道鼓风变频器' }
|
|
|
+ ]}
|
|
|
}
|
|
|
},
|
|
|
- destroyed () {
|
|
|
- // 离开路由之后断开websocket连接
|
|
|
+ destroyed() {
|
|
|
+ // 离开路由之后断开websocket连接
|
|
|
this.websock.close()
|
|
|
},
|
|
|
- created () {
|
|
|
+ created() {
|
|
|
// 初始化websocket
|
|
|
this.initWebSocket()
|
|
|
// 数据获取
|
|
|
// this.getData()
|
|
|
// 打开当前页面即数据获取
|
|
|
- this.getDashBoardData();
|
|
|
- },
|
|
|
- mounted () {
|
|
|
+ this.getDashBoardData()
|
|
|
+
|
|
|
+ // 直接从webaccess获取数据，满足实时性要求
|
|
|
+ setTimeout(this.refreshData, 15000)
|
|
|
},
|
|
|
+ mounted() {},
|
|
|
methods: {
|
|
|
// getData(){
|
|
|
// getAction(`/datacoll/webaccess/getWATagValue`).then(res=>{
|
|
|
@@ -186,11 +216,11 @@ export default {
|
|
|
// }
|
|
|
// })
|
|
|
// },
|
|
|
- getInfo(url,parameter){
|
|
|
- let sign = signMd5Utils.getSign(url, parameter);
|
|
|
+ getInfo(url, parameter) {
|
|
|
+ let sign = signMd5Utils.getSign(url, parameter)
|
|
|
//将签名和时间戳，添加在请求接口 Header
|
|
|
// update-begin--author:taoyan---date:20220421--for: VUEN-410【签名改造】 X-TIMESTAMP牵扯
|
|
|
- let signHeader = {"X-Sign": sign,"X-TIMESTAMP": signMd5Utils.getTimestamp()};
|
|
|
+ let signHeader = { 'X-Sign': sign, 'X-TIMESTAMP': signMd5Utils.getTimestamp() }
|
|
|
// update-end--author:taoyan---date:20220421--for: VUEN-410【签名改造】 X-TIMESTAMP牵扯
|
|
|
|
|
|
return axios({
|
|
|
@@ -198,41 +228,43 @@ export default {
|
|
|
url: url,
|
|
|
method: 'get',
|
|
|
params: parameter,
|
|
|
- headers: signHeader
|
|
|
+ headers: signHeader,
|
|
|
})
|
|
|
},
|
|
|
- getDashBoardData(){
|
|
|
- this.getInfo(`/datacoll/webaccess/getDashBoardData`).then(res=>{
|
|
|
- const redata = JSON.parse(res.result)
|
|
|
- console.log(redata);
|
|
|
+ getDashBoardData() {
|
|
|
+ this.getInfo(`/datacoll/webaccess/getDashBoardData`).then((res) => {
|
|
|
+ const redata = JSON.parse(res.result);
|
|
|
+ // console.log("首次获取", redata);
|
|
|
this.initData(redata);
|
|
|
})
|
|
|
},
|
|
|
// 点击报警按钮触发弹窗
|
|
|
- clickAlarmBtn(){
|
|
|
+ clickAlarmBtn() {
|
|
|
this.$refs.alarmList.visible = true
|
|
|
this.$refs.alarmList.loadData()
|
|
|
},
|
|
|
// websocket
|
|
|
- initWebSocket () { // 初始化weosocket(必须)
|
|
|
+ initWebSocket() {
|
|
|
+ // 初始化weosocket(必须)
|
|
|
// 请根据实际项目需要进行修改
|
|
|
// var userId = store.getters.userInfo.id
|
|
|
// const wsuri = 'ws://127.0.0.1:8866/websocket'
|
|
|
// const wsuri = `ws://192.168.2.216:8866/websocket/${userId}`
|
|
|
// const wsuri = `ws://192.168.2.247:8866/websocket/${userId}`
|
|
|
// WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
|
|
|
- var userId = 'e9ca23d68d884d4ebb19d07889727dae'; // 免登录使用
|
|
|
+ var userId = 'f0019fdebedb443c98dcb17d88222c38' // 免登录使用
|
|
|
if (store && store.getters && store.getters.userInfo && store.getters.userInfo.id) {
|
|
|
- userId=store.getters.userInfo.id;
|
|
|
+ userId = store.getters.userInfo.id
|
|
|
}
|
|
|
- var wsuri = window._CONFIG['domianURL'].replace("https://","wss://").replace("http://","ws://")+"/websocket/"+userId;
|
|
|
- console.log("地址", wsuri)
|
|
|
+ var wsuri =
|
|
|
+ window._CONFIG['domianURL'].replace('https://', 'wss://').replace('http://', 'ws://') + '/websocket/' + userId
|
|
|
+ console.log('地址', wsuri)
|
|
|
// var wsuri = 'ws://192.168.2.247:8866/websocket';
|
|
|
// console.log(wsuri);
|
|
|
//update-begin-author:taoyan date:2022-4-22 for: v2.4.6 的 websocket 服务端，存在性能和安全问题。 #3278
|
|
|
let token = Vue.ls.get(ACCESS_TOKEN)
|
|
|
// 大屏免登录，去掉token
|
|
|
- this.websock = new WebSocket(wsuri);
|
|
|
+ this.websock = new WebSocket(wsuri)
|
|
|
// this.websock = new WebSocket(wsuri, [token]);
|
|
|
// 新建一个webstock对象
|
|
|
// this.websock = new WebSocket(wsuri)
|
|
|
@@ -242,30 +274,33 @@ export default {
|
|
|
this.websock.onclose = this.websocketclose
|
|
|
},
|
|
|
// 数据接收
|
|
|
- websocketonmessage (e) {
|
|
|
- console.log("-----接收消息-------",e);
|
|
|
+ websocketonmessage(e) {
|
|
|
+ console.log('-----接收消息-------', e)
|
|
|
const redata = JSON.parse(e.data)
|
|
|
- console.log(redata);
|
|
|
- this.initData(redata);
|
|
|
+ // console.log(redata)
|
|
|
+ this.initData(redata)
|
|
|
},
|
|
|
initData(redata) {
|
|
|
- console.log(66666,redata)
|
|
|
+ console.log(66666, redata)
|
|
|
// 接收数据之后操作
|
|
|
this.eqRealData = redata['设备实时值']
|
|
|
if (redata['设备实时值']) {
|
|
|
- var titleObj = redata['设备实时值'].find(item => item.Name === '试验名称')
|
|
|
- console.log('我要找名字',titleObj.Value)
|
|
|
- if(titleObj != -1){this.titleName = titleObj.Value}
|
|
|
- }
|
|
|
+ var titleObj = redata['设备实时值'].find((item) => item.Name === '试验名称')
|
|
|
+ // console.log('我要找名字', titleObj.Value)
|
|
|
+ if (titleObj && titleObj != -1) {
|
|
|
+ this.titleName = titleObj.Value
|
|
|
+ }
|
|
|
+ }
|
|
|
// this.curveData = redata['设备历史值'] // 原来第一版后端传数格式
|
|
|
- if(redata['预制曲线']) {
|
|
|
+ if (redata['预制曲线']) {
|
|
|
this.realTimeData = redata['实时曲线']
|
|
|
this.fullData = redata['全程曲线']
|
|
|
} else {
|
|
|
+ // console.log("实时曲线", this.realTimeData, redata['实时曲线'])
|
|
|
this.realTimeData = [...this.realTimeData, ...redata['实时曲线']]
|
|
|
this.fullData = [...this.fullData, ...redata['全程曲线']]
|
|
|
}
|
|
|
- if(this.isFullWebSocket){
|
|
|
+ if (this.isFullWebSocket) {
|
|
|
// this.fullModelData = redata['设备历史值'] // 原来第一版后端传数格式
|
|
|
if (redata['预制曲线']) {
|
|
|
this.fullModelData = redata['全程曲线']
|
|
|
@@ -279,49 +314,157 @@ export default {
|
|
|
// console.log('判断是否含有1',redata.hasOwnProperty('最近24H报警信息'))
|
|
|
// console.log('判断是否含有2',redata['最近24H报警信息'])
|
|
|
this.newAlarmData = redata.hasOwnProperty('最近24H报警信息') ? redata['最近24H报警信息'] : ['原数据']
|
|
|
- if(redata['预制曲线'] && redata['预制曲线'].length > 0) {this.yuzhiData = redata['预制曲线']}
|
|
|
- if(redata['预制曲线'] && redata['预制曲线线段'].length > 0) {this.yuzhiMarkData = redata['预制曲线线段']}
|
|
|
+ if (redata['预制曲线'] && redata['预制曲线'].length > 0) {
|
|
|
+ this.yuzhiData = redata['预制曲线']
|
|
|
+ }
|
|
|
+ if (redata['预制曲线'] && redata['预制曲线线段'].length > 0) {
|
|
|
+ this.yuzhiMarkData = redata['预制曲线线段']
|
|
|
+ }
|
|
|
// this.$refs.yuzhiCurve.markData = this.yuzhiMarkData
|
|
|
// var titleObj = redata['设备实时值'].find(item => item.Name === '试验名称')
|
|
|
// console.log(titleObj)
|
|
|
// this.titleName = titleObj ? titleObj.Value : '高温高湿试验项目'
|
|
|
},
|
|
|
// websocket连接后发送数据(send发送)
|
|
|
- websocketonopen () {
|
|
|
- console.log("WebSocket连接成功");
|
|
|
+ websocketonopen() {
|
|
|
+ console.log('WebSocket连接成功')
|
|
|
// let actions = {} // 请根据实际项目需要进行修改
|
|
|
// this.websocketsend()
|
|
|
},
|
|
|
// 数据发送
|
|
|
- websocketsend (d) {
|
|
|
+ websocketsend(d) {
|
|
|
this.websock.send(d)
|
|
|
console.log(d)
|
|
|
},
|
|
|
// 连接建立失败重连
|
|
|
- websocketonerror () {
|
|
|
+ websocketonerror() {
|
|
|
this.initWebSocket()
|
|
|
},
|
|
|
// 关闭
|
|
|
- websocketclose (e) {
|
|
|
+ websocketclose(e) {
|
|
|
console.log('断开连接', e)
|
|
|
this.initWebSocket()
|
|
|
},
|
|
|
// 点击循环时触发
|
|
|
- handleXunhuan(choose){
|
|
|
+ handleXunhuan(choose) {
|
|
|
this.$refs.yuzhiCurve.chooseXunhuan.circname = choose
|
|
|
// this.$refs.yuzhiCurveM.chooseXunhuan.circname = choose
|
|
|
},
|
|
|
+ // 刷新数据
|
|
|
+ refreshData() {
|
|
|
+ const instance = axios111.create({
|
|
|
+ baseURL: window._CONFIG['webaccessURL'] + '/WaWebService/Json', // 目标服务器的URL
|
|
|
+ timeout: 20000, // 请求超时时间
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'application/json',
|
|
|
+ Authorization: window._CONFIG['webaccessAUTHOR'],
|
|
|
+ },
|
|
|
+ })
|
|
|
+ instance
|
|
|
+ .post('/GetTagValue/瑞莱', this.tagParams)
|
|
|
+ .then((response) => {
|
|
|
+ this.initData(this.addExtraTagValues(response.data.Values))
|
|
|
+ console.log("为啥1")
|
|
|
+ setTimeout(this.refreshData, 1000)
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ // 处理错误
|
|
|
+ // console.error(error)
|
|
|
+ setTimeout(this.refreshData, 1000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 增加额外的参数
|
|
|
+ addExtraTagValues(values) {
|
|
|
+ var syyxsj, yjjssj, cxdsdsj, cxdyxsj, wdscl, sdscl = 0;
|
|
|
+ var realtimecurves = [];
|
|
|
+ var wholecurves = [];
|
|
|
+ var now = new Date();
|
|
|
+
|
|
|
+ for (var i = 0; i < values.length; i++) {
|
|
|
+ switch (values[i].Name) {
|
|
|
+ case '设备状态':
|
|
|
+ // 如果设备状态原来不是启动，现在改成启动，则刷新试验信息、预制曲线、实时曲线、全程曲线
|
|
|
+ if (this.equipmentStatus != 1 && parseInt(values[i].Value) == 1) {
|
|
|
+ this.equipmentStatus = parseInt(values[i].Value);
|
|
|
+ this.getDashBoardData();
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case '试验运行时间':
|
|
|
+ syyxsj = parseInt(values[i].Value);
|
|
|
+ break;
|
|
|
+ case '预计结束时间':
|
|
|
+ yjjssj = parseInt(values[i].Value);
|
|
|
+ break;
|
|
|
+ case '程序段设定时间':
|
|
|
+ cxdsdsj = parseInt(values[i].Value);
|
|
|
+ break;
|
|
|
+ case '程序段运行时间':
|
|
|
+ cxdyxsj = parseInt(values[i].Value);
|
|
|
+ break;
|
|
|
+ case '温度输出率':
|
|
|
+ wdscl = parseFloat(values[i].Value);
|
|
|
+ break;
|
|
|
+ case '湿度输出率':
|
|
|
+ sdscl = parseFloat(values[i].Value);
|
|
|
+ break;
|
|
|
+ case '当前温度值':
|
|
|
+ // console.log("当前温度值", values[i].Value)
|
|
|
+ realtimecurves.push({name: "温度实值-实时", subList: [{tagvalue: values[i].Value, transtime: moment(now).format('HH:mm:ss')}], type: "实时"})
|
|
|
+ wholecurves.push({name: "温度实值-全程", subList: [{tagvalue: values[i].Value, transtime: moment(now).format('MM-DD HH:mm:ss')}], type: "全程"})
|
|
|
+ break;
|
|
|
+ case '当前湿度值':
|
|
|
+ realtimecurves.push({name: "湿度实值-实时", subList: [{tagvalue: values[i].Value, transtime: moment(now).format('HH:mm:ss')}], type: "实时"})
|
|
|
+ wholecurves.push({name: "湿度实值-全程", subList: [{tagvalue: values[i].Value, transtime: moment(now).format('MM-DD HH:mm:ss')}], type: "全程"})
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ console.log("实时曲线", realtimecurves)
|
|
|
+ console.log("全程曲线", wholecurves)
|
|
|
+
|
|
|
+ // 试验进度：试验运行时间/(试验运行时间+预计结束时间)
|
|
|
+ var syjd = (syyxsj + yjjssj) == 0 ? 0 : parseFloat(syyxsj) / (parseFloat(syyxsj) + parseFloat(yjjssj));
|
|
|
+ values.push({Name: "试验进度", Value: syjd, Quality: 0});
|
|
|
+
|
|
|
+ // 预计结束时间-试验信息：“预计结束时间”给到的是时间段(s)：预计结束时间+本地时间=预计时间（显示月日时分）。
|
|
|
+ var yjjssj_syxx = new Date();
|
|
|
+ if (yjjssj != null) {
|
|
|
+ yjjssj_syxx.setSeconds(yjjssj_syxx.getSeconds() + yjjssj);
|
|
|
+ }
|
|
|
+ values.push({Name: "预计结束时间-试验信息", Value: moment(yjjssj_syxx).format('YYYY-MM-DD HH:mm:ss'), Quality: 0});
|
|
|
+
|
|
|
+ // 段余时间：程序段设定时间-程序段运行时间
|
|
|
+ values.push({Name: "段余时间", Value: cxdsdsj - cxdyxsj, Quality: 0});
|
|
|
+
|
|
|
+
|
|
|
+ // 段进度：(程序段设定时间（设定时间-秒） - 程序段运行时间（运行时间-秒） )/程序段设定时间（设定时间-秒）
|
|
|
+ var djd = cxdyxsj == 0 ? "0" : ((cxdsdsj - cxdyxsj) / cxdsdsj).toFixed(2);
|
|
|
+ values.push({Name: "段进度", Value: djd, Quality: 0});
|
|
|
+
|
|
|
+ // 斜率设定
|
|
|
+
|
|
|
+ // 升温/降温：温度输出率为0%-100%则是加热状态，-100%--0%则是降温状态
|
|
|
+ values.push({Name: "升温", Value: wdscl > 0 ? 1 : 0, Quality: 0});
|
|
|
+ values.push({Name: "降温", Value: wdscl < 0 ? 1 : 0, Quality: 0});
|
|
|
+
|
|
|
+ // 加湿/除湿：湿度输出率为0%-100%则是加湿状态，-100%--0%则是除湿状态
|
|
|
+ values.push({Name: "加湿", Value: sdscl > 0 ? 1 : 0, Quality: 0});
|
|
|
+ values.push({Name: "除湿", Value: sdscl < 0 ? 1 : 0, Quality: 0});
|
|
|
+
|
|
|
+ return {"设备实时值": values, "实时曲线": realtimecurves, "全程曲线": wholecurves};
|
|
|
+ },
|
|
|
// 弹窗
|
|
|
- showModal(title){
|
|
|
+ showModal(title) {
|
|
|
this.title = title
|
|
|
this.visible = true
|
|
|
// console.log('弹簧全程曲线赋值', this.$refs.fullCurve.data)
|
|
|
// this.fullModelData = this.$refs.fullCurve.data
|
|
|
},
|
|
|
- getSearchData(){
|
|
|
- getAction('/datacoll/webaccess/getQcqx', this.queryParam).then(res=>{
|
|
|
+ getSearchData() {
|
|
|
+ getAction('/datacoll/webaccess/getQcqx', this.queryParam).then((res) => {
|
|
|
console.log(res)
|
|
|
- if(res.success){
|
|
|
+ if (res.success) {
|
|
|
this.fullModelData = res.result
|
|
|
}
|
|
|
})
|
|
|
@@ -335,216 +478,216 @@ export default {
|
|
|
this.getSearchData()
|
|
|
this.isFullWebSocket = true
|
|
|
},
|
|
|
- curveClose(){
|
|
|
+ curveClose() {
|
|
|
this.isFullWebSocket = true
|
|
|
this.visible = false
|
|
|
this.queryParam = {}
|
|
|
this.fullModelData = this.fullData // 解除搜索数据状态，保证再次打开是全部数据状态
|
|
|
},
|
|
|
- }
|
|
|
+ },
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
- @import '~@/assets/less/uStyle.less';
|
|
|
- // 表单
|
|
|
- .ant-form{
|
|
|
- /deep/ .ant-form-item-label{
|
|
|
- label{
|
|
|
- color: #fff !important;
|
|
|
- }
|
|
|
- }
|
|
|
- /deep/ .ant-input{
|
|
|
- background: rgba(6,23,48,.5);
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- /deep/ .ant-btn-primary{
|
|
|
- background: transparent;
|
|
|
- // background: #0b2243d9;
|
|
|
- // border-color: #fff;
|
|
|
+@import '~@/assets/less/uStyle.less';
|
|
|
+// 表单
|
|
|
+.ant-form {
|
|
|
+ /deep/ .ant-form-item-label {
|
|
|
+ label {
|
|
|
+ color: #fff !important;
|
|
|
}
|
|
|
}
|
|
|
+ /deep/ .ant-input {
|
|
|
+ background: rgba(6, 23, 48, 0.5);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ /deep/ .ant-btn-primary {
|
|
|
+ background: transparent;
|
|
|
+ // background: #0b2243d9;
|
|
|
+ // border-color: #fff;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
|
|
<style lang="less">
|
|
|
- .visualization-container{
|
|
|
- width: 100%;
|
|
|
- height: 100vh;
|
|
|
- background: url('~@/assets/visualization/pageBg.png') no-repeat;
|
|
|
- background-size: cover;
|
|
|
- position: relative;
|
|
|
- // 头部标题区域
|
|
|
- .top-title-container{
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- // border: 1px solid #000;
|
|
|
- height: 80px;
|
|
|
- text-align: center;
|
|
|
- // line-height: 22px;
|
|
|
- .title-content{
|
|
|
- width: 700px;
|
|
|
- height: 100%;
|
|
|
- background: url('~@/assets/visualization/pageTitleBg.png') no-repeat center center;
|
|
|
- background-size: auto 100%;
|
|
|
- .text{
|
|
|
- font-size: 28px;
|
|
|
+.visualization-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ background: url('~@/assets/visualization/pageBg.png') no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ position: relative;
|
|
|
+ // 头部标题区域
|
|
|
+ .top-title-container {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ // border: 1px solid #000;
|
|
|
+ height: 80px;
|
|
|
+ text-align: center;
|
|
|
+ // line-height: 22px;
|
|
|
+ .title-content {
|
|
|
+ width: 700px;
|
|
|
+ height: 100%;
|
|
|
+ background: url('~@/assets/visualization/pageTitleBg.png') no-repeat center center;
|
|
|
+ background-size: auto 100%;
|
|
|
+ .text {
|
|
|
+ font-size: 28px;
|
|
|
+ color: transparent;
|
|
|
+ // font-weight: bold;
|
|
|
+ // 描边 变相加粗
|
|
|
+ -webkit-text-stroke: 0.4px;
|
|
|
+ letter-spacing: 0.15em;
|
|
|
+ text-shadow: 1px 2px 2px rgb(10, 37, 92);
|
|
|
+ // text-shadow: 1px 2px 2px rgba(10, 68, 134, .67);
|
|
|
+ position: relative;
|
|
|
+ font-family: '黑体';
|
|
|
+ // font-family: "宋体";
|
|
|
+ // font-family: serif;
|
|
|
+ // font-family: "楷体_GB2312";
|
|
|
+ &::before {
|
|
|
+ // content: attr(text); // div中设置了text=>相当于又写了一个标题覆盖在原来设置了阴影的文字上面
|
|
|
+ content: attr(data-attr);
|
|
|
+ position: absolute;
|
|
|
+ z-index: 10;
|
|
|
+ background-image: linear-gradient(to bottom, #ffffff, #8dd4f7);
|
|
|
+ // background-image: linear-gradient(to bottom, #ffffff, #7ed7fb);
|
|
|
+ -webkit-background-clip: text;
|
|
|
color: transparent;
|
|
|
- // font-weight: bold;
|
|
|
- // 描边 变相加粗
|
|
|
- -webkit-text-stroke: 0.4px;
|
|
|
- letter-spacing: .15em;
|
|
|
- text-shadow: 1px 2px 2px rgb(10, 37, 92);
|
|
|
- // text-shadow: 1px 2px 2px rgba(10, 68, 134, .67);
|
|
|
- position: relative;
|
|
|
- font-family: "黑体";
|
|
|
- // font-family: "宋体";
|
|
|
- // font-family: serif;
|
|
|
- // font-family: "楷体_GB2312";
|
|
|
- &::before{
|
|
|
- // content: attr(text); // div中设置了text=>相当于又写了一个标题覆盖在原来设置了阴影的文字上面
|
|
|
- content: attr(data-attr);
|
|
|
- position: absolute;
|
|
|
- z-index: 10;
|
|
|
- background-image: linear-gradient(to bottom, #ffffff, #8DD4F7);
|
|
|
- // background-image: linear-gradient(to bottom, #ffffff, #7ed7fb);
|
|
|
- -webkit-background-clip: text;
|
|
|
- color: transparent;
|
|
|
- // 去除集成父级样式
|
|
|
- text-shadow: none;
|
|
|
- }
|
|
|
+ // 去除集成父级样式
|
|
|
+ text-shadow: none;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- // 报警按钮
|
|
|
- .alarm-btn{
|
|
|
- position: absolute;
|
|
|
- top: 26px;
|
|
|
- left: calc(25% + 94px);
|
|
|
- width: 50px;
|
|
|
- height: 50px;
|
|
|
- background: url('~@/assets/visualization/alarm.png') no-repeat;
|
|
|
- background-size: contain;
|
|
|
- cursor: pointer;
|
|
|
+ }
|
|
|
+ // 报警按钮
|
|
|
+ .alarm-btn {
|
|
|
+ position: absolute;
|
|
|
+ top: 26px;
|
|
|
+ left: calc(25% + 94px);
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ background: url('~@/assets/visualization/alarm.png') no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ cursor: pointer;
|
|
|
+ z-index: 999;
|
|
|
+ div {
|
|
|
+ color: #20eef9;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 10px;
|
|
|
+ line-height: 12px;
|
|
|
+ font-style: italic;
|
|
|
+ padding-right: 3px;
|
|
|
+ padding-bottom: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 数据内容区域
|
|
|
+ .content-container {
|
|
|
+ height: 100%;
|
|
|
+ // padding: 60px 20px 20px;
|
|
|
+ // padding-top: 60px;
|
|
|
+ // padding-bottom: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .left-container {
|
|
|
+ width: 25%;
|
|
|
+ padding-left: 10px;
|
|
|
+ padding-right: 10px;
|
|
|
+ height: 100%;
|
|
|
z-index: 999;
|
|
|
- div{
|
|
|
- color: #20EEF9;
|
|
|
- text-align: center;
|
|
|
- font-size: 10px;
|
|
|
- line-height: 12px;
|
|
|
- font-style: italic;
|
|
|
- padding-right: 3px;
|
|
|
- padding-bottom: 2px;
|
|
|
+ .left-top-con {
|
|
|
+ height: 33.3%;
|
|
|
+ padding-top: 60px;
|
|
|
+ padding-bottom: 12px;
|
|
|
+ }
|
|
|
+ .left-center-con {
|
|
|
+ height: 33.3%;
|
|
|
+ padding-top: 6px;
|
|
|
+ padding-bottom: 6px;
|
|
|
+ }
|
|
|
+ .left-bottom-con {
|
|
|
+ height: 33.3%;
|
|
|
+ padding-top: 6px;
|
|
|
+ padding-bottom: 12px;
|
|
|
}
|
|
|
}
|
|
|
- // 数据内容区域
|
|
|
- .content-container{
|
|
|
+ .center-container {
|
|
|
+ width: 50%;
|
|
|
height: 100%;
|
|
|
- // padding: 60px 20px 20px;
|
|
|
- // padding-top: 60px;
|
|
|
- // padding-bottom: 20px;
|
|
|
- box-sizing: border-box;
|
|
|
- .left-container{
|
|
|
- width: 25%;
|
|
|
- padding-left: 10px;
|
|
|
- padding-right: 10px;
|
|
|
- height: 100%;
|
|
|
- z-index: 999;
|
|
|
- .left-top-con{
|
|
|
- height: 33.3%;
|
|
|
- padding-top: 60px;
|
|
|
- padding-bottom: 12px;
|
|
|
- }
|
|
|
- .left-center-con{
|
|
|
- height: 33.3%;
|
|
|
- padding-top: 6px;
|
|
|
- padding-bottom: 6px;
|
|
|
- }
|
|
|
- .left-bottom-con{
|
|
|
- height: 33.3%;
|
|
|
- padding-top: 6px;
|
|
|
- padding-bottom: 12px;
|
|
|
- }
|
|
|
+ padding-left: 10px;
|
|
|
+ padding-right: 10px;
|
|
|
+ .important {
|
|
|
+ width: 100%;
|
|
|
+ height: 66.7%;
|
|
|
+ // text-align: center;
|
|
|
+ // line-height: 500px;
|
|
|
}
|
|
|
- .center-container{
|
|
|
- width: 50%;
|
|
|
- height: 100%;
|
|
|
- padding-left: 10px;
|
|
|
- padding-right: 10px;
|
|
|
- .important{
|
|
|
- width: 100%;
|
|
|
- height: 66.7%;
|
|
|
- // text-align: center;
|
|
|
- // line-height: 500px;
|
|
|
- }
|
|
|
- .centen-bottom-con{
|
|
|
- height: 33.3%;
|
|
|
- padding-top: 6px;
|
|
|
- padding-bottom: 12px;
|
|
|
- .center-bottom-left{
|
|
|
- width: 50%;
|
|
|
- height: 100%;
|
|
|
- padding-right: 6px;
|
|
|
- }
|
|
|
- .center-bottom-right{
|
|
|
- width: 50%;
|
|
|
- height: 100%;
|
|
|
- padding-left: 6px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .right-container{
|
|
|
- width: 25%;
|
|
|
- padding-left: 10px;
|
|
|
- padding-right: 10px;
|
|
|
- .right-top-con{
|
|
|
- height: 33.3%;
|
|
|
- padding-top: 60px;
|
|
|
- padding-bottom: 6px;
|
|
|
- }
|
|
|
- .right-center-con{
|
|
|
- height: 33.3%;
|
|
|
- padding-top: 6px;
|
|
|
- padding-bottom: 6px;
|
|
|
+ .centen-bottom-con {
|
|
|
+ height: 33.3%;
|
|
|
+ padding-top: 6px;
|
|
|
+ padding-bottom: 12px;
|
|
|
+ .center-bottom-left {
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+ padding-right: 6px;
|
|
|
}
|
|
|
- .right-bottom-con{
|
|
|
- height: 33.3%;
|
|
|
- padding-top: 6px;
|
|
|
- padding-bottom: 12px;
|
|
|
+ .center-bottom-right {
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+ padding-left: 6px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .u-modal-box{
|
|
|
- .ant-modal{
|
|
|
- width: 100vw !important;
|
|
|
- height: 100vh !important;
|
|
|
- padding: 0 !important;
|
|
|
- margin: 0;
|
|
|
- top: 0;
|
|
|
- .ant-modal-close{
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- .ant-modal-header{
|
|
|
- background-color: rgba(5, 24, 61, .9) !important;
|
|
|
- border-bottom: none;
|
|
|
- .ant-modal-title{
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
+ .right-container {
|
|
|
+ width: 25%;
|
|
|
+ padding-left: 10px;
|
|
|
+ padding-right: 10px;
|
|
|
+ .right-top-con {
|
|
|
+ height: 33.3%;
|
|
|
+ padding-top: 60px;
|
|
|
+ padding-bottom: 6px;
|
|
|
}
|
|
|
- .ant-modal-content{
|
|
|
- border-radius: 0;
|
|
|
- height: 100%;
|
|
|
- background-color: rgba(5, 24, 61, .9) !important;
|
|
|
- // background-color: rgba(15, 57, 91, .94) !important;
|
|
|
- overflow: hidden;
|
|
|
+ .right-center-con {
|
|
|
+ height: 33.3%;
|
|
|
+ padding-top: 6px;
|
|
|
+ padding-bottom: 6px;
|
|
|
}
|
|
|
- .ant-modal-body{
|
|
|
- height: calc(100% - 55px - 53px);
|
|
|
+ .right-bottom-con {
|
|
|
+ height: 33.3%;
|
|
|
+ padding-top: 6px;
|
|
|
+ padding-bottom: 12px;
|
|
|
}
|
|
|
- .ant-modal-footer{
|
|
|
- border-top: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.u-modal-box {
|
|
|
+ .ant-modal {
|
|
|
+ width: 100vw !important;
|
|
|
+ height: 100vh !important;
|
|
|
+ padding: 0 !important;
|
|
|
+ margin: 0;
|
|
|
+ top: 0;
|
|
|
+ .ant-modal-close {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .ant-modal-header {
|
|
|
+ background-color: rgba(5, 24, 61, 0.9) !important;
|
|
|
+ border-bottom: none;
|
|
|
+ .ant-modal-title {
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
}
|
|
|
+ .ant-modal-content {
|
|
|
+ border-radius: 0;
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgba(5, 24, 61, 0.9) !important;
|
|
|
+ // background-color: rgba(15, 57, 91, .94) !important;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .ant-modal-body {
|
|
|
+ height: calc(100% - 55px - 53px);
|
|
|
+ }
|
|
|
+ .ant-modal-footer {
|
|
|
+ border-top: none;
|
|
|
+ }
|
|
|
}
|
|
|
+}
|
|
|
</style>
|
dongjh