Skip to content

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

地图图标

parent 560ac275
Hide whitespace changes
Inline Side-by-side
Showing with 335 additions and 560 deletions
gassafety-web/src/views/dataMonitoring/deviceAlarm/alarmdetail.vue
View file @ e1a18efc
...@@ -213,10 +213,6 @@ export default { ...@@ -213,10 +213,6 @@ export default {
let gaoMap = new gaodeMap("石家庄"); let gaoMap = new gaodeMap("石家庄");
this.gaoMap = gaoMap; this.gaoMap = gaoMap;
// this.getDeviceAlarm(); // this.getDeviceAlarm();
this.initData();
this.drawPieChart();
this.main3();
this.main4();
}, },
methods: { methods: {
getInspectorList(){ getInspectorList(){
...@@ -227,510 +223,305 @@ export default { ...@@ -227,510 +223,305 @@ export default {
}); });
}, },
// getMap() { initData(getData1, getData2, getData3) {
// var myChart = this.$echarts.init(document.getElementById('map')) // 基于准备好的dom，初始化echarts实例
// let option = { var myChart1 = echarts.init(document.getElementById('main1'));
// xAxis: {
// type: 'category',
// // data: this.dataX, // 绘制图表
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], myChart1.setOption({
// boundaryGap: false, //控制日期是否在中间显示 title: {
// axisLabel: {
// show: true, //是否显示日期
// interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度
// textStyle: {
// color: '#000', //日期的颜色
// fontSize: 12 //字体的大小
// }
// },
// axisLine: {
// lineStyle: {
// color: '#ccc' // x轴的颜色
// }
// }
// },
// yAxis: {
// type: 'value',
// axisLabel: {
// formatter: '{value}',
// textStyle: {
// color: '#000' //数字的颜色
// },
// inside: false //控制数据是否在内侧还是外侧显示
// },
// axisLine: {
// lineStyle: {
// color: '#ccc' // 折线的颜色
// }
// }
// },
// series: [
// {
// // data: this.dataY,
// data: [820, 932, 901, 934, 1290, 1330, 1320],
// type: 'line',
// symbol: 'circle', //是否显示实心的折线圆点
// smooth: true, //让折线有弧度
// symbolSize: 7, //折线圆点的大小
// itemStyle: {
// normal: {
// color: '#efc883', //折线点的颜色
// lineStyle: {
// color: '#efc883' //折线的颜色
// },
// label: { show: true } //是否在折线点上显示数字
// }
// }
// }
// ]
// }
// myChart.setOption(option)
// },
initData() {
// 基于准备好的dom，初始化echarts实例
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({
title: {
text: '折线图堆叠' text: '折线图堆叠'
}, },
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
},
legend: {
data: ['标况累积量', '工况累积量']
},
xAxis: {
type: 'category',
// data: this.dataX,
data: ['23', '44', '77', '34', '56', '88', '38','68','55','99','44','33'],
boundaryGap: false, //控制日期是否在中间显示
axisLabel: {
show: true, //是否显示日期
interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度
textStyle: {
color: '#000', //日期的颜色
fontSize: 12 //字体的大小
}
}, },
axisLine: { legend: {
lineStyle: { data: ['标况流量', '工况流量']
color: '#ccc' // x轴的颜色
}
}
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value}',
textStyle: {
color: '#000' //数字的颜色
},
inside: false //控制数据是否在内侧还是外侧显示
}, },
axisLine: { xAxis: {
lineStyle: { type: 'category',
color: '#ccc' // 折线的颜色 // data: this.dataX,
} // data: ['23', '44', '77', '34', '56', '88', '38', '68', '55', '99', '44', '33'],
} data: getData3,
}, boundaryGap: false, //控制日期是否在中间显示
series: [ axisLabel: {
{ show: true, //是否显示日期
// data: this.dataY, interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度
name:'工况累计量', textStyle: {
data: [820, 232, 901, 534, 1290, 330, 1320, 345, 654, 189, 980, 234], color: '#000', //日期的颜色
type: 'line', fontSize: 12 //字体的大小
symbol: 'circle', //是否显示实心的折线圆点 }
smooth: true, //让折线有弧度 },
symbolSize: 7, //折线圆点的大小 axisLine: {
itemStyle: { lineStyle: {
normal: { color: '#ccc' // x轴的颜色
color: '#efc883', //折线点的颜色
lineStyle: {
color: '#efc883' //折线的颜色
},
label: { show: true } //是否在折线点上显示数字
} }
} }
}, },
{ yAxis: {
// data: this.dataY, type: 'value',
name:'工况累计量', axisLabel: {
data: [500, 600, 700, 300, 1100, 130, 1200, 820, 932, 901, 934, 1290], formatter: '{value}',
type: 'line', textStyle: {
symbol: 'circle', //是否显示实心的折线圆点 color: '#000' //数字的颜色
smooth: true, //让折线有弧度 },
symbolSize: 7, //折线圆点的大小 inside: false //控制数据是否在内侧还是外侧显示
itemStyle: { },
normal: { axisLine: {
color: '#053B6A', //折线点的颜色 lineStyle: {
lineStyle: { color: '#ccc' // 折线的颜色
color: '#053B6A' //折线的颜色
},
label: { show: true } //是否在折线点上显示数字
} }
} }
} },
] series: [
}); {
// data: this.dataY,
}, name: '标况流量',
drawPieChart(){ // data: [820, 232, 901, 534, 1290, 330, 1320, 345, 654, 189, 980, 234],
// 基于准备好的dom，初始化echarts实例 data: getData1,
var myChart2 = echarts.init(document.getElementById('main2')); type: 'line',
// let that=this; symbol: 'circle', //是否显示实心的折线圆点
// var getData1 = []; smooth: true, //让折线有弧度
// var getData2 = []; symbolSize: 7, //折线圆点的大小
// METHOD.axiosGet( itemStyle: {
// this, normal: {
// `/enterpriseGoods/getNumberByEnterprise`, color: '#efc883', //折线点的颜色
// function(res) { lineStyle: {
// if (res.code === 0) { color: '#efc883' //折线的颜色
// //先进行赋值 },
// for(let i=0; i<res.data.result.length; i++) { label: { show: true } //是否在折线点上显示数字
// 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({
// 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: {
type: 'category',
// data: this.dataX,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
boundaryGap: false, //控制日期是否在中间显示
axisLabel: {
show: true, //是否显示日期
interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度
textStyle: {
color: '#000', //日期的颜色
fontSize: 12 //字体的大小
}
},
axisLine: {
lineStyle: {
color: '#ccc' // x轴的颜色
}
}
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value}',
textStyle: {
color: '#000' //数字的颜色
},
inside: false //控制数据是否在内侧还是外侧显示
},
axisLine: {
lineStyle: {
color: '#ccc' // 折线的颜色
}
} }
}, }
series: [ },
{ {
// data: this.dataY, // data: this.dataY,
data: [820, 932, 901, 934, 1290, 1330, 1320], name: '工况流量',
type: 'line', // data: [500, 600, 700, 300, 1100, 130, 1200, 820, 932, 901, 934, 1290],
symbol: 'circle', //是否显示实心的折线圆点 data: getData2,
smooth: true, //让折线有弧度 type: 'line',
symbolSize: 7, //折线圆点的大小 symbol: 'circle', //是否显示实心的折线圆点
itemStyle: { smooth: true, //让折线有弧度
normal: { symbolSize: 7, //折线圆点的大小
color: '#efc883', //折线点的颜色 itemStyle: {
lineStyle: { normal: {
color: '#efc883' //折线的颜色 color: '#053B6A', //折线点的颜色
}, lineStyle: {
label: { show: true } //是否在折线点上显示数字 color: '#053B6A' //折线的颜色
} },
} 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 } //是否在折线点上显示数字
}
}
} }
] }
});
},
main3() {
// 基于准备好的dom，初始化echarts实例
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({
xAxis: {
type: 'category',
// data: this.dataX,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
boundaryGap: false, //控制日期是否在中间显示
axisLabel: {
show: true, //是否显示日期
interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度
textStyle: {
color: '#000', //日期的颜色
fontSize: 12 //字体的大小
} }
}, ]
axisLine: { });
lineStyle: {
color: '#ccc' // x轴的颜色 },
drawPieChart(getData4, getData5, getData3) {
// 基于准备好的dom，初始化echarts实例
var myChart2 = echarts.init(document.getElementById('main2'));
// 绘制图表
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)'],
xAxis: {
type: 'category',
// data: this.dataX,
data: getData3,
boundaryGap: false, //控制日期是否在中间显示
axisLabel: {
show: true, //是否显示日期
interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度
textStyle: {
color: '#000', //日期的颜色
fontSize: 12 //字体的大小
}
},
axisLine: {
lineStyle: {
color: '#ccc' // x轴的颜色
}
} }
} },
}, yAxis: {
yAxis: { type: 'value',
type: 'value', axisLabel: {
axisLabel: { formatter: '{value}',
formatter: '{value}', textStyle: {
textStyle: { color: '#000' //数字的颜色
color: '#000' //数字的颜色 },
inside: false //控制数据是否在内侧还是外侧显示
}, },
inside: false //控制数据是否在内侧还是外侧显示 axisLine: {
lineStyle: {
color: '#ccc' // 折线的颜色
}
}
}, },
axisLine: { series: [
lineStyle: { {
color: '#ccc' // 折线的颜色 // data: this.dataY,
data: getData4,
type: 'line',
symbol: 'circle', //是否显示实心的折线圆点
smooth: true, //让折线有弧度
symbolSize: 7, //折线圆点的大小
itemStyle: {
normal: {
color: '#efc883', //折线点的颜色
lineStyle: {
color: '#efc883' //折线的颜色
},
label: { show: true } //是否在折线点上显示数字
}
}
},
{
// data: this.dataY,
data: getData5,
type: 'line',
symbol: 'circle', //是否显示实心的折线圆点
smooth: true, //让折线有弧度
symbolSize: 7, //折线圆点的大小
itemStyle: {
normal: {
color: '#053B6A', //折线点的颜色
lineStyle: {
color: '#053B6A' //折线的颜色
},
label: { show: true } //是否在折线点上显示数字
}
}
} }
} ]
}, });
series: [ },
{ main3(getData6, getData3) {
// data: this.dataY, // 基于准备好的dom，初始化echarts实例
data: [820, 932, 901, 934, 1290, 1330, 1320], var myChart3 = echarts.init(document.getElementById('main3'));
type: 'line',
symbol: 'circle', //是否显示实心的折线圆点
smooth: true, //让折线有弧度 // 绘制图表
symbolSize: 7, //折线圆点的大小 myChart3.setOption({
itemStyle: { xAxis: {
normal: { type: 'category',
color: '#efc883', //折线点的颜色 // data: this.dataX,
lineStyle: { data: getData3,
color: '#efc883' //折线的颜色 boundaryGap: false, //控制日期是否在中间显示
}, axisLabel: {
label: { show: true } //是否在折线点上显示数字 show: true, //是否显示日期
interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度
textStyle: {
color: '#000', //日期的颜色
fontSize: 12 //字体的大小
}
},
axisLine: {
lineStyle: {
color: '#ccc' // x轴的颜色
} }
} }
}, },
{ yAxis: {
// data: this.dataY, type: 'value',
data: [500, 600, 700, 300, 1100, 130, 1200], axisLabel: {
type: 'line', formatter: '{value}',
symbol: 'circle', //是否显示实心的折线圆点 textStyle: {
smooth: true, //让折线有弧度 color: '#000' //数字的颜色
symbolSize: 7, //折线圆点的大小 },
itemStyle: { inside: false //控制数据是否在内侧还是外侧显示
normal: { },
color: '#053B6A', //折线点的颜色 axisLine: {
lineStyle: { lineStyle: {
color: '#053B6A' //折线的颜色 color: '#ccc' // 折线的颜色
},
label: { show: true } //是否在折线点上显示数字
} }
} }
}
]
});
},
main4() {
// 基于准备好的dom，初始化echarts实例
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({
xAxis: {
type: 'category',
// data: this.dataX,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
boundaryGap: false, //控制日期是否在中间显示
axisLabel: {
show: true, //是否显示日期
interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度
textStyle: {
color: '#000', //日期的颜色
fontSize: 12 //字体的大小
}
}, },
axisLine: { series: [
lineStyle: { {
color: '#ccc' // x轴的颜色 // data: this.dataY,
data: getData6,
type: 'line',
symbol: 'circle', //是否显示实心的折线圆点
smooth: true, //让折线有弧度
symbolSize: 7, //折线圆点的大小
itemStyle: {
normal: {
color: '#efc883', //折线点的颜色
lineStyle: {
color: '#efc883' //折线的颜色
},
label: { show: true } //是否在折线点上显示数字
}
}
} }
} ]
}, });
yAxis: {
type: 'value', },
axisLabel: { main4(getData7, getData3) {
formatter: '{value}', // 基于准备好的dom，初始化echarts实例
textStyle: { var myChart4 = echarts.init(document.getElementById('main4'));
color: '#000' //数字的颜色
// 绘制图表
myChart4.setOption({
xAxis: {
type: 'category',
// data: this.dataX,
data: getData3,
boundaryGap: false, //控制日期是否在中间显示
axisLabel: {
show: true, //是否显示日期
interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度
textStyle: {
color: '#000', //日期的颜色
fontSize: 12 //字体的大小
}
}, },
inside: false //控制数据是否在内侧还是外侧显示 axisLine: {
}, lineStyle: {
axisLine: { color: '#ccc' // x轴的颜色
lineStyle: { }
color: '#ccc' // 折线的颜色
} }
} },
}, yAxis: {
series: [ type: 'value',
{ axisLabel: {
// data: this.dataY, formatter: '{value}',
data: [820, 932, 901, 934, 1290, 1330, 1320], textStyle: {
type: 'line', color: '#000' //数字的颜色
symbol: 'circle', //是否显示实心的折线圆点 },
smooth: true, //让折线有弧度 inside: false //控制数据是否在内侧还是外侧显示
symbolSize: 7, //折线圆点的大小 },
itemStyle: { axisLine: {
normal: { lineStyle: {
color: '#efc883', //折线点的颜色 color: '#ccc' // 折线的颜色
lineStyle: {
color: '#efc883' //折线的颜色
},
label: { show: true } //是否在折线点上显示数字
} }
} }
}, },
{ series: [
// data: this.dataY, {
data: [500, 600, 700, 300, 1100, 130, 1200], // data: this.dataY,
type: 'line', data: getData7,
symbol: 'circle', //是否显示实心的折线圆点 type: 'line',
smooth: true, //让折线有弧度 symbol: 'circle', //是否显示实心的折线圆点
symbolSize: 7, //折线圆点的大小 smooth: true, //让折线有弧度
itemStyle: { symbolSize: 7, //折线圆点的大小
normal: { itemStyle: {
color: '#053B6A', //折线点的颜色 normal: {
lineStyle: { color: '#efc883', //折线点的颜色
color: '#053B6A' //折线的颜色 lineStyle: {
}, color: '#efc883' //折线的颜色
label: { show: true } //是否在折线点上显示数字 },
label: { show: true } //是否在折线点上显示数字
}
} }
} }
} ]
] });
});
},
},
// 点击按钮显示隐藏 // 点击按钮显示隐藏
changeDisplay(e){ changeDisplay(e){
...@@ -787,15 +578,48 @@ export default { ...@@ -787,15 +578,48 @@ export default {
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){ this.gaoMap.resetMapCenter([this.form.longitude,this.form.latitude]);
this.gaoMap.resetMapCenter([this.form.deviceInfoList[0].longitude,this.form.deviceInfoList[0].latitude]); this.gaoMap.addMarker(DEVICE_TYPE.WORKORDER, this.form)
}
for(var i = 0; i < this.form.deviceInfoList.length; i++){ var getData1 = [];
let obj = this.form.deviceInfoList[i]; var getData2 = [];
this.gaoMap.addMarker(DEVICE_TYPE.WORKORDER, obj) 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",this.form)
// this.active = parseInt(response.data.orderStatus) + 1;
// if(this.form.deviceInfoList.length>0){
// this.gaoMap.resetMapCenter([this.form.deviceInfoList[0].longitude,this.form.deviceInfoList[0].latitude]);
// }
// for(var i = 0; i < this.form.deviceInfoList.length; i++){
// let obj = this.form.deviceInfoList[i];
// this.gaoMap.addMarker(DEVICE_TYPE.WORKORDER, obj)
// }
if(this.form.orderType == '1') { if(this.form.orderType == '1') {
// 获取设备列表树 // 获取设备列表树
......
gassafety-web/src/views/dataMonitoring/realtimeData/realtimedetail.vue
View file @ e1a18efc
...@@ -184,65 +184,7 @@ ...@@ -184,65 +184,7 @@
}); });
}, },
// getMap() {
// var myChart = this.$echarts.init(document.getElementById('map'))
// let option = {
// xAxis: {
// type: 'category',
// // data: this.dataX,
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
// boundaryGap: false, //控制日期是否在中间显示
// axisLabel: {
// show: true, //是否显示日期
// interval: 0, //强制显示全部 // rotate: 40,//倾斜的角度
// textStyle: {
// color: '#000', //日期的颜色
// fontSize: 12 //字体的大小
// }
// },
// axisLine: {
// lineStyle: {
// color: '#ccc' // x轴的颜色
// }
// }
// },
// yAxis: {
// type: 'value',
// axisLabel: {
// formatter: '{value}',
// textStyle: {
// color: '#000' //数字的颜色
// },
// inside: false //控制数据是否在内侧还是外侧显示
// },
// axisLine: {
// lineStyle: {
// color: '#ccc' // 折线的颜色
// }
// }
// },
// series: [
// {
// // data: this.dataY,
// data: [820, 932, 901, 934, 1290, 1330, 1320],
// type: 'line',
// symbol: 'circle', //是否显示实心的折线圆点
// smooth: true, //让折线有弧度
// symbolSize: 7, //折线圆点的大小
// itemStyle: {
// normal: {
// color: '#efc883', //折线点的颜色
// lineStyle: {
// color: '#efc883' //折线的颜色
// },
// label: { show: true } //是否在折线点上显示数字
// }
// }
// }
// ]
// }
// myChart.setOption(option)
// },
initData(getData1, getData2, getData3) { initData(getData1, getData2, getData3) {
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
var myChart1 = echarts.init(document.getElementById('main1')); var myChart1 = echarts.init(document.getElementById('main1'));
...@@ -568,7 +510,19 @@ ...@@ -568,7 +510,19 @@
this.dataListdetail2.push(obj2); this.dataListdetail2.push(obj2);
this.dataListdetail3.push(obj3); this.dataListdetail3.push(obj3);
this.form = response.data; this.form = response.data;
this.active = parseInt(response.data.orderStatus) + 1;
this.gaoMap.resetMapCenter([this.form.longitude, this.form.latitude]);
this.gaoMap.addMarker(DEVICE_TYPE.WORKORDER, this.form)
console.log("this.form.longitude",this.form.longitude)
console.log("this.form", this.form)
// if (this.form.length > 0) {
// }
// for (var i = 0; i < this.form.length; i++) {
// let obj = this.form[i];
// this.gaoMap.addMarker(DEVICE_TYPE.WORKORDER, obj)
// }
var getData1 = []; var getData1 = [];
var getData2 = []; var getData2 = [];
...@@ -600,15 +554,9 @@ ...@@ -600,15 +554,9 @@
console.log("this.form.deviceReportDataList", this.form.deviceReportDataList)
this.active = parseInt(response.data.orderStatus) + 1;
if (this.form.length > 0) {
this.gaoMap.resetMapCenter([this.form[0].longitude, this.form[0].latitude]);
}
for (var i = 0; i < this.form.length; i++) {
let obj = this.form[i];
this.gaoMap.addMarker(DEVICE_TYPE.WORKORDER, obj)
}
if (this.form.orderType == '1') { if (this.form.orderType == '1') {
// 获取设备列表树 // 获取设备列表树
......
gassafety-web/src/views/deviceInspection/inspectionPlan/inspectiondetail.vue
View file @ e1a18efc
...@@ -11,14 +11,14 @@ ...@@ -11,14 +11,14 @@
<div style="float: left;margin-top: 8px;margin-left: 5px;"><img src="../../../assets/logo/fanhui.png" style="width: 25px;" alt=""></div> <div style="float: left;margin-top: 8px;margin-left: 5px;"><img src="../../../assets/logo/fanhui.png" style="width: 25px;" alt=""></div>
</div> </div>
<div style="width: 100%;height: 500px;"> <div style="width: 100%;height: 440px;">
<el-divider></el-divider> <el-divider></el-divider>
<div style="color: #31EAEA;width: 30%;height: 30px;"> <div style="color: #31EAEA;width: 30%;height: 30px;">
<ul><li>详细信息</li></ul> <ul><li>详细信息</li></ul>
</div> </div>
<div > <div >
<div style="float: left;width: 50%; "> <div style="float: left;width: 50%;">
<el-form ref="form" v-model="form" :rules="rules" label-width="100px" style="float: left;margin-left: 50px;width: 50%;"> <el-form ref="form" v-model="form" :rules="rules" label-width="100px" style="float: left;margin-left: 50px;width: 50%;margin-bottom: 25px;">
<el-form-item label="计划名称:" prop="planName"> <el-form-item label="计划名称:" prop="planName">
<font>{{form.planName}}</font> <font>{{form.planName}}</font>
</el-form-item> </el-form-item>
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
<font>{{form.address}}</font> <font>{{form.address}}</font>
</el-form-item> </el-form-item>
<el-form-item label="计划描述:" prop="remarks"> <el-form-item label="计划描述:" prop="remarks">
<div style="height: 90px;width: 250px; border: 1px solid rgb(187, 183, 183);margin-top: 10px;overflow-y: auto;padding: 5px;border-radius: 5px;"> <div style="height: 90px;width: 700px; border: 1px solid rgb(187, 183, 183);margin-top: 10px;overflow-y: auto;padding: 5px;border-radius: 5px;">
<font>{{form.remarks}}</font> <font>{{form.remarks}}</font>
</div> </div>
</el-form-item> </el-form-item>
...@@ -35,9 +35,12 @@ ...@@ -35,9 +35,12 @@
<el-form-item label="计划执行时间:" prop="startTime"> <el-form-item label="计划执行时间:" prop="startTime">
<font>{{form.startTime}}至{{form.endTime}}</font> <font>{{form.startTime}}至{{form.endTime}}</font>
</el-form-item> </el-form-item>
<el-form-item label="计划状态:" prop="startTime">
<font>{{form.planStatus}}</font>
</el-form-item>
</el-form> </el-form>
<el-table height="175px" :data="form.inspectionDataList" style="width: 800px; margin-left: 50px; margin-top: 20px"> <el-table max-height="175px" :data="form.inspectionDataList" style="width: 800px; margin-left: 50px;">
<el-table-column label="设备名称" align="center" prop="deviceName" /> <el-table-column label="设备名称" align="center" prop="deviceName" />
<el-table-column label="设备编号" align="center" prop="deviceCode" /> <el-table-column label="设备编号" align="center" prop="deviceCode" />
<el-table-column label="设备类型" align="center" prop="deviceType" /> <el-table-column label="设备类型" align="center" prop="deviceType" />
...@@ -59,7 +62,7 @@ ...@@ -59,7 +62,7 @@
</el-table> </el-table>
</div> </div>
<div id="marbox" style="width: 700px;height: 400px;float: left;margin-top: -35px; border: 1px solid rgb(218, 213, 213);"> <div id="marbox" style="width: 700px;height: 400px;float: left;margin-top: -25px; border: 1px solid rgb(218, 213, 213);">
<div style="width: 100%;height: 100%" id="container"></div> <div style="width: 100%;height: 100%" id="container"></div>
</div> </div>
</div> </div>
......
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