2639 lines
67 KiB
Vue
2639 lines
67 KiB
Vue
<template>
|
||
<view class="content">
|
||
<uni-section title="报警处理" type="line">
|
||
<swiper class="swiper-box">
|
||
<swiper-item>
|
||
<view class="content-card-container">
|
||
<!-- <view class="content-card-wrap">
|
||
<view class="content-container">
|
||
<view class="content-icon-wrap">
|
||
<view :class="'iconfont icon-jixie'" :style="{'--color':'#0099FF'}">
|
||
</view>
|
||
</view>
|
||
<view class="content-title-wrap">
|
||
<view class="content-title">报警总数</view>
|
||
<view class="content-subTitle">
|
||
<text class="content-count">30</text>
|
||
次
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
<view class="content-card-wrap">
|
||
<view class="content-container">
|
||
<view class="content-icon-wrap">
|
||
<view :class="'iconfont icon-zhengchang'" :style="{'--color':'#2BD52B'}">
|
||
</view>
|
||
</view>
|
||
<view class="content-title-wrap">
|
||
<view class="content-title">已处理</view>
|
||
<view class="content-subTitle">
|
||
<text class="content-count">10</text>
|
||
次
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="content-card-wrap">
|
||
<view class="content-container">
|
||
<view class="content-icon-wrap">
|
||
<view :class="'iconfont icon-guzhang1'" :style="{'--color':'#FF0000'}">
|
||
</view>
|
||
</view>
|
||
<view class="content-title-wrap">
|
||
<view class="content-title">未处理</view>
|
||
<view class="content-subTitle">
|
||
<text class="content-count">20</text>
|
||
次
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</uni-section>
|
||
<uni-section title="运行监控" type="line">
|
||
<u-tabs :list="tabList" @click="tabListClick"></u-tabs>
|
||
<view v-if="tabIndex === 0">
|
||
<uni-section title="ZFSC4超压平衡缸P/Q特性" type="line">
|
||
<uni-row style="height: 200px">
|
||
<uni-col :span="8" id="cdcjyylqx" style="height: 100%;width: 100%;" />
|
||
</uni-row>
|
||
<uni-row style="height: 200px">
|
||
<uni-col :span="8" id="cdcllbhqx" style="height: 100%;width: 100%;" />
|
||
</uni-row>
|
||
<uni-row style="height: 200px">
|
||
<uni-col :span="8" id="czcjyylqx" style="height: 100%;width: 100%;" />
|
||
</uni-row>
|
||
<uni-row style="height: 200px">
|
||
<uni-col :span="8" id="czcllbhqx" style="height: 100%;width: 100%;" />
|
||
</uni-row>
|
||
</uni-section>
|
||
<uni-section title="ZFSC4超压底缸加压压区P/Q特性" type="line">
|
||
<uni-row style="height: 200px">
|
||
<uni-col :span="8" id="cdcylbhqx" style="height: 100%;width: 100%;" />
|
||
</uni-row>
|
||
<uni-row style="height: 200px">
|
||
<uni-col :span="8" id="czcylbhqx" style="height: 100%;width: 100%;" />
|
||
</uni-row>
|
||
<uni-row style="height: 200px">
|
||
<uni-col :span="8" id="cdcdgwytx" style="height: 100%;width: 100%;" />
|
||
</uni-row>
|
||
<uni-row style="height: 200px">
|
||
<uni-col :span="8" id="czcdgwytx" style="height: 100%;width: 100%;" />
|
||
</uni-row>
|
||
</uni-section>
|
||
<uni-section title="ZFSC4超压底缸加压液压系统主参数" type="line">
|
||
<uni-row style="height: 200px">
|
||
<view style="height:10%;text-align: center;font-size: 16px;color:#26DE86">系统压力</view>
|
||
<uni-col :span="8" id="cylxtyl" style="height: 100%;width: 100%;" />
|
||
</uni-row>
|
||
<uni-row style="height: 200px">
|
||
<view style="height:10%;text-align: center;font-size: 16px;color:#109CFB">系统液温</view>
|
||
<uni-col :span="8" id="cylxtyw" style="height: 100%;width: 100%;" />
|
||
</uni-row>
|
||
<uni-row style="height: 200px">
|
||
<view style="height:10%;text-align: center;font-size: 16px;color:#109CFB">系统液位(CP)</view>
|
||
<uni-col :span="8" id="cylxtywei" style="height: 100%;width: 50%;">
|
||
</uni-col>
|
||
<uni-col :span="8" style="height: 100%;width: 50%;">
|
||
<view style="position: absolute;top: 30%;">
|
||
<view class="font-size-10">当前值<view class="yeweiSpan font-size-16">{{ cylxtywei }}
|
||
</view>
|
||
</view>
|
||
<view class="font-size-10">初始值<view class="yeweiSpan font-size-16">{{ cylxtyweicsz }}
|
||
</view>
|
||
</view>
|
||
<view class="font-size-10">最小值<view class="yeweiSpan font-size-16">{{ cylxtyweimin }}
|
||
</view>
|
||
</view>
|
||
<view class="font-size-10">最大值<view class="yeweiSpan font-size-16">{{ cylxtyweimax }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
</uni-section>
|
||
<uni-section title="ZFSC4超压底缸加压系统油品特性" type="line">
|
||
<uni-row style="height: 200px">
|
||
<uni-col :span="8" id="cyldlnd" style="height: 100%;width: 100%;" />
|
||
</uni-row>
|
||
<uni-row style="height: 200px">
|
||
<uni-col :span="8" id="cylxdsd" style="height: 100%;width: 100%;" />
|
||
</uni-row>
|
||
<uni-row style="height: 200px">
|
||
<uni-col :span="8" id="cylyykldtx" style="height: 100%;width: 100%;" />
|
||
</uni-row>
|
||
</uni-section>
|
||
</view>
|
||
<view v-if="tabIndex === 1">
|
||
<uni-section title="ZFSC4中高顶辊液压压区P/Q特性" type="line">
|
||
<uni-row style="height: 200px">
|
||
<uni-col :span="8" id="sjyltx" style="height: 100%;width: 100%;" />
|
||
</uni-row>
|
||
</uni-section>
|
||
<uni-section title="ZFSC4中高顶辊液压压区P/Q特性" type="line">
|
||
<uni-row style="height: 200px">
|
||
<uni-col :span="8" id="llyltx" style="height: 100%;width: 100%;" />
|
||
</uni-row>
|
||
</uni-section>
|
||
<uni-section title="ZFSC4中高顶辊液压系统主参数" type="line">
|
||
<uni-row style="height: 200px">
|
||
<view style="height:10%;text-align: center;font-size: 16px;color:#26DE86">系统压力</view>
|
||
<uni-col :span="8" id="xtyl" style="height: 100%;width: 100%;" />
|
||
</uni-row>
|
||
<uni-row style="height: 200px">
|
||
<view style="height:10%;text-align: center;font-size: 16px;color:#109CFB">系统液温</view>
|
||
<uni-col :span="8" id="xtyw" style="height: 100%;width: 100%;" />
|
||
</uni-row>
|
||
<uni-row style="height: 200px">
|
||
<view style="height:10%;text-align: center;font-size: 16px;color:#109CFB">系统液位(CP)</view>
|
||
<uni-col :span="8" id="xtywei" style="height: 100%;width: 50%;">
|
||
</uni-col>
|
||
<uni-col :span="8" style="height: 100%;width: 50%;">
|
||
<view style="position: absolute;top: 30%;">
|
||
<view class="font-size-10">当前值<view class="yeweiSpan font-size-16">{{ xtywei }}
|
||
</view>
|
||
</view>
|
||
<view class="font-size-10">初始值<view class="yeweiSpan font-size-16">{{ xtyweicsz }}
|
||
</view>
|
||
</view>
|
||
<view class="font-size-10">最小值<view class="yeweiSpan font-size-16">{{ xtyweimin }}
|
||
</view>
|
||
</view>
|
||
<view class="font-size-10">最大值<view class="yeweiSpan font-size-16">{{ xtyweimax }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
</uni-section>
|
||
<uni-section title="ZFSC4超压底缸加压系统油品特性" type="line">
|
||
<uni-row style="height: 200px">
|
||
<uni-col :span="8" id="dlnd" style="height: 100%;width: 100%;" />
|
||
</uni-row>
|
||
<uni-row style="height: 200px">
|
||
<uni-col :span="8" id="xdsd" style="height: 100%;width: 100%;" />
|
||
</uni-row>
|
||
<uni-row style="height: 200px">
|
||
<uni-col :span="8" id="yykldtx" style="height: 100%;width: 100%;" />
|
||
</uni-row>
|
||
</uni-section>
|
||
</view>
|
||
<view v-if="tabIndex === 2">
|
||
<uni-section title="ZFSC4中高底辊液压压区P/Q特性" type="line">
|
||
<uni-row style="height: 200px">
|
||
<uni-col :span="8" id="bssjyltx" style="height: 100%;width: 100%;" />
|
||
</uni-row>
|
||
</uni-section>
|
||
<uni-section title="ZFSC4中高底辊液压压区P/Q特性" type="line">
|
||
<uni-row style="height: 200px">
|
||
<uni-col :span="8" id="bsllyltx" style="height: 100%;width: 100%;" />
|
||
</uni-row>
|
||
</uni-section>
|
||
<uni-section title="ZFSC4中高底辊液压系统主参数" type="line">
|
||
<uni-row style="height: 200px">
|
||
<view style="height:10%;text-align: center;font-size: 16px;color:#26DE86">系统压力</view>
|
||
<uni-col :span="8" id="bsxtyl" style="height: 100%;width: 100%;" />
|
||
</uni-row>
|
||
<uni-row style="height: 200px">
|
||
<view style="height:10%;text-align: center;font-size: 16px;color:#109CFB">系统液温</view>
|
||
<uni-col :span="8" id="bsxtyw" style="height: 100%;width: 100%;" />
|
||
</uni-row>
|
||
<uni-row style="height: 200px">
|
||
<view style="height:10%;text-align: center;font-size: 16px;color:#109CFB">系统液位(CP)</view>
|
||
<uni-col :span="8" id="bsxtywei" style="height: 100%;width: 50%;">
|
||
</uni-col>
|
||
<uni-col :span="8" style="height: 100%;width: 50%;">
|
||
<view style="position: absolute;top: 30%;">
|
||
<view class="font-size-10">当前值<view class="yeweiSpan font-size-16">{{ bsxtywei }}
|
||
</view>
|
||
</view>
|
||
<view class="font-size-10">初始值<view class="yeweiSpan font-size-16">{{ bsxtyweicsz }}
|
||
</view>
|
||
</view>
|
||
<view class="font-size-10">最小值<view class="yeweiSpan font-size-16">{{bsxtyweimin }}
|
||
</view>
|
||
</view>
|
||
<view class="font-size-10">最大值<view class="yeweiSpan font-size-16">{{bsxtyweimax }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
</uni-section>
|
||
<uni-section title="ZFSC4超压底缸加压系统油品特性" type="line">
|
||
<uni-row style="height: 200px">
|
||
<uni-col :span="8" id="bsdlnd" style="height: 100%;width: 100%;" />
|
||
</uni-row>
|
||
<uni-row style="height: 200px">
|
||
<uni-col :span="8" id="bsxdsd" style="height: 100%;width: 100%;" />
|
||
</uni-row>
|
||
<uni-row style="height: 200px">
|
||
<uni-col :span="8" id="bsyykldtx" style="height: 100%;width: 100%;" />
|
||
</uni-row>
|
||
</uni-section>
|
||
</view>
|
||
</uni-section>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from "echarts";
|
||
import {
|
||
isArray,
|
||
merge
|
||
} from "lodash";
|
||
import {
|
||
listBottomCylData,
|
||
listTopScollerData,
|
||
listBottomScollerData
|
||
} from "@/api/data/query.js";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 定时任务
|
||
intervalTask: null,
|
||
|
||
//ZFSC4超压平衡缸P/Q特性
|
||
cdcjyylqxCharts: null,
|
||
cdcllbhqxCharts: null,
|
||
czcjyylqxCharts: null,
|
||
czcllbhqxCharts: null,
|
||
|
||
//ZFSC4超压底缸加压压区P/Q特性
|
||
cdcylbhqxCharts: null,
|
||
czcylbhqxCharts: null,
|
||
cdcdgwytxCharts: null,
|
||
czcdgwytxCharts: null,
|
||
|
||
//ZFSC4超压底缸加压液压系统主参数
|
||
cylxtyl: 0,
|
||
cylxtylCharts: null,
|
||
cylxtyw: 0,
|
||
cylxtywCharts: null,
|
||
cylxtywei: 0,
|
||
cylxtyweicsz: 0,
|
||
cylxtyweimin: 0,
|
||
cylxtyweimax: 0,
|
||
cylxtyweiCharts: null,
|
||
|
||
// 粘度，湿度
|
||
cyldlndCharts: null,
|
||
cylxdsdCharts: null,
|
||
//底缸数据
|
||
cylyykldtxCharts: null,
|
||
|
||
//ZFSC4中高顶辊液压压区P/Q特性
|
||
sjylChart: null,
|
||
// 压区流量压力特性echarts
|
||
llylChart: null,
|
||
//ZFSC4中高顶辊液压系统主参数
|
||
xtyl: 0,
|
||
xtylCharts: null,
|
||
xtyw: 0,
|
||
xtywCharts: null,
|
||
xtywei: 0,
|
||
xtyweicsz: 0,
|
||
xtyweimin: 0,
|
||
xtyweimax: 0,
|
||
// 粘度，湿度
|
||
dlndCharts: null,
|
||
yykldtxCharts: null,
|
||
xdsdCharts: null,
|
||
|
||
//ZFSC4中高底辊液压压区P/Q特性
|
||
bssjylChart: null,
|
||
//ZFSC4中高底辊液压压区P/Q特性
|
||
bsllylChart: null,
|
||
//ZFSC4中高底辊液压系统主参数
|
||
bsxtyl: 0,
|
||
bsxtylCharts: null,
|
||
bsxtyw: 0,
|
||
bsxtywCharts: null,
|
||
bsxtywei: 0,
|
||
bsxtyweicsz: 0,
|
||
bsxtyweimin: 0,
|
||
bsxtyweimax: 0,
|
||
// 粘度，湿度
|
||
bsdlndCharts: null,
|
||
bsxdsdCharts: null,
|
||
// 油液颗粒度特性echarts
|
||
bsyykldtxCharts: null,
|
||
|
||
showdata: null,
|
||
tabIndex: 0,
|
||
tabList: [{
|
||
name: '超压底缸加压液压系统',
|
||
}, {
|
||
name: '可控中高辊顶辊液压系统',
|
||
}, {
|
||
name: '可控中高辊底辊液压系统'
|
||
}]
|
||
}
|
||
},
|
||
beforeDestroy() {
|
||
clearInterval(this.intervalTask);
|
||
},
|
||
mounted() {
|
||
this.queryBottomCylDataInit();
|
||
this.intervalTask = setInterval(() => {
|
||
// 查询数据
|
||
this.queryBottomCylDataInit();
|
||
}, 10000);
|
||
},
|
||
methods: {
|
||
tabListClick(item) {
|
||
clearInterval(this.intervalTask);
|
||
this.tabIndex = item.index;
|
||
if (0 === item.index) {
|
||
this.queryBottomCylDataInit();
|
||
this.intervalTask = setInterval(() => {
|
||
// 查询数据
|
||
this.queryBottomCylDataInit();
|
||
}, 10000);
|
||
} else if (1 === item.index) {
|
||
this.queryTopScollerDataInit();
|
||
this.intervalTask = setInterval(() => {
|
||
// 查询数据
|
||
this.queryTopScollerDataInit();
|
||
}, 10000);
|
||
} else if (2 === item.index) {
|
||
this.queryBottomScollerDataInit();
|
||
this.intervalTask = setInterval(() => {
|
||
// 查询数据
|
||
this.queryBottomScollerDataInit();
|
||
}, 10000);
|
||
}
|
||
},
|
||
//加载可控中高辊底辊液压系统数据
|
||
async queryBottomScollerDataInit() {
|
||
const {
|
||
data
|
||
} = await listBottomScollerData();
|
||
this.XDATA = data.timelist;
|
||
this.showdata = data;
|
||
this.bsxtyl = parseFloat(data.sysprs).toFixed(2);
|
||
this.bsxtyw = parseFloat(data.systemp).toFixed(2);
|
||
this.bsxtywei = parseFloat(data.syslevel).toFixed(2);
|
||
this.bsxtyweicsz = parseFloat(data.syslevelinit).toFixed(2);
|
||
this.bsxtyweimin = parseFloat(data.levelmin).toFixed(2);
|
||
this.bsxtyweimax = parseFloat(data.levelmax).toFixed(2);
|
||
this.bsyykld4 = parseFloat(data.sysgran4).toFixed(2);
|
||
this.bsyykld6 = parseFloat(data.sysgran6).toFixed(2);
|
||
this.bsyykld14 = parseFloat(data.sysgran14).toFixed(2);
|
||
this.bsyykld21 = parseFloat(data.sysgran21).toFixed(2)
|
||
this.initBottomScollerCharts();
|
||
},
|
||
//加载可控中高辊底辊液压系统图
|
||
initBottomScollerCharts() {
|
||
this.bsxtylCharts = echarts.getInstanceByDom(document.getElementById("bsxtyl")); //可控中高辊底辊液压系统
|
||
if (this.bsxtylCharts == undefined) {
|
||
this.bsxtylCharts = echarts.init(document.getElementById("bsxtyl"));
|
||
}
|
||
this.bsxtylCharts.setOption(
|
||
this.generateGaugeOption({
|
||
color: ["26DE86", "93DDBA"],
|
||
bgColor: "023E44",
|
||
name: "系统压力",
|
||
value: this.bsxtyl,
|
||
limit: 0.8,
|
||
unit: "bar",
|
||
}),
|
||
true,
|
||
true
|
||
);
|
||
window.addEventListener("resize", () => {
|
||
this.bsxtylCharts && this.bsxtylCharts.resize();
|
||
});
|
||
|
||
this.bsxtywCharts = echarts.getInstanceByDom(document.getElementById("bsxtyw")); //可控中高辊底辊液压系统
|
||
if (this.bsxtywCharts == undefined) {
|
||
this.bsxtywCharts = echarts.init(document.getElementById("bsxtyw"));
|
||
}
|
||
this.bsxtywCharts.setOption(
|
||
this.generateGaugeOption({
|
||
color: ["109CFB", "98DAFF"],
|
||
bgColor: "0D3F62",
|
||
name: "系统液温",
|
||
value: this.xtyw,
|
||
limit: 0.8,
|
||
unit: "℃",
|
||
}),
|
||
true,
|
||
true
|
||
);
|
||
window.addEventListener("resize", () => {
|
||
this.bsxtywCharts && this.bsxtywCharts.resize();
|
||
});
|
||
|
||
this.bsxtyweiCharts = echarts.getInstanceByDom(document.getElementById("bsxtywei")); //可控中高辊底辊液压系统
|
||
if (this.bsxtyweiCharts == undefined) {
|
||
this.bsxtyweiCharts = echarts.init(document.getElementById("bsxtywei"));
|
||
}
|
||
let yMax = 1;
|
||
let option = {
|
||
grid: {
|
||
bottom: "20%",
|
||
top: "20%",
|
||
right: "0%",
|
||
left: "60%",
|
||
},
|
||
title: {
|
||
show: false,
|
||
left: "center",
|
||
bottom: "bottom",
|
||
text: "系统液位(CP)",
|
||
textStyle: {
|
||
//标题内容的样式
|
||
color: "#ffffff",
|
||
fontWeight: "normal",
|
||
fontSize: 16,
|
||
color: "#188df0",
|
||
},
|
||
},
|
||
xAxis: {
|
||
data: ["数据", "占位"],
|
||
show: false,
|
||
},
|
||
yAxis: {
|
||
show: false,
|
||
max: yMax,
|
||
},
|
||
series: [{
|
||
type: "bar",
|
||
showBackground: true,
|
||
backgroundStyle: {
|
||
color: "#0D3B59",
|
||
},
|
||
barWidth: "30",
|
||
label: {
|
||
show: true,
|
||
position: "top",
|
||
fontSize: 16,
|
||
color: "#fff",
|
||
},
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: "#00BFFF"
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: "#00FFDD"
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#00F28D"
|
||
},
|
||
]),
|
||
},
|
||
data: [this.bsxtywei],
|
||
}, ],
|
||
};
|
||
this.bsxtyweiCharts.setOption(option, true, true);
|
||
window.addEventListener("resize", () => {
|
||
this.bsxtyweiCharts && this.bsxtyweiCharts.resize();
|
||
});
|
||
|
||
//ZFSC4中高底辊P/Q特性压区实际压力特性
|
||
this.bssjylChart = echarts.getInstanceByDom(document.getElementById("bssjyltx")); //可控中高辊底辊液压系统
|
||
if (this.bssjylChart == undefined) {
|
||
this.bssjylChart = echarts.init(document.getElementById("bssjyltx"));
|
||
}
|
||
let sjylOption = {
|
||
title: {
|
||
left: "center",
|
||
text: "压区实际压力特性",
|
||
textStyle: {
|
||
//标题内容的样式
|
||
color: "#ffffff",
|
||
fontWeight: "normal",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
// grid: {
|
||
// left: "3%",
|
||
// right: "4%",
|
||
// bottom: "3%",
|
||
// containLabel: true,
|
||
// },
|
||
// xAxis: [
|
||
// {
|
||
// type: "category",
|
||
// boundaryGap: false,
|
||
// data: this.XDATA,
|
||
// },
|
||
// ],
|
||
yAxis: {
|
||
name: "P (bar)"
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "cross",
|
||
label: {
|
||
backgroundColor: "#6a7985",
|
||
},
|
||
},
|
||
},
|
||
series: [{
|
||
name: "一区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.prs1,
|
||
},
|
||
{
|
||
name: "二区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.prs2,
|
||
},
|
||
{
|
||
name: "三区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.prs3,
|
||
},
|
||
{
|
||
name: "四区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.prs4,
|
||
},
|
||
{
|
||
name: "五区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.prs5,
|
||
},
|
||
{
|
||
name: "六区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.prs6,
|
||
},
|
||
{
|
||
name: "七区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.prs7,
|
||
},
|
||
{
|
||
name: "八区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.prs8,
|
||
},
|
||
{
|
||
name: "九区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.prs9,
|
||
},
|
||
{
|
||
name: "十区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.prs10,
|
||
},
|
||
{
|
||
name: "十一区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
symbol: "none",
|
||
|
||
data: this.showdata.prs11,
|
||
},
|
||
],
|
||
};
|
||
|
||
this.bssjylChart.setOption(this.generateOptions(sjylOption), true, true);
|
||
window.addEventListener("resize", () => {
|
||
this.bssjylChart && this.bssjylChart.resize();
|
||
});
|
||
|
||
//ZFSC4中高底辊P/Q特性压区流量压力特性
|
||
this.bsllylChart = echarts.getInstanceByDom(document.getElementById("bsllyltx")); //可控中高辊底辊液压系统
|
||
if (this.bsllylChart == undefined) {
|
||
this.bsllylChart = echarts.init(document.getElementById("bsllyltx"));
|
||
}
|
||
let llylOption = {
|
||
title: {
|
||
left: "center",
|
||
text: "压区流量压力特性",
|
||
textStyle: {
|
||
//标题内容的样式
|
||
color: "#ffffff",
|
||
fontWeight: "normal",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
// grid: {
|
||
// left: "3%",
|
||
// right: "4%",
|
||
// bottom: "3%",
|
||
// containLabel: true,
|
||
// },
|
||
// xAxis: [
|
||
// {
|
||
// type: "category",
|
||
// boundaryGap: false,
|
||
// data: this.XDATA,
|
||
// },
|
||
// ],
|
||
yAxis: {
|
||
name: "Q (L/min)"
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "cross",
|
||
label: {
|
||
backgroundColor: "#6a7985",
|
||
},
|
||
},
|
||
},
|
||
series: [{
|
||
name: "一区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.flw1,
|
||
},
|
||
{
|
||
name: "二区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.flw2,
|
||
},
|
||
{
|
||
name: "三区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.flw3,
|
||
},
|
||
{
|
||
name: "四区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.flw4,
|
||
},
|
||
{
|
||
name: "五区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.flw5,
|
||
},
|
||
{
|
||
name: "六区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.flw6,
|
||
},
|
||
{
|
||
name: "七区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.flw7,
|
||
},
|
||
{
|
||
name: "八区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.flw8,
|
||
},
|
||
{
|
||
name: "九区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.flw9,
|
||
},
|
||
{
|
||
name: "十区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.flw10,
|
||
},
|
||
{
|
||
name: "十一区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.flw11,
|
||
},
|
||
],
|
||
};
|
||
this.bsllylChart.setOption(this.generateOptions(llylOption), true, true);
|
||
window.addEventListener("resize", () => {
|
||
this.bsllylChart && this.bsllylChart.resize();
|
||
});
|
||
|
||
//yykldtx 颗粒度特性
|
||
this.bsyykldtxCharts = echarts.getInstanceByDom(document.getElementById("bsyykldtx")); //可控中高辊底辊液压系统
|
||
if (this.bsyykldtxCharts == undefined) {
|
||
this.bsyykldtxCharts = echarts.init(document.getElementById("bsyykldtx"));
|
||
}
|
||
this.bsyykldtxCharts.setOption(
|
||
this.generateOptions2({
|
||
title: {
|
||
left: "center",
|
||
text: "油液颗粒度特性",
|
||
textStyle: {
|
||
//标题内容的样式
|
||
color: "#ffffff",
|
||
fontWeight: "normal",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
xAxis: {
|
||
data: ["4um", "6um", "14um", "21um"],
|
||
},
|
||
yAxis: {
|
||
name: "PM",
|
||
min: 0,
|
||
max: 1,
|
||
interval: 0.2, // 指定刻度间隔
|
||
},
|
||
series: [{
|
||
name: "颗粒度",
|
||
type: "bar",
|
||
barWidth: "30",
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: "#83bff6"
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: "#188df0"
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#188df0"
|
||
},
|
||
]),
|
||
},
|
||
data: [
|
||
this.bsyykld4,
|
||
this.bsyykld6,
|
||
this.bsyykld14,
|
||
this.bsyykld21,
|
||
],
|
||
symbol: "none",
|
||
}, ],
|
||
}),
|
||
true,
|
||
true
|
||
);
|
||
window.addEventListener("resize", () => {
|
||
this.bsyykldtxCharts && this.bsyykldtxCharts.resize();
|
||
});
|
||
//dlnd 动力粘度
|
||
this.bsdlndCharts = echarts.getInstanceByDom(document.getElementById("bsdlnd")); //可控中高辊底辊液压系统
|
||
if (this.bsdlndCharts == undefined) {
|
||
this.bsdlndCharts = echarts.init(document.getElementById("bsdlnd"));
|
||
}
|
||
this.bsdlndCharts.setOption(
|
||
this.generateGaugeOption2({
|
||
color: ["00F28D", "00FFDD", "00BFFF"],
|
||
bgColor: "87a6a8",
|
||
name: "粘度",
|
||
value: parseFloat(this.showdata.sysvisc).toFixed(2),
|
||
limit: 0.8,
|
||
unit: "mm2/s",
|
||
}),
|
||
true,
|
||
true
|
||
);
|
||
window.addEventListener("resize", () => {
|
||
this.bsdlndCharts && this.bsdlndCharts.resize();
|
||
});
|
||
//xdsd 湿度
|
||
this.bsxdsdCharts = echarts.getInstanceByDom(document.getElementById("bsxdsd")); //可控中高辊底辊液压系统
|
||
if (this.bsxdsdCharts == undefined) {
|
||
this.bsxdsdCharts = echarts.init(document.getElementById("bsxdsd"));
|
||
}
|
||
this.bsxdsdCharts.setOption(
|
||
this.generateGaugeOption2({
|
||
color: ["00F28D", "00FFDD", "00BFFF"],
|
||
bgColor: "87a6a8",
|
||
name: "湿度",
|
||
value: parseFloat(this.showdata.syshumid).toFixed(2),
|
||
limit: 0.8,
|
||
unit: "%",
|
||
}),
|
||
true,
|
||
true
|
||
);
|
||
window.addEventListener("resize", () => {
|
||
this.bsxdsdCharts && this.bsxdsdCharts.resize();
|
||
});
|
||
},
|
||
//获取可控中高辊顶辊液压系统数据
|
||
async queryTopScollerDataInit() {
|
||
const {
|
||
data
|
||
} = await listTopScollerData();
|
||
this.XDATA = data.timelist;
|
||
this.showdata = data;
|
||
this.xtyl = parseFloat(data.sysprs).toFixed(2);
|
||
this.xtyw = parseFloat(data.systemp).toFixed(2);
|
||
this.xtywei = parseFloat(data.syslevel).toFixed(2);
|
||
this.xtyweicsz = parseFloat(data.syslevelinit).toFixed(2);
|
||
this.xtyweimin = parseFloat(data.levelmin).toFixed(2);
|
||
this.xtyweimax = parseFloat(data.levelmax).toFixed(2);
|
||
this.yykld4 = parseFloat(data.sysgran4).toFixed(2);
|
||
this.yykld6 = parseFloat(data.sysgran6).toFixed(2);
|
||
this.yykld14 = parseFloat(data.sysgran14).toFixed(2);
|
||
this.yykld21 = parseFloat(data.sysgran21).toFixed(2);
|
||
this.initTopScollerCharts();
|
||
},
|
||
//加载可控中高辊顶辊液压系统数据
|
||
initTopScollerCharts() {
|
||
this.xtylCharts = echarts.getInstanceByDom(document.getElementById("xtyl")); //可控中高辊顶辊液压系统
|
||
if (this.xtylCharts == undefined) {
|
||
this.xtylCharts = echarts.init(document.getElementById("xtyl"));
|
||
}
|
||
this.xtylCharts.setOption(
|
||
this.generateGaugeOption({
|
||
color: ["26DE86", "93DDBA"],
|
||
bgColor: "023E44",
|
||
name: "系统压力",
|
||
value: this.xtyl,
|
||
limit: 0.8,
|
||
unit: "bar",
|
||
}),
|
||
true,
|
||
true
|
||
);
|
||
window.addEventListener("resize", () => {
|
||
this.xtylCharts && this.xtylCharts.resize();
|
||
});
|
||
|
||
this.xtywCharts = echarts.getInstanceByDom(document.getElementById("xtyw")); //可控中高辊顶辊液压系统
|
||
if (this.xtywCharts == undefined) {
|
||
this.xtywCharts = echarts.init(document.getElementById("xtyw"));
|
||
}
|
||
this.xtywCharts.setOption(
|
||
this.generateGaugeOption({
|
||
color: ["109CFB", "98DAFF"],
|
||
bgColor: "0D3F62",
|
||
name: "系统液温",
|
||
value: this.xtyw,
|
||
limit: 0.8,
|
||
unit: "℃",
|
||
}),
|
||
true,
|
||
true
|
||
);
|
||
window.addEventListener("resize", () => {
|
||
this.xtywCharts && this.xtywCharts.resize();
|
||
});
|
||
|
||
this.xtyweiCharts = echarts.getInstanceByDom(document.getElementById("xtywei")); //可控中高辊顶辊液压系统
|
||
if (this.xtyweiCharts == undefined) {
|
||
this.xtyweiCharts = echarts.init(document.getElementById("xtywei"));
|
||
}
|
||
let yMax = 1;
|
||
let option = {
|
||
grid: {
|
||
bottom: "20%",
|
||
top: "20%",
|
||
right: "0%",
|
||
left: "60%",
|
||
},
|
||
title: {
|
||
show: false,
|
||
left: "center",
|
||
bottom: "bottom",
|
||
text: "系统液位(CP)",
|
||
textStyle: {
|
||
//标题内容的样式
|
||
color: "#606266",
|
||
fontWeight: "normal",
|
||
fontSize: 16,
|
||
color: "#188df0",
|
||
},
|
||
},
|
||
xAxis: {
|
||
data: ["数据", "占位"],
|
||
show: false,
|
||
},
|
||
yAxis: {
|
||
show: false,
|
||
max: yMax,
|
||
},
|
||
series: [{
|
||
type: "bar",
|
||
showBackground: true,
|
||
backgroundStyle: {
|
||
color: "#0D3B59",
|
||
},
|
||
barWidth: "30",
|
||
label: {
|
||
show: true,
|
||
position: "top",
|
||
fontSize: 16,
|
||
color: "#fff",
|
||
},
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: "#00BFFF"
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: "#00FFDD"
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#00F28D"
|
||
},
|
||
]),
|
||
},
|
||
data: [this.xtywei],
|
||
}, ],
|
||
};
|
||
this.xtyweiCharts.setOption(option, true, true);
|
||
window.addEventListener("resize", () => {
|
||
this.xtyweiCharts && this.xtyweiCharts.resize();
|
||
});
|
||
//ZFSC4中高底辊P/Q特性压区实际压力特性
|
||
this.sjylChart = echarts.getInstanceByDom(document.getElementById("sjyltx")); //可控中高辊顶辊液压系统
|
||
if (this.sjylChart == undefined) {
|
||
this.sjylChart = echarts.init(document.getElementById("sjyltx"));
|
||
}
|
||
let sjylOption = {
|
||
title: {
|
||
left: "center",
|
||
text: "压区实际压力特性",
|
||
textStyle: {
|
||
//标题内容的样式
|
||
color: "#606266",
|
||
fontWeight: "normal",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
yAxis: {
|
||
name: "P (bar)"
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "cross",
|
||
label: {
|
||
backgroundColor: "#6a7985",
|
||
},
|
||
},
|
||
},
|
||
series: [{
|
||
name: "一区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.prs1,
|
||
},
|
||
{
|
||
name: "二区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.prs2,
|
||
},
|
||
{
|
||
name: "三区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.prs3,
|
||
},
|
||
{
|
||
name: "四区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.prs4,
|
||
},
|
||
{
|
||
name: "五区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.prs5,
|
||
},
|
||
{
|
||
name: "六区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.prs6,
|
||
},
|
||
{
|
||
name: "七区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.prs7,
|
||
},
|
||
{
|
||
name: "八区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.prs8,
|
||
},
|
||
{
|
||
name: "九区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.prs9,
|
||
},
|
||
{
|
||
name: "十区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.prs10,
|
||
},
|
||
{
|
||
name: "十一区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
symbol: "none",
|
||
|
||
data: this.showdata.prs11,
|
||
},
|
||
],
|
||
};
|
||
|
||
this.sjylChart.setOption(this.generateOptions(sjylOption), true, true);
|
||
window.addEventListener("resize", () => {
|
||
this.sjylChart && this.sjylChart.resize();
|
||
});
|
||
|
||
//ZFSC4中高底辊P/Q特性压区流量压力特性
|
||
this.llylChart = echarts.getInstanceByDom(document.getElementById("llyltx")); //可控中高辊顶辊液压系统
|
||
if (this.llylChart == undefined) {
|
||
this.llylChart = echarts.init(document.getElementById("llyltx"));
|
||
}
|
||
let llylOption = {
|
||
title: {
|
||
left: "center",
|
||
text: "压区流量压力特性",
|
||
textStyle: {
|
||
//标题内容的样式
|
||
color: "#606266",
|
||
fontWeight: "normal",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
yAxis: {
|
||
name: "Q (L/min)"
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "cross",
|
||
label: {
|
||
backgroundColor: "#6a7985",
|
||
},
|
||
},
|
||
},
|
||
series: [{
|
||
name: "一区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.flw1,
|
||
},
|
||
{
|
||
name: "二区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.flw2,
|
||
},
|
||
{
|
||
name: "三区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.flw3,
|
||
},
|
||
{
|
||
name: "四区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.flw4,
|
||
},
|
||
{
|
||
name: "五区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.flw5,
|
||
},
|
||
{
|
||
name: "六区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.flw6,
|
||
},
|
||
{
|
||
name: "七区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.flw7,
|
||
},
|
||
{
|
||
name: "八区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.flw8,
|
||
},
|
||
{
|
||
name: "九区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.flw9,
|
||
},
|
||
{
|
||
name: "十区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.flw10,
|
||
},
|
||
{
|
||
name: "十一区",
|
||
type: "line",
|
||
// smooth: true, // 是否平滑
|
||
symbol: "none",
|
||
data: this.showdata.flw11,
|
||
},
|
||
],
|
||
};
|
||
this.llylChart.setOption(this.generateOptions(llylOption), true, true);
|
||
window.addEventListener("resize", () => {
|
||
this.llylChart && this.llylChart.resize();
|
||
});
|
||
|
||
//dlnd 动力粘度
|
||
this.dlndCharts = echarts.getInstanceByDom(document.getElementById("dlnd")); //可控中高辊顶辊液压系统
|
||
if (this.dlndCharts == undefined) {
|
||
this.dlndCharts = echarts.init(document.getElementById("dlnd"));
|
||
}
|
||
this.dlndCharts.setOption(
|
||
this.generateGaugeOption2({
|
||
color: ["00F28D", "00FFDD", "00BFFF"],
|
||
bgColor: "87a6a8",
|
||
name: "粘度",
|
||
value: parseFloat(this.showdata.sysvisc).toFixed(2),
|
||
limit: 0.8,
|
||
unit: "mm2/s",
|
||
}),
|
||
true,
|
||
true
|
||
);
|
||
window.addEventListener("resize", () => {
|
||
this.dlndCharts && this.dlndCharts.resize();
|
||
});
|
||
//xdsd 湿度
|
||
this.xdsdCharts = echarts.getInstanceByDom(document.getElementById("xdsd")); //可控中高辊顶辊液压系统
|
||
if (this.xdsdCharts == undefined) {
|
||
this.xdsdCharts = echarts.init(document.getElementById("xdsd"));
|
||
}
|
||
this.xdsdCharts.setOption(
|
||
this.generateGaugeOption2({
|
||
color: ["00F28D", "00FFDD", "00BFFF"],
|
||
bgColor: "87a6a8",
|
||
name: "湿度",
|
||
value: parseFloat(this.showdata.syshumid).toFixed(2),
|
||
limit: 0.8,
|
||
unit: "%",
|
||
}),
|
||
true,
|
||
true
|
||
);
|
||
window.addEventListener("resize", () => {
|
||
this.xdsdCharts && this.xdsdCharts.resize();
|
||
});
|
||
|
||
//yykldtx 颗粒度特性
|
||
this.yykldtxCharts = echarts.getInstanceByDom(document.getElementById("yykldtx")); //可控中高辊顶辊液压系统
|
||
if (this.yykldtxCharts == undefined) {
|
||
this.yykldtxCharts = echarts.init(document.getElementById("yykldtx"));
|
||
}
|
||
this.yykldtxCharts.setOption(
|
||
this.generateOptions2({
|
||
title: {
|
||
left: "center",
|
||
text: "油液颗粒度特性",
|
||
textStyle: {
|
||
//标题内容的样式
|
||
color: "#606266",
|
||
fontWeight: "normal",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
xAxis: {
|
||
data: ["4um", "6um", "14um", "21um"],
|
||
},
|
||
yAxis: {
|
||
name: "PM",
|
||
min: 0,
|
||
max: 1,
|
||
interval: 0.2, // 指定刻度间隔
|
||
},
|
||
series: [{
|
||
name: "颗粒度",
|
||
type: "bar",
|
||
barWidth: "30",
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: "#83bff6"
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: "#188df0"
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#188df0"
|
||
},
|
||
]),
|
||
},
|
||
data: [this.yykld4, this.yykld6, this.yykld14, this.yykld21],
|
||
symbol: "none",
|
||
}, ],
|
||
}),
|
||
true,
|
||
true
|
||
);
|
||
window.addEventListener("resize", () => {
|
||
this.yykldtxCharts && this.yykldtxCharts.resize();
|
||
});
|
||
},
|
||
//加载超压底缸加压液压系统Echarts图
|
||
initBottomCylCharts() {
|
||
//ZFSC4超压平衡缸P/Q特性
|
||
//传动侧加压压力变化曲线
|
||
this.cdcjyylqxCharts = echarts.getInstanceByDom(document.getElementById("cdcjyylqx")); //超压底缸加压液压系统
|
||
if (this.cdcjyylqxCharts == undefined) {
|
||
this.cdcjyylqxCharts = echarts.init(document.getElementById("cdcjyylqx"));
|
||
}
|
||
this.cdcjyylqxCharts.setOption(
|
||
this.generateOptions({
|
||
title: {
|
||
left: "center",
|
||
text: "传动侧加压压力变化曲线",
|
||
textStyle: {
|
||
//标题内容的样式
|
||
color: "#606266",
|
||
fontWeight: "normal",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
yAxis: {
|
||
name: "P(bar)"
|
||
},
|
||
series: [{
|
||
name: "软辊实际压力",
|
||
type: "line",
|
||
areaStyle: {
|
||
opacity: 0.2,
|
||
},
|
||
data: this.showdata.drivensoftrealpress,
|
||
symbol: "none",
|
||
},
|
||
{
|
||
name: "热辊实际压力",
|
||
type: "line",
|
||
areaStyle: {
|
||
opacity: 0.2,
|
||
},
|
||
data: this.showdata.drivenhotrealpress,
|
||
symbol: "none",
|
||
},
|
||
],
|
||
}),
|
||
true,
|
||
true
|
||
);
|
||
window.addEventListener("resize", () => {
|
||
this.cdcjyylqxCharts && this.cdcjyylqxCharts.resize();
|
||
});
|
||
//传动侧流量变化曲线
|
||
this.cdcllbhqxCharts = echarts.getInstanceByDom(document.getElementById("cdcllbhqx")); //超压底缸加压液压系统
|
||
if (this.cdcllbhqxCharts == undefined) {
|
||
this.cdcllbhqxCharts = echarts.init(document.getElementById("cdcllbhqx"));
|
||
}
|
||
this.cdcllbhqxCharts.setOption(
|
||
this.generateOptions({
|
||
title: {
|
||
left: "center",
|
||
text: "传动侧流量变化曲线",
|
||
textStyle: {
|
||
//标题内容的样式
|
||
color: "#606266",
|
||
fontWeight: "normal",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
yAxis: {
|
||
name: "Q(L/min)"
|
||
},
|
||
series: [{
|
||
name: "软辊",
|
||
type: "line",
|
||
areaStyle: {
|
||
opacity: 0.2,
|
||
},
|
||
data: this.showdata.oprsoftflw,
|
||
symbol: "none",
|
||
},
|
||
{
|
||
name: "热辊",
|
||
type: "line",
|
||
areaStyle: {
|
||
opacity: 0.2,
|
||
},
|
||
data: this.showdata.oprhotflw,
|
||
symbol: "none",
|
||
},
|
||
],
|
||
}),
|
||
true,
|
||
true
|
||
);
|
||
window.addEventListener("resize", () => {
|
||
this.cdcllbhqxCharts && this.cdcllbhqxCharts.resize();
|
||
});
|
||
//操作侧加压压力变化曲线
|
||
this.czcjyylqxCharts = echarts.getInstanceByDom(document.getElementById("czcjyylqx")); //超压底缸加压液压系统
|
||
if (this.czcjyylqxCharts == undefined) {
|
||
this.czcjyylqxCharts = echarts.init(document.getElementById("czcjyylqx"));
|
||
}
|
||
this.czcjyylqxCharts.setOption(
|
||
this.generateOptions({
|
||
title: {
|
||
left: "center",
|
||
text: "操作侧加压压力变化曲线",
|
||
textStyle: {
|
||
//标题内容的样式
|
||
color: "#606266",
|
||
fontWeight: "normal",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
yAxis: {
|
||
name: "P(bar)"
|
||
},
|
||
series: [{
|
||
name: "软辊实际压力",
|
||
type: "line",
|
||
areaStyle: {
|
||
opacity: 0.2,
|
||
},
|
||
data: this.showdata.oprsoftrealpress,
|
||
symbol: "none",
|
||
},
|
||
{
|
||
name: "热辊实际压力",
|
||
type: "line",
|
||
areaStyle: {
|
||
opacity: 0.2,
|
||
},
|
||
data: this.showdata.oprhotrealpress,
|
||
symbol: "none",
|
||
},
|
||
],
|
||
}),
|
||
true,
|
||
true
|
||
);
|
||
window.addEventListener("resize", () => {
|
||
this.czcjyylqxCharts && this.czcjyylqxCharts.resize();
|
||
});
|
||
//操作侧流量变化曲线
|
||
this.czcllbhqxCharts = echarts.getInstanceByDom(document.getElementById("czcllbhqx")); //超压底缸加压液压系统
|
||
if (this.czcllbhqxCharts == undefined) {
|
||
this.czcllbhqxCharts = echarts.init(document.getElementById("czcllbhqx"));
|
||
}
|
||
this.czcllbhqxCharts.setOption(
|
||
this.generateOptions({
|
||
title: {
|
||
left: "center",
|
||
text: "操作侧流量变化曲线",
|
||
textStyle: {
|
||
//标题内容的样式
|
||
color: "#606266",
|
||
fontWeight: "normal",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
yAxis: {
|
||
name: "Q(L/min)"
|
||
},
|
||
series: [{
|
||
name: "软辊",
|
||
type: "line",
|
||
areaStyle: {
|
||
opacity: 0.2,
|
||
},
|
||
data: this.showdata.drivensoftflw,
|
||
symbol: "none",
|
||
},
|
||
{
|
||
name: "热辊",
|
||
type: "line",
|
||
areaStyle: {
|
||
opacity: 0.2,
|
||
},
|
||
data: this.showdata.drivenhotflw,
|
||
symbol: "none",
|
||
},
|
||
],
|
||
}),
|
||
true,
|
||
true
|
||
);
|
||
window.addEventListener("resize", () => {
|
||
this.czcllbhqxCharts && this.czcllbhqxCharts.resize();
|
||
});
|
||
//传动侧压力变化曲线
|
||
this.cdcylbhqxCharts = echarts.getInstanceByDom(document.getElementById("cdcylbhqx")); //超压底缸加压液压系统
|
||
if (this.cdcylbhqxCharts == undefined) {
|
||
this.cdcylbhqxCharts = echarts.init(document.getElementById("cdcylbhqx"));
|
||
}
|
||
this.cdcylbhqxCharts.setOption(
|
||
this.generateOptions({
|
||
title: {
|
||
left: "center",
|
||
text: "传动侧压力变化曲线",
|
||
textStyle: {
|
||
//标题内容的样式
|
||
color: "#606266",
|
||
fontWeight: "normal",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
yAxis: {
|
||
name: "P(bar)"
|
||
},
|
||
series: [{
|
||
name: "底缸加压实际压力",
|
||
type: "line",
|
||
areaStyle: {
|
||
opacity: 0.2,
|
||
},
|
||
data: this.showdata.oprbottompress,
|
||
symbol: "none",
|
||
}, ],
|
||
}),
|
||
true,
|
||
true
|
||
);
|
||
window.addEventListener("resize", () => {
|
||
this.cdcylbhqxCharts && this.cdcylbhqxCharts.resize();
|
||
});
|
||
//操作侧压力变化曲线
|
||
this.czcylbhqxCharts = echarts.getInstanceByDom(document.getElementById("czcylbhqx")); //超压底缸加压液压系统
|
||
if (this.czcylbhqxCharts == undefined) {
|
||
this.czcylbhqxCharts = echarts.init(document.getElementById("czcylbhqx"));
|
||
}
|
||
this.czcylbhqxCharts.setOption(
|
||
this.generateOptions({
|
||
title: {
|
||
left: "center",
|
||
text: "操作侧压力变化曲线",
|
||
textStyle: {
|
||
//标题内容的样式
|
||
color: "#606266",
|
||
fontWeight: "normal",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
yAxis: {
|
||
name: "P(bar)"
|
||
},
|
||
series: [{
|
||
name: "底缸加压实际压力",
|
||
type: "line",
|
||
areaStyle: {
|
||
opacity: 0.2,
|
||
},
|
||
data: this.showdata.drivenbottompress,
|
||
symbol: "none",
|
||
}, ],
|
||
}),
|
||
true,
|
||
true
|
||
);
|
||
window.addEventListener("resize", () => {
|
||
this.czcylbhqxCharts && this.czcylbhqxCharts.resize();
|
||
});
|
||
//传动侧底缸位移特性
|
||
this.cdcdgwytxCharts = echarts.getInstanceByDom(document.getElementById("cdcdgwytx")); //超压底缸加压液压系统
|
||
if (this.cdcdgwytxCharts == undefined) {
|
||
this.cdcdgwytxCharts = echarts.init(document.getElementById("cdcdgwytx"));
|
||
}
|
||
this.cdcdgwytxCharts.setOption(
|
||
this.generateOptions({
|
||
title: {
|
||
left: "center",
|
||
text: "传动侧底缸位移特性",
|
||
textStyle: {
|
||
//标题内容的样式
|
||
color: "#606266",
|
||
fontWeight: "normal",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
yAxis: {
|
||
name: "L(mm)"
|
||
},
|
||
series: [{
|
||
name: "位移",
|
||
type: "line",
|
||
areaStyle: {
|
||
opacity: 0.2,
|
||
},
|
||
data: this.showdata.drivenbottomdis,
|
||
symbol: "none",
|
||
}, ],
|
||
}),
|
||
true,
|
||
true
|
||
);
|
||
window.addEventListener("resize", () => {
|
||
this.cdcdgwytxCharts && this.cdcdgwytxCharts.resize();
|
||
});
|
||
//操作侧底缸位移特性
|
||
this.czcdgwytxCharts = echarts.getInstanceByDom(document.getElementById("czcdgwytx")); //超压底缸加压液压系统
|
||
if (this.czcdgwytxCharts == undefined) {
|
||
this.czcdgwytxCharts = echarts.init(document.getElementById("czcdgwytx"));
|
||
}
|
||
this.czcdgwytxCharts.setOption(
|
||
this.generateOptions({
|
||
title: {
|
||
left: "center",
|
||
text: "操作侧底缸位移特性",
|
||
textStyle: {
|
||
//标题内容的样式
|
||
color: "#606266",
|
||
fontWeight: "normal",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
yAxis: {
|
||
name: "L(mm)"
|
||
},
|
||
series: [{
|
||
name: "位移",
|
||
type: "line",
|
||
areaStyle: {
|
||
opacity: 0.2,
|
||
},
|
||
data: this.showdata.oprbottomdis,
|
||
symbol: "none",
|
||
}, ],
|
||
}),
|
||
true,
|
||
true
|
||
);
|
||
window.addEventListener("resize", () => {
|
||
this.czcdgwytxCharts && this.czcdgwytxCharts.resize();
|
||
});
|
||
//系统压力
|
||
this.cylxtylCharts = echarts.getInstanceByDom(document.getElementById("cylxtyl")); //超压底缸加压液压系统
|
||
if (this.cylxtylCharts == undefined) {
|
||
this.cylxtylCharts = echarts.init(document.getElementById("cylxtyl"));
|
||
}
|
||
this.cylxtylCharts.setOption(
|
||
this.generateGaugeOption({
|
||
color: ["26DE86", "93DDBA"],
|
||
bgColor: "023E44",
|
||
name: "系统压力",
|
||
value: this.cylxtyl,
|
||
limit: 0.8,
|
||
unit: "bar",
|
||
}),
|
||
true,
|
||
true
|
||
);
|
||
window.addEventListener("resize", () => {
|
||
this.cylxtylCharts && this.cylxtylCharts.resize();
|
||
});
|
||
|
||
//系统液温
|
||
this.cylxtywCharts = echarts.getInstanceByDom(document.getElementById("cylxtyw")); //超压底缸加压液压系统
|
||
if (this.cylxtywCharts == undefined) {
|
||
this.cylxtywCharts = echarts.init(document.getElementById("cylxtyw"));
|
||
}
|
||
this.cylxtywCharts.setOption(
|
||
this.generateGaugeOption({
|
||
color: ["109CFB", "98DAFF"],
|
||
bgColor: "0D3F62",
|
||
name: "系统液温",
|
||
value: this.cylxtyw,
|
||
limit: 0.8,
|
||
unit: "℃",
|
||
}),
|
||
true,
|
||
true
|
||
);
|
||
window.addEventListener("resize", () => {
|
||
this.cylxtywCharts && this.cylxtywCharts.resize();
|
||
});
|
||
|
||
//系统液位
|
||
this.cylxtyweiCharts = echarts.getInstanceByDom(document.getElementById("cylxtywei")); //超压底缸加压液压系统
|
||
if (this.cylxtyweiCharts == undefined) {
|
||
this.cylxtyweiCharts = echarts.init(document.getElementById("cylxtywei"));
|
||
}
|
||
let yMax = 1;
|
||
let option = {
|
||
grid: {
|
||
bottom: "10%",
|
||
top: "20%",
|
||
right: "0%",
|
||
left: "60%",
|
||
},
|
||
title: {
|
||
show: false,
|
||
left: "center",
|
||
bottom: "bottom",
|
||
text: "系统液位(CP)",
|
||
textStyle: {
|
||
//标题内容的样式
|
||
color: "#606266",
|
||
fontWeight: "normal",
|
||
fontSize: 16,
|
||
color: "#188df0",
|
||
},
|
||
},
|
||
xAxis: {
|
||
data: ["数据", "占位"],
|
||
show: false,
|
||
},
|
||
yAxis: {
|
||
show: false,
|
||
max: yMax,
|
||
},
|
||
series: [{
|
||
type: "bar",
|
||
showBackground: true,
|
||
backgroundStyle: {
|
||
color: "#0D3B59",
|
||
},
|
||
barWidth: "30",
|
||
label: {
|
||
show: true,
|
||
position: "top",
|
||
fontSize: 16,
|
||
color: "#fff",
|
||
},
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: "#00BFFF"
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: "#00FFDD"
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#00F28D"
|
||
},
|
||
]),
|
||
},
|
||
data: [this.cylxtywei],
|
||
}, ],
|
||
};
|
||
this.cylxtyweiCharts.setOption(option, true, true);
|
||
window.addEventListener("resize", () => {
|
||
this.cylxtyweiCharts && this.cylxtyweiCharts.resize();
|
||
});
|
||
|
||
//dlnd 动力粘度
|
||
this.cyldlndCharts = echarts.getInstanceByDom(document.getElementById("cyldlnd")); //超压底缸加压液压系统
|
||
if (this.cyldlndCharts == undefined) {
|
||
this.cyldlndCharts = echarts.init(document.getElementById("cyldlnd"));
|
||
}
|
||
this.cyldlndCharts.setOption(
|
||
this.generateGaugeOption2({
|
||
color: ["00F28D", "00FFDD", "00BFFF"],
|
||
bgColor: "87a6a8",
|
||
name: "粘度",
|
||
value: parseFloat(this.showdata.sysvisc).toFixed(2),
|
||
limit: 0.8,
|
||
unit: "mm2/s",
|
||
}),
|
||
true,
|
||
true
|
||
);
|
||
window.addEventListener("resize", () => {
|
||
this.cyldlndCharts && this.cyldlndCharts.resize();
|
||
});
|
||
//xdsd 湿度
|
||
this.cylxdsdCharts = echarts.getInstanceByDom(document.getElementById("cylxdsd")); //超压底缸加压液压系统
|
||
if (this.cylxdsdCharts == undefined) {
|
||
this.cylxdsdCharts = echarts.init(document.getElementById("cylxdsd"));
|
||
}
|
||
this.cylxdsdCharts.setOption(
|
||
this.generateGaugeOption2({
|
||
color: ["00F28D", "00FFDD", "00BFFF"],
|
||
bgColor: "87a6a8",
|
||
name: "湿度",
|
||
value: parseFloat(this.showdata.syshumid).toFixed(2),
|
||
limit: 0.8,
|
||
unit: "%",
|
||
}),
|
||
true,
|
||
true
|
||
);
|
||
window.addEventListener("resize", () => {
|
||
this.cylxdsdCharts && this.cylxdsdCharts.resize();
|
||
});
|
||
|
||
//yykldtx 颗粒度特性
|
||
this.cylyykldtxCharts = echarts.getInstanceByDom(document.getElementById("cylyykldtx")); //超压底缸加压液压系统
|
||
if (this.cylyykldtxCharts == undefined) {
|
||
this.cylyykldtxCharts = echarts.init(document.getElementById("cylyykldtx"));
|
||
}
|
||
this.cylyykldtxCharts.setOption(
|
||
this.generateOptions2({
|
||
title: {
|
||
left: "center",
|
||
text: "油液颗粒度特性",
|
||
textStyle: {
|
||
//标题内容的样式
|
||
color: "#606266",
|
||
fontWeight: "normal",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
xAxis: {
|
||
data: ["4um", "6um", "14um", "21um"],
|
||
},
|
||
yAxis: {
|
||
name: "PM",
|
||
min: 0,
|
||
max: 1,
|
||
interval: 0.2, // 指定刻度间隔
|
||
},
|
||
series: [{
|
||
name: "颗粒度",
|
||
type: "bar",
|
||
barWidth: "30",
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: "#83bff6"
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: "#188df0"
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#188df0"
|
||
},
|
||
]),
|
||
},
|
||
data: [
|
||
this.cylyykld4,
|
||
this.cylyykld6,
|
||
this.cylyykld14,
|
||
this.cylyykld21,
|
||
],
|
||
symbol: "none",
|
||
}, ],
|
||
}),
|
||
true,
|
||
true
|
||
);
|
||
window.addEventListener("resize", () => {
|
||
this.cylyykldtxCharts && this.cylyykldtxCharts.resize();
|
||
});
|
||
},
|
||
generateOptions(option = {}) {
|
||
return merge({
|
||
color: [
|
||
"#306fff",
|
||
"#30c9c9",
|
||
"#f7ad08",
|
||
"#93beff",
|
||
"#80FFA5",
|
||
"#00DDFF",
|
||
"#37A2FF",
|
||
"#FF0087",
|
||
"#FFBF00",
|
||
"#5470c6",
|
||
"#91cc75",
|
||
"#fac858",
|
||
"#ee6666",
|
||
"#73c0de",
|
||
"#3ba272",
|
||
"#fc8452",
|
||
"#9a60b4",
|
||
"#ea7ccc",
|
||
],
|
||
tooltip: {
|
||
show: true,
|
||
trigger: "axis",
|
||
},
|
||
xAxis: {
|
||
show: true,
|
||
name: "",
|
||
nameLocation: "end", // 坐标轴名称及显示位置，可以时start和middle
|
||
nameTextStyle: {
|
||
// 坐标轴名称的样式
|
||
color: "#9b9ba4",
|
||
},
|
||
nameGap: 15, // 坐标轴名称与轴线的距离
|
||
inverse: false, // 是否反向坐标轴
|
||
axisLabel: {
|
||
// 刻度标签的样式
|
||
hideOverlap: true, // 隐藏重叠的标签
|
||
color: "#9b9ba4",
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
position: "bottom",
|
||
offset: 0, // 相对正常位置的偏移
|
||
type: "category", // 类目轴，也可以是time， value， 对数轴log
|
||
data: this.XDATA,
|
||
},
|
||
yAxis: {
|
||
name: "",
|
||
nameTextStyle: {
|
||
// 坐标轴名称的样式
|
||
color: "#9b9ba4",
|
||
},
|
||
axisLabel: {
|
||
// 刻度标签的样式
|
||
hideOverlap: true, // 隐藏重叠的标签
|
||
color: "#9b9ba4",
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
minorTick: {
|
||
// 坐标轴刻度线相关配置
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
// 坐标轴在grid区域中的分割线
|
||
show: true,
|
||
lineStyle: {
|
||
type: "dashed",
|
||
color: "rgba(255, 255, 255, 0.3)",
|
||
},
|
||
},
|
||
},
|
||
legend: {
|
||
selectedMode: true,
|
||
show: true,
|
||
// 图例配置
|
||
orient: "horizontal", // horizontal水平布局， vertical垂直布局
|
||
top: "20",
|
||
right: "30",
|
||
padding: 5,
|
||
itemGap: 10, // 各个item之间的距离
|
||
itemWidth: 10, // 图例图形宽度
|
||
itemHeight: 10, // 图例图形高度
|
||
borderRadius: 10,
|
||
textStyle: {
|
||
color: "#d7d8db",
|
||
fontSize: 9,
|
||
},
|
||
lineStyle: {
|
||
type: "dotted",
|
||
opacity: 0,
|
||
},
|
||
},
|
||
grid: {
|
||
left: "10%",
|
||
top: "25%",
|
||
right: "6%",
|
||
bottom: "12%",
|
||
},
|
||
},
|
||
option,
|
||
(objVal, srcVal) => {
|
||
if (isArray(objVal)) return srcVal;
|
||
}
|
||
);
|
||
},
|
||
generateGaugeOption(
|
||
option = {
|
||
color: ["0DDF7A"],
|
||
bgColor: "fff",
|
||
name: "",
|
||
value: 0,
|
||
limit: 1,
|
||
}
|
||
) {
|
||
return merge({
|
||
series: [{
|
||
type: "gauge",
|
||
center: ["50%", "60%"],
|
||
startAngle: 220,
|
||
endAngle: -40,
|
||
min: 0,
|
||
max: option.limit,
|
||
splitNumber: 12,
|
||
progress: {
|
||
show: true,
|
||
width: 20,
|
||
itemStyle: {
|
||
color: {
|
||
type: "linear",
|
||
x: 0.8,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [{
|
||
offset: 0,
|
||
color: "#" + option.color[1], // 0% 处的颜色
|
||
},
|
||
// {
|
||
// offset: 0.5,
|
||
// color: "#" + option.color[1], // 50% 处的颜色
|
||
// },
|
||
{
|
||
offset: 1,
|
||
color: "#" + option.color[0], // 100% 处的颜色
|
||
},
|
||
],
|
||
|
||
global: false,
|
||
},
|
||
},
|
||
},
|
||
pointer: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
width: 20,
|
||
color: [
|
||
[1, "#" + option.bgColor]
|
||
],
|
||
// color: [
|
||
// [0.25, "#FF6E76"],
|
||
// [0.5, "#FDDD60"],
|
||
// [0.75, "#58D9F9"],
|
||
// [1, "#7CFFB2"],
|
||
// ],
|
||
},
|
||
},
|
||
axisTick: {
|
||
distance: -30,
|
||
splitNumber: 3,
|
||
lineStyle: {
|
||
width: 1,
|
||
color: "#" + option.color[0],
|
||
},
|
||
},
|
||
splitLine: {
|
||
distance: -40,
|
||
length: 10,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: "#" + option.color[0],
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
anchor: {
|
||
show: false,
|
||
},
|
||
title: {
|
||
show: false,
|
||
fontSize: 16,
|
||
color: "#" + option.color[0],
|
||
offsetCenter: [0, "100%"],
|
||
},
|
||
detail: {
|
||
valueAnimation: true,
|
||
width: "60%",
|
||
offsetCenter: [0, 0],
|
||
formatter: "{back| {value} }\n{unit|" + option.unit + "}",
|
||
rich: {
|
||
back: {
|
||
fontSize: 20,
|
||
fontWeight: 700,
|
||
color: "#" + option.color[0],
|
||
},
|
||
unit: {
|
||
fontSize: 12,
|
||
fontWeight: 400,
|
||
color: "#" + option.color[0],
|
||
},
|
||
},
|
||
},
|
||
data: [{
|
||
value: option.value,
|
||
name: "111",
|
||
}, ],
|
||
}, ],
|
||
}, {},
|
||
(objVal, srcVal) => {
|
||
if (isArray(objVal)) return srcVal;
|
||
}
|
||
);
|
||
},
|
||
generateGaugeOption2(
|
||
option = {
|
||
color: ["0DDF7A"],
|
||
bgColor: "fff",
|
||
name: "",
|
||
value: 0,
|
||
limit: 1,
|
||
}
|
||
) {
|
||
return merge({
|
||
series: [{
|
||
type: "gauge",
|
||
center: ["50%", "60%"],
|
||
startAngle: 220,
|
||
endAngle: -40,
|
||
min: 0,
|
||
max: option.limit,
|
||
splitNumber: 12,
|
||
progress: {
|
||
show: true,
|
||
width: 20,
|
||
itemStyle: {
|
||
color: {
|
||
type: "linear",
|
||
x: 0.8,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [{
|
||
offset: 0,
|
||
color: "#" + option.color[2], // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: "#" + option.color[1], // 50% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#" + option.color[0], // 100% 处的颜色
|
||
},
|
||
],
|
||
|
||
global: false,
|
||
},
|
||
},
|
||
},
|
||
pointer: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
width: 20,
|
||
color: [
|
||
[1, "#" + option.bgColor]
|
||
],
|
||
// color: [
|
||
// [0.25, "#FF6E76"],
|
||
// [0.5, "#FDDD60"],
|
||
// [0.75, "#58D9F9"],
|
||
// [1, "#7CFFB2"],
|
||
// ],
|
||
},
|
||
},
|
||
axisTick: {
|
||
distance: -30,
|
||
splitNumber: 3,
|
||
lineStyle: {
|
||
width: 1,
|
||
color: "#" + option.color[0],
|
||
},
|
||
},
|
||
splitLine: {
|
||
distance: -40,
|
||
length: 10,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: "#" + option.color[0],
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
anchor: {
|
||
show: false,
|
||
},
|
||
title: {
|
||
show: true,
|
||
fontSize: 16,
|
||
color: "#" + option.color[0],
|
||
offsetCenter: [0, "80%"],
|
||
},
|
||
detail: {
|
||
valueAnimation: true,
|
||
width: "60%",
|
||
offsetCenter: [0, 0],
|
||
formatter: "{back| {value} }\n{unit|" + option.unit + "}",
|
||
rich: {
|
||
back: {
|
||
align: "center",
|
||
fontSize: 20,
|
||
fontWeight: 700,
|
||
color: "#" + option.color[0],
|
||
},
|
||
unit: {
|
||
fontSize: 12,
|
||
fontWeight: 400,
|
||
color: "#" + option.color[0],
|
||
},
|
||
},
|
||
},
|
||
data: [{
|
||
value: option.value,
|
||
name: option.name,
|
||
}, ],
|
||
}, ],
|
||
}, {},
|
||
(objVal, srcVal) => {
|
||
if (isArray(objVal)) return srcVal;
|
||
}
|
||
);
|
||
},
|
||
generateOptions2(option = {}) {
|
||
return merge({
|
||
color: ["#306fff", "#30c9c9", "#f7ad08", "#93beff"],
|
||
tooltip: {
|
||
show: true,
|
||
trigger: "axis",
|
||
},
|
||
xAxis: {
|
||
show: true,
|
||
name: "",
|
||
nameLocation: "end", // 坐标轴名称及显示位置，可以时start和middle
|
||
nameTextStyle: {
|
||
// 坐标轴名称的样式
|
||
color: "#9b9ba4",
|
||
},
|
||
nameGap: 15, // 坐标轴名称与轴线的距离
|
||
inverse: false, // 是否反向坐标轴
|
||
axisLabel: {
|
||
// 刻度标签的样式
|
||
hideOverlap: true, // 隐藏重叠的标签
|
||
color: "#9b9ba4",
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
position: "bottom",
|
||
offset: 0, // 相对正常位置的偏移
|
||
type: "category", // 类目轴，也可以是time， value， 对数轴log
|
||
},
|
||
yAxis: {
|
||
name: "",
|
||
nameTextStyle: {
|
||
// 坐标轴名称的样式
|
||
color: "#9b9ba4",
|
||
},
|
||
axisLabel: {
|
||
// 刻度标签的样式
|
||
hideOverlap: true, // 隐藏重叠的标签
|
||
color: "#9b9ba4",
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
minorTick: {
|
||
// 坐标轴刻度线相关配置
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
// 坐标轴在grid区域中的分割线
|
||
show: true,
|
||
lineStyle: {
|
||
type: "dashed",
|
||
color: "rgba(255, 255, 255, 0.3)",
|
||
},
|
||
},
|
||
},
|
||
legend: {
|
||
show: true,
|
||
// 图例配置
|
||
orient: "horizontal", // horizontal水平布局， vertical垂直布局
|
||
top: "20",
|
||
right: "30",
|
||
// backgroundColor: "#000000",
|
||
// borderColor: "#ccc",
|
||
// borderWidth: 0,
|
||
padding: 5,
|
||
itemGap: 10, // 各个item之间的距离
|
||
itemWidth: 10, // 图例图形宽度
|
||
itemHeight: 10, // 图例图形高度
|
||
borderRadius: 10,
|
||
textStyle: {
|
||
color: "#d7d8db",
|
||
fontSize: 9,
|
||
},
|
||
lineStyle: {
|
||
type: "dotted",
|
||
opacity: 0,
|
||
},
|
||
},
|
||
grid: {
|
||
left: "10%",
|
||
top: "25%",
|
||
right: "6%",
|
||
bottom: "12%",
|
||
},
|
||
},
|
||
option,
|
||
(objVal, srcVal) => {
|
||
if (isArray(objVal)) return srcVal;
|
||
}
|
||
);
|
||
},
|
||
//加载超压底缸加压液压系统数据
|
||
async queryBottomCylDataInit() {
|
||
const {
|
||
data
|
||
} = await listBottomCylData();
|
||
// console.log("数据：", data);
|
||
this.showdata = data;
|
||
this.XDATA = data.timelist;
|
||
this.cylxtyl = parseFloat(data.sysprs).toFixed(2); //压力
|
||
this.cylxtyw = parseFloat(data.systemp).toFixed(2); //液温
|
||
this.cylxtywei = parseFloat(data.syslevel).toFixed(2); //液位
|
||
this.cylxtyweicsz = parseFloat(data.syslevelinit).toFixed(2); //液位初始
|
||
this.cylxtyweimin = parseFloat(data.levelmin).toFixed(2); //液位最小
|
||
this.cylxtyweimax = parseFloat(data.levelmax).toFixed(2); //液位最大
|
||
this.bscll = parseFloat(data.sysflw).toFixed(2); //泵流量
|
||
this.cylscxl = parseFloat(data.syseff).toFixed(2); //效率
|
||
this.cylzdjsjgl = parseFloat(data.syspower).toFixed(2); //电机实机功率
|
||
this.cylzdjdl = parseFloat(data.syscur.slice(-1)[0]).toFixed(2); //主电机电流
|
||
this.cylyykld4 = parseFloat(data.sysgran4).toFixed(2); //4mm颗粒
|
||
this.cylyykld6 = parseFloat(data.sysgran6).toFixed(2); //6mm颗粒
|
||
this.cylyykld14 = parseFloat(data.sysgran14).toFixed(2); //14mm颗粒
|
||
this.cylyykld21 = parseFloat(data.sysgran21).toFixed(2); //21mm颗粒
|
||
this.initBottomCylCharts();
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import "@/components/colorui/main.css";
|
||
@import "@/components/colorui/icon.css";
|
||
|
||
::v-deep .lime-echart__canvas {
|
||
width: 90% !important;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.cu-card-container {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 50%);
|
||
}
|
||
|
||
.cu-avatar {
|
||
background: transparent !important;
|
||
}
|
||
|
||
.iconfont {
|
||
font-size: 32px;
|
||
color: var(--color);
|
||
}
|
||
|
||
.flex-sub {
|
||
font-size: 12px;
|
||
color: #8c8c8c;
|
||
}
|
||
|
||
.flex-sub .item-title {
|
||
font-size: 12px !important;
|
||
}
|
||
|
||
.flex-sub .item-count {
|
||
color: #333;
|
||
font-size: 16px;
|
||
margin-right: 2px;
|
||
}
|
||
|
||
.container {
|
||
width: 100%;
|
||
height: 300px;
|
||
}
|
||
|
||
.echart-btns-group {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 33%);
|
||
}
|
||
|
||
.echart-btns-group uni-button {
|
||
border-radius: 16px;
|
||
border: 1px solid #ddd;
|
||
}
|
||
|
||
/* 卡片的样式 start */
|
||
.card-group .cu-card .cu-item {
|
||
box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
|
||
}
|
||
|
||
.card-group .card-title {
|
||
left: 20px !important;
|
||
color: #333;
|
||
font-weight: 600;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: calc(100% - 20px) !important;
|
||
}
|
||
|
||
.card-group .card-title .label-btn {
|
||
margin: 0;
|
||
border-top-right-radius: 0;
|
||
border-bottom-right-radius: 0;
|
||
border-top-left-radius: 16px;
|
||
border-bottom-left-radius: 16px;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.card-group .cu-list.menu-avatar>.cu-item {
|
||
height: 50px;
|
||
}
|
||
|
||
.card-group .cu-list.menu-avatar>.cu-item:after {
|
||
border-bottom: none !important;
|
||
}
|
||
|
||
.card-group .content-container {
|
||
padding-left: 20px;
|
||
color: #909399;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.card-group .content-container .text-content .iconfont {
|
||
font-size: 16px;
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.card-group .content-container .text-content .text-description {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.card-group .text-bottom {
|
||
margin: 0 20px;
|
||
border-top: 1px dotted #aaa;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 6px 0;
|
||
}
|
||
|
||
.uni-section {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
/* 卡片的样式 end */
|
||
/*tab的样式 start */
|
||
.tab_nav {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #fff;
|
||
margin: 12px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.tab_nav .navTitle {
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
font-family: Alibaba PuHuiTi;
|
||
color: #333;
|
||
}
|
||
|
||
.active {
|
||
position: relative;
|
||
color: #1f75fe;
|
||
}
|
||
|
||
.active::after {
|
||
content: "";
|
||
position: absolute;
|
||
width: 100rpx;
|
||
height: 4rpx;
|
||
background-color: #1f75fe;
|
||
left: 0px;
|
||
right: 0px;
|
||
bottom: 0px;
|
||
margin: auto;
|
||
}
|
||
|
||
.nav_item {
|
||
margin: 12px;
|
||
border-radius: 4px;
|
||
background: #fff;
|
||
padding: 12px 24px;
|
||
}
|
||
|
||
.nav_item .tabitem-container {
|
||
margin-bottom: 12px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.nav_item .tabitem-container .tabitem-title {
|
||
color: #aaa;
|
||
margin-bottom: 3px;
|
||
}
|
||
|
||
.nav_item .tabitem-container .tabitem-content {
|
||
color: #666;
|
||
}
|
||
|
||
/*tab的样式 end */
|
||
/*form的样式 start*/
|
||
.form-card {
|
||
overflow: unset;
|
||
}
|
||
|
||
/deep/ .uni-forms-item__label {
|
||
width: 100px;
|
||
}
|
||
|
||
.button-group {
|
||
width: 100%;
|
||
text-align: right;
|
||
}
|
||
|
||
.button-group button {
|
||
margin-right: 6px;
|
||
}
|
||
|
||
/*form的样式 end*/
|
||
/*卡片的样式 start*/
|
||
::v-deep .uni-swiper__dots-box {
|
||
display: none;
|
||
}
|
||
|
||
::v-deep uni-swiper-item {
|
||
.content-card-container {
|
||
display: grid;
|
||
width: 100%;
|
||
grid-template-columns: repeat(3, 33.3%);
|
||
padding: 0 2%;
|
||
}
|
||
|
||
.content-card-wrap {
|
||
border: 1px solid #ebeef5;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
background-color: #fff;
|
||
margin: 0 4px;
|
||
padding: 10px;
|
||
box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
|
||
|
||
.content-container {
|
||
.content-icon-wrap {
|
||
text-align: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.content-title-wrap {
|
||
text-align: center;
|
||
color: #8c8c8c;
|
||
font-size: 12px;
|
||
|
||
.content-title {}
|
||
|
||
.content-subTitle {
|
||
.content-count {
|
||
font-size: 16px;
|
||
color: #333;
|
||
margin-right: 4px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
::v-deep .uni-card--full {
|
||
display: inline-block;
|
||
}
|
||
|
||
.swiper-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 200px;
|
||
color: #fff;
|
||
}
|
||
|
||
.iconfont-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.icon-right-arrow {
|
||
font-size: 38px;
|
||
color: #ccc;
|
||
|
||
&.icon-revert {
|
||
transform: rotate(180deg);
|
||
}
|
||
}
|
||
|
||
.icon-todo-wrap {
|
||
position: fixed;
|
||
right: calc(15px + var(--window-right));
|
||
bottom: calc(30px + var(--window-bottom));
|
||
box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.3);
|
||
z-index: 11;
|
||
background-color: rgb(0, 122, 255);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 55px;
|
||
height: 55px;
|
||
border-radius: 45px;
|
||
|
||
.iconfont.icon-shouyedaiban {
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.font-size-10 {
|
||
font-size: 10px;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #000000;
|
||
}
|
||
|
||
.font-size-16 {
|
||
font-size: 16px;
|
||
text-align: right;
|
||
font-family: "DS-Digital";
|
||
color: #0ddf7a;
|
||
background-color: #0a2e4b;
|
||
border: 1px #1482d2 dashed;
|
||
width: 50px;
|
||
margin: 0 3px;
|
||
}
|
||
|
||
.yeweiSpan {
|
||
text-align: right;
|
||
padding: 3px;
|
||
color: #0ddf7a;
|
||
font-family: "DS-Digital";
|
||
background-color: #0a2e4b;
|
||
border: 1px #1482d2 dashed;
|
||
margin: 2px;
|
||
display: inline-block;
|
||
width: 50px;
|
||
}
|
||
|
||
/*卡片的样式 end*/
|
||
</style> |