<template>
|
<div class="page-container">
|
<div class="content-container">
|
<div style="width: 18%" class="left-col">
|
<!--返回上一级-->
|
<div class="back-nav" @click="$emit('backToLastSignage','WorkshopSection')" v-if="userType!==1">
|
<dv-decoration-7>上一级</dv-decoration-7>
|
</div>
|
|
<!--当前设备编号-->
|
<dv-border-box-12 style="height: 80px;padding: 0 10px 0">
|
<div class="equipmentId-container">
|
{{equipmentId}}
|
</div>
|
</dv-border-box-12>
|
|
<!--设备列表-->
|
<div style="height: 721px;overflow: auto;margin-top: 20px;">
|
<table>
|
<tr>
|
<th>设备编号</th>
|
<th>型号</th>
|
</tr>
|
<tr v-for="(item,index) in equipmentList" :key="index" @click="selectEquipment(item)"
|
:style="{backgroundColor:equipmentId===item.equipmentId?'#1D94D4':''}">
|
<td>{{item.equipmentId}}</td>
|
<td>{{item.equipmentModel}}</td>
|
</tr>
|
</table>
|
</div>
|
</div>
|
|
<div style="width: 81.8%" class="right-col">
|
<!--右上设备各项信息区域-->
|
<dv-border-box-12 style="height: 50%" class="right-top-row">
|
<!--各项信息展示区域-->
|
<div style="display: flex;height: 70%">
|
<dv-border-box-11 title="设备信息" class="info-container" style="flex:5;">
|
<a-descriptions :column="3">
|
<a-descriptions-item label="统一编号">
|
{{equipmentInfo.num|equipmentInfoDisplay}}
|
</a-descriptions-item>
|
<a-descriptions-item label="ABC标识">
|
{{equipmentInfo.abc|equipmentInfoDisplay}}
|
</a-descriptions-item>
|
<a-descriptions-item label="设备名称">
|
{{equipmentInfo.name|equipmentInfoDisplay}}
|
</a-descriptions-item>
|
<a-descriptions-item label="型号">
|
{{equipmentInfo.model|equipmentInfoDisplay}}
|
</a-descriptions-item>
|
<a-descriptions-item label="设备分类">
|
{{equipmentInfo.equipmentCategoryName|equipmentInfoDisplay}}
|
</a-descriptions-item>
|
<a-descriptions-item label="工区">
|
{{equipmentInfo.areaName|equipmentInfoDisplay}}
|
</a-descriptions-item>
|
<a-descriptions-item label="操作系统">
|
{{equipmentInfo.system|equipmentInfoDisplay}}
|
</a-descriptions-item>
|
<a-descriptions-item label="规格">
|
{{equipmentInfo.specification|equipmentInfoDisplay}}
|
</a-descriptions-item>
|
<a-descriptions-item label="维护部门">
|
{{equipmentInfo.manageName|equipmentInfoDisplay}}
|
</a-descriptions-item>
|
<a-descriptions-item label="工段">
|
{{equipmentInfo.workShopName|equipmentInfoDisplay}}
|
</a-descriptions-item>
|
<a-descriptions-item label="操作工">
|
{{operationCertificateInfo.realname|equipmentInfoDisplay}}
|
</a-descriptions-item>
|
<a-descriptions-item label="设备状态">
|
{{equipmentInfo.equipmentStatus|equipmentInfoDisplay}}
|
</a-descriptions-item>
|
</a-descriptions>
|
</dv-border-box-11>
|
|
<dv-border-box-11 title="操作证信息" class="info-container" style="flex:2;">
|
<a-descriptions :column="1">
|
<a-descriptions-item label="操作证编号">
|
{{operationCertificateInfo.num|equipmentInfoDisplay}}
|
</a-descriptions-item>
|
<a-descriptions-item label="当前周期分数">
|
{{operationCertificateInfo.currentCycleScore|equipmentInfoDisplay}}
|
</a-descriptions-item>
|
<a-descriptions-item label="发证日期">
|
{{operationCertificateInfo.issueDate|equipmentInfoDisplay}}
|
</a-descriptions-item>
|
<a-descriptions-item label="周期截止日期">
|
{{operationCertificateInfo.endTime|equipmentInfoDisplay}}
|
</a-descriptions-item>
|
</a-descriptions>
|
</dv-border-box-11>
|
|
<dv-border-box-11 title="维护信息" class="info-container" style="flex:2;">
|
<a-descriptions :column="1">
|
<a-descriptions-item label="下次三保日期">
|
{{equipmentInfo.nextThirdMaintenanceTime|equipmentInfoDisplay}}
|
</a-descriptions-item>
|
<a-descriptions-item label="下次二保日期">
|
{{equipmentInfo.nextSecondMaintenanceTime|equipmentInfoDisplay}}
|
</a-descriptions-item>
|
<a-descriptions-item label="技术状态">
|
{{equipmentInfo.technology_status|equipmentInfoDisplay}}
|
</a-descriptions-item>
|
</a-descriptions>
|
</dv-border-box-11>
|
</div>
|
|
<!--功能按钮区域-->
|
<div style="display: flex;height: 30%;align-items: center;padding: 0 20px;color: #fff;">
|
<div style="display: flex;justify-content:space-evenly;flex: 1">
|
<div style="width: 45%;" class="info-card-container">
|
<div class="info-card-title">本月报修次数</div>
|
<div class="info-card-value" style="color: #EAC910">{{equipmentInfo.repairCount|equipmentInfoDisplay}}</div>
|
</div>
|
|
<div style="width: 45%;" class="info-card-container">
|
<div class="info-card-title">设备状态</div>
|
<div class="info-card-value">{{equipmentInfo.equipmentStatus|equipmentInfoDisplay}}</div>
|
</div>
|
</div>
|
|
<div style="display: flex;justify-content: space-evenly;font-size: 20px;padding: 0 50px">
|
<div v-for="(item,index) in buttonList" :key="index" @click="navigateToPage(item)"
|
style="width: 200px;height: 70px;margin: 0 10px;cursor: pointer">
|
<dv-decoration-11>{{item.label}}</dv-decoration-11>
|
</div>
|
</div>
|
</div>
|
</dv-border-box-12>
|
|
<!--右下各项数据图表区域-->
|
<dv-border-box-12 style="height: 50%" class="right-bottom-row">
|
<div style="display: flex;justify-content:space-evenly;height: 100%" v-show="isBelongToMdc">
|
<div style="display: flex;flex-wrap: wrap;width: 30%;height: 100%">
|
<div id="gauge_chart1" class="gauge-chart"></div>
|
<div id="gauge_chart2" class="gauge-chart"></div>
|
<div id="gauge_chart3" class="gauge-chart"></div>
|
<div id="gauge_chart4" class="gauge-chart"></div>
|
</div>
|
<div id="line_chart" :style="{width:lineChartWidth,height: '100%'}"></div>
|
<div v-show="isBelongToMdc&&isDisplayEquipmentDetails"
|
style="width: 25%;height:100%;display: flex;align-items: center">
|
<a-descriptions :column="2">
|
<a-descriptions-item label="运行模式">
|
{{equipmentDetails.runModble|equipmentInfoDisplay}}
|
</a-descriptions-item>
|
<a-descriptions-item label="程序号">
|
{{equipmentDetails.sequencenumber|equipmentInfoDisplay}}
|
</a-descriptions-item>
|
<a-descriptions-item label="主轴转速">
|
{{equipmentDetails.spindlespeed|equipmentInfoDisplay}}
|
</a-descriptions-item>
|
<a-descriptions-item label="主轴负荷">
|
{{equipmentDetails.spindleload|equipmentInfoDisplay}}
|
</a-descriptions-item>
|
<a-descriptions-item label="主轴倍率">
|
{{equipmentDetails.spindlebeilv|equipmentInfoDisplay}}
|
</a-descriptions-item>
|
<a-descriptions-item label="进给倍率">
|
{{equipmentDetails.feedbeilv|equipmentInfoDisplay}}
|
</a-descriptions-item>
|
<a-descriptions-item label="报警信息">
|
{{equipmentDetails.alrmstate|equipmentInfoDisplay}}
|
</a-descriptions-item>
|
</a-descriptions>
|
</div>
|
</div>
|
</dv-border-box-12>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import signageApi from '@/api/signage'
|
import moment from 'moment'
|
|
export default {
|
name: 'EquipmentSignage',
|
props: {
|
productionCode: {
|
type: String,
|
default: ''
|
},
|
workshopSectionProductionCode: {
|
type: String,
|
default: ''
|
},
|
userType: {
|
type: Number
|
}
|
},
|
data() {
|
return {
|
equipmentId: '',
|
equipmentList: [],
|
equipmentInfo: {},
|
operationCertificateInfo: {},
|
equipmentDetails: {},
|
buttonList: [
|
{
|
label: '备件信息'
|
},
|
{
|
label: '保养计划'
|
},
|
{
|
label: '报修',
|
pageName: 'eam-MalfunctionRepair'
|
},
|
{
|
label: '设备班次',
|
pageName: 'mdc-base-DeviceCalendar'
|
}
|
],
|
lineChart: '',
|
lineChartWidth: '40%',
|
lineChartData: [],
|
gaugeChart1: '',
|
gaugeChart2: '',
|
gaugeChart3: '',
|
gaugeChart4: '',
|
gaugeChartData: {
|
utilizationRate: 0,
|
startRate: 0,
|
openRate: 0,
|
overallEquipmentEfficiency: 0
|
},
|
hideLoadingDelayTime: 500,
|
isDisplayEquipmentDetails: false,
|
isBelongToMdc: true// 是否在mdc设备表中
|
}
|
},
|
created() {
|
this.equipmentId = this.productionCode
|
},
|
mounted() {
|
window.addEventListener('resize', this.handleWindowResize)
|
this.getOperationCertificateByApi()
|
// 操作工级用户进入时调用接口获取mes设备列表，其余情况获取mdc设备列表
|
if (this.userType !== 1) this.getEquipmentListByApi()
|
else this.getAllAreaEquipmentListByApi()
|
},
|
beforeDestroy() {
|
window.removeEventListener('resize', this.handleWindowResize)
|
},
|
filters: {
|
equipmentInfoDisplay(value) {
|
return value ? value : '无'
|
}
|
},
|
watch: {
|
isDisplayEquipmentDetails: {
|
handler(newVal) {
|
if (newVal) this.lineChartWidth = '40%'
|
else this.lineChartWidth = '65%'
|
this.$nextTick(() => {
|
this.lineChart.resize()
|
})
|
}
|
}
|
},
|
methods: {
|
getOperationCertificateByApi() {
|
signageApi.getOperationCertificateApi()
|
.then(res => {
|
if (res.success && res.result.length > 0) this.operationCertificateInfo = res.result[0]
|
})
|
},
|
|
getEquipmentListByApi() {
|
// 首页一进入即设备级或工段级时，workshopSectionProductionCode为空，默认查询第一个车间中第一个工段下的设备列表
|
signageApi.getEquipmentListApi(this.workshopSectionProductionCode)
|
.then(res => {
|
if (res.success) {
|
this.equipmentList = res.result
|
if (!this.productionCode && this.equipmentList.length > 0) this.equipmentId = this.equipmentList[0].equipmentId
|
}
|
})
|
.finally(() => {
|
// 此处为保证equipmentId正常赋值后再调用接口获取图表数据以及设备详细信息（异步）
|
this.getChartDataByApi()
|
this.getEquipmentInfoByApi()
|
this.getEquipmentDetailsByApi()
|
})
|
},
|
|
getAllAreaEquipmentListByApi() {
|
signageApi.getAllAreaEquipmentListApi(this.workshopSectionProductionCode)
|
.then(res => {
|
if (res.success) {
|
this.equipmentList = res.result
|
this.equipmentList.forEach(item => {
|
item.equipmentId = item.num
|
item.equipmentModel = item.model
|
})
|
if (!this.productionCode && this.equipmentList.length > 0) this.equipmentId = this.equipmentList[0].equipmentId
|
}
|
})
|
.finally(() => {
|
// 此处为保证equipmentId正常赋值后再调用接口获取设备信息和维护信息（异步）
|
this.getEquipmentInfoByApi()
|
})
|
},
|
|
// 获取右上角设备信息和维护信息
|
getEquipmentInfoByApi() {
|
signageApi.getEquipmentInfoApi(this.equipmentId)
|
.then(res => {
|
if (res.success && res.result.length > 0) this.equipmentInfo = res.result[0]
|
else this.equipmentInfo = {}
|
})
|
},
|
|
/* 获取右下角设备详细信息 */
|
getEquipmentDetailsByApi() {
|
signageApi.getEquipmentDetailsApi(this.equipmentId)
|
.then(res => {
|
if (res.success && res.result) {
|
this.equipmentDetails = res.result
|
this.isDisplayEquipmentDetails = true
|
}
|
else this.isDisplayEquipmentDetails = false
|
})
|
},
|
|
/* 右下角图表数据获取汇总方法 */
|
getChartDataByApi() {
|
this.getGaugeChartDataByApi()
|
this.getLineChartDataByApi()
|
},
|
|
/* 单击设备列表中的设备时触发 */
|
selectEquipment(record) {
|
// 避免点击相同设备重复发送请求
|
if (record.equipmentId === this.equipmentId) return
|
this.equipmentId = record.equipmentId
|
|
// 非操作工级时需要传入设备编号以查询图表及设备各项信息数据，操作工级时可将设备列表行信息直接赋值展示
|
if (this.userType !== 1) {
|
this.getChartDataByApi()
|
this.getEquipmentDetailsByApi()
|
this.getEquipmentInfoByApi()
|
} else {
|
this.equipmentInfo = record
|
}
|
},
|
|
/* 单击右边导航栏后触发 */
|
navigateToPage(record) {
|
if (record.pageName) {
|
this.$router.push({
|
name: record.pageName,
|
params: { equipmentId: this.equipmentId }
|
})
|
}
|
},
|
|
/* 调用接口获取设备效率统计 */
|
getGaugeChartDataByApi() {
|
this.gaugeChart1 = this.$echarts.init(document.getElementById('gauge_chart1'))
|
this.gaugeChart2 = this.$echarts.init(document.getElementById('gauge_chart2'))
|
this.gaugeChart3 = this.$echarts.init(document.getElementById('gauge_chart3'))
|
this.gaugeChart4 = this.$echarts.init(document.getElementById('gauge_chart4'))
|
this.gaugeChart1.showLoading({
|
text: '数据加载中 ...',
|
color: '#0696e1', // 加载动画颜色
|
textColor: '#fff',
|
maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
|
})
|
this.gaugeChart2.showLoading({
|
text: '数据加载中 ...',
|
color: '#0696e1', // 加载动画颜色
|
textColor: '#fff',
|
maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
|
})
|
this.gaugeChart3.showLoading({
|
text: '数据加载中 ...',
|
color: '#0696e1', // 加载动画颜色
|
textColor: '#fff',
|
maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
|
})
|
this.gaugeChart4.showLoading({
|
text: '数据加载中 ...',
|
color: '#0696e1', // 加载动画颜色
|
textColor: '#fff',
|
maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
|
})
|
|
signageApi.getEquipmentLevelEfficiencyStatisticsApi(this.equipmentId)
|
.then(res => {
|
if (res.success && res.result) {
|
this.gaugeChartData = res.result
|
this.isBelongToMdc = true
|
this.drawGaugeChart()
|
}
|
else this.isBelongToMdc = false
|
})
|
},
|
|
/* 调用接口获取整年度利用率 */
|
getLineChartDataByApi() {
|
this.lineChart = this.$echarts.init(document.getElementById('line_chart'))
|
this.lineChart.showLoading({
|
text: '数据加载中 ...',
|
color: '#0696e1', // 加载动画颜色
|
textColor: '#fff',
|
maskColor: 'rgba(1, 25, 75, 0.2)' // 遮罩层
|
})
|
|
signageApi.getEquipmentAnnualEfficiencyStatisticsApi(this.equipmentId)
|
.then(res => {
|
if (res.success && res.result) {
|
this.lineChartData = res.result
|
this.isBelongToMdc = true
|
this.drawLineChart()
|
}
|
else this.isBelongToMdc = false
|
})
|
},
|
|
/* 绘制仪表盘图表 */
|
drawGaugeChart() {
|
const option = {
|
title: {
|
show: true, // 是否显示标题，默认为true
|
text: '', // 主标题文本
|
x: 'center', // 标题水平安放位置，可选值为'left'、'center'、'right'或具体的水平坐标值
|
y: 10, // 标题垂直安放位置，可选值为'top'、'bottom'、'center'或具体的垂直坐标值
|
textStyle: {
|
// 主标题文本样式
|
fontSize: 18,
|
fontWeight: 'normal',
|
color: '#1AD8DE',
|
}
|
},
|
tooltip: {
|
formatter: params => {
|
return params.seriesName + '：' + params.value + '%'
|
}
|
},
|
grid: {
|
left: '1%',
|
top: '1%',
|
right: '10%',
|
bottom: '1%'
|
},
|
series: [
|
{
|
name: '',
|
type: 'gauge',
|
radius: '80%',
|
center: ['50%', '60%'], // 默认全局居中
|
pointer: {
|
width: 6,
|
length: '50%',
|
itemStyle: {
|
color: 'inherit'
|
}
|
},
|
splitLine: {
|
show: true,
|
length: 10,
|
lineStyle: {
|
color: '#fff',
|
width: 2
|
}
|
},
|
axisTick: {
|
length: 5,
|
lineStyle: {
|
color: '#fff',
|
width: 1
|
}
|
},
|
axisLabel: {
|
show: false,
|
fontSize: 18,
|
formatter: function(value) {
|
return value + '%'
|
}
|
},
|
axisLine: {
|
lineStyle: { // 属性lineStyle控制线条样式
|
color: [ //表盘颜色
|
[0.3, '#F56436'],//0-30%处的颜色
|
[0.7, '#FFFF40'],//30%-60%处的颜色
|
[1, '#0FC61A']//90%-100%处的颜色
|
],
|
width: 15//表盘宽度
|
}
|
},
|
detail: {
|
formatter: '{score|{value}%}',
|
offsetCenter: [0, '50%'],
|
height: 30,
|
rich: {
|
score: {
|
fontSize: 20
|
}
|
}
|
},
|
data: []
|
}
|
]
|
}
|
this.drawGaugeChart1(option)
|
this.drawGaugeChart2(option)
|
this.drawGaugeChart3(option)
|
this.drawGaugeChart4(option)
|
},
|
|
/* 绘制利用率仪表盘图表 */
|
drawGaugeChart1(opt) {
|
const option = Object.assign({}, opt)
|
option.title.text = moment().subtract(1, 'days').format('M月D日') + '利用率'
|
option.series[0].name = '利用率'
|
option.series[0].data = [this.gaugeChartData.utilizationRate]
|
this.gaugeChart1.setOption(option, true)
|
setTimeout(() => this.gaugeChart1.hideLoading(), this.hideLoadingDelayTime)
|
|
this.gaugeChart1.getZr().on('click', params => {
|
// 仅有点击表盘区域才会有以下属性，topTarget表示触发事件对象，shape表示触发事件对象的图像属性，clockwise表示表盘是否以顺时针排列，默认为true
|
if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
|
this.$router.push({
|
name: 'mdc-base-StatisticsChart',
|
params: {
|
isEquipment: true,
|
productionId: this.equipmentId,
|
tierName: this.equipmentList.find(item => item.equipmentId === this.equipmentId).equipmentName
|
}
|
})
|
}
|
})
|
},
|
|
/* 绘制开动率仪表盘图表 */
|
drawGaugeChart2(opt) {
|
const option = Object.assign({}, opt)
|
option.title.text = moment().subtract(1, 'days').format('M月D日') + '开动率'
|
option.series[0].name = '开动率'
|
option.series[0].data = [this.gaugeChartData.startRate]
|
this.gaugeChart2.setOption(option, true)
|
setTimeout(() => this.gaugeChart2.hideLoading(), this.hideLoadingDelayTime)
|
|
this.gaugeChart2.getZr().on('click', params => {
|
// 仅有点击表盘区域才会有以下属性，topTarget表示触发事件对象，shape表示触发事件对象的图像属性，clockwise表示表盘是否以顺时针排列，默认为true
|
if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
|
this.$router.push({
|
name: 'mdc-base-StatisticsChart',
|
params: {
|
isEquipment: true,
|
productionId: this.equipmentId,
|
tierName: this.equipmentList.find(item => item.equipmentId === this.equipmentId).equipmentName
|
}
|
})
|
}
|
})
|
},
|
|
/* 绘制开机率仪表盘图表 */
|
drawGaugeChart3(opt) {
|
const option = Object.assign({}, opt)
|
option.title.text = moment().subtract(1, 'days').format('M月D日') + '开机率'
|
option.series[0].name = '开机率'
|
option.series[0].data = [this.gaugeChartData.openRate]
|
this.gaugeChart3.setOption(option, true)
|
setTimeout(() => this.gaugeChart3.hideLoading(), this.hideLoadingDelayTime)
|
|
this.gaugeChart3.getZr().on('click', params => {
|
// 仅有点击表盘区域才会有以下属性，topTarget表示触发事件对象，shape表示触发事件对象的图像属性，clockwise表示表盘是否以顺时针排列，默认为true
|
if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
|
this.$router.push({
|
name: 'mdc-base-StatisticsChart',
|
params: {
|
isEquipment: true,
|
productionId: this.equipmentId,
|
tierName: this.equipmentList.find(item => item.equipmentId === this.equipmentId).equipmentName
|
}
|
})
|
}
|
})
|
},
|
|
/* 绘制OEE仪表盘图表 */
|
drawGaugeChart4(opt) {
|
const option = Object.assign({}, opt)
|
option.title.text = moment().subtract(1, 'months').format('M月') + `OEE`
|
option.series[0].name = 'OEE'
|
option.series[0].data = [this.gaugeChartData.overallEquipmentEfficiency]
|
this.gaugeChart4.setOption(option, true)
|
setTimeout(() => this.gaugeChart4.hideLoading(), this.hideLoadingDelayTime)
|
|
this.gaugeChart4.getZr().on('click', params => {
|
// 仅有点击表盘区域才会有以下属性，topTarget表示触发事件对象，shape表示触发事件对象的图像属性，clockwise表示表盘是否以顺时针排列，默认为true
|
if (params.topTarget && params.topTarget.shape && params.topTarget.shape.clockwise !== undefined) {
|
this.$router.push({
|
name: 'mdc-base-OEEAnalysis',
|
params: { isEquipment: true, productionId: this.equipmentId }
|
})
|
}
|
})
|
},
|
|
/* 绘制折线图 */
|
drawLineChart() {
|
const newData = {
|
xAxis: this.lineChartData.dateList,
|
yAxis: [
|
{
|
name: '利用率',
|
value: this.lineChartData.dataList.map(item => item.utilizationRate)
|
},
|
{
|
name: '开动率',
|
value: this.lineChartData.dataList.map(item => item.startRate)
|
},
|
{
|
name: 'OEE',
|
value: this.lineChartData.dataList.map(item => item.overallEquipmentEfficiency)
|
}
|
],
|
yAxisName: '整年度利用率(%)'
|
}
|
let legendData = []
|
let seriesData = []
|
let colorArr = ['#09F39E', '#A5F10D', '#09B3F6']
|
legendData = newData.yAxis.map((item) => item.name)
|
seriesData = newData.yAxis.map((item1, index1) => {
|
return {
|
name: item1.name,
|
type: 'line',
|
symbol: 'circle',
|
symbolSize: 8,
|
itemStyle: {
|
color: colorArr[index1]
|
},
|
lineStyle: {
|
width: 2
|
},
|
yAxisIndex: 1,
|
data: item1.value // 折线图的数据
|
}
|
})
|
const option = {
|
grid: {
|
containLabel: true,
|
bottom: '3%',
|
top: '15%',
|
left: '2%',
|
right: '1%'
|
},
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
},
|
formatter: function(params) {
|
let result = ''
|
params.forEach((item, index) => {
|
let dom = `<span style="display:inline-block;width:10px;height:10px;border-radius:100px;margin-right:5px;background:${item.color}"></span>${item.seriesName}：${item.value}%`
|
if (index === 0) {
|
result = `<span style="font-weight:bolder;">${item.name}</span>`
|
}
|
result += '<br />' + dom
|
})
|
return result
|
}
|
},
|
legend: {
|
top: 20,
|
right: 'center',
|
data: legendData,
|
itemGap: 10,
|
textStyle: {
|
fontSize: 14,
|
color: '#fff'
|
}
|
},
|
xAxis: {
|
triggerEvent: true,
|
data: newData.xAxis || [],
|
axisLabel: {
|
interval: 0,
|
show: true,
|
fontSize: 12,
|
color: '#fff'
|
// rotate: -30,
|
},
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#fff'
|
}
|
},
|
axisTick: {
|
show: true,
|
alignWithLabel: true
|
}
|
},
|
yAxis: [
|
{
|
name: newData.yAxisName,
|
nameTextStyle: {
|
color: '#1AD8DE',
|
fontSize: 18,
|
padding: [0, 0, 0, 110]
|
},
|
nameGap: 25,
|
type: 'value',
|
position: 'left',
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#fff'
|
}
|
},
|
axisTick: {
|
show: false
|
},
|
splitLine: {
|
show: false,
|
lineStyle: {
|
color: '#fff'
|
}
|
}
|
},
|
{
|
type: 'value',
|
position: 'right',
|
splitNumber: 5,
|
max: 100,
|
axisLabel: {
|
show: true,
|
color: '#fff'
|
},
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#fff'
|
}
|
},
|
axisTick: {
|
show: true
|
},
|
splitLine: {
|
show: false,
|
lineStyle: {
|
color: '#fff'
|
}
|
}
|
}
|
],
|
series: seriesData
|
}
|
this.lineChart.setOption(option, true)
|
setTimeout(() => this.lineChart.hideLoading(), this.hideLoadingDelayTime)
|
},
|
|
/**
|
* 窗口尺寸变化时触发
|
* 调整图表尺寸以适应分辨率
|
*/
|
handleWindowResize() {
|
if (this.gaugeChart1) this.gaugeChart1.resize()
|
if (this.gaugeChart2) this.gaugeChart2.resize()
|
if (this.gaugeChart3) this.gaugeChart3.resize()
|
if (this.gaugeChart4) this.gaugeChart4.resize()
|
if (this.lineChart) this.lineChart.resize()
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.page-container {
|
.content-container {
|
padding-top: 5px;
|
display: flex;
|
justify-content: space-between;
|
|
.left-col {
|
padding: 0 10px 0;
|
|
.equipmentId-container {
|
height: 100%;
|
color: #fff;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 30px
|
}
|
|
table {
|
color: #fff;
|
width: 100%;
|
border-collapse: collapse;
|
border-spacing: 0;
|
border: 1px dashed;
|
|
tr {
|
height: 60px;
|
text-align: center;
|
font-size: 18px;
|
position: relative;
|
|
th, td {
|
border: 1px dashed;
|
}
|
|
th {
|
font-weight: bold;
|
background-color: #1CB29D;
|
position: sticky;
|
z-index: 9999;
|
top: 0;
|
}
|
|
td {
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
|
.right-col {
|
|
.right-top-row {
|
.info-container {
|
margin: 5px;
|
padding: 70px 0 0 30px;
|
height: 100%
|
}
|
|
.info-card-container {
|
background-color: #0FC61A;
|
padding: 5px;
|
border-radius: 3px;
|
|
.info-card-title {
|
font-weight: bold;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
overflow: hidden
|
}
|
|
.info-card-value {
|
text-align: center;
|
font-size: 30px;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
overflow: hidden
|
}
|
}
|
}
|
|
.right-bottom-row {
|
.gauge-chart {
|
width: 50%;
|
height: 50%;
|
}
|
}
|
}
|
}
|
}
|
|
/deep/ .ant-descriptions {
|
font-size: 16px;
|
}
|
|
/deep/ .ant-descriptions-item {
|
padding-bottom: 25px;
|
white-space: nowrap;
|
overflow: hidden;
|
-ms-text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
}
|
|
/deep/ .ant-descriptions-item-label, /deep/ .ant-descriptions-item-content {
|
color: #fff;
|
font-size: 16px;
|
}
|
|
|
</style>
|
