Skip to content

G
gassafety
Commit b887097e authored by yaqizhang's avatar yaqizhang
Browse files
Options

实时数据，报警数据统计图测试

parent 024732ef
Hide whitespace changes
Inline Side-by-side
Showing with 100 additions and 49 deletions
gassafety-web/src/views/dataMonitoring/alarmdetail/index.vue
View file @ b887097e
......@@ -310,13 +310,14 @@ export default {
// 绘制图表
myChart1.setOption({
title: {
text: '标况流量、工况流量'
text: '标况流量、工况流量(前后一小时)'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['标况流量', '工况流量']
data: ['标况流量', '工况流量'],
right: 80,
},
xAxis: {
type: 'category',
......@@ -326,10 +327,11 @@ export default {
boundaryGap: false, //控制日期是否在中间显示
axisLabel: {
show: true, //是否显示日期
interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度
// interval: 0, //强制显示全部
rotate: 40,//倾斜的角度
textStyle: {
color: '#000', //日期的颜色
fontSize: 12 //字体的大小
fontSize: 10 //字体的大小
}
},
axisLine: {
......@@ -369,7 +371,7 @@ export default {
lineStyle: {
color: '#efc883' //折线的颜色
},
label: { show: true } //是否在折线点上显示数字
// label: { show: true } //是否在折线点上显示数字
}
}
},
......@@ -388,7 +390,7 @@ export default {
lineStyle: {
color: '#053B6A' //折线的颜色
},
label: { show: true } //是否在折线点上显示数字
// label: { show: true } //是否在折线点上显示数字
}
}
}
......@@ -401,13 +403,14 @@ export default {
// 绘制图表
myChart2.setOption({
title: {
text: '标况累积量、工况累积量'
text: '标况累积量、工况累积量(前后一小时)'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['标况累积量', '工况累积量']
data: ['标况累积量', '工况累积量'],
right: 80,
},
xAxis: {
type: 'category',
......@@ -416,10 +419,11 @@ export default {
boundaryGap: false, //控制日期是否在中间显示
axisLabel: {
show: true, //是否显示日期
interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度
// interval: 0, //强制显示全部
rotate: 40,//倾斜的角度
textStyle: {
color: '#000', //日期的颜色
fontSize: 12 //字体的大小
fontSize: 10 //字体的大小
}
},
axisLine: {
......@@ -458,7 +462,7 @@ export default {
lineStyle: {
color: '#efc883' //折线的颜色
},
label: { show: true } //是否在折线点上显示数字
// label: { show: true } //是否在折线点上显示数字
}
}
},
......@@ -476,7 +480,7 @@ export default {
lineStyle: {
color: '#053B6A' //折线的颜色
},
label: { show: true } //是否在折线点上显示数字
// label: { show: true } //是否在折线点上显示数字
}
}
}
......@@ -489,13 +493,14 @@ export default {
// 绘制图表
myChart3.setOption({
title: {
text: '温度'
text: '温度(前后一小时)'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['温度']
data: ['温度'],
right: 80,
},
xAxis: {
type: 'category',
......@@ -504,10 +509,11 @@ export default {
boundaryGap: false, //控制日期是否在中间显示
axisLabel: {
show: true, //是否显示日期
interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度
// interval: 0, //强制显示全部 //
rotate: 40,//倾斜的角度
textStyle: {
color: '#000', //日期的颜色
fontSize: 12 //字体的大小
fontSize: 10 //字体的大小
}
},
axisLine: {
......@@ -546,7 +552,7 @@ export default {
lineStyle: {
color: '#efc883' //折线的颜色
},
label: { show: true } //是否在折线点上显示数字
// label: { show: true } //是否在折线点上显示数字
}
}
}
......@@ -559,13 +565,14 @@ export default {
// 绘制图表
myChart4.setOption({
title: {
text: '压力'
text: '压力(前后一小时)'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['压力']
data: ['压力'],
right: 80,
},
xAxis: {
type: 'category',
......@@ -574,10 +581,11 @@ export default {
boundaryGap: false, //控制日期是否在中间显示
axisLabel: {
show: true, //是否显示日期
interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度
// interval: 0, //强制显示全部 //
rotate: 40,//倾斜的角度
textStyle: {
color: '#000', //日期的颜色
fontSize: 12 //字体的大小
fontSize: 10 //字体的大小
}
},
axisLine: {
......@@ -616,7 +624,7 @@ export default {
lineStyle: {
color: '#efc883' //折线的颜色
},
label: { show: true } //是否在折线点上显示数字
// label: { show: true } //是否在折线点上显示数字
}
}
}
......@@ -730,7 +738,7 @@ export default {
for (let i = 0; i < this.form.deviceReportDataList.length; i++) {
getData1.push(this.form.deviceReportDataList[i].standardConditionFlow)
getData2.push(this.form.deviceReportDataList[i].workingConditionFlow)
getData3.push(this.form.deviceReportDataList[i].reportTime)
getData3.push(this.dateFtt("hh:mm:ss",new Date(this.form.deviceReportDataList[i].reportTime)))
getData4.push(this.form.deviceReportDataList[i].standardConditionAccumulation)
getData5.push(this.form.deviceReportDataList[i].workingConditionAccumulation)
getData6.push(this.form.deviceReportDataList[i].temperature)
......@@ -758,6 +766,23 @@ export default {
}
});
},
dateFtt(fmt,date) { //author: meizz
var o = {
"M+" : date.getMonth()+1, //月份
"d+" : date.getDate(), //日
"h+" : date.getHours(), //小时
"m+" : date.getMinutes(), //分
"s+" : date.getSeconds(), //秒
"q+" : Math.floor((date.getMonth()+3)/3), //季度
"S" : date.getMilliseconds() //毫秒
};
if(/(y+)/.test(fmt))
fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
for(var k in o)
if(new RegExp("("+ k +")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
return fmt;
}
}
}
</script>
......
gassafety-web/src/views/dataMonitoring/realtimedetail/index.vue
View file @ b887097e
......@@ -44,7 +44,7 @@
<el-table :data="dataListdetail3" style="width: 100%;margin-top: 20px;">
<el-table-column label="温度(℃)" align="center" prop="temperature" />
<el-table-column label="压力(KPa)" align="center" prop="pressure" />
<el-table-column label="上报时间" align="center" prop="reportTime" />
<el-table-column label="上报时间" align="center" prop="createTime" />
<el-table-column label="设备状态" align="center" prop="deviceStatus">
</el-table-column>
</el-table>
......@@ -237,26 +237,29 @@
// 绘制图表
myChart1.setOption({
title: {
text: '标况流量、工况流量'
text: '标况流量、工况流量(近两小时)'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['标况流量', '工况流量']
data: ['标况流量', '工况流量'],
right: 80,
},
xAxis: {
type: 'category',
triggerEvent: true,
// data: this.dataX,
// data: ['23', '44', '77', '34', '56', '88', '38', '68', '55', '99', '44', '33'],
data: getData3,
boundaryGap: false, //控制日期是否在中间显示
axisLabel: {
show: true, //是否显示日期
interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度
interval: 'auto', //强制显示全部
rotate: 40,//倾斜的角度
textStyle: {
color: '#000', //日期的颜色
fontSize: 12 //字体的大小
fontSize: 10 //字体的大小
}
},
axisLine: {
......@@ -296,7 +299,7 @@
lineStyle: {
color: '#efc883' //折线的颜色
},
label: { show: true } //是否在折线点上显示数字
// label: { show: true } //是否在折线点上显示数字
}
}
},
......@@ -315,7 +318,7 @@
lineStyle: {
color: '#053B6A' //折线的颜色
},
label: { show: true } //是否在折线点上显示数字
// label: { show: true } //是否在折线点上显示数字
}
}
}
......@@ -332,13 +335,14 @@
// 绘制图表
myChart2.setOption({
title: {
text: '标况累积量、工况累积量'
text: '标况累积量、工况累积量(近两小时)'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['标况累积量', '工况累积量']
data: ['标况累积量', '工况累积量'],
right: 80,
},
xAxis: {
type: 'category',
......@@ -347,10 +351,11 @@
boundaryGap: false, //控制日期是否在中间显示
axisLabel: {
show: true, //是否显示日期
interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度
interval: 'auto', //强制显示全部
rotate: 40,//倾斜的角度
textStyle: {
color: '#000', //日期的颜色
fontSize: 12 //字体的大小
fontSize: 10 //字体的大小
}
},
axisLine: {
......@@ -389,7 +394,7 @@
lineStyle: {
color: '#efc883' //折线的颜色
},
label: { show: true } //是否在折线点上显示数字
// label: { show: true } //是否在折线点上显示数字
}
}
},
......@@ -407,7 +412,7 @@
lineStyle: {
color: '#053B6A' //折线的颜色
},
label: { show: true } //是否在折线点上显示数字
// label: { show: true } //是否在折线点上显示数字
}
}
}
......@@ -422,13 +427,14 @@
// 绘制图表
myChart3.setOption({
title: {
text: '温度'
text: '温度(近两小时)'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['温度']
data: ['温度'],
right: 80,
},
xAxis: {
type: 'category',
......@@ -437,10 +443,11 @@
boundaryGap: false, //控制日期是否在中间显示
axisLabel: {
show: true, //是否显示日期
interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度
// interval: 0, //强制显示全部
rotate: 40,//倾斜的角度
textStyle: {
color: '#000', //日期的颜色
fontSize: 12 //字体的大小
fontSize: 10 //字体的大小
}
},
axisLine: {
......@@ -479,7 +486,7 @@
lineStyle: {
color: '#efc883' //折线的颜色
},
label: { show: true } //是否在折线点上显示数字
// label: { show: true } //是否在折线点上显示数字
}
}
}
......@@ -494,13 +501,14 @@
// 绘制图表
myChart4.setOption({
title: {
text: '压力'
text: '压力(近两小时)'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['压力']
data: ['压力'],
right: 80,
},
xAxis: {
type: 'category',
......@@ -509,10 +517,11 @@
boundaryGap: false, //控制日期是否在中间显示
axisLabel: {
show: true, //是否显示日期
interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度
// interval: 0, //强制显示全部
rotate: 40,//倾斜的角度
textStyle: {
color: '#000', //日期的颜色
fontSize: 12 //字体的大小
fontSize: 10 //字体的大小
}
},
axisLine: {
......@@ -551,7 +560,7 @@
lineStyle: {
color: '#efc883' //折线的颜色
},
label: { show: true } //是否在折线点上显示数字
// label: { show: true } //是否在折线点上显示数字
}
}
}
......@@ -576,10 +585,10 @@
getData() {
getData(this.deviceId).then(response => {
const { deviceName, deviceCode, deviceType, standardConditionAccumulation,
workingConditionAccumulation, residualQuantity, standardConditionFlow, workingConditionFlow, temperature, pressure, reportTime, deviceStatus } = response.data;
workingConditionAccumulation, residualQuantity, standardConditionFlow, workingConditionFlow, temperature, pressure, createTime, deviceStatus } = response.data;
const obj1 = { deviceName, deviceCode, deviceType, standardConditionAccumulation };
const obj2 = { workingConditionAccumulation, residualQuantity, standardConditionFlow, workingConditionFlow };
const obj3 = { temperature, pressure, reportTime, deviceStatus };
const obj3 = { temperature, pressure, createTime, deviceStatus };
this.dataListdetail1.push(obj1);
this.dataListdetail2.push(obj2);
this.dataListdetail3.push(obj3);
......@@ -613,7 +622,7 @@
for (let i = 0; i < this.form.deviceReportDataList.length; i++) {
getData1.push( this.form.deviceReportDataList[i].standardConditionFlow)
getData2.push(this.form.deviceReportDataList[i].workingConditionFlow)
getData3.push(this.form.deviceReportDataList[i].reportTime)
getData3.push(this.dateFtt("hh:mm:ss",new Date(this.form.deviceReportDataList[i].createTime)))
getData4.push(this.form.deviceReportDataList[i].standardConditionAccumulation)
getData5.push(this.form.deviceReportDataList[i].workingConditionAccumulation)
getData6.push(this.form.deviceReportDataList[i].temperature)
......@@ -648,6 +657,23 @@
}
});
},
dateFtt(fmt,date) { //author: meizz
var o = {
"M+" : date.getMonth()+1, //月份
"d+" : date.getDate(), //日
"h+" : date.getHours(), //小时
"m+" : date.getMinutes(), //分
"s+" : date.getSeconds(), //秒
"q+" : Math.floor((date.getMonth()+3)/3), //季度
"S" : date.getMilliseconds() //毫秒
};
if(/(y+)/.test(fmt))
fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
for(var k in o)
if(new RegExp("("+ k +")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
return fmt;
}
}
}
......
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