root/screen-huaxiang
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

数据

Browse Source
This commit is contained in:
蔡玲
2024-09-27 14:53:06 +08:00
parent 709c2b97ba
commit 7da8cdc618
13 changed files with 1035 additions and 4839 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
src/components/header.vue
View File

@@ -1,19 +1,7 @@
<template>
<header>
<div class="exit_btn iconfont" @click.stop="$router.push('/setup')">&#xe85b;</div>
<header class="absolute">
<div class="absolute exit_btn iconfont" @click.stop="$router.push('/setup')">&#xe85b;</div>
<p>{{title}}</p>
<div class="data_box clearfix">
<div class="date_item date">{{date}}</div>
<div class="date_item week">{{week}}</div>
<div class="date_item clearfix">
<div class="tiem_item hours">{{hours}}</div>
<div class="colon">:</div>
<div class="tiem_item minutes">{{minutes}}</div>
<div class="colon">:</div>
<div class="tiem_item seconds">{{seconds}}</div>
</div>
</div>
<slot></slot>
</header>
</template>
@@ -21,105 +9,42 @@
export default {
name: 'Header',
data () {
return {
expand: false,
timer: null,
time: '',
hours: '',
minutes: '',
seconds: '',
date: '',
week: ''
}
return {}
},
props: {
title: String
},
created () {
this.updateTime()
this.timer = window.setInterval(this.updateTime, 1000)
},
beforeDestroy () {
this.$once('hook:beforeDestroy', () => {
clearInterval(this.timer)
})
},
methods: {
expandTooltip () {
this.expand = !this.expand
},
updateTime () {
let cd = new Date()
let year = cd.getFullYear()
let month = cd.getMonth() + 1 < 10 ? '0' + (cd.getMonth() + 1) : cd.getMonth() + 1
let date = cd.getDate() < 10 ? '0' + cd.getDate() : cd.getDate()
let hh = cd.getHours() < 10 ? '0' + cd.getHours() : cd.getHours()
let mm = cd.getMinutes() < 10 ? '0' + cd.getMinutes() : cd.getMinutes()
let ss = cd.getSeconds() < 10 ? '0' + cd.getSeconds() : cd.getSeconds()
var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
let myddy = new Date().getDay()
let week = weekday[myddy]
this.time = `${hh}:${mm}:${ss}`
this.hours = `${hh}`
this.minutes = `${mm}`
this.seconds = `${ss}`
this.date = `${year}年${month}月${date}日`
this.week = `${week}`
}
}
}
</script>
<style lang="stylus" scoped>
.exit_btn
position absolute
left 25px
top 14px
top 26px
height 37px
width 37px
line-height 37px
font-size 20px
color #fff
color rgba(223, 205, 205, 60%)
text-align: center;
cursor: pointer;
border-radius: 50%;
header
position relative
width 100%
height 8%
position relative
background center center / 100% 100% url(../images/screen1/header.png) no-repeat
height 181px
background center center / 100% 100% url(../images/header_bg.png) no-repeat
p
// font-family "PangMenZhengDao"
font-family "YouSheBiaoTiHei"
font-size 50px
line-height 88px
color #fff
font-weight lighter
text-align center
letter-spacing 5px
padding-left 5px
text-shadow 0 8px 8px rgba(0,0,0,0.30)
.data_box
position absolute
right 25px
top 14px
height 37px
.date, .week
padding-right 20px
.date_item
float left
font-size 20px
line-height 37px
color #fff
.tiem_item
float left
font-size 20px
line-height 37px
color #fff
.colon
float left
font-size 20px
line-height 37px
color #fff
font-size: 40px;
font-family: 'YouSheBiaoTiHei';
font-weight: 400;
color: transparent;
line-height: 94px;
opacity: 0.89;
letter-spacing 10px
background: linear-gradient(0deg, #AAD0F6 0%, #D7E7F5 53.3154296875%, #E0EAF6 100%);
filter: drop-shadow(#092F6D 1px 4px 1px);
-webkit-background-clip: text;
background-clip: text;
text-align center;
padding-left: 4px;
pointer-events: none; /* 防止其他元素影响点击事件 */
</style>

7
src/config/getData1.js
View File

@@ -1,7 +0,0 @@
import {post} from '@js/http.js'
/** 压制看板 */
export const cockpitpress = (id) => post('api/cockpit/press', {})
/** 分拣作业监控 */
export const cockpitsorting = (id) => post('api/cockpit/sorting', {})

12
src/config/getData2.js
View File

@@ -1,13 +1,5 @@
import {post, post1} from './http.js'
import {post} from './http.js'
// 大屏-中间设备运行情况
export const deviceCondition = () => post('api/cockpit/deviceCondition', {})
// 出、入窑输送线弹窗
export const inOutKilnDetail = () => post('api/cockpit/inOutKilnDetail', {})
// 窑弹出框
export const kilnDetail = () => post('api/cockpit/kilnDetail', {})
// 大屏-两侧图表
// 大屏两侧图标信息
export const screenTableData = () => post('api/cockpit/screenTableData', {})
// 窑看板
export const klineInfo = () => post('api/cockpit/klineInfo', {})
// 料仓监控
export const queryliaocang = () => post1('api/hand/queryliaocang', {})

264
src/config/mork01.js
View File

File diff suppressed because one or more lines are too long

750
src/config/mork1.js
View File

@@ -1,750 +0,0 @@
/** 压制看板 */
export const cockpitpress = () => {
let res = {
'PressOrderList': [
{
'planQty': '4000',
'realQty': '2016',
'rate': '0.50',
'orderNumber': 'SY202403-04'
},
{
'planQty': '2000',
'realQty': '2772',
'rate': '1.39',
'orderNumber': 'sy02403-04'
},
{
'planQty': '2000',
'realQty': '1512',
'rate': '0.76',
'orderNumber': 'SY202401-02'
}
],
'ProductionTask': [
{
'device': '压机02',
'workorderCode': '240317013',
'team': '白班',
'materialName': 'ML-75B',
'customer': '实业股份',
'planproducestartDate': '2024-03-17 15:45:44',
'planQty': '1000',
'realQty': '1764',
'unqualifiedQty': null,
'qualifiedRate': null,
'workorderStatus': '生产中',
'operator': '管理员',
'realproducestartDate': '2024-03-17 15:45:42',
'realproduceendDate': '-'
},
{
'device': '压机05',
'workorderCode': '240325003',
'team': '白班',
'materialName': 'ML-70BD',
'customer': '实业股份',
'planproducestartDate': '2024-03-25 09:17:07',
'planQty': '1000',
'realQty': '1764',
'unqualifiedQty': null,
'qualifiedRate': null,
'workorderStatus': '生产中',
'operator': '管理员',
'realproducestartDate': '2024-03-25 09:17:14',
'realproduceendDate': '-'
},
{
'device': '压机07',
'workorderCode': '240325005',
'team': '白班',
'materialName': 'BP-70A',
'customer': '实业股份',
'planproducestartDate': '2024-03-25 09:25:23',
'planQty': '1000',
'realQty': '756',
'unqualifiedQty': null,
'qualifiedRate': null,
'workorderStatus': '生产中',
'operator': '管理员',
'realproducestartDate': '2024-03-25 09:25:27',
'realproduceendDate': '-'
},
{
'device': '压机08',
'workorderCode': '240325006',
'team': '白班',
'materialName': 'BP-65A',
'customer': '实业股份',
'planproducestartDate': '2024-03-25 09:26:39',
'planQty': '1000',
'realQty': '756',
'unqualifiedQty': null,
'qualifiedRate': null,
'workorderStatus': '生产中',
'operator': '管理员',
'realproducestartDate': '2024-03-25 09:26:35',
'realproduceendDate': '-'
},
{
'device': '压机01',
'workorderCode': '240329002',
'team': '白班',
'materialName': 'ML-70BD',
'customer': '沙湾',
'planproducestartDate': '2024-03-29 10:24:01',
'planQty': '1000',
'realQty': '1008',
'unqualifiedQty': null,
'qualifiedRate': null,
'workorderStatus': '生产中',
'operator': '管理员',
'realproducestartDate': '2024-03-29 10:24:26',
'realproduceendDate': '-'
},
{
'device': '压机06',
'workorderCode': '240330001',
'team': '白班',
'materialName': 'ML-75B',
'customer': '镍业',
'planproducestartDate': '2024-03-30 11:39:29',
'planQty': '1000',
'realQty': '252',
'unqualifiedQty': null,
'qualifiedRate': null,
'workorderStatus': '生产中',
'operator': '管理员',
'realproducestartDate': '2024-03-30 11:39:37',
'realproduceendDate': '-'
},
{
'device': '压机04',
'workorderCode': '240330005',
'team': '白班',
'materialName': 'ML-75B',
'customer': '镍业',
'planproducestartDate': '2024-03-30 12:34:12',
'planQty': '1000',
'realQty': '0',
'unqualifiedQty': null,
'qualifiedRate': null,
'workorderStatus': '生产中',
'operator': '管理员',
'realproducestartDate': '2024-03-30 12:34:09',
'realproduceendDate': '-'
},
{
'device': '压机03',
'workorderCode': '240401001',
'team': '白班',
'materialName': 'ML-75B',
'customer': '镍业',
'planproducestartDate': '2024-04-01 11:07:51',
'planQty': '1000',
'realQty': '0',
'unqualifiedQty': null,
'qualifiedRate': null,
'workorderStatus': '生产中',
'operator': '管理员',
'realproducestartDate': '2024-04-01 11:08:07',
'realproduceendDate': '-'
}
],
'DayShiftInfo': [
{
'planQty': '8000',
'realQty': '6300',
'unqualifiedQty': '974',
'qualifiedQty': '5564',
'team': '白班'
}
],
'ShiftProductionList': [
{
'columnName': '压机01',
'qualifiedQty': '600',
'unqualifiedQty': '77',
'lastQty': '323',
'workOrderCode': '240329002',
'pointCode': 'YJ01',
'planQty': '1000',
'qualifyRate': '0.60'
},
{
'columnName': '压机02',
'qualifiedQty': '0',
'unqualifiedQty': '0',
'lastQty': '1000',
'workOrderCode': '240317013',
'pointCode': 'YJ02',
'planQty': '1000',
'qualifyRate': '0.00'
},
{
'columnName': '压机03',
'qualifiedQty': '60',
'unqualifiedQty': '21',
'lastQty': '919',
'workOrderCode': '240401001',
'pointCode': 'YJ03',
'planQty': '1000',
'qualifyRate': '0.06'
},
{
'columnName': '压机04',
'qualifiedQty': '0',
'unqualifiedQty': '0',
'lastQty': '1000',
'workOrderCode': '240330005',
'pointCode': 'YJ04',
'planQty': '1000',
'qualifyRate': '0.00'
},
{
'columnName': '压机05',
'qualifiedQty': '1980',
'unqualifiedQty': '226',
'lastQty': '0',
'workOrderCode': '240325003',
'pointCode': 'YJ05',
'planQty': '1000',
'qualifyRate': '1.98'
},
{
'columnName': '压机06',
'qualifiedQty': '0',
'unqualifiedQty': '0',
'lastQty': '1000',
'workOrderCode': '240330001',
'pointCode': 'YJ06',
'planQty': '1000',
'qualifyRate': '0.00'
},
{
'columnName': '压机07',
'qualifiedQty': '1160',
'unqualifiedQty': '422',
'lastQty': '0',
'workOrderCode': '240325005',
'pointCode': 'YJ07',
'planQty': '1000',
'qualifyRate': '1.16'
},
{
'columnName': '压机08',
'qualifiedQty': '1764',
'unqualifiedQty': '228',
'lastQty': '0',
'workOrderCode': '240325006',
'pointCode': 'YJ08',
'planQty': '1000',
'qualifyRate': '1.76'
}
]
}
return res
}
/** 分拣作业监控 */
export const cockpitsorting = () => {
let res = {
'stackingList': [
{
'materialQty': '252',
'materialModel': '20/10',
'materialCode': 'ML-70BD',
'createTime': '03-29 10:00:50'
},
{
'materialQty': '252',
'materialModel': '20/10',
'materialCode': 'ML-70BD',
'createTime': '03-29 08:33:22'
},
{
'materialQty': '252',
'materialModel': '20/10',
'materialCode': 'ML-70BD',
'createTime': '03-29 08:20:41'
},
{
'materialQty': '252',
'materialModel': '20/10',
'materialCode': 'ML-70BD',
'createTime': '03-28 13:30:49'
},
{
'materialQty': '252',
'materialModel': '20/10',
'materialCode': 'ML-70BD',
'createTime': '03-28 13:00:22'
},
{
'materialQty': '252',
'materialModel': '20/10',
'materialCode': 'ML-70BD',
'createTime': '03-28 10:37:02'
},
{
'materialQty': '252',
'materialModel': '20/10',
'materialCode': 'ML-70BD',
'createTime': '03-28 10:35:57'
},
{
'materialQty': '252',
'materialModel': '20/30',
'materialCode': 'ML-70BD',
'createTime': '03-28 08:43:04'
},
{
'materialQty': '252',
'materialModel': '20/30',
'materialCode': 'ML-70BD',
'createTime': '03-28 08:39:43'
},
{
'materialQty': '252',
'materialModel': '18/10',
'materialCode': 'ML-60BT',
'createTime': '03-16 17:13:26'
},
{
'materialQty': '252',
'materialModel': '18/30',
'materialCode': 'ML-60BT',
'createTime': '03-16 15:08:38'
},
{
'materialQty': '252',
'materialModel': '18/30',
'materialCode': 'ML-60BT',
'createTime': '03-16 14:54:16'
},
{
'materialQty': '126',
'materialModel': '40/0',
'materialCode': 'AP-70A',
'createTime': '03-16 13:20:19'
},
{
'materialQty': '126',
'materialModel': '40/0',
'materialCode': 'AP-70A',
'createTime': '03-16 11:28:38'
},
{
'materialQty': '126',
'materialModel': '40/0',
'materialCode': 'AP-70A',
'createTime': '03-16 10:35:55'
},
{
'materialQty': '126',
'materialModel': '40/0',
'materialCode': 'AP-70A',
'createTime': '03-16 09:13:43'
},
{
'materialQty': '126',
'materialModel': '40/0',
'materialCode': 'AP-70A',
'createTime': '03-16 09:05:29'
},
{
'materialQty': '252',
'materialModel': '18/10',
'materialCode': 'ML-60BT',
'createTime': '03-15 15:48:21'
},
{
'materialQty': '252',
'materialModel': '18/10',
'materialCode': 'ML-60BT',
'createTime': '03-15 15:17:40'
},
{
'materialQty': '252',
'materialModel': '18/10',
'materialCode': 'ML-60BT',
'createTime': '03-15 14:27:23'
},
{
'materialQty': '252',
'materialModel': '20/10',
'materialCode': 'ML-60BT',
'createTime': '03-15 13:23:13'
},
{
'materialQty': '252',
'materialModel': '20/10',
'materialCode': 'ML-60BT',
'createTime': '03-15 13:11:03'
},
{
'materialQty': '252',
'materialModel': '20/10',
'materialCode': 'ML-60BT',
'createTime': '03-15 11:06:05'
},
{
'materialQty': '252',
'materialModel': '20/30',
'materialCode': 'ML-60BT',
'createTime': '03-15 08:50:52'
},
{
'materialQty': '252',
'materialModel': '20/30',
'materialCode': 'ML-60BT',
'createTime': '03-15 08:15:38'
},
{
'materialQty': '0',
'materialModel': '20/30',
'materialCode': 'ML-60BT',
'createTime': '03-15 08:03:13'
},
{
'materialQty': '0',
'materialModel': '20/30',
'materialCode': 'MT-14AT',
'createTime': '01-20 16:22:03'
},
{
'materialQty': '252',
'materialModel': '20/30',
'materialCode': 'MT-14AT',
'createTime': '01-20 15:27:45'
},
{
'materialQty': '126',
'materialModel': '20/30',
'materialCode': 'MT-14AT',
'createTime': '01-20 14:47:00'
},
{
'materialQty': '0',
'materialModel': '20/30',
'materialCode': 'MT-14AT',
'createTime': '01-20 13:46:11'
},
{
'materialQty': '0',
'materialModel': '20/30',
'materialCode': 'MT-14AT',
'createTime': '01-20 12:28:36'
},
{
'materialQty': '0',
'materialModel': '20/30',
'materialCode': 'MT-14AT',
'createTime': '01-20 11:12:05'
},
{
'materialQty': '0',
'materialModel': '20/30',
'materialCode': 'MT-14AT',
'createTime': '01-20 10:53:27'
},
{
'materialQty': '0',
'materialModel': '20/30',
'materialCode': 'MT-14AT',
'createTime': '01-20 10:08:29'
},
{
'materialQty': '0',
'materialModel': '20/30',
'materialCode': 'MT-14AT',
'createTime': '01-20 09:23:01'
},
{
'materialQty': '0',
'materialModel': '20/30',
'materialCode': 'MT-14AT',
'createTime': '01-20 09:00:53'
},
{
'materialQty': '252',
'materialModel': null,
'materialCode': null,
'createTime': '01-14 13:23:47'
}
],
'sortingLine': {
'sortingLines': [
{
'workorderCode': '240329001',
'pointName': '分拣拆垛机械手01',
'customer': '沙湾',
'materialName': 'ML-70BD',
'materialSpec': 'BB',
'planQty': '1000',
'realQty': '0'
}
],
'rgSortingLine': [],
'rgPlanQty': '0',
'rgRealQty': '0'
},
'unstackingList': [
{
'materialQty': '252',
'materialModel': '20/10',
'materialCode': 'ML-70BD',
'createTime': '03-29 10:00:50'
},
{
'materialQty': '252',
'materialModel': '20/10',
'materialCode': 'ML-70BD',
'createTime': '03-29 08:33:22'
},
{
'materialQty': '252',
'materialModel': '20/10',
'materialCode': 'ML-70BD',
'createTime': '03-29 08:20:41'
},
{
'materialQty': '252',
'materialModel': '20/10',
'materialCode': 'ML-70BD',
'createTime': '03-28 13:30:49'
},
{
'materialQty': '252',
'materialModel': '20/10',
'materialCode': 'ML-70BD',
'createTime': '03-28 13:00:22'
},
{
'materialQty': '252',
'materialModel': '20/10',
'materialCode': 'ML-70BD',
'createTime': '03-28 10:37:02'
},
{
'materialQty': '252',
'materialModel': '20/10',
'materialCode': 'ML-70BD',
'createTime': '03-28 10:35:57'
},
{
'materialQty': '252',
'materialModel': '20/30',
'materialCode': 'ML-70BD',
'createTime': '03-28 08:43:04'
},
{
'materialQty': '252',
'materialModel': '20/30',
'materialCode': 'ML-70BD',
'createTime': '03-28 08:39:43'
},
{
'materialQty': '252',
'materialModel': '18/10',
'materialCode': 'ML-60BT',
'createTime': '03-16 17:13:26'
},
{
'materialQty': '252',
'materialModel': '18/30',
'materialCode': 'ML-60BT',
'createTime': '03-16 15:08:38'
},
{
'materialQty': '252',
'materialModel': '18/30',
'materialCode': 'ML-60BT',
'createTime': '03-16 14:54:16'
},
{
'materialQty': '126',
'materialModel': '40/0',
'materialCode': 'AP-70A',
'createTime': '03-16 13:20:19'
},
{
'materialQty': '126',
'materialModel': '40/0',
'materialCode': 'AP-70A',
'createTime': '03-16 11:28:38'
},
{
'materialQty': '126',
'materialModel': '40/0',
'materialCode': 'AP-70A',
'createTime': '03-16 10:35:55'
},
{
'materialQty': '126',
'materialModel': '40/0',
'materialCode': 'AP-70A',
'createTime': '03-16 09:13:43'
},
{
'materialQty': '126',
'materialModel': '40/0',
'materialCode': 'AP-70A',
'createTime': '03-16 09:05:29'
},
{
'materialQty': '252',
'materialModel': '18/10',
'materialCode': 'ML-60BT',
'createTime': '03-15 15:48:21'
},
{
'materialQty': '252',
'materialModel': '18/10',
'materialCode': 'ML-60BT',
'createTime': '03-15 15:17:40'
},
{
'materialQty': '252',
'materialModel': '18/10',
'materialCode': 'ML-60BT',
'createTime': '03-15 14:27:23'
},
{
'materialQty': '252',
'materialModel': '20/10',
'materialCode': 'ML-60BT',
'createTime': '03-15 13:23:13'
},
{
'materialQty': '252',
'materialModel': '20/10',
'materialCode': 'ML-60BT',
'createTime': '03-15 13:11:03'
},
{
'materialQty': '252',
'materialModel': '20/10',
'materialCode': 'ML-60BT',
'createTime': '03-15 11:06:05'
},
{
'materialQty': '252',
'materialModel': '20/30',
'materialCode': 'ML-60BT',
'createTime': '03-15 08:50:52'
},
{
'materialQty': '252',
'materialModel': '20/30',
'materialCode': 'ML-60BT',
'createTime': '03-15 08:15:38'
},
{
'materialQty': '0',
'materialModel': '20/30',
'materialCode': 'ML-60BT',
'createTime': '03-15 08:03:13'
},
{
'materialQty': '0',
'materialModel': '20/30',
'materialCode': 'MT-14AT',
'createTime': '01-20 16:22:03'
},
{
'materialQty': '252',
'materialModel': '20/30',
'materialCode': 'MT-14AT',
'createTime': '01-20 15:27:45'
},
{
'materialQty': '126',
'materialModel': '20/30',
'materialCode': 'MT-14AT',
'createTime': '01-20 14:47:00'
},
{
'materialQty': '0',
'materialModel': '20/30',
'materialCode': 'MT-14AT',
'createTime': '01-20 13:46:11'
},
{
'materialQty': '0',
'materialModel': '20/30',
'materialCode': 'MT-14AT',
'createTime': '01-20 12:28:36'
},
{
'materialQty': '0',
'materialModel': '20/30',
'materialCode': 'MT-14AT',
'createTime': '01-20 11:12:05'
},
{
'materialQty': '0',
'materialModel': '20/30',
'materialCode': 'MT-14AT',
'createTime': '01-20 10:53:27'
},
{
'materialQty': '0',
'materialModel': '20/30',
'materialCode': 'MT-14AT',
'createTime': '01-20 10:08:29'
},
{
'materialQty': '0',
'materialModel': '20/30',
'materialCode': 'MT-14AT',
'createTime': '01-20 09:23:01'
},
{
'materialQty': '0',
'materialModel': '20/30',
'materialCode': 'MT-14AT',
'createTime': '01-20 09:00:53'
},
{
'materialQty': '252',
'materialModel': null,
'materialCode': null,
'createTime': '01-14 13:23:47'
}
],
'lastWorkOrderList': [
{
'pointCode': 'HCHJ02',
'pointName': '缓存货架02',
'materialCode': 'ML-70BD',
'materialModel': '20/10',
'materialSpec': 'BB',
'materialQty': '252',
'vehicleCode': '0014',
'createTime': '2024-03-29 09:56:15'
},
{
'pointCode': 'HCHJ03',
'pointName': '缓存货架03',
'materialCode': 'ML-70BD',
'materialModel': '20/10',
'materialSpec': 'BB',
'materialQty': '252',
'vehicleCode': '1045',
'createTime': '2024-03-30 13:33:53'
},
{
'pointCode': 'HCHJ04',
'pointName': '缓存货架04',
'materialCode': 'ML-70BD',
'materialModel': '20/10',
'materialSpec': 'BB',
'materialQty': '252',
'vehicleCode': '1089',
'createTime': '2024-03-30 13:41:56'
}
]
}
return res
}

3363
src/config/mork2.js
View File

File diff suppressed because it is too large Load Diff

6
src/main.js
View File

@@ -7,16 +7,12 @@ import './style/reset.css'
import './style/layout.styl'
import * as echarts from 'echarts'
import 'default-passive-events'
import VueParticles from 'vue-particles'
import scroll from 'vue-seamless-scroll'
import {Message, Select, Option} from 'element-ui'
import {Message} from 'element-ui'
Vue.prototype.$echarts = echarts
Vue.use(VueParticles)
Vue.use(scroll)
Vue.prototype.$message = Message
Vue.use(Select)
Vue.use(Option)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({

284
src/pages/modules/home/devicepop.vue
View File

@@ -3,290 +3,68 @@
<div class="popup_bg">
<div class="popup_block">
<div class="pop_header">
<div v-show="type === 'yaossx' || type === 'yao' || type === 'hljdjw' || type === 'rgfjc' || type === 'hchj' || type === 'klhw'" class="pop_name">{{data.pointName}}</div>
<div v-show="type === 'yj' || type === 'jxs' || type === 'yjmdw' || type === 'fjmdw' || type === 'yjxlw' || type === 'yjslw' || type === 'hlj'" class="pop_name">{{data.device_code}}</div>
<div class="pop_name">{{data.device_code}}</div>
<div v-show="type === 'yaossx'" class="pop_status">
<div class="pop_status_dot" :class="['gray', 'yellow', 'green', 'red'][Number(data.stat)]"></div>
<div class="pop_status_text fgray">{{ ['停机', '暂停', '运行', '故障'][Number(data.stat)] }}</div>
</div>
<div v-show="type === 'yj' || type === 'jxs' || type === 'hlj' || type === 'yjmdw' || type === 'fjmdw' || type === 'yjxlw' || type === 'yjslw'" class="pop_status">
<div class="pop_status_dot" :class="['gray', 'yellow', 'green', 'red'][Number(data.device_status)]"></div>
<div class="pop_status_text fgray">{{ ['停机', '暂停', '运行', '故障'][Number(data.device_status)] }}</div>
</div>
<div v-show="type === 'rgfjc'" class="pop_status">
<div class="pop_status_text fgray">{{ ['无货', '有货'][Number(data.pointStatus) - 1] }}</div>
</div>
<div v-show="type === 'hchj'" class="pop_status">
<div class="pop_status_text fgray">{{ ['空位', '空盘', '有料'][Number(data.pointStatus) - 1] }}</div>
</div>
<div v-show="type === 'klhw'" class="pop_status">
<div class="pop_status_text fgray">{{ ['空位', '空盅', '满盅'][Number(data.pointStatus) - 1] }}</div>
</div>
<div v-show="type === 'hljdjw'" class="pop_status">
<div class="pop_status_dot" :class="['gray', 'yellow', 'green', 'red'][Number(data.pointStatus)]"></div>
<div class="pop_status_text fgray">{{ ['停机', '暂停', '运行', '故障'][Number(data.pointStatus)] }}</div>
<div class="pop_status_dot" :class="'status_colr_' + data.mode"></div>
<div class="pop_status_text fgray">{{ ['关机', '待机', '生产中', '故障'][Number(data.mode)] }}</div>
</div>
</div>
<div v-show="type === 'yaossx'" class="pop_content">
<div v-show="type === 'xlw'" class="pop_content">
<div class="popup_item">
<div class="popup_label">当日已输送托盘数</div>
<div class="popup_val">{{ data.deliveredPalletNum }}</div>
<div class="popup_label">光电开光信号</div>
<div class="popup_val">{{ data.move }}</div>
</div>
<div class="popup_item">
<div class="popup_label">当日已输送数量</div>
<div class="popup_val">{{ data.deliveredMaterialNum }}</div>
<div class="popup_label">当前砖块数量</div>
<div class="popup_val">{{ data.qty }}</div>
</div>
<div class="popup_item">
<div class="popup_label">当前托盘数</div>
<div class="popup_val">{{ data.palletNum }}</div>
<div class="popup_label">条码</div>
<div class="popup_val">{{ data.barcode }}</div>
</div>
<div class="popup_item">
<div class="popup_label">当前物料数量</div>
<div class="popup_val">{{ data.materialNum }}</div>
</div>
</div>
<div v-show="type === 'yao'" class="pop_content">
<div class="popup_item">
<div class="popup_label">工作时间</div>
<div class="popup_val">{{ data.workTime }}</div>
</div>
<div class="popup_item">
<div class="popup_label">窑内托盘数</div>
<div class="popup_val">{{ data.palletNum }}</div>
</div>
<div class="popup_item">
<div class="popup_label">窑内物料数量</div>
<div class="popup_val">{{ data.materialNum }}</div>
</div>
<div class="popup_item">
<div class="popup_label">当日已生产</div>
<div class="popup_val">{{ data.produceNum }}</div>
</div>
<div class="popup_item">
<div class="popup_label">物料说明</div>
<div class="popup_val">{{ data.materialInfos }}</div>
<div class="popup_label">重量</div>
<div class="popup_val">{{ data.weight }}</div>
</div>
</div>
<div v-show="type === 'yj'" class="pop_content">
<div class="popup_item">
<div class="popup_label">生产时间</div>
<div class="popup_val">{{ data.work_time }}</div>
<div class="popup_label">当前生产物料</div>
<div class="popup_val">{{ data.material }}</div>
</div>
<div class="popup_item">
<div class="popup_label">工单号</div>
<div class="popup_val">{{ data.order_No }}</div>
</div>
<div class="popup_item">
<div class="popup_label">当前已生产数量</div>
<div class="popup_val">{{ data.real_qty }}</div>
<div class="popup_val">{{ data.qty }}</div>
</div>
<div v-show="type === 'yj'" class="popup_item">
<div class="popup_item">
<div class="popup_label">当前已生产重量</div>
<div class="popup_val">{{ data.current_weight }}</div>
<div class="popup_val">{{ data.weight }}</div>
</div>
<div class="popup_item">
<div class="popup_label">故障</div>
<div class="popup_val">{{ data.error }}</div>
<div class="popup_label">当前已生产合格数</div>
<div class="popup_val">{{ data.qualified }}</div>
</div>
<div class="popup_item">
<div class="popup_label">产品牌号</div>
<div class="popup_val">{{ data.materialCode }}</div>
</div>
<div class="popup_item">
<div class="popup_label">产品型号</div>
<div class="popup_val">{{ data.materialModel }}</div>
</div>
</div>
<div v-show="type === 'hlj'" class="pop_content">
<div class="popup_item">
<div class="popup_label">故障时间</div>
<div class="popup_val">{{ data.error_time }}</div>
</div>
<div class="popup_item">
<div class="popup_label">待机时间</div>
<div class="popup_val">{{ data.stand_time }}</div>
</div>
<div class="popup_item">
<div class="popup_label">开机时间</div>
<div class="popup_val">{{ data.open_time }}</div>
</div>
<div class="popup_item">
<div class="popup_label">生产时间</div>
<div class="popup_val">{{ data.work_time }}</div>
</div>
<div class="popup_item">
<div class="popup_label">当前已生产数量</div>
<div class="popup_val">{{ data.real_qty }}</div>
</div>
<div v-show="type === 'yj'" class="popup_item">
<div class="popup_label">当前已生产重量</div>
<div class="popup_val">{{ data.current_weight }}</div>
</div>
<div class="popup_item">
<div class="popup_label">故障</div>
<div class="popup_val">{{ data.error }}</div>
<div class="popup_label">当前已生产不合格数</div>
<div class="popup_val">{{ data.unqualified }}</div>
</div>
</div>
<div v-show="type === 'jxs'" class="pop_content">
<div class="popup_item">
<div class="popup_label">故障时间</div>
<div class="popup_val">{{ data.error_time }}</div>
<div class="popup_label">当前分拣物料</div>
<div class="popup_val">{{ data.material }}</div>
</div>
<div class="popup_item">
<div class="popup_label">待机时间</div>
<div class="popup_val">{{ data.stand_time }}</div>
<div class="popup_label">工单号</div>
<div class="popup_val">{{ data.order_No }}</div>
</div>
<div class="popup_item">
<div class="popup_label">开机时间</div>
<div class="popup_val">{{ data.open_time }}</div>
</div>
<div class="popup_item">
<div class="popup_label">生产时间</div>
<div class="popup_val">{{ data.work_time }}</div>
</div>
<div class="popup_item">
<div class="popup_label">拆/码垛数量</div>
<div class="popup_val">{{ data.real_qty }}</div>
</div>
<div class="popup_item">
<div class="popup_label">故障</div>
<div class="popup_val">{{ data.error }}</div>
</div>
</div>
<div v-show="type === 'yjmdw'" class="pop_content">
<div class="popup_item">
<div class="popup_label">工作模式</div>
<div class="popup_val">{{ data.mode }}</div>
</div>
<div class="popup_item">
<div class="popup_label">光电开关信号</div>
<div class="popup_val">{{ data.move }}</div>
</div>
<div class="popup_item">
<div class="popup_label">报警信号</div>
<div class="popup_val">{{ data.error }}</div>
</div>
<div class="popup_item">
<div class="popup_label">码盘位当前码盘数量</div>
<div class="popup_val">{{ data.encoder_qty }}</div>
</div>
<div class="popup_item">
<div class="popup_label">条码</div>
<div class="popup_val">{{ data.barcode }}</div>
</div>
</div>
<div v-show="type === 'fjmdw'" class="pop_content">
<div class="popup_item">
<div class="popup_label">工作模式</div>
<div class="popup_val">{{ data.mode }}</div>
</div>
<div class="popup_item">
<div class="popup_label">光电开关信号</div>
<div class="popup_val">{{ data.move }}</div>
</div>
<div class="popup_item">
<div class="popup_label">条码</div>
<div class="popup_val">{{ data.barcode }}</div>
</div>
<div class="popup_item">
<div class="popup_label">产品牌号</div>
<div class="popup_val">{{ data.materialCode }}</div>
</div>
<div class="popup_item">
<div class="popup_label">产品型号</div>
<div class="popup_val">{{ data.materialModel }}</div>
</div>
</div>
<div v-show="type === 'yjxlw'" class="pop_content">
<div class="popup_item">
<div class="popup_label">工作模式</div>
<div class="popup_val">{{ data.mode }}</div>
</div>
<div class="popup_item">
<div class="popup_label">光电开关信号</div>
<div class="popup_val">{{ data.move }}</div>
</div>
<div class="popup_item">
<div class="popup_label">码盘位当前码盘数量</div>
<div class="popup_val">{{ data.encoder_qty }}</div>
</div>
<div class="popup_item">
<div class="popup_label">条码</div>
<div class="popup_val">{{ data.barcode }}</div>
</div>
</div>
<div v-show="type === 'yjslw'" class="pop_content">
<div class="popup_item">
<div class="popup_label">工作模式</div>
<div class="popup_val">{{ data.mode }}</div>
</div>
<div class="popup_item">
<div class="popup_label">光电开关信号</div>
<div class="popup_val">{{ data.move }}</div>
</div>
<div class="popup_item">
<div class="popup_label">条码</div>
<div class="popup_val">{{ data.barcode }}</div>
</div>
<div class="popup_item">
<div class="popup_label">产品牌号</div>
<div class="popup_val">{{ data.materialCode }}</div>
</div>
</div>
<div v-show="type === 'hljdjw'" class="pop_content">
<div class="popup_item">
<div class="popup_label">点位编码</div>
<div class="popup_val">{{ data.pointCode }}</div>
</div>
</div>
<div v-show="type === 'rgfjc'" class="pop_content">
<div class="popup_item">
<div class="popup_label">点位编码</div>
<div class="popup_val">{{ data.pointCode }}</div>
</div>
<div v-show="data.pointStatus === '3'" class="popup_item">
<div class="popup_label">产品牌号</div>
<div class="popup_val">{{ data.materialCode }}</div>
</div>
<div v-show="data.pointStatus === '3'" class="popup_item">
<div class="popup_label">产品型号</div>
<div class="popup_val">{{ data.materialModel }}</div>
</div>
</div>
<div v-show="type === 'hchj'" class="pop_content">
<div class="popup_item">
<div class="popup_label">点位编码</div>
<div class="popup_val">{{ data.pointCode }}</div>
</div>
<div v-show="data.pointStatus === '3'" class="popup_item">
<div class="popup_label">入库时间</div>
<div class="popup_val">{{ data.instorageTime }}</div>
</div>
<div v-show="data.pointStatus === '3'" class="popup_item">
<div class="popup_label">产品牌号</div>
<div class="popup_val">{{ data.materialCode }}</div>
</div>
<div v-show="data.pointStatus === '3'" class="popup_item">
<div class="popup_label">产品型号</div>
<div class="popup_val">{{ data.materialModel }}</div>
</div>
<div v-show="data.pointStatus === '3'" class="popup_item">
<div class="popup_label">产品数量</div>
<div class="popup_val">{{ data.materialQty }}</div>
</div>
</div>
<div v-show="type === 'klhw'" class="pop_content">
<div class="popup_item">
<div class="popup_label">点位编码</div>
<div class="popup_val">{{ data.pointCode }}</div>
</div>
<div v-show="data.pointStatus === '3'" class="popup_item">
<div class="popup_label">产品牌号</div>
<div class="popup_val">{{ data.materialCode }}</div>
</div>
<div v-show="data.pointStatus === '3'" class="popup_item">
<div class="popup_label">条码信息</div>
<div class="popup_val">{{ data.vehicleCode }}</div>
</div>
<div v-show="data.pointStatus === '3'" class="popup_item">
<div class="popup_label">入库时间</div>
<div class="popup_val">{{ data.instorageTime }}</div>
<div class="popup_label">拆垛数量</div>
<div class="popup_val">{{ data.qty }}</div>
</div>
</div>
</div>

812
src/pages/modules/home/index.vue
View File

File diff suppressed because it is too large Load Diff

185
src/pages/modules/home/workshop.vue
View File

@@ -1,19 +1,18 @@
<template>
<div class="center_wrapper">
<img src="../../../images/scene.png" width="1095" height="804" usemap="#image-map" @click.stop="closePop">
<div class="status_icon"></div>
<div class="status_icon" v-for="(e, i) in areaList" :key="i" :class="'status_colr_' + e.mode" :style="{left: e.coord.x + 'px', top: e.coord.y + 'px'}"></div>
<map name="image-map" id="map">
<area v-for="(e, i) in areaList" :key="i" :alt="e.device_code" :title="e.device_code" :coords="e.coords" :shape="e.shape" @click="showPop($event, e)">
</map>
<device-pop ref="pop" :type="pkObj.type" :data="pkObj"/>
<!-- <div v-show="pkId !== ''" ref="pointer" class="pop_pointer"></div> -->
</div>
</template>
<script>
import DevicePop from './devicepop.vue'
// import {deviceCondition, inOutKilnDetail, kilnDetail} from '@js/getData2.js'
import {deviceCondition} from '@js/mork2.js'
import {deviceCondition} from '@js/getData2.js'
// import {deviceCondition} from '@js/mork2.js'
export default {
name: 'workshop',
components: {
@@ -22,29 +21,76 @@ export default {
data () {
return {
areaList: [
{type: 'hlj', device_code: 'HNJ01', coords: '93,178,104,191', shape: 'rect'},
{type: 'hlj', device_code: 'HNJ02', coords: '701,136,683,121', shape: 'rect'},
{type: 'hlj', device_code: 'HNJ03', coords: '648,136,632,120', shape: 'rect'},
{type: 'hlj', device_code: 'HNJ04', coords: '621,137,602,120', shape: 'rect'}
{type: 'yj', device_code: 'YJ01', coords: '918,106,980,169', coord: {x: 932, y: 90}, shape: 'rect'},
{type: 'yj', device_code: 'YJ02', coords: '815,103,881,166', coord: {x: 832, y: 90}, shape: 'rect'},
{type: 'yj', device_code: 'YJ05', coords: '528,112,580,164', coord: {x: 551, y: 100}, shape: 'rect'},
{type: 'yj', device_code: 'YJ06', coords: '449,112,501,164', coord: {x: 474, y: 100}, shape: 'rect'},
{type: 'yj', device_code: 'YJ07', coords: '388,117,429,152', coord: {x: 405, y: 100}, shape: 'rect'},
{type: 'yj', device_code: 'YJ08', coords: '315,117,355,152', coord: {x: 333, y: 105}, shape: 'rect'},
{type: 'yj', device_code: 'YJ09', coords: '258,117,298,152', coord: {x: 275, y: 105}, shape: 'rect'},
{type: 'yj', device_code: 'YJ10', coords: '186,117,228,152', coord: {x: 202, y: 105}, shape: 'rect'},
{type: 'yj', device_code: 'YJ11', coords: '132,117,171,152', coord: {x: 146, y: 105}, shape: 'rect'},
{type: 'yj', device_code: 'YJ12', coords: '54,117,102,152', coord: {x: 72, y: 105}, shape: 'rect'},
{type: 'xlw', device_code: 'YJ01XLW01', coords: '992,188,1006,203', coord: {x: 992, y: 188}, shape: 'rect'},
{type: 'xlw', device_code: 'YJ01XLW02', coords: '955,188,969,204', coord: {x: 955, y: 188}, shape: 'rect'},
{type: 'xlw', device_code: 'YJ02XLW01', coords: '892,189,906,205', coord: {x: 892, y: 189}, shape: 'rect'},
{type: 'xlw', device_code: 'YJ02XLW02', coords: '856,189,869,205', coord: {x: 856, y: 189}, shape: 'rect'},
{type: 'xlw', device_code: 'YJ05XLW01', coords: '552,188,563,205', coord: {x: 552, y: 188}, shape: 'rect'},
{type: 'xlw', device_code: 'YJ05XLW02', coords: '527,191,538,205', coord: {x: 527, y: 191}, shape: 'rect'},
{type: 'xlw', device_code: 'YJ06XLW01', coords: '472,189,485,206', coord: {x: 472, y: 189}, shape: 'rect'},
{type: 'xlw', device_code: 'YJ06XLW02', coords: '497,191,509,206', coord: {x: 497, y: 191}, shape: 'rect'},
{type: 'xlw', device_code: 'YJ07XLW01', coords: '387,180,395,186', coord: {x: 387, y: 180}, shape: 'rect'},
{type: 'xlw', device_code: 'YJ07XLW02', coords: '386,192,393,206', coord: {x: 386, y: 192}, shape: 'rect'},
{type: 'xlw', device_code: 'YJ08XLW01', coords: '350,179,359,185', coord: {x: 350, y: 179}, shape: 'rect'},
{type: 'xlw', device_code: 'YJ08XLW02', coords: '348,193,356,207', coord: {x: 348, y: 193}, shape: 'rect'},
{type: 'xlw', device_code: 'YJ09XLW01', coords: '258,179,266,187', coord: {x: 258, y: 179}, shape: 'rect'},
{type: 'xlw', device_code: 'YJ09XLW02', coords: '256,192,264,206', coord: {x: 256, y: 192}, shape: 'rect'},
{type: 'xlw', device_code: 'YJ10XLW01', coords: '222,180,230,187', coord: {x: 222, y: 180}, shape: 'rect'},
{type: 'xlw', device_code: 'YJ10XLW02', coords: '218,194,227,205', coord: {x: 218, y: 194}, shape: 'rect'},
{type: 'xlw', device_code: 'YJ11XLW01', coords: '130,179,136,187', coord: {x: 130, y: 179}, shape: 'rect'},
{type: 'xlw', device_code: 'YJ11XLW02', coords: '126,194,133,205', coord: {x: 126, y: 194}, shape: 'rect'},
{type: 'xlw', device_code: 'YJ12XLW01', coords: '93,177,105,189', coord: {x: 93, y: 177}, shape: 'rect'},
{type: 'xlw', device_code: 'YJ12XLW02', coords: '89,194,98,206', coord: {x: 89, y: 194}, shape: 'rect'},
{type: 'jxs', device_code: 'FJCDJXS01', coords: '841,482,848,499', coord: {x: 841, y: 470}, shape: 'rect'},
{type: 'jxs', device_code: 'FJCDJXS02', coords: '735,481,743,499', coord: {x: 735, y: 470}, shape: 'rect'},
{type: 'jxs', device_code: 'FJCDJXS03', coords: '623,481,631,498', coord: {x: 623, y: 470}, shape: 'rect'},
{type: 'jxs', device_code: 'FJCDJXS04', coords: '520,481,527,500', coord: {x: 520, y: 470}, shape: 'rect'},
{type: 'xlw', device_code: 'FJ01CDW01', coords: '858,485,876,502', coord: {x: 858, y: 485}, shape: 'rect'},
{type: 'xlw', device_code: 'FJ01CDW02', coords: '811,488,828,505', coord: {x: 811, y: 488}, shape: 'rect'},
{type: 'xlw', device_code: 'FJ01MDW01', coords: '879,572,893,582', coord: {x: 879, y: 572}, shape: 'rect'},
{type: 'xlw', device_code: 'FJ01MDW02', coords: '826,571,842,580', coord: {x: 826, y: 571}, shape: 'rect'},
{type: 'xlw', device_code: 'FJ02CDW01', coords: '754,487,770,502', coord: {x: 754, y: 487}, shape: 'rect'},
{type: 'xlw', device_code: 'FJ02CDW02', coords: '708,485,723,503', coord: {x: 708, y: 485}, shape: 'rect'},
{type: 'xlw', device_code: 'FJ02MDW01', coords: '767,571,781,581', coord: {x: 767, y: 571}, shape: 'rect'},
{type: 'xlw', device_code: 'FJ02MDW02', coords: '717,572,733,582', coord: {x: 717, y: 572}, shape: 'rect'},
{type: 'xlw', device_code: 'FJ03CDW01', coords: '644,486,662,504', coord: {x: 644, y: 486}, shape: 'rect'},
{type: 'xlw', device_code: 'FJ03CDW02', coords: '595,485,661,505', coord: {x: 595, y: 485}, shape: 'rect'},
{type: 'xlw', device_code: 'FJ03MDW01', coords: '650,570,663,579', coord: {x: 650, y: 570}, shape: 'rect'},
{type: 'xlw', device_code: 'FJ03MDW02', coords: '600,571,614,579', coord: {x: 600, y: 571}, shape: 'rect'},
{type: 'xlw', device_code: 'FJ04CDW01', coords: '539,483,556,506', coord: {x: 539, y: 483}, shape: 'rect'},
{type: 'xlw', device_code: 'FJ04CDW02', coords: '491,487,506,506', coord: {x: 491, y: 487}, shape: 'rect'},
{type: 'xlw', device_code: 'FJ04MDW01', coords: '540,571,553,580', coord: {x: 540, y: 571}, shape: 'rect'},
{type: 'xlw', device_code: 'FJ04MDW02', coords: '489,570,504,580', coord: {x: 489, y: 570}, shape: 'rect'}
],
interTime: this.$store.getters.setTime,
wsTimer: null,
MixMachineList: [], // 混碾机
PressMachineList: [], // 压机
StackingPositionList: [], // 压机下料位
SortingPositionList: [], // 分拣拆垛机械手
SortAndPalletizingList: [], // 分拣对接位
allData: [],
pkId: '',
pkObj: {}
}
},
created () {
this._deviceCondition()
// this.refresh()
this.refresh()
},
beforeDestroy () {
clearInterval(this.wsTimer)
this.wsTimer = null
},
destroyed () {
clearInterval(this.wsTimer)
this.wsTimer = null
if (this.wsTimer !== null) {
clearInterval(this.wsTimer)
this.wsTimer = null
}
},
methods: {
showPop ($event, e) {
@@ -56,28 +102,40 @@ export default {
} else {
this.$refs.pop.$el.style.display = 'none'
}
if (e.type === 'hlj') {
this.MixMachineList.map(el => {
if (el.device_code === e.device_code) {
this.pkObj = el
this.pkObj.type = e.type
}
})
}
this.allData.map(el => {
if (el.device_code === e.device_code) {
this.pkObj = el
this.pkObj.type = e.type
}
})
},
closePop () {
this.$refs.pop.$el.style.display = 'none'
this.pkId = ''
},
refresh () {
this._deviceCondition()
this.wsTimer = setInterval(() => {
this._deviceCondition()
}, this.interTime)
},
async _deviceCondition () {
let res = await deviceCondition()
this.MixMachineList = [...res.MixMachineList]
console.log(this.MixMachineList)
this.PressMachineList = [...res.PressMachineList]
this.StackingPositionList = [...res.StackingPositionList]
this.SortingPositionList = [...res.SortingPositionList]
this.SortAndPalletizingList = [...res.SortAndPalletizingList]
this.allData = [...this.PressMachineList, ...this.StackingPositionList, ...this.SortingPositionList, ...this.SortAndPalletizingList]
this.pushArr(this.areaList, this.allData)
},
pushArr (arr1, arr2) {
for (let i = 0; i < arr1.length; i++) {
for (let j = 0; j < arr2.length; j++) {
if (arr1[i].device_code === arr2[j].device_code) {
this.$set(arr1[i], 'mode', arr2[j].mode)
}
}
}
}
}
}
@@ -88,59 +146,60 @@ export default {
position relative
width 1095px
height 804px
.pop_pointer
position: fixed;
z-index 101;
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #00c4ff, 0 0 20px #00c4ff, 0 0 25px #00c4ff;
&::after
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #00c4ff;
border-radius: 50%;
box-shadow: 0 0 5px #00c4ff;
animation: glow 2s infinite
@keyframes glow {
0% {
transform: scale(0.5);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
25% {
transform: scale(1);
opacity: 0.75;
}
50% {
transform: scale(1.5);
opacity: 0.5;
}
75% {
transform: scale(2);
opacity: 0.25;
}
100% {
transform: scale(2.5);
opacity: 0;
}
}
.status_icon
position absolute
z-index 1
left 93px
top 178px
width: 10px;
height: 10px;
background-color: #fff;
width: 9px;
height: 9px;
border-radius: 50%;
box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #00c4ff, 0 0 20px #00c4ff, 0 0 25px #00c4ff;
&::after
margin-right: 10px;
&::before, &::after
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #00c4ff;
position: absolute;
left: 0;
top: 0;
border-radius: 50%;
box-shadow: 0 0 5px #00c4ff;
animation: glow 2s infinite
animation: glow 1.2s ease-out 0s infinite
.status_colr_0
background-color #B4C9EF
&::before, &::after
border: 1px solid rgba(180, 201, 239, 1)
.status_colr_1
background-color #1980EA
&::before, &::after
border: 1px solid rgba(25, 128, 234, 1)
.status_colr_2
background-color #67D470
&::before, &::after
border: 1px solid rgba(103, 212, 112, 1)
.status_colr_3
background-color #EF5252
&::before, &::after
border: 1px solid rgba(239, 82, 82, 1)
map
position absolute
top: 0;

20
src/style/layout.styl
View File

@@ -1,11 +1,15 @@
@import 'mixin.styl'
@import 'iconfont.styl'
.state_0
background center / 100% 100% url('../images/state_0.png') no-repeat
.state_1
background center / 100% 100% url('../images/state_1.png') no-repeat
.state_2
background center / 100% 100% url('../images/state_2.png') no-repeat
.state_3
background center / 100% 100% url('../images/state_3.png') no-repeat
.status_colr_0
background-color #B4C9EF
box-shadow: 0px 0px 3px 3px rgba(180, 201, 239, 20%)
.status_colr_1
background-color #1980EA
box-shadow: 0px 0px 3px 3px rgba(25, 128, 234, 20%)
.status_colr_2
background-color #67D470
box-shadow: 0px 0px 3px 3px rgba(103, 212, 112, 20%)
.status_colr_3
background-color #EF5252
box-shadow: 0px 0px 3px 3px rgba(239, 82, 82, 20%)

11
src/style/mixin.styl
View File

@@ -5,17 +5,6 @@ $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

43
src/style/reset.css
View File

@@ -125,19 +125,6 @@ div, p {
user-select:none;
}
.flexcenter {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.flexbetween {
display: flex;
align-items: center;
justify-content: space-between;
}
.pointer {
cursor: pointer;
}
@@ -156,4 +143,34 @@ div, p {
.flexwrap {
flex-wrap: wrap
}
.flexcol {
flex-direction: column;
}
.flexstart {
align-items: flex-start !important;
}
.flexend {
align-items: flex-end !important;
}
.jcflexstart {
justify-content: flex-start !important;
}
.jcflexend {
justify-content: flex-end !important;
}
.jccenter {
justify-content: center !important;
}
.flexwrap {
flex-wrap: wrap
}
.allwidth {
width: 100%
}
.zd-row {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}