更新成 品 仓 储 驾 驶 舱
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
<!--
|
||||
* @Author: lb
|
||||
* @Date: 2022-01-21 14:43:06
|
||||
* @LastEditors: lb
|
||||
* @LastEditTime: 2022-01-24 13:27:41
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2022-10-20 15:09:47
|
||||
* @Description: 简单折线图
|
||||
-->
|
||||
<template>
|
||||
@@ -155,7 +155,8 @@ export default {
|
||||
default: 1
|
||||
},
|
||||
height: {
|
||||
type: Number
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
legend: {
|
||||
type: Array,
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<template>
|
||||
<div
|
||||
class="base-container"
|
||||
:style="{ height: '100%', fontSize: 12 * beilv + 'px', padding: 12 * beilv + 'px' }"
|
||||
:style="{ height: '100%', fontSize: 12 * beilv + 'px', padding: 8 * beilv + 'px' }"
|
||||
:class="{ 'no-padding': noPadding, 'border-none': !showLine }"
|
||||
>
|
||||
<!-- <div class="base-container" :style="{height: height * beilv + 'px', fontSize: 12 * beilv + 'px', padding: 12 * beilv + 'px'}"> -->
|
||||
|
||||
244
src/views/OperationalOverview/components/newBar.vue
Normal file
244
src/views/OperationalOverview/components/newBar.vue
Normal file
@@ -0,0 +1,244 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div :id="id" :class="className" :style="{ height: height * beilv + 'px', width:width}" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import 'echarts/theme/macarons' // echarts theme
|
||||
import resize from './mixins/resize'
|
||||
|
||||
export default {
|
||||
name: 'OverviewBar',
|
||||
mixins: [resize],
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'threeBarChart'
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
beilv: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
},
|
||||
showLegend: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
nameList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
dataList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
series: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.dataList.length > 1) {
|
||||
this.series = [
|
||||
{ // 柱体
|
||||
name: this.dataList[0].name,
|
||||
type: 'bar',
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[0].topColor },
|
||||
{ offset: 1, color: this.dataList[0].bottomColor }
|
||||
])
|
||||
},
|
||||
data: this.dataList[0].data
|
||||
},
|
||||
{ // 柱顶
|
||||
name: this.dataList[0].name,
|
||||
type: 'pictorialBar',
|
||||
barWidth: 26,
|
||||
symbol: 'diamond',
|
||||
symbolPosition: 'end',
|
||||
symbolOffset: [0, '-50%'],
|
||||
symbolSize: [30, 12],
|
||||
zlevel: 2,
|
||||
itemStyle: { color: this.dataList[0].topColor },
|
||||
data: this.dataList[0].data
|
||||
},
|
||||
{ // 柱底
|
||||
name: this.dataList[0].name,
|
||||
type: 'pictorialBar',
|
||||
barWidth: 26,
|
||||
symbol: 'diamond',
|
||||
symbolOffset: [0, '50%'],
|
||||
symbolSize: [30, 15],
|
||||
itemStyle: { color: this.dataList[0].bottomColor },
|
||||
data: this.dataList[0].data
|
||||
},
|
||||
{ // 柱体
|
||||
name: this.dataList[1].name,
|
||||
type: 'bar',
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[1].topColor },
|
||||
{ offset: 1, color: this.dataList[1].bottomColor }
|
||||
])
|
||||
},
|
||||
data: this.dataList[1].data
|
||||
},
|
||||
{ // 柱顶
|
||||
name: this.dataList[1].name,
|
||||
type: 'pictorialBar',
|
||||
barWidth: 26,
|
||||
symbol: 'diamond',
|
||||
symbolPosition: 'end',
|
||||
symbolOffset: [0, '-50%'],
|
||||
symbolSize: [30, 12],
|
||||
zlevel: 2,
|
||||
itemStyle: { color: this.dataList[1].topColor },
|
||||
data: this.dataList[1].data
|
||||
},
|
||||
{ // 柱底
|
||||
name: this.dataList[1].name,
|
||||
type: 'pictorialBar',
|
||||
barWidth: 26,
|
||||
symbol: 'diamond',
|
||||
symbolOffset: [0, '50%'],
|
||||
symbolSize: [30, 15],
|
||||
itemStyle: { color: this.dataList[1].topColor },
|
||||
data: this.dataList[1].data
|
||||
}
|
||||
]
|
||||
} else {
|
||||
this.series = [
|
||||
{ // 柱体
|
||||
name: this.dataList[0].name,
|
||||
type: 'bar',
|
||||
barWidth: 26,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[0].topColor },
|
||||
{ offset: 1, color: this.dataList[0].bottomColor }
|
||||
])
|
||||
},
|
||||
data: this.dataList[0].data
|
||||
},
|
||||
{ // 柱顶
|
||||
name: this.dataList[0].name,
|
||||
type: 'pictorialBar',
|
||||
barWidth: 26,
|
||||
symbol: 'circle',
|
||||
symbolPosition: 'end',
|
||||
symbolOffset: [0, '-50%'],
|
||||
symbolSize: [26, 6],
|
||||
zlevel: 2,
|
||||
itemStyle: { color: '#2c6e7d' },
|
||||
label: {
|
||||
color: 'rgba(119, 255, 242, 1)',
|
||||
show: true,
|
||||
offset: [0, 10],
|
||||
position: 'top'
|
||||
},
|
||||
data: this.dataList[0].data
|
||||
},
|
||||
{ // 柱底
|
||||
name: this.dataList[0].name,
|
||||
type: 'pictorialBar',
|
||||
barWidth: 26,
|
||||
symbol: 'circle',
|
||||
symbolOffset: [0, '50%'],
|
||||
symbolSize: [26, 6],
|
||||
itemStyle: { color: '#2c6e7d' },
|
||||
data: this.dataList[0].data
|
||||
}
|
||||
]
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
console.log(this.series)
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 10,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||
},
|
||||
margin: 20
|
||||
},
|
||||
data: this.nameList
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#213259', // 左边线的颜色
|
||||
width: '1'// 坐标线的宽度
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dotted',
|
||||
color: '#213259'
|
||||
}
|
||||
},
|
||||
type: 'value'
|
||||
},
|
||||
series: this.series
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
315
src/views/OperationalOverview/components/newPie.vue
Normal file
315
src/views/OperationalOverview/components/newPie.vue
Normal file
@@ -0,0 +1,315 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2022-01-21 14:43:06
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2022-10-25 09:30:47
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div :id="id" :class="className" :style="{ height: computedHeight, width: width }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import 'echarts/theme/macarons' // echarts theme
|
||||
import resize from './mixins/resize'
|
||||
|
||||
export default {
|
||||
name: 'OverviewBar',
|
||||
mixins: [resize],
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'DefaultPieChart'
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
beilv: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
},
|
||||
showCenterTitle: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showLegend: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
legendConfig: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
seriesConfig: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
seriesData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
barColor: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
'#5fe1d2',
|
||||
'#ffb2b0',
|
||||
'#8e90ff',
|
||||
'#f058aa',
|
||||
'#8652da',
|
||||
'#87fb84',
|
||||
'#61b9ff',
|
||||
'#fdf6a6',
|
||||
'#ffc465',
|
||||
'#98d9ff'
|
||||
]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const lData = this.seriesData
|
||||
return {
|
||||
chart: null,
|
||||
newColor: [
|
||||
'#1A99FF',
|
||||
'#A691FF',
|
||||
'#FB418C',
|
||||
'#49FBD6',
|
||||
'#DDB112'
|
||||
],
|
||||
defaultConfig: {
|
||||
// 默认的legend配置
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
bottom: 0,
|
||||
itemHeight: 10,
|
||||
itemWidth: 10,
|
||||
icon: 'none',
|
||||
formatter: function(name) {
|
||||
let pieLegendVale = {}
|
||||
lData.filter((item, index) => {
|
||||
if (item.name === name) {
|
||||
pieLegendVale = item
|
||||
}
|
||||
})
|
||||
const color = ['c', 'd', 'e', 'f', 'g']
|
||||
const arr = ['{' + color[lData.findIndex(item => item.name === name)] + '|}', '{b|' + pieLegendVale.name + '}', '{a|' + pieLegendVale.value + '}']
|
||||
return arr.join(' ')
|
||||
},
|
||||
textStyle: {
|
||||
rich: {
|
||||
a: {
|
||||
align: 'center',
|
||||
fontSize: 10,
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
lineHeight: 16
|
||||
},
|
||||
b: {
|
||||
// verticalAlign: 'top',
|
||||
align: 'center',
|
||||
fontSize: 10,
|
||||
color: 'rgba(255, 255, 255)'
|
||||
},
|
||||
c: {
|
||||
// verticalAlign: 'top',
|
||||
align: 'center',
|
||||
width: 10,
|
||||
borderRadius: 5,
|
||||
height: 10,
|
||||
backgroundColor: '#1A99FF'
|
||||
},
|
||||
d: {
|
||||
// verticalAlign: 'top',
|
||||
align: 'center',
|
||||
width: 10,
|
||||
borderRadius: 5,
|
||||
height: 10,
|
||||
backgroundColor: '#A691FF'
|
||||
},
|
||||
e: {
|
||||
// verticalAlign: 'top',
|
||||
align: 'center',
|
||||
width: 10,
|
||||
borderRadius: 5,
|
||||
height: 10,
|
||||
backgroundColor: '#FB418C'
|
||||
},
|
||||
f: {
|
||||
// verticalAlign: 'top',
|
||||
align: 'center',
|
||||
width: 10,
|
||||
borderRadius: 5,
|
||||
height: 10,
|
||||
backgroundColor: '#49FBD6'
|
||||
},
|
||||
g: {
|
||||
// verticalAlign: 'top',
|
||||
align: 'center',
|
||||
width: 10,
|
||||
borderRadius: 5,
|
||||
height: 10,
|
||||
backgroundColor: '#DDB112'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 默认的series配置
|
||||
series: {
|
||||
center: ['60%', '55%'],
|
||||
radius: ['50%', '70%'],
|
||||
silent: true,
|
||||
avoidLabelOverlap: false,
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
fontSize: '20',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
computedHeight: function() {
|
||||
if (/[0-9]+%$/.test(this.height)) {
|
||||
// 如果是百分比
|
||||
return this.height
|
||||
}
|
||||
return this.height * this.beilv + 'px'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
this.chart.setOption({
|
||||
title: this.showCenterTitle
|
||||
? {
|
||||
text: this.seriesData.reduce((pre, cur) => pre + cur.value, 0),
|
||||
subtext: '总共',
|
||||
top: '45%',
|
||||
left: '59%',
|
||||
textAlign: 'center',
|
||||
itemGap: 5,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 22,
|
||||
fontWeight: 'lighter',
|
||||
lineHeight: 15
|
||||
},
|
||||
subtextStyle: {
|
||||
color: '#c0c0c0',
|
||||
fontSize: 12,
|
||||
lineHeight: 20
|
||||
}
|
||||
}
|
||||
: {},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
grid: {
|
||||
top: '0px',
|
||||
right: '0px',
|
||||
bottom: '0px',
|
||||
left: '0px',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
// 默认配置
|
||||
...this.defaultConfig.legend,
|
||||
// 外部传入配置
|
||||
...this.legendConfig
|
||||
},
|
||||
color: this.newColor,
|
||||
series: [
|
||||
{
|
||||
name: 'default name',
|
||||
type: 'pie',
|
||||
// 默认series配置
|
||||
...this.defaultConfig.series,
|
||||
// 外部传入配置
|
||||
...this.seriesConfig,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: (list) => {
|
||||
var colorList = [
|
||||
{
|
||||
colorStart: 'rgba(59, 76, 118, 0.2)',
|
||||
colorEnd: '#1A99FF'
|
||||
},
|
||||
{
|
||||
colorStart: 'rgba(59, 76, 118, 0.2)',
|
||||
colorEnd: '#A691FF'
|
||||
},
|
||||
{
|
||||
colorStart: 'rgba(59, 76, 118, 0.2)',
|
||||
colorEnd: '#FB418C'
|
||||
},
|
||||
{
|
||||
colorStart: 'rgba(59, 76, 118, 0.2)',
|
||||
colorEnd: '#49FBD6'
|
||||
},
|
||||
{
|
||||
colorStart: 'rgba(59, 76, 118, 0.2)',
|
||||
colorEnd: '#DDB112'
|
||||
}
|
||||
]
|
||||
return new echarts.graphic.LinearGradient(0, list.dataIndex > 1 ? 1 : 0, 0, list.dataIndex > 1 ? 0 : 1, [{ // 左、下、右、上
|
||||
offset: 0,
|
||||
color: colorList[list.dataIndex]['colorStart']
|
||||
}, {
|
||||
offset: 1,
|
||||
color: colorList[list.dataIndex]['colorEnd']
|
||||
}])
|
||||
}
|
||||
}
|
||||
},
|
||||
label: {
|
||||
formatter: [
|
||||
'{d}%'
|
||||
].join('\n')
|
||||
},
|
||||
data: this.seriesData.map((item, index) => {
|
||||
item.label = {
|
||||
color: this.newColor[index]
|
||||
}
|
||||
return item
|
||||
})
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* .chart >>> div:first-child{
|
||||
background-color: red;
|
||||
height: 100% !important;
|
||||
} */
|
||||
</style>
|
||||
BIN
src/views/OperationalOverview/components/static/back1.png
Normal file
BIN
src/views/OperationalOverview/components/static/back1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 198 KiB |
@@ -0,0 +1,85 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2020-12-29 16:37:56
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2022-10-25 08:51:13
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="container">
|
||||
<div
|
||||
v-for="i in areaArr"
|
||||
:key="i"
|
||||
:style="{ height: 135 * beilv + 'px', margin: 8 * beilv + 'px' + ' 0' }"
|
||||
class="area"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="1"><div class="areaName">{{ i }}</div></el-col>
|
||||
<el-col :span="23">
|
||||
<div class="locationFlex">
|
||||
<div
|
||||
v-for="l in 72"
|
||||
:key="l"
|
||||
:class="l>Math.round(Math.random()*100)?'waring':''"
|
||||
:style="{ marginRight: 6 * beilv + 'px',marginTop: 2 * beilv + 'px',marginBottom: 1 * beilv + 'px',width: 30 * beilv + 'px',height: 28 * beilv + 'px'}"
|
||||
class="location"
|
||||
>{{ l }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import SmallTitle from '@/components/BaseDrawer/components/SmallTitle.vue'
|
||||
|
||||
export default {
|
||||
// components: { SmallTitle },
|
||||
props: {
|
||||
beilv: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
areaArr: ['A区', 'B区', 'C区', 'D区', 'E区', 'F区']
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.area {
|
||||
background: url('../../../assets/img/OperationalOverview/编组36.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 5px 10px;
|
||||
margin: 3px 0;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
background-color: rgb(0, 0, 0, 0.5);
|
||||
}
|
||||
.areaName {
|
||||
padding-top: 60%;
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.locationFlex{
|
||||
margin-left: 15px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-between;
|
||||
}
|
||||
.location{
|
||||
background: #63cf74;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
line-height: 25px;
|
||||
}
|
||||
.waring{
|
||||
background: #FF5D6B;
|
||||
}
|
||||
</style>
|
||||
702
src/views/OperationalOverview/storageCockpit.vue
Normal file
702
src/views/OperationalOverview/storageCockpit.vue
Normal file
@@ -0,0 +1,702 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2021-07-19 15:18:30
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2022-10-25 10:06:59
|
||||
* @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="8">
|
||||
<el-row type="flex" class="h-full flex-col">
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
||||
<base-container :beilv="beilv" :height="190" :title="'成品入库作业'" :title-icon="'入库管理'">
|
||||
<div style="width:100%">
|
||||
<el-row>
|
||||
<el-col :span="12"><div class="inTest">时间:2022.12.12 13:12:45</div></el-col>
|
||||
<el-col :span="12"><div class="inTest">成品编码:34394233442</div></el-col>
|
||||
<el-col :span="12"><div class="inTest">入库作业号:347384734</div></el-col>
|
||||
<el-col :span="12"><div class="inTest">成品规格:234*345*34</div></el-col>
|
||||
<el-col :span="12"><div class="inTest">执行叉车:叉车</div></el-col>
|
||||
<el-col :span="12"><div class="inTest">库位:A区34货位3层</div></el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</base-container>
|
||||
</el-col>
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
||||
<!-- 成品入库列队 -->
|
||||
<base-container :beilv="beilv" :height="190" :title="'成品入库列队'" :title-icon="'编组'">
|
||||
<base-table
|
||||
:limit="10"
|
||||
:beilv="beilv"
|
||||
:table-config="inAndOutOfEachLine.tableProps"
|
||||
:table-data="inAndOutOfEachLine.list"
|
||||
/>
|
||||
</base-container>
|
||||
</el-col>
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
||||
<base-container :beilv="beilv" :height="190" :title="'成品出库作业'" :title-icon="'出库管理'">
|
||||
<div style="width:100%">
|
||||
<el-row>
|
||||
<el-col :span="12"><div class="outTest">时间:2022.12.12 13:12:45</div></el-col>
|
||||
<el-col :span="12"><div class="outTest">ERP订单::34394233442</div></el-col>
|
||||
<el-col :span="12"><div class="outTest">成品编码:34394233442</div></el-col>
|
||||
<el-col :span="12"><div class="outTest">出库作业号::347384734</div></el-col>
|
||||
<el-col :span="12"><div class="outTest">成品规格:234*345*34</div></el-col>
|
||||
<el-col :span="12"><div class="outTest">执行叉车:叉车</div></el-col>
|
||||
<el-col :span="12"><div class="outTest">库位:A区34货位3层</div></el-col>
|
||||
<el-col :span="12"><div class="outTest">库位前置区::A区34货位3层</div></el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</base-container>
|
||||
</el-col>
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
||||
<!-- 成品入库列队 -->
|
||||
<base-container :beilv="beilv" :height="190" :title="'成品出库列队'" :title-icon="'编组备份 2'">
|
||||
<base-table
|
||||
:limit="10"
|
||||
:beilv="beilv"
|
||||
:table-config="inAndOutOfEachLine.tableProps"
|
||||
:table-data="inAndOutOfEachLine.list"
|
||||
/>
|
||||
</base-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="10">
|
||||
<!-- 中间栏 -->
|
||||
<el-row type="flex" class="h-full flex-col">
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
||||
<base-container :beilv="beilv">
|
||||
<storage-cockpit-area :beilv="beilv" />
|
||||
</base-container>
|
||||
</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)'">
|
||||
<div class="div-box" style="text-align: center;">
|
||||
<span v-html="titleLeftSVG" />
|
||||
<span style="color: #01CFCC; font-size: 15px; line-height: 18px;">
|
||||
成品库存一览1
|
||||
</span>
|
||||
<div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" />
|
||||
<new-pie
|
||||
:id="'pie-chart1'"
|
||||
:show-center-title="true"
|
||||
:legend-config="{ left: '1%',top: '30%', itemGap: 5 }"
|
||||
:series-data="legendData3"
|
||||
:beilv="beilv"
|
||||
:height="'220'"
|
||||
/>
|
||||
</div>
|
||||
<div class="div-box" style="text-align: center;">
|
||||
<span v-html="titleLeftSVG" />
|
||||
<span style="color: #01CFCC; font-size: 15px; line-height: 18px;">
|
||||
成品库存一览2
|
||||
</span>
|
||||
<div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" />
|
||||
<new-bar
|
||||
:name-list="clNameList"
|
||||
:data-list="clDataList"
|
||||
:height="'220'"
|
||||
:beilv="beilv"
|
||||
/>
|
||||
</div>
|
||||
<div class="div-box" style="text-align: center;">
|
||||
<span v-html="titleLeftSVG" />
|
||||
<span style="color: #01CFCC; font-size: 15px; line-height: 18px;">
|
||||
成品库存一览3
|
||||
</span>
|
||||
<div style="transform: rotateY(180deg); display: inline-block;" v-html="titleLeftSVG" />
|
||||
<new-pie
|
||||
:id="'pie-chart3'"
|
||||
:show-center-title="true"
|
||||
:legend-config="{ left: '1%',top: '30%', itemGap: 5 }"
|
||||
:series-data="legendData3"
|
||||
:beilv="beilv"
|
||||
:height="'220'"
|
||||
/>
|
||||
</div>
|
||||
</base-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import baseContainer from './components/baseContainer'
|
||||
import baseTable from './components/baseTable'
|
||||
import newPie from './components/newPie'
|
||||
import newBar from './components/newBar'
|
||||
import storageCockpitArea from './components/storageCockpitArea'
|
||||
// import LineChart1 from './components/LineChart'
|
||||
// import LineChart2 from './components/LineChart'
|
||||
// import LinearBarChart from './components/linearBarChart'
|
||||
import { mapGetters } from 'vuex'
|
||||
import screenfull from 'screenfull'
|
||||
// import BaseVideo from './components/baseVideo.vue'
|
||||
import axios from '@/utils/request'
|
||||
import moment from 'moment'
|
||||
|
||||
const legendData3 = [
|
||||
{
|
||||
name: 'A',
|
||||
icon: 'circle',
|
||||
value: 196
|
||||
},
|
||||
{
|
||||
name: 'B',
|
||||
icon: 'circle',
|
||||
value: 111
|
||||
},
|
||||
{
|
||||
name: 'C',
|
||||
icon: 'circle',
|
||||
value: 89
|
||||
},
|
||||
{
|
||||
name: 'D',
|
||||
icon: 'circle',
|
||||
value: 77
|
||||
},
|
||||
{
|
||||
name: 'E',
|
||||
icon: 'circle',
|
||||
value: 77
|
||||
}
|
||||
]
|
||||
const clDataList = [
|
||||
{
|
||||
topColor: 'rgba(59, 76, 118, 0.2)',
|
||||
bottomColor: '#49FBD6',
|
||||
name: '库存',
|
||||
data: [64, 91, 55, 65, 37, 77]
|
||||
}
|
||||
]
|
||||
const clNameList = [
|
||||
'A',
|
||||
'B',
|
||||
'C',
|
||||
'D',
|
||||
'E',
|
||||
'F'
|
||||
]
|
||||
const titleLeftSVG = `<svg
|
||||
width="56px"
|
||||
height="13px"
|
||||
viewBox="0 0 56 13"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<title>left</title>
|
||||
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="2-5质量管理" transform="translate(-419.000000, -808.000000)" fill="#31A6AE">
|
||||
<g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
|
||||
<g id="编组-20备份" transform="translate(24.000000, 277.000000)">
|
||||
<g id="编组-13备份" transform="translate(35.000000, 16.000000)">
|
||||
<g
|
||||
id="编组-2备份"
|
||||
transform="translate(28.000000, 8.500000) scale(1, -1) translate(-28.000000, -8.500000) translate(0.000000, 2.000000)"
|
||||
>
|
||||
<polygon
|
||||
id="路径-11"
|
||||
points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"
|
||||
></polygon>
|
||||
<polygon
|
||||
id="路径-11备份"
|
||||
opacity="0.8"
|
||||
points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
|
||||
></polygon>
|
||||
<polygon
|
||||
id="路径-11备份-3"
|
||||
opacity="0.4"
|
||||
points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
|
||||
></polygon>
|
||||
<polygon
|
||||
id="路径-11备份-2"
|
||||
opacity="0.601434"
|
||||
points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
|
||||
></polygon>
|
||||
<polygon
|
||||
id="路径-11备份-4"
|
||||
opacity="0.201434"
|
||||
points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
|
||||
></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>`
|
||||
export default {
|
||||
name: 'ProductionMonitoringCockpit',
|
||||
components: {
|
||||
baseContainer,
|
||||
baseTable,
|
||||
storageCockpitArea,
|
||||
newPie,
|
||||
newBar
|
||||
// LineChart1,
|
||||
// LineChart2,
|
||||
// LinearBarChart
|
||||
// BaseVideo
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
legendData3,
|
||||
clNameList,
|
||||
clDataList,
|
||||
inAndOutOfEachLine: {
|
||||
tableProps: [
|
||||
{ prop: 'test1', label: '作业号' },
|
||||
{ prop: 'test2', label: '执行叉车' },
|
||||
{ prop: 'test3', label: '成品编码' },
|
||||
{ prop: 'test4', label: '成品规格' },
|
||||
{ prop: 'test5', label: '库位' }
|
||||
],
|
||||
total: 0,
|
||||
list: [
|
||||
{
|
||||
test1: '392849829',
|
||||
test2: '叉车1',
|
||||
test3: '392849829',
|
||||
test4: '322*234*12',
|
||||
test5: '库位1'
|
||||
},
|
||||
{
|
||||
test1: '392849829',
|
||||
test2: '叉车2',
|
||||
test3: '392849829',
|
||||
test4: '322*234*12',
|
||||
test5: '库位2'
|
||||
},
|
||||
{
|
||||
test1: '392849829',
|
||||
test2: '叉车3',
|
||||
test3: '392849829',
|
||||
test4: '322*234*12',
|
||||
test5: '库位3'
|
||||
}
|
||||
]
|
||||
},
|
||||
orderProcessList: [],
|
||||
beilv: 1,
|
||||
titleLeftSVG,
|
||||
isFullScreen: false,
|
||||
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.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: {
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
}
|
||||
.inTest{
|
||||
font-size: 1.2em;
|
||||
background: url('../../assets/img/OperationalOverview/矩形@2x.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding:5px 10px;
|
||||
margin: 3px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.outTest{
|
||||
font-size: 1.2em;
|
||||
background: url('../../assets/img/OperationalOverview/矩形@2x(1).png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding:5px 10px;
|
||||
margin: 3px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.div-box{
|
||||
background: transparent;
|
||||
box-shadow: inset 0 0 16px 1px rgba(255, 255, 255, 0.5);
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.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>
|
||||
Reference in New Issue
Block a user