样式
This commit is contained in:
133
src/assets/css/layout2.styl
Normal file
133
src/assets/css/layout2.styl
Normal file
@@ -0,0 +1,133 @@
|
||||
@import 'mixin2.styl'
|
||||
|
||||
// 样式测试
|
||||
.style_block
|
||||
display none
|
||||
position absolute
|
||||
_wh(calc(100% / 3), calc(100% / 3))
|
||||
background red
|
||||
// 页面跳转
|
||||
.tooltip_wrap
|
||||
position fixed
|
||||
bottom 10%
|
||||
z-index 10
|
||||
_wh(auto, 40px)
|
||||
padding 5px 5px
|
||||
background-color rgba(228,233,237,1)
|
||||
_fj(row)
|
||||
&:hover
|
||||
opacity 1 !important
|
||||
.left_tooltip_wrap
|
||||
right 0
|
||||
border-top-left-radius 12px
|
||||
border-bottom-left-radius 12px
|
||||
.right_tooltip_wrap
|
||||
left 0
|
||||
border-top-right-radius 12px
|
||||
border-bottom-right-radius 12px
|
||||
.tooltip_arrow
|
||||
_wh(40px, 100%)
|
||||
_font(14px, 30px, #999,,)
|
||||
.tooltip_pages
|
||||
height 100%
|
||||
_fj(row)
|
||||
transition width .3s ease
|
||||
overflow hidden
|
||||
.tooltip_page
|
||||
height 100%
|
||||
margin 0 5px
|
||||
_font(14px, 30px, #999,,)
|
||||
border 1px solid #999
|
||||
border-radius: 30px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 10px;
|
||||
&:hover
|
||||
background-color #03fcfd
|
||||
border-color #03fcfd
|
||||
color #fff
|
||||
.current_page
|
||||
background-color #02d0d0
|
||||
border-color #02d0d0
|
||||
color #fff
|
||||
|
||||
// 弹窗
|
||||
.popup_block_wraper
|
||||
position fixed
|
||||
top 0
|
||||
left 0
|
||||
z-index 100
|
||||
width 550px
|
||||
padding 20px 14px 30px 14px
|
||||
_bis('../images/screen3/popup_bg.png')
|
||||
.foldline
|
||||
position absolute
|
||||
right -109px
|
||||
z-index 10
|
||||
_wh(127px,105px)
|
||||
_bis('../images/screen3/dot_line.png')
|
||||
.foldline_right
|
||||
right -109px
|
||||
.foldline_left
|
||||
left -109px
|
||||
transform rotateY(180deg)
|
||||
.popup_bg
|
||||
_wh(100%, 100%)
|
||||
background top center / 100% 18px url(../images/screen3/popup_line.png) no-repeat
|
||||
overflow hidden
|
||||
.popup_block
|
||||
_wh(100%,100%)
|
||||
padding 15px 0 0 0
|
||||
.pop_header
|
||||
_wh(100%, 28px)
|
||||
padding 0 5px
|
||||
_fj(row)
|
||||
.pop_name
|
||||
width 50%
|
||||
_font(14px,28px,#32C5FF,,left)
|
||||
text-shadow 2px 2px 4px #A6E6FF
|
||||
margin-bottom 8px
|
||||
.pop_status
|
||||
_wh(50%, 28px)
|
||||
_fj(row,flex-end)
|
||||
.pop_status_dot
|
||||
_wh(15px, 15px)
|
||||
border-radius 50%
|
||||
margin-right 10px
|
||||
.pop_status_text
|
||||
_font(16px, 28px, #fff,,)
|
||||
.pop_content
|
||||
_wh(100%, calc(100% - 28px))
|
||||
padding 0 5px
|
||||
overflow-y auto
|
||||
_fj(row,flex-start)
|
||||
flex-wrap wrap
|
||||
.pop_item
|
||||
_wh(calc(50% - 2.5px), 30px)
|
||||
_fj(row,flex-start)
|
||||
background-color rgba(50,197,255,50%)
|
||||
border-left 3px solid #fdfd0f
|
||||
margin-bottom 5px
|
||||
padding 0 5px
|
||||
&:nth-child(2n+2)
|
||||
width calc(50% - 2.5px)
|
||||
margin-left 5px
|
||||
.pop_label
|
||||
width 100px
|
||||
_font(12px, 24px, #fff,,left)
|
||||
.pop_val
|
||||
width calc(100% - 100px)
|
||||
_font(13px, 24px, #0ff,,left)
|
||||
white-space nowrap
|
||||
.pop_val_s
|
||||
width calc(100% - 118px)
|
||||
.pop_unit
|
||||
width 18px
|
||||
_font(13px, 24px, #fff,,right)
|
||||
overflow hidden
|
||||
.icon-guanbi
|
||||
position absolute
|
||||
top 8px
|
||||
right 9px
|
||||
_wh(30px, 22px)
|
||||
_font(15px, 22px, #fff,,center)
|
||||
background-color #0a3679
|
||||
48
src/assets/css/mixin2.styl
Normal file
48
src/assets/css/mixin2.styl
Normal file
@@ -0,0 +1,48 @@
|
||||
$green = #30EBC9
|
||||
$yellow = #E2BB0E
|
||||
$gray = #516282
|
||||
$gray1 = #8B90A6
|
||||
$orange = #F96700
|
||||
$green2 = #65d837
|
||||
|
||||
.green
|
||||
background-color #11ff0d
|
||||
.yellow
|
||||
background-color #fdfd0f
|
||||
.gray
|
||||
background-color #bfbfbf
|
||||
.gray1
|
||||
background-color #d8d1d1
|
||||
.red
|
||||
background-color #ff1016
|
||||
|
||||
//宽高
|
||||
_wh(w, h)
|
||||
width: w
|
||||
height: h
|
||||
|
||||
//字体大小、行高、颜色
|
||||
_font(size,height,color=#ffffff,weight=normal,align=center)
|
||||
font-size: size
|
||||
line-height: height
|
||||
color: color
|
||||
font-weight: weight
|
||||
text-align: align
|
||||
|
||||
// 背景图片地址和大小
|
||||
_bis(url,w=100%,h=100%,x=center,y=center,r=no-repeat)
|
||||
background-position: x y
|
||||
background-size: w h
|
||||
background-image: url(url)
|
||||
background-repeat: r
|
||||
|
||||
// 背景图片改变颜色
|
||||
_shadow(w,c)
|
||||
filter drop-shadow(w 0 0 c)
|
||||
|
||||
//flex 布局和 子元素 对其方式
|
||||
_fj(c=column, x=space-between,y=center)
|
||||
display: flex
|
||||
flex-direction: c
|
||||
justify-content: x
|
||||
align-items: y
|
||||
BIN
src/assets/images/screen3/bg_content_r.jpg
Normal file
BIN
src/assets/images/screen3/bg_content_r.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 364 KiB |
BIN
src/assets/images/screen3/bg_header.jpg
Normal file
BIN
src/assets/images/screen3/bg_header.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
BIN
src/assets/images/screen3/bg_title_s.png
Normal file
BIN
src/assets/images/screen3/bg_title_s.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/images/screen3/bg_title_tip.png
Normal file
BIN
src/assets/images/screen3/bg_title_tip.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 895 B |
BIN
src/assets/images/screen3/dot_line.png
Normal file
BIN
src/assets/images/screen3/dot_line.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
src/assets/images/screen3/hj.png
Normal file
BIN
src/assets/images/screen3/hj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
src/assets/images/screen3/lz_hj_gray.png
Normal file
BIN
src/assets/images/screen3/lz_hj_gray.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/assets/images/screen3/lz_hj_green.png
Normal file
BIN
src/assets/images/screen3/lz_hj_green.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
src/assets/images/screen3/lz_hj_red.png
Normal file
BIN
src/assets/images/screen3/lz_hj_red.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
src/assets/images/screen3/lz_hj_yellow.png
Normal file
BIN
src/assets/images/screen3/lz_hj_yellow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
src/assets/images/screen3/popup_bg.png
Normal file
BIN
src/assets/images/screen3/popup_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
BIN
src/assets/images/screen3/popup_dot.png
Normal file
BIN
src/assets/images/screen3/popup_dot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/assets/images/screen3/popup_line.png
Normal file
BIN
src/assets/images/screen3/popup_line.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
src/assets/images/screen3/top_right.png
Normal file
BIN
src/assets/images/screen3/top_right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
1587
src/assets/js/getData0.js
Normal file
1587
src/assets/js/getData0.js
Normal file
File diff suppressed because it is too large
Load Diff
@@ -24,52 +24,116 @@ export const errCensus = (id) => post('api/deviceScreen/errCensus', {})
|
||||
/** 仓储监控 */
|
||||
export const storageMonitor = (id) => post('api/dashboard/warehouseMonitor', {})
|
||||
/** 生产统计 */
|
||||
export const productionStatistics = (id) => post('api/dashboard/productionStatistics', {})
|
||||
// export const productionStatistics = () => {
|
||||
// let res = {
|
||||
// 'total': {
|
||||
// 'pressWeight': 0,
|
||||
// 'dryWeight': 0,
|
||||
// 'sortWeight': 0
|
||||
// },
|
||||
// 'mixProduction': [
|
||||
// {
|
||||
// 'value': 0,
|
||||
// 'name': 'string'
|
||||
// }
|
||||
// ],
|
||||
// 'pressProduction': {
|
||||
// 'dailyProductionQty': 0,
|
||||
// 'dailyProductionWeight': 0,
|
||||
// 'equipmentProduction': [
|
||||
// {
|
||||
// 'name': 'string',
|
||||
// 'qty': 0,
|
||||
// 'weight': 0
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// 'finishedProductCompletionRate': [
|
||||
// {
|
||||
// 'name': 'string',
|
||||
// 'completed': 0,
|
||||
// 'uncompleted': 0
|
||||
// }
|
||||
// ],
|
||||
// 'workOrder': [
|
||||
// {
|
||||
// 'workOrderCode': 'string',
|
||||
// 'equipment': 'string',
|
||||
// 'materialCode': 'string',
|
||||
// 'customer': 'string',
|
||||
// 'planned': 0,
|
||||
// 'completed': 0,
|
||||
// 'status': 'string',
|
||||
// 'planStartTime': 'string',
|
||||
// 'startTime': 'string',
|
||||
// 'endTime': 'string'
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// return res
|
||||
// }
|
||||
// export const productionStatistics = (id) => post('api/dashboard/productionStatistics', {})
|
||||
export const productionStatistics = () => {
|
||||
let res = {
|
||||
'pressProduction': {
|
||||
'dailyProductionQty': 32.25,
|
||||
'equipmentProduction': [
|
||||
{
|
||||
'qty': 11000,
|
||||
'name': '压机1',
|
||||
'weight': 13000
|
||||
},
|
||||
{
|
||||
'qty': 4000,
|
||||
'name': '压机2',
|
||||
'weight': 19000
|
||||
},
|
||||
{
|
||||
'qty': 5000,
|
||||
'name': '压机3',
|
||||
'weight': 3000
|
||||
}
|
||||
],
|
||||
'dailyProductionWeight': 64.25
|
||||
},
|
||||
'workOrder': [
|
||||
{
|
||||
'planStartTime': '2023-08-18 14:02:48',
|
||||
'workOrderCode': 'DD001',
|
||||
'equipment': '压机1',
|
||||
'materialCode': 'WL01',
|
||||
'startTime': '2023-08-18 14:02:48',
|
||||
'planned': '1000kg',
|
||||
'completed': '827kg',
|
||||
'endTime': '2023-08-18 14:02:48',
|
||||
'customer': '厂家1',
|
||||
'status': '完成'
|
||||
},
|
||||
{
|
||||
'planStartTime': '2023-08-18 14:02:48',
|
||||
'workOrderCode': 'DD002',
|
||||
'equipment': '混料机2',
|
||||
'materialCode': 'WL02',
|
||||
'startTime': '2023-08-18 14:02:48',
|
||||
'planned': '1000kg',
|
||||
'completed': '894kg',
|
||||
'customer': '厂家2',
|
||||
'status': '已下发'
|
||||
},
|
||||
{
|
||||
'planStartTime': '2023-08-18 14:02:48',
|
||||
'workOrderCode': 'DD003',
|
||||
'equipment': '压机3',
|
||||
'materialCode': 'WL03',
|
||||
'planned': '3000kg',
|
||||
'completed': '627kg',
|
||||
'customer': '厂家3',
|
||||
'status': '未生产'
|
||||
},
|
||||
{
|
||||
'planStartTime': '2023-08-18 14:02:48',
|
||||
'workOrderCode': 'DD004',
|
||||
'equipment': '混料机4',
|
||||
'materialCode': 'WL04',
|
||||
'startTime': '2023-08-18 14:02:48',
|
||||
'planned': '8000kg',
|
||||
'completed': '6137kg',
|
||||
'customer': '厂家4',
|
||||
'status': '暂停'
|
||||
}
|
||||
],
|
||||
'total': {
|
||||
'pressWeight': 30.25,
|
||||
'dryWeight': 20.25,
|
||||
'sortWeight': 16.25
|
||||
},
|
||||
'finishedProductCompletionRate': [
|
||||
{
|
||||
'uncompleted': 5000,
|
||||
'name': '物料1',
|
||||
'completed': 4000
|
||||
},
|
||||
{
|
||||
'uncompleted': 3000,
|
||||
'name': '物料2',
|
||||
'completed': 4000
|
||||
},
|
||||
{
|
||||
'uncompleted': 4000,
|
||||
'name': '物料3',
|
||||
'completed': 3000
|
||||
}
|
||||
],
|
||||
'mixProduction': [
|
||||
{
|
||||
'name': '物料1',
|
||||
'value': 800.25
|
||||
},
|
||||
{
|
||||
'name': '物料2',
|
||||
'value': 800.25
|
||||
},
|
||||
{
|
||||
'name': '物料3',
|
||||
'value': 900.25
|
||||
},
|
||||
{
|
||||
'name': '物料4',
|
||||
'value': 600.25
|
||||
}
|
||||
]
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -5,6 +5,7 @@ import router from './router'
|
||||
import store from './vuex/store'
|
||||
import '@css/reset.css'
|
||||
import '@css/layout.styl'
|
||||
import '@css/layout2.styl'
|
||||
// import '@js/rem.js'
|
||||
import filter from '@js/filter.js'
|
||||
import { Dialog, toast } from '@js/mUtils.js'
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<section class="bg">
|
||||
<t-header title="顺和大屏监控">
|
||||
<t-header title="顺和大屏监控-生产统计">
|
||||
<!-- <p class="p1">1</p> -->
|
||||
</t-header>
|
||||
<div class="container">
|
||||
|
||||
@@ -3,6 +3,13 @@
|
||||
<t-header title="顺和大屏监控——仓储监控">
|
||||
<!-- <p class="p1">1</p> -->
|
||||
</t-header>
|
||||
<!-- <t-header title="顺和大屏监控——仓储监控">
|
||||
<div class="pages">
|
||||
<router-link to="/setup">物流工艺</router-link>
|
||||
<router-link to="/setup">生产统计</router-link>
|
||||
<router-link to="/setup">设备监控</router-link>
|
||||
</div>
|
||||
</t-header> -->
|
||||
<div class="container">
|
||||
<div class="top_wrapper">
|
||||
<div class="yard-wrap">
|
||||
@@ -27,96 +34,239 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="yard_group clearfix">
|
||||
<div class="yard_group_ul yard_group_ul_1 fl">
|
||||
<div class="yard_group_cell" v-for="(e, i) in group01" :key="i" :class="{lock:e.lock_type ==='01'}">
|
||||
<div class="yard_group_p" @click="getInfo1(e)">
|
||||
<p class="fontselect">{{e.point_name}}</p>
|
||||
<div v-if="e.struct_url == '1'" class="machine_1"></div>
|
||||
<!-- <div class="ingbox" :style="{height:(Number(e.show_struct_qty)/1000*60+'px')}" :class="{green:e.stand_status ==='2',yellow:e.stand_status ==='3',red:e.stand_status ==='4',blue:e.stand_status ==='5'}"></div> -->
|
||||
<div class="ingbox" style="height:78px;" :class="{green:e.stand_status ==='2',yellow:e.stand_status ==='3',red:e.stand_status ==='4',blue:e.stand_status ==='5'}"></div>
|
||||
</div>
|
||||
<div v-show="code1 === e.point_code" class="locate-wrap clearfix" :class="e.mgl">
|
||||
<div :class="e.aline">
|
||||
<div class="foldcricle0 foldcricle1"></div>
|
||||
<div class="foldline0 foldline1"></div>
|
||||
</div>
|
||||
<div :class="e.bline">
|
||||
<div class="foldline0 foldline2"></div>
|
||||
<div class="foldcricle0 foldcricle2"></div>
|
||||
</div>
|
||||
<div class="clearfix locate-content" :class="e.coordinate">
|
||||
<div class="tan_pline">
|
||||
<p class="tan_p">货位：{{e.point_name}}<span :class="{cgreen:e.stand_status ==='2',cyellow:e.stand_status ==='3',cred:e.stand_status ==='4',cblue:e.stand_status ==='5'}">{{e.stand_status_name}}</span></p>
|
||||
<p class="tan_p">载具：{{e.vehicle_code}}</p>
|
||||
<p class="tan_p">BOM：{{e.material_code}}</p>
|
||||
<p class="tan_p">重量(千克)：{{e.ivt_qty}}</p>
|
||||
<p class="tan_p">入库时间：{{e.instorage_time}}</p>
|
||||
<p class="tan_p">静置(小时)：{{e.standing_time}}</p>
|
||||
<div class="yard_group clearfix" style="display: flex;">
|
||||
<div class="tcon1">
|
||||
<div class="lbox">
|
||||
<div class="conn1" v-for="(e, i) in group01.slice(0, 12)" :key="i" :class="{mgl10: i === 2 || i === 4 || i === 6 || i === 8 || i === 10}">
|
||||
<div class="a-box" @click="showInfo(e)">
|
||||
<div class="atext">{{e.storageLocation}}</div>
|
||||
<div class="acon">
|
||||
<div class="maskbox" :class="{green:e.standStatus ==='1',yellow:e.standStatus ==='2',red:e.standStatus ==='3',blue:e.pointStatus ==='2'}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-box" v-show="flg === e.storageLocation">
|
||||
<div class="border left-top-border">
|
||||
<img src="../../assets/images/screen3/dot_line.png" alt="">
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="iconfont icon-guanbi close_btn" @click="closeInfo"></div>
|
||||
<p class="tan_p">货位：{{e.storageLocation}}<span>{{e.standStatus}}</span></p>
|
||||
<p class="tan_p">载具：{{e.vehicleCode}}</p>
|
||||
<p class="tan_p">物料：{{e.materialCode}}</p>
|
||||
<p class="tan_p">名称：{{e.materialName}}</p>
|
||||
<p class="tan_p">重量(kg)：{{e.weight}}</p>
|
||||
<p class="tan_p">入库时间：{{e.warehousingTime}}</p>
|
||||
<p class="tan_p">静置(h)：{{e.standTime}}</p>
|
||||
<!-- <img src="../../assets/images/screen3/popup_bg.png" alt=""> -->
|
||||
<!-- <img src="../../assets/images/screen3/popup_line.png" alt=""> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lbox lbox2">
|
||||
<div class="conn1" v-for="(e, i) in group01.slice(12, 26)" :key="i">
|
||||
<div class="a-box" @click="showInfo(e)">
|
||||
<div class="atext">{{e.storageLocation}}</div>
|
||||
<div class="acon">
|
||||
<div class="maskbox" :class="{green:e.standStatus ==='1',yellow:e.standStatus ==='2',red:e.standStatus ==='3',blue:e.pointStatus ==='2'}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-box" v-show="flg === e.storageLocation">
|
||||
<div class="border left-top-border">
|
||||
<img src="../../assets/images/screen3/dot_line.png" alt="">
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="iconfont icon-guanbi close_btn" @click="closeInfo"></div>
|
||||
<p class="tan_p">货位：{{e.storageLocation}}<span>{{e.standStatus}}</span></p>
|
||||
<p class="tan_p">载具：{{e.vehicleCode}}</p>
|
||||
<p class="tan_p">物料：{{e.materialCode}}</p>
|
||||
<p class="tan_p">名称：{{e.materialName}}</p>
|
||||
<p class="tan_p">重量(kg)：{{e.weight}}</p>
|
||||
<p class="tan_p">入库时间：{{e.warehousingTime}}</p>
|
||||
<p class="tan_p">静置(h)：{{e.standTime}}</p>
|
||||
</div>
|
||||
<div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="yard_group_ul yard_group_ul_3 fr">
|
||||
<div class="yard_group_cell" v-for="(e, i) in group03" :key="i" :class="{lock:e.lock_type ==='01'}">
|
||||
<div class="yard_group_p" @click="getInfo1(e)">
|
||||
<p class="fontselect">{{e.point_name}}</p>
|
||||
<div v-if="e.struct_url == '1'" class="machine_1"></div>
|
||||
<div class="ingbox" style="height:78px;" :class="{green:e.stand_status ==='2',yellow:e.stand_status ==='3',red:e.stand_status ==='4',blue:e.stand_status ==='5'}"></div>
|
||||
</div>
|
||||
<div v-show="code1 === e.point_code" class="locate-wrap clearfix" :class="e.mgl">
|
||||
<div :class="e.aline">
|
||||
<div class="foldcricle0 foldcricle1"></div>
|
||||
<div class="foldline0 foldline1"></div>
|
||||
</div>
|
||||
<div :class="e.bline">
|
||||
<div class="foldline0 foldline2"></div>
|
||||
<div class="foldcricle0 foldcricle2"></div>
|
||||
</div>
|
||||
<div class="clearfix locate-content" :class="e.coordinate">
|
||||
<div class="tan_pline">
|
||||
<p class="tan_p">货位：{{e.point_name}}<span :class="{cgreen:e.stand_status ==='2',cyellow:e.stand_status ==='3',cred:e.stand_status ==='4',cblue:e.stand_status ==='5'}">{{e.stand_status_name}}</span></p>
|
||||
<p class="tan_p">载具：{{e.vehicle_code}}</p>
|
||||
<p class="tan_p">BOM：{{e.material_code}}</p>
|
||||
<p class="tan_p">重量(千克)：{{e.ivt_qty}}</p>
|
||||
<p class="tan_p">入库时间：{{e.instorage_time}}</p>
|
||||
<p class="tan_p">静置(小时)：{{e.standing_time}}</p>
|
||||
<div class="tcon2">
|
||||
<div class="lbox">
|
||||
<div class="conn1" v-for="(e, i) in group01.slice(26, 30)" :key="i">
|
||||
<div class="a-box" @click="showInfo(e)">
|
||||
<div class="atext">{{e.storageLocation}}</div>
|
||||
<div class="acon">
|
||||
<div class="maskbox" :class="{green:e.standStatus ==='1',yellow:e.standStatus ==='2',red:e.standStatus ==='3',blue:e.pointStatus ==='2'}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-box" v-show="flg === e.storageLocation">
|
||||
<div class="border left-top-border">
|
||||
<img src="../../assets/images/screen3/dot_line.png" alt="">
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="iconfont icon-guanbi close_btn" @click="closeInfo"></div>
|
||||
<p class="tan_p">货位：{{e.storageLocation}}<span>{{e.standStatus}}</span></p>
|
||||
<p class="tan_p">载具：{{e.vehicleCode}}</p>
|
||||
<p class="tan_p">物料：{{e.materialCode}}</p>
|
||||
<p class="tan_p">名称：{{e.materialName}}</p>
|
||||
<p class="tan_p">重量(kg)：{{e.weight}}</p>
|
||||
<p class="tan_p">入库时间：{{e.warehousingTime}}</p>
|
||||
<p class="tan_p">静置(h)：{{e.standTime}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lbox">
|
||||
<div class="conn1" v-for="(e, i) in group01.slice(30, 34)" :key="i">
|
||||
<div class="a-box" @click="showInfo(e)">
|
||||
<div class="atext">{{e.storageLocation}}</div>
|
||||
<div class="acon">
|
||||
<div class="maskbox" :class="{green:e.standStatus ==='1',yellow:e.standStatus ==='2',red:e.standStatus ==='3',blue:e.pointStatus ==='2'}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-box" v-show="flg === e.storageLocation">
|
||||
<div class="border left-top-border">
|
||||
<img src="../../assets/images/screen3/dot_line.png" alt="">
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="iconfont icon-guanbi close_btn" @click="closeInfo"></div>
|
||||
<p class="tan_p">货位：{{e.storageLocation}}<span>{{e.standStatus}}</span></p>
|
||||
<p class="tan_p">载具：{{e.vehicleCode}}</p>
|
||||
<p class="tan_p">物料：{{e.materialCode}}</p>
|
||||
<p class="tan_p">名称：{{e.materialName}}</p>
|
||||
<p class="tan_p">重量(kg)：{{e.weight}}</p>
|
||||
<p class="tan_p">入库时间：{{e.warehousingTime}}</p>
|
||||
<p class="tan_p">静置(h)：{{e.standTime}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lbox">
|
||||
<div class="conn1" v-for="(e, i) in group01.slice(34, 38)" :key="i">
|
||||
<div class="a-box" @click="showInfo(e)">
|
||||
<div class="atext">{{e.storageLocation}}</div>
|
||||
<div class="acon">
|
||||
<div class="maskbox" :class="{green:e.standStatus ==='1',yellow:e.standStatus ==='2',red:e.standStatus ==='3',blue:e.pointStatus ==='2'}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-box" v-show="flg === e.storageLocation">
|
||||
<div class="border left-top-border">
|
||||
<img src="../../assets/images/screen3/dot_line.png" alt="">
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="iconfont icon-guanbi close_btn" @click="closeInfo"></div>
|
||||
<p class="tan_p">货位：{{e.storageLocation}}<span>{{e.standStatus}}</span></p>
|
||||
<p class="tan_p">载具：{{e.vehicleCode}}</p>
|
||||
<p class="tan_p">物料：{{e.materialCode}}</p>
|
||||
<p class="tan_p">名称：{{e.materialName}}</p>
|
||||
<p class="tan_p">重量(kg)：{{e.weight}}</p>
|
||||
<p class="tan_p">入库时间：{{e.warehousingTime}}</p>
|
||||
<p class="tan_p">静置(h)：{{e.standTime}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tcon3">
|
||||
<div class="lbox">
|
||||
<div class="conn1" v-for="(e, i) in group01.slice(38, 41)" :key="i" :class="{mgl10: i === 1 || i === 2 || i === 3}">
|
||||
<div class="a-box" @click="showInfo(e)">
|
||||
<div class="atext">{{e.storageLocation}}</div>
|
||||
<div class="acon">
|
||||
<div class="maskbox" :class="{green:e.standStatus ==='1',yellow:e.standStatus ==='2',red:e.standStatus ==='3',blue:e.pointStatus ==='2'}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-box" v-show="flg === e.storageLocation">
|
||||
<div class="border left-top-border">
|
||||
<img src="../../assets/images/screen3/dot_line.png" alt="">
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="iconfont icon-guanbi close_btn" @click="closeInfo"></div>
|
||||
<p class="tan_p">货位：{{e.storageLocation}}<span>{{e.standStatus}}</span></p>
|
||||
<p class="tan_p">载具：{{e.vehicleCode}}</p>
|
||||
<p class="tan_p">物料：{{e.materialCode}}</p>
|
||||
<p class="tan_p">名称：{{e.materialName}}</p>
|
||||
<p class="tan_p">重量(kg)：{{e.weight}}</p>
|
||||
<p class="tan_p">入库时间：{{e.warehousingTime}}</p>
|
||||
<p class="tan_p">静置(h)：{{e.standTime}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lbox">
|
||||
<div class="conn1" v-for="(e, i) in group01.slice(16, 17)" :key="i">
|
||||
<div class="a-box" @click="showInfo(e)">
|
||||
<div class="atext">{{e.storageLocation}}</div>
|
||||
<div class="acon">
|
||||
<div class="maskbox" :class="{green:e.standStatus ==='1',yellow:e.standStatus ==='2',red:e.standStatus ==='3',blue:e.pointStatus ==='2'}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-box" v-show="flg === e.storageLocation">
|
||||
<div class="border left-top-border">
|
||||
<img src="../../assets/images/screen3/dot_line.png" alt="">
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="iconfont icon-guanbi close_btn" @click="closeInfo"></div>
|
||||
<p class="tan_p">货位：{{e.storageLocation}}<span>{{e.standStatus}}</span></p>
|
||||
<p class="tan_p">载具：{{e.vehicleCode}}</p>
|
||||
<p class="tan_p">物料：{{e.materialCode}}</p>
|
||||
<p class="tan_p">名称：{{e.materialName}}</p>
|
||||
<p class="tan_p">重量(kg)：{{e.weight}}</p>
|
||||
<p class="tan_p">入库时间：{{e.warehousingTime}}</p>
|
||||
<p class="tan_p">静置(h)：{{e.standTime}}</p>
|
||||
</div>
|
||||
<div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="corridor_2">成型暂存监控</div>
|
||||
<div class="yard_group clearfix">
|
||||
<div class="yard_group_ul yard_group_ul_2">
|
||||
<div class="yard_group_cell" v-for="(e, i) in group02" :key="i" :class="{lock:e.lock_type ==='01'}">
|
||||
<div class="yard_group_p" @click="getInfo1(e)">
|
||||
<p class="fontselect">{{e.point_name}}</p>
|
||||
<div v-if="e.struct_url == '2'" class="machine_2"></div>
|
||||
<div class="ingbox" :style="{height:(Number(e.show_struct_qty)/1000*60+'px')}"></div>
|
||||
</div>
|
||||
<div v-show="code1 === e.point_code" class="locate-wrap clearfix" :class="e.mgl">
|
||||
<div :class="e.aline">
|
||||
<div class="foldcricle0 foldcricle1"></div>
|
||||
<div class="foldline0 foldline1"></div>
|
||||
</div>
|
||||
<div :class="e.bline">
|
||||
<div class="foldline0 foldline2"></div>
|
||||
<div class="foldcricle0 foldcricle2"></div>
|
||||
</div>
|
||||
<div class="clearfix locate-content" :class="e.coordinate">
|
||||
<div class="tan_pline">
|
||||
<p class="tan_p">货位：{{e.point_name}}</p>
|
||||
<p class="tan_p">载具：{{e.vehicle_code}}</p>
|
||||
<p class="tan_p">物料：{{e.material_code}}</p>
|
||||
<p class="tan_p">库存(块)：{{e.ivt_qty}}</p>
|
||||
<p class="tan_p">入库时间：{{e.instorage_time}}</p>
|
||||
<div class="yard_group clearfix" style="display: flex;">
|
||||
<div class="tcon1">
|
||||
<div class="lbox">
|
||||
<div class="conn1" style="width: 137px;" v-for="(e, i) in group02.slice(0, 14)" :key="i">
|
||||
<div class="a-box" @click="showInfo(e)">
|
||||
<div class="atext">{{e.storageLocation}}</div>
|
||||
<div class="acon acon2">
|
||||
<div class="maskbox"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-box" v-show="flg === e.storageLocation">
|
||||
<div class="border left-top-border">
|
||||
<img src="../../assets/images/screen3/dot_line.png" alt="">
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="iconfont icon-guanbi close_btn" @click="closeInfo"></div>
|
||||
<p class="tan_p">货位：{{e.storageLocation}}</p>
|
||||
<p class="tan_p">载具：{{e.vehicleCode}}</p>
|
||||
<p class="tan_p">物料：{{e.materialCode}}</p>
|
||||
<p class="tan_p">名称：{{e.materialName}}</p>
|
||||
<p class="tan_p">库存(块)：{{e.qty}}</p>
|
||||
<p class="tan_p">入库时间：{{e.warehousingTime}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lbox lbox2">
|
||||
<div class="conn1" style="width: 137px;" v-for="(e, i) in group02.slice(14, 28)" :key="i">
|
||||
<div class="a-box" @click="showInfo(e)">
|
||||
<div class="atext">{{e.storageLocation}}</div>
|
||||
<div class="acon acon2">
|
||||
<div class="maskbox"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-box" v-show="flg === e.storageLocation">
|
||||
<div class="border left-top-border">
|
||||
<img src="../../assets/images/screen3/dot_line.png" alt="">
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="iconfont icon-guanbi close_btn" @click="closeInfo"></div>
|
||||
<p class="tan_p">货位：{{e.storageLocation}}</p>
|
||||
<p class="tan_p">载具：{{e.vehicleCode}}</p>
|
||||
<p class="tan_p">物料：{{e.materialCode}}</p>
|
||||
<p class="tan_p">名称：{{e.materialName}}</p>
|
||||
<p class="tan_p">库存(块)：{{e.qty}}</p>
|
||||
<p class="tan_p">入库时间：{{e.warehousingTime}}</p>
|
||||
</div>
|
||||
<div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -125,32 +275,107 @@
|
||||
</div>
|
||||
<div class="yard-right">
|
||||
<div class="corridor_2">出窑暂存监控</div>
|
||||
<div class="yard_group clearfix">
|
||||
<div class="yard_group_ul yard_group_ul_4">
|
||||
<div class="yard_group_cell" v-for="(e, i) in group02" :key="i" :class="{lock:e.lock_type ==='01'}">
|
||||
<div class="yard_group_p" @click="getInfo1(e)">
|
||||
<p class="fontselect">{{e.point_name}}</p>
|
||||
<div v-if="e.struct_url == '2'" class="machine_2" style="height: 55px;"></div>
|
||||
<div class="ingbox" :style="{height:(Number(e.show_struct_qty)/1000*60+'px')}"></div>
|
||||
</div>
|
||||
<div v-show="code1 === e.point_code" class="locate-wrap clearfix" :class="e.mgl">
|
||||
<div :class="e.aline">
|
||||
<div class="foldcricle0 foldcricle1"></div>
|
||||
<div class="foldline0 foldline1"></div>
|
||||
</div>
|
||||
<div :class="e.bline">
|
||||
<div class="foldline0 foldline2"></div>
|
||||
<div class="foldcricle0 foldcricle2"></div>
|
||||
</div>
|
||||
<div class="clearfix locate-content" :class="e.coordinate">
|
||||
<div class="tan_pline">
|
||||
<p class="tan_p">货位：{{e.point_name}}</p>
|
||||
<p class="tan_p">载具：{{e.vehicle_code}}</p>
|
||||
<p class="tan_p">物料：{{e.material_code}}</p>
|
||||
<p class="tan_p">库存(块)：{{e.ivt_qty}}</p>
|
||||
<p class="tan_p">入库时间：{{e.instorage_time}}</p>
|
||||
<div class="yard_group clearfix" style="display: flex; margin-top: -25px;">
|
||||
<div class="tcon1">
|
||||
<div class="lbox colbox">
|
||||
<div class="conn1" v-for="(e, i) in group03.slice(0, 7)" :key="i">
|
||||
<div class="a-box" @click="showInfo(e)">
|
||||
<div class="atext">{{e.storageLocation}}</div>
|
||||
<div class="acon acon2">
|
||||
<div class="maskbox"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-box" v-show="flg === e.storageLocation">
|
||||
<div class="border left-bottom-border">
|
||||
<img src="../../assets/images/screen3/dot_line.png" alt="">
|
||||
</div>
|
||||
<div class="content contentrt">
|
||||
<div class="iconfont icon-guanbi close_btn" @click="closeInfo"></div>
|
||||
<p class="tan_p">货位：{{e.storageLocation}}</p>
|
||||
<p class="tan_p">载具：{{e.vehicleCode}}</p>
|
||||
<p class="tan_p">物料：{{e.materialCode}}</p>
|
||||
<p class="tan_p">名称：{{e.materialName}}</p>
|
||||
<p class="tan_p">库存(块)：{{e.qty}}</p>
|
||||
<p class="tan_p">入库时间：{{e.warehousingTime}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tcon1">
|
||||
<div class="lbox colbox">
|
||||
<div class="conn1" v-for="(e, i) in group03.slice(7, 14)" :key="i">
|
||||
<div class="a-box" @click="showInfo(e)">
|
||||
<div class="atext">{{e.storageLocation}}</div>
|
||||
<div class="acon acon2">
|
||||
<div class="maskbox"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-box" v-show="flg === e.storageLocation">
|
||||
<div class="border left-bottom-border">
|
||||
<img src="../../assets/images/screen3/dot_line.png" alt="">
|
||||
</div>
|
||||
<div class="content contentrt">
|
||||
<div class="iconfont icon-guanbi close_btn" @click="closeInfo"></div>
|
||||
<p class="tan_p">货位：{{e.storageLocation}}</p>
|
||||
<p class="tan_p">载具：{{e.vehicleCode}}</p>
|
||||
<p class="tan_p">物料：{{e.materialCode}}</p>
|
||||
<p class="tan_p">名称：{{e.materialName}}</p>
|
||||
<p class="tan_p">库存(块)：{{e.qty}}</p>
|
||||
<p class="tan_p">入库时间：{{e.warehousingTime}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tcon1" style="margin-left: 60px;">
|
||||
<div class="lbox colbox">
|
||||
<div class="conn1" v-for="(e, i) in group03.slice(14, 20)" :key="i">
|
||||
<div class="a-box" @click="showInfo(e)">
|
||||
<div class="atext">{{e.storageLocation}}</div>
|
||||
<div class="acon acon2">
|
||||
<div class="maskbox"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-box" v-show="flg === e.storageLocation">
|
||||
<div class="border left-bottom-border">
|
||||
<img src="../../assets/images/screen3/dot_line.png" alt="">
|
||||
</div>
|
||||
<div class="content contentrt">
|
||||
<div class="iconfont icon-guanbi close_btn" @click="closeInfo"></div>
|
||||
<p class="tan_p">货位：{{e.storageLocation}}</p>
|
||||
<p class="tan_p">载具：{{e.vehicleCode}}</p>
|
||||
<p class="tan_p">物料：{{e.materialCode}}</p>
|
||||
<p class="tan_p">名称：{{e.materialName}}</p>
|
||||
<p class="tan_p">库存(块)：{{e.qty}}</p>
|
||||
<p class="tan_p">入库时间：{{e.warehousingTime}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tcon1">
|
||||
<div class="lbox colbox">
|
||||
<div class="conn1" v-for="(e, i) in group03.slice(20, 26)" :key="i">
|
||||
<div class="a-box" @click="showInfo(e)">
|
||||
<div class="atext">{{e.storageLocation}}</div>
|
||||
<div class="acon acon2">
|
||||
<div class="maskbox"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-box" v-show="flg === e.storageLocation">
|
||||
<div class="border left-bottom-border">
|
||||
<img src="../../assets/images/screen3/dot_line.png" alt="">
|
||||
</div>
|
||||
<div class="content contentrt">
|
||||
<div class="iconfont icon-guanbi close_btn" @click="closeInfo"></div>
|
||||
<p class="tan_p">货位：{{e.storageLocation}}</p>
|
||||
<p class="tan_p">载具：{{e.vehicleCode}}</p>
|
||||
<p class="tan_p">物料：{{e.materialCode}}</p>
|
||||
<p class="tan_p">名称：{{e.materialName}}</p>
|
||||
<p class="tan_p">库存(块)：{{e.qty}}</p>
|
||||
<p class="tan_p">入库时间：{{e.warehousingTime}}</p>
|
||||
</div>
|
||||
<div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -191,7 +416,7 @@
|
||||
</div>
|
||||
<div class="bottom_wrapper_l">
|
||||
<div class="block_h2">
|
||||
<h2>半成品库存</h2>
|
||||
<h2>出窑库存</h2>
|
||||
</div>
|
||||
<div class="list_scroll_title">
|
||||
<span>货位</span><span>物料编码</span><span>物料名称</span><span>库存数(块)</span><span>托盘号</span><span>入库时间</span>
|
||||
@@ -222,6 +447,88 @@ export default {
|
||||
return {
|
||||
interTime: this.$store.getters.setTime,
|
||||
timer: null,
|
||||
testArr: [
|
||||
{
|
||||
storageLocation: 111
|
||||
},
|
||||
{
|
||||
storageLocation: 222
|
||||
},
|
||||
{
|
||||
storageLocation: 333
|
||||
},
|
||||
{
|
||||
storageLocation: 444
|
||||
},
|
||||
{
|
||||
storageLocation: 555
|
||||
},
|
||||
{
|
||||
storageLocation: 666
|
||||
},
|
||||
{
|
||||
storageLocation: 777
|
||||
},
|
||||
{
|
||||
storageLocation: 888
|
||||
},
|
||||
{
|
||||
storageLocation: 999
|
||||
},
|
||||
{
|
||||
storageLocation: 1001
|
||||
},
|
||||
{
|
||||
storageLocation: 1002
|
||||
},
|
||||
{
|
||||
storageLocation: 1003
|
||||
}
|
||||
],
|
||||
testArr2: [
|
||||
{
|
||||
storageLocation: 1
|
||||
},
|
||||
{
|
||||
storageLocation: 2
|
||||
},
|
||||
{
|
||||
storageLocation: 3
|
||||
},
|
||||
{
|
||||
storageLocation: 4
|
||||
},
|
||||
{
|
||||
storageLocation: 5
|
||||
},
|
||||
{
|
||||
storageLocation: 6
|
||||
},
|
||||
{
|
||||
storageLocation: 7
|
||||
},
|
||||
{
|
||||
storageLocation: 8
|
||||
},
|
||||
{
|
||||
storageLocation: 9
|
||||
},
|
||||
{
|
||||
storageLocation: 10
|
||||
},
|
||||
{
|
||||
storageLocation: 11
|
||||
},
|
||||
{
|
||||
storageLocation: 12
|
||||
},
|
||||
{
|
||||
storageLocation: 13
|
||||
},
|
||||
{
|
||||
storageLocation: 14
|
||||
}
|
||||
],
|
||||
materArr1: [],
|
||||
materArr2: [],
|
||||
structArr: [],
|
||||
@@ -231,7 +538,8 @@ export default {
|
||||
group01: [],
|
||||
group02: [],
|
||||
group03: [],
|
||||
code1: ''
|
||||
code1: '',
|
||||
flg: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -257,53 +565,6 @@ export default {
|
||||
mounted () {
|
||||
// lock_type 00空闲，01锁定
|
||||
// stand_status 0为空，2为静置中，3为静置完成，4为强制静置完成，5为静置超时
|
||||
// 编号排布
|
||||
// 12排
|
||||
// let pai1 = []
|
||||
// let pai2 = []
|
||||
// let pai12 = []
|
||||
// for (let i = 1; i <= 20; i++) {
|
||||
// if (i <= 10) {
|
||||
// pai1.push({sequence_number: i * 2 - 1, coordinate: 'coordinate1', aline: 'aline1', bline: 'bline1', show: 0})
|
||||
// pai2.push({sequence_number: i * 2, coordinate: 'coordinate1', aline: 'aline1', bline: 'bline1', show: 0})
|
||||
// } else {
|
||||
// pai1.push({sequence_number: i * 2 - 1, coordinate: 'coordinate2', aline: 'aline2', bline: 'bline2', show: 0})
|
||||
// pai2.push({sequence_number: i * 2, coordinate: 'coordinate2', aline: 'aline2', bline: 'bline2', show: 0})
|
||||
// }
|
||||
// }
|
||||
// pai12 = pai1.concat(pai2)
|
||||
// this.group01 = pai12
|
||||
// // 34排
|
||||
// let pai3 = []
|
||||
// let pai4 = []
|
||||
// let pai34 = []
|
||||
// for (let i = 21; i <= 38; i++) {
|
||||
// if (i <= 30) {
|
||||
// pai3.push({sequence_number: i * 2 - 1, coordinate: 'coordinate1', aline: 'aline1', bline: 'bline1', show: 0})
|
||||
// pai4.push({sequence_number: i * 2, coordinate: 'coordinate3', aline: 'aline3', bline: 'bline3', show: 0})
|
||||
// } else {
|
||||
// pai3.push({sequence_number: i * 2 - 1, coordinate: 'coordinate2', aline: 'aline2', bline: 'bline2', show: 0})
|
||||
// pai4.push({sequence_number: i * 2, coordinate: 'coordinate3', aline: 'aline3', bline: 'bline3', show: 0})
|
||||
// }
|
||||
// }
|
||||
// pai34 = pai3.concat(pai4)
|
||||
// this.group02 = pai34
|
||||
// // 56排
|
||||
// let pai5 = []
|
||||
// let pai6 = []
|
||||
// let pai56 = []
|
||||
// for (let i = 39; i <= 46; i++) {
|
||||
// if (i <= 4) {
|
||||
// pai5.push({sequence_number: i * 2 - 1, coordinate: 'coordinate3', aline: 'aline3', bline: 'bline3', show: 0})
|
||||
// pai6.push({sequence_number: i * 2, coordinate: 'coordinate3', aline: 'aline3', bline: 'bline3', show: 0})
|
||||
// } else {
|
||||
// pai5.push({sequence_number: i * 2 - 1, coordinate: 'coordinate3', aline: 'aline3', bline: 'bline3', show: 0})
|
||||
// pai6.push({sequence_number: i * 2, coordinate: 'coordinate3', aline: 'aline3', bline: 'bline3', show: 0})
|
||||
// }
|
||||
// }
|
||||
// pai56 = pai5.concat(pai6)
|
||||
// this.group03 = pai56
|
||||
// end
|
||||
this.initData()
|
||||
this.refresh()
|
||||
},
|
||||
@@ -322,50 +583,20 @@ export default {
|
||||
this.array1 = res.standStock
|
||||
this.array2 = res.frontWarehouseStock
|
||||
this.array3 = res.backWarehouseStock
|
||||
this.group01 = [...res.result.materialTask]
|
||||
this.group02 = [...res.result.productionTask]
|
||||
this.group03 = [...res.result.materialYJTask]
|
||||
for (let i = 0; i < this.group01.length; i++) {
|
||||
this.group01[i] = Object.assign(this.group01[i], {mgl: 'mgl1', coordinate: 'coordinate1', aline: 'aline1', bline: 'bline1', show: 0})
|
||||
}
|
||||
for (let i = 0; i < this.group03.length; i++) {
|
||||
this.group03[i] = Object.assign(this.group03[i], {mgl: 'mgl2', coordinate: 'coordinate2', aline: 'aline2', bline: 'bline2', show: 0})
|
||||
}
|
||||
for (let i = 0; i < this.group02.length; i++) {
|
||||
if (i === 21 || i === 22 || i === 23 || i === 24 || i === 25 || i === 47 || i === 48 || i === 49 || i === 50 || i === 51) {
|
||||
this.group02[i] = Object.assign(this.group02[i], {mgl: 'mgl2', coordinate: 'coordinate2', aline: 'aline2', bline: 'bline2', show: 0})
|
||||
} else {
|
||||
this.group02[i] = Object.assign(this.group02[i], {mgl: 'mgl1', coordinate: 'coordinate1', aline: 'aline1', bline: 'bline1', show: 0})
|
||||
}
|
||||
}
|
||||
// for (let i = 1; i <= 20; i++) {
|
||||
// if (i <= 10) {
|
||||
// group01.push({sequence_number: i * 2 - 1, coordinate: 'coordinate1', aline: 'aline1', bline: 'bline1', show: 0})
|
||||
// group01.push({sequence_number: i * 2, coordinate: 'coordinate1', aline: 'aline1', bline: 'bline1', show: 0})
|
||||
this.group01 = res.standMonitor
|
||||
this.group02 = res.frontWarehouseMonitor
|
||||
this.group03 = res.backWarehouseMonitor
|
||||
// for (let i = 0; i < this.group01.length; i++) {
|
||||
// this.group01[i] = Object.assign(this.group01[i], {mgl: 'mgl1', coordinate: 'coordinate1', aline: 'aline1', bline: 'bline1', show: 0})
|
||||
// }
|
||||
// for (let i = 0; i < this.group03.length; i++) {
|
||||
// this.group03[i] = Object.assign(this.group03[i], {mgl: 'mgl2', coordinate: 'coordinate2', aline: 'aline2', bline: 'bline2', show: 0})
|
||||
// }
|
||||
// for (let i = 0; i < this.group02.length; i++) {
|
||||
// if (i === 21 || i === 22 || i === 23 || i === 24 || i === 25 || i === 47 || i === 48 || i === 49 || i === 50 || i === 51) {
|
||||
// this.group02[i] = Object.assign(this.group02[i], {mgl: 'mgl2', coordinate: 'coordinate2', aline: 'aline2', bline: 'bline2', show: 0})
|
||||
// } else {
|
||||
// group01.push({sequence_number: i * 2 - 1, coordinate: 'coordinate2', aline: 'aline2', bline: 'bline2', show: 0})
|
||||
// group01.push({sequence_number: i * 2, coordinate: 'coordinate2', aline: 'aline2', bline: 'bline2', show: 0})
|
||||
// }
|
||||
// }
|
||||
// for (let i = 0; i < this.structArr.length; i++) {
|
||||
// for (let j = 0; j < this.group01.length; j++) {
|
||||
// if (this.structArr[i].sequence_number === this.group01[j].sequence_number + '') {
|
||||
// this.group01[j] = Object.assign(this.group01[j], this.structArr[i])
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// for (let i = 0; i < this.structArr.length; i++) {
|
||||
// for (let j = 0; j < this.group02.length; j++) {
|
||||
// if (this.structArr[i].sequence_number === this.group02[j].sequence_number + '') {
|
||||
// this.group02[j] = Object.assign(this.group02[j], this.structArr[i])
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// for (let i = 0; i < this.structArr.length; i++) {
|
||||
// for (let j = 0; j < this.group03.length; j++) {
|
||||
// if (this.structArr[i].sequence_number === this.group03[j].sequence_number + '') {
|
||||
// this.group03[j] = Object.assign(this.group03[j], this.structArr[i])
|
||||
// }
|
||||
// this.group02[i] = Object.assign(this.group02[i], {mgl: 'mgl1', coordinate: 'coordinate1', aline: 'aline1', bline: 'bline1', show: 0})
|
||||
// }
|
||||
// }
|
||||
},
|
||||
@@ -386,6 +617,12 @@ export default {
|
||||
},
|
||||
closebtn () {
|
||||
this.code1 = ''
|
||||
},
|
||||
showInfo (e) {
|
||||
this.flg = this.flg === e.storageLocation ? '' : e.storageLocation
|
||||
},
|
||||
closeInfo () {
|
||||
this.flg = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -500,9 +737,9 @@ export default {
|
||||
grid-template-rows repeat(2, 110px)
|
||||
.yard_group_ul_4
|
||||
width 100%
|
||||
grid-template-columns repeat(5, 100% / 5)
|
||||
grid-template-columns repeat(4, 80% / 4)
|
||||
// grid-template-rows repeat(2, 1.8rem / 2)
|
||||
grid-template-rows repeat(6, 85px)
|
||||
grid-template-rows repeat(7, 73px)
|
||||
.yard_group_cell
|
||||
position relative
|
||||
display inline-block
|
||||
@@ -596,8 +833,6 @@ height 90px
|
||||
right 10%
|
||||
margin-right -.25rem
|
||||
font-size .14rem
|
||||
line-height .34rem
|
||||
padding 0 .16rem
|
||||
border-radius 5px
|
||||
cursor pointer
|
||||
.bottom_wrapper
|
||||
@@ -612,19 +847,6 @@ height 90px
|
||||
width 100%
|
||||
height 100%
|
||||
position relative
|
||||
#echarts1
|
||||
// margin-left 2rem
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
z-index 9
|
||||
#echarts3
|
||||
// margin-left 2rem
|
||||
position absolute
|
||||
top -30px
|
||||
// left 60px
|
||||
left .60rem
|
||||
z-index 10
|
||||
.title
|
||||
position absolute
|
||||
top .15rem
|
||||
@@ -834,7 +1056,7 @@ height 90px
|
||||
height 100%
|
||||
margin-left 2%
|
||||
box-sizing border-box
|
||||
border 1px solid #32c5ff
|
||||
// border 1px solid #32c5ff
|
||||
.cont-1
|
||||
display flex
|
||||
.tags
|
||||
@@ -842,4 +1064,123 @@ height 90px
|
||||
width 20%
|
||||
align-items center
|
||||
justify-content space-around
|
||||
.mgt5
|
||||
margin-left 100px
|
||||
.mgt6
|
||||
margin-left 150%
|
||||
.pages
|
||||
position absolute
|
||||
left .2509rem
|
||||
top 11%
|
||||
_wh(20%, .4rem)
|
||||
_fj()
|
||||
a
|
||||
cursor pointer
|
||||
font-family "SourceHanSansCN"
|
||||
_font(.18rem, .30rem, #fff, 700,)
|
||||
letter-spacing .01rem
|
||||
padding .05rem .2rem
|
||||
border-radius .05rem
|
||||
background: radial-gradient(circle at 7.2% 13.6%, rgb(37, 249, 245) 0%, #004c92 90%)
|
||||
.tcon2
|
||||
width 300px
|
||||
margin-left 40px
|
||||
.lbox
|
||||
width 80%
|
||||
display flex
|
||||
.lbox2
|
||||
margin-top 40px
|
||||
.conn1
|
||||
position relative
|
||||
width 60px
|
||||
.a-box
|
||||
width 60px
|
||||
height 80px
|
||||
border 1px solid #32c5ff
|
||||
border-radius 8px
|
||||
.atext
|
||||
_font(12px, 30px, #fff,,)
|
||||
// transform scale(0.8)
|
||||
white-space:nowrap
|
||||
.acon
|
||||
width 100%
|
||||
height 61%
|
||||
background center center / 100% 100% url(../../assets/images/screen1/zhong.png) no-repeat
|
||||
border-bottom-right-radius 8px
|
||||
border-bottom-left-radius 8px
|
||||
.maskbox
|
||||
width 100%
|
||||
height 100%
|
||||
// background #ff0
|
||||
position relative
|
||||
opacity 0.5
|
||||
border-bottom-right-radius 8px
|
||||
border-bottom-left-radius 8px
|
||||
.acon2
|
||||
background center center / 100% 100% url(../../assets/images/screen1/cp1.jpg) no-repeat
|
||||
opacity 0.3
|
||||
.b-box
|
||||
position absolute
|
||||
z-index 11
|
||||
top 0px
|
||||
left 50px
|
||||
// display flex
|
||||
.border
|
||||
width 127px
|
||||
height 105px
|
||||
position absolute
|
||||
left 0px
|
||||
top 40px
|
||||
z-index 10
|
||||
.left-top-border
|
||||
transform rotateY(180deg)
|
||||
.left-bottom-border
|
||||
transform rotate(0deg)
|
||||
left -166px
|
||||
.right-top-border
|
||||
transform rotateY(180deg)
|
||||
.right-bottom-border
|
||||
transform rotateY(180deg)
|
||||
.content
|
||||
width 280px
|
||||
height 300px
|
||||
border-sizing border-box
|
||||
padding 20px
|
||||
position absolute
|
||||
left 115px
|
||||
background center center / 100% 100% url(../../assets/images/screen1/popover_1.png) no-repeat
|
||||
// background-image url(../../assets/images/screen3/popup_bg.png)
|
||||
background-repaeat no-repeat
|
||||
.contentrt
|
||||
left: -432px;
|
||||
p
|
||||
width 100%
|
||||
line-height 30px
|
||||
.icon-guanbi2
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 9px;
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
background-color: #0a3679;
|
||||
.close_btn2
|
||||
position: absolute;
|
||||
top: 3%;
|
||||
right: 10%;
|
||||
margin-right: -0.25rem;
|
||||
font-size: 0.14rem;
|
||||
line-height: 0.34rem;
|
||||
padding: 0 0.16rem;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
.mgl10
|
||||
margin-left 23px
|
||||
.colbox
|
||||
display flex
|
||||
flex-direction column
|
||||
</style>
|
||||
|
||||
687
src/pages/shunhe/StorageMonitor0.vue
Normal file
687
src/pages/shunhe/StorageMonitor0.vue
Normal file
@@ -0,0 +1,687 @@
|
||||
<template>
|
||||
<div @click.stop="closeModal" class="n_container">
|
||||
<div class="n_header">
|
||||
<div class="n_header_h1">
|
||||
<h1>据控制中心</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="n_body_container">
|
||||
<div class="n_body_container_wraper">
|
||||
<div class="box1">
|
||||
<div class="status_wrap">
|
||||
<div class="status_item">
|
||||
<div class="status_tip yellow"></div>
|
||||
<div class="status_name">困料</div>
|
||||
</div>
|
||||
<div class="status_item">
|
||||
<div class="status_tip green"></div>
|
||||
<div class="status_name">困料完成</div>
|
||||
</div>
|
||||
<div class="status_item">
|
||||
<div class="status_tip red"></div>
|
||||
<div class="status_name">困料超时</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box_l1">
|
||||
<!-- <div v-for="(e,i) in TrappedShelf40List.slice(0, 20)" :key="i" class="picbox" :class="{'mgt5': i === 10 || i === 14 || i === 18, 'mgt6': i === 6, 'mgt2': i === 2}" @click.stop="getInfo1(e, i)"> -->
|
||||
<div v-for="(e,i) in TrappedShelf40List.slice(0, 12)" :key="i" class="picbox" :class="{'mgt2': i === 2 || i === 4 || i === 6 || i === 8 || i === 10}" @click.stop="getInfo1(e, i)">
|
||||
<!-- <div class="piccon"><img v-show="String(e.point_status) === '0'" src="../../assets/images/screen3/hj.png" alt=""></div> -->
|
||||
<div class="piccon" v-show="String(e.point_status) === '0'" style="display: none; height auto;"><img style="visibility: hidden;"></div>
|
||||
<div class="piccon" v-show="String(e.point_status) === '1'"><img src="../../assets/images/screen3/lz_hj_gray.png" alt=""></div>
|
||||
<div class="piccon" v-show="String(e.point_status) === '2' && String(e.stand_status) === '2'"><img src="../../assets/images/screen3/lz_hj_yellow.png" alt=""></div>
|
||||
<div class="piccon" v-show="String(e.point_status) === '2' && (String(e.stand_status) === '3' || String(e.stand_status) === '4')"><img src="../../assets/images/screen3/lz_hj_green.png" alt=""></div>
|
||||
<div class="piccon" v-show="String(e.point_status) === '2' && String(e.stand_status) === '5'"><img src="../../assets/images/screen3/lz_hj_red.png" alt=""></div>
|
||||
<!-- <img v-show="String(e.point_status) === '0'" src="../../assets/images/screen3/hj.png" alt="">
|
||||
<img v-show="String(e.point_status) === '1'" src="../../assets/images/screen3/lz_hj_gray.png" alt="">
|
||||
<img v-show="String(e.point_status) === '2' && String(e.stand_status) === '2'" src="../../assets/images/screen3/lz_hj_yellow.png" alt="">
|
||||
<img v-show="String(e.point_status) === '2' && (String(e.stand_status) === '3' || String(e.stand_status) === '4')" src="../../assets/images/screen3/lz_hj_green.png" alt="">
|
||||
<img v-show="String(e.point_status) === '2' && String(e.stand_status) === '5'" src="../../assets/images/screen3/lz_hj_red.png" alt=""> -->
|
||||
<div v-if="pkId === e.point_code" class="popup_block_wraper" :class="youModel" :style="{'top': top, 'left': left}">
|
||||
<div class="foldline foldline_left" :class="foldlineStyle"></div>
|
||||
<div class="popup_bg">
|
||||
<div class="popup_block">
|
||||
<div class="pop_header">
|
||||
<div class="pop_name">{{pkObj.point_code}}</div>
|
||||
<div class="pop_status">
|
||||
<!-- <div class="pop_status_dot" :class="['green', 'yellow', 'red'][Number(pkObj.stand_status) - 2]"></div> -->
|
||||
<div class="pop_status_dot" :class="{yellow:pkObj.status ==='2',red:pkObj.status ==='5',green:(pkObj.status ==='3' || pkObj.status ==='4')}"></div>
|
||||
<div class="pop_status_text fgray">{{pkObj.stand_status_name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pop_content">
|
||||
<div class="pop_item">
|
||||
<div class="pop_label">状态</div>
|
||||
<div class="pop_val">{{pkObj.point_status_name}}</div>
|
||||
</div>
|
||||
<div class="pop_item">
|
||||
<div class="pop_label">载具</div>
|
||||
<div class="pop_val pop_val_s">{{ pkObj.vehicle_code }}</div>
|
||||
</div>
|
||||
<div class="pop_item">
|
||||
<div class="pop_label">BOM号</div>
|
||||
<div class="pop_val pop_val_s">{{ pkObj.bom }}</div>
|
||||
</div>
|
||||
<div class="pop_item">
|
||||
<div class="pop_label">碾次</div>
|
||||
<div class="pop_val pop_val_s">{{ pkObj.mix_num }}</div>
|
||||
</div>
|
||||
<div class="pop_item">
|
||||
<div class="pop_label">重量(kg)</div>
|
||||
<div class="pop_val pop_val_s">{{ pkObj.weight }}</div>
|
||||
<div class="pop_unit">kg</div>
|
||||
</div>
|
||||
<div class="pop_item">
|
||||
<div class="pop_label">入库时间</div>
|
||||
<div class="pop_val pop_val_s">{{ pkObj.instorage_time }}</div>
|
||||
</div>
|
||||
<div class="pop_item">
|
||||
<div class="pop_label">静置(h)</div>
|
||||
<div class="pop_val pop_val_s">{{ pkObj.standing_time }}</div>
|
||||
<div class="pop_unit">h</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="iconfont icon-guanbi close_btn" @click.stop="closeModal"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box_l2">
|
||||
<div v-for="(e,i) in TrappedShelf40List.slice(0, 14)" :key="i" class="picbox" @click.stop="getInfo1(e, i)">
|
||||
<div class="piccon"><img v-show="String(e.point_status) === '0'" src="../../assets/images/screen3/hj.png" alt=""></div>
|
||||
<div class="piccon"><img v-show="String(e.point_status) === '1'" src="../../assets/images/screen3/lz_hj_gray.png" alt=""></div>
|
||||
<div class="piccon"><img v-show="String(e.point_status) === '2' && String(e.stand_status) === '2'" src="../../assets/images/screen3/lz_hj_yellow.png" alt=""></div>
|
||||
<div class="piccon"><img v-show="String(e.point_status) === '2' && (String(e.stand_status) === '3' || String(e.stand_status) === '4')" src="../../assets/images/screen3/lz_hj_green.png" alt=""></div>
|
||||
<div class="piccon"><img v-show="String(e.point_status) === '2' && String(e.stand_status) === '5'" src="../../assets/images/screen3/lz_hj_red.png" alt=""></div>
|
||||
<!-- <div v-for="(e,i) in TrappedShelf40List.slice(20, 40)" :key="i" class="picbox" :class="{'mgt5': i === 6 || i === 10 || i === 14 || i === 18, 'mgt6': i === 6, 'mgt2': i === 2}" @click.stop="getInfo1(e, i)">
|
||||
<img v-show="String(e.point_status) === '0'" src="../../assets/images/screen3/hj.png" alt="">
|
||||
<img v-show="String(e.point_status) === '1'" src="../../assets/images/screen3/lz_hj_gray.png" alt="">
|
||||
<img v-show="String(e.point_status) === '2' && String(e.stand_status) === '2'" src="../../assets/images/screen3/lz_hj_yellow.png" alt="">
|
||||
<img v-show="String(e.point_status) === '2' && (String(e.stand_status) === '3' || String(e.stand_status) === '4')" src="../../assets/images/screen3/lz_hj_green.png" alt="">
|
||||
<img v-show="String(e.point_status) === '2' && String(e.stand_status) === '5'" src="../../assets/images/screen3/lz_hj_red.png" alt=""> -->
|
||||
<div v-if="pkId === e.point_code" class="popup_block_wraper" :class="youModel" :style="{'top': top, 'left': left}">
|
||||
<div class="foldline foldline_left" :class="foldlineStyle"></div>
|
||||
<div class="popup_bg">
|
||||
<div class="popup_block">
|
||||
<div class="pop_header">
|
||||
<div class="pop_name">{{pkObj.point_code}}</div>
|
||||
<div class="pop_status">
|
||||
<!-- <div class="pop_status_dot" :class="['green', 'yellow', 'red'][Number(pkObj.stand_status) - 2]"></div> -->
|
||||
<div class="pop_status_dot" :class="{yellow:pkObj.status ==='2',red:pkObj.status ==='5',green:(pkObj.status ==='3' || pkObj.status ==='4')}"></div>
|
||||
<div class="pop_status_text fgray">{{pkObj.stand_status_name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pop_content">
|
||||
<div class="pop_item">
|
||||
<div class="pop_label">状态</div>
|
||||
<div class="pop_val">{{pkObj.point_status_name}}</div>
|
||||
</div>
|
||||
<div class="pop_item">
|
||||
<div class="pop_label">载具</div>
|
||||
<div class="pop_val pop_val_s">{{ pkObj.vehicle_code }}</div>
|
||||
</div>
|
||||
<div class="pop_item">
|
||||
<div class="pop_label">BOM号</div>
|
||||
<div class="pop_val pop_val_s">{{ pkObj.bom }}</div>
|
||||
</div>
|
||||
<div class="pop_item">
|
||||
<div class="pop_label">碾次</div>
|
||||
<div class="pop_val pop_val_s">{{ pkObj.mix_num }}</div>
|
||||
</div>
|
||||
<div class="pop_item">
|
||||
<div class="pop_label">重量(kg)</div>
|
||||
<div class="pop_val pop_val_s">{{ pkObj.weight }}</div>
|
||||
<div class="pop_unit">kg</div>
|
||||
</div>
|
||||
<div class="pop_item">
|
||||
<div class="pop_label">入库时间</div>
|
||||
<div class="pop_val pop_val_s">{{ pkObj.instorage_time }}</div>
|
||||
</div>
|
||||
<div class="pop_item">
|
||||
<div class="pop_label">静置(h)</div>
|
||||
<div class="pop_val pop_val_s">{{ pkObj.standing_time }}</div>
|
||||
<div class="pop_unit">h</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="iconfont icon-guanbi close_btn" @click.stop="closeModal"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box_r1">
|
||||
<div v-for="(e,i) in TrappedShelf6List.slice(0, 3)" :key="i" class="picbox" @click.stop="getInfo2(e, i)">
|
||||
<img v-show="String(e.point_status) === '0'" src="../../assets/images/screen3/hj.png" alt="">
|
||||
<img v-show="String(e.point_status) === '1'" src="../../assets/images/screen3/lz_hj_gray.png" alt="">
|
||||
<img v-show="String(e.point_status) === '2' && String(e.stand_status) === '2'" src="../../assets/images/screen3/lz_hj_yellow.png" alt="">
|
||||
<img v-show="String(e.point_status) === '2' && (String(e.stand_status) === '3' || String(e.stand_status) === '4')" src="../../assets/images/screen3/lz_hj_green.png" alt="">
|
||||
<img v-show="String(e.point_status) === '2' && String(e.stand_status) === '5'" src="../../assets/images/screen3/lz_hj_red.png" alt="">
|
||||
<div v-if="pkId === e.point_code" class="popup_block_wraper popup_block_wraper2" :style="{'top': top, 'left': left}">
|
||||
<div class="foldline foldline_left2"></div>
|
||||
<div class="popup_bg">
|
||||
<div class="popup_block">
|
||||
<div class="pop_header">
|
||||
<div class="pop_name">{{pkObj.point_code}}</div>
|
||||
<div class="pop_status">
|
||||
<!-- <div class="pop_status_dot" :class="['green', 'yellow', 'red'][Number(pkObj.stand_status) - 2]"></div> -->
|
||||
<div class="pop_status_dot" :class="{yellow:pkObj.status ==='2',red:pkObj.status ==='5',green:(pkObj.status ==='3' || pkObj.status ==='4')}"></div>
|
||||
<div class="pop_status_text fgray">{{pkObj.stand_status_name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pop_content">
|
||||
<div class="pop_item">
|
||||
<div class="pop_label">状态</div>
|
||||
<div class="pop_val">{{pkObj.point_status_name}}</div>
|
||||
</div>
|
||||
<div class="pop_item">
|
||||
<div class="pop_label">载具</div>
|
||||
<div class="pop_val pop_val_s">{{ pkObj.vehicle_code }}</div>
|
||||
</div>
|
||||
<div class="pop_item">
|
||||
<div class="pop_label">BOM号</div>
|
||||
<div class="pop_val pop_val_s">{{ pkObj.bom }}</div>
|
||||
</div>
|
||||
<div class="pop_item">
|
||||
<div class="pop_label">碾次</div>
|
||||
<div class="pop_val pop_val_s">{{ pkObj.mix_num }}</div>
|
||||
</div>
|
||||
<div class="pop_item">
|
||||
<div class="pop_label">重量(kg)</div>
|
||||
<div class="pop_val pop_val_s">{{ pkObj.weight }}</div>
|
||||
<div class="pop_unit">kg</div>
|
||||
</div>
|
||||
<div class="pop_item">
|
||||
<div class="pop_label">入库时间</div>
|
||||
<div class="pop_val pop_val_s">{{ pkObj.instorage_time }}</div>
|
||||
</div>
|
||||
<div class="pop_item">
|
||||
<div class="pop_label">静置(h)</div>
|
||||
<div class="pop_val pop_val_s">{{ pkObj.standing_time }}</div>
|
||||
<div class="pop_unit">h</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="iconfont icon-guanbi close_btn" @click.stop="closeModal"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box_r2">
|
||||
<div v-for="(e,i) in TrappedShelf6List.slice(3, 6)" :key="i" class="picbox" @click.stop="getInfo2(e, i)">
|
||||
<img v-show="String(e.point_status) === '0'" src="../../assets/images/screen3/hj.png" alt="">
|
||||
<img v-show="String(e.point_status) === '1'" src="../../assets/images/screen3/lz_hj_gray.png" alt="">
|
||||
<img v-show="String(e.point_status) === '2' && String(e.stand_status) === '2'" src="../../assets/images/screen3/lz_hj_yellow.png" alt="">
|
||||
<img v-show="String(e.point_status) === '2' && (String(e.stand_status) === '3' || String(e.stand_status) === '4')" src="../../assets/images/screen3/lz_hj_green.png" alt="">
|
||||
<img v-show="String(e.point_status) === '2' && String(e.stand_status) === '5'" src="../../assets/images/screen3/lz_hj_red.png" alt="">
|
||||
<div v-if="pkId === e.point_code" class="popup_block_wraper popup_block_wraper2" :style="{'top': top, 'left': left}">
|
||||
<div class="foldline foldline_left2"></div>
|
||||
<div class="popup_bg">
|
||||
<div class="popup_block">
|
||||
<div class="pop_header">
|
||||
<div class="pop_name">{{pkObj.point_code}}</div>
|
||||
<div class="pop_status">
|
||||
<!-- <div class="pop_status_dot" :class="['green', 'yellow', 'red'][Number(pkObj.stand_status) - 2]"></div> -->
|
||||
<div class="pop_status_dot" :class="{yellow:pkObj.status ==='2',red:pkObj.status ==='5',green:(pkObj.status ==='3' || pkObj.status ==='4')}"></div>
|
||||
<div class="pop_status_text fgray">{{pkObj.stand_status_name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pop_content">
|
||||
<div class="pop_item">
|
||||
<div class="pop_label">状态</div>
|
||||
<div class="pop_val">{{pkObj.point_status_name}}</div>
|
||||
</div>
|
||||
<div class="pop_item">
|
||||
<div class="pop_label">载具</div>
|
||||
<div class="pop_val pop_val_s">{{ pkObj.vehicle_code }}</div>
|
||||
</div>
|
||||
<div class="pop_item">
|
||||
<div class="pop_label">BOM号</div>
|
||||
<div class="pop_val pop_val_s">{{ pkObj.bom }}</div>
|
||||
</div>
|
||||
<div class="pop_item">
|
||||
<div class="pop_label">碾次</div>
|
||||
<div class="pop_val pop_val_s">{{ pkObj.mix_num }}</div>
|
||||
</div>
|
||||
<div class="pop_item">
|
||||
<div class="pop_label">重量(kg)</div>
|
||||
<div class="pop_val pop_val_s">{{ pkObj.weight }}</div>
|
||||
<div class="pop_unit">kg</div>
|
||||
</div>
|
||||
<div class="pop_item">
|
||||
<div class="pop_label">入库时间</div>
|
||||
<div class="pop_val pop_val_s">{{ pkObj.instorage_time }}</div>
|
||||
</div>
|
||||
<div class="pop_item">
|
||||
<div class="pop_label">静置(h)</div>
|
||||
<div class="pop_val pop_val_s">{{ pkObj.standing_time }}</div>
|
||||
<div class="pop_unit">h</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="iconfont icon-guanbi close_btn" @click.stop="closeModal"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box2">
|
||||
<div class="item_wrap">
|
||||
<div class="item_tip item_tip_bg_s">
|
||||
<div class="item_tip_left">困料库存</div>
|
||||
</div>
|
||||
<div class="item_content">
|
||||
<div class="scroll_wrap">
|
||||
<ul class="scroll_tab_1">
|
||||
<li>货位</li>
|
||||
<li style="width: 10%">BOM号</li>
|
||||
<li style="width: 14%">设备名称</li>
|
||||
<li>物料名称</li>
|
||||
<li style="width: 7%">重量</li>
|
||||
<li>载具号</li>
|
||||
<li style="width: 6%">静置(h)</li>
|
||||
<li>碾次</li>
|
||||
<li>状态</li>
|
||||
</ul>
|
||||
<div class="scroll_container_1">
|
||||
<vue-seamless-scroll :data="array1" :class-option="defaultOption1">
|
||||
<ul class="scroll-ul_1">
|
||||
<li v-for="(e, i) in array1" :key="i">
|
||||
<!-- <div class="scroll-ul_1_div" :class="['c_gray', 'c_yellow', 'c_green', 'c_red'][Number(e.stand_status_color)]">{{e.point_name}}</div> -->
|
||||
<div class="scroll-ul_1_div">{{e.point_name}}</div>
|
||||
<div class="scroll-ul_1_div" style="width: 10%">{{e.bom}}</div>
|
||||
<div class="scroll-ul_1_div" style="width: 14%">{{e.device_name}}</div>
|
||||
<div class="scroll-ul_1_div">{{e.material_code}}</div>
|
||||
<div class="scroll-ul_1_div" style="width: 7%">{{e.weight}}</div>
|
||||
<div class="scroll-ul_1_div">{{e.vehicle_code}}</div>
|
||||
<div class="scroll-ul_1_div" style="width: 6%">{{e.standing_time}}</div>
|
||||
<div class="scroll-ul_1_div">{{e.mix_num}}</div>
|
||||
<div class="scroll-ul_1_div">{{e.stand_status_name}}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_wrap">
|
||||
<div class="item_tip item_tip_bg_s">
|
||||
<div class="item_tip_left">困料出入库</div>
|
||||
</div>
|
||||
<div class="item_content">
|
||||
<div class="scroll_wrap">
|
||||
<ul class="scroll_tab_1">
|
||||
<li style="width: 6%;">类别</li>
|
||||
<li style="width: 9%">BOM号</li>
|
||||
<li style="width: 13%">设备名称</li>
|
||||
<li style="width: 7%">重量</li>
|
||||
<li style="width: 15%">物料名称</li>
|
||||
<li style="width: 9%">载具号</li>
|
||||
<li>碾次</li>
|
||||
<li style="width: 9%">货位</li>
|
||||
<li style="width: 18%;">出入时间</li>
|
||||
</ul>
|
||||
<div class="scroll_container_1">
|
||||
<vue-seamless-scroll :data="array2" :class-option="defaultOption2">
|
||||
<ul class="scroll-ul_1">
|
||||
<li v-for="(e, i) in array2" :key="i">
|
||||
<div class="scroll-ul_1_div" style="width: 6%;">{{e.io_type}}</div>
|
||||
<div class="scroll-ul_1_div" style="width: 9%">{{e.bom}}</div>
|
||||
<div class="scroll-ul_1_div" style="width: 13%">{{e.device_name}}</div>
|
||||
<div class="scroll-ul_1_div" style="width: 7%">{{e.weight}}</div>
|
||||
<div class="scroll-ul_1_div" style="width: 15%">{{e.material_code}}</div>
|
||||
<div class="scroll-ul_1_div" style="width: 9%">{{e.vehicle_code}}</div>
|
||||
<div class="scroll-ul_1_div">{{e.mix_num}}</div>
|
||||
<div class="scroll-ul_1_div" style="width: 9%">{{e.point_code}}</div>
|
||||
<div class="scroll-ul_1_div" style="width: 18%;">{{e.create_time}}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tooltip_wrap right_tooltip_wrap" :style="expand ? 'opacity: 1' : 'opacity: 0.1'">
|
||||
<div class="tooltip_pages" :style="expand ? 'width: 300px' : 'width: 0'">
|
||||
<router-link to="/setup" class="tooltip_page">配置</router-link>
|
||||
<router-link to="/homepagetwo" class="tooltip_page">1</router-link>
|
||||
<div class="tooltip_page current_page pointer">2</div>
|
||||
<router-link to="/takeshapetwo" class="tooltip_page">3</router-link>
|
||||
<router-link to="/firedrytwo" class="tooltip_page">4</router-link>
|
||||
<router-link to="/sortpacktwo" class="tooltip_page">5</router-link>
|
||||
<router-link to="/pdtwo" class="tooltip_page">6</router-link>
|
||||
</div>
|
||||
<div class="tooltip_arrow pointer" @click="expandTooltip" v-text="expand ? '<<' : '>>'"></div>
|
||||
</div>
|
||||
<div class="style_block" style="left: calc(100% / 3);top:0;"></div>
|
||||
<div class="style_block" style="background: green;left: calc(100% / 3);top:calc(100% / 3);"></div>
|
||||
<div class="style_block" style="left: calc(100% / 3);bottom: 0"></div>
|
||||
<div class="style_block" style="background: green;left: calc(200% / 3);top:0;"></div>
|
||||
<div class="style_block" style="left: calc(200% / 3);top:calc(100% / 3);"></div>
|
||||
<div class="style_block" style="background: blue;left: calc(200% / 3);bottom: 0"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { trappedMaterialCondition } from '@js/getData0'
|
||||
export default {
|
||||
name: 'one',
|
||||
data () {
|
||||
return {
|
||||
interTime: this.$store.getters.setTime,
|
||||
timer: null,
|
||||
expand: false,
|
||||
top: '',
|
||||
left: '',
|
||||
youModel: '',
|
||||
foldlineStyle: '',
|
||||
pkId: '',
|
||||
pkObj: {
|
||||
aaa: 'aaa',
|
||||
num: '3'
|
||||
},
|
||||
resData: {},
|
||||
TrappedShelf40List: [],
|
||||
TrappedShelf6List: [],
|
||||
array1: [],
|
||||
array2: []
|
||||
// array1: [{workorder_code: 'hl00001', device_name: '混碾机1', bom: 'WL001', material_code: '1号混料', plan_qty: '5000', real_qty: '200', total_mix_frequency: '230505001001', order_status: '生产完成', realproducestart_date: '10-11 19:11:00', realproduceend_date: '10-11 19:11:00'}]
|
||||
// array2: [{workorder_code: 'hl00001', device_name: '混碾机1', bom: 'WL001', material_code: '1号混料', plan_qty: '5000', real_qty: '200', total_mix_frequency: '230505001001', order_status: '生产完成', realproducestart_date: '10-11 19:11:00', realproduceend_date: '10-11 19:11:00'}]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
defaultOption1 () {
|
||||
return {
|
||||
step: 0.4, // 数值越大速度滚动越快
|
||||
limitMoveNum: 6, // 开始无缝滚动的数据量 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
|
||||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
||||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||||
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initData()
|
||||
this.refresh()
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
methods: {
|
||||
refresh () {
|
||||
this.timer = setInterval(() => {
|
||||
this.initData()
|
||||
}, this.interTime)
|
||||
},
|
||||
expandTooltip () {
|
||||
this.expand = !this.expand
|
||||
},
|
||||
getInfo1 (e, i) {
|
||||
this.pkId = e.point_code
|
||||
this.pkObj = e
|
||||
if (i === 0 || i === 1 || i === 2 || i === 3 || i === 4 || i === 5 || i === 6 || i === 20 || i === 21 || i === 22 || i === 23 || i === 24 || i === 25 || i === 26) {
|
||||
this.youModel = 'popup_block_wraper2'
|
||||
this.foldlineStyle = 'foldline_left2'
|
||||
} else {
|
||||
this.youModel = ''
|
||||
this.foldlineStyle = ''
|
||||
}
|
||||
},
|
||||
getInfo2 (e, i) {
|
||||
this.pkId = e.point_code
|
||||
this.pkObj = e
|
||||
},
|
||||
closeModal () {
|
||||
this.pkId = ''
|
||||
this.pkObj = {}
|
||||
},
|
||||
async initData () {
|
||||
let res = await trappedMaterialCondition()
|
||||
this.resData = res.result
|
||||
this.TrappedShelf40List = res.result.TrappedShelf40List
|
||||
this.TrappedShelf6List = res.result.TrappedShelf6List
|
||||
this.array1 = res.result.TrappedStockList
|
||||
this.array2 = res.result.TrappedIOStockList
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@css/mixin2'
|
||||
.c_gray
|
||||
color $gray1 !important
|
||||
.c_yellow
|
||||
color $yellow !important
|
||||
.c_green
|
||||
color $green !important
|
||||
.c_red
|
||||
color $orange !important
|
||||
.n_container
|
||||
position relative
|
||||
_wh(100%, 100%)
|
||||
.n_header
|
||||
_wh(100%, 8%)
|
||||
_bis('../../assets/images/screen3/bg_header.jpg')
|
||||
.n_header_h1
|
||||
_wh(100%, 100%)
|
||||
_fj(row, flex-start)
|
||||
_bis('../../assets/images/screen3/top_right.png',auto,,left)
|
||||
h1
|
||||
_font(32px, 1, #fff,,right)
|
||||
padding-bottom 2%
|
||||
letter-spacing 6px
|
||||
font-family "阿里妈妈数黑体" !important
|
||||
padding-left 3px
|
||||
.n_body_container
|
||||
_wh(100%, 92%)
|
||||
padding 40px 20px 0px 0
|
||||
_bis('../../assets/images/screen3/bg_content_r.jpg')
|
||||
.n_body_container_wraper
|
||||
_wh(100%, 100%)
|
||||
_fj()
|
||||
.status_wrap
|
||||
position absolute
|
||||
top 18px
|
||||
right 40px
|
||||
z-index 1
|
||||
_fj(row)
|
||||
.status_item
|
||||
_fj(row)
|
||||
+.status_item
|
||||
margin-left 20px
|
||||
.status_tip
|
||||
_wh(15px, 15px)
|
||||
border-radius 50%
|
||||
margin-right 10px
|
||||
box-shadow 0px 0px 4px 0px rgba(33,121,195,0.88)
|
||||
.status_name
|
||||
_font(16px, 1, #fff)
|
||||
.green
|
||||
background-color $green2
|
||||
.yellow
|
||||
background-color $yellow
|
||||
.red
|
||||
background-color $orange
|
||||
.box1
|
||||
position relative
|
||||
_wh(100%, 58%)
|
||||
// border 1px solid rgba(8,205,248,0.3)
|
||||
// border-left none
|
||||
.box_l1
|
||||
_wh(3%, 10%)
|
||||
position absolute
|
||||
top 25%
|
||||
right 20%
|
||||
z-index 2
|
||||
transform rotate(90deg)
|
||||
.picbox
|
||||
position relative
|
||||
width 100%
|
||||
margin-bottom 1%
|
||||
.piccon
|
||||
// _wh(100%, auto)
|
||||
// width 100%
|
||||
height auto
|
||||
box-sizing border-box
|
||||
border 1px solid #ff0
|
||||
border-radius 8px
|
||||
img
|
||||
_wh(80%, 100%)
|
||||
position: relative;
|
||||
left: 20%;
|
||||
// img
|
||||
// _wh(100%, auto)
|
||||
.box_l2
|
||||
_wh(3%, 10%)
|
||||
position absolute
|
||||
top 65%
|
||||
right 20%
|
||||
z-index 2
|
||||
transform rotate(90deg)
|
||||
.picbox
|
||||
position relative
|
||||
width 100%
|
||||
margin-bottom 1%
|
||||
.piccon
|
||||
// _wh(100%, auto)
|
||||
// width 100%
|
||||
height auto
|
||||
box-sizing border-box
|
||||
border 1px solid #ff0
|
||||
border-radius 8px
|
||||
img
|
||||
_wh(80%, 100%)
|
||||
position: relative;
|
||||
left: 20%;
|
||||
// img
|
||||
// _wh(100%, auto)
|
||||
.box_r1
|
||||
_wh(3%, 10%)
|
||||
position absolute
|
||||
top 25%
|
||||
right 2%
|
||||
z-index 2
|
||||
transform rotate(90deg)
|
||||
.picbox
|
||||
position relative
|
||||
width 100%
|
||||
margin-bottom 20%
|
||||
img
|
||||
_wh(100%, auto)
|
||||
.box_r2
|
||||
_wh(3%, 10%)
|
||||
position absolute
|
||||
top 65%
|
||||
right 2%
|
||||
z-index 2
|
||||
transform rotate(90deg)
|
||||
.picbox
|
||||
position relative
|
||||
width 100%
|
||||
margin-bottom 20%
|
||||
img
|
||||
_wh(100%, auto)
|
||||
.mgt5
|
||||
margin-top 55%
|
||||
.mgt2
|
||||
margin-top 80%
|
||||
.mgt6
|
||||
margin-top 42%
|
||||
.box2
|
||||
_wh(100%, 37.5%)
|
||||
_fj(row)
|
||||
.item_wrap
|
||||
_wh(calc(50% - 8px), 100%)
|
||||
position relative
|
||||
z-index 10
|
||||
.item_tip
|
||||
_wh(100%, 32px)
|
||||
line-height 32px
|
||||
padding 0 10px
|
||||
.item_tip_bg_s
|
||||
_bis('../../assets/images/screen3/bg_title_s.png')
|
||||
.item_tip_left
|
||||
_wh(60%, 100%)
|
||||
font-family "SourceHanSansCN"
|
||||
_font(18px, inherit, #fff, 700, left)
|
||||
letter-spacing 2px
|
||||
text-shadow 0 0 9px #159AFF
|
||||
padding-left 34px
|
||||
_bis('../../assets/images/screen3/bg_title_tip.png', 22px, 22px, left)
|
||||
.item_content
|
||||
_wh(100%, calc(100% - 32px))
|
||||
padding 10px 5px
|
||||
.scroll_wrap
|
||||
_wh(100%, 100%)
|
||||
border 1px solid rgba(8,205,248,0.3)
|
||||
// background-color #070b1c
|
||||
.scroll_tab_1
|
||||
_wh(100%, 40px)
|
||||
border-bottom 1px solid rgba(8,205,248,0.3)
|
||||
li
|
||||
float left
|
||||
width 12.5%
|
||||
_font(14px,40px,#78B1DE,,center)
|
||||
word-wrap break-word
|
||||
word-break break-all
|
||||
white-space nowrap
|
||||
padding 0 5px
|
||||
overflow hidden
|
||||
box-sizing border-box
|
||||
.scroll_container_1
|
||||
width 100%
|
||||
height calc(100% - 40px)
|
||||
overflow hidden
|
||||
.scroll-ul_1
|
||||
li
|
||||
_wh(100%, 44px)
|
||||
border-bottom 1px 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_1_div
|
||||
float left
|
||||
_wh(12.5%, 44px)
|
||||
_fj(row, center)
|
||||
_font(14px, 16px, #fff,,center)
|
||||
word-wrap break-word
|
||||
word-break break-all
|
||||
// white-space nowrap
|
||||
padding 0 5px
|
||||
overflow hidden
|
||||
.popup_block_wraper
|
||||
position absolute
|
||||
top: -706%;
|
||||
left: -287%;
|
||||
z-index 10
|
||||
transform rotate(-90deg)
|
||||
.popup_block_wraper2
|
||||
position absolute
|
||||
top: 515%;
|
||||
left: -277%;
|
||||
z-index 10
|
||||
transform rotate(-90deg)
|
||||
.foldline_left2
|
||||
left 530px
|
||||
transform rotateY(0)
|
||||
.foldline_left
|
||||
left -29px
|
||||
</style>
|
||||
852
src/pages/shunhe/StorageMonitor822.vue
Normal file
852
src/pages/shunhe/StorageMonitor822.vue
Normal file
@@ -0,0 +1,852 @@
|
||||
<template>
|
||||
<section class="bg">
|
||||
<t-header title="顺和大屏监控——仓储监控">
|
||||
<!-- <p class="p1">1</p> -->
|
||||
</t-header>
|
||||
<div class="container">
|
||||
<div class="top_wrapper">
|
||||
<div class="yard-wrap">
|
||||
<div class="cont-1">
|
||||
<div class="corridor_2">困料监控</div>
|
||||
<div class="tags">
|
||||
<div class="tag_type">
|
||||
<div class="type_color green"></div>
|
||||
<div class="tag_text">静置中</div>
|
||||
</div>
|
||||
<div class="tag_type">
|
||||
<div class="type_color blue"></div>
|
||||
<div class="tag_text">空盅</div>
|
||||
</div>
|
||||
<div class="tag_type">
|
||||
<div class="type_color yellow"></div>
|
||||
<div class="tag_text">静置完成</div>
|
||||
</div>
|
||||
<div class="tag_type">
|
||||
<div class="type_color red"></div>
|
||||
<div class="tag_text">强制完成</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="yard_group clearfix">
|
||||
<div class="yard_group_ul yard_group_ul_1 fl">
|
||||
<div class="yard_group_cell" v-for="(e, i) in group01" :key="i" :class="{lock:e.lock_type ==='01'}">
|
||||
<div class="yard_group_p" @click="getInfo1(e)">
|
||||
<p class="fontselect">{{e.point_name}}</p>
|
||||
<div v-if="e.struct_url == '1'" class="machine_1"></div>
|
||||
<!-- <div class="ingbox" :style="{height:(Number(e.show_struct_qty)/1000*60+'px')}" :class="{green:e.stand_status ==='2',yellow:e.stand_status ==='3',red:e.stand_status ==='4',blue:e.stand_status ==='5'}"></div> -->
|
||||
<div class="ingbox" style="height:78px;" :class="{green:e.stand_status ==='2',yellow:e.stand_status ==='3',red:e.stand_status ==='4',blue:e.stand_status ==='5'}"></div>
|
||||
</div>
|
||||
<div v-show="code1 === e.point_code" class="locate-wrap clearfix" :class="e.mgl">
|
||||
<div :class="e.aline">
|
||||
<div class="foldcricle0 foldcricle1"></div>
|
||||
<div class="foldline0 foldline1"></div>
|
||||
</div>
|
||||
<div :class="e.bline">
|
||||
<div class="foldline0 foldline2"></div>
|
||||
<div class="foldcricle0 foldcricle2"></div>
|
||||
</div>
|
||||
<div class="clearfix locate-content" :class="e.coordinate">
|
||||
<div class="tan_pline">
|
||||
<p class="tan_p">货位：{{e.storageLocation}}<span :class="{cgreen:e.stand_status ==='2',cyellow:e.stand_status ==='3',cred:e.stand_status ==='4',cblue:e.stand_status ==='5'}">{{e.standStatus}}</span></p>
|
||||
<p class="tan_p">载具：{{e.vehicleCode}}</p>
|
||||
<p class="tan_p">物料：{{e.materialCode}}</p>
|
||||
<p class="tan_p">名称：{{e.materialName}}</p>
|
||||
<p class="tan_p">重量(kg)：{{e.weight}}</p>
|
||||
<p class="tan_p">入库时间：{{e.warehousingTime}}</p>
|
||||
<p class="tan_p">静置(h)：{{e.standTime}}</p>
|
||||
</div>
|
||||
<div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="yard_group_ul yard_group_ul_3 fr">
|
||||
<div class="yard_group_cell" v-for="(e, i) in group03" :key="i" :class="{lock:e.lock_type ==='01'}">
|
||||
<div class="yard_group_p" @click="getInfo1(e)">
|
||||
<p class="fontselect">{{e.point_name}}</p>
|
||||
<div v-if="e.struct_url == '1'" class="machine_1"></div>
|
||||
<div class="ingbox" style="height:78px;" :class="{green:e.stand_status ==='2',yellow:e.stand_status ==='3',red:e.stand_status ==='4',blue:e.stand_status ==='5'}"></div>
|
||||
</div>
|
||||
<div v-show="code1 === e.point_code" class="locate-wrap clearfix" :class="e.mgl">
|
||||
<div :class="e.aline">
|
||||
<div class="foldcricle0 foldcricle1"></div>
|
||||
<div class="foldline0 foldline1"></div>
|
||||
</div>
|
||||
<div :class="e.bline">
|
||||
<div class="foldline0 foldline2"></div>
|
||||
<div class="foldcricle0 foldcricle2"></div>
|
||||
</div>
|
||||
<div class="clearfix locate-content" :class="e.coordinate">
|
||||
<div class="tan_pline">
|
||||
<p class="tan_p">货位：{{e.point_name}}<span :class="{cgreen:e.stand_status ==='2',cyellow:e.stand_status ==='3',cred:e.stand_status ==='4',cblue:e.stand_status ==='5'}">{{e.stand_status_name}}</span></p>
|
||||
<p class="tan_p">载具：{{e.vehicle_code}}</p>
|
||||
<p class="tan_p">BOM：{{e.material_code}}</p>
|
||||
<p class="tan_p">重量(千克)：{{e.ivt_qty}}</p>
|
||||
<p class="tan_p">入库时间：{{e.instorage_time}}</p>
|
||||
<p class="tan_p">静置(小时)：{{e.standing_time}}</p>
|
||||
</div>
|
||||
<div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="corridor_2">成型暂存监控</div>
|
||||
<div class="yard_group clearfix">
|
||||
<div class="yard_group_ul yard_group_ul_2">
|
||||
<div class="yard_group_cell" v-for="(e, i) in group02" :key="i" :class="{lock:e.lock_type ==='01'}">
|
||||
<div class="yard_group_p" @click="getInfo1(e)">
|
||||
<p class="fontselect">{{e.point_name}}</p>
|
||||
<div v-if="e.struct_url == '2'" class="machine_2"></div>
|
||||
<div class="ingbox" :style="{height:(Number(e.show_struct_qty)/1000*60+'px')}"></div>
|
||||
</div>
|
||||
<div v-show="code1 === e.point_code" class="locate-wrap clearfix" :class="e.mgl">
|
||||
<div :class="e.aline">
|
||||
<div class="foldcricle0 foldcricle1"></div>
|
||||
<div class="foldline0 foldline1"></div>
|
||||
</div>
|
||||
<div :class="e.bline">
|
||||
<div class="foldline0 foldline2"></div>
|
||||
<div class="foldcricle0 foldcricle2"></div>
|
||||
</div>
|
||||
<div class="clearfix locate-content" :class="e.coordinate">
|
||||
<div class="tan_pline">
|
||||
<p class="tan_p">货位：{{e.storageLocation}}</p>
|
||||
<p class="tan_p">载具：{{e.vehicleCode}}</p>
|
||||
<p class="tan_p">物料：{{e.materialCode}}</p>
|
||||
<p class="tan_p">名称：{{e.materialName}}</p>
|
||||
<p class="tan_p">库存(块)：{{e.qty}}</p>
|
||||
<p class="tan_p">入库时间：{{e.warehousingTime}}</p>
|
||||
</div>
|
||||
<div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="yard-right">
|
||||
<div class="corridor_2">出窑暂存监控</div>
|
||||
<div class="yard_group clearfix">
|
||||
<div class="yard_group_ul yard_group_ul_4">
|
||||
<div class="yard_group_cell" v-for="(e, i) in group02.slice(0, 26)" :key="i" :class="{lock:e.lock_type ==='01', 'mgt5': i === 2 || i === 6 || i === 10 || i === 14 || i === 18 || i === 22, 'mgt6': i === 3 || i === 7 || i === 11 || i === 15 || i === 19 || i === 23}">
|
||||
<div class="yard_group_p" @click="getInfo1(e)">
|
||||
<p class="fontselect">{{e.point_name}}</p>
|
||||
<div v-if="e.struct_url == '2'" class="machine_2" style="height: 42px;"></div>
|
||||
<div class="ingbox" :style="{height:(Number(e.show_struct_qty)/1000*60+'px')}"></div>
|
||||
</div>
|
||||
<div v-show="code1 === e.point_code" class="locate-wrap clearfix" :class="e.mgl">
|
||||
<div :class="e.aline">
|
||||
<div class="foldcricle0 foldcricle1"></div>
|
||||
<div class="foldline0 foldline1"></div>
|
||||
</div>
|
||||
<div :class="e.bline">
|
||||
<div class="foldline0 foldline2"></div>
|
||||
<div class="foldcricle0 foldcricle2"></div>
|
||||
</div>
|
||||
<div class="clearfix locate-content" :class="e.coordinate">
|
||||
<div class="tan_pline">
|
||||
<p class="tan_p">货位：{{e.storageLocation}}</p>
|
||||
<p class="tan_p">载具：{{e.vehicleCode}}</p>
|
||||
<p class="tan_p">物料：{{e.materialCode}}</p>
|
||||
<p class="tan_p">名称：{{e.materialName}}</p>
|
||||
<p class="tan_p">库存(块)：{{e.qty}}</p>
|
||||
<p class="tan_p">入库时间：{{e.warehousingTime}}</p>
|
||||
</div>
|
||||
<div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom_wrapper">
|
||||
<div class="bottom_wrapper_l">
|
||||
<div class="block_h2">
|
||||
<h2>困料库存</h2>
|
||||
</div>
|
||||
<div class="list_scroll_title">
|
||||
<span>货位</span><span>物料编码</span><span>物料名称</span><span>重量(kg)</span><span>已静置(h) </span><span>状态</span>
|
||||
</div>
|
||||
<vue-seamless-scroll :data="array1" :class-option="classOption" class="content-block-scroll">
|
||||
<ul class="content-block-scroll-ul">
|
||||
<li v-for="(e, i) in array1" :key="i">
|
||||
<span>{{e.storageLocation}}</span><span>{{e.materialCode}}</span><span>{{e.materialName}}</span><span>{{e.weight}}</span><span>{{e.standTime}}</span><span>{{e.standStatus}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
<div class="bottom_wrapper_l">
|
||||
<div class="block_h2">
|
||||
<h2>成型库存</h2>
|
||||
</div>
|
||||
<div class="list_scroll_title">
|
||||
<span>货位</span><span>物料编码</span><span>物料名称</span><span>库存数(块)</span><span>托盘号</span><span>入库时间</span>
|
||||
</div>
|
||||
<vue-seamless-scroll :data="array2" :class-option="classOption" class="content-block-scroll">
|
||||
<ul class="content-block-scroll-ul">
|
||||
<li v-for="(e, i) in array2" :key="i">
|
||||
<span>{{e.storageLocation}}</span><span>{{e.materialCode}}</span><span>{{e.materialName}}</span><span>{{e.qty}}</span><span>{{e.vehicleCode}}</span><span>{{e.warehousingTime}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
<div class="bottom_wrapper_l">
|
||||
<div class="block_h2">
|
||||
<h2>半成品库存</h2>
|
||||
</div>
|
||||
<div class="list_scroll_title">
|
||||
<span>货位</span><span>物料编码</span><span>物料名称</span><span>库存数(块)</span><span>托盘号</span><span>入库时间</span>
|
||||
</div>
|
||||
<vue-seamless-scroll :data="array3" :class-option="classOption" class="content-block-scroll">
|
||||
<ul class="content-block-scroll-ul">
|
||||
<li v-for="(e, i) in array3" :key="i">
|
||||
<span>{{e.storageLocation}}</span><span>{{e.materialCode}}</span><span>{{e.materialName}}</span><span>{{e.qty}}</span><span>{{e.vehicleCode}}</span><span>{{e.warehousingTime}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="bottom"></section>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import THeader from '@components/header.vue'
|
||||
import { storageMonitor } from '@js/getData11'
|
||||
export default {
|
||||
name: 'StorageMonitor',
|
||||
components: {
|
||||
THeader
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
interTime: this.$store.getters.setTime,
|
||||
timer: null,
|
||||
materArr1: [],
|
||||
materArr2: [],
|
||||
structArr: [],
|
||||
array1: [],
|
||||
array2: [],
|
||||
array3: [],
|
||||
group01: [],
|
||||
group02: [],
|
||||
group03: [],
|
||||
code1: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// classOption () {
|
||||
// return {
|
||||
// step: 0.4,
|
||||
// limitMoveNum: 6
|
||||
// }
|
||||
// }
|
||||
classOption () {
|
||||
return {
|
||||
step: 0.6, // 数值越大速度滚动越快
|
||||
limitMoveNum: 10, // 开始无缝滚动的数据量 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)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// lock_type 00空闲，01锁定
|
||||
// stand_status 0为空，2为静置中，3为静置完成，4为强制静置完成，5为静置超时
|
||||
// 编号排布
|
||||
// 12排
|
||||
// let pai1 = []
|
||||
// let pai2 = []
|
||||
// let pai12 = []
|
||||
// for (let i = 1; i <= 20; i++) {
|
||||
// if (i <= 10) {
|
||||
// pai1.push({sequence_number: i * 2 - 1, coordinate: 'coordinate1', aline: 'aline1', bline: 'bline1', show: 0})
|
||||
// pai2.push({sequence_number: i * 2, coordinate: 'coordinate1', aline: 'aline1', bline: 'bline1', show: 0})
|
||||
// } else {
|
||||
// pai1.push({sequence_number: i * 2 - 1, coordinate: 'coordinate2', aline: 'aline2', bline: 'bline2', show: 0})
|
||||
// pai2.push({sequence_number: i * 2, coordinate: 'coordinate2', aline: 'aline2', bline: 'bline2', show: 0})
|
||||
// }
|
||||
// }
|
||||
// pai12 = pai1.concat(pai2)
|
||||
// this.group01 = pai12
|
||||
// // 34排
|
||||
// let pai3 = []
|
||||
// let pai4 = []
|
||||
// let pai34 = []
|
||||
// for (let i = 21; i <= 38; i++) {
|
||||
// if (i <= 30) {
|
||||
// pai3.push({sequence_number: i * 2 - 1, coordinate: 'coordinate1', aline: 'aline1', bline: 'bline1', show: 0})
|
||||
// pai4.push({sequence_number: i * 2, coordinate: 'coordinate3', aline: 'aline3', bline: 'bline3', show: 0})
|
||||
// } else {
|
||||
// pai3.push({sequence_number: i * 2 - 1, coordinate: 'coordinate2', aline: 'aline2', bline: 'bline2', show: 0})
|
||||
// pai4.push({sequence_number: i * 2, coordinate: 'coordinate3', aline: 'aline3', bline: 'bline3', show: 0})
|
||||
// }
|
||||
// }
|
||||
// pai34 = pai3.concat(pai4)
|
||||
// this.group02 = pai34
|
||||
// // 56排
|
||||
// let pai5 = []
|
||||
// let pai6 = []
|
||||
// let pai56 = []
|
||||
// for (let i = 39; i <= 46; i++) {
|
||||
// if (i <= 4) {
|
||||
// pai5.push({sequence_number: i * 2 - 1, coordinate: 'coordinate3', aline: 'aline3', bline: 'bline3', show: 0})
|
||||
// pai6.push({sequence_number: i * 2, coordinate: 'coordinate3', aline: 'aline3', bline: 'bline3', show: 0})
|
||||
// } else {
|
||||
// pai5.push({sequence_number: i * 2 - 1, coordinate: 'coordinate3', aline: 'aline3', bline: 'bline3', show: 0})
|
||||
// pai6.push({sequence_number: i * 2, coordinate: 'coordinate3', aline: 'aline3', bline: 'bline3', show: 0})
|
||||
// }
|
||||
// }
|
||||
// pai56 = pai5.concat(pai6)
|
||||
// this.group03 = pai56
|
||||
// end
|
||||
this.initData()
|
||||
this.refresh()
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
methods: {
|
||||
refresh () {
|
||||
this.timer = setInterval(() => {
|
||||
// this.code1 = ''
|
||||
this.initData()
|
||||
}, this.interTime)
|
||||
},
|
||||
async initData () {
|
||||
let res = await storageMonitor()
|
||||
this.array1 = res.standStock
|
||||
this.array2 = res.frontWarehouseStock
|
||||
this.array3 = res.backWarehouseStock
|
||||
this.group01 = [...res.result.materialTask]
|
||||
this.group02 = [...res.result.productionTask]
|
||||
this.group03 = [...res.result.materialYJTask]
|
||||
for (let i = 0; i < this.group01.length; i++) {
|
||||
this.group01[i] = Object.assign(this.group01[i], {mgl: 'mgl1', coordinate: 'coordinate1', aline: 'aline1', bline: 'bline1', show: 0})
|
||||
}
|
||||
for (let i = 0; i < this.group03.length; i++) {
|
||||
this.group03[i] = Object.assign(this.group03[i], {mgl: 'mgl2', coordinate: 'coordinate2', aline: 'aline2', bline: 'bline2', show: 0})
|
||||
}
|
||||
for (let i = 0; i < this.group02.length; i++) {
|
||||
if (i === 21 || i === 22 || i === 23 || i === 24 || i === 25 || i === 47 || i === 48 || i === 49 || i === 50 || i === 51) {
|
||||
this.group02[i] = Object.assign(this.group02[i], {mgl: 'mgl2', coordinate: 'coordinate2', aline: 'aline2', bline: 'bline2', show: 0})
|
||||
} else {
|
||||
this.group02[i] = Object.assign(this.group02[i], {mgl: 'mgl1', coordinate: 'coordinate1', aline: 'aline1', bline: 'bline1', show: 0})
|
||||
}
|
||||
}
|
||||
// for (let i = 1; i <= 20; i++) {
|
||||
// if (i <= 10) {
|
||||
// group01.push({sequence_number: i * 2 - 1, coordinate: 'coordinate1', aline: 'aline1', bline: 'bline1', show: 0})
|
||||
// group01.push({sequence_number: i * 2, coordinate: 'coordinate1', aline: 'aline1', bline: 'bline1', show: 0})
|
||||
// } else {
|
||||
// group01.push({sequence_number: i * 2 - 1, coordinate: 'coordinate2', aline: 'aline2', bline: 'bline2', show: 0})
|
||||
// group01.push({sequence_number: i * 2, coordinate: 'coordinate2', aline: 'aline2', bline: 'bline2', show: 0})
|
||||
// }
|
||||
// }
|
||||
// for (let i = 0; i < this.structArr.length; i++) {
|
||||
// for (let j = 0; j < this.group01.length; j++) {
|
||||
// if (this.structArr[i].sequence_number === this.group01[j].sequence_number + '') {
|
||||
// this.group01[j] = Object.assign(this.group01[j], this.structArr[i])
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// for (let i = 0; i < this.structArr.length; i++) {
|
||||
// for (let j = 0; j < this.group02.length; j++) {
|
||||
// if (this.structArr[i].sequence_number === this.group02[j].sequence_number + '') {
|
||||
// this.group02[j] = Object.assign(this.group02[j], this.structArr[i])
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// for (let i = 0; i < this.structArr.length; i++) {
|
||||
// for (let j = 0; j < this.group03.length; j++) {
|
||||
// if (this.structArr[i].sequence_number === this.group03[j].sequence_number + '') {
|
||||
// this.group03[j] = Object.assign(this.group03[j], this.structArr[i])
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
},
|
||||
// getdata(e) {
|
||||
// // getdata(21),22,23
|
||||
// // this.code1 = this.code1 === id ? '' : id
|
||||
|
||||
// // list：【
|
||||
// id:xxx,
|
||||
// show: false
|
||||
// 】
|
||||
// e.show = true
|
||||
// {show: true}
|
||||
// show:false
|
||||
// },
|
||||
getInfo1 (e) {
|
||||
this.code1 = this.code1 === e.point_code ? '' : e.point_code
|
||||
},
|
||||
closebtn () {
|
||||
this.code1 = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~@css/mixin'
|
||||
.cgreen
|
||||
color #30EBC9 !important
|
||||
.cyellow
|
||||
color #E2BB0E !important
|
||||
.cred
|
||||
color #FF0000 !important
|
||||
.status1
|
||||
color #32C5FF
|
||||
.status2
|
||||
color #F7B502
|
||||
.bg
|
||||
_wh(100%, 100%)
|
||||
overflow hidden
|
||||
.container
|
||||
_wh(100%, calc(100% - 1.38rem))
|
||||
padding 0rem .2509rem 0
|
||||
overflow hidden
|
||||
clear both
|
||||
.bottom
|
||||
_wh(100%, .38rem)
|
||||
background center bottom / 19.06rem 100% url(../../assets/images/screen1/bottom.png) no-repeat
|
||||
position fixed
|
||||
bottom 0
|
||||
.top_wrapper
|
||||
position relative
|
||||
height 66%
|
||||
display flex
|
||||
.tag_block
|
||||
position absolute
|
||||
// bottom .1rem
|
||||
top -5px
|
||||
right .3rem
|
||||
_fj(row)
|
||||
.tag_type
|
||||
_fj(row)
|
||||
.type_color
|
||||
width .1rem
|
||||
height .1rem
|
||||
border-radius 50%
|
||||
margin-right 10px
|
||||
.tag_text
|
||||
font-size .12rem
|
||||
line-height .2rem
|
||||
.blue
|
||||
background #32C5FF !important
|
||||
.green
|
||||
background #30EBC9 !important
|
||||
.gray
|
||||
background #516282 !important
|
||||
.yellow
|
||||
background #E2BB0E !important
|
||||
.orange
|
||||
background #F96700 !important
|
||||
.red
|
||||
background #FF0000 !important
|
||||
.cblue
|
||||
color #32C5FF !important
|
||||
.cgreen
|
||||
color #30EBC9 !important
|
||||
.cgray
|
||||
color #516282 !important
|
||||
.cyellow
|
||||
color #E2BB0E !important
|
||||
.corange
|
||||
color #F96700 !important
|
||||
.cred
|
||||
color #FF0000 !important
|
||||
.lock
|
||||
border .02rem solid #f00 !important
|
||||
.yard-wrap
|
||||
// height 6.95rem
|
||||
height 100%
|
||||
width 80%
|
||||
// padding .1rem 0
|
||||
.yard_group
|
||||
width 100%
|
||||
// height calc(50% - 46px)
|
||||
clear both
|
||||
&:nth-child(1)
|
||||
margin-bottom 20px
|
||||
.yard_group_ul
|
||||
float left
|
||||
display grid
|
||||
grid-gap 0
|
||||
justify-items center
|
||||
align-items center
|
||||
margin-top -.01rem
|
||||
.yard_group_ul_1
|
||||
width 80%
|
||||
position absolute
|
||||
grid-template-columns repeat(18, 80% / 18)
|
||||
// grid-template-rows repeat(2, 1.8rem / 2)
|
||||
grid-template-rows repeat(2, 110px)
|
||||
.yard_group_ul_2
|
||||
width 100%
|
||||
position absolute
|
||||
grid-template-columns repeat(14, 80% / 14)
|
||||
// grid-template-columns repeat(26, 100% / 26)
|
||||
// grid-template-rows repeat(2, 1.8rem / 2)
|
||||
grid-template-rows repeat(2, 110px)
|
||||
.yard_group_ul_3
|
||||
width 20%
|
||||
grid-template-columns repeat(5, 100% / 5)
|
||||
// grid-template-rows repeat(2, 1.8rem / 2)
|
||||
grid-template-rows repeat(2, 110px)
|
||||
.yard_group_ul_4
|
||||
width 100%
|
||||
grid-template-columns repeat(4, 80% / 4)
|
||||
// grid-template-rows repeat(2, 1.8rem / 2)
|
||||
grid-template-rows repeat(7, 73px)
|
||||
.yard_group_cell
|
||||
position relative
|
||||
display inline-block
|
||||
width 100%
|
||||
// height calc(1.8rem / 2)
|
||||
height 100%
|
||||
box-sizing border-box
|
||||
border 1px solid #32C5FF
|
||||
background #000F2B
|
||||
border-radius 8px
|
||||
.yard_group_p
|
||||
// height calc(1.8rem / 2)
|
||||
height 90px
|
||||
p
|
||||
font-size 12px
|
||||
// line-height 0.28rem
|
||||
line-height 28px
|
||||
height 28px
|
||||
-webkit-text-size-adjust none
|
||||
text-align center
|
||||
white-space nowrap
|
||||
img
|
||||
display block
|
||||
width 60%
|
||||
// height 0.6rem
|
||||
height 60px
|
||||
margin 0 auto
|
||||
.machine_1
|
||||
position absolute
|
||||
width 60%
|
||||
width 100%
|
||||
height 78px
|
||||
overflow hidden
|
||||
background center center / 100% 100% url(../../assets/images/screen1/zhong.png) no-repeat
|
||||
margin 0 auto
|
||||
z-index 98
|
||||
// left 50%
|
||||
// margin-left -30%
|
||||
opacity 0.5
|
||||
border-bottom-right-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
.machine_2
|
||||
position absolute
|
||||
width 60%
|
||||
width 100%
|
||||
height 78px
|
||||
overflow hidden
|
||||
background center center / 100% 100% url(../../assets/images/screen1/cp1.jpg) no-repeat
|
||||
margin 0 auto
|
||||
z-index 98
|
||||
// left 50%
|
||||
// margin-left -30%
|
||||
opacity 0.5
|
||||
border-bottom-right-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
.ingbox
|
||||
position absolute
|
||||
bottom 0
|
||||
width 100%
|
||||
z-index 97 //
|
||||
.corridor_2
|
||||
_wh(80%,22px)
|
||||
_font(16px, 22px, #fff,,left)
|
||||
margin 22px 12px 30px 0
|
||||
.locate-wrap
|
||||
position absolute
|
||||
width 100%
|
||||
bottom -40%
|
||||
.locate-content
|
||||
position absolute
|
||||
width 2.9rem
|
||||
height 2.74rem
|
||||
z-index 99
|
||||
background center center / 100% 100% url(../../assets/images/screen1/popover_1.png) no-repeat
|
||||
padding .36rem .15rem
|
||||
.tan_pline
|
||||
width 100%
|
||||
margin 0 auto
|
||||
.tan_p
|
||||
font-size .12rem
|
||||
line-height .36rem
|
||||
height .36rem
|
||||
overflow hidden
|
||||
color #fff
|
||||
span
|
||||
padding-right .4rem
|
||||
float right
|
||||
.close_btn
|
||||
position absolute
|
||||
top 3%
|
||||
right 10%
|
||||
margin-right -.25rem
|
||||
font-size .14rem
|
||||
line-height .34rem
|
||||
padding 0 .16rem
|
||||
border-radius 5px
|
||||
cursor pointer
|
||||
.bottom_wrapper
|
||||
display flex
|
||||
width 100%
|
||||
height 40%
|
||||
// padding-top 120px
|
||||
padding-bottom 10px
|
||||
_fj(row)
|
||||
.bottom_wrapper_l
|
||||
// _wh(calc(33%), 100%)
|
||||
width 100%
|
||||
height 100%
|
||||
position relative
|
||||
#echarts1
|
||||
// margin-left 2rem
|
||||
position absolute
|
||||
top 0
|
||||
left 0
|
||||
z-index 9
|
||||
#echarts3
|
||||
// margin-left 2rem
|
||||
position absolute
|
||||
top -30px
|
||||
// left 60px
|
||||
left .60rem
|
||||
z-index 10
|
||||
.title
|
||||
position absolute
|
||||
top .15rem
|
||||
left .25rem
|
||||
// .block_h2
|
||||
// _wh(100%, 22px)
|
||||
// margin 12px
|
||||
// h2
|
||||
// font-size 16px
|
||||
// line-height 22px
|
||||
.block_h2
|
||||
_wh(calc(100% - 12px), 32px)
|
||||
margin 17px 0 10px 0
|
||||
padding-left 0.55rem
|
||||
background center center / 100% 100% url(../../assets/images/screen1/title_bg_d1.png) no-repeat
|
||||
h2
|
||||
_font(16px, 32px, #fff,,left)
|
||||
.list_scroll_title
|
||||
width calc(100% - 12px)
|
||||
// width calc(100% - 30px)
|
||||
// margin 0 15px
|
||||
background #262F52
|
||||
span
|
||||
display inline-block
|
||||
width 16%
|
||||
text-align center
|
||||
line-height 32px
|
||||
font-size 12px
|
||||
color rgba(255,255,255,0.60)
|
||||
// float left
|
||||
&:nth-child(2)
|
||||
width 20%
|
||||
.content-block-scroll
|
||||
// width calc(100% - 30px)
|
||||
// margin 0 15px 4px 15px
|
||||
width calc(100% - 12px)
|
||||
margin 0 0px 4px 0px
|
||||
height calc(100% - 82px)
|
||||
overflow hidden
|
||||
.content-block-scroll-ul
|
||||
width 100%
|
||||
li
|
||||
width 100%
|
||||
height 38px
|
||||
_fj(row, center)
|
||||
&:nth-child(2n)
|
||||
background rgba(38,47,82,0.50)
|
||||
span
|
||||
display inline-block
|
||||
width 18%
|
||||
padding 0 2px
|
||||
font-size 12px
|
||||
text-align center
|
||||
line-height 38px
|
||||
box-sizing border-box
|
||||
// float left
|
||||
&:nth-child(2)
|
||||
width 28%
|
||||
.foldcricle0
|
||||
position absolute
|
||||
z-index 102
|
||||
width .24rem
|
||||
height .24rem
|
||||
background center center / 100% 100% url(../../assets/images/screen1/dot.png) no-repeat
|
||||
.foldcricle2
|
||||
top .50rem
|
||||
left .6rem
|
||||
.foldcricle1
|
||||
top 0
|
||||
left -0.1rem
|
||||
.foldline0
|
||||
position absolute
|
||||
z-index 102
|
||||
border 1px dashed #32C5FF
|
||||
height 1px
|
||||
.foldline1
|
||||
width .33rem
|
||||
top .12rem
|
||||
left .09rem
|
||||
.foldline2
|
||||
width .60rem
|
||||
top .39rem
|
||||
left .27rem
|
||||
transform rotate(60deg)
|
||||
.coordinate1
|
||||
left .9rem
|
||||
top -.14rem
|
||||
.coordinate2
|
||||
right .86rem
|
||||
top -.14rem
|
||||
.coordinate3
|
||||
left .9rem
|
||||
bottom .86rem
|
||||
.aline1
|
||||
position absolute
|
||||
z-index 102
|
||||
top -.70rem
|
||||
left .88rem
|
||||
.bline1
|
||||
position absolute
|
||||
top -.70rem
|
||||
left .93rem
|
||||
.aline2
|
||||
position absolute
|
||||
z-index 102
|
||||
transform rotate(180deg)
|
||||
top -.50rem
|
||||
left 0px
|
||||
.bline2
|
||||
position absolute
|
||||
z-index 102
|
||||
transform rotate(60deg)
|
||||
top -1.05rem
|
||||
right 1.28rem
|
||||
.aline3
|
||||
position absolute
|
||||
z-index 102
|
||||
transform rotate(0deg)
|
||||
bottom .7rem
|
||||
left .88rem
|
||||
.bline3
|
||||
position absolute
|
||||
z-index 102
|
||||
transform rotate(-120deg)
|
||||
bottom .2rem
|
||||
left 1.38rem
|
||||
// .foldcricle0
|
||||
// position absolute
|
||||
// z-index 102
|
||||
// width 24px
|
||||
// height 24px
|
||||
// background center center / 100% 100% url(../../assets/images/screen1/dot.png) no-repeat
|
||||
// .foldcricle2
|
||||
// top 50px
|
||||
// left 55px
|
||||
// .foldcricle1
|
||||
// top 0
|
||||
// left -0.1rem
|
||||
// .foldline0
|
||||
// position absolute
|
||||
// z-index 102
|
||||
// border 1px dashed #32C5FF
|
||||
// height 1px
|
||||
// .foldline1
|
||||
// width 30px
|
||||
// top 12px
|
||||
// left 9px
|
||||
// .foldline2
|
||||
// width 60px
|
||||
// top 38px
|
||||
// left 24px
|
||||
// transform rotate(60deg)
|
||||
// .coordinate1
|
||||
// left 38px
|
||||
// top -14px
|
||||
// .coordinate2
|
||||
// right 53px
|
||||
// top -14px
|
||||
// .coordinate3
|
||||
// left 38px
|
||||
// bottom 66px
|
||||
// .aline1
|
||||
// position absolute
|
||||
// z-index 102
|
||||
// top -70px
|
||||
// left 88px
|
||||
// .bline1
|
||||
// position absolute
|
||||
// top -70px
|
||||
// left 88px
|
||||
// .aline2
|
||||
// position absolute
|
||||
// z-index 102
|
||||
// transform rotate(180deg)
|
||||
// top -50px
|
||||
// left 0px
|
||||
// .bline2
|
||||
// position absolute
|
||||
// z-index 102
|
||||
// transform rotate(60deg)
|
||||
// top -100px
|
||||
// right 138px
|
||||
// .aline3
|
||||
// position absolute
|
||||
// z-index 102
|
||||
// transform rotate(0deg)
|
||||
// bottom 50px
|
||||
// left 88px
|
||||
// .bline3
|
||||
// position absolute
|
||||
// z-index 102
|
||||
// transform rotate(-120deg)
|
||||
// bottom -2px
|
||||
// left 138px
|
||||
.yard_group_p
|
||||
_wh(100%, 100%)
|
||||
.fontselect
|
||||
_font(12px, 30px, #fff,,)
|
||||
// transform scale(0.8)
|
||||
white-space:nowrap
|
||||
.mgl1
|
||||
margin-left -22px
|
||||
.mgl2
|
||||
margin-left 0px
|
||||
.yard-right
|
||||
width 18%
|
||||
height 100%
|
||||
margin-left 2%
|
||||
box-sizing border-box
|
||||
border 1px solid #32c5ff
|
||||
.cont-1
|
||||
display flex
|
||||
.tags
|
||||
display flex
|
||||
width 20%
|
||||
align-items center
|
||||
justify-content space-around
|
||||
.mgt5
|
||||
margin-left 100px
|
||||
.mgt6
|
||||
margin-left 150%
|
||||
</style>
|
||||
Reference in New Issue
Block a user