Skip to content

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

折线图

parent 66a7235f
Hide whitespace changes
Inline Side-by-side
Showing with 92 additions and 207 deletions
gassafety-web/src/views/dataMonitoring/deviceAlarm/alarmdetail.vue
View file @ 4f258f39
...@@ -785,7 +785,9 @@ export default { ...@@ -785,7 +785,9 @@ export default {
this.dataListdetail1.push(obj1); this.dataListdetail1.push(obj1);
this.dataListdetail2.push(obj2); this.dataListdetail2.push(obj2);
this.dataListdetail3.push(obj3); this.dataListdetail3.push(obj3);
this.form = response.data; this.form = response.data;
console.log("this.form",this.form)
this.active = parseInt(response.data.orderStatus) + 1; this.active = parseInt(response.data.orderStatus) + 1;
if(this.form.deviceInfoList.length>0){ if(this.form.deviceInfoList.length>0){
this.gaoMap.resetMapCenter([this.form.deviceInfoList[0].longitude,this.form.deviceInfoList[0].latitude]); this.gaoMap.resetMapCenter([this.form.deviceInfoList[0].longitude,this.form.deviceInfoList[0].latitude]);
......
gassafety-web/src/views/dataMonitoring/realtimeData/index.vue
View file @ 4f258f39
...@@ -177,7 +177,7 @@ export default { ...@@ -177,7 +177,7 @@ export default {
this.$router.push({ this.$router.push({
path: '/realtimeData/realtimedetail', path: '/realtimeData/realtimedetail',
query:{ query:{
deviceReportDataId : row.deviceReportDataId deviceId : row.deviceId
} }
}) //带参跳转 }) //带参跳转
}, },
......
gassafety-web/src/views/dataMonitoring/realtimeData/realtimedetail.vue
View file @ 4f258f39
...@@ -50,15 +50,19 @@ ...@@ -50,15 +50,19 @@
</div> </div>
<div style="height: 320px;width: 100%;margin-top: 15px;padding: 10px;"> <div style="height: 320px;width: 100%;margin-top: 15px;padding: 10px;">
<div id="main1" style="float: left;width: 49.8%;height:300px;background-color: rgb(247 247 247);padding: 5px;"></div> <div id="main1" style="float: left;width: 49.8%;height:300px;background-color: rgb(247 247 247);padding: 5px;">
<div id="main2" style="float: right;width: 49.8%;height:300px;background-color: rgb(247 247 247);padding: 5px;"></div>
</div> </div>
<div id="main2" style="float: right;width: 49.8%;height:300px;background-color: rgb(247 247 247);padding: 5px;">
</div>
</div>
<div style="height: 320px;width: 100%;padding: 10px;"> <div style="height: 320px;width: 100%;padding: 10px;">
<div id="main3" style="float: left;width: 49.8%;height:300px;background-color: rgb(247 247 247);padding: 5px;"></div> <div id="main3" style="float: left;width: 49.8%;height:300px;background-color: rgb(247 247 247);padding: 5px;">
<div id="main4" style="float: right;width: 49.8%;height:300px;background-color: rgb(247 247 247);padding: 5px;"></div> </div>
<div id="main4" style="float: right;width: 49.8%;height:300px;background-color: rgb(247 247 247);padding: 5px;">
</div> </div>
</div>
</div> </div>
</div> </div>
...@@ -145,7 +149,7 @@ ...@@ -145,7 +149,7 @@
rules: { rules: {
}, },
active: 0, active: 0,
deviceReportDataId: "", deviceId: "",
showAndHide: false, showAndHide: false,
dataListdetail1: [], dataListdetail1: [],
dataListdetail2: [], dataListdetail2: [],
...@@ -156,7 +160,7 @@ ...@@ -156,7 +160,7 @@
created() { created() {
// 如果是跳转来的，则接受初始化参数 // 如果是跳转来的，则接受初始化参数
// this.user_id = this.$route.query.id; //详细信息页接收参数 // this.user_id = this.$route.query.id; //详细信息页接收参数
this.deviceReportDataId = this.$route.query.deviceReportDataId; this.deviceId = +this.$route.query.deviceId;
// this.getList(); // this.getList();
this.getDicts("t_order_status").then(response => { this.getDicts("t_order_status").then(response => {
this.typeOptions = response.data; this.typeOptions = response.data;
...@@ -170,10 +174,6 @@ ...@@ -170,10 +174,6 @@
let gaoMap = new gaodeMap("石家庄"); let gaoMap = new gaodeMap("石家庄");
this.gaoMap = gaoMap; this.gaoMap = gaoMap;
this.getData(); this.getData();
this.initData();
this.drawPieChart();
this.main3();
this.main4();
}, },
methods: { methods: {
getInspectorList() { getInspectorList() {
...@@ -243,39 +243,10 @@ ...@@ -243,39 +243,10 @@
// } // }
// myChart.setOption(option) // myChart.setOption(option)
// }, // },
initData() { initData(getData1, getData2, getData3) {
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
var myChart1 = echarts.init(document.getElementById('main1')); var myChart1 = echarts.init(document.getElementById('main1'));
// let that=this;
// var getData1 = [];
// var getData2 = [];
// METHOD.axiosGet(
// this,
// `/enterpriseInfo/getNumberByRegulation`,
// function(res) {
// if (res.code === 0) {
// //先进行赋值
// for(let i=0; i<res.data.result.length; i++) {
// var obj = new Object();
// var arr = new Object();
// // obj.name = res.data.result[i].name;
// // obj.value = res.data.result[i].number;
// obj.name = res.data.result[i].type;
// obj.value = res.data.result[i].number;
// arr = res.data.result[i].type;
// getData1[i] = obj;
// getData2[i] = arr;
// }
// myChart1.setOption({
// legend: {
// data: getData2,
// },
// series:[{
// data: getData1,
// }]
// })
// }
// });
// 绘制图表 // 绘制图表
myChart1.setOption({ myChart1.setOption({
...@@ -286,12 +257,13 @@ ...@@ -286,12 +257,13 @@
trigger: 'axis' trigger: 'axis'
}, },
legend: { legend: {
data: ['标况累积量', '工况累积量'] data: ['标况流量', '工况流量']
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
// 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,
boundaryGap: false, //控制日期是否在中间显示 boundaryGap: false, //控制日期是否在中间显示
axisLabel: { axisLabel: {
show: true, //是否显示日期 show: true, //是否显示日期
...@@ -325,8 +297,9 @@ ...@@ -325,8 +297,9 @@
series: [ series: [
{ {
// data: this.dataY, // data: this.dataY,
name: '工况累计量', name: '标况流量',
data: [820, 232, 901, 534, 1290, 330, 1320, 345, 654, 189, 980, 234], // data: [820, 232, 901, 534, 1290, 330, 1320, 345, 654, 189, 980, 234],
data: getData1,
type: 'line', type: 'line',
symbol: 'circle', //是否显示实心的折线圆点 symbol: 'circle', //是否显示实心的折线圆点
smooth: true, //让折线有弧度 smooth: true, //让折线有弧度
...@@ -343,8 +316,9 @@ ...@@ -343,8 +316,9 @@
}, },
{ {
// data: this.dataY, // data: this.dataY,
name: '工况累计量', name: '工况流量',
data: [500, 600, 700, 300, 1100, 130, 1200, 820, 932, 901, 934, 1290], // data: [500, 600, 700, 300, 1100, 130, 1200, 820, 932, 901, 934, 1290],
data: getData2,
type: 'line', type: 'line',
symbol: 'circle', //是否显示实心的折线圆点 symbol: 'circle', //是否显示实心的折线圆点
smooth: true, //让折线有弧度 smooth: true, //让折线有弧度
...@@ -363,45 +337,19 @@ ...@@ -363,45 +337,19 @@
}); });
}, },
drawPieChart() {
drawPieChart(getData4, getData5, getData3) {
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
var myChart2 = echarts.init(document.getElementById('main2')); var myChart2 = echarts.init(document.getElementById('main2'));
// let that=this;
// var getData1 = [];
// var getData2 = [];
// METHOD.axiosGet(
// this,
// `/enterpriseGoods/getNumberByEnterprise`,
// function(res) {
// if (res.code === 0) {
// //先进行赋值
// for(let i=0; i<res.data.result.length; i++) {
// var obj = new Object();
// var arr = new Object();
// // obj = res.data.result[i].number;
// // arr = res.data.result[i].type;
// obj = res.data.result[i].number;
// arr = res.data.result[i].name;
// getData1[i] = obj;
// getData2[i] = arr;
// }
// myChart2.setOption({
// xAxis: {
// data: getData2,
// },
// series:[{
// data: getData1,
// }]
// })
// }
// });
// 绘制图表 // 绘制图表
myChart2.setOption({ myChart2.setOption({
// color:['rgb(8,252,7)','rgb(255,168,0)','rgb(0,121,254)','rgb(0,255,251)','rgb(3,120,251)','rgb(0,200,251)'], // color:['rgb(8,252,7)','rgb(255,168,0)','rgb(0,121,254)','rgb(0,255,251)','rgb(3,120,251)','rgb(0,200,251)'],
xAxis: { xAxis: {
type: 'category', type: 'category',
// data: this.dataX, // data: this.dataX,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], data: getData3,
boundaryGap: false, //控制日期是否在中间显示 boundaryGap: false, //控制日期是否在中间显示
axisLabel: { axisLabel: {
show: true, //是否显示日期 show: true, //是否显示日期
...@@ -435,7 +383,7 @@ ...@@ -435,7 +383,7 @@
series: [ series: [
{ {
// data: this.dataY, // data: this.dataY,
data: [820, 932, 901, 934, 1290, 1330, 1320], data: getData4,
type: 'line', type: 'line',
symbol: 'circle', //是否显示实心的折线圆点 symbol: 'circle', //是否显示实心的折线圆点
smooth: true, //让折线有弧度 smooth: true, //让折线有弧度
...@@ -452,7 +400,7 @@ ...@@ -452,7 +400,7 @@
}, },
{ {
// data: this.dataY, // data: this.dataY,
data: [500, 600, 700, 300, 1100, 130, 1200], data: getData5,
type: 'line', type: 'line',
symbol: 'circle', //是否显示实心的折线圆点 symbol: 'circle', //是否显示实心的折线圆点
smooth: true, //让折线有弧度 smooth: true, //让折线有弧度
...@@ -470,46 +418,17 @@ ...@@ -470,46 +418,17 @@
] ]
}); });
}, },
main3() { main3(getData6, getData3) {
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
var myChart3 = echarts.init(document.getElementById('main3')); var myChart3 = echarts.init(document.getElementById('main3'));
// let that=this;
// var getData1 = [];
// var getData2 = [];
// METHOD.axiosGet(
// this,
// `/enterpriseInfo/getNumberByRegulation`,
// function(res) {
// if (res.code === 0) {
// //先进行赋值
// for(let i=0; i<res.data.result.length; i++) {
// var obj = new Object();
// var arr = new Object();
// // obj.name = res.data.result[i].name;
// // obj.value = res.data.result[i].number;
// obj.name = res.data.result[i].type;
// obj.value = res.data.result[i].number;
// arr = res.data.result[i].type;
// getData1[i] = obj;
// getData2[i] = arr;
// }
// myChart1.setOption({
// legend: {
// data: getData2,
// },
// series:[{
// data: getData1,
// }]
// })
// }
// });
// 绘制图表 // 绘制图表
myChart3.setOption({ myChart3.setOption({
xAxis: { xAxis: {
type: 'category', type: 'category',
// data: this.dataX, // data: this.dataX,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], data: getData3,
boundaryGap: false, //控制日期是否在中间显示 boundaryGap: false, //控制日期是否在中间显示
axisLabel: { axisLabel: {
show: true, //是否显示日期 show: true, //是否显示日期
...@@ -543,7 +462,7 @@ ...@@ -543,7 +462,7 @@
series: [ series: [
{ {
// data: this.dataY, // data: this.dataY,
data: [820, 932, 901, 934, 1290, 1330, 1320], data: getData6,
type: 'line', type: 'line',
symbol: 'circle', //是否显示实心的折线圆点 symbol: 'circle', //是否显示实心的折线圆点
smooth: true, //让折线有弧度 smooth: true, //让折线有弧度
...@@ -557,68 +476,21 @@ ...@@ -557,68 +476,21 @@
label: { show: true } //是否在折线点上显示数字 label: { show: true } //是否在折线点上显示数字
} }
} }
},
{
// data: this.dataY,
data: [500, 600, 700, 300, 1100, 130, 1200],
type: 'line',
symbol: 'circle', //是否显示实心的折线圆点
smooth: true, //让折线有弧度
symbolSize: 7, //折线圆点的大小
itemStyle: {
normal: {
color: '#053B6A', //折线点的颜色
lineStyle: {
color: '#053B6A' //折线的颜色
},
label: { show: true } //是否在折线点上显示数字
}
}
} }
] ]
}); });
}, },
main4() { main4(getData7, getData3) {
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
var myChart4 = echarts.init(document.getElementById('main4')); var myChart4 = echarts.init(document.getElementById('main4'));
// let that=this;
// var getData1 = [];
// var getData2 = [];
// METHOD.axiosGet(
// this,
// `/enterpriseInfo/getNumberByRegulation`,
// function(res) {
// if (res.code === 0) {
// //先进行赋值
// for(let i=0; i<res.data.result.length; i++) {
// var obj = new Object();
// var arr = new Object();
// // obj.name = res.data.result[i].name;
// // obj.value = res.data.result[i].number;
// obj.name = res.data.result[i].type;
// obj.value = res.data.result[i].number;
// arr = res.data.result[i].type;
// getData1[i] = obj;
// getData2[i] = arr;
// }
// myChart1.setOption({
// legend: {
// data: getData2,
// },
// series:[{
// data: getData1,
// }]
// })
// }
// });
// 绘制图表 // 绘制图表
myChart4.setOption({ myChart4.setOption({
xAxis: { xAxis: {
type: 'category', type: 'category',
// data: this.dataX, // data: this.dataX,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], data: getData3,
boundaryGap: false, //控制日期是否在中间显示 boundaryGap: false, //控制日期是否在中间显示
axisLabel: { axisLabel: {
show: true, //是否显示日期 show: true, //是否显示日期
...@@ -652,7 +524,7 @@ ...@@ -652,7 +524,7 @@
series: [ series: [
{ {
// data: this.dataY, // data: this.dataY,
data: [820, 932, 901, 934, 1290, 1330, 1320], data: getData7,
type: 'line', type: 'line',
symbol: 'circle', //是否显示实心的折线圆点 symbol: 'circle', //是否显示实心的折线圆点
smooth: true, //让折线有弧度 smooth: true, //让折线有弧度
...@@ -666,23 +538,6 @@ ...@@ -666,23 +538,6 @@
label: { show: true } //是否在折线点上显示数字 label: { show: true } //是否在折线点上显示数字
} }
} }
},
{
// data: this.dataY,
data: [500, 600, 700, 300, 1100, 130, 1200],
type: 'line',
symbol: 'circle', //是否显示实心的折线圆点
smooth: true, //让折线有弧度
symbolSize: 7, //折线圆点的大小
itemStyle: {
normal: {
color: '#053B6A', //折线点的颜色
lineStyle: {
color: '#053B6A' //折线的颜色
},
label: { show: true } //是否在折线点上显示数字
}
}
} }
] ]
}); });
...@@ -701,32 +556,57 @@ ...@@ -701,32 +556,57 @@
handleDownload(file) { handleDownload(file) {
console.log(file); console.log(file);
}, },
/** 查询工单基础信息列表 */
// getList() {
// this.loading = true;
// realtimeData(this.queryParams).then(response => {
// this.dataListdetail = response.rows;
// this.total = response.total;
// this.loading = false;
// console.log("this.dataListdetail",this.dataListdetail)
// });
// },
getData() { getData() {
getData(this.deviceReportDataId).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, reportTime, 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, reportTime, 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);
this.form = response.data;
var getData1 = [];
var getData2 = [];
var getData3 = [];
var getData4 = [];
var getData5 = [];
var getData6 = [];
var getData7 = [];
//先进行赋值
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)
getData4.push(this.form.deviceReportDataList[i].standardConditionAccumulation)
getData5.push(this.form.deviceReportDataList[i].workingConditionAccumulation)
getData6.push(this.form.deviceReportDataList[i].temperature)
getData7.push(this.form.deviceReportDataList[i].pressure)
}
this.initData(getData1, getData2, getData3);
this.drawPieChart(getData4, getData5, getData3);
this.main3(getData6, getData3);
this.main4(getData7, getData3);
console.log(this.form.deviceReportDataList)
console.log("getData1",getData1)
console.log("getData2",getData2)
console.log("getData3",getData3)
console.log("this.form.deviceReportDataList", this.form.deviceReportDataList)
this.active = parseInt(response.data.orderStatus) + 1; this.active = parseInt(response.data.orderStatus) + 1;
if (this.form.deviceInfoList.length > 0) { if (this.form.length > 0) {
this.gaoMap.resetMapCenter([this.form.deviceInfoList[0].longitude, this.form.deviceInfoList[0].latitude]); this.gaoMap.resetMapCenter([this.form[0].longitude, this.form[0].latitude]);
} }
for (var i = 0; i < this.form.deviceInfoList.length; i++) { for (var i = 0; i < this.form.length; i++) {
let obj = this.form.deviceInfoList[i]; let obj = this.form[i];
this.gaoMap.addMarker(DEVICE_TYPE.WORKORDER, obj) this.gaoMap.addMarker(DEVICE_TYPE.WORKORDER, obj)
} }
......
gassafety-web/src/views/deviceInspection/inspectionPlan/inspectiondetail.vue
View file @ 4f258f39
...@@ -252,19 +252,21 @@ export default { ...@@ -252,19 +252,21 @@ export default {
getInspectionPlan (){ getInspectionPlan (){
getInspectionPlan(this.planId).then(response =>{ getInspectionPlan(this.planId).then(response =>{
this.form = response.data; this.form = response.data;
console.log("this.form",this.form)
this.active = parseInt(response.data.orderStatus) + 1; this.active = parseInt(response.data.orderStatus) + 1;
if(this.form.deviceInfoList.length>0){ if(this.form.deviceList.length>0){
this.gaoMap.resetMapCenter([this.form.deviceInfoList[0].longitude,this.form.deviceInfoList[0].latitude]); this.gaoMap.resetMapCenter([this.form.deviceList[0].longitude,this.form.deviceList[0].latitude]);
} }
for(var i = 0; i < this.form.deviceInfoList.length; i++){ for(var i = 0; i < this.form.deviceList.length; i++){
let obj = this.form.deviceInfoList[i]; let obj = this.form.deviceList[i];
this.gaoMap.addMarker(DEVICE_TYPE.WORKORDER, obj) this.gaoMap.addMarker(DEVICE_TYPE.WORKORDER, obj)
} }
if(this.form.orderType == '1') { if(this.form.orderType == '1') {
// 获取设备列表树 // 获取设备列表树
let data = { let data = {
key1:this.form.deviceInfoList, key1:this.form.deviceList,
key2:this.form.pipeList key2:this.form.pipeList
}; };
deviceTree(data).then(response => { deviceTree(data).then(response => {
......
gassafety-web/src/views/workOrder/basicsInfo/detail.vue
View file @ 4f258f39
...@@ -394,6 +394,7 @@ export default { ...@@ -394,6 +394,7 @@ export default {
this.form = response.data; this.form = response.data;
this.active = parseInt(response.data.orderStatus) + 1; this.active = parseInt(response.data.orderStatus) + 1;
if(this.form.deviceInfoList.length>0){ if(this.form.deviceInfoList.length>0){
console.log("this.form.deviceInfoList",this.form.deviceInfoList)
this.gaoMap.resetMapCenter([this.form.deviceInfoList[0].longitude,this.form.deviceInfoList[0].latitude]); this.gaoMap.resetMapCenter([this.form.deviceInfoList[0].longitude,this.form.deviceInfoList[0].latitude]);
} }
for(var i = 0; i < this.form.deviceInfoList.length; i++){ for(var i = 0; i < this.form.deviceInfoList.length; i++){
......
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