<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>
