mt-fe-group/11-wms
13
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

10.19

Browse Source
This commit is contained in:
朱菊兰
2022-10-19 17:01:55 +08:00
commit 4f131cda36
466 changed files with 60382 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

949
src/views/OperationalOverview/ProductionMonitoringCockpit.vue Normal file
View File

@@ -0,0 +1,949 @@
<!--
* @Author: zwq
* @Date: 2021-07-19 15:18:30
* @LastEditors: zhp
* @LastEditTime: 2022-01-25 17:20:44
* @Description:
-->
<template>
<div id="container" ref="container" class="visual-container">
<el-row
class="container-title"
:style="{
height: beilv * 88 + 'px',
lineHeight: beilv * 88 + 'px',
fontSize: beilv * 30 + 'px'
}"
>
<img src="../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
合肥新能源数智工场生产监控驾驶舱
<el-button
type="text"
class="title-button"
:style="{ right: 33 * beilv + 'px', top: 37 * beilv + 'px' }"
@click="changeFullScreen"
>
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
<svg-icon v-else icon-class="fullScreenView" />
</el-button>
</el-row>
<el-row class="container-main">
<el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="9 * beilv">
<el-col :span="6">
<el-row type="flex" class="h-full flex-col">
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
<base-container :beilv="beilv" :height="360" :title="'设备报警(7天)'" :title-icon="'1_1'">
<div style="width:100%">
<el-row style="margin-bottom: 1em">
<p class="now-team-title main-title">- 报警总数 -</p>
<p class="now-team-content" style="margin:0">{{ exceptionAlarm.total }}</p>
</el-row>
</div>
<base-table1
:page="1"
:limit="7"
:show-index="false"
:beilv="beilv"
:table-config="exceptionAlarm.tableProps"
:table-data="exceptionAlarm.list"
/>
</base-container>
</el-col>
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
<!-- 各产线投入数量和产出 -->
<base-container :beilv="beilv" :height="318" :title="'各产线投入数量和产出'" :title-icon="'1_3'">
<top-radio-group :data-type="0" @change-time-range="handleChangeChartTable3" />
<base-table3
:limit="10"
:beilv="beilv"
:table-config="inAndOutOfEachLine.tableProps"
:table-data="inAndOutOfEachLine.list"
/>
</base-container>
</el-col>
</el-row>
</el-col>
<el-col :span="12">
<!-- 中间栏 -->
<el-row type="flex" class="h-full flex-col">
<el-col style="height: 100%; display: flex; flex-direction: column;">
<!-- 各产线投入数量折线展示 -->
<el-row style="flex-grow: 1; display: flex;">
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
<base-container :beilv="beilv" :title="'各产线投入数量折线展示'" :title-icon="'1_5'">
<div style="position:absolute;right:1em;top:3em;width:30em;">
<top-radio-group :data-type="0" @change-time-range="handleChangeOptions('投入数量图', $event)" />
</div>
<simple-line-chart v-if="loadTable" :beilv="beilv" :height="180" :data-list="plInput" />
</base-container>
</el-col>
</el-row>
<!-- 各产线投入产出折线展示 -->
<el-row style="flex-grow: 1; display: flex;">
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
<base-container :beilv="beilv" :title="'各产线产出数量折线展示'" :title-icon="'1_5'">
<div style="position:absolute;right:1em;top:3em;width:30em;">
<top-radio-group :data-type="0" @change-time-range="handleChangeOptions('产出数量图', $event)" />
</div>
<simple-line-chart v-if="loadTable" :beilv="beilv" :height="180" :data-list="plOutput" />
</base-container>
</el-col>
</el-row>
<!-- 成品率折线展示 -->
<el-row style="flex-grow: 1; display: flex;">
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
<base-container :beilv="beilv" :title="'投入/产出比率'" :title-icon="'1_5'">
<div style="position:absolute;right:1em;top:3em;width:30em;">
<top-radio-group :data-type="0" @change-time-range="handleChangeOptions('投入产出比', $event)" />
</div>
<simple-line-chart v-if="loadTable" :beilv="beilv" :height="180" :data-list="plRate" />
</base-container>
<!-- <base-container :beilv="beilv" :title="'成品率折线展示'" :title-icon="'1_6'">
<div style="position:absolute;right:2em;top:3em;width:30em;">
<top-radio-group />
</div>
<line-chart2
:id="'line-chart2'"
:show-legend="true"
:legend-position="'center'"
:legend-data="legendData"
:beilv="beilv"
:height="'200'"
/>
</base-container> -->
</el-col>
</el-row>
<!-- 成品率条形图展示 -->
<!-- <el-row style="flex-grow: 1; display: flex;">
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
<base-container title="成品率条形图展示" title-icon="yieldline" :beilv="beilv">
<linear-bar-chart
:name-list="cplNameList"
:data-list="cplDataList"
:beilv="beilv"
:show-legend="true"
/>
</base-container>
</el-col>
</el-row> -->
</el-col>
</el-row>
</el-col>
<el-col :span="6">
<!-- 右边栏 订单详情 -->
<el-row type="flex" class="h-full flex-col">
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
<base-container :beilv="beilv" :title="'订单详情'" :title-icon="'1_2'">
<div style="width:100%; max-height: 50%; overflow: hidden scroll;">
<!-- <el-row style="margin-bottom: 1em">
<p class="now-team-title">加工工单进度</p>
</el-row> -->
<el-row v-for="op in orderProcessList" :key="op.id" style="margin-bottom: 1em">
<el-progress :percentage="op.outRate * 100" class="custom-progress-bar" />
<p v-if="op.outRate === 1" class="now-secondary-title" style="color:#4679FD">
<i class="el-icon-check" />
{{ op.name }}
</p>
<p v-else class="now-secondary-title">{{ op.name }}</p>
</el-row>
<!-- <el-row>
<el-progress :percentage="100" class="custom-progress-bar" />
<p class="now-secondary-title" style="color:#4679FD">
<i class="el-icon-check" />
成都碲化镉5000一期订单
</p>
</el-row>
<el-row>
<el-progress :percentage="85" class="custom-progress-bar" />
<p class="now-secondary-title">成都碲化镉二订单</p>
</el-row>
<el-row>
<el-progress :percentage="85" class="custom-progress-bar" />
<p class="now-secondary-title">长利订单1000</p>
</el-row>
<el-row>
<el-progress :percentage="85" class="custom-progress-bar" />
<p class="now-secondary-title">国际工程20号订单</p>
</el-row>
<el-row>
<el-progress :percentage="85" class="custom-progress-bar" />
<p class="now-secondary-title">铜铟镓硒眉山10万订单</p>
</el-row> -->
</div>
<div style="background:linear-gradient(to left,#071020,#52FFF1,#071020);height:1px;margin:2em 0" />
<div style="width:100%">
<el-row style="margin: 1em 0">
<p class="now-team-title">待加工订单</p>
</el-row>
</div>
<base-table2
:page="1"
:limit="7"
:beilv="beilv"
:table-config="qualityTableProps2"
:table-data="qualityList2"
/>
</base-container>
</el-col>
</el-row>
</el-col>
<el-col :span="18">
<el-row :gutter="9 * beilv">
<!-- <el-col :span="16">
<el-row>
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
<base-container :beilv="beilv" :height="672">
<base-video :video-height="624" :beilv="beilv" />
</base-container>
</el-col>
</el-row>
</el-col> -->
<el-col :span="16">
<el-row />
</el-col>
<el-col :span="8">
<el-row>
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
<!-- <base-container :beilv="beilv" :height="318" :title="'各产线投入数量和产出'" :title-icon="'1_3'">
<top-radio-group />
<base-table3
:limit="10"
:beilv="beilv"
:table-config="qualityTableProps3"
:table-data="qualityList3"
/>
</base-container> -->
</el-col>
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
<!-- <base-container :beilv="beilv" :height="338" :title="'班组信息'" :title-icon="'1_4'">
<linear-bar-chart
:name-list="cxNameList"
:data-list="cxDataList"
:height="212"
:beilv="beilv"
:show-legend="true"
/>
</base-container> -->
</el-col>
</el-row>
</el-col>
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="12">
<!-- <base-container :beilv="beilv" :height="256" :title="'各产线投入数量和产出折线展示'" :title-icon="'1_5'">
<div style="position:absolute;right:1em;top:3em">
<top-radio-group />
</div>
<line-chart1 :id="'line-chart1'" :beilv="beilv" :legend-data="legendData" :height="'200'" />
</base-container> -->
</el-col>
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="12">
<!-- <base-container :beilv="beilv" :height="256" :title="'成品率折线展示'" :title-icon="'1_6'">
<line-chart2
:id="'line-chart2'"
:show-legend="true"
:legend-position="'right'"
:legend-data="legendData"
:beilv="beilv"
:height="'200'"
/>
</base-container> -->
</el-col>
</el-row>
</el-col>
</el-row>
</el-row>
</div>
</template>
<script>
import baseContainer from './components/baseContainer'
import baseTable1 from './components/baseTable'
import baseTable2 from './components/baseTable'
import baseTable3 from './components/baseTable'
import TopRadioGroup from './components/topRadioGroup'
// import LineChart1 from './components/LineChart'
// import LineChart2 from './components/LineChart'
// import LinearBarChart from './components/linearBarChart'
import { mapGetters } from 'vuex'
import screenfull from 'screenfull'
import SimpleLineChart from './components/SimpleLineChart.vue'
// import BaseVideo from './components/baseVideo.vue'
import axios from '@/utils/request'
import { timeFormatter } from '@/filters'
import moment from 'moment'
const qualityTableProps1 = [
{
prop: 'createTime',
label: '报警时间'
},
{
prop: 'alarmCode',
label: '报警编码'
},
{
prop: 'alarmContent',
label: '报警内容'
}
]
const qualityTableProps2 = [
{
prop: 'createTime',
label: '下单时间'
},
{
prop: 'orderCode',
label: '订单编码'
},
{
prop: 'orderNumber',
label: '订单数量'
}
]
const qualityList1 = [
{ createTime: '2020/01/01', alarmCode: '3928498293', alarmContent: '故障' },
{ createTime: '2020/01/02', alarmCode: '3928498294', alarmContent: '故障' },
{ createTime: '2020/01/03', alarmCode: '3928498292', alarmContent: '故障' },
{ createTime: '2020/01/04', alarmCode: '3928498291', alarmContent: '故障' },
{ createTime: '2020/01/05', alarmCode: '3928498296', alarmContent: '故障' },
{ createTime: '2020/01/06', alarmCode: '3928498298', alarmContent: '故障' }
]
const qualityList2 = [
{ createTime: '2020/01/11', orderCode: '3928498292', orderNumber: '12312' },
{ createTime: '2020/01/12', orderCode: '3928498291', orderNumber: '21321' },
{ createTime: '2020/01/13', orderCode: '3928498293', orderNumber: '32121321' },
{ createTime: '2020/01/14', orderCode: '3928498294', orderNumber: '323213' },
{ createTime: '2020/01/15', orderCode: '3928498295', orderNumber: '2312312' },
{ createTime: '2020/01/16', orderCode: '3928498297', orderNumber: '2312312' }
]
const legendData = [
{
name: '产线1',
icon: 'circle'
},
{
name: '产线2',
icon: 'circle'
},
{
name: '产线3',
icon: 'circle'
},
{
name: '产线4',
icon: 'circle'
},
{
name: '产线5',
icon: 'circle'
},
{
name: '产线6',
icon: 'circle'
}
]
const cxNameList = ['周一', '周二', '周三', '周四', '周五']
const cxDataList = [
{
topColor: '#9DD5FF',
bottomColor: '#1295FF',
name: '班组1',
data: [100, 150, 121, 97, 140]
},
{
topColor: '#FF8BC3',
bottomColor: '#EB46A1',
name: '班组2',
data: [110, 110, 151, 77, 110]
},
{
topColor: '#85F6E9',
bottomColor: '#2EC6B4',
name: '班组3',
data: [110, 120, 171, 287, 40]
},
{
topColor: '#9496FF',
bottomColor: '#6567FF',
name: '班组4',
data: [140, 157, 122, 27, 240]
},
{
topColor: '#F68E8A',
bottomColor: '#E95552',
name: '班组5',
data: [170, 180, 127, 17, 340]
},
{
topColor: '#FFE873',
bottomColor: '#E7AE2A',
name: '班组6',
data: [140, 160, 121, 57, 170]
}
]
const cplNameList = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
const cplDataList = [
{
topColor: '#9DD5FF',
bottomColor: '#1295FF',
name: '钢一线',
data: [100, 150, 121, 97, 140, 180, 127]
},
{
topColor: '#FF8BC3',
bottomColor: '#EB46A1',
name: '钢二线',
data: [110, 110, 151, 77, 110, 151, 77]
},
{
topColor: '#85F6E9',
bottomColor: '#2EC6B4',
name: '钢三线',
data: [110, 120, 171, 287, 40, 160, 127]
},
{
topColor: '#9496FF',
bottomColor: '#6567FF',
name: '钢四线',
data: [140, 157, 122, 27, 240, 180, 127]
},
{
topColor: '#F68E8A',
bottomColor: '#E95552',
name: '钢五线',
data: [170, 180, 127, 17, 340, 180, 255]
},
{
topColor: '#FFE873',
bottomColor: '#E7AE2A',
name: '钢六线',
data: [140, 160, 121, 57, 170, 3, 127]
}
]
export default {
name: 'ProductionMonitoringCockpit',
components: {
baseContainer,
baseTable1,
baseTable2,
baseTable3,
TopRadioGroup,
SimpleLineChart
// LineChart1,
// LineChart2,
// LinearBarChart
// BaseVideo
},
data() {
return {
exceptionAlarm: {
tableProps: [
{ prop: 'createTime', label: '报警时间', filter: timeFormatter },
{ prop: 'alarmContent', label: '报警内容' },
{ prop: 'alarmGrade', label: '报警等级' },
// { prop: 'count', label: '总数' },
{ prop: 'equipmentName', label: '设备名称' }
],
total: 0,
list: []
},
inAndOutOfEachLine: {
tableProps: [
{ prop: 'pdName', label: '产线名' },
{ prop: 'in', label: '上片数量' },
{ prop: 'out', label: '下片数量' },
{ prop: 'rate', label: '比率' }
// {
// prop: 'rate',
// label: '比率',
// filter: val => {
// if (val !== null && val !== undefined && val.trim() !== '') return `${(val * 100).toFixed(2)}%`
// else return '-'
// }
// }
],
total: 0,
list: []
},
orderProcessList: [],
beilv: 1,
isFullScreen: false,
qualityTableProps1,
qualityList1,
qualityTableProps2,
qualityList2,
dateType: '0',
legendData,
cxNameList,
cxDataList,
cplNameList,
cplDataList,
plInput: {},
plOutput: {},
plRate: {},
loadTable: false,
standardCategory: null
}
},
computed: {
...mapGetters(['sidebar'])
},
watch: {
isFullScreen: function(val) {
if (val) {
this.beilv = document.body.offsetWidth / 1920
} else {
this.beilv = document.getElementById('container').offsetWidth / 1920
}
},
'sidebar.opened': function(val) {
console.log(val)
if (!this.isFullScreen) {
setTimeout(() => {
this.beilv = document.getElementById('container').offsetWidth / 1920
}, 300)
}
}
},
created() {
this.fetchList('exception-alarm')
this.fetchList('inAndOutOfEachLine')
this.fetchList('order-process')
this.fetchList('line-chart-data')
this.init()
},
mounted() {
this.beilv = document.getElementById('container').offsetWidth / 1920
window.addEventListener('resize', () => {
if (this.isFullScreen) {
this.beilv = document.body.offsetWidth / 1920
} else {
this.beilv = document.getElementById('container').offsetWidth / 1920
}
})
},
methods: {
fetchList(type) {
switch (type) {
case 'exception-alarm': {
return axios({
url: '/analysis/factory-monitor/alarm',
method: 'post'
}).then(res => {
if (res.data.length) {
this.exceptionAlarm.list = res.data
res.data.forEach(item => {
if (item.count) {
this.exceptionAlarm.total = item.count
}
})
} else {
this.exceptionAlarm.total = 0
this.exceptionAlarm.list.splice(0)
}
})
}
case 'inAndOutOfEachLine':
return this.handleChangeChartTable3('0')
case 'order-process':
return axios({
url: '/analysis/factory-monitor/order',
method: 'post'
}).then(res => {
if (res.data) {
this.orderProcessList = res.data
// this.orderProcessList = [
// { id: 1, name: '订单1', outRate: 0.5 },
// { id: 2, name: '订单2', outRate: 0.54 },
// { id: 3, name: '订单3', outRate: 0.45 },
// { id: 4, name: '订单4', outRate: 0.65 },
// { id: 5, name: '订单5', outRate: 0.35 },
// { id: 6, name: '订单6', outRate: 0.15 },
// { id: 7, name: '订单7', outRate: 0.5 },
// { id: 8, name: '订单8', outRate: 0.5 }
// ]
} else {
this.orderProcessList.splice(0)
}
})
case 'line-chart-data':
return this.handleChangeOptions('all', '0')
}
},
change() {
this.isFullScreen = screenfull.isFullscreen
},
init() {
if (screenfull.enabled) {
screenfull.on('change', this.change)
}
},
destroy() {
if (screenfull.enabled) {
screenfull.off('change', this.change)
}
},
changeFullScreen() {
if (!screenfull.enabled) {
this.$message({
message: 'you browser can not work',
type: 'warning'
})
return false
}
screenfull.toggle(this.$refs.container)
},
/**
* 当切换当天、一周、一个月数据时
* @param {string} chartId - '投入数量图', '产出数量图', '投入产出比'
* @param {string} optValue - '0','1','2'
*/
handleChangeOptions(chartId, optValue) {
let startTime
let endTime
const url = '/analysis/factory-monitor/pdlNumTime'
const method = 'post'
switch (optValue) {
case '0': {
const baseTime = moment().set({ hour: 0, minute: 0, second: 0 })
startTime = baseTime.format('YYYY-MM-DDTHH:mm:ss')
endTime = baseTime.set({ hour: 23, minute: 59, second: 59 }).format('YYYY-MM-DDTHH:mm:ss')
break
}
case '1': {
startTime = moment()
.subtract(1, 'week')
.set({ hour: 0, minute: 0, second: 0 })
.format('YYYY-MM-DDTHH:mm:ss')
endTime = moment().format('YYYY-MM-DDTHH:mm:ss')
break
}
case '2': {
startTime = moment()
.subtract(1, 'month')
.set({ hour: 0, minute: 0, second: 0 })
.format('YYYY-MM-DDTHH:mm:ss')
endTime = moment().format('YYYY-MM-DDTHH:mm:ss')
break
}
}
return axios({
url,
method,
data: {
startTime,
endTime
}
}).then(res => {
console.log('res', res)
switch (chartId) {
case '投入数量图':
this.plInput = {}
res.data.forEach(item => {
if (!this.standardCategory) {
this.standardCategory = item.series
}
item.data.forEach((category, index) => {
if (!isNaN(Number(category.time))) {
category.time = +category.time
}
if (this.plInput[item.pdName]) {
this.$set(this.plInput[item.pdName], [category.time], category.in)
} else {
this.$set(this.plInput, [item.pdName], { [category.time]: category.in })
}
})
})
/** 填充 key */
this.fillKey(this.plInput, this.standardCategory)
this.standardCategory = null
break
case '产出数量图':
this.plOutput = {}
res.data.forEach(item => {
if (!this.standardCategory) {
this.standardCategory = item.series
}
item.data.forEach((category, index) => {
if (!isNaN(Number(category.time))) {
category.time = +category.time
}
if (this.plOutput[item.pdName]) {
this.$set(this.plOutput[item.pdName], [category.time], category.out)
} else {
this.$set(this.plOutput, [item.pdName], { [category.time]: category.out })
}
})
})
/** 填充 key */
this.fillKey(this.plOutput, this.standardCategory)
this.standardCategory = null
break
case '投入产出比':
this.plRate = {}
res.data.forEach(item => {
if (!this.standardCategory) {
this.standardCategory = item.series
}
item.data.forEach((category, index) => {
if (!isNaN(Number(category.time))) {
category.time = +category.time
}
if (this.plRate[item.pdName]) {
this.$set(this.plRate[item.pdName], [category.time], category.rate)
} else {
this.$set(this.plRate, [item.pdName], { [category.time]: category.rate })
}
})
})
/** 填充 key */
this.fillKey(this.plRate, this.standardCategory)
this.standardCategory = null
break
case 'all':
res.data.forEach(item => {
/** 保存x轴的标准分类，因为数据会有缺失，标准分类用于校验哪些数据缺失 */
if (!this.standardCategory) {
this.standardCategory = item.series
}
/** if valid */
if (item.data.length) {
/** handle data */
item.data.forEach((category, index) => {
if (!isNaN(Number(category.time))) {
category.time = +category.time
}
if (this.plInput[item.pdName]) {
this.$set(this.plInput[item.pdName], [category.time], category.in)
} else {
this.$set(this.plInput, [item.pdName], { [category.time]: category.in })
}
if (this.plOutput[item.pdName]) {
this.$set(this.plOutput[item.pdName], [category.time], category.out)
} else {
this.$set(this.plOutput, [item.pdName], { [category.time]: category.out })
}
if (this.plRate[item.pdName]) {
this.$set(this.plRate[item.pdName], [category.time], category.rate)
} else {
this.$set(this.plRate, [item.pdName], { [category.time]: category.rate })
}
})
}
})
/** 填充 key */
this.fillKey(this.plInput, this.standardCategory)
this.fillKey(this.plOutput, this.standardCategory)
this.fillKey(this.plRate, this.standardCategory)
this.loadTable = true
this.standardCategory = null
break
}
})
},
fillKey(obj, keyList) {
for (const [legend, child] of Object.entries(obj)) {
/** 数量相等，就不继续执行了 */
if (Object.keys(child).length === keyList) return
const newChild = {}
keyList.forEach(key => {
if (!isNaN(Number(key))) {
key = +key
}
if (child[key] === undefined) {
newChild[key] = null
} else {
newChild[key] = child[key]
}
})
obj[legend] = newChild
}
},
handleChangeChartTable3(v) {
let startTime
let endTime
switch (v) {
case '0': {
const baseTime = moment().set({ hour: 0, minute: 0, second: 0 })
startTime = baseTime.format('YYYY-MM-DDTHH:mm:ss')
endTime = baseTime.add(1, 'd').format('YYYY-MM-DDTHH:mm:ss')
break
}
case '1': {
startTime = moment()
.startOf('week')
.set({ hour: 0, minute: 0, second: 0 })
.format('YYYY-MM-DDTHH:mm:ss')
endTime = moment(new Date()).format('YYYY-MM-DDTHH:mm:ss')
break
}
case '2': {
startTime = moment()
.startOf('month')
.set({ hour: 0, minute: 0, second: 0 })
.format('YYYY-MM-DDTHH:mm:ss')
endTime = moment(new Date()).format('YYYY-MM-DDTHH:mm:ss')
break
}
}
/** 请求数据 */
axios({
url: '/analysis/factory-monitor/pdlNum',
method: 'post',
data: {
startTime,
endTime
}
}).then(res => {
// inAndOutOfEachLine
if (res.data) {
this.inAndOutOfEachLine.total = res.data.length
this.inAndOutOfEachLine.list = res.data
} else {
this.inAndOutOfEachLine.total = 0
this.inAndOutOfEachLine.list.splice(0)
}
})
}
}
}
</script>
<style lang="scss" scoped>
.visual-container {
width: 100%;
min-width: 960px;
background: url('../../assets/img/OperationalOverview/back.png') no-repeat;
background-size: cover;
.container-title {
width: 100%;
background: url('../../assets/img/OperationalOverview/title.png') no-repeat;
background-size: 100% 100%;
color: #00fff0;
text-align: center;
.title-button {
color: #00fff0;
font-size: 20px;
position: absolute;
}
}
.container-main {
padding: 16px;
}
}
.now-team-title {
margin: 0;
margin-top: -1em;
font-size: 1.2em;
line-height: 2em;
color: #fff;
}
.main-title {
text-align: center;
}
.now-secondary-title {
margin: 0;
font-size: 1em;
line-height: 2em;
color: #fff;
}
.now-team-content {
font-size: 3em;
line-height: 1em;
color: #52fff1;
text-align: center;
}
::v-deep .el-progress-bar__inner {
background-color: unset;
background-image: linear-gradient(to right, #4573fe, #47f8dc);
}
</style>
<style lang="scss">
.visual-container {
::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: transparent;
}
::-webkit-scrollbar-track-piece {
background: #1b2b3d;
}
::-webkit-scrollbar-corner {
background: #1b2b3d;
}
::-webkit-scrollbar-track {
width: 6px;
background: #1b2b3d;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
::-webkit-scrollbar-thumb {
background: rgba($color: #5bc4be, $alpha: 0.7);
background-clip: padding-box;
min-height: 28px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
transition: background-color 0.3s;
cursor: pointer;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba($color: #5bc4be, $alpha: 1);
}
}
</style>
<style lang="scss" scoped>
.h-full {
height: calc(100vh - 150px);
}
.flex-col {
flex-direction: column;
.el-col {
flex-grow: 1;
flex-shrink: 1;
}
}
.custom-progress-bar >>> .el-progress-bar__outer {
background-color: #1d304b;
}
</style>