210 lines
5.5 KiB
Vue
210 lines
5.5 KiB
Vue
<template>
|
|
<view class="container">
|
|
<my-header></my-header>
|
|
<view class="left_bg"></view>
|
|
<view class="right_bg"></view>
|
|
<view class="button_bg"></view>
|
|
<div class="n_body_container">
|
|
<div class="n_left_wraper">
|
|
<div class="w_wraper">
|
|
<div class="item_wraper">
|
|
<div class="title_wraper">
|
|
<p>原料库存</p>
|
|
</div>
|
|
<div class="content_wraper content_wraper_2">
|
|
<div class="pie_wraper">
|
|
<div id="home_1" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item_wraper">
|
|
<div class="title_wraper">
|
|
<p>当日出入</p>
|
|
</div>
|
|
<div class="content_wraper">
|
|
<div class="w_wraper">
|
|
<div id="home_2" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item_wraper">
|
|
<div class="title_wraper">
|
|
<p>历史分析</p>
|
|
</div>
|
|
<div class="content_wraper">
|
|
<div class="w_wraper">
|
|
<div id="home_3" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="n-center_wraper">
|
|
<div class="w_wraper">
|
|
<div class="item_wraper item_wraper_1">
|
|
<div class="title_wraper title_wraper_1">
|
|
<p>设备监控</p>
|
|
</div>
|
|
<div class="content_wraper content_wraper_3">
|
|
<div class="agv_wrap">
|
|
<div class="agv_item" v-for="(e , i) in agvList" :key="'agv' + i">
|
|
<div class="agv_left">
|
|
<div class="agv_img"></div>
|
|
<p class="p1">{{ e.device_name }}</p>
|
|
</div>
|
|
<div class="agv_info">
|
|
<div class="agv_txt">
|
|
<p class="p2">任务号</p>
|
|
<p class="p3">{{ e.task_code }}</p>
|
|
</div>
|
|
<div class="agv_txt">
|
|
<p class="p2">电量</p>
|
|
<p class="p3">{{ e.battery_level }}</p>
|
|
</div>
|
|
<div class="agv_txt">
|
|
<p class="p2">状态</p>
|
|
<p class="p3">{{ e.status }}</p>
|
|
</div>
|
|
<div class="agv_txt">
|
|
<p class="p2">提示信息</p>
|
|
<p class="p3">{{ e.message }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="agv_wrap rgv_wrap">
|
|
<div class="agv_item rgv_item" v-for="(e , i) in rgvList" :key="'rgv' + i">
|
|
<div class="agv_left rgv_left">
|
|
<div class="agv_img rgv_img"></div>
|
|
<p class="p1">{{ e.device_name }}</p>
|
|
</div>
|
|
<div class="rgv_info">
|
|
<div class="agv_txt rgv_txt">
|
|
<p class="p2">当前位置</p>
|
|
<p class="p3">{{ e.current_loc }}</p>
|
|
</div>
|
|
<div class="agv_txt rgv_txt">
|
|
<p class="p2">目标位置
|
|
</p>
|
|
<p class="p3">{{ e.target_loc }}</p>
|
|
</div>
|
|
<div class="agv_txt rgv_txt">
|
|
<p class="p2">电量</p>
|
|
<p class="p3">{{ e.battery_level }}</p>
|
|
</div>
|
|
<div class="agv_txt rgv_txt">
|
|
<p class="p2">状态</p>
|
|
<p class="p3">{{ e.status }}</p>
|
|
</div>
|
|
<div class="agv_txt rgv_txt">
|
|
<p class="p2">提示信息</p>
|
|
<p class="p3">{{ e.message }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item_wraper">
|
|
<div class="title_wraper title_wraper_1">
|
|
<p>当日搬运任务</p>
|
|
</div>
|
|
<div class="content_wraper" style="padding: 0">
|
|
<div class="scroll_wrap">
|
|
<ul class="scroll_tab_1">
|
|
<li>创建时间</li>
|
|
<li>设备</li>
|
|
<li>起点位置</li>
|
|
<li>终点位置</li>
|
|
<li>任务号</li>
|
|
<li>任务状态</li>
|
|
</ul>
|
|
<div class="scroll_container_1">
|
|
<vue-seamless-scroll :data="taskList" :class-option="defaultOption1">
|
|
<ul class="scroll-ul_1">
|
|
<li v-for="(e, i) in taskList" :key="i">
|
|
<div class="scroll-ul_1_div">{{e.create_time}}</div>
|
|
<div class="scroll-ul_1_div">{{e.carno}}</div>
|
|
<!-- <div class="scroll-ul_1_div">
|
|
<span class="state" :class="'state_' + e.status"></span>
|
|
<p class="state_name">{{['关机', '待机', '生产中', '故障'][Number(e.status)]}}</p>
|
|
</div> -->
|
|
<div class="scroll-ul_1_div">{{e.start_point_code}}</div>
|
|
<div class="scroll-ul_1_div">{{e.next_point_code}}</div>
|
|
<div class="scroll-ul_1_div">{{e.task_code}}</div>
|
|
<div class="scroll-ul_1_div">{{e.task_status}}</div>
|
|
</li>
|
|
</ul>
|
|
</vue-seamless-scroll>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="n_right_wraper">
|
|
<div class="w_wraper">
|
|
<div class="item_wraper">
|
|
<div class="title_wraper">
|
|
<p>当日生产统计</p>
|
|
</div>
|
|
<div class="content_wraper">
|
|
<div class="w_wraper">
|
|
<div id="home_4" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item_wraper item_wraper_1">
|
|
<div class="title_wraper">
|
|
<p>当日车间上下料</p>
|
|
</div>
|
|
<div class="content_wraper">
|
|
<div class="w_wraper">
|
|
<div id="home_5" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import MyHeader from '@/components/MyHeader.vue'
|
|
export default {
|
|
components: {
|
|
MyHeader
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.left_bg
|
|
position absolute
|
|
left 0
|
|
top 0
|
|
width 17px
|
|
height 100%
|
|
background center / 100% auto url('../static/image/bg-left.png') no-repeat
|
|
.right_bg
|
|
position absolute
|
|
right 0
|
|
top 0
|
|
width 17px
|
|
height 100%
|
|
background center / 100% auto url('../static/image/bg-right.png') no-repeat
|
|
.button_bg
|
|
position absolute
|
|
left 0
|
|
bottom 0
|
|
width 100%
|
|
height 20px
|
|
background center center / auto 100% url('../static/image/bg-button.png') no-repeat
|
|
</style>
|