351 lines
7.8 KiB
Vue
351 lines
7.8 KiB
Vue
|
<template>
|
|||
|
|
<view class="warp">
|
|||
|
|
<zero-loading v-if="chartLoading" position="absolute"></zero-loading>
|
|||
|
|
<charts v-else :id="'pcChart'" :options="curve_option"></charts>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import charts from "@/components/charts/index";
|
|||
|
|
import {
|
|||
|
|
chartYIndex,
|
|||
|
|
beforeDayTime
|
|||
|
|
} from '@/common/common.js'
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
charts
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
curve_option: {},
|
|||
|
|
stationId: null,
|
|||
|
|
name_data: [],
|
|||
|
|
color: ["#2D8CF0", "#19BE6B","#FF9900","#E46CBB"],
|
|||
|
|
colorList: [
|
|||
|
|
[{
|
|||
|
|
offset: 0.0,
|
|||
|
|
color: "rgba(45, 140, 240, 0.1)",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: "rgba(25, 190, 107, 0.2)",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
[{
|
|||
|
|
offset: 0.0,
|
|||
|
|
color: "rgba(255, 153, 0, 0.1)",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: "rgba(228, 108,187, 0.2)",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
],
|
|||
|
|
serviceList: [],
|
|||
|
|
time: [],
|
|||
|
|
chartLoading: false,
|
|||
|
|
nameArr: []
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
currentStation() {
|
|||
|
|
return this.vuex_currentStation;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
console.log(123);
|
|||
|
|
this.time = beforeDayTime()
|
|||
|
|
this.GetRealtimeCurve()
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
currentStation: {
|
|||
|
|
handler(val) {
|
|||
|
|
if (val && val.id) {
|
|||
|
|
this.stationId = val.id
|
|||
|
|
this.time = beforeDayTime()
|
|||
|
|
this.GetRealtimeCurve()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
deep: true,
|
|||
|
|
immediate: true
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getData(){
|
|||
|
|
this.time = beforeDayTime()
|
|||
|
|
this.GetRealtimeCurve()
|
|||
|
|
},
|
|||
|
|
async selectChartApi(val) {
|
|||
|
|
if (val && val.length) {
|
|||
|
|
this.chartLoading = false
|
|||
|
|
this.initCurveChart(val);
|
|||
|
|
} else {
|
|||
|
|
this.chartLoading = true
|
|||
|
|
//运行曲线
|
|||
|
|
let self = this;
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
self.$u.api.homePageData
|
|||
|
|
.GetRealtimeCurve({
|
|||
|
|
beginTime: this.time[0],
|
|||
|
|
endTime: this.time[1],
|
|||
|
|
stationId: this.stationId,
|
|||
|
|
})
|
|||
|
|
.then((res) => {
|
|||
|
|
this.chartLoading = false
|
|||
|
|
this.initCurveChart(res.data);
|
|||
|
|
resolve(res);
|
|||
|
|
})
|
|||
|
|
.catch((err) => {
|
|||
|
|
reject("错误:运行曲线");
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
async GetRealtimeCurve() {
|
|||
|
|
this.chartLoading = true
|
|||
|
|
//运行曲线
|
|||
|
|
let self = this;
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
self.$u.api.homePageData
|
|||
|
|
.GetDynamicRealTimeCurve({
|
|||
|
|
beginTime: this.time[0],
|
|||
|
|
endTime: this.time[1],
|
|||
|
|
pageLocation: 'runChart',
|
|||
|
|
stationId: this.stationId,
|
|||
|
|
})
|
|||
|
|
.then((res) => {
|
|||
|
|
this.selectChartApi(res.data);
|
|||
|
|
resolve(res);
|
|||
|
|
})
|
|||
|
|
.catch((err) => {
|
|||
|
|
reject("错误:运行曲线");
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
initCurveChart(val) {
|
|||
|
|
let x_data = []
|
|||
|
|
let valueArr = []
|
|||
|
|
this.nameArr = []
|
|||
|
|
if (val && val.length > 0) {
|
|||
|
|
val.forEach((item, index) => {
|
|||
|
|
valueArr.push(item.list)
|
|||
|
|
this.nameArr.push(item.name)
|
|||
|
|
})
|
|||
|
|
val[0].list.forEach((el) => {
|
|||
|
|
x_data.push(el.date)
|
|||
|
|
})
|
|||
|
|
const valueArr2 = []
|
|||
|
|
valueArr.forEach((item, index) => {
|
|||
|
|
const arr = []
|
|||
|
|
item.forEach((item2, index2) => {
|
|||
|
|
arr.push(item2.digital)
|
|||
|
|
valueArr2[index] = arr
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
this.serviceList = []
|
|||
|
|
valueArr2.forEach((item, index) => {
|
|||
|
|
this.serviceList.push({
|
|||
|
|
data: item,
|
|||
|
|
type: 'line',
|
|||
|
|
name: this.nameArr[index],
|
|||
|
|
showSymbol: false,
|
|||
|
|
yAxisIndex: chartYIndex(val[index]),
|
|||
|
|
color: this.color[index],
|
|||
|
|
lineStyle: {
|
|||
|
|
color: this.color[index]
|
|||
|
|
},
|
|||
|
|
areaStyle: {
|
|||
|
|
color: new this.$echarts.graphic.LinearGradient(
|
|||
|
|
0,
|
|||
|
|
1,
|
|||
|
|
0,
|
|||
|
|
0,
|
|||
|
|
this.colorList[index]
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
} else {
|
|||
|
|
this.serviceList = [];
|
|||
|
|
this.nameArr = [];
|
|||
|
|
x_data = []
|
|||
|
|
}
|
|||
|
|
this.curve_option = {
|
|||
|
|
color: ["#2D8CF0", "#19BE6B","#FF9900","#E46CBB"],
|
|||
|
|
grid: {
|
|||
|
|
left: "17%",
|
|||
|
|
right: "13%",
|
|||
|
|
top: "15%",
|
|||
|
|
bottom: "25%",
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: "axis",
|
|||
|
|
textStyle: {
|
|||
|
|
textShadowBlur: 10, // 重点
|
|||
|
|
textShadowColor: 'transparent', // 重点
|
|||
|
|
},
|
|||
|
|
axisPointer: {},
|
|||
|
|
confine: true,
|
|||
|
|
position: function(point, params, dom, rect, size) {
|
|||
|
|
// 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
|
|||
|
|
// 提示框位置
|
|||
|
|
var x = 0; // x坐标位置
|
|||
|
|
var y = 0; // y坐标位置
|
|||
|
|
|
|||
|
|
// 当前鼠标位置
|
|||
|
|
var pointX = point[0];
|
|||
|
|
var pointY = point[1];
|
|||
|
|
|
|||
|
|
// 外层div大小
|
|||
|
|
// var viewWidth = size.viewSize[0];
|
|||
|
|
// var viewHeight = size.viewSize[1];
|
|||
|
|
|
|||
|
|
// 提示框大小
|
|||
|
|
var boxWidth = size.contentSize[0];
|
|||
|
|
var boxHeight = size.contentSize[1];
|
|||
|
|
|
|||
|
|
// boxWidth > pointX 说明鼠标左边放不下提示框
|
|||
|
|
if (boxWidth > pointX) {
|
|||
|
|
x = 5; // 自己定个x坐标值，以防出屏
|
|||
|
|
y -= 15; // 防止点被覆盖住，可根据情况自行调节
|
|||
|
|
} else {
|
|||
|
|
// 左边放的下
|
|||
|
|
x = pointX - boxWidth - 15;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// boxHeight > pointY 说明鼠标上边放不下提示框
|
|||
|
|
if (boxHeight + 20 > pointY) {
|
|||
|
|
y = pointY + 15;
|
|||
|
|
} else if (boxHeight > pointY) {
|
|||
|
|
y = 5;
|
|||
|
|
} else {
|
|||
|
|
// 上边放得下
|
|||
|
|
y += pointY - boxHeight;
|
|||
|
|
}
|
|||
|
|
return [x, y];
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
type: 'scroll',
|
|||
|
|
orient: 'horizontal',
|
|||
|
|
icon: "rect",
|
|||
|
|
bottom: 0,
|
|||
|
|
left: 0,
|
|||
|
|
right: 0,
|
|||
|
|
itemWidth: 10,
|
|||
|
|
itemHeight: 10,
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 10,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
data: x_data,
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#A3A3A3",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
color: "#A3A3A3",
|
|||
|
|
formatter: function(params) {
|
|||
|
|
let newParamsName = "";
|
|||
|
|
const paramsNameNumber = params.length; // 文字总长度
|
|||
|
|
const provideNumber = 11; //一行显示几个字
|
|||
|
|
const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
|
|||
|
|
if (paramsNameNumber > provideNumber) {
|
|||
|
|
for (let p = 0; p < rowNumber; p++) {
|
|||
|
|
const start = p * provideNumber;
|
|||
|
|
const end = start + provideNumber;
|
|||
|
|
const tempStr =
|
|||
|
|
p === rowNumber - 1 ?
|
|||
|
|
params.substring(start, paramsNameNumber) :
|
|||
|
|
params.substring(start, end) + "\n";
|
|||
|
|
newParamsName += tempStr;
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
newParamsName = params;
|
|||
|
|
}
|
|||
|
|
return newParamsName;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
yAxis: [{
|
|||
|
|
name: this.$t('homePage.home.power'),
|
|||
|
|
nameTextStyle: {
|
|||
|
|
fontSize: 12,
|
|||
|
|
padding: [0, 0, 0, 20],
|
|||
|
|
},
|
|||
|
|
type: "value",
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#A3A3A3",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
color: "#A3A3A3",
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
min: function(value) {
|
|||
|
|
return Math.floor(
|
|||
|
|
(Math.abs(value.min) < value.max ?
|
|||
|
|
-value.max * 1.05 :
|
|||
|
|
value.min * 1.05
|
|||
|
|
).toFixed(2)
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
max: function(value) {
|
|||
|
|
return Math.ceil(
|
|||
|
|
(Math.abs(value.min) < value.max ?
|
|||
|
|
value.max * 1.05 :
|
|||
|
|
-value.min * 1.05
|
|||
|
|
).toFixed(2)
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "SOC(%)",
|
|||
|
|
nameTextStyle: {
|
|||
|
|
fontSize: 12,
|
|||
|
|
padding: [0, 0, 0, 30],
|
|||
|
|
},
|
|||
|
|
type: "value",
|
|||
|
|
max: 100,
|
|||
|
|
min: -100,
|
|||
|
|
ming: 0,
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#A3A3A3",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
color: "#A3A3A3",
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
axisTick: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
series: this.serviceList,
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.warp {
|
|||
|
|
width: 650rpx;
|
|||
|
|
height: 500rpx;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
</style>
|