2534 lines
60 KiB
Vue
2534 lines
60 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" @click="handleClickPatrolCount">
|
||
<view class="content-container">
|
||
<view class="content-icon-wrap">
|
||
<uni-icons type="paperplane-filled" size="40" color="#0099FF"></uni-icons>
|
||
</view>
|
||
<view class="content-title-wrap">
|
||
<view class="content-title">巡检任务</view>
|
||
<view class="content-subTitle">
|
||
<text class="content-count">{{patrolCount}}</text>
|
||
次
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</uni-section> -->
|
||
<uni-section title="快捷入口" type="line">
|
||
<swiper class="swiper-box">
|
||
<swiper-item>
|
||
<view class="content-card-container">
|
||
<view class="content-card-wrap" @click="handleClickPatrolCount">
|
||
<view class="content-container">
|
||
<view class="content-icon-wrap">
|
||
<uni-icons type="paperplane-filled" size="40" color="#0099FF"></uni-icons>
|
||
</view>
|
||
<view class="content-title-wrap">
|
||
<view class="content-title">巡检任务</view>
|
||
<view class="content-subTitle">
|
||
<text class="content-count">{{patrolCount}}</text>
|
||
次
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="content-card-wrap" @click="handleClickAllAlarm">
|
||
<view class="content-container">
|
||
<view class="content-icon-wrap">
|
||
<!-- <view :class="'iconfont icon-guzhang1'" :style="{'--color':'#FF0000'}">
|
||
</view> -->
|
||
<view class="content-icon-wrap">
|
||
<uni-icons type="notification-filled" size="40" color="#FF0000"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view class="content-title-wrap">
|
||
<view class="content-title">报警管理</view>
|
||
<view class="content-subTitle">
|
||
<text class="content-count">{{allCount}}</text>
|
||
次
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="content-card-wrap" @click="handleClickProcessedAlarm">
|
||
<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">{{processedCount}}</text>
|
||
次
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="content-card-wrap" @click="handleClickUntreatedAlarm">
|
||
<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">{{untreatedCount}}</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">
|
||
<l-echart ref="cdcjyylqx"></l-echart>
|
||
</uni-row>
|
||
<uni-row style="height: 200px">
|
||
<l-echart ref="cdcllbhqx"></l-echart>
|
||
</uni-row>
|
||
<uni-row style="height: 200px">
|
||
<l-echart ref="czcjyylqx"></l-echart>
|
||
</uni-row>
|
||
<uni-row style="height: 200px">
|
||
<l-echart ref="czcllbhqx"></l-echart>
|
||
</uni-row>
|
||
</uni-section>
|
||
<uni-section title="ZFSC4超压底缸加压压区P/Q特性" type="line">
|
||
<uni-row style="height: 200px">
|
||
<l-echart ref="cdcylbhqx"></l-echart>
|
||
</uni-row>
|
||
<uni-row style="height: 200px">
|
||
<l-echart ref="czcylbhqx"></l-echart>
|
||
</uni-row>
|
||
<uni-row style="height: 200px">
|
||
<l-echart ref="cdcdgwytx"></l-echart>
|
||
</uni-row>
|
||
<uni-row style="height: 200px">
|
||
<l-echart ref="czcdgwytx"></l-echart>
|
||
</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>
|
||
<l-echart ref="cylxtyl"></l-echart>
|
||
</uni-row>
|
||
<uni-row style="height: 200px">
|
||
<view style="height:10%;text-align: center;font-size: 16px;color:#109CFB">系统液温</view>
|
||
<l-echart ref="cylxtyw"></l-echart>
|
||
</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" style="height: 100%;width: 50%;">
|
||
<l-echart ref="cylxtywei"></l-echart>
|
||
</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">
|
||
<l-echart ref="cyldlnd"></l-echart>
|
||
</uni-row>
|
||
<uni-row style="height: 200px">
|
||
<l-echart ref="cylxdsd"></l-echart>
|
||
</uni-row>
|
||
<uni-row style="height: 200px">
|
||
<l-echart ref="cylyykldtx"></l-echart>
|
||
</uni-row>
|
||
</uni-section>
|
||
</view>
|
||
<view v-if="tabIndex === 1">
|
||
<uni-section title="ZFSC4中高顶辊液压压区P/Q特性" type="line">
|
||
<uni-row style="height: 200px;width: 100%;">
|
||
<l-echart ref="sjyltx"></l-echart>
|
||
</uni-row>
|
||
</uni-section>
|
||
<uni-section title="ZFSC4中高顶辊液压压区P/Q特性" type="line">
|
||
<uni-row style="height: 200px">
|
||
<l-echart ref="llyltx"></l-echart>
|
||
</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>
|
||
<l-echart ref="xtyl"></l-echart>
|
||
</uni-row>
|
||
<uni-row style="height: 200px">
|
||
<view style="height:10%;text-align: center;font-size: 16px;color:#109CFB">系统液温</view>
|
||
<l-echart ref="xtyw"></l-echart>
|
||
</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" style="height: 100%;width: 50%;">
|
||
<l-echart ref="xtywei"></l-echart>
|
||
</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">
|
||
<l-echart ref="dlnd"></l-echart>
|
||
</uni-row>
|
||
<uni-row style="height: 200px">
|
||
<l-echart ref="xdsd"></l-echart>
|
||
</uni-row>
|
||
<uni-row style="height: 200px">
|
||
<l-echart ref="yykldtx"></l-echart>
|
||
</uni-row>
|
||
</uni-section>
|
||
</view>
|
||
<view v-if="tabIndex === 2">
|
||
<uni-section title="ZFSC4中高底辊液压压区P/Q特性" type="line">
|
||
<uni-row style="height: 200px">
|
||
<l-echart ref="bssjyltx"></l-echart>
|
||
</uni-row>
|
||
</uni-section>
|
||
<uni-section title="ZFSC4中高底辊液压压区P/Q特性" type="line">
|
||
<uni-row style="height: 200px">
|
||
<l-echart ref="bsllyltx"></l-echart>
|
||
</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>
|
||
<l-echart ref="bsxtyl"></l-echart>
|
||
</uni-row>
|
||
<uni-row style="height: 200px">
|
||
<view style="height:10%;text-align: center;font-size: 16px;color:#109CFB">系统液温</view>
|
||
<l-echart ref="bsxtyw"></l-echart>
|
||
</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" style="height: 100%;width: 50%;">
|
||
<l-echart ref="bsxtywei"></l-echart>
|
||
</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">
|
||
<l-echart ref="bsdlnd"></l-echart>
|
||
</uni-row>
|
||
<uni-row style="height: 200px">
|
||
<l-echart ref="bsxdsd"></l-echart>
|
||
</uni-row>
|
||
<uni-row style="height: 200px">
|
||
<l-echart ref="bsyykldtx"></l-echart>
|
||
</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";
|
||
import {
|
||
getAlarmCount
|
||
} from "@/api/alarm/alarm.js";
|
||
|
||
import {
|
||
getPatrolCount
|
||
} from "@/api/patrol/patrol.js"
|
||
|
||
import LEchart from "@/components/lime-echart/components/l-echart/l-echart.vue";
|
||
import {
|
||
login
|
||
} from "../api/login";
|
||
|
||
export default {
|
||
|
||
components: {
|
||
LEchart,
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
XDATA: [],
|
||
//巡检任务总数
|
||
patrolCount: 0,
|
||
//报警总数
|
||
allCount: 0,
|
||
//已处理数量
|
||
processedCount: 0,
|
||
//未处理数量
|
||
untreatedCount: 0,
|
||
|
||
// 定时任务
|
||
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);
|
||
},
|
||
created() {
|
||
this.getAlarmCount();
|
||
this.getPatrolCount();
|
||
},
|
||
onShow() {
|
||
this.getAlarmCount();
|
||
this.getPatrolCount();
|
||
},
|
||
mounted() {
|
||
this.queryBottomCylDataInit();
|
||
this.intervalTask = setInterval(() => {
|
||
// 查询数据
|
||
this.queryBottomCylDataInit();
|
||
}, 10000);
|
||
},
|
||
methods: {
|
||
handleClickPatrolCount() {
|
||
this.$tab.navigateTo("/pages/work/patrol/listPatrol");
|
||
},
|
||
getPatrolCount() {
|
||
getPatrolCount().then((res) => {
|
||
this.patrolCount = res;
|
||
})
|
||
},
|
||
getAlarmCount() {
|
||
getAlarmCount().then((res) => {
|
||
//报警总数
|
||
this.allCount = res.allCount,
|
||
//已处理数量
|
||
this.processedCount = res.processedCount,
|
||
//未处理数量
|
||
this.untreatedCount = res.untreatedCount
|
||
})
|
||
},
|
||
//点击所有报警
|
||
handleClickAllAlarm() {
|
||
this.$tab.navigateTo("/pages/work/alarm/listAlarm");
|
||
},
|
||
// //点击已处理报警
|
||
// handleClickProcessedAlarm() {
|
||
// this.$tab.navigateTo("/pages/work/alarm/listAlarm?flag=1");
|
||
// },
|
||
// //点击未处理报警
|
||
// handleClickUntreatedAlarm() {
|
||
// this.$tab.navigateTo("/pages/work/alarm/listAlarm?flag=2");
|
||
// },
|
||
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);
|
||
}
|
||
},
|
||
//加载可控中高辊底辊液压系统数据
|
||
queryBottomScollerDataInit() {
|
||
listBottomScollerData().then((res) => {
|
||
this.showdata = res.data;
|
||
this.XDATA = this.showdata.timelist;
|
||
this.bsxtyl = parseFloat(this.showdata.sysprs).toFixed(2);
|
||
this.bsxtyw = parseFloat(this.showdata.systemp).toFixed(2);
|
||
this.bsxtywei = parseFloat(this.showdata.syslevel).toFixed(2);
|
||
this.bsxtyweicsz = parseFloat(this.showdata.syslevelinit).toFixed(2);
|
||
this.bsxtyweimin = parseFloat(this.showdata.levelmin).toFixed(2);
|
||
this.bsxtyweimax = parseFloat(this.showdata.levelmax).toFixed(2);
|
||
this.bsyykld4 = parseFloat(this.showdata.sysgran4).toFixed(2);
|
||
this.bsyykld6 = parseFloat(this.showdata.sysgran6).toFixed(2);
|
||
this.bsyykld14 = parseFloat(this.showdata.sysgran14).toFixed(2);
|
||
this.bsyykld21 = parseFloat(this.showdata.sysgran21).toFixed(2)
|
||
this.initBottomScollerCharts();
|
||
})
|
||
},
|
||
//加载可控中高辊底辊液压系统图
|
||
async initBottomScollerCharts() {
|
||
const bsxtylChart = await this.$refs.bsxtyl.init(echarts);
|
||
bsxtylChart.setOption(
|
||
this.generateGaugeOption({
|
||
color: ["26DE86", "93DDBA"],
|
||
bgColor: "023E44",
|
||
name: "系统压力",
|
||
value: this.bsxtyl,
|
||
limit: 0.8,
|
||
unit: "bar",
|
||
})
|
||
);
|
||
|
||
const bsxtywChart = await this.$refs.bsxtyw.init(echarts);
|
||
bsxtywChart.setOption(
|
||
this.generateGaugeOption({
|
||
color: ["109CFB", "98DAFF"],
|
||
bgColor: "0D3F62",
|
||
name: "系统液温",
|
||
value: this.xtyw,
|
||
limit: 0.8,
|
||
unit: "℃",
|
||
})
|
||
);
|
||
|
||
const bsxtyweiChart = await this.$refs.bsxtywei.init(echarts);
|
||
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.bsxtywei],
|
||
}, ],
|
||
};
|
||
bsxtyweiChart.setOption(option);
|
||
|
||
//ZFSC4中高底辊P/Q特性压区实际压力特性
|
||
const bssjyltxChart = await this.$refs.bssjyltx.init(echarts);
|
||
let sjylOption = {
|
||
title: {
|
||
left: "center",
|
||
text: "压区实际压力特性",
|
||
textStyle: {
|
||
//标题内容的样式
|
||
color: "#606266",
|
||
fontWeight: "normal",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
grid: {
|
||
left: "3%",
|
||
right: "4%",
|
||
bottom: "3%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
boundaryGap: true,
|
||
data: this.XDATA
|
||
},
|
||
yAxis: {
|
||
name: "P (bar)"
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "cross",
|
||
label: {
|
||
backgroundColor: "#6a7985",
|
||
},
|
||
},
|
||
textStyle: {
|
||
fontSize: 8
|
||
},
|
||
},
|
||
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,
|
||
},
|
||
],
|
||
};
|
||
bssjyltxChart.setOption(sjylOption);
|
||
//ZFSC4中高底辊P/Q特性压区流量压力特性
|
||
const bsllyltxChart = await this.$refs.bsllyltx.init(echarts);
|
||
let llylOption = {
|
||
title: {
|
||
left: "center",
|
||
text: "压区流量压力特性",
|
||
textStyle: {
|
||
//标题内容的样式
|
||
color: "#606266",
|
||
fontWeight: "normal",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
grid: {
|
||
left: "3%",
|
||
right: "4%",
|
||
bottom: "3%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
boundaryGap: true,
|
||
data: this.XDATA
|
||
},
|
||
yAxis: {
|
||
name: "Q (L/min)"
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "cross",
|
||
label: {
|
||
backgroundColor: "#6a7985",
|
||
},
|
||
},
|
||
textStyle: {
|
||
fontSize: 8
|
||
},
|
||
},
|
||
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,
|
||
},
|
||
],
|
||
};
|
||
bsllyltxChart.setOption(llylOption);
|
||
//yykldtx 颗粒度特性
|
||
const bsyykldtxChart = await this.$refs.bsyykldtx.init(echarts);
|
||
bsyykldtxChart.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.bsyykld4,
|
||
this.bsyykld6,
|
||
this.bsyykld14,
|
||
this.bsyykld21,
|
||
],
|
||
symbol: "none",
|
||
}, ],
|
||
})
|
||
);
|
||
//dlnd 动力粘度
|
||
const bsdlndChart = await this.$refs.bsdlnd.init(echarts);
|
||
bsdlndChart.setOption(
|
||
this.generateGaugeOption2({
|
||
color: ["00F28D", "00FFDD", "00BFFF"],
|
||
bgColor: "87a6a8",
|
||
name: "粘度",
|
||
value: parseFloat(this.showdata.sysvisc).toFixed(2),
|
||
limit: 0.8,
|
||
unit: "mm2/s",
|
||
})
|
||
);
|
||
//xdsd 湿度
|
||
const bsxdsdChart = await this.$refs.bsxdsd.init(echarts);
|
||
bsxdsdChart.setOption(
|
||
this.generateGaugeOption2({
|
||
color: ["00F28D", "00FFDD", "00BFFF"],
|
||
bgColor: "87a6a8",
|
||
name: "湿度",
|
||
value: parseFloat(this.showdata.syshumid).toFixed(2),
|
||
limit: 0.8,
|
||
unit: "%",
|
||
})
|
||
);
|
||
},
|
||
//获取可控中高辊顶辊液压系统数据
|
||
queryTopScollerDataInit() {
|
||
listTopScollerData().then((res) => {
|
||
this.showdata = res.data;
|
||
this.XDATA = this.showdata.timelist;
|
||
this.xtyl = parseFloat(this.showdata.sysprs).toFixed(2);
|
||
this.xtyw = parseFloat(this.showdata.systemp).toFixed(2);
|
||
this.xtywei = parseFloat(this.showdata.syslevel).toFixed(2);
|
||
this.xtyweicsz = parseFloat(this.showdata.syslevelinit).toFixed(2);
|
||
this.xtyweimin = parseFloat(this.showdata.levelmin).toFixed(2);
|
||
this.xtyweimax = parseFloat(this.showdata.levelmax).toFixed(2);
|
||
this.yykld4 = parseFloat(this.showdata.sysgran4).toFixed(2);
|
||
this.yykld6 = parseFloat(this.showdata.sysgran6).toFixed(2);
|
||
this.yykld14 = parseFloat(this.showdata.sysgran14).toFixed(2);
|
||
this.yykld21 = parseFloat(this.showdata.sysgran21).toFixed(2);
|
||
this.initTopScollerCharts();
|
||
})
|
||
},
|
||
//加载可控中高辊顶辊液压系统数据
|
||
async initTopScollerCharts() {
|
||
const xtylChart = await this.$refs.xtyl.init(echarts);
|
||
xtylChart.setOption(
|
||
this.generateGaugeOption({
|
||
color: ["26DE86", "93DDBA"],
|
||
bgColor: "023E44",
|
||
name: "系统压力",
|
||
value: this.xtyl,
|
||
limit: 0.8,
|
||
unit: "bar",
|
||
})
|
||
);
|
||
|
||
const xtywChart = await this.$refs.xtyw.init(echarts);
|
||
xtywChart.setOption(
|
||
this.generateGaugeOption({
|
||
color: ["109CFB", "98DAFF"],
|
||
bgColor: "0D3F62",
|
||
name: "系统液温",
|
||
value: this.xtyw,
|
||
limit: 0.8,
|
||
unit: "℃",
|
||
})
|
||
);
|
||
|
||
const xtyweiChart = await this.$refs.xtywei.init(echarts);
|
||
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.xtywei],
|
||
}, ],
|
||
};
|
||
xtyweiChart.setOption(option);
|
||
//ZFSC4中高底辊P/Q特性压区实际压力特性
|
||
const sjyltxChart = await this.$refs.sjyltx.init(echarts);
|
||
let sjylOption = {
|
||
title: {
|
||
left: "center",
|
||
text: "压区实际压力特性",
|
||
textStyle: {
|
||
//标题内容的样式
|
||
color: "#606266",
|
||
fontWeight: "normal",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
grid: {
|
||
left: "3%",
|
||
right: "4%",
|
||
bottom: "3%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
boundaryGap: true,
|
||
data: this.XDATA
|
||
},
|
||
yAxis: {
|
||
name: "P (bar)"
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "cross",
|
||
label: {
|
||
backgroundColor: "#6a7985",
|
||
},
|
||
},
|
||
textStyle: {
|
||
fontSize: 8
|
||
},
|
||
},
|
||
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,
|
||
},
|
||
],
|
||
};
|
||
sjyltxChart.setOption(sjylOption);
|
||
//ZFSC4中高底辊P/Q特性压区流量压力特性
|
||
const llyltxChart = await this.$refs.llyltx.init(echarts);
|
||
let llylOption = {
|
||
title: {
|
||
left: "center",
|
||
text: "压区流量压力特性",
|
||
textStyle: {
|
||
//标题内容的样式
|
||
color: "#606266",
|
||
fontWeight: "normal",
|
||
fontSize: 16,
|
||
},
|
||
},
|
||
grid: {
|
||
left: "3%",
|
||
right: "4%",
|
||
bottom: "3%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
boundaryGap: true,
|
||
data: this.XDATA,
|
||
},
|
||
yAxis: {
|
||
name: "Q (L/min)"
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "cross",
|
||
label: {
|
||
backgroundColor: "#6a7985",
|
||
},
|
||
},
|
||
textStyle: {
|
||
fontSize: 8
|
||
},
|
||
},
|
||
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,
|
||
},
|
||
],
|
||
};
|
||
llyltxChart.setOption(llylOption);
|
||
//dlnd 动力粘度
|
||
const dlndChart = await this.$refs.dlnd.init(echarts);
|
||
dlndChart.setOption(
|
||
this.generateGaugeOption2({
|
||
color: ["00F28D", "00FFDD", "00BFFF"],
|
||
bgColor: "87a6a8",
|
||
name: "粘度",
|
||
value: parseFloat(this.showdata.sysvisc).toFixed(2),
|
||
limit: 0.8,
|
||
unit: "mm2/s",
|
||
})
|
||
);
|
||
//xdsd 湿度
|
||
const xdsdChart = await this.$refs.xdsd.init(echarts);
|
||
xdsdChart.setOption(
|
||
this.generateGaugeOption2({
|
||
color: ["00F28D", "00FFDD", "00BFFF"],
|
||
bgColor: "87a6a8",
|
||
name: "湿度",
|
||
value: parseFloat(this.showdata.syshumid).toFixed(2),
|
||
limit: 0.8,
|
||
unit: "%",
|
||
})
|
||
);
|
||
//yykldtx 颗粒度特性
|
||
const yykldtxChart = await this.$refs.yykldtx.init(echarts);
|
||
yykldtxChart.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",
|
||
}, ],
|
||
})
|
||
);
|
||
},
|
||
//加载超压底缸加压液压系统Echarts图
|
||
async initBottomCylCharts() {
|
||
//ZFSC4超压平衡缸P/Q特性
|
||
//传动侧加压压力变化曲线
|
||
const cdcjyylqxChart = await this.$refs.cdcjyylqx.init(echarts);
|
||
cdcjyylqxChart.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",
|
||
},
|
||
],
|
||
})
|
||
);
|
||
//传动侧流量变化曲线
|
||
const cdcllbhqxChart = await this.$refs.cdcllbhqx.init(echarts);
|
||
cdcllbhqxChart.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",
|
||
},
|
||
],
|
||
})
|
||
);
|
||
//操作侧加压压力变化曲线
|
||
const czcjyylqxChart = await this.$refs.czcjyylqx.init(echarts);
|
||
czcjyylqxChart.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",
|
||
},
|
||
],
|
||
})
|
||
);
|
||
//操作侧流量变化曲线
|
||
const czcllbhqxChart = await this.$refs.czcllbhqx.init(echarts);
|
||
czcllbhqxChart.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",
|
||
},
|
||
],
|
||
})
|
||
);
|
||
//传动侧压力变化曲线
|
||
const cdcylbhqxChart = await this.$refs.cdcylbhqx.init(echarts);
|
||
cdcylbhqxChart.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",
|
||
}, ],
|
||
})
|
||
);
|
||
//操作侧压力变化曲线
|
||
const czcylbhqxChart = await this.$refs.czcylbhqx.init(echarts);
|
||
czcylbhqxChart.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",
|
||
}, ],
|
||
})
|
||
);
|
||
//传动侧底缸位移特性
|
||
const cdcdgwytxChart = await this.$refs.cdcdgwytx.init(echarts);
|
||
cdcdgwytxChart.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",
|
||
}, ],
|
||
})
|
||
);
|
||
//操作侧底缸位移特性
|
||
const czcdgwytxChart = await this.$refs.czcdgwytx.init(echarts);
|
||
czcdgwytxChart.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",
|
||
}, ],
|
||
})
|
||
);
|
||
//系统压力
|
||
const cylxtylChart = await this.$refs.cylxtyl.init(echarts);
|
||
cylxtylChart.setOption(
|
||
this.generateGaugeOption({
|
||
color: ["26DE86", "93DDBA"],
|
||
bgColor: "023E44",
|
||
name: "系统压力",
|
||
value: this.cylxtyl,
|
||
limit: 0.8,
|
||
unit: "bar",
|
||
})
|
||
);
|
||
//系统液温
|
||
const cylxtywChart = await this.$refs.cylxtyw.init(echarts);
|
||
cylxtywChart.setOption(
|
||
this.generateGaugeOption({
|
||
color: ["109CFB", "98DAFF"],
|
||
bgColor: "0D3F62",
|
||
name: "系统液温",
|
||
value: this.cylxtyw,
|
||
limit: 0.8,
|
||
unit: "℃",
|
||
})
|
||
);
|
||
//系统液位
|
||
const cylxtyweiChart = await this.$refs.cylxtywei.init(echarts);
|
||
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],
|
||
}, ],
|
||
};
|
||
cylxtyweiChart.setOption(option);
|
||
//dlnd 动力粘度
|
||
const cyldlndChart = await this.$refs.cyldlnd.init(echarts);
|
||
cyldlndChart.setOption(
|
||
this.generateGaugeOption2({
|
||
color: ["00F28D", "00FFDD", "00BFFF"],
|
||
bgColor: "87a6a8",
|
||
name: "粘度",
|
||
value: parseFloat(this.showdata.sysvisc).toFixed(2),
|
||
limit: 0.8,
|
||
unit: "mm2/s",
|
||
})
|
||
);
|
||
//xdsd 湿度
|
||
const cylxdsdChart = await this.$refs.cylxdsd.init(echarts);
|
||
cylxdsdChart.setOption(
|
||
this.generateGaugeOption2({
|
||
color: ["00F28D", "00FFDD", "00BFFF"],
|
||
bgColor: "87a6a8",
|
||
name: "湿度",
|
||
value: parseFloat(this.showdata.syshumid).toFixed(2),
|
||
limit: 0.8,
|
||
unit: "%",
|
||
})
|
||
);
|
||
//yykldtx 颗粒度特性
|
||
const cylyykldtxChart = await this.$refs.cylyykldtx.init(echarts);
|
||
cylyykldtxChart.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",
|
||
}, ],
|
||
})
|
||
);
|
||
},
|
||
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;
|
||
}
|
||
);
|
||
},
|
||
//加载超压底缸加压液压系统数据
|
||
queryBottomCylDataInit() {
|
||
listBottomCylData().then((res) => {
|
||
this.showdata = res.data;
|
||
this.XDATA = this.showdata.timelist;
|
||
this.cylxtyl = parseFloat(this.showdata.sysprs).toFixed(2); //压力
|
||
this.cylxtyw = parseFloat(this.showdata.systemp).toFixed(2); //液温
|
||
this.cylxtywei = parseFloat(this.showdata.syslevel).toFixed(2); //液位
|
||
this.cylxtyweicsz = parseFloat(this.showdata.syslevelinit).toFixed(2); //液位初始
|
||
this.cylxtyweimin = parseFloat(this.showdata.levelmin).toFixed(2); //液位最小
|
||
this.cylxtyweimax = parseFloat(this.showdata.levelmax).toFixed(2); //液位最大
|
||
this.bscll = parseFloat(this.showdata.sysflw).toFixed(2); //泵流量
|
||
this.cylscxl = parseFloat(this.showdata.syseff).toFixed(2); //效率
|
||
this.cylzdjsjgl = parseFloat(this.showdata.syspower).toFixed(2); //电机实机功率
|
||
this.cylzdjdl = parseFloat(this.showdata.syscur.slice(-1)[0]).toFixed(2); //主电机电流
|
||
this.cylyykld4 = parseFloat(this.showdata.sysgran4).toFixed(2); //4mm颗粒
|
||
this.cylyykld6 = parseFloat(this.showdata.sysgran6).toFixed(2); //6mm颗粒
|
||
this.cylyykld14 = parseFloat(this.showdata.sysgran14).toFixed(2); //14mm颗粒
|
||
this.cylyykld21 = parseFloat(this.showdata.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> |