change
This commit is contained in:
@@ -1,232 +1,215 @@
|
||||
<template>
|
||||
<section class="bg">
|
||||
<header>
|
||||
<p>海亮铜管智能车间设备监控中心</p>
|
||||
<div class="data_box clearfix">
|
||||
<div class="date_item date">{{date}}</div>
|
||||
<div class="date_item week">{{week}}</div>
|
||||
<div class="date_item time 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 class="container">
|
||||
<div class="left_wrap">
|
||||
<div class="item_wrap">
|
||||
<div class="item_tip">
|
||||
<div class="item_tip_left">设备实时状态</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container">
|
||||
<div class="left_wrap">
|
||||
<div class="item_wrap">
|
||||
<div class="item_tip">
|
||||
<div class="item_tip_left">设备实时状态</div>
|
||||
<div class="item_5_l">
|
||||
<div class="item_content_0">
|
||||
<div id="echart_d01" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
<div class="item_5_l">
|
||||
<div class="item_content_0">
|
||||
<div id="echart_d01" style="width: 100%; height: 100%"></div>
|
||||
<div class="total">
|
||||
<div v-if="totalNum">{{totalNum}}<span>台</span></div>
|
||||
</div>
|
||||
<div v-if="totalNum" class="total-desc">设备总数</div>
|
||||
</div>
|
||||
<div class="item_5_r">
|
||||
<div class="right_1_down_inner_3_i" v-for="(e, i) in arrR01" :key="i">
|
||||
<div class="right_1_down_inner_3_l">
|
||||
<span :style="{'background-color': e.color}"><i :style="{'background-color': e.color}"></i></span>
|
||||
<span>{{e.name}}</span>
|
||||
</div>
|
||||
<div class="total">
|
||||
<div v-if="totalNum">{{totalNum}}<span>台</span></div>
|
||||
</div>
|
||||
<div v-if="totalNum" class="total-desc">设备总数</div>
|
||||
</div>
|
||||
<div class="item_5_r">
|
||||
<div class="right_1_down_inner_3_i" v-for="(e, i) in arrR01" :key="i">
|
||||
<div class="right_1_down_inner_3_l">
|
||||
<span :style="{'background-color': e.color}"><i :style="{'background-color': e.color}"></i></span>
|
||||
<span>{{e.name}}</span>
|
||||
</div>
|
||||
<div class="right_1_down_inner_3_r">
|
||||
<span>{{e.value}}</span>
|
||||
<span>台</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_wrap">
|
||||
<div class="item_tip">
|
||||
<div class="item_tip_left">设备管理</div>
|
||||
</div>
|
||||
<div class="item_content_1">
|
||||
<div class="item_content_1_inner">
|
||||
<div class="item_content_1_inner_1">弯头工段</div>
|
||||
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
|
||||
<p class="item_content_1_inner_2_p1">OEE：</p>
|
||||
<p class="item_content_1_inner_2_p2">{{sbgl_jo1.oee}}</p>
|
||||
</div>
|
||||
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
|
||||
<p class="item_content_1_inner_2_p1">MIBF：</p>
|
||||
<p class="item_content_1_inner_2_p2">{{sbgl_jo1.MIBF}}h</p>
|
||||
</div>
|
||||
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
|
||||
<p class="item_content_1_inner_2_p1">MTTR：</p>
|
||||
<p class="item_content_1_inner_2_p2">{{sbgl_jo1.MTTR}}h</p>
|
||||
</div>
|
||||
<div class="item_content_1_inner_2">
|
||||
<p class="item_content_1_inner_2_p1 cred">报警：</p>
|
||||
<p class="item_content_1_inner_2_p2 cred">{{sbgl_jo1.err_times}}次</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_content_1_inner">
|
||||
<div class="item_content_1_inner_1">综合工段</div>
|
||||
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
|
||||
<p class="item_content_1_inner_2_p1">OEE：</p>
|
||||
<p class="item_content_1_inner_2_p2">{{sbgl_jo2.oee}}</p>
|
||||
</div>
|
||||
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
|
||||
<p class="item_content_1_inner_2_p1">MIBF：</p>
|
||||
<p class="item_content_1_inner_2_p2">{{sbgl_jo2.MIBF}}h</p>
|
||||
</div>
|
||||
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
|
||||
<p class="item_content_1_inner_2_p1">MTTR：</p>
|
||||
<p class="item_content_1_inner_2_p2">{{sbgl_jo2.MTTR}}h</p>
|
||||
</div>
|
||||
<div class="item_content_1_inner_2">
|
||||
<p class="item_content_1_inner_2_p1 cred">报警：</p>
|
||||
<p class="item_content_1_inner_2_p2 cred">{{sbgl_jo2.err_times}}次</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_content_1_inner">
|
||||
<div class="item_content_1_inner_1">成品工段</div>
|
||||
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
|
||||
<p class="item_content_1_inner_2_p1">OEE：</p>
|
||||
<p class="item_content_1_inner_2_p2">{{sbgl_jo3.oee}}</p>
|
||||
</div>
|
||||
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
|
||||
<p class="item_content_1_inner_2_p1">MIBF：</p>
|
||||
<p class="item_content_1_inner_2_p2">{{sbgl_jo3.MIBF}}h</p>
|
||||
</div>
|
||||
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
|
||||
<p class="item_content_1_inner_2_p1">MTTR：</p>
|
||||
<p class="item_content_1_inner_2_p2">{{sbgl_jo3.MTTR}}h</p>
|
||||
</div>
|
||||
<div class="item_content_1_inner_2">
|
||||
<p class="item_content_1_inner_2_p1 cred">报警：</p>
|
||||
<p class="item_content_1_inner_2_p2 cred">{{sbgl_jo3.err_times}}次</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_wrap">
|
||||
<div class="item_tip">
|
||||
<div class="item_tip_left">设备产能利用</div>
|
||||
</div>
|
||||
<div class="item_content_1">
|
||||
<div id="echart_d02" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center_wrap">
|
||||
<div class="item_wrap_1 inlblock">
|
||||
<div class="item_tip item_tip_01">
|
||||
<div class="item_tip_left">设备综合效率OEE&产能利用效率TEEP</div>
|
||||
</div>
|
||||
<div class="item_content_1">
|
||||
<div id="echart_d03" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_wrap_1 inlblock">
|
||||
<div class="item_tip item_tip_01">
|
||||
<div class="item_tip_left">运行设备大类产能比</div>
|
||||
</div>
|
||||
<div class="item_content_1">
|
||||
<div id="echart_d04" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_wrap_2 item_wrap_3">
|
||||
<div class="item_tip item_tip_2">
|
||||
<div class="item_tip_left">设备综合统计</div>
|
||||
</div>
|
||||
<div class="item_content_1">
|
||||
<div id="echart_d05" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_wrap_2">
|
||||
<div class="item_tip item_tip_2">
|
||||
<div class="item_tip_left">设备状态列表</div>
|
||||
</div>
|
||||
<div class="item_content_2">
|
||||
<div class="scroll_wrap">
|
||||
<ul class="scroll_tab_1">
|
||||
<li>设备编号</li>
|
||||
<li>设备名称</li>
|
||||
<li>设备大类</li>
|
||||
<li>设备状态</li>
|
||||
<!-- <li>产量</li> -->
|
||||
<li>开机时间</li>
|
||||
<li>关机时间</li>
|
||||
<!-- <li>生产日期</li> -->
|
||||
</ul>
|
||||
<div class="scroll_container_1 scroll_container_3" v-if="array1.length">
|
||||
<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">{{e.device_code}}</div>
|
||||
<div class="scroll-ul_1_div">{{e.device_name}}</div>
|
||||
<div class="scroll-ul_1_div">{{e.workprocedure_name}}</div>
|
||||
<div class="scroll-ul_1_div scroll-ul_1_div4"><span :style="{'background-color': e.color}"></span><i>{{e.device_status}}</i></div>
|
||||
<!-- <div class="scroll-ul_1_div">{{e.product_qty}}</div> -->
|
||||
<div class="scroll-ul_1_div">{{e.start_time}}</div>
|
||||
<div class="scroll-ul_1_div">{{e.end_time}}</div>
|
||||
<!-- <div class="scroll-ul_1_div">{{e.product_time}}</div> -->
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
<div class="right_1_down_inner_3_r">
|
||||
<span>{{e.value}}</span>
|
||||
<span>台</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right_wrap">
|
||||
<div class="item_wrap">
|
||||
<div class="item_tip">
|
||||
<div class="item_tip_left">设备TOP10故障次数</div>
|
||||
</div>
|
||||
<div class="item_content_1">
|
||||
<div id="echart_d08" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
<div class="item_wrap">
|
||||
<div class="item_tip">
|
||||
<div class="item_tip_left">设备管理</div>
|
||||
</div>
|
||||
<div class="item_wrap">
|
||||
<div class="item_tip">
|
||||
<div class="item_tip_left">设备报警信息</div>
|
||||
<div class="item_content_1">
|
||||
<div class="item_content_1_inner">
|
||||
<div class="item_content_1_inner_1">弯头工段</div>
|
||||
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
|
||||
<p class="item_content_1_inner_2_p1">OEE：</p>
|
||||
<p class="item_content_1_inner_2_p2">{{sbgl_jo1.oee}}</p>
|
||||
</div>
|
||||
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
|
||||
<p class="item_content_1_inner_2_p1">MIBF：</p>
|
||||
<p class="item_content_1_inner_2_p2">{{sbgl_jo1.MIBF}}h</p>
|
||||
</div>
|
||||
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
|
||||
<p class="item_content_1_inner_2_p1">MTTR：</p>
|
||||
<p class="item_content_1_inner_2_p2">{{sbgl_jo1.MTTR}}h</p>
|
||||
</div>
|
||||
<div class="item_content_1_inner_2">
|
||||
<p class="item_content_1_inner_2_p1 cred">报警：</p>
|
||||
<p class="item_content_1_inner_2_p2 cred">{{sbgl_jo1.err_times}}次</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_content_4">
|
||||
<div class="scroll_wrap">
|
||||
<ul class="scroll_tab_2">
|
||||
<li>编号</li>
|
||||
<li>名称</li>
|
||||
<li>报警原因</li>
|
||||
<li>报警时间</li>
|
||||
</ul>
|
||||
<div class="scroll_container_2">
|
||||
<vue-seamless-scroll :data="array2" :class-option="defaultOption2">
|
||||
<ul class="scroll-ul_2">
|
||||
<li v-for="(e, i) in array2" :key="i">
|
||||
<div class="scroll-ul_2_div">{{e.device_code}}</div>
|
||||
<div class="scroll-ul_2_div">{{e.device_name}}</div>
|
||||
<div class="scroll-ul_2_div">{{e.err_name}}</div>
|
||||
<div class="scroll-ul_2_div">{{e.start_time}}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
<div class="item_content_1_inner">
|
||||
<div class="item_content_1_inner_1">综合工段</div>
|
||||
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
|
||||
<p class="item_content_1_inner_2_p1">OEE：</p>
|
||||
<p class="item_content_1_inner_2_p2">{{sbgl_jo2.oee}}</p>
|
||||
</div>
|
||||
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
|
||||
<p class="item_content_1_inner_2_p1">MIBF：</p>
|
||||
<p class="item_content_1_inner_2_p2">{{sbgl_jo2.MIBF}}h</p>
|
||||
</div>
|
||||
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
|
||||
<p class="item_content_1_inner_2_p1">MTTR：</p>
|
||||
<p class="item_content_1_inner_2_p2">{{sbgl_jo2.MTTR}}h</p>
|
||||
</div>
|
||||
<div class="item_content_1_inner_2">
|
||||
<p class="item_content_1_inner_2_p1 cred">报警：</p>
|
||||
<p class="item_content_1_inner_2_p2 cred">{{sbgl_jo2.err_times}}次</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_content_1_inner">
|
||||
<div class="item_content_1_inner_1">成品工段</div>
|
||||
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
|
||||
<p class="item_content_1_inner_2_p1">OEE：</p>
|
||||
<p class="item_content_1_inner_2_p2">{{sbgl_jo3.oee}}</p>
|
||||
</div>
|
||||
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
|
||||
<p class="item_content_1_inner_2_p1">MIBF：</p>
|
||||
<p class="item_content_1_inner_2_p2">{{sbgl_jo3.MIBF}}h</p>
|
||||
</div>
|
||||
<div class="item_content_1_inner_2 item_content_1_inner_2_bg">
|
||||
<p class="item_content_1_inner_2_p1">MTTR：</p>
|
||||
<p class="item_content_1_inner_2_p2">{{sbgl_jo3.MTTR}}h</p>
|
||||
</div>
|
||||
<div class="item_content_1_inner_2">
|
||||
<p class="item_content_1_inner_2_p1 cred">报警：</p>
|
||||
<p class="item_content_1_inner_2_p2 cred">{{sbgl_jo3.err_times}}次</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_wrap">
|
||||
<div class="item_tip">
|
||||
<div class="item_tip_left">近30天设备故障统计</div>
|
||||
</div>
|
||||
<!-- <div class="item_content_5">
|
||||
<div id="echart_d4" style="width: 100%; height: 100%"></div>
|
||||
</div> -->
|
||||
<div class="item_content_1">
|
||||
<div id="echart_d10" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
<div class="item_wrap">
|
||||
<div class="item_tip">
|
||||
<div class="item_tip_left">设备产能利用</div>
|
||||
</div>
|
||||
<div class="item_content_1">
|
||||
<div id="echart_d02" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center_wrap">
|
||||
<div class="item_wrap_1 inlblock">
|
||||
<div class="item_tip item_tip_01">
|
||||
<div class="item_tip_left">设备综合效率OEE&产能利用效率TEEP</div>
|
||||
</div>
|
||||
<div class="item_content_1">
|
||||
<div id="echart_d03" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_wrap_1 inlblock">
|
||||
<div class="item_tip item_tip_01">
|
||||
<div class="item_tip_left">运行设备大类产能比</div>
|
||||
</div>
|
||||
<div class="item_content_1">
|
||||
<div id="echart_d04" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_wrap_2 item_wrap_3">
|
||||
<div class="item_tip item_tip_2">
|
||||
<div class="item_tip_left">设备综合统计</div>
|
||||
</div>
|
||||
<div class="item_content_1">
|
||||
<div id="echart_d05" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_wrap_2">
|
||||
<div class="item_tip item_tip_2">
|
||||
<div class="item_tip_left">设备状态列表</div>
|
||||
</div>
|
||||
<div class="item_content_2">
|
||||
<div class="scroll_wrap">
|
||||
<ul class="scroll_tab_1">
|
||||
<li>设备编号</li>
|
||||
<li>设备名称</li>
|
||||
<li>设备大类</li>
|
||||
<li>设备状态</li>
|
||||
<!-- <li>产量</li> -->
|
||||
<li>开机时间</li>
|
||||
<li>关机时间</li>
|
||||
<!-- <li>生产日期</li> -->
|
||||
</ul>
|
||||
<div class="scroll_container_1 scroll_container_3" v-if="array1.length">
|
||||
<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">{{e.device_code}}</div>
|
||||
<div class="scroll-ul_1_div">{{e.device_name}}</div>
|
||||
<div class="scroll-ul_1_div">{{e.workprocedure_name}}</div>
|
||||
<div class="scroll-ul_1_div scroll-ul_1_div4"><span :style="{'background-color': e.color}"></span><i>{{e.device_status}}</i></div>
|
||||
<!-- <div class="scroll-ul_1_div">{{e.product_qty}}</div> -->
|
||||
<div class="scroll-ul_1_div">{{e.start_time}}</div>
|
||||
<div class="scroll-ul_1_div">{{e.end_time}}</div>
|
||||
<!-- <div class="scroll-ul_1_div">{{e.product_time}}</div> -->
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="bottom"></section>
|
||||
</section>
|
||||
<div class="right_wrap">
|
||||
<div class="item_wrap">
|
||||
<div class="item_tip">
|
||||
<div class="item_tip_left">设备TOP10故障次数</div>
|
||||
</div>
|
||||
<div class="item_content_1">
|
||||
<div id="echart_d08" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_wrap">
|
||||
<div class="item_tip">
|
||||
<div class="item_tip_left">设备报警信息</div>
|
||||
</div>
|
||||
<div class="item_content_4">
|
||||
<div class="scroll_wrap">
|
||||
<ul class="scroll_tab_2">
|
||||
<li>编号</li>
|
||||
<li>名称</li>
|
||||
<li>报警原因</li>
|
||||
<li>报警时间</li>
|
||||
</ul>
|
||||
<div class="scroll_container_2">
|
||||
<vue-seamless-scroll :data="array2" :class-option="defaultOption2">
|
||||
<ul class="scroll-ul_2">
|
||||
<li v-for="(e, i) in array2" :key="i">
|
||||
<div class="scroll-ul_2_div">{{e.device_code}}</div>
|
||||
<div class="scroll-ul_2_div">{{e.device_name}}</div>
|
||||
<div class="scroll-ul_2_div">{{e.err_name}}</div>
|
||||
<div class="scroll-ul_2_div">{{e.start_time}}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_wrap">
|
||||
<div class="item_tip">
|
||||
<div class="item_tip_left">近30天设备故障统计</div>
|
||||
</div>
|
||||
<!-- <div class="item_content_5">
|
||||
<div id="echart_d4" style="width: 100%; height: 100%"></div>
|
||||
</div> -->
|
||||
<div class="item_content_1">
|
||||
<div id="echart_d10" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
Reference in New Issue
Block a user