<template>
|
<div class="component-container">
|
<slot name="loading"/>
|
|
<div class="left-container">
|
<div>
|
<img src="@/assets/signage/equipment/left-top-container.png"/>
|
<div class="left-top-content-container">
|
<div>
|
<img src="@/assets/signage/equipment/equipmentId-container.png"/>
|
<span style="font-family: LanTing;letter-spacing: 0.1vw">{{currentProductionId}}</span>
|
</div>
|
<div>
|
<img src="@/assets/signage/equipment/status-container.png"/>
|
<span>设备状态：<span
|
:style="{color:setEquipmentStatusFontColor(equipmentStatusAndInfoObj.oporationDict)}">{{equipmentStatusAndInfoObj.oporationDict}}</span></span>
|
</div>
|
<div>
|
<img src="@/assets/signage/equipment/status-container.png"/>
|
<span>维保状态：<span
|
:style="{color:setEquipmentStatusFontColor(equipmentStatusAndInfoObj.maintenanceStatus)}">{{equipmentStatusAndInfoObj.maintenanceStatus}}</span></span>
|
</div>
|
</div>
|
</div>
|
<div>
|
<img src="@/assets/signage/equipment/left-bottom-container.png"/>
|
<div>
|
<table>
|
<thead>
|
<tr>
|
<th>设备编号</th>
|
<th>安装位置</th>
|
</tr>
|
</thead>
|
|
<tbody>
|
<tr v-for="item in equipmentList" :key="item.id" @click="handleSelectEquipment(item.equipmentId)"
|
:style="{color:currentProductionId===item.equipmentId?'#EECA03':''}">
|
<td>
|
<a-tooltip :title="item.equipmentId" placement="left">
|
<span>{{item.equipmentId}}</span>
|
</a-tooltip>
|
</td>
|
<a-tooltip :title="item.equipmentName" placement="right">
|
<td>{{item.equipmentName}}</td>
|
</a-tooltip>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
</div>
|
|
<div class="right-container">
|
<div>
|
<img src="@/assets/signage/equipment/equipment-info-line.png"/>
|
<div class="right-top-content-container">
|
<div>
|
<div>
|
<dv-decoration-9 class="rotate-circle" :color="['#4B95E6', '#EECA03']">设备实时信息</dv-decoration-9>
|
</div>
|
|
<div>
|
<table>
|
<tr>
|
<td>设备名称</td>
|
<a-tooltip :title="setTooltipTittle(equipmentStatusAndInfoObj.equipmentAddress)">
|
<td :style="{color:setNullValueFontColor(equipmentStatusAndInfoObj.equipmentAddress)}">
|
{{equipmentStatusAndInfoObj.equipmentAddress|filterNullValue}}
|
</td>
|
</a-tooltip>
|
</tr>
|
<tr>
|
<td>设备型号</td>
|
<a-tooltip :title="setTooltipTittle(equipmentStatusAndInfoObj.equipmentModel)">
|
<td :style="{color:setNullValueFontColor(equipmentStatusAndInfoObj.equipmentModel)}">
|
{{equipmentStatusAndInfoObj.equipmentModel|filterNullValue}}
|
</td>
|
</a-tooltip>
|
</tr>
|
<tr>
|
<td>操作系统</td>
|
<a-tooltip :title="setTooltipTittle(equipmentStatusAndInfoObj.systemType)">
|
<td :style="{color:setNullValueFontColor(equipmentStatusAndInfoObj.systemType)}">
|
{{equipmentStatusAndInfoObj.systemType|filterNullValue}}
|
</td>
|
</a-tooltip>
|
</tr>
|
<tr>
|
<td>设备管理员</td>
|
<a-tooltip :title="setTooltipTittle(equipmentStatusAndInfoObj.equipmentManager)">
|
<td :style="{color:setNullValueFontColor(equipmentStatusAndInfoObj.equipmentManager)}">
|
{{equipmentStatusAndInfoObj.equipmentManager|filterNullValue}}
|
</td>
|
</a-tooltip>
|
</tr>
|
<tr>
|
<td>安装位置</td>
|
<a-tooltip :title="setTooltipTittle(equipmentStatusAndInfoObj.installationPosition)">
|
<td :style="{color:setNullValueFontColor(equipmentStatusAndInfoObj.installationPosition)}">
|
{{equipmentStatusAndInfoObj.installationPosition|filterNullValue}}
|
</td>
|
</a-tooltip>
|
</tr>
|
</table>
|
</div>
|
|
<div>
|
<table>
|
<tr>
|
<td>加工程序</td>
|
<a-tooltip :title="setTooltipTittle(equipmentStatusAndInfoObj.sequenceNumber)">
|
<td :style="{color:setNullValueFontColor(equipmentStatusAndInfoObj.sequenceNumber)}">
|
{{equipmentStatusAndInfoObj.sequenceNumber|filterNullValue}}
|
</td>
|
</a-tooltip>
|
</tr>
|
<tr>
|
<td>主轴转速</td>
|
<a-tooltip :title="setTooltipTittle(equipmentStatusAndInfoObj.spindleSpeed)">
|
<td :style="{color:setNullValueFontColor(equipmentStatusAndInfoObj.spindleSpeed)}">
|
{{equipmentStatusAndInfoObj.spindleSpeed|filterNullValue}}
|
</td>
|
</a-tooltip>
|
</tr>
|
<tr>
|
<td>主轴负载</td>
|
<a-tooltip :title="setTooltipTittle(equipmentStatusAndInfoObj.spindleLoad)">
|
<td :style="{color:setNullValueFontColor(equipmentStatusAndInfoObj.spindleLoad)}">
|
{{equipmentStatusAndInfoObj.spindleLoad|filterNullValue}}
|
</td>
|
</a-tooltip>
|
</tr>
|
<tr>
|
<td>主轴倍率</td>
|
<a-tooltip :title="setTooltipTittle(equipmentStatusAndInfoObj.spindlebeilv)">
|
<td :style="{color:setNullValueFontColor(equipmentStatusAndInfoObj.spindlebeilv)}">
|
{{equipmentStatusAndInfoObj.spindlebeilv|filterNullValue}}
|
</td>
|
</a-tooltip>
|
</tr>
|
<tr>
|
<td>进给倍率</td>
|
<a-tooltip :title="setTooltipTittle(equipmentStatusAndInfoObj.feedbeilv)">
|
<td :style="{color:setNullValueFontColor(equipmentStatusAndInfoObj.feedbeilv)}">
|
{{equipmentStatusAndInfoObj.feedbeilv|filterNullValue}}
|
</td>
|
</a-tooltip>
|
</tr>
|
</table>
|
</div>
|
|
<div>
|
<table>
|
<tr>
|
<td>班次</td>
|
<a-tooltip :title="setTooltipTittle(equipmentStatusAndInfoObj.shift)">
|
<td :style="{color:setNullValueFontColor(equipmentStatusAndInfoObj.shift)}">
|
{{equipmentStatusAndInfoObj.shift|filterNullValue}}
|
</td>
|
</a-tooltip>
|
</tr>
|
<tr>
|
<td>设备报警</td>
|
<a-tooltip :title="setTooltipTittle(equipmentStatusAndInfoObj.alarm)">
|
<td :style="{color:setNullValueFontColor(equipmentStatusAndInfoObj.alarm)}">
|
{{equipmentStatusAndInfoObj.alarm|filterNullValue}}
|
</td>
|
</a-tooltip>
|
</tr>
|
<tr>
|
<td>报修情况</td>
|
<a-tooltip :title="setTooltipTittle(equipmentStatusAndInfoObj.reportRepairStatus)">
|
<td :style="{color:setNullValueFontColor(equipmentStatusAndInfoObj.reportRepairStatus)}">
|
{{equipmentStatusAndInfoObj.reportRepairStatus|filterNullValue}}
|
</td>
|
</a-tooltip>
|
</tr>
|
<tr>
|
<td>本次点检</td>
|
<a-tooltip :title="setTooltipTittle(equipmentStatusAndInfoObj.nextInspection)">
|
<td :style="{color:setNullValueFontColor(equipmentStatusAndInfoObj.nextInspection)}">
|
{{equipmentStatusAndInfoObj.nextInspection|filterNullValue}}
|
</td>
|
</a-tooltip>
|
</tr>
|
<tr>
|
<td>本次保养</td>
|
<a-tooltip :title="setTooltipTittle(equipmentStatusAndInfoObj.nextMaintenance)">
|
<td :style="{color:setNullValueFontColor(equipmentStatusAndInfoObj.nextMaintenance)}">
|
{{equipmentStatusAndInfoObj.nextMaintenance|filterNullValue}}
|
</td>
|
</a-tooltip>
|
</tr>
|
</table>
|
</div>
|
</div>
|
|
<div>
|
<div v-for="(item,index) in navigatorList" :key="index" @click="navigateToPage(item.routeName)">
|
<img src="@/assets/signage/title.png"/>
|
<span>{{item.name}}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div>
|
<div>
|
<img src="@/assets/signage/equipment/day-rate-analysis.png"/>
|
<div class="right-chart-container" id="right-bottom-chart-1"></div>
|
</div>
|
<div>
|
<img src="@/assets/signage/equipment/month-rate-analysis.png"/>
|
<div class="right-chart-container" id="right-bottom-chart-2"></div>
|
</div>
|
<div>
|
<img src="@/assets/signage/equipment/product-qualified-rate.png"/>
|
<div class="right-chart-container" id="right-bottom-chart-3"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import signageApi from '@/api/signage'
|
|
export default {
|
name: 'EquipmentSignage',
|
props: {
|
currentProductionId: {
|
type: String
|
},
|
preSignageProductionId: {
|
type: String
|
}
|
},
|
data() {
|
return {
|
rightBottomChart1: null,
|
rightBottomChart2: null,
|
rightBottomChart3: null,
|
rightBottomChart1Data: [],
|
rightBottomChart2And3Data: [],
|
chartQuantity: 3,
|
hasLoadedChartDataQuantity: 0,
|
equipmentList: [],
|
equipmentStatusAndInfoObj: {},
|
navigatorList: [
|
{
|
name: '台账',
|
routeName: 'eam-equipment'
|
},
|
{
|
name: '维修',
|
routeName: 'eam-repair-EamRepairOrderList'
|
},
|
{
|
name: '点检',
|
routeName: 'eam-maintenance-EamInspectionOrderList'
|
},
|
{
|
name: '保养',
|
routeName: 'eam-maintenance-week_maintenance'
|
}
|
]
|
}
|
},
|
watch: {
|
hasLoadedChartDataQuantity: {
|
handler(val) {
|
if (val === this.chartQuantity) this.$emit('loadFinished')
|
}
|
}
|
},
|
filters: {
|
filterNullValue(value) {
|
return value ? value : '无'
|
}
|
},
|
mounted() {
|
this.getEquipmentListByApi()
|
this.handleWindowResize()
|
|
window.addEventListener('resize', this.handleWindowResize)
|
},
|
beforeDestroy() {
|
window.removeEventListener('resize', this.handleWatchHistory)
|
},
|
methods: {
|
getEquipmentListByApi() {
|
const that = this
|
signageApi.getEquipmentListByProductionIdApi(this.preSignageProductionId)
|
.then(res => {
|
if (res.success) {
|
that.equipmentList = res.result
|
this.handleSelectEquipment(this.currentProductionId, true)
|
}
|
})
|
},
|
|
getEquipmentStatusAndInfoByApi() {
|
const that = this
|
this.equipmentStatusAndInfoObj = {}
|
signageApi.getEquipmentOperationStatusAndInfoApi(this.currentProductionId)
|
.then(res => {
|
if (res.success) {
|
that.equipmentStatusAndInfoObj = res.result
|
}
|
})
|
.finally(() => {
|
that.hasLoadedChartDataQuantity++
|
})
|
},
|
|
/**
|
* 设备列表选中时触发
|
* @param equipmentId
|
*/
|
handleSelectEquipment(equipmentId, isFirstLoading = false) {
|
if (!isFirstLoading) this.$emit('switchEquipmentSignageProductionId', equipmentId)
|
this.$nextTick(() => {
|
this.hasLoadedChartDataQuantity = 0
|
this.$emit('startPageLoading')
|
this.getChartDataByApi()
|
this.getEquipmentStatusAndInfoByApi()
|
})
|
},
|
|
/**
|
* 点击跳转按钮时触发携带equipmentId参数跳转至对应页面
|
* @param routeName 路由名称
|
*/
|
navigateToPage(routeName) {
|
// console.log('routeName', routeName)
|
// this.$router.push({
|
// name: routeName,
|
// params: { equipmentId: this.currentProductionId }
|
// })
|
|
const url = this.$router.resolve({ name: routeName }).href
|
window.open(url, '_blank')
|
},
|
|
getChartDataByApi() {
|
this.geRightBottomChart1DataByApi()
|
this.geRightBottomChart2And3DataByApi()
|
},
|
|
geRightBottomChart1DataByApi() {
|
const that = this
|
signageApi.getDayRateAnalysisApi(this.currentProductionId)
|
.then(res => {
|
if (res.success) that.rightBottomChart1Data = res.result
|
else that.rightBottomChart1Data = { dataList: [], dateList: [] }
|
that.initRightBottomChart1()
|
})
|
.finally(() => {
|
that.hasLoadedChartDataQuantity++
|
})
|
},
|
|
geRightBottomChart2And3DataByApi() {
|
const that = this
|
signageApi.getMonthRateAnalysisAndQualifiedRateApi(this.currentProductionId)
|
.then(res => {
|
if (res.success) that.rightBottomChart2And3Data = res.result
|
else that.rightBottomChart2And3Data = { dataList: [], dateList: [] }
|
that.initRightBottomChart2()
|
that.initRightBottomChart3()
|
})
|
.finally(() => {
|
that.hasLoadedChartDataQuantity++
|
})
|
},
|
|
initRightBottomChart1() {
|
this.rightBottomChart1 = this.$echarts.init(document.getElementById('right-bottom-chart-1'))
|
const { dateList, dataList } = this.rightBottomChart1Data
|
const newData = {
|
xAxis: dateList,
|
yAxis: [
|
{
|
name: 'OEE',
|
value: dataList.map(item => item.oee)
|
},
|
{
|
name: 'TEEP',
|
value: dataList.map(item => item.utilizationRate)
|
}
|
]
|
}
|
let legendData = []
|
let seriesData = []
|
let colorArr = ['#2F95FA', '#92F7AD']
|
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]
|
},
|
yAxisIndex: 1,
|
data: item1.value // 折线图的数据
|
}
|
})
|
const option = {
|
grid: {
|
bottom: '5%',
|
top: '30%',
|
left: '10%',
|
right: '15%',
|
containLabel: true
|
},
|
tooltip: {
|
trigger: 'axis'
|
},
|
legend: {
|
top: 80,
|
right: '5%',
|
data: legendData,
|
itemGap: 30,
|
textStyle: {
|
fontSize: 14,
|
color: '#eee',
|
fontFamily: 'LanTing',
|
height: 10,
|
rich: {
|
a: {
|
verticalAlign: 'bottom'
|
}
|
}
|
}
|
},
|
xAxis: {
|
triggerEvent: true,
|
data: newData.xAxis || [],
|
axisLabel: {
|
interval: 0,
|
show: true,
|
fontSize: 14,
|
color: '#eee',
|
margin: 14,
|
fontFamily: 'LanTing',
|
rotate: 45
|
},
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#eee'
|
}
|
},
|
axisTick: {
|
show: true
|
},
|
splitLine: {
|
show: false
|
}
|
},
|
yAxis: [
|
{
|
type: 'value',
|
position: 'left',
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#eee'
|
}
|
},
|
splitLine: {
|
show: false
|
}
|
},
|
{
|
type: 'value',
|
position: 'left',
|
axisLabel: {
|
show: true,
|
color: '#eee',
|
margin: 14,
|
fontSize: 14,
|
fontWeight: 'bold',
|
formatter(value) {
|
return value + '%'
|
}
|
},
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#eee'
|
}
|
},
|
axisTick: {
|
show: true
|
},
|
splitLine: {
|
show: false
|
}
|
}
|
],
|
series: seriesData
|
}
|
this.$nextTick(() => this.rightBottomChart1.setOption(option, true))
|
},
|
|
initRightBottomChart2() {
|
this.rightBottomChart2 = this.$echarts.init(document.getElementById('right-bottom-chart-2'))
|
const { dateList, dataList } = this.rightBottomChart2And3Data
|
const newData = {
|
xAxis: dateList,
|
yAxis: [
|
{
|
name: 'OEE',
|
value: dataList.map(item => item.oee)
|
},
|
{
|
name: 'TEEP',
|
value: dataList.map(item => item.utilizationRate)
|
}
|
]
|
}
|
let legendData = []
|
let seriesData = []
|
let colorArr = ['#2F95FA', '#92F7AD']
|
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]
|
},
|
yAxisIndex: 1,
|
data: item1.value // 折线图的数据
|
}
|
})
|
const option = {
|
grid: {
|
bottom: '8%',
|
top: '30%',
|
left: '10%',
|
right: '15%',
|
containLabel: true
|
},
|
tooltip: {
|
trigger: 'axis'
|
},
|
legend: {
|
top: 80,
|
right: '5%',
|
data: legendData,
|
itemGap: 30,
|
textStyle: {
|
fontSize: 14,
|
color: '#eee',
|
fontFamily: 'LanTing',
|
height: 10,
|
rich: {
|
a: {
|
verticalAlign: 'bottom'
|
}
|
}
|
}
|
},
|
xAxis: {
|
triggerEvent: true,
|
data: newData.xAxis || [],
|
axisLabel: {
|
interval: 0,
|
show: true,
|
fontSize: 14,
|
color: '#eee',
|
margin: 14,
|
fontFamily: 'LanTing'
|
},
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#eee'
|
}
|
},
|
axisTick: {
|
show: true
|
},
|
splitLine: {
|
show: false
|
}
|
},
|
yAxis: [
|
{
|
type: 'value',
|
position: 'left',
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#eee'
|
}
|
},
|
splitLine: {
|
show: false
|
}
|
},
|
{
|
type: 'value',
|
position: 'left',
|
axisLabel: {
|
show: true,
|
color: '#eee',
|
margin: 14,
|
fontSize: 14,
|
fontWeight: 'bold',
|
formatter(value) {
|
return value + '%'
|
}
|
},
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#eee'
|
}
|
},
|
axisTick: {
|
show: true
|
},
|
splitLine: {
|
show: false
|
}
|
}
|
],
|
series: seriesData
|
}
|
this.$nextTick(() => this.rightBottomChart2.setOption(option, true))
|
},
|
|
initRightBottomChart3() {
|
this.rightBottomChart3 = this.$echarts.init(document.getElementById('right-bottom-chart-3'))
|
const { dateList, dataList } = this.rightBottomChart2And3Data
|
const newData = {
|
xAxis: dateList,
|
yAxis: [
|
{
|
name: '合格率',
|
value: dataList.map(item => item.passRate)
|
}
|
]
|
}
|
let legendData = []
|
let seriesData = []
|
let colorArr = ['#2F95FA', '#92F7AD']
|
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]
|
},
|
yAxisIndex: 1,
|
data: item1.value // 折线图的数据
|
}
|
})
|
const option = {
|
grid: {
|
bottom: '8%',
|
top: '30%',
|
left: '10%',
|
right: '15%',
|
containLabel: true
|
},
|
tooltip: {
|
trigger: 'axis'
|
},
|
legend: {
|
top: 80,
|
right: '5%',
|
data: legendData,
|
itemGap: 30,
|
textStyle: {
|
fontSize: 14,
|
color: '#eee',
|
fontFamily: 'LanTing',
|
height: 10,
|
rich: {
|
a: {
|
verticalAlign: 'bottom'
|
}
|
}
|
}
|
},
|
xAxis: {
|
triggerEvent: true,
|
data: newData.xAxis || [],
|
axisLabel: {
|
interval: 0,
|
show: true,
|
fontSize: 14,
|
color: '#eee',
|
margin: 14,
|
fontFamily: 'LanTing'
|
},
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#eee'
|
}
|
},
|
axisTick: {
|
show: true
|
},
|
splitLine: {
|
show: false
|
}
|
},
|
yAxis: [
|
{
|
type: 'value',
|
position: 'left',
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#eee'
|
}
|
},
|
splitLine: {
|
show: false
|
}
|
},
|
{
|
type: 'value',
|
position: 'left',
|
axisLabel: {
|
show: true,
|
color: '#eee',
|
margin: 14,
|
fontSize: 14,
|
fontWeight: 'bold',
|
formatter(value) {
|
return value + '%'
|
}
|
},
|
axisLine: {
|
show: true,
|
lineStyle: {
|
color: '#eee'
|
}
|
},
|
axisTick: {
|
show: true
|
},
|
splitLine: {
|
show: false
|
}
|
}
|
],
|
series: seriesData
|
}
|
this.$nextTick(() => this.rightBottomChart3.setOption(option, true))
|
},
|
|
/**
|
* 设置表格单元格悬浮标题
|
* @param value 表格单元格值
|
* @returns {string} 悬浮标题内容
|
*/
|
setTooltipTittle(value) {
|
return value && value !== '无' ? value : ''
|
},
|
|
/**
|
* 设置表格字体颜色
|
* @param value 表格单元格值
|
* @returns {string} 颜色码
|
*/
|
setNullValueFontColor(value) {
|
return value ? '' : '#8A8A8A'
|
},
|
|
/**
|
* 设置设备状态字体颜色
|
* @param value 设备状态文字
|
* @returns {string} 颜色码
|
*/
|
setEquipmentStatusFontColor(value) {
|
switch (value) {
|
case '正常':
|
case '运行':
|
return '#06FF00'
|
case '保养':
|
case '点检':
|
case '待机':
|
return '#FFF600'
|
case '报警':
|
case '维修':
|
return '#FF5757'
|
case '关机':
|
return '#8A8A8A'
|
}
|
},
|
|
handleWindowResize() {
|
if (this.rightBottomChart1) this.rightBottomChart1.resize()
|
if (this.rightBottomChart2) this.rightBottomChart2.resize()
|
if (this.rightBottomChart3) this.rightBottomChart3.resize()
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
.component-container {
|
display: flex;
|
height: 100%;
|
justify-content: space-between;
|
|
.left-container {
|
width: 18%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
|
> div:first-child {
|
position: relative;
|
height: 17.76vw;
|
|
> img {
|
height: 100%;
|
position: absolute;
|
}
|
|
.left-top-content-container {
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-evenly;
|
align-items: center;
|
|
> div {
|
position: relative;
|
display: flex;
|
|
&:first-child {
|
height: 3.43vw;
|
|
}
|
|
&:not(:first-child) {
|
height: 3.59vw;
|
}
|
|
img {
|
height: 100%;
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
z-index: 0;
|
}
|
|
> span {
|
position: relative;
|
z-index: 1;
|
font-size: 1.2vw;
|
font-family: 'ZongYi';
|
margin: auto;
|
letter-spacing: 0.25vw;
|
}
|
}
|
}
|
}
|
|
> div:last-child {
|
position: relative;
|
height: 25.62vw;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
|
img {
|
height: 100%;
|
position: absolute;
|
z-index: 0;
|
}
|
|
> div {
|
height: 93%;
|
padding: 0 6% 0 7%;
|
overflow: hidden auto;
|
position: relative;
|
z-index: 1;
|
|
table {
|
width: 100%;
|
table-layout: fixed;
|
|
td, th {
|
width: 50%;
|
text-align: center;
|
height: 1.85vw;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
th {
|
background-color: #0E4D9C;
|
font-family: 'ZongYi';
|
font-weight: normal;
|
font-size: 1vw;
|
position: sticky;
|
top: 0;
|
z-index: 2;
|
}
|
|
tr {
|
td {
|
font-family: 'LanTing';
|
font-size: 0.9vw;
|
cursor: pointer;
|
}
|
|
&:nth-child(odd) {
|
td {
|
background-color: #162E58;
|
}
|
}
|
|
&:nth-child(even) {
|
td {
|
background-color: #2C5894;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.right-top-content-container {
|
width: 72.7vw;
|
height: 25.31vw;
|
display: flex;
|
flex-direction: column;
|
padding: 0 2.5%;
|
position: relative;
|
z-index: 1;
|
|
> div {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
&:first-child {
|
flex: 0.8;
|
|
> div:first-child {
|
.rotate-circle {
|
width: 14vw;
|
height: 14vw;
|
font-size: 1vw;
|
font-family: ZongYi;
|
}
|
}
|
|
> div:not(:first-child) {
|
flex: 0.3;
|
|
table {
|
text-align: center;
|
width: 100%;
|
table-layout: fixed;
|
|
td {
|
width: 50%;
|
font-family: 'ZongYi';
|
font-size: 1.1vw;
|
height: calc(14vw / 5);
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
tr {
|
&:nth-child(odd) {
|
td {
|
background-color: #2C5894;
|
}
|
}
|
|
&:nth-child(even) {
|
td {
|
background-color: #162E58;
|
|
}
|
}
|
}
|
}
|
}
|
|
}
|
|
&:last-child {
|
flex: 0.2;
|
|
> div {
|
width: 13vw;
|
height: 3.59vw;
|
position: relative;
|
display: flex;
|
cursor: pointer;
|
|
img {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
z-index: 0;
|
}
|
|
span {
|
font-size: 1.2vw;
|
font-family: ZongYi;
|
position: relative;
|
z-index: 1;
|
margin: auto;
|
text-align: center;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
