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 { ...@@ -310,13 +310,14 @@ export default {
// 绘制图表 // 绘制图表
myChart1.setOption({ myChart1.setOption({
title: { title: {
text: '标况流量、工况流量' text: '标况流量、工况流量(前后一小时)'
}, },
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
}, },
legend: { legend: {
data: ['标况流量', '工况流量'] data: ['标况流量', '工况流量'],
right: 80,
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
...@@ -326,10 +327,11 @@ export default { ...@@ -326,10 +327,11 @@ export default {
boundaryGap: false, //控制日期是否在中间显示 boundaryGap: false, //控制日期是否在中间显示
axisLabel: { axisLabel: {
show: true, //是否显示日期 show: true, //是否显示日期
interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度 // interval: 0, //强制显示全部
rotate: 40,//倾斜的角度
textStyle: { textStyle: {
color: '#000', //日期的颜色 color: '#000', //日期的颜色
fontSize: 12 //字体的大小 fontSize: 10 //字体的大小
} }
}, },
axisLine: { axisLine: {
...@@ -369,7 +371,7 @@ export default { ...@@ -369,7 +371,7 @@ export default {
lineStyle: { lineStyle: {
color: '#efc883' //折线的颜色 color: '#efc883' //折线的颜色
}, },
label: { show: true } //是否在折线点上显示数字 // label: { show: true } //是否在折线点上显示数字
} }
} }
}, },
...@@ -388,7 +390,7 @@ export default { ...@@ -388,7 +390,7 @@ export default {
lineStyle: { lineStyle: {
color: '#053B6A' //折线的颜色 color: '#053B6A' //折线的颜色
}, },
label: { show: true } //是否在折线点上显示数字 // label: { show: true } //是否在折线点上显示数字
} }
} }
} }
...@@ -401,13 +403,14 @@ export default { ...@@ -401,13 +403,14 @@ export default {
// 绘制图表 // 绘制图表
myChart2.setOption({ myChart2.setOption({
title: { title: {
text: '标况累积量、工况累积量' text: '标况累积量、工况累积量(前后一小时)'
}, },
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
}, },
legend: { legend: {
data: ['标况累积量', '工况累积量'] data: ['标况累积量', '工况累积量'],
right: 80,
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
...@@ -416,10 +419,11 @@ export default { ...@@ -416,10 +419,11 @@ export default {
boundaryGap: false, //控制日期是否在中间显示 boundaryGap: false, //控制日期是否在中间显示
axisLabel: { axisLabel: {
show: true, //是否显示日期 show: true, //是否显示日期
interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度 // interval: 0, //强制显示全部
rotate: 40,//倾斜的角度
textStyle: { textStyle: {
color: '#000', //日期的颜色 color: '#000', //日期的颜色
fontSize: 12 //字体的大小 fontSize: 10 //字体的大小
} }
}, },
axisLine: { axisLine: {
...@@ -458,7 +462,7 @@ export default { ...@@ -458,7 +462,7 @@ export default {
lineStyle: { lineStyle: {
color: '#efc883' //折线的颜色 color: '#efc883' //折线的颜色
}, },
label: { show: true } //是否在折线点上显示数字 // label: { show: true } //是否在折线点上显示数字
} }
} }
}, },
...@@ -476,7 +480,7 @@ export default { ...@@ -476,7 +480,7 @@ export default {
lineStyle: { lineStyle: {
color: '#053B6A' //折线的颜色 color: '#053B6A' //折线的颜色
}, },
label: { show: true } //是否在折线点上显示数字 // label: { show: true } //是否在折线点上显示数字
} }
} }
} }
...@@ -489,13 +493,14 @@ export default { ...@@ -489,13 +493,14 @@ export default {
// 绘制图表 // 绘制图表
myChart3.setOption({ myChart3.setOption({
title: { title: {
text: '温度' text: '温度(前后一小时)'
}, },
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
}, },
legend: { legend: {
data: ['温度'] data: ['温度'],
right: 80,
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
...@@ -504,10 +509,11 @@ export default { ...@@ -504,10 +509,11 @@ export default {
boundaryGap: false, //控制日期是否在中间显示 boundaryGap: false, //控制日期是否在中间显示
axisLabel: { axisLabel: {
show: true, //是否显示日期 show: true, //是否显示日期
interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度 // interval: 0, //强制显示全部 //
rotate: 40,//倾斜的角度
textStyle: { textStyle: {
color: '#000', //日期的颜色 color: '#000', //日期的颜色
fontSize: 12 //字体的大小 fontSize: 10 //字体的大小
} }
}, },
axisLine: { axisLine: {
...@@ -546,7 +552,7 @@ export default { ...@@ -546,7 +552,7 @@ export default {
lineStyle: { lineStyle: {
color: '#efc883' //折线的颜色 color: '#efc883' //折线的颜色
}, },
label: { show: true } //是否在折线点上显示数字 // label: { show: true } //是否在折线点上显示数字
} }
} }
} }
...@@ -559,13 +565,14 @@ export default { ...@@ -559,13 +565,14 @@ export default {
// 绘制图表 // 绘制图表
myChart4.setOption({ myChart4.setOption({
title: { title: {
text: '压力' text: '压力(前后一小时)'
}, },
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
}, },
legend: { legend: {
data: ['压力'] data: ['压力'],
right: 80,
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
...@@ -574,10 +581,11 @@ export default { ...@@ -574,10 +581,11 @@ export default {
boundaryGap: false, //控制日期是否在中间显示 boundaryGap: false, //控制日期是否在中间显示
axisLabel: { axisLabel: {
show: true, //是否显示日期 show: true, //是否显示日期
interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度 // interval: 0, //强制显示全部 //
rotate: 40,//倾斜的角度
textStyle: { textStyle: {
color: '#000', //日期的颜色 color: '#000', //日期的颜色
fontSize: 12 //字体的大小 fontSize: 10 //字体的大小
} }
}, },
axisLine: { axisLine: {
...@@ -616,7 +624,7 @@ export default { ...@@ -616,7 +624,7 @@ export default {
lineStyle: { lineStyle: {
color: '#efc883' //折线的颜色 color: '#efc883' //折线的颜色
}, },
label: { show: true } //是否在折线点上显示数字 // label: { show: true } //是否在折线点上显示数字
} }
} }
} }
...@@ -730,7 +738,7 @@ export default { ...@@ -730,7 +738,7 @@ export default {
for (let i = 0; i < this.form.deviceReportDataList.length; i++) { for (let i = 0; i < this.form.deviceReportDataList.length; i++) {
getData1.push(this.form.deviceReportDataList[i].standardConditionFlow) getData1.push(this.form.deviceReportDataList[i].standardConditionFlow)
getData2.push(this.form.deviceReportDataList[i].workingConditionFlow) 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) getData4.push(this.form.deviceReportDataList[i].standardConditionAccumulation)
getData5.push(this.form.deviceReportDataList[i].workingConditionAccumulation) getData5.push(this.form.deviceReportDataList[i].workingConditionAccumulation)
getData6.push(this.form.deviceReportDataList[i].temperature) getData6.push(this.form.deviceReportDataList[i].temperature)
...@@ -758,6 +766,23 @@ export default { ...@@ -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> </script>
......
gassafety-web/src/views/dataMonitoring/realtimedetail/index.vue
View file @ b887097e
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
<el-table :data="dataListdetail3" style="width: 100%;margin-top: 20px;"> <el-table :data="dataListdetail3" style="width: 100%;margin-top: 20px;">
<el-table-column label="温度(℃)" align="center" prop="temperature" /> <el-table-column label="温度(℃)" align="center" prop="temperature" />
<el-table-column label="压力(KPa)" align="center" prop="pressure" /> <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 label="设备状态" align="center" prop="deviceStatus">
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -237,26 +237,29 @@ ...@@ -237,26 +237,29 @@
// 绘制图表 // 绘制图表
myChart1.setOption({ myChart1.setOption({
title: { title: {
text: '标况流量、工况流量' text: '标况流量、工况流量(近两小时)'
}, },
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
}, },
legend: { legend: {
data: ['标况流量', '工况流量'] data: ['标况流量', '工况流量'],
right: 80,
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
triggerEvent: true,
// data: this.dataX, // data: this.dataX,
// data: ['23', '44', '77', '34', '56', '88', '38', '68', '55', '99', '44', '33'], // data: ['23', '44', '77', '34', '56', '88', '38', '68', '55', '99', '44', '33'],
data: getData3, data: getData3,
boundaryGap: false, //控制日期是否在中间显示 boundaryGap: false, //控制日期是否在中间显示
axisLabel: { axisLabel: {
show: true, //是否显示日期 show: true, //是否显示日期
interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度 interval: 'auto', //强制显示全部
rotate: 40,//倾斜的角度
textStyle: { textStyle: {
color: '#000', //日期的颜色 color: '#000', //日期的颜色
fontSize: 12 //字体的大小 fontSize: 10 //字体的大小
} }
}, },
axisLine: { axisLine: {
...@@ -296,7 +299,7 @@ ...@@ -296,7 +299,7 @@
lineStyle: { lineStyle: {
color: '#efc883' //折线的颜色 color: '#efc883' //折线的颜色
}, },
label: { show: true } //是否在折线点上显示数字 // label: { show: true } //是否在折线点上显示数字
} }
} }
}, },
...@@ -315,7 +318,7 @@ ...@@ -315,7 +318,7 @@
lineStyle: { lineStyle: {
color: '#053B6A' //折线的颜色 color: '#053B6A' //折线的颜色
}, },
label: { show: true } //是否在折线点上显示数字 // label: { show: true } //是否在折线点上显示数字
} }
} }
} }
...@@ -332,13 +335,14 @@ ...@@ -332,13 +335,14 @@
// 绘制图表 // 绘制图表
myChart2.setOption({ myChart2.setOption({
title: { title: {
text: '标况累积量、工况累积量' text: '标况累积量、工况累积量(近两小时)'
}, },
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
}, },
legend: { legend: {
data: ['标况累积量', '工况累积量'] data: ['标况累积量', '工况累积量'],
right: 80,
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
...@@ -347,10 +351,11 @@ ...@@ -347,10 +351,11 @@
boundaryGap: false, //控制日期是否在中间显示 boundaryGap: false, //控制日期是否在中间显示
axisLabel: { axisLabel: {
show: true, //是否显示日期 show: true, //是否显示日期
interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度 interval: 'auto', //强制显示全部
rotate: 40,//倾斜的角度
textStyle: { textStyle: {
color: '#000', //日期的颜色 color: '#000', //日期的颜色
fontSize: 12 //字体的大小 fontSize: 10 //字体的大小
} }
}, },
axisLine: { axisLine: {
...@@ -389,7 +394,7 @@ ...@@ -389,7 +394,7 @@
lineStyle: { lineStyle: {
color: '#efc883' //折线的颜色 color: '#efc883' //折线的颜色
}, },
label: { show: true } //是否在折线点上显示数字 // label: { show: true } //是否在折线点上显示数字
} }
} }
}, },
...@@ -407,7 +412,7 @@ ...@@ -407,7 +412,7 @@
lineStyle: { lineStyle: {
color: '#053B6A' //折线的颜色 color: '#053B6A' //折线的颜色
}, },
label: { show: true } //是否在折线点上显示数字 // label: { show: true } //是否在折线点上显示数字
} }
} }
} }
...@@ -422,13 +427,14 @@ ...@@ -422,13 +427,14 @@
// 绘制图表 // 绘制图表
myChart3.setOption({ myChart3.setOption({
title: { title: {
text: '温度' text: '温度(近两小时)'
}, },
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
}, },
legend: { legend: {
data: ['温度'] data: ['温度'],
right: 80,
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
...@@ -437,10 +443,11 @@ ...@@ -437,10 +443,11 @@
boundaryGap: false, //控制日期是否在中间显示 boundaryGap: false, //控制日期是否在中间显示
axisLabel: { axisLabel: {
show: true, //是否显示日期 show: true, //是否显示日期
interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度 // interval: 0, //强制显示全部
rotate: 40,//倾斜的角度
textStyle: { textStyle: {
color: '#000', //日期的颜色 color: '#000', //日期的颜色
fontSize: 12 //字体的大小 fontSize: 10 //字体的大小
} }
}, },
axisLine: { axisLine: {
...@@ -479,7 +486,7 @@ ...@@ -479,7 +486,7 @@
lineStyle: { lineStyle: {
color: '#efc883' //折线的颜色 color: '#efc883' //折线的颜色
}, },
label: { show: true } //是否在折线点上显示数字 // label: { show: true } //是否在折线点上显示数字
} }
} }
} }
...@@ -494,13 +501,14 @@ ...@@ -494,13 +501,14 @@
// 绘制图表 // 绘制图表
myChart4.setOption({ myChart4.setOption({
title: { title: {
text: '压力' text: '压力(近两小时)'
}, },
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
}, },
legend: { legend: {
data: ['压力'] data: ['压力'],
right: 80,
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
...@@ -509,10 +517,11 @@ ...@@ -509,10 +517,11 @@
boundaryGap: false, //控制日期是否在中间显示 boundaryGap: false, //控制日期是否在中间显示
axisLabel: { axisLabel: {
show: true, //是否显示日期 show: true, //是否显示日期
interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度 // interval: 0, //强制显示全部
rotate: 40,//倾斜的角度
textStyle: { textStyle: {
color: '#000', //日期的颜色 color: '#000', //日期的颜色
fontSize: 12 //字体的大小 fontSize: 10 //字体的大小
} }
}, },
axisLine: { axisLine: {
...@@ -551,7 +560,7 @@ ...@@ -551,7 +560,7 @@
lineStyle: { lineStyle: {
color: '#efc883' //折线的颜色 color: '#efc883' //折线的颜色
}, },
label: { show: true } //是否在折线点上显示数字 // label: { show: true } //是否在折线点上显示数字
} }
} }
} }
...@@ -576,10 +585,10 @@ ...@@ -576,10 +585,10 @@
getData() { getData() {
getData(this.deviceId).then(response => { getData(this.deviceId).then(response => {
const { deviceName, deviceCode, deviceType, standardConditionAccumulation, 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 obj1 = { deviceName, deviceCode, deviceType, standardConditionAccumulation };
const obj2 = { workingConditionAccumulation, residualQuantity, standardConditionFlow, workingConditionFlow }; const obj2 = { workingConditionAccumulation, residualQuantity, standardConditionFlow, workingConditionFlow };
const obj3 = { temperature, pressure, reportTime, deviceStatus }; const obj3 = { temperature, pressure, createTime, deviceStatus };
this.dataListdetail1.push(obj1); this.dataListdetail1.push(obj1);
this.dataListdetail2.push(obj2); this.dataListdetail2.push(obj2);
this.dataListdetail3.push(obj3); this.dataListdetail3.push(obj3);
...@@ -613,7 +622,7 @@ ...@@ -613,7 +622,7 @@
for (let i = 0; i < this.form.deviceReportDataList.length; i++) { for (let i = 0; i < this.form.deviceReportDataList.length; i++) {
getData1.push( this.form.deviceReportDataList[i].standardConditionFlow) getData1.push( this.form.deviceReportDataList[i].standardConditionFlow)
getData2.push(this.form.deviceReportDataList[i].workingConditionFlow) 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) getData4.push(this.form.deviceReportDataList[i].standardConditionAccumulation)
getData5.push(this.form.deviceReportDataList[i].workingConditionAccumulation) getData5.push(this.form.deviceReportDataList[i].workingConditionAccumulation)
getData6.push(this.form.deviceReportDataList[i].temperature) getData6.push(this.form.deviceReportDataList[i].temperature)
...@@ -648,6 +657,23 @@ ...@@ -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