root/kanban-hl-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

直盘管样式

Browse Source
This commit is contained in:
caill
2023-04-14 10:40:38 +08:00
parent 8c03513ff6
commit c55f427ba6
1 changed files with 172 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

215
src/pages/management/ZhiPanGuan.vue
View File

@@ -54,7 +54,7 @@
<div class="item_content item_content_2">
<div class="alarm_box_l"></div>
<div class="alarm_box_r">
<vue-seamless-scroll :data="scollList1" :class-option="defaultOption1">
<vue-seamless-scroll class="scroll_wrap" :data="scollList1" :class-option="defaultOption1">
<ul class="scroll-ul_1">
<li v-for="(e, i) in scollList1" :key="i">
<div class="scroll-ul_1_div">{{e.time}}</div>
@@ -123,7 +123,46 @@
<div class="item_tip item_tip_l">
<div class="item_tip_left">任务列表</div>
</div>
<div class="item_content"></div>
<div class="item_content item_content_3">
<div class="scroll_wrap">
<ul class="scroll_tab">
<li>序号</li>
<li>工单号</li>
<li>物料</li>
<li>规格</li>
<li>数量</li>
<li>已生产</li>
<li>单位</li>
<li>机台</li>
<li>归属订单</li>
<li>状态</li>
<li>计划开始</li>
<li>开始时间</li>
<li>结束时间</li>
</ul>
<div class="scroll_container">
<vue-seamless-scroll :data="scollList2" :class-option="defaultOption2">
<ul class="scroll-ul_2">
<li v-for="(e, i) in scollList2" :key="i">
<div class="scroll-ul_2_div">{{i + 1}}</div>
<div class="scroll-ul_2_div">{{e.data1}}</div>
<div class="scroll-ul_2_div">盘管双斜</div>
<div class="scroll-ul_2_div">规格1</div>
<div class="scroll-ul_2_div">15000</div>
<div class="scroll-ul_2_div">15010</div>
<div class="scroll-ul_2_div">个</div>
<div class="scroll-ul_2_div">盘管双斜1</div>
<div class="scroll-ul_2_div">{{e.data1}}</div>
<div class="scroll-ul_2_div scroll_status_wrap"><span :style="{'background-color': ['#33CCCC', '#EAAD24', '#0E90FD', '#c9c9c9'][Number(e.device_status)]}"></span>已完成</div>
<div class="scroll-ul_2_div">08:00:00</div>
<div class="scroll-ul_2_div">08:00:00</div>
<div class="scroll-ul_2_div">08:00:00</div>
</li>
</ul>
</vue-seamless-scroll>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -145,15 +184,28 @@ export default {
myCharts3: '',
myCharts4: '',
myCharts5: '',
scollList1: [{time: '2020-1-1', p: '故障故障故障故障故障1'}, {time: '2020-1-1', p: '故障故障故障故障故障2'}, {time: '2020-1-1', p: '故障故障故障故障故障3'}, {time: '2020-1-1', p: '故障故障故障故障故障4'}, {time: '2020-1-1', p: '故障故障故障故障故障5'}, {time: '2020-1-1', p: '故障故障故障故障故障6'}],
arrL2: [{date: '2020-1-1', elbow_qty: '1', comprehensive_qty: '2'}]
scollList1: [{time: '2020-1-1', p: '故障故障故障故障故障1'}, {time: '2020-1-1', p: '故障故障故障故障故障2'}, {time: '2020-1-1', p: '故障故障故障故障故障3'}, {time: '2020-1-1', p: '故障故障故障故障故障4'}],
echartData1: [{data1: '10', data2: '15', data3: '9', data4: '5', device: '盘管双斜切'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '盘管双斜切'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '盘管双斜切'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '盘管双斜切'}],
scollList2: [{data1: 'GD00001', device_status: '0'}, {data1: 'GD00001', device_status: '1'}, {data1: 'GD00001', device_status: '2'}, {data1: 'GD00001', device_status: '3'}]
}
},
computed: {
defaultOption1 () {
return {
step: 0.4, // 数值越大速度滚动越快
limitMoveNum: 7, // 开始无缝滚动的数据量 this.dataList.length
limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
}
},
defaultOption2 () {
return {
step: 0.4, // 数值越大速度滚动越快
limitMoveNum: 6, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
@@ -301,15 +353,17 @@ export default {
}
},
setEchart2 () {
let date = []
let data1 = []
let data2 = []
let data3 = []
this.arrL2.map(e => {
date.push(e.date)
data1.push(e.elbow_qty)
data2.push(e.comprehensive_qty)
data3.push(e.comprehensive_qty)
let data4 = []
let device = []
this.echartData1.map(e => {
data1.push(e.data1)
data2.push(e.data2)
data3.push(e.data3)
data4.push(e.data4)
device.push(e.device)
})
let option = {
grid: {
@@ -329,7 +383,7 @@ export default {
itemGap: 30.86,
itemWidth: 14.16,
itemHeight: 7.38,
data: [{name: '弯头工段', itemStyle: {color: '#0E90FD'}}, {name: '综合工段', itemStyle: {color: '#33CCCC'}}, {name: '成品工段', itemStyle: {color: '#EAAD24'}}]
data: [{name: '正常运行', itemStyle: {color: '#33CCCC'}}, {name: '故障', itemStyle: {color: '#EAAD24'}}, {name: '待机', itemStyle: {color: '#0E90FD'}}, {name: '关机', itemStyle: {color: '#c9c9c9'}}]
},
xAxis: {
type: 'category',
@@ -348,10 +402,9 @@ export default {
textStyle: {
color: '#8FABBF',
fontSize: 16
},
rotate: 50
}
},
data: date
data: device
},
yAxis: {
type: 'value',
@@ -379,29 +432,7 @@ export default {
},
series: [
{
name: '弯头工段',
type: 'bar',
barWidth: '8',
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 1,
color: 'rgba(96,112,128,0.10)',
opacity: 1
},
{
offset: 0,
color: '#0E90FD',
opacity: 0.1
}
])
}
},
data: data1
},
{
name: '综合工段',
name: '正常运行',
type: 'bar',
barWidth: '8',
itemStyle: {
@@ -420,10 +451,10 @@ export default {
])
}
},
data: data2
data: data1
},
{
name: '成品工段',
name: '故障',
type: 'bar',
barWidth: '8',
itemStyle: {
@@ -442,7 +473,51 @@ export default {
])
}
},
data: data2
},
{
name: '待机',
type: 'bar',
barWidth: '8',
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 1,
color: 'rgba(96,112,128,0.10)',
opacity: 1
},
{
offset: 0,
color: '#0E90FD',
opacity: 0.1
}
])
}
},
data: data3
},
{
name: '关机',
type: 'bar',
barWidth: '8',
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#c9c9c9',
opacity: 1
},
{
offset: 1,
color: 'rgba(148,145,145,0.25)',
opacity: 0.25
}
])
}
},
data: data4
}
]
}
@@ -487,7 +562,8 @@ export default {
_wh(100%, 60%)
clear both
.bottom_wrap
_wh(100%, 40%)
_wh(100%, calc(40% - .3rem))
margin-top .3rem
.left_wrap
float left
width 49%
@@ -580,7 +656,6 @@ export default {
margin-left 27%
padding .17rem 10% .24rem 1rem
background-color rgba(244,247,38,.34)
overflow hidden
&::after
content ''
_wh(3px, 100%)
@@ -588,8 +663,12 @@ export default {
z-index 102
top 0
left 0
background rgba(244,247,38,.6)
background rgba(244,247,38,.55)
box-shadow 0px 0px 5px 3px rgba(244,247,38,.34)
.scroll_wrap
_wh(100%, 100%)
background-image linear-gradient(180deg, rgba(55,141,186,0.00) 0%, rgba(40,183,235,0.10) 100%)
overflow hidden
.scroll-ul_1
li
_wh(100%, .44rem)
@@ -604,4 +683,54 @@ export default {
color #f1c76d
margin-right .2rem
font-size .16rem
.item_content_3
height: calc(100% - 0.38rem)
padding 0
margin-top .06rem
border 0.01rem solid rgba(8,205,248,0.3)
.scroll_tab
_wh(100%, .4rem)
border-bottom .01rem solid rgba(8,205,248,0.3)
li
float left
width 8%
_font(.14rem,.4rem,#78B1DE,,center)
word-wrap break-word
word-break break-all
white-space nowrap
padding 0 .02rem
overflow hidden
box-sizing border-box
&:nth-child(1)
width 4%
.scroll_container
width 100%
height calc(100% - .4rem)
overflow hidden
.scroll-ul_2
li
_wh(100%, .44rem)
border-bottom .01rem solid rgba(8,205,248,0.3)
&:nth-child(even)
background rgba(1,24,52,0.60)
box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3)
.scroll-ul_2_div
float left
_wh(8%, .44rem)
_fj(center)
_font(.14rem, .44rem, #fff,,center)
word-wrap break-word
word-break break-all
white-space nowrap
padding 0 .02rem
overflow hidden
&:nth-child(1)
width 4%
.scroll_status_wrap
position relative
span
position absolute
left 25%
_wh(7px, 7px)
border-radius 50%
</style>