Skip to content

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

折线图

parent 66a7235f
Show 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 {
this.dataListdetail1.push(obj1);
this.dataListdetail2.push(obj2);
this.dataListdetail3.push(obj3);
this.form = response.data;
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]);
......
gassafety-web/src/views/dataMonitoring/realtimeData/index.vue
View file @ 4f258f39
......@@ -177,7 +177,7 @@ export default {
this.$router.push({
path: '/realtimeData/realtimedetail',
query:{
deviceReportDataId : row.deviceReportDataId
deviceId : row.deviceId
}
}) //带参跳转
},
......
gassafety-web/src/views/dataMonitoring/realtimeData/realtimedetail.vue
View file @ 4f258f39
......@@ -50,14 +50,18 @@
</div>
<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="main2" style="float: right;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>
<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 id="main3" style="float: left;width: 49.8%;height:300px;background-color: rgb(247 247 247);padding: 5px;"></div>
<div id="main4" style="float: right;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>
<div id="main4" style="float: right;width: 49.8%;height:300px;background-color: rgb(247 247 247);padding: 5px;">
</div>
</div>
</div>
......@@ -145,7 +149,7 @@
rules: {
},
active: 0,
deviceReportDataId: "",
deviceId: "",
showAndHide: false,
dataListdetail1: [],
dataListdetail2: [],
......@@ -156,7 +160,7 @@
created() {
// 如果是跳转来的，则接受初始化参数
// this.user_id = this.$route.query.id; //详细信息页接收参数
this.deviceReportDataId = this.$route.query.deviceReportDataId;
this.deviceId = +this.$route.query.deviceId;
// this.getList();
this.getDicts("t_order_status").then(response => {
this.typeOptions = response.data;
......@@ -170,10 +174,6 @@
let gaoMap = new gaodeMap("石家庄");
this.gaoMap = gaoMap;
this.getData();
this.initData();
this.drawPieChart();
this.main3();
this.main4();
},
methods: {
getInspectorList() {
......@@ -243,39 +243,10 @@
// }
// myChart.setOption(option)
// },
initData() {
initData(getData1, getData2, getData3) {
// 基于准备好的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({
......@@ -286,12 +257,13 @@
trigger: 'axis'
},
legend: {
data: ['标况累积量', '工况累积量']
data: ['标况流量', '工况流量']
},
xAxis: {
type: 'category',
// 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, //控制日期是否在中间显示
axisLabel: {
show: true, //是否显示日期
......@@ -325,8 +297,9 @@
series: [
{
// data: this.dataY,
name: '工况累计量',
data: [820, 232, 901, 534, 1290, 330, 1320, 345, 654, 189, 980, 234],
name: '标况流量',
// data: [820, 232, 901, 534, 1290, 330, 1320, 345, 654, 189, 980, 234],
data: getData1,
type: 'line',
symbol: 'circle', //是否显示实心的折线圆点
smooth: true, //让折线有弧度
......@@ -343,8 +316,9 @@
},
{
// data: this.dataY,
name: '工况累计量',
data: [500, 600, 700, 300, 1100, 130, 1200, 820, 932, 901, 934, 1290],
name: '工况流量',
// data: [500, 600, 700, 300, 1100, 130, 1200, 820, 932, 901, 934, 1290],
data: getData2,
type: 'line',
symbol: 'circle', //是否显示实心的折线圆点
smooth: true, //让折线有弧度
......@@ -363,45 +337,19 @@
});
},
drawPieChart() {
drawPieChart(getData4, getData5, getData3) {
// 基于准备好的dom，初始化echarts实例
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({
// 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'],
data: getData3,
boundaryGap: false, //控制日期是否在中间显示
axisLabel: {
show: true, //是否显示日期
......@@ -435,7 +383,7 @@
series: [
{
// data: this.dataY,
data: [820, 932, 901, 934, 1290, 1330, 1320],
data: getData4,
type: 'line',
symbol: 'circle', //是否显示实心的折线圆点
smooth: true, //让折线有弧度
......@@ -452,7 +400,7 @@
},
{
// data: this.dataY,
data: [500, 600, 700, 300, 1100, 130, 1200],
data: getData5,
type: 'line',
symbol: 'circle', //是否显示实心的折线圆点
smooth: true, //让折线有弧度
......@@ -470,46 +418,17 @@
]
});
},
main3() {
main3(getData6, getData3) {
// 基于准备好的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'],
data: getData3,
boundaryGap: false, //控制日期是否在中间显示
axisLabel: {
show: true, //是否显示日期
......@@ -543,7 +462,7 @@
series: [
{
// data: this.dataY,
data: [820, 932, 901, 934, 1290, 1330, 1320],
data: getData6,
type: 'line',
symbol: 'circle', //是否显示实心的折线圆点
smooth: true, //让折线有弧度
......@@ -557,68 +476,21 @@
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实例
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'],
data: getData3,
boundaryGap: false, //控制日期是否在中间显示
axisLabel: {
show: true, //是否显示日期
......@@ -652,7 +524,7 @@
series: [
{
// data: this.dataY,
data: [820, 932, 901, 934, 1290, 1330, 1320],
data: getData7,
type: 'line',
symbol: 'circle', //是否显示实心的折线圆点
smooth: true, //让折线有弧度
......@@ -666,23 +538,6 @@
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 @@
handleDownload(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(this.deviceReportDataId).then(response => {
const { deviceName, deviceCode, deviceType,standardConditionAccumulation,
workingConditionAccumulation,residualQuantity,standardConditionFlow,workingConditionFlow,temperature,pressure,reportTime,deviceStatus } = response.data;
const obj1 = {deviceName,deviceCode,deviceType,standardConditionAccumulation};
const obj2 = {workingConditionAccumulation,residualQuantity,standardConditionFlow,workingConditionFlow};
const obj3 = {temperature,pressure,reportTime,deviceStatus};
getData(this.deviceId).then(response => {
const { deviceName, deviceCode, deviceType, standardConditionAccumulation,
workingConditionAccumulation, residualQuantity, standardConditionFlow, workingConditionFlow, temperature, pressure, reportTime, deviceStatus } = response.data;
const obj1 = { deviceName, deviceCode, deviceType, standardConditionAccumulation };
const obj2 = { workingConditionAccumulation, residualQuantity, standardConditionFlow, workingConditionFlow };
const obj3 = { temperature, pressure, reportTime, deviceStatus };
this.dataListdetail1.push(obj1);
this.dataListdetail2.push(obj2);
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;
if (this.form.deviceInfoList.length > 0) {
this.gaoMap.resetMapCenter([this.form.deviceInfoList[0].longitude, this.form.deviceInfoList[0].latitude]);
if (this.form.length > 0) {
this.gaoMap.resetMapCenter([this.form[0].longitude, this.form[0].latitude]);
}
for (var i = 0; i < this.form.deviceInfoList.length; i++) {
let obj = this.form.deviceInfoList[i];
for (var i = 0; i < this.form.length; i++) {
let obj = this.form[i];
this.gaoMap.addMarker(DEVICE_TYPE.WORKORDER, obj)
}
......
gassafety-web/src/views/deviceInspection/inspectionPlan/inspectiondetail.vue
View file @ 4f258f39
......@@ -252,19 +252,21 @@ export default {
getInspectionPlan (){
getInspectionPlan(this.planId).then(response =>{
this.form = response.data;
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]);
if(this.form.deviceList.length>0){
this.gaoMap.resetMapCenter([this.form.deviceList[0].longitude,this.form.deviceList[0].latitude]);
}
for(var i = 0; i < this.form.deviceInfoList.length; i++){
let obj = this.form.deviceInfoList[i];
for(var i = 0; i < this.form.deviceList.length; i++){
let obj = this.form.deviceList[i];
this.gaoMap.addMarker(DEVICE_TYPE.WORKORDER, obj)
}
if(this.form.orderType == '1') {
// 获取设备列表树
let data = {
key1:this.form.deviceInfoList,
key1:this.form.deviceList,
key2:this.form.pipeList
};
deviceTree(data).then(response => {
......
gassafety-web/src/views/workOrder/basicsInfo/detail.vue
View file @ 4f258f39
......@@ -394,6 +394,7 @@ export default {
this.form = response.data;
this.active = parseInt(response.data.orderStatus) + 1;
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]);
}
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