1155 lines
36 KiB
Vue
1155 lines
36 KiB
Vue
<template>
|
||
<section class="bg">
|
||
<!-- <t-header title="顺安大屏监控-生产统计">
|
||
</t-header> -->
|
||
<t-header title="顺安大屏监控——仓储监控">
|
||
<div class="pages">
|
||
<router-link to="/LogisticsProcess">物流工艺</router-link>
|
||
<router-link to="/ProdCount">生产统计</router-link>
|
||
<!-- <router-link to="/setup">设备监控</router-link> -->
|
||
</div>
|
||
</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" 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" v-for="(item, i) in e.data" :key="i">{{item.key}}：{{item.value}}</p>
|
||
<!-- <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" v-for="(item, i) in e.data" :key="i">{{item.key}}：{{item.value}}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<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" v-for="(item, i) in e.data" :key="i">{{item.key}}：{{item.value}}</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" v-for="(item, i) in e.data" :key="i">{{item.key}}：{{item.value}}</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" v-for="(item, i) in e.data" :key="i">{{item.key}}：{{item.value}}</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" v-for="(item, i) in e.data" :key="i">{{item.key}}：{{item.value}}</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" v-for="(item, i) in e.data" :key="i">{{item.key}}：{{item.value}}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="corridor_2">成型暂存监控</div>
|
||
<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" v-for="(item, i) in e.data" :key="i">{{item.key}}：{{item.value}}</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" v-for="(item, i) in e.data" :key="i">{{item.key}}：{{item.value}}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="yard-right">
|
||
<div class="corridor_2">出窑暂存监控</div>
|
||
<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" v-for="(item, i) in e.data" :key="i">{{item.key}}：{{item.value}}</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" v-for="(item, i) in e.data" :key="i">{{item.key}}：{{item.value}}</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" v-for="(item, i) in e.data" :key="i">{{item.key}}：{{item.value}}</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" v-for="(item, i) in e.data" :key="i">{{item.key}}：{{item.value}}</p>
|
||
</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.standStatusName}}</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,
|
||
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: [],
|
||
array1: [],
|
||
array2: [],
|
||
array3: [],
|
||
group01: [],
|
||
group02: [],
|
||
group03: [],
|
||
code1: '',
|
||
flg: ''
|
||
}
|
||
},
|
||
computed: {
|
||
classOption () {
|
||
return {
|
||
step: 0.4, // 数值越大速度滚动越快
|
||
limitMoveNum: 7, // 开始无缝滚动的数据量 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为静置超时
|
||
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.array1.map(el => {
|
||
if (el.standStatus === '1') {
|
||
el.standStatusName = '静置中'
|
||
}
|
||
if (el.standStatus === '2') {
|
||
el.standStatusName = '静置完成'
|
||
}
|
||
if (el.standStatus === '3') {
|
||
el.standStatusName = '强制静置完成'
|
||
}
|
||
if (el.standStatus === '4') {
|
||
el.standStatusName = '静置超时'
|
||
}
|
||
if (el.standStatus === '5') {
|
||
el.standStatusName = '强制静置超时'
|
||
}
|
||
})
|
||
this.array2 = res.frontWarehouseStock
|
||
this.array3 = res.backWarehouseStock
|
||
this.group01 = res.standMonitor
|
||
this.group02 = res.frontWarehouseMonitor
|
||
this.group03 = res.backWarehouseMonitor
|
||
console.log(this.group01, 666)
|
||
// 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})
|
||
// }
|
||
// }
|
||
},
|
||
// 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 = ''
|
||
},
|
||
showInfo (e) {
|
||
this.flg = this.flg === e.storageLocation ? '' : e.storageLocation
|
||
},
|
||
closeInfo () {
|
||
this.flg = ''
|
||
}
|
||
}
|
||
}
|
||
</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
|
||
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
|
||
.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 13%
|
||
text-align center
|
||
line-height 32px
|
||
font-size 12px
|
||
color rgba(255,255,255,0.60)
|
||
// float left
|
||
&:nth-child(2)
|
||
width 22%
|
||
text-align center
|
||
&:nth-child(3)
|
||
width 22%
|
||
text-align center
|
||
&:nth-child(6)
|
||
width 15%
|
||
.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 13%
|
||
padding 0 2px
|
||
font-size 12px
|
||
transform scale(0.7)
|
||
text-align center
|
||
line-height 38px
|
||
box-sizing border-box
|
||
// float left
|
||
&:nth-child(2)
|
||
width 22%
|
||
line-height 28px
|
||
// transform scale(0.6)
|
||
white-space:normal
|
||
text-align center
|
||
&:nth-child(3)
|
||
width 22%
|
||
line-height 28px
|
||
// transform scale(0.6)
|
||
white-space:normal
|
||
text-align center
|
||
&:nth-child(6)
|
||
width 18%
|
||
.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%
|
||
.pages
|
||
position absolute
|
||
left .2509rem
|
||
top 11%
|
||
_wh(20%, .4rem)
|
||
_fj(flex-start)
|
||
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%)
|
||
+a
|
||
margin-left .2rem
|
||
.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 91px
|
||
border 1px solid #32c5ff
|
||
border-radius 8px
|
||
.atext
|
||
_font(12px, 18px, #fff,,)
|
||
transform scale(0.8)
|
||
white-space:normal
|
||
text-align center
|
||
height 35px
|
||
.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
|
||
.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 310px
|
||
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>
|