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> |