ipc-app/pages/index.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="handleClickAllAlarm">
							<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">{{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 LEchart from "@/components/lime-echart/components/l-echart/l-echart.vue";
	import {
		login
	} from "../api/login";

	export default {

		components: {
			LEchart,
		},

		data() {
			return {
				XDATA: [],
				//报警总数
				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();
		},
		mounted() {
			this.queryBottomCylDataInit();
			this.intervalTask = setInterval(() => {
				// 查询数据
				this.queryBottomCylDataInit();
			}, 10000);
		},
		methods: {
			getAlarmCount() {
				getAlarmCount().then((res) => {
					//报警总数
					this.allCount = res.allCount,
						//已处理数量
						this.processedCount = res.processedCount,
						//未处理数量
						this.untreatedCount = res.untreatedCount
				})
			},
			//点击所有报警
			handleClickAllAlarm() {
				this.$tab.navigateTo("/pages/work/alarm/listAlarm?flag=0");
			},
			//点击已处理报警
			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>