From a144a18ab582fd3a8c945cba60bc364dbe7f31e8 Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期四, 28 三月 2024 16:59:55 +0800
Subject: [PATCH] 1、新增点击设备运行状态图标跳转至设备监控页面并根据状态及当前层级筛选页面对应数据 2、新增点击设备利用率的横向柱状图跳转至统计分析页面并根据所点击层级筛选页面对应数据 3、解决router.push以及router.replace跳转后报错
---
src/views/dashboard/EquipmentSignage.vue | 7
src/views/dashboard/BranchFactorySignage.vue | 48 -
src/views/dashboard/IndexSignage.vue | 26 +
src/views/mdc/base/DeviceBaseInfo.vue | 167 ++++----
src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue | 770 ++++++++++++++++++++++--------------------
src/router/index.js | 14
src/views/dashboard/WorkshopSectionSignage.vue | 23
7 files changed, 549 insertions(+), 506 deletions(-)
diff --git a/src/router/index.js b/src/router/index.js
index bdbe374..3c6c586 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -4,6 +4,20 @@
Vue.use(Router)
+// 瑙ｅ喅鎶ラ敊
+const originalPush = Router.prototype.push
+const originalReplace = Router.prototype.replace
+// push
+Router.prototype.push = function push (location, onResolve, onReject) {
+ if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
+ return originalPush.call(this, location).catch(err => err)
+}
+// replace
+Router.prototype.replace = function push (location, onResolve, onReject) {
+ if (onResolve || onReject) return originalReplace.call(this, location, onResolve, onReject)
+ return originalReplace.call(this, location).catch(err => err)
+}
+
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
diff --git a/src/views/dashboard/BranchFactorySignage.vue b/src/views/dashboard/BranchFactorySignage.vue
index 4de1dc3..7699025 100644
--- a/src/views/dashboard/BranchFactorySignage.vue
+++ b/src/views/dashboard/BranchFactorySignage.vue
@@ -118,28 +118,6 @@
barChartData: [],
doubleBarChart: '',
doubleBarChartData: {},
- supportPlanList: [
- {
- label: '鏈湀涓変繚璁″垝',
- value: 299,
- background: '#719D8E'
- },
- {
- label: '鏈湀瀹屾垚',
- value: 229,
- background: '#409EFF'
- },
- {
- label: '涓嬫湀涓変繚璁″垝',
- value: 319,
- background: '#A8985D'
- },
- {
- label: '涓嬩笅鏈堜笁淇濊鍒�',
- value: 329,
- background: '#58D9F9'
- }
- ],
maintenanceConfig: {},
problemConfig: {}
}
@@ -148,10 +126,6 @@
window.addEventListener('resize', this.handleWindowResize)
this.drawCharts()
this.getChartDataByApi()
- },
- activated() {
- console.log('瑙﹀彂activated')
- this.handleWindowResize()
},
beforeDestroy() {
window.removeEventListener('resize', this.handleWindowResize)
@@ -172,8 +146,8 @@
getRunningStateDataByApi() {
signageApi.getEquipmentStatusStatisticsApi(this.productionCode)
.then(res => {
- if (res.success) this.runningStateData = res.result
- this.drawRunningStateChart()
+ if (res.success) this.runningStateData = res.result.list
+ this.drawRunningStateChart(res.result.producitonId)
})
},
@@ -276,7 +250,7 @@
},
/* 缁樺埗璁惧杩愯鐘舵�佺帿鐟伴ゼ鍥� */
- drawRunningStateChart() {
+ drawRunningStateChart(productionId) {
this.runningStateChart = this.$echarts.init(document.getElementById('running_state_chart'))
const option = {
height: 300,
@@ -356,6 +330,14 @@
]
}
this.runningStateChart.setOption(option, true)
+
+ this.runningStateChart.on('click', params => {
+ console.log('params', params)
+ this.$router.push({
+ name: 'mdc-base-DeviceBaseInfo',
+ params: { signageData: params.data, productionId }
+ })
+ })
},
/* 缁樺埗璁惧鍒╃敤鐜囪兌鍥婂浘 */
@@ -549,11 +531,15 @@
this.efficiencyChart.setOption(option, true)
this.efficiencyChart.on('click', params => {
-
// 鐐瑰嚮瑙﹀彂鐨勪负鏌辩姸浣擄紝闄ゆ闄ゅ鏄爣棰�
if (params.componentType === 'series') {
console.log('seriesParams===========', params)
-
+ const productionId = this.efficiencyData.find(item => item.productionCode === params.name).productionId
+ const tierName = this.efficiencyData.find(item => item.productionCode === params.name).name
+ this.$router.push({
+ name: 'mdc-base-StatisticsChart',
+ params: { isEquipment: false, productionId, tierName }
+ })
} else {
console.log('yAxisParams===========', params)
this.$emit('switchToNextSignage', { signageName: 'WorkshopSection', productionCode: params.value })
diff --git a/src/views/dashboard/EquipmentSignage.vue b/src/views/dashboard/EquipmentSignage.vue
index 9b445fa..615b2f6 100644
--- a/src/views/dashboard/EquipmentSignage.vue
+++ b/src/views/dashboard/EquipmentSignage.vue
@@ -265,13 +265,14 @@
equipmentId: '2140223'
}
},
+ created() {
+ console.log('瑙﹀彂閲嶆柊鍒涘缓')
+ this.equipmentId = this.productionCode
+ },
mounted() {
window.addEventListener('resize', this.handleWindowResize)
this.drawCharts()
this.getChartDataByApi()
- },
- activated() {
- this.handleWindowResize()
},
beforeDestroy() {
window.removeEventListener('resize', this.handleWindowResize)
diff --git a/src/views/dashboard/IndexSignage.vue b/src/views/dashboard/IndexSignage.vue
index d25dd30..aeb3245 100644
--- a/src/views/dashboard/IndexSignage.vue
+++ b/src/views/dashboard/IndexSignage.vue
@@ -126,10 +126,6 @@
this.drawCharts()
this.getChartDataByApi()
},
- activated() {
- console.log('瑙﹀彂activated')
- this.handleWindowResize()
- },
beforeDestroy() {
window.removeEventListener('resize', this.handleWindowResize)
},
@@ -149,8 +145,8 @@
getRunningStateDataByApi() {
signageApi.getEquipmentStatusStatisticsApi()
.then(res => {
- if (res.success) this.runningStateData = res.result
- this.drawRunningStateChart()
+ if (res.success) this.runningStateData = res.result.list
+ this.drawRunningStateChart(res.result.producitonId)
})
},
@@ -253,7 +249,7 @@
},
/* 缁樺埗璁惧杩愯鐘舵�佺帿鐟伴ゼ鍥� */
- drawRunningStateChart() {
+ drawRunningStateChart(productionId) {
this.runningStateChart = this.$echarts.init(document.getElementById('running_state_chart'))
const option = {
height: 300,
@@ -333,6 +329,13 @@
]
}
this.runningStateChart.setOption(option, true)
+
+ this.runningStateChart.on('click', params => {
+ this.$router.push({
+ name: 'mdc-base-DeviceBaseInfo',
+ params: { signageData: params.data, productionId }
+ })
+ })
},
/* 缁樺埗璁惧鍒╃敤鐜囪兌鍥婂浘 */
@@ -526,10 +529,17 @@
this.efficiencyChart.setOption(option, true)
this.efficiencyChart.on('click', params => {
-
// 鐐瑰嚮瑙﹀彂鐨勪负鏌辩姸浣擄紝闄ゆ闄ゅ鏄爣棰�
if (params.componentType === 'series') {
+ // 鏌辩姸浣撹烦杞粺璁″垎鏋愰〉闈㈠睍绀哄搴斿眰绾ф暟鎹�
console.log('seriesParams===========', params)
+ const productionId = this.efficiencyData.find(item => item.productionCode === params.name).productionId
+ const tierName = this.efficiencyData.find(item => item.productionCode === params.name).name
+ console.log('productionId', productionId)
+ this.$router.push({
+ name: 'mdc-base-StatisticsChart',
+ params: { isEquipment: false, productionId, tierName }
+ })
} else {
console.log('yAxisParams===========', params)
this.$emit('switchToNextSignage', { signageName: 'BranchFactory', productionCode: params.value })
diff --git a/src/views/dashboard/WorkshopSectionSignage.vue b/src/views/dashboard/WorkshopSectionSignage.vue
index 8c9094f..a925756 100644
--- a/src/views/dashboard/WorkshopSectionSignage.vue
+++ b/src/views/dashboard/WorkshopSectionSignage.vue
@@ -73,7 +73,8 @@
</div>
<div style="width: 30%">
<dv-border-box-9 style="padding: 15px">
- <a-form layout="inline" @keyup.enter.native="$emit('switchToNextSignage', { signageName: 'Equipment', productionCode: equipmentId })">
+ <a-form layout="inline"
+ @keyup.enter.native="$emit('switchToNextSignage', { signageName: 'Equipment', productionCode: equipmentId })">
<a-form-item label="璁惧缂栧彿">
<!--<a-input v-model="equipmentId" size="large"></a-input>-->
<a-auto-complete
@@ -198,11 +199,6 @@
this.drawCharts()
this.getChartDataByApi()
},
- activated() {
- console.log('瑙﹀彂activated')
- this.handleWindowResize()
- if (this.barChartCarouselTime) clearInterval(this.barChartCarouselTime)
- },
beforeDestroy() {
window.removeEventListener('resize', this.handleWindowResize)
if (this.barChartCarouselTime) clearInterval(this.barChartCarouselTime)
@@ -249,8 +245,8 @@
getRunningStateDataByApi() {
signageApi.getEquipmentStatusStatisticsApi(this.productionCode)
.then(res => {
- if (res.success) this.runningStateData = res.result
- this.drawRunningStateChart()
+ if (res.success) this.runningStateData = res.result.list
+ this.drawRunningStateChart(res.result.producitonId)
})
},
@@ -443,7 +439,7 @@
},
/* 缁樺埗璁惧杩愯鐘舵�佺帿鐟伴ゼ鍥� */
- drawRunningStateChart() {
+ drawRunningStateChart(productionId) {
this.runningStateChart = this.$echarts.init(document.getElementById('running_state_chart'))
const option = {
title: {
@@ -521,6 +517,13 @@
]
}
this.runningStateChart.setOption(option, true)
+
+ this.runningStateChart.on('click', params => {
+ this.$router.push({
+ name: 'mdc-base-DeviceBaseInfo',
+ params: { signageData: params.data, productionId }
+ })
+ })
},
/* 缁樺埗鎶樼嚎鍥� */
@@ -661,7 +664,7 @@
}
}
],
- series: seriesData,
+ series: seriesData
// dataZoom: {
// show: false,
// startValue: 0, // 浠庡ご寮�濮嬨��
diff --git a/src/views/mdc/base/DeviceBaseInfo.vue b/src/views/mdc/base/DeviceBaseInfo.vue
index cded000..0649db2 100644
--- a/src/views/mdc/base/DeviceBaseInfo.vue
+++ b/src/views/mdc/base/DeviceBaseInfo.vue
@@ -5,30 +5,6 @@
<base-tree @sendSelectBaseTree="changeSelection" @getCurrSelected="changeSelectionNode"></base-tree>
</a-col>
<a-col :md="24-5" :sm="24">
- <!--<div class="equipMessage">-->
- <!--<table>-->
- <!--<tr>-->
- <!--<td>鍏虫満-->
- <!--<span class="equipShutdown"></span>-->
- <!--</td>-->
- <!--<td>{{offNumber}}</td>-->
- <!--<td>寰呮満-->
- <!--<span class="standbyNumber"></span>-->
- <!--</td>-->
- <!--<td>{{standbyNumber}}</td>-->
- <!--<td>杩愯-->
- <!--<span class="equipRun"></span>-->
- <!--</td>-->
- <!--<td>{{workNumber}}</td>-->
- <!--<td>鎶ヨ-->
- <!--<span class="equipAlarm"></span>-->
- <!--</td>-->
- <!--<td>{{warningNumber}}</td>-->
- <!--<td>鎬绘暟</td>-->
- <!--<td>{{allNumber}}</td>-->
- <!--</tr>-->
- <!--</table>-->
-
<!--</div>-->
<div class="device-status-info">
<a-space v-for="item in deviceStatusList" :key="item.value" class="single-status-info">
@@ -47,7 +23,8 @@
<div>
<a-tabs default-active-key="1">
<a-tab-pane key="1" tab="甯冨眬鍥�">
- <equipment-layout :dataList="dataList" :equipmentId="selectEquementId" :node="selectEquement"></equipment-layout>
+ <equipment-layout :dataList="dataList" :equipmentId="selectEquementId"
+ :node="selectEquement"></equipment-layout>
</a-tab-pane>
<a-tab-pane key="2" tab="鍒楄〃" force-render>
<equipment-list :dataSource="dataList" @editEquipmentStatus="editEquipmentStatus"></equipment-list>
@@ -96,11 +73,11 @@
allNumber: 0,
url: {
list: '/mdc/mdcEquipment/queryEquipmentMonitorList',
- updateEquipmentStatus:'/mdc/mdcEquipment/updateEquipmentStatus'
+ updateEquipmentStatus: '/mdc/mdcEquipment/updateEquipmentStatus'
},
- param:{},
- timer:null,
- timerzhun:null,
+ param: {},
+ timer: null,
+ timerzhun: null,
deviceStatusList: [
{
label: '鍏虫満',
@@ -127,19 +104,22 @@
value: 99,
color: '#fff'
}
- ],// 璁惧鐘舵�佹寚绀虹伅鍒楄〃锛�
+ ]// 璁惧鐘舵�佹寚绀虹伅鍒楄〃锛�
}
},
created() {
+ const { productionId } = this.$route.params
+ console.log('productionId', productionId)
+ if (productionId) this.param.key = productionId
// this.equipmentStatistics()
// setInterval(this.equipmentStatistics(), 5*1000);
},
methods: {
- equipmentStatistics(param,resopnse={key:false}) {
+ equipmentStatistics(param, resopnse = { key: false }) {
getAction(this.url.list, param).then((res) => {
this.dataList = []
if (res.success) {
- if(res.result.length != 0){
+ if (res.result.length != 0) {
this.standbyNumber = 0
this.offNumber = 0
this.warningNumber = 0
@@ -148,64 +128,89 @@
this.dataList = res.result
// console.log(this.dataList)
this.allNumber = this.dataList.length
- if(resopnse.key){
+ if (resopnse.key) {
this.$notification.success({
- key:'equipmentStatus',
+ key: 'equipmentStatus',
message: '娑堟伅',
- description: resopnse.message,
- });
+ description: resopnse.message
+ })
}
for (let i = 0; i < this.dataList.length; i++) {
let item = this.dataList[i]
switch (item.oporationDict) {
- case "寰呮満" : this.standbyNumber = this.standbyNumber + 1;break;
+ case '寰呮満' :
+ this.standbyNumber = this.standbyNumber + 1
+ break
// case 2 : this.standbyNumber = this.standbyNumber + 1;break;
- case "杩愯" : this.workNumber = this.workNumber + 1;break;
- case "鍏虫満" : this.offNumber = this.offNumber + 1;break;
- case "鎶ヨ" : this.warningNumber = this.warningNumber + 1;break;
- default:break;
+ case '杩愯' :
+ this.workNumber = this.workNumber + 1
+ break
+ case '鍏虫満' :
+ this.offNumber = this.offNumber + 1
+ break
+ case '鎶ヨ' :
+ this.warningNumber = this.warningNumber + 1
+ break
+ default:
+ break
}
}
- }else{
+
+ // 绛涢�変粠杞︽澘璺宠浆杩囨潵鐨勯渶姹傛暟鎹�
+ const { signageData } = this.$route.params
+ console.log('signageData', signageData)
+ if (!signageData) return
+ else this.filterDataList(signageData)
+ } else {
// this.$message.warning("姝よ溅闂翠笅闈㈡棤璁惧锛侊紒")
this.$notification.warning({
- message:'娑堟伅',
- description:"姝よ溅闂翠笅闈㈡棤璁惧锛侊紒"
- });
+ message: '娑堟伅',
+ description: '姝よ溅闂翠笅闈㈡棤璁惧锛侊紒'
+ })
}
} else {
// this.$message.warn(res.message)
this.$notification.warning({
- message:'娑堟伅',
- description:res.message
- });
+ message: '娑堟伅',
+ description: res.message
+ })
}
})
},
+
+ /**
+ * 绛涢�夋弧瓒充粠鐪嬫澘璺宠浆杩囨潵鏃剁殑鏉′欢鐨勬暟鎹�
+ * @param record
+ */
+ filterDataList(signageData) {
+ this.dataList = this.dataList.filter(item => item.oporationDict === signageData.name)
+ console.log('dataList', this.dataList)
+ },
+
changeSelection(val) {
this.selectEquementId = val
},
changeSelectionNode(val) {
// console.log(val)
this.selectEquement = val.equipmentId
- clearInterval(this.timer);
+ clearInterval(this.timer)
this.timer = null
if (!val.equipmentId) {
- this.param.key=val.key
- clearInterval(this.timerzhun);
+ this.param.key = val.key
+ clearInterval(this.timerzhun)
this.timerzhun = null
this.equipmentStatistics(this.param)
this.timer = setInterval(() => {
- setTimeout( this.equipmentStatistics(this.param),0)
- },1000*10)
- }else{
- this.param.key=val.parentId
- clearInterval(this.timerzhun);
+ setTimeout(this.equipmentStatistics(this.param), 0)
+ }, 1000 * 10)
+ } else {
+ this.param.key = val.parentId
+ clearInterval(this.timerzhun)
this.timerzhun = null
this.equipmentStatistics(this.param)
this.timer = setInterval(() => {
- setTimeout( this.equipmentStatistics(this.param),0)
- },1000*10)
+ setTimeout(this.equipmentStatistics(this.param), 0)
+ }, 1000 * 10)
}
},
@@ -213,30 +218,30 @@
* 鍗曞嚮鐘舵�佸弽棣堝悗瑙﹀彂
* @param record
*/
- editEquipmentStatus(record){
- console.log('瀛愮粍浠秗ecord',record.id)
- const _this=this
+ editEquipmentStatus(record) {
+ console.log('瀛愮粍浠秗ecord', record.id)
+ const _this = this
this.$notification.info({
- key:'equipmentStatus',
+ key: 'equipmentStatus',
message: '娑堟伅',
- description: '鍙嶉涓�...',
- });
- getAction(this.url.updateEquipmentStatus,{id:record.id})
- .then(res=>{
- if(res.success) {
- _this.equipmentStatistics(this.param,{key:true,message:res.message})
- }else{
+ description: '鍙嶉涓�...'
+ })
+ getAction(this.url.updateEquipmentStatus, { id: record.id })
+ .then(res => {
+ if (res.success) {
+ _this.equipmentStatistics(this.param, { key: true, message: res.message })
+ } else {
this.$notification.warning({
- message:'娑堟伅',
- description:res.message
- });
+ message: '娑堟伅',
+ description: res.message
+ })
}
})
- .catch(err=>{
+ .catch(err => {
this.$notification.error({
- message:'娑堟伅',
- description:err.message
- });
+ message: '娑堟伅',
+ description: err.message
+ })
})
},
@@ -248,16 +253,16 @@
getDeviceNumberByStatus(value) {
if (value === 99) return this.dataList.length
return this.dataList.filter((item) => item.oporation === 1 && value === 2 || item.oporation === value).length
- },
+ }
},
- mounted(){
- this.equipmentStatistics()
+ mounted() {
+ this.equipmentStatistics(this.param)
// this.timerzhun = setInterval(() => {
// setTimeout( this.equipmentStatistics(),0)
// },1000*10)
},
- beforeDestroy(){
- clearInterval(this.timer);
+ beforeDestroy() {
+ clearInterval(this.timer)
this.timer = null
}
}
diff --git a/src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue b/src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue
index b65eec2..90fddfd 100644
--- a/src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue
+++ b/src/views/mdc/base/modules/StatisticsChart/StatisticsLegend.vue
@@ -1,5 +1,6 @@
<template>
- <div id="StatisticsLegend" style="width: 100%; height: 100%; overflow: hidden;display: flex;flex-direction: column;background-color: #f5f4f4">
+ <div id="StatisticsLegend"
+ style="width: 100%; height: 100%; overflow: hidden;display: flex;flex-direction: column;background-color: #f5f4f4">
<!-- 鏌ヨ鍖哄煙 -->
<div style="width: 100%; height: 44px; background-color: #fff" class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchQuery">
@@ -11,7 +12,8 @@
</a-col>
<a-col :md="4" :sm="4" :xs="4">
<a-form-item label="鏃ユ湡">
- <a-date-picker v-model="queryParams.collectTime" :disabledDate="disabledDate" format='YYYY-MM-DD' @change="dataChange" :allowClear="false"/>
+ <a-date-picker v-model="queryParams.collectTime" :disabledDate="disabledDate" format='YYYY-MM-DD'
+ @change="dataChange" :allowClear="false"/>
</a-form-item>
</a-col>
<a-col :md="2" :sm="2" :xs="2">
@@ -25,10 +27,10 @@
</div>
<!--寮�鏈虹巼-->
<div class="PowerOnRate Line-box">
- <div class="title">
- <div class="circle"></div>
- <div class="text">鍒╃敤鐜�</div>
- </div>
+ <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>
@@ -92,143 +94,142 @@
import { putAction, getAction } from '@/api/manage'
import $ from 'jquery'
import * as echarts from 'echarts'
+
export default {
name: 'StatisticsLegend',
props: { equip: {} },
- data(){
- return{
- readOnly:true,
- showday:true,
- StatCharOpeningRate:0,
- StatCharUsedRate:0,
- StatCharUsedopeningRate:0,
- openingLong:0,
- waitingLong:0,
- processLong:0,
- closedLong:0,
- totalLong:0,
- UtilizationHeight:0,
- StartupHeight:0,
- quip:{},
+ data() {
+ return {
+ readOnly: true,
+ showday: true,
+ StatCharOpeningRate: 0,
+ StatCharUsedRate: 0,
+ StatCharUsedopeningRate: 0,
+ openingLong: 0,
+ waitingLong: 0,
+ processLong: 0,
+ closedLong: 0,
+ totalLong: 0,
+ UtilizationHeight: 0,
+ StartupHeight: 0,
+ quip: {},
dates: [],
queryParam: {},
- queryParams:{
- collectTime:undefined,
+ queryParams: {
+ collectTime: undefined
},
shiftSubList: [],
shiftList: [],
url: {
getEquipmentByPid: '/mdc/mdcequipment/getEquipmentByPid',
- dayStatisticalRate:'/mdc/efficiencyReport/dayStatisticalRate',
- getBaseTree: '/mdc/mdcEquipment/queryTreeListByProduction',
- },
+ dayStatisticalRate: '/mdc/efficiencyReport/dayStatisticalRate',
+ getBaseTree: '/mdc/mdcEquipment/queryTreeListByProduction'
+ }
}
},
- 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')
+ 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.queryStatistical();
- // this.getTime(37800);
},
- methods:{
- disabledDate(current){
+ methods: {
+ disabledDate(current) {
//Can not slect days before today and today
- return current && current > moment().subtract('days', 1);
+ return current && current > moment().subtract('days', 1)
},
//鎶婄璁＄畻鎴愬搴旂殑鏃跺垎绉掔殑鍑芥暟
- getTime(time){
+ getTime(time) {
//杞崲涓烘椂鍒嗙
let h = Math.round(time / 60 / 60)
- h = h <10 ? '0' + h : h
+ h = h < 10 ? '0' + h : h
//浣滀负杩斿洖鍊艰繑鍥�
// console.log(h);
- return h;
+ return h
},
moment,
- draw(){
+ draw() {
//鍒╃敤鐜�
//楗煎浘
- let PowerOnRatePie = this.$echarts.init(document.getElementById('PowerOnRatePie'), 'macarons');
+ 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,
+ // 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'
- }
- },
- ]
+ 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');
+ ]
+ }
+ 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:{
+ tooltip: {
+ trigger: 'axis'
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ top: 60,
+ containLabel: true
+ },
+ legend: {
// selected:{
// "鏇茬嚎":false,
// },
- top:'0',
- right:'10',
+ top: '0',
+ right: '10',
//璁剧疆鍗曢�夊閫夋ā寮�
// selectedMode:'single',
- icon:"pin",
- data:[
+ icon: 'pin',
+ data: [
// {
// name:'鏇茬嚎',
// textStyle:{
@@ -240,61 +241,61 @@
// }
// },
{
- name:'鏌辩姸鍥�',
- textStyle:{
- padding:4,
- fontSize:16,
- color:'#9996f8',
+ 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"
- }
+ xAxis: {
+ type: 'category',
+ data: ['寮�鏈烘椂闀�', '鍏虫満鏃堕暱', '杩愯鏃堕暱', '寰呮満鏃堕暱'],
+ axisLabel: { //鍧愭爣杞村瓧浣撻鑹�
+ textStyle: {
+ color: '#000'
}
},
- series:[
+ 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',
@@ -337,53 +338,53 @@
// },
// 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`
- }
+ {
+ 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'
},
- 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)
+ // 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]
},
- barBorderRadius: [5, 5, 0, 0],
- }
- },
- }]
- }
- PowerOnRateLine.setOption(PowerOnRateLine_option);
+ {
+ 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 = this.$echarts.init(document.getElementById('UtilizationLine'), 'macarons')
let UtilizationLine_option = {
tooltip: {
trigger: 'axis',
@@ -406,14 +407,14 @@
}
},
axisTick: {
- show: false,
+ show: false
},
axisLabel: {
// color: 'rgba(111, 132, 189, 1)',
textStyle: {
fontSize: 14
- },
- },
+ }
+ }
}],
yAxis: [{
type: 'value',
@@ -422,15 +423,15 @@
// color: 'rgba(111, 132, 189, 1)'
},
axisLabel: {
- formatter: '{value}',
+ formatter: '{value}'
// color: 'rgba(111, 132, 189, 1)',
},
axisTick: {
- show: false,
+ show: false
},
axisLine: {
- show: false,
+ show: false
},
splitLine: {
lineStyle: {
@@ -440,48 +441,48 @@
}],
series: [
{
- type: 'bar',
- data: [this.openingLong,this.totalLong],
+ type: 'bar',
+ data: [this.openingLong, this.totalLong],
// data:[22,22],
- barWidth: 25,
- label:{
- show:true,
- position:"top",
- textStyle:{
- color:'#000',
+ 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`
+ 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]
+ 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)
},
- {
- offset:1,
- color:colorItem[1]
- }],false)
- },
- barBorderRadius: [5, 5, 0, 0],
+ barBorderRadius: [5, 5, 0, 0]
+ }
}
- },
- }]
- };
- UtilizationLine.setOption(UtilizationLine_option);
+ }]
+ }
+ UtilizationLine.setOption(UtilizationLine_option)
//寮�鍔ㄧ巼
- let StartupLine = this.$echarts.init(document.getElementById('StartupLine'), 'macarons');
+ let StartupLine = this.$echarts.init(document.getElementById('StartupLine'), 'macarons')
let StartupLine_option = {
tooltip: {
trigger: 'axis',
@@ -504,14 +505,14 @@
}
},
axisTick: {
- show: false,
+ show: false
},
axisLabel: {
// color: 'rgba(111, 132, 189, 1)',
textStyle: {
fontSize: 14
- },
- },
+ }
+ }
}],
yAxis: [{
type: 'value',
@@ -520,15 +521,15 @@
// color: 'rgba(111, 132, 189, 1)'
},
axisLabel: {
- formatter: '{value}',
+ formatter: '{value}'
// color: 'rgba(111, 132, 189, 1)',
},
axisTick: {
- show: false,
+ show: false
},
axisLine: {
- show: false,
+ show: false
},
splitLine: {
lineStyle: {
@@ -538,244 +539,261 @@
}],
series: [{
type: 'bar',
- data: [this.processLong,this.openingLong],
+ data: [this.processLong, this.openingLong],
// data:[22,22],
barWidth: 25,
- label:{
- show:true,
- position:"top",
- textStyle:{
- color:'#000',
+ 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`
+ 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"],
- ];
+ ['#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]
+ 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)
+ offset: 1,
+ color: colorItem[1]
+ }], false)
},
- barBorderRadius: [5, 5, 0, 0],
+ barBorderRadius: [5, 5, 0, 0]
}
- },
+ }
}]
- };
- StartupLine.setOption(StartupLine_option);
+ }
+ StartupLine.setOption(StartupLine_option)
},
- queryStatistical(){
- getAction(this.url.dayStatisticalRate,this.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;
+ queryStatistical() {
+ getAction(this.url.dayStatisticalRate, this.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();
+ 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()
}
})
},
dataChange(val) {
- if(val){
+ if (val) {
this.queryParams.dateTime = val.format('YYYYMMDD')
- this.queryParams.collectTime = val.format('YYYY-MM-DD');
+ this.queryParams.collectTime = val.format('YYYY-MM-DD')
}
},
initEquipmentNode() {
let _this = this
getAction(this.url.getBaseTree).then((res) => {
if (res.success) {
- if(res.result[0]){
- _this.$set(this.queryParam, 'tierName', res.result[0].title)
- _this.$set(this.queryParams, 'parentId', res.result[0].key)
+ const { isEquipment, productionId, tierName } = this.$route.params
+ // 鍒ゆ柇鏄惁鏄粠鐪嬫澘璺宠浆杩囨潵锛宲roductionId 瀛樺湪鍒欎负浠庣湅鏉胯烦杞�
+ if (productionId) {
+ _this.$set(this.queryParam, 'tierName', tierName)
+ // 鍒ゆ柇鏄惁鐐瑰嚮鐨勬槸璁惧灞傜骇
+ if (!isEquipment) _this.$set(this.queryParams, 'parentId', productionId)
+ else _this.$set(this.queryParams, 'equipmentId', productionId)
+ } 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()
- // console.log(res.result[0].entity.tierName)
} else {
- // this.$message.warn(res.message)
this.$notification.warning({
- message:'娑堟伅',
- description:res.message
- });
+ message: '娑堟伅',
+ description: res.message
+ })
}
}).finally(() => {
this.loading = false
this.cardLoading = false
})
- // getAction(this.url.getEquipmentByPid, { pid: id }).then((res) => {
- // if (res.success) {
- // if (res.result) {
- // _this.$set(this.queryParam, 'tierName', res.result.tierName)
- // _this.$set(this.queryParam, 'equipmentId', res.result.equipmentId)
- // // _this.quip = res.result
- // _this.searchQuery()
- // } else {
- // _this.$message.warning('璇烽厤缃澶囷紒')
- // }
- // }
- // })
},
searchReset() {
this.queryParam = {}
this.queryParams = {
- collectTime:moment().add(-1,'d').format('YYYY-MM-DD'),
- dateTime:moment().add(-1,'d').format('YYYYMMDD')
+ collectTime: moment().add(-1, 'd').format('YYYY-MM-DD'),
+ dateTime: moment().add(-1, 'd').format('YYYYMMDD')
}
this.initEquipmentNode()
- // this.dates = []
- // this.queryStatistical()
- // this.onClearSelected()
},
- searchQuery(){
- this.queryStatistical();
+ searchQuery() {
+ this.queryStatistical()
}
},
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();
+ // 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{
+ .charContent {
display: flex;
}
- @media screen and (min-width: 1920px){
- #StatisticsLegend{
- height: 748px!important;
+
+ @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;
+
+ @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;
+
+ @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;
+
+ @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;
+
+ @media screen and (max-width: 1280px) {
+ #StatisticsLegend {
+ height: 501px !important;
overflow: scroll;
}
}
- #StatisticsLegend .PowerOnRate{
+
+ #StatisticsLegend .PowerOnRate {
flex: 1;
margin-bottom: 15px;
background-color: #fff;
}
- #StatisticsLegend .UtilizationStartup{
+
+ #StatisticsLegend .UtilizationStartup {
flex: 1;
display: flex;
}
- #StatisticsLegend .UtilizationStartup>div{
+
+ #StatisticsLegend .UtilizationStartup > div {
flex: 1;
background-color: #fff;
}
- #StatisticsLegend .UtilizationStartup .Utilization{
+
+ #StatisticsLegend .UtilizationStartup .Utilization {
margin-right: 15px;
}
- .title{
+
+ .title {
display: flex;
align-items: center;
padding-left: 15px;
padding-top: 5px;
}
- .title .circle{
+
+ .title .circle {
width: 15px;
height: 15px;
background-color: #7282ec;
border-radius: 100%;
margin-right: 10px;
}
- .title .text{
+
+ .title .text {
font-size: 2vh;
}
- .Line-box{
+
+ .Line-box {
display: flex;
flex-direction: column;
}
- .Line-box .box-bottom{
+
+ .Line-box .box-bottom {
flex: 1;
}
- .PowerOnRate-box{
+
+ .PowerOnRate-box {
display: flex;
}
- .PowerOnRate-box .PowerOnRate-left{
+
+ .PowerOnRate-box .PowerOnRate-left {
width: 25%;
}
- .PowerOnRate-box .PowerOnRate-right{
+
+ .PowerOnRate-box .PowerOnRate-right {
flex: 1;
}
- .Utilization-box{
+
+ .Utilization-box {
display: flex;
}
- .Utilization-box .Utilization-left{
+
+ .Utilization-box .Utilization-left {
width: 25%;
}
- .Utilization-box .Utilization-right{
+
+ .Utilization-box .Utilization-right {
flex: 1;
}
- .Startup-box{
+
+ .Startup-box {
display: flex;
}
- .Startup-box .Startup-left{
+
+ .Startup-box .Startup-left {
width: 25%;
}
- .Startup-box .Startup-right{
+
+ .Startup-box .Startup-right {
flex: 1;
}
- .left{
+
+ .left {
display: flex;
align-items: center;
}
- .left .left-box{
+
+ .left .left-box {
width: 65%;
height: 60%;
margin: 0 auto;
@@ -786,7 +804,8 @@
/*!*background-color: yellow;*!*/
/*border-image: linear-gradient(to top, #2bf3c7, #06a8f8) 1;*/
}
- .left-box-con{
+
+ .left-box-con {
width: 100%;
height: 100%;
position: relative;
@@ -795,16 +814,18 @@
/*background-color: yellow;*/
border-image: linear-gradient(to top, #2bf3c7, #06a8f8) 1;
}
- .left .left-box .Rate-box-kong{
+
+ .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%);
+ 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{
+
+ .left .left-box .Rate-box {
position: absolute;
text-align: center;
bottom: 0;
@@ -812,27 +833,30 @@
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%);
+ 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{
+
+ .left .left-box .Rate-box p {
position: absolute;
bottom: 0;
color: #fff;
width: 100%;
text-align: center;
}
- .con-left{
+
+ .con-left {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
- .con-left>span{
+
+ .con-left > span {
flex: 1;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3