<template>
|
<div id="StatisticsLegend"
|
style="width: 100%; height: 100%; overflow: hidden;display: flex;flex-direction: column;background-color: #f5f4f4">
|
<!-- 查询区域 -->
|
<div style="width: 100%; background-color: #fff" class="table-page-search-wrapper">
|
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
<a-row :gutter="24">
|
<a-col :md="5" :sm="5" :xs="5">
|
<a-form-item label="名称">
|
<a-input placeholder="输入设备名称查询" readOnly v-model="queryParam.tierName"></a-input>
|
</a-form-item>
|
</a-col>
|
<a-col :md="5" :sm="5">
|
<a-form-item label="设备类型">
|
<a-select
|
:value="queryParams.equipmentType"
|
mode="multiple"
|
placeholder="请选择设备类型"
|
allow-clear
|
:maxTagCount="1"
|
@change="selectChange($event,'equipmentType')"
|
>
|
<a-select-option v-for="(item,index) in equipmentTypeList" :value="item.value" :key="index">
|
{{item.label}}
|
</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
<a-col :md="7" :sm="7">
|
<a-form-item label="驱动类型">
|
<a-select
|
:value="queryParams.driveType"
|
mode="multiple"
|
placeholder="请选择驱动类型"
|
allow-clear
|
:maxTagCount="1"
|
@change="selectChange($event,'driveType')"
|
>
|
<a-select-option v-for="(item,index) in driveTypeList" :value="item.value" :key="index">
|
{{item.label}}
|
</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
<a-col :md="5" :sm="5" :xs="5">
|
<a-form-item label="日期">
|
<a-date-picker v-model="queryParams.collectTime" :disabledDate="disabledDate" format='YYYY-MM-DD'
|
@change="handleDateChange" :allowClear="false" style="width: 100%"/>
|
</a-form-item>
|
</a-col>
|
<a-col :md="2" :sm="2">
|
<a
|
@click="toggleSearchStatus=!toggleSearchStatus"
|
@selectstart="$event.preventDefault()"
|
style="display: inline-block;height: 32px;line-height: 32px"
|
>
|
{{ toggleSearchStatus ? '收起' : '展开' }}
|
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
|
</a>
|
</a-col>
|
</a-row>
|
|
<a-row :gutter="24" v-if="toggleSearchStatus">
|
<a-col :md="5" :sm="5" :xs="5">
|
<a-form-item label="设备级别">
|
<a-select
|
:value="queryParams.deviceLevel"
|
mode="multiple"
|
placeholder="请选择设备级别"
|
allow-clear
|
:maxTagCount="1"
|
@change="selectChange($event,'deviceLevel')"
|
>
|
<a-select-option v-for="(item,index) in device_level_list" :value="item.value" :key="index">
|
{{item.label}}
|
</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
|
<a-col :md="5" :sm="5" :xs="5">
|
<a-form-item label="重要程度">
|
<a-select
|
v-model="queryParams.deviceImportanceLevel"
|
placeholder="请选择设备重要程度"
|
allow-clear
|
>
|
<a-select-option v-for="(item,index) in device_importance_level_list" :value="item.value" :key="index">
|
{{item.label}}
|
</a-select-option>
|
</a-select>
|
</a-form-item>
|
</a-col>
|
</a-row>
|
|
<a-row :gutter="24">
|
<a-col :md="2" :sm="2" :xs="2">
|
<a-space>
|
<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
|
<a-button type="primary" @click="searchReset" icon="reload">重置</a-button>
|
</a-space>
|
</a-col>
|
</a-row>
|
</a-form>
|
</div>
|
<!--开机率-->
|
<div class="PowerOnRate Line-box">
|
<div class="title">
|
<div class="circle"></div>
|
<div class="text">利用率</div>
|
</div>
|
<div class="PowerOnRate-box box-bottom">
|
<div class="PowerOnRate-left" ref="PowerOnRatePie" id="PowerOnRatePie"></div>
|
<div class="PowerOnRate-right" ref="PowerOnRateLine" id="PowerOnRateLine"></div>
|
</div>
|
</div>
|
<!--利用率和开动率-->
|
<div class="UtilizationStartup">
|
<div class="Utilization Line-box">
|
<div class="title">
|
<div class="circle"></div>
|
<div class="text">开机率</div>
|
</div>
|
<div class="Utilization-box box-bottom">
|
<div class="Utilization-left left">
|
<div class="left-box">
|
<div class="left-box-con">
|
<div class="Rate-box-kong" :style="{height:100-UtilizationHeight+'%'}"></div>
|
<div class="Rate-box" :style="{height:UtilizationHeight+'%'}">
|
<p class="Rate-box-text">
|
<span ref="UtilizationRate">{{UtilizationHeight}}%</span>
|
<br>
|
开机率
|
</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="Utilization-right" ref="UtilizationLine" id="UtilizationLine"></div>
|
</div>
|
</div>
|
<div class="Startup Line-box">
|
<div class="title">
|
<div class="circle"></div>
|
<div class="text">开动率</div>
|
</div>
|
<div class="Startup-box box-bottom">
|
<div class="Startup-left left" ref="StartupRate">
|
<div class="left-box">
|
<div class="left-box-con">
|
<div class="Rate-box-kong" :style="{height:100-StartupHeight+'%'}"></div>
|
<div class="Rate-box" :style="{height:StartupHeight+'%'}">
|
<p class="Rate-box-text">
|
<span>{{StatCharUsedopeningRate}}%</span>
|
<br>
|
开动率
|
</p>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
<div class="Startup-right" ref="StartupLine" id="StartupLine"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import moment from 'moment'
|
import { putAction, getAction } from '@/api/manage'
|
import * as echarts from 'echarts'
|
import api from '@/api/mdc'
|
import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api'
|
|
export default {
|
name: 'StatisticsLegend',
|
props: { equip: {} },
|
data() {
|
return {
|
StatCharOpeningRate: 0,
|
StatCharUsedRate: 0,
|
StatCharUsedopeningRate: 0,
|
openingLong: 0,
|
waitingLong: 0,
|
processLong: 0,
|
closedLong: 0,
|
totalLong: 0,
|
UtilizationHeight: 0,
|
StartupHeight: 0,
|
quip: {},
|
dates: [],
|
equipmentTypeList: [],
|
driveTypeList: [],
|
device_level_list: [],
|
device_importance_level_list: [],
|
queryParam: {},
|
queryParams: {
|
equipmentType: [],
|
driveType: [],
|
deviceLevel: [],
|
collectTime: undefined
|
},
|
toggleSearchStatus: false,
|
url: {
|
getEquipmentByPid: '/mdc/mdcequipment/getEquipmentByPid',
|
dayStatisticalRate: '/mdc/efficiencyReport/dayStatisticalRate',
|
getBaseTree: '/mdc/mdcEquipment/queryTreeListByProduction',
|
queryEquipmentType: '/mdc/mdcEquipmentType/queryEquipmentType'
|
}
|
}
|
},
|
created() {
|
let collectTime = moment(moment().add(-1, 'd'), 'YYYY-MM-DD')
|
this.queryParams.collectTime = moment().add(-1, 'd').format('YYYY-MM-DD')
|
this.queryParams.dateTime = moment().add(-1, 'd').format('YYYYMMDD')
|
this.initEquipmentNode()
|
this.queryGroup()
|
this.getDriveTypeByApi()
|
this.initDictData('device_level')
|
this.initDictData('device_importance_level')
|
},
|
|
methods: {
|
queryGroup() {
|
getAction(this.url.queryEquipmentType).then(res => {
|
if (res.success) {
|
this.equipmentTypeList = res.result.map(item => {
|
return {
|
label: item.equipmentTypeName,
|
value: item.equipmentTypeName
|
}
|
})
|
} else {
|
this.$notification.warning({
|
message: '消息',
|
description: res.message
|
})
|
}
|
})
|
},
|
|
// 调用接口获取控制系统类型
|
getDriveTypeByApi() {
|
api.getDriveTypeApi().then((res) => {
|
if (res.success) this.driveTypeList = res.result
|
})
|
},
|
|
initDictData(dictCode) {
|
// //优先从缓存中读取字典配置
|
if (getDictItemsFromCache(dictCode)) {
|
this[dictCode + '_list'] = getDictItemsFromCache(dictCode)
|
return
|
}
|
//根据字典Code, 初始化字典数组
|
ajaxGetDictItems(dictCode, null).then((res) => {
|
if (res.success) {
|
this[dictCode + '_list'] = res.result
|
return
|
}
|
})
|
},
|
|
queryStatistical(queryParams) {
|
getAction(this.url.dayStatisticalRate, queryParams).then(res => {
|
if (res.success) {
|
this.StatCharOpeningRate = res.result.openRate
|
this.StatCharUsedRate = res.result.utilizationRate
|
this.UtilizationHeight = res.result.openRate
|
this.StatCharUsedopeningRate = res.result.usedOpenRate
|
this.StartupHeight = res.result.usedOpenRate
|
this.openingLong = this.getTime(res.result.openLong)
|
this.waitingLong = this.getTime(res.result.waitLong)
|
this.processLong = this.getTime(res.result.processLong)
|
this.closedLong = this.getTime(res.result.closeLong)
|
this.totalLong = parseInt(this.openingLong) + parseInt(this.closedLong)
|
this.draw()
|
}
|
})
|
},
|
|
draw() {
|
//利用率
|
//饼图
|
let PowerOnRatePie = this.$echarts.init(document.getElementById('PowerOnRatePie'), 'macarons')
|
let PowerOnRatePie_option = {
|
// color: ["#3859fa", '#ccc'],
|
title: {
|
text: this.StatCharUsedRate + '%',
|
subtext: '利用率',
|
textStyle: {
|
color: '#268e80',
|
fontSize: 18
|
|
},
|
subtextStyle: {
|
color: '#292929'
|
},
|
x: 'center',
|
y: 'center'
|
},
|
series: [{
|
name: '',
|
type: 'pie',
|
radius: ['55%', '70%'],
|
itemStyle: {
|
normal: {
|
borderWidth: 4,//扇区间加间隔
|
borderColor: '#fff'//间隔为白色
|
}
|
},
|
label: {
|
normal: {
|
show: false
|
}
|
},
|
data: [{
|
value: 100,
|
itemStyle: {
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
offset: 0,
|
color: '#88a8fd'
|
},
|
{
|
offset: 1,
|
color: '#544cee'
|
}], false)
|
}
|
},
|
{
|
value: 100 - this.StatCharUsedRate,
|
itemStyle: {
|
color: '#f0f3f5'
|
}
|
}
|
]
|
}
|
]
|
}
|
PowerOnRatePie.setOption(PowerOnRatePie_option)
|
let PowerOnRateLine = this.$echarts.init(document.getElementById('PowerOnRateLine'), 'macarons')
|
let PowerOnRateLine_option = {
|
tooltip: {
|
trigger: 'axis'
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
top: 60,
|
containLabel: true
|
},
|
legend: {
|
// selected:{
|
// "曲线":false,
|
// },
|
top: '0',
|
right: '10',
|
//设置单选多选模式
|
// selectedMode:'single',
|
icon: 'pin',
|
data: [
|
// {
|
// name:'曲线',
|
// textStyle:{
|
// padding:4,
|
// color:'#e957ff',
|
// // borderWidth:1,
|
// fontSize:16,
|
// // borderColor:'#50E6D7'
|
// }
|
// },
|
{
|
name: '柱状图',
|
textStyle: {
|
padding: 4,
|
fontSize: 16,
|
color: '#9996f8'
|
// borderWidth:1,
|
// borderColor:'#50E6D7'
|
}
|
}
|
]
|
},
|
xAxis: {
|
type: 'category',
|
data: ['开机时长', '关机时长', '运行时长', '待机时长'],
|
axisLabel: { //坐标轴字体颜色
|
textStyle: {
|
color: '#000'
|
}
|
},
|
axisLine: {
|
lineStyle: {
|
color: '#e5e5e5'
|
}
|
},
|
axisTick: { //y轴刻度线
|
show: false
|
},
|
splitLine: { //网格
|
show: false
|
},
|
boundaryGap: true
|
},
|
yAxis: {
|
name: '时间/小时',
|
type: 'value',
|
axisLabel: { //坐标轴字体颜色
|
textStyle: {
|
color: '#000'
|
}
|
},
|
axisLine: {
|
show: false
|
},
|
axisTick: { //y轴刻度线
|
show: false
|
},
|
splitLine: { //网格
|
show: true,
|
lineStyle: {
|
color: '#dadde4',
|
type: 'dashed'
|
}
|
}
|
},
|
series: [
|
// {
|
// name:'曲线',
|
// type: 'line',
|
// smooth:true,
|
// symbol: 'circle',
|
// symbolSize: 8,
|
// label:{
|
// show:true,
|
// position:"top",
|
// textStyle:{
|
// color:'#000',
|
// },
|
// formatter:"时长：{c}H"
|
// },
|
// itemStyle: {
|
// color: "rgb(87, 120, 225)",
|
// borderColor: "#fff",
|
// borderWidth: 2,
|
// shadowColor: 'rgba(0, 0, 0, .3)',
|
// },
|
// lineStyle: {
|
// normal: {
|
// color:"rgb(87, 120, 225)",
|
// shadowColor: 'rgba(87, 120, 225, .4)',
|
// shadowBlur: 8,
|
// shadowOffsetY: 10,
|
// shadowOffsetX: 0,
|
// },
|
// },
|
// areaStyle: {
|
// normal: {
|
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
// offset: 0,
|
// color: 'rgba(87, 120, 225, .6)'
|
// }, {
|
// offset: 1,
|
// color: 'rgba(87, 120, 225, .3)'
|
// }]),
|
// }
|
// },
|
// data: [this.openingLong, this.closedLong, this.processLong,this.waitingLong],
|
// },
|
{
|
name: '柱状图',
|
type: 'bar',
|
data: [this.openingLong, this.closedLong, this.processLong, this.waitingLong],
|
// data:[22,3,5,6],
|
barWidth: 25,
|
label: {
|
show: true,
|
position: 'top',
|
textStyle: {
|
color: '#000'
|
},
|
// formatter:"时长：{c}H",
|
formatter: params => {
|
const value = String(params.value)
|
return value.length == 2 && value[0] === '0' ? `时长：${value.slice(1)}H` : `时长：${value}H`
|
}
|
},
|
itemStyle: {
|
normal: {
|
color: function(params) {
|
let colorList = [
|
['#6496e9', '#6bded3'],
|
['#849db8', '#b4b8cc'],
|
['#4fe1c5', '#4ecee1'],
|
// ["#9978fa","#88a1fa"],
|
['#ffbb65', '#fdc68b']
|
]
|
// return colorList[params.dataIndex];
|
let colorItem = colorList[params.dataIndex]
|
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
offset: 0,
|
color: colorItem[0]
|
},
|
{
|
offset: 1,
|
color: colorItem[1]
|
}], false)
|
},
|
barBorderRadius: [5, 5, 0, 0]
|
}
|
}
|
}]
|
}
|
PowerOnRateLine.setOption(PowerOnRateLine_option)
|
//开机率
|
let UtilizationLine = this.$echarts.init(document.getElementById('UtilizationLine'), 'macarons')
|
let UtilizationLine_option = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
grid: {
|
top: '15%',
|
right: '3%',
|
left: '10%',
|
bottom: '12%'
|
},
|
xAxis: [{
|
type: 'category',
|
data: ['开机时长', '总时长'],
|
axisLine: {
|
lineStyle: {
|
// color: 'rgba(70, 196, 255, .8)'
|
}
|
},
|
axisTick: {
|
show: false
|
},
|
axisLabel: {
|
// color: 'rgba(111, 132, 189, 1)',
|
textStyle: {
|
fontSize: 14
|
}
|
}
|
}],
|
yAxis: [{
|
type: 'value',
|
name: '时间/小时',
|
nameTextStyle: {
|
// color: 'rgba(111, 132, 189, 1)'
|
},
|
axisLabel: {
|
formatter: '{value}'
|
// color: 'rgba(111, 132, 189, 1)',
|
},
|
axisTick: {
|
show: false
|
},
|
|
axisLine: {
|
show: false
|
},
|
splitLine: {
|
lineStyle: {
|
// color: 'rgba(70, 196, 255, .3)'
|
}
|
}
|
}],
|
series: [
|
{
|
type: 'bar',
|
data: [this.openingLong, this.totalLong],
|
// data:[22,22],
|
barWidth: 25,
|
label: {
|
show: true,
|
position: 'top',
|
textStyle: {
|
color: '#000'
|
},
|
// formatter:"时长：{c}H",
|
formatter: params => {
|
const value = String(params.value)
|
return value.length == 2 && value[0] === '0' ? `时长：${value.slice(1)}H` : `时长：${value}H`
|
}
|
},
|
itemStyle: {
|
normal: {
|
color: function(params) {
|
let colorList = [
|
['#6496e9', '#6bded3'],
|
['#9978fa', '#88a1fa']
|
]
|
// return colorList[params.dataIndex];
|
let colorItem = colorList[params.dataIndex]
|
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
offset: 0,
|
color: colorItem[0]
|
},
|
{
|
offset: 1,
|
color: colorItem[1]
|
}], false)
|
},
|
barBorderRadius: [5, 5, 0, 0]
|
}
|
}
|
}]
|
}
|
UtilizationLine.setOption(UtilizationLine_option)
|
//开动率
|
let StartupLine = this.$echarts.init(document.getElementById('StartupLine'), 'macarons')
|
let StartupLine_option = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
grid: {
|
top: '15%',
|
right: '3%',
|
left: '10%',
|
bottom: '12%'
|
},
|
xAxis: [{
|
type: 'category',
|
data: ['运行时长', '开机时长'],
|
axisLine: {
|
lineStyle: {
|
// color: 'rgba(70, 196, 255, .8)'
|
}
|
},
|
axisTick: {
|
show: false
|
},
|
axisLabel: {
|
// color: 'rgba(111, 132, 189, 1)',
|
textStyle: {
|
fontSize: 14
|
}
|
}
|
}],
|
yAxis: [{
|
type: 'value',
|
name: '时间/小时',
|
nameTextStyle: {
|
// color: 'rgba(111, 132, 189, 1)'
|
},
|
axisLabel: {
|
formatter: '{value}'
|
// color: 'rgba(111, 132, 189, 1)',
|
},
|
axisTick: {
|
show: false
|
},
|
|
axisLine: {
|
show: false
|
},
|
splitLine: {
|
lineStyle: {
|
// color: 'rgba(70, 196, 255, .3)'
|
}
|
}
|
}],
|
series: [{
|
type: 'bar',
|
data: [this.processLong, this.openingLong],
|
// data:[22,22],
|
barWidth: 25,
|
label: {
|
show: true,
|
position: 'top',
|
textStyle: {
|
color: '#000'
|
},
|
// formatter:"时长：{c}H",
|
formatter: params => {
|
const value = String(params.value)
|
return value.length == 2 && value[0] === '0' ? `时长：${value.slice(1)}H` : `时长：${value}H`
|
}
|
},
|
itemStyle: {
|
normal: {
|
color: function(params) {
|
let colorList = [
|
['#4fe1c5', '#4ecee1'],
|
['#6496e9', '#6bded3']
|
]
|
// return colorList[params.dataIndex];
|
let colorItem = colorList[params.dataIndex]
|
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
offset: 0,
|
color: colorItem[0]
|
},
|
{
|
offset: 1,
|
color: colorItem[1]
|
}], false)
|
},
|
barBorderRadius: [5, 5, 0, 0]
|
}
|
}
|
}]
|
}
|
StartupLine.setOption(StartupLine_option)
|
},
|
|
selectChange(value, key) {
|
this.queryParams[key] = value
|
},
|
|
handleDateChange(val) {
|
if (val) {
|
this.queryParams.dateTime = val.format('YYYYMMDD')
|
this.queryParams.collectTime = val.format('YYYY-MM-DD')
|
}
|
},
|
|
initEquipmentNode() {
|
let _this = this
|
getAction(this.url.getBaseTree).then((res) => {
|
if (res.success) {
|
const { isEquipment, productionId, tierName } = this.$route.params
|
// 判断是否是从看板跳转过来，productionId 存在则为从看板跳转
|
if (productionId) {
|
// 判断是否点击的是设备层级
|
if (!isEquipment) {
|
_this.$set(this.queryParams, 'parentId', productionId)
|
_this.$set(this.queryParam, 'tierName', tierName)
|
} else {
|
_this.$set(this.queryParams, 'equipmentId', productionId)
|
_this.$set(this.queryParam, 'tierName', productionId + '/' + tierName)
|
}
|
} else {
|
if (res.result[0]) {
|
_this.$set(this.queryParam, 'tierName', res.result[0].title)
|
_this.$set(this.queryParams, 'parentId', res.result[0].key)
|
}
|
}
|
this.queryStatistical(this.queryParams)
|
} else {
|
this.$notification.warning({
|
message: '消息',
|
description: res.message
|
})
|
}
|
}).finally(() => {
|
this.loading = false
|
this.cardLoading = false
|
})
|
},
|
|
searchReset() {
|
this.queryParam = {}
|
this.queryParams = {
|
equipmentType: [],
|
driveType: [],
|
deviceLevel: [],
|
collectTime: moment().add(-1, 'd').format('YYYY-MM-DD'),
|
dateTime: moment().add(-1, 'd').format('YYYYMMDD')
|
}
|
this.initEquipmentNode()
|
},
|
|
searchQuery() {
|
const queryParams = Object.assign({}, this.queryParams)
|
|
Object.keys(queryParams).forEach(item => {
|
if (Array.isArray(queryParams[item])) {
|
queryParams[item] = queryParams[item].join()
|
// 此处为保证接口参数不多余，可省略
|
if (queryParams[item].length === 0) delete queryParams[item]
|
}
|
})
|
this.queryStatistical(queryParams)
|
},
|
|
disabledDate(current) {
|
//Can not slect days before today and today
|
return current && current > moment().subtract('days', 1)
|
},
|
|
//把秒计算成对应的时分秒的函数
|
getTime(time) {
|
//转换为时分秒
|
let h = Math.round(time / 60 / 60)
|
h = h < 10 ? '0' + h : h
|
//作为返回值返回
|
// console.log(h);
|
return h
|
}
|
},
|
watch: {
|
equip(val) {
|
// console.log(val);
|
if (val && val.equipmentId) {
|
this.$set(this.queryParam, 'tierName', val.title)
|
this.$set(this.queryParam, 'equipmentId', val.equipmentId)
|
this.queryParams.parentId = ''
|
this.queryParams.equipmentId = val.equipmentId
|
} else {
|
this.queryParams.parentId = val.key
|
this.queryParams.equipmentId = ''
|
this.$set(this.queryParam, 'tierName', val.title)
|
}
|
this.searchQuery()
|
}
|
// this.searchQuery();
|
}
|
|
}
|
</script>
|
|
<style scoped>
|
.charContent {
|
display: flex;
|
}
|
|
@media screen and (min-width: 1920px) {
|
#StatisticsLegend {
|
height: 748px !important;
|
overflow: scroll;
|
}
|
}
|
|
@media screen and (min-width: 1680px) and (max-width: 1920px) {
|
#StatisticsLegend {
|
height: 748px !important;
|
overflow: scroll;
|
}
|
}
|
|
@media screen and (min-width: 1400px) and (max-width: 1680px) {
|
#StatisticsLegend {
|
height: 600px !important;
|
overflow: scroll;
|
}
|
}
|
|
@media screen and (min-width: 1280px) and (max-width: 1400px) {
|
#StatisticsLegend {
|
height: 501px !important;
|
overflow: scroll;
|
}
|
}
|
|
@media screen and (max-width: 1280px) {
|
#StatisticsLegend {
|
height: 501px !important;
|
overflow: scroll;
|
}
|
}
|
|
#StatisticsLegend .PowerOnRate {
|
flex: 1;
|
margin-bottom: 15px;
|
background-color: #fff;
|
}
|
|
#StatisticsLegend .UtilizationStartup {
|
flex: 1;
|
display: flex;
|
}
|
|
#StatisticsLegend .UtilizationStartup > div {
|
flex: 1;
|
background-color: #fff;
|
}
|
|
#StatisticsLegend .UtilizationStartup .Utilization {
|
margin-right: 15px;
|
}
|
|
.title {
|
display: flex;
|
align-items: center;
|
padding-left: 15px;
|
padding-top: 5px;
|
}
|
|
.title .circle {
|
width: 15px;
|
height: 15px;
|
background-color: #7282ec;
|
border-radius: 100%;
|
margin-right: 10px;
|
}
|
|
.title .text {
|
font-size: 2vh;
|
}
|
|
.Line-box {
|
display: flex;
|
flex-direction: column;
|
}
|
|
.Line-box .box-bottom {
|
flex: 1;
|
}
|
|
.PowerOnRate-box {
|
display: flex;
|
}
|
|
.PowerOnRate-box .PowerOnRate-left {
|
width: 25%;
|
}
|
|
.PowerOnRate-box .PowerOnRate-right {
|
flex: 1;
|
}
|
|
.Utilization-box {
|
display: flex;
|
}
|
|
.Utilization-box .Utilization-left {
|
width: 25%;
|
}
|
|
.Utilization-box .Utilization-right {
|
flex: 1;
|
}
|
|
.Startup-box {
|
display: flex;
|
}
|
|
.Startup-box .Startup-left {
|
width: 25%;
|
}
|
|
.Startup-box .Startup-right {
|
flex: 1;
|
}
|
|
.left {
|
display: flex;
|
align-items: center;
|
}
|
|
.left .left-box {
|
width: 65%;
|
height: 60%;
|
margin: 0 auto;
|
overflow: hidden;
|
border-radius: 8px;
|
|
/*border: 6px solid red;*/
|
/*!*background-color: yellow;*!*/
|
/*border-image: linear-gradient(to top, #2bf3c7, #06a8f8) 1;*/
|
}
|
|
.left-box-con {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
text-align: center;
|
border: 6px solid red;
|
/*background-color: yellow;*/
|
border-image: linear-gradient(to top, #2bf3c7, #06a8f8) 1;
|
}
|
|
.left .left-box .Rate-box-kong {
|
width: 100%;
|
background: -moz-linear-gradient(bottom, #b5dec2 0%, #f4f5ba 100%);
|
background: -webkit-gradient(linear, bottom bottom, top top, color-stop(0%, #b5dec2), color-stop(100%, #f4f5ba));
|
background: -webkit-linear-gradient(bottom, #b5dec2 0%, #f4f5ba 100%);
|
background: -o-linear-gradient(bottom, #b5dec2 0%, #f4f5ba 100%);
|
background: -ms-linear-gradient(bottom, #b5dec2 0%, #f4f5ba 100%);
|
background: linear-gradient(to top, #b5dec2 0%, #f4f5ba 100%);
|
}
|
|
.left .left-box .Rate-box {
|
position: absolute;
|
text-align: center;
|
bottom: 0;
|
width: 100%;
|
height: 89%;
|
/*background-color: green;*/
|
background: -moz-linear-gradient(bottom, #06a8f8 0%, #2bf3c7 100%);
|
background: -webkit-gradient(linear, bottom bottom, top top, color-stop(0%, #06a8f8), color-stop(100%, #2bf3c7));
|
background: -webkit-linear-gradient(bottom, #06a8f8 0%, #2bf3c7 100%);
|
background: -o-linear-gradient(bottom, #06a8f8 0%, #2bf3c7 100%);
|
background: -ms-linear-gradient(bottom, #06a8f8 0%, #2bf3c7 100%);
|
background: linear-gradient(to top, #06a8f8 0%, #2bf3c7 100%);
|
}
|
|
.left .left-box .Rate-box p {
|
position: absolute;
|
bottom: 0;
|
color: #fff;
|
width: 100%;
|
text-align: center;
|
}
|
|
.con-left {
|
display: flex;
|
flex-direction: column;
|
flex-wrap: wrap;
|
justify-content: space-around;
|
align-items: center;
|
}
|
|
.con-left > span {
|
flex: 1;
|
}
|
</style>
|
