734 lines
34 KiB
Vue
734 lines
34 KiB
Vue
<template>
|
||
<section class="container" @click="pkObj = {}">
|
||
<t-header index='3'></t-header>
|
||
<div class="content">
|
||
<div class="item_tr clearfix">
|
||
<div class="item_wrapper_h2">
|
||
<div class="item_block fl" v-for="(e, i) in HLJ" :key="i">
|
||
<div class="item_inner" @click.stop="getInfo(e)">
|
||
<div class="item_img">
|
||
<img v-if="e.device_url !== ''" :src="require('../assets/images/devmon/' + e.device_url + '.jpg')" :alt="e.device_name">
|
||
</div>
|
||
<div class="device_name clearfix">
|
||
<div class="fl device_name_tag" :class="['yellow', 'green', 'orange', 'gray'][Number(e.device_status)]"></div>
|
||
<div class="fl device_name_text">{{e.device_name}}</div>
|
||
</div>
|
||
<div class="info_block">
|
||
<div v-if="e.material_name !== null && e.material_name !== undefined" class="info_table_block">
|
||
<div class="info_table">当前生产</div>
|
||
<div class="info_data">{{e.material_name}}</div>
|
||
</div>
|
||
<div v-if="e.work_time !== null && e.work_time !== undefined" class="info_table_block">
|
||
<div class="info_table">已工作</div>
|
||
<div class="info_data">{{e.work_time}}小时</div>
|
||
</div>
|
||
<div v-if="e.real_qty !== null && e.real_qty !== undefined" class="info_table_block">
|
||
<div class="info_table">已生产</div>
|
||
<div class="info_data">{{e.real_qty}}KG</div>
|
||
</div>
|
||
<div v-if="e.vehicle_qty !== null && e.vehicle_qty !== undefined" class="info_table_block">
|
||
<div class="info_table">当前窑车数</div>
|
||
<div class="info_data">{{e.vehicle_qty}}车</div>
|
||
</div>
|
||
<div v-if="e.vehicle_max_qty !== null && e.vehicle_max_qty !== undefined" class="info_table_block">
|
||
<div class="info_table">容量</div>
|
||
<div class="info_data">{{e.vehicle_max_qty}}车</div>
|
||
</div>
|
||
<div v-if="e.vehicle_type !== null && e.vehicle_type !== undefined" class="info_table_block">
|
||
<div class="info_table">载具类型</div>
|
||
<div class="info_data">{{e.vehicle_type}}</div>
|
||
</div>
|
||
<div class="info_table_block">
|
||
<div v-if="e.device_status_name !== null && e.device_status_name !== undefined" class="info_table">当前状态</div>
|
||
<div class="info_data">{{e.device_status_name}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="e.device_code === pkObj.device_code" class="popover_block">
|
||
<div class="foldline" :class="e.postion1"></div>
|
||
<div class="popver_bg" :class="e.postion2">
|
||
<div class="popver_block">
|
||
<div class="pop_info_name">{{pkObj.device_name}}</div>
|
||
<div class="pop_info_tip">
|
||
<div class="pop_status">
|
||
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(pkObj.device_status)]"></div>
|
||
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(pkObj.device_status)]">{{pkObj.device_status_name}}</div>
|
||
</div>
|
||
<div v-if="pkObj.material_name !== null && pkObj.material_name !== undefined" class="pop_tip">当前生产：{{pkObj.material_name}}</div>
|
||
<div v-if="pkObj.real_qty !== null && pkObj.real_qty !== undefined" class="pop_tip">已生产：{{pkObj.real_qty}}KG</div>
|
||
<div v-if="pkObj.vehicle_qty !== null && pkObj.vehicle_qty !== undefined" class="pop_tip">当前窑车数：{{pkObj.vehicle_qty}}车</div>
|
||
<div v-if="pkObj.vehicle_max_qty !== null && pkObj.vehicle_max_qty !== undefined" class="pop_tip">容量：{{pkObj.vehicle_max_qty}}车</div>
|
||
<div v-if="pkObj.vehicle_type !== null && pkObj.vehicle_type !== undefined" class="pop_tip">载具类型：{{pkObj.vehicle_type}}车</div>
|
||
<div v-if="pkObj.error_name !== null && pkObj.error_name !== undefined" class="pop_tip">故障信息：{{pkObj.error_name}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item_wrapper_h1">
|
||
<div class="item_block fl" v-for="(e, i) in YZJ" :key="i">
|
||
<div class="item_inner" @click.stop="getInfo(e)">
|
||
<div class="item_img">
|
||
<img v-if="e.device_url !== ''" :src="require('../assets/images/devmon/' + e.device_url + '.jpg')" :alt="e.device_name">
|
||
</div>
|
||
<div class="device_name clearfix">
|
||
<div class="fl device_name_tag" :class="['yellow', 'green', 'orange', 'gray'][Number(e.device_status)]"></div>
|
||
<div class="fl device_name_text">{{e.device_name}}</div>
|
||
</div>
|
||
<div class="info_block">
|
||
<div v-if="e.material_name !== null && e.material_name !== undefined" class="info_table_block">
|
||
<div class="info_table">当前生产</div>
|
||
<div class="info_data">{{e.material_name}}</div>
|
||
</div>
|
||
<div v-if="e.work_time !== null && e.work_time !== undefined" class="info_table_block">
|
||
<div class="info_table">已工作</div>
|
||
<div class="info_data">{{e.work_time}}小时</div>
|
||
</div>
|
||
<div v-if="e.real_qty !== null && e.real_qty !== undefined" class="info_table_block">
|
||
<div class="info_table">已生产</div>
|
||
<div class="info_data">{{e.real_qty}}KG</div>
|
||
</div>
|
||
<div v-if="e.vehicle_qty !== null && e.vehicle_qty !== undefined" class="info_table_block">
|
||
<div class="info_table">当前窑车数</div>
|
||
<div class="info_data">{{e.vehicle_qty}}车</div>
|
||
</div>
|
||
<div v-if="e.vehicle_max_qty !== null && e.vehicle_max_qty !== undefined" class="info_table_block">
|
||
<div class="info_table">容量</div>
|
||
<div class="info_data">{{e.vehicle_max_qty}}车</div>
|
||
</div>
|
||
<div v-if="e.vehicle_type !== null && e.vehicle_type !== undefined" class="info_table_block">
|
||
<div class="info_table">载具类型</div>
|
||
<div class="info_data">{{e.vehicle_type}}</div>
|
||
</div>
|
||
<div class="info_table_block">
|
||
<div v-if="e.device_status_name !== null && e.device_status_name !== undefined" class="info_table">当前状态</div>
|
||
<div class="info_data">{{e.device_status_name}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="e.device_code === pkObj.device_code" class="popover_block">
|
||
<div class="foldline" :class="e.postion1"></div>
|
||
<div class="popver_bg" :class="e.postion2">
|
||
<div class="popver_block">
|
||
<div class="pop_info_name">{{pkObj.device_name}}</div>
|
||
<div class="pop_info_tip">
|
||
<div class="pop_status">
|
||
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(pkObj.device_status)]"></div>
|
||
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(pkObj.device_status)]">{{pkObj.device_status_name}}</div>
|
||
</div>
|
||
<div v-if="pkObj.material_name !== null && pkObj.material_name !== undefined" class="pop_tip">当前生产：{{pkObj.material_name}}</div>
|
||
<div v-if="pkObj.real_qty !== null && pkObj.real_qty !== undefined" class="pop_tip">已生产：{{pkObj.real_qty}}KG</div>
|
||
<div v-if="pkObj.vehicle_qty !== null && pkObj.vehicle_qty !== undefined" class="pop_tip">当前窑车数：{{pkObj.vehicle_qty}}车</div>
|
||
<div v-if="pkObj.vehicle_max_qty !== null && pkObj.vehicle_max_qty !== undefined" class="pop_tip">容量：{{pkObj.vehicle_max_qty}}车</div>
|
||
<div v-if="pkObj.vehicle_type !== null && pkObj.vehicle_type !== undefined" class="pop_tip">载具类型：{{pkObj.vehicle_type}}车</div>
|
||
<div v-if="pkObj.error_name !== null && pkObj.error_name !== undefined" class="pop_tip">故障信息：{{pkObj.error_name}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item_wrapper_f">
|
||
<div class="item_wrapper_l">
|
||
<div class="item_block item_block_f fl" v-for="(e, i) in MDJXS" :key="i">
|
||
<div class="item_inner" @click.stop="getInfo(e)">
|
||
<div class="item_img">
|
||
<img v-if="e.device_url !== ''" :src="require('../assets/images/devmon/' + e.device_url + '.jpg')" :alt="e.device_name">
|
||
</div>
|
||
<div class="device_name clearfix">
|
||
<div class="fl device_name_tag" :class="['yellow', 'green', 'orange', 'gray'][Number(e.device_status)]"></div>
|
||
<div class="fl device_name_text">{{e.device_name}}</div>
|
||
</div>
|
||
<div class="info_block">
|
||
<div v-if="e.material_name !== null && e.material_name !== undefined" class="info_table_block">
|
||
<div class="info_table">当前生产</div>
|
||
<div class="info_data">{{e.material_name}}</div>
|
||
</div>
|
||
<div v-if="e.work_time !== null && e.work_time !== undefined" class="info_table_block">
|
||
<div class="info_table">已工作</div>
|
||
<div class="info_data">{{e.work_time}}小时</div>
|
||
</div>
|
||
<div v-if="e.real_qty !== null && e.real_qty !== undefined" class="info_table_block">
|
||
<div class="info_table">已生产</div>
|
||
<div class="info_data">{{e.real_qty}}KG</div>
|
||
</div>
|
||
<div v-if="e.vehicle_qty !== null && e.vehicle_qty !== undefined" class="info_table_block">
|
||
<div class="info_table">当前窑车数</div>
|
||
<div class="info_data">{{e.vehicle_qty}}车</div>
|
||
</div>
|
||
<div v-if="e.vehicle_max_qty !== null && e.vehicle_max_qty !== undefined" class="info_table_block">
|
||
<div class="info_table">容量</div>
|
||
<div class="info_data">{{e.vehicle_max_qty}}车</div>
|
||
</div>
|
||
<div v-if="e.vehicle_type !== null && e.vehicle_type !== undefined" class="info_table_block">
|
||
<div class="info_table">载具类型</div>
|
||
<div class="info_data">{{e.vehicle_type}}</div>
|
||
</div>
|
||
<div class="info_table_block">
|
||
<div v-if="e.device_status_name !== null && e.device_status_name !== undefined" class="info_table">当前状态</div>
|
||
<div class="info_data">{{e.device_status_name}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="e.device_code === pkObj.device_code" class="popover_block">
|
||
<div class="foldline" :class="e.postion1"></div>
|
||
<div class="popver_bg" :class="e.postion2">
|
||
<div class="popver_block">
|
||
<div class="pop_info_name">{{pkObj.device_name}}</div>
|
||
<div class="pop_info_tip">
|
||
<div class="pop_status">
|
||
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(pkObj.device_status)]"></div>
|
||
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(pkObj.device_status)]">{{pkObj.device_status_name}}</div>
|
||
</div>
|
||
<div v-if="pkObj.material_name !== null && pkObj.material_name !== undefined" class="pop_tip">当前生产：{{pkObj.material_name}}</div>
|
||
<div v-if="pkObj.real_qty !== null && pkObj.real_qty !== undefined" class="pop_tip">已生产：{{pkObj.real_qty}}KG</div>
|
||
<div v-if="pkObj.vehicle_qty !== null && pkObj.vehicle_qty !== undefined" class="pop_tip">当前窑车数：{{pkObj.vehicle_qty}}车</div>
|
||
<div v-if="pkObj.vehicle_max_qty !== null && pkObj.vehicle_max_qty !== undefined" class="pop_tip">容量：{{pkObj.vehicle_max_qty}}车</div>
|
||
<div v-if="pkObj.vehicle_type !== null && pkObj.vehicle_type !== undefined" class="pop_tip">载具类型：{{pkObj.vehicle_type}}车</div>
|
||
<div v-if="pkObj.error_name !== null && pkObj.error_name !== undefined" class="pop_tip">故障信息：{{pkObj.error_name}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item_wrapper_l">
|
||
<div class="item_block item_block_f fl" v-for="(e, i) in YAO" :key="i">
|
||
<div class="item_inner" @click.stop="getInfo(e)">
|
||
<div class="item_img">
|
||
<img v-if="e.device_url !== ''" :src="require('../assets/images/devmon/' + e.device_url + '.jpg')" :alt="e.device_name">
|
||
</div>
|
||
<div class="device_name clearfix">
|
||
<div class="fl device_name_tag" :class="['yellow', 'green', 'orange', 'gray'][Number(e.device_status)]"></div>
|
||
<div class="fl device_name_text">{{e.device_name}}</div>
|
||
</div>
|
||
<div class="info_block">
|
||
<div v-if="e.material_name !== null && e.material_name !== undefined" class="info_table_block">
|
||
<div class="info_table">当前生产</div>
|
||
<div class="info_data">{{e.material_name}}</div>
|
||
</div>
|
||
<div v-if="e.work_time !== null && e.work_time !== undefined" class="info_table_block">
|
||
<div class="info_table">已工作</div>
|
||
<div class="info_data">{{e.work_time}}小时</div>
|
||
</div>
|
||
<div v-if="e.real_qty !== null && e.real_qty !== undefined" class="info_table_block">
|
||
<div class="info_table">已生产</div>
|
||
<div class="info_data">{{e.real_qty}}KG</div>
|
||
</div>
|
||
<div v-if="e.vehicle_qty !== null && e.vehicle_qty !== undefined" class="info_table_block">
|
||
<div class="info_table">当前窑车数</div>
|
||
<div class="info_data">{{e.vehicle_qty}}车</div>
|
||
</div>
|
||
<div v-if="e.vehicle_max_qty !== null && e.vehicle_max_qty !== undefined" class="info_table_block">
|
||
<div class="info_table">容量</div>
|
||
<div class="info_data">{{e.vehicle_max_qty}}车</div>
|
||
</div>
|
||
<div v-if="e.vehicle_type !== null && e.vehicle_type !== undefined" class="info_table_block">
|
||
<div class="info_table">载具类型</div>
|
||
<div class="info_data">{{e.vehicle_type}}</div>
|
||
</div>
|
||
<div class="info_table_block">
|
||
<div v-if="e.device_status_name !== null && e.device_status_name !== undefined" class="info_table">当前状态</div>
|
||
<div class="info_data">{{e.device_status_name}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="e.device_code === pkObj.device_code" class="popover_block">
|
||
<div class="foldline" :class="e.postion1"></div>
|
||
<div class="popver_bg" :class="e.postion2">
|
||
<div class="popver_block">
|
||
<div class="pop_info_name">{{pkObj.device_name}}</div>
|
||
<div class="pop_info_tip">
|
||
<div class="pop_status">
|
||
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(pkObj.device_status)]"></div>
|
||
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(pkObj.device_status)]">{{pkObj.device_status_name}}</div>
|
||
</div>
|
||
<div v-if="pkObj.material_name !== null && pkObj.material_name !== undefined" class="pop_tip">当前生产：{{pkObj.material_name}}</div>
|
||
<div v-if="pkObj.real_qty !== null && pkObj.real_qty !== undefined" class="pop_tip">已生产：{{pkObj.real_qty}}KG</div>
|
||
<div v-if="pkObj.vehicle_qty !== null && pkObj.vehicle_qty !== undefined" class="pop_tip">当前窑车数：{{pkObj.vehicle_qty}}车</div>
|
||
<div v-if="pkObj.vehicle_max_qty !== null && pkObj.vehicle_max_qty !== undefined" class="pop_tip">容量：{{pkObj.vehicle_max_qty}}车</div>
|
||
<div v-if="pkObj.vehicle_type !== null && pkObj.vehicle_type !== undefined" class="pop_tip">载具类型：{{pkObj.vehicle_type}}车</div>
|
||
<div v-if="pkObj.error_name !== null && pkObj.error_name !== undefined" class="pop_tip">故障信息：{{pkObj.error_name}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item_wrapper_f">
|
||
<div class="item_wrapper_l">
|
||
<div class="item_block item_block_f fl" v-for="(e, i) in FJJXS" :key="i">
|
||
<div class="item_inner" @click.stop="getInfo(e)">
|
||
<div class="item_img">
|
||
<img v-if="e.device_url !== ''" :src="require('../assets/images/devmon/' + e.device_url + '.jpg')" :alt="e.device_name">
|
||
</div>
|
||
<div class="device_name clearfix">
|
||
<div class="fl device_name_tag" :class="['yellow', 'green', 'orange', 'gray'][Number(e.device_status)]"></div>
|
||
<div class="fl device_name_text">{{e.device_name}}</div>
|
||
</div>
|
||
<div class="info_block">
|
||
<div v-if="e.material_name !== null && e.material_name !== undefined" class="info_table_block">
|
||
<div class="info_table">当前生产</div>
|
||
<div class="info_data">{{e.material_name}}</div>
|
||
</div>
|
||
<div v-if="e.work_time !== null && e.work_time !== undefined" class="info_table_block">
|
||
<div class="info_table">已工作</div>
|
||
<div class="info_data">{{e.work_time}}小时</div>
|
||
</div>
|
||
<div v-if="e.real_qty !== null && e.real_qty !== undefined" class="info_table_block">
|
||
<div class="info_table">已生产</div>
|
||
<div class="info_data">{{e.real_qty}}KG</div>
|
||
</div>
|
||
<div v-if="e.vehicle_qty !== null && e.vehicle_qty !== undefined" class="info_table_block">
|
||
<div class="info_table">当前窑车数</div>
|
||
<div class="info_data">{{e.vehicle_qty}}车</div>
|
||
</div>
|
||
<div v-if="e.vehicle_max_qty !== null && e.vehicle_max_qty !== undefined" class="info_table_block">
|
||
<div class="info_table">容量</div>
|
||
<div class="info_data">{{e.vehicle_max_qty}}车</div>
|
||
</div>
|
||
<div v-if="e.vehicle_type !== null && e.vehicle_type !== undefined" class="info_table_block">
|
||
<div class="info_table">载具类型</div>
|
||
<div class="info_data">{{e.vehicle_type}}</div>
|
||
</div>
|
||
<div class="info_table_block">
|
||
<div v-if="e.device_status_name !== null && e.device_status_name !== undefined" class="info_table">当前状态</div>
|
||
<div class="info_data">{{e.device_status_name}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="e.device_code === pkObj.device_code" class="popover_block">
|
||
<div class="foldline" :class="e.postion1"></div>
|
||
<div class="popver_bg" :class="e.postion2">
|
||
<div class="popver_block">
|
||
<div class="pop_info_name">{{pkObj.device_name}}</div>
|
||
<div class="pop_info_tip">
|
||
<div class="pop_status">
|
||
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(pkObj.device_status)]"></div>
|
||
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(pkObj.device_status)]">{{pkObj.device_status_name}}</div>
|
||
</div>
|
||
<div v-if="pkObj.material_name !== null && pkObj.material_name !== undefined" class="pop_tip">当前生产：{{pkObj.material_name}}</div>
|
||
<div v-if="pkObj.real_qty !== null && pkObj.real_qty !== undefined" class="pop_tip">已生产：{{pkObj.real_qty}}KG</div>
|
||
<div v-if="pkObj.vehicle_qty !== null && pkObj.vehicle_qty !== undefined" class="pop_tip">当前窑车数：{{pkObj.vehicle_qty}}车</div>
|
||
<div v-if="pkObj.vehicle_max_qty !== null && pkObj.vehicle_max_qty !== undefined" class="pop_tip">容量：{{pkObj.vehicle_max_qty}}车</div>
|
||
<div v-if="pkObj.vehicle_type !== null && pkObj.vehicle_type !== undefined" class="pop_tip">载具类型：{{pkObj.vehicle_type}}车</div>
|
||
<div v-if="pkObj.error_name !== null && pkObj.error_name !== undefined" class="pop_tip">故障信息：{{pkObj.error_name}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item_wrapper_l">
|
||
<div class="item_block item_block_f fl" v-for="(e, i) in BZX" :key="i">
|
||
<div class="item_inner" @click.stop="getInfo(e)">
|
||
<div class="item_img">
|
||
<img v-if="e.device_url !== ''" :src="require('../assets/images/devmon/' + e.device_url + '.jpg')" :alt="e.device_name">
|
||
</div>
|
||
<div class="device_name clearfix">
|
||
<div class="fl device_name_tag" :class="['yellow', 'green', 'orange', 'gray'][Number(e.device_status)]"></div>
|
||
<div class="fl device_name_text">{{e.device_name}}</div>
|
||
</div>
|
||
<div class="info_block">
|
||
<div v-if="e.material_name !== null && e.material_name !== undefined" class="info_table_block">
|
||
<div class="info_table">当前生产</div>
|
||
<div class="info_data">{{e.material_name}}</div>
|
||
</div>
|
||
<div v-if="e.work_time !== null && e.work_time !== undefined" class="info_table_block">
|
||
<div class="info_table">已工作</div>
|
||
<div class="info_data">{{e.work_time}}小时</div>
|
||
</div>
|
||
<div v-if="e.real_qty !== null && e.real_qty !== undefined" class="info_table_block">
|
||
<div class="info_table">已生产</div>
|
||
<div class="info_data">{{e.real_qty}}KG</div>
|
||
</div>
|
||
<div v-if="e.vehicle_qty !== null && e.vehicle_qty !== undefined" class="info_table_block">
|
||
<div class="info_table">当前窑车数</div>
|
||
<div class="info_data">{{e.vehicle_qty}}车</div>
|
||
</div>
|
||
<div v-if="e.vehicle_max_qty !== null && e.vehicle_max_qty !== undefined" class="info_table_block">
|
||
<div class="info_table">容量</div>
|
||
<div class="info_data">{{e.vehicle_max_qty}}车</div>
|
||
</div>
|
||
<div v-if="e.vehicle_type !== null && e.vehicle_type !== undefined" class="info_table_block">
|
||
<div class="info_table">载具类型</div>
|
||
<div class="info_data">{{e.vehicle_type}}</div>
|
||
</div>
|
||
<div class="info_table_block">
|
||
<div v-if="e.device_status_name !== null && e.device_status_name !== undefined" class="info_table">当前状态</div>
|
||
<div class="info_data">{{e.device_status_name}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="e.device_code === pkObj.device_code" class="popover_block">
|
||
<div class="foldline" :class="e.postion1"></div>
|
||
<div class="popver_bg" :class="e.postion2">
|
||
<div class="popver_block">
|
||
<div class="pop_info_name">{{pkObj.device_name}}</div>
|
||
<div class="pop_info_tip">
|
||
<div class="pop_status">
|
||
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(pkObj.device_status)]"></div>
|
||
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(pkObj.device_status)]">{{pkObj.device_status_name}}</div>
|
||
</div>
|
||
<div v-if="pkObj.material_name !== null && pkObj.material_name !== undefined" class="pop_tip">当前生产：{{pkObj.material_name}}</div>
|
||
<div v-if="pkObj.real_qty !== null && pkObj.real_qty !== undefined" class="pop_tip">已生产：{{pkObj.real_qty}}KG</div>
|
||
<div v-if="pkObj.vehicle_qty !== null && pkObj.vehicle_qty !== undefined" class="pop_tip">当前窑车数：{{pkObj.vehicle_qty}}车</div>
|
||
<div v-if="pkObj.vehicle_max_qty !== null && pkObj.vehicle_max_qty !== undefined" class="pop_tip">容量：{{pkObj.vehicle_max_qty}}车</div>
|
||
<div v-if="pkObj.vehicle_type !== null && pkObj.vehicle_type !== undefined" class="pop_tip">载具类型：{{pkObj.vehicle_type}}车</div>
|
||
<div v-if="pkObj.error_name !== null && pkObj.error_name !== undefined" class="pop_tip">故障信息：{{pkObj.error_name}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tag_block">
|
||
<div class="tag_type">
|
||
<div class="type_color green"></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 gray"></div>
|
||
<div class="tag_text">停机</div>
|
||
</div>
|
||
<div class="tag_type">
|
||
<div class="type_color orange"></div>
|
||
<div class="tag_text">故障</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script>
|
||
import THeader from '@components/header.vue'
|
||
import { deviceMonitor } from '@js/getData2'
|
||
export default {
|
||
name: 'DeviceMonitor',
|
||
components: {
|
||
THeader
|
||
},
|
||
data () {
|
||
return {
|
||
interTime: this.$store.getters.setTime,
|
||
timer: null,
|
||
deviceDatas: [],
|
||
pkObj: {},
|
||
HLJ: [], // 混料16，压机10，码垛机械手3台，窑设备3台，分拣机械手2台、包装线3台
|
||
YZJ: [],
|
||
MDJXS: [],
|
||
YAO: [],
|
||
FJJXS: [],
|
||
BZX: []
|
||
}
|
||
},
|
||
created () {
|
||
this.initData()
|
||
this.refresh()
|
||
},
|
||
beforeDestroy () {
|
||
clearInterval(this.timer)
|
||
},
|
||
methods: {
|
||
refresh () {
|
||
this.timer = setInterval(() => {
|
||
this.initData()
|
||
}, this.interTime)
|
||
},
|
||
async initData () {
|
||
let res = await deviceMonitor()
|
||
if (res.code === 200) {
|
||
this.deviceDatas = [...res.result]
|
||
this.HLJ = [...res.result.HLJ]
|
||
this.YZJ = [...res.result.YZJ]
|
||
this.MDJXS = [...res.result.MDJXS]
|
||
this.YAO = [...res.result.YAO]
|
||
this.FJJXS = [...res.result.FJJXS]
|
||
this.BZX = [...res.result.BZX]
|
||
this.addPosition1(this.HLJ)
|
||
this.addPosition1(this.YZJ)
|
||
this.addPosition1(this.MDJXS)
|
||
this.addPosition2(this.YAO)
|
||
this.addPosition1(this.FJJXS)
|
||
this.addPosition2(this.BZX)
|
||
} else {
|
||
this.toast(res.desc)
|
||
}
|
||
},
|
||
addPosition1 (arr) {
|
||
for (let i = 0; i < arr.length; i++) {
|
||
if (i <= 4) {
|
||
arr[i].postion1 = 'position_1a_l'
|
||
arr[i].postion2 = 'position_1b_l'
|
||
} else if (i > 4 && i <= 9) {
|
||
arr[i].postion1 = 'position_1a_r'
|
||
arr[i].postion2 = 'position_1b_r'
|
||
} else if (i > 9 && i <= 14) {
|
||
arr[i].postion1 = 'position_1a_l'
|
||
arr[i].postion2 = 'position_1b_l'
|
||
} else if (i > 14 && i <= 19) {
|
||
arr[i].postion1 = 'position_1a_r'
|
||
arr[i].postion2 = 'position_1b_r'
|
||
}
|
||
}
|
||
},
|
||
addPosition2 (arr) {
|
||
for (let i = 0; i < arr.length; i++) {
|
||
if (i <= 4) {
|
||
arr[i].postion1 = 'position_1a_r'
|
||
arr[i].postion2 = 'position_1b_r'
|
||
}
|
||
}
|
||
},
|
||
getInfo (e) {
|
||
this.pkObj = e
|
||
},
|
||
closebtn () {
|
||
this.pkObj = {}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="stylus" scoped>
|
||
@import '~@css/mixin'
|
||
.container
|
||
_wh(100%, 100%)
|
||
.close_btn
|
||
position absolute
|
||
top 2px
|
||
right 8px
|
||
font-size 14px
|
||
line-height 34px
|
||
padding 0 16px
|
||
border-radius 5px
|
||
cursor pointer
|
||
.content
|
||
width 100%
|
||
height calc(100% - 84px)
|
||
.item_tr
|
||
width 100%
|
||
height auto
|
||
padding 3% .5%
|
||
_fj(,center)
|
||
.item_wrapper_h1
|
||
width 100%
|
||
overflow hidden
|
||
.item_wrapper_h2
|
||
width 100%
|
||
overflow hidden
|
||
.item_wrapper_f
|
||
width 100%
|
||
_fj(row)
|
||
overflow hidden
|
||
.item_wrapper_l
|
||
width 49.85%
|
||
.item_block
|
||
position relative
|
||
width 9.55%
|
||
padding 8px 4px
|
||
margin-bottom 0.5%
|
||
margin-right 0.5%
|
||
background center center / 100% 100% url(../assets/images/bg_item.png) no-repeat
|
||
&:nth-child(10n)
|
||
margin-right 0
|
||
.item_block_f
|
||
width 19.2%
|
||
margin-right 1%
|
||
margin-bottom 1%
|
||
&:nth-child(5n)
|
||
margin-right 0
|
||
.item_inner
|
||
width 100%
|
||
overflow hidden
|
||
.item_img
|
||
_wh(98%,91px)
|
||
margin 0 auto 5px auto
|
||
border 1px solid #393F51
|
||
background-color $gray
|
||
img
|
||
_wh(100%,100%)
|
||
.device_name_tag
|
||
_wh(10px,10px)
|
||
border-radius 50%
|
||
margin 2px
|
||
background-color #ffffff
|
||
.device_name_text
|
||
_font(14px,14px,,,left)
|
||
.device_name
|
||
width 100%
|
||
padding 4px 0
|
||
.info_block
|
||
_wh(100%, 80px)
|
||
padding 4px 0
|
||
overflow hidden
|
||
.info_table_block
|
||
width 100%
|
||
_fj(row,,flex-start)
|
||
.info_table
|
||
width 80px
|
||
max-height 36px
|
||
overflow hidden
|
||
_font(12px,18px,,100,left)
|
||
.info_data
|
||
width calc(100% - 80px)
|
||
max-height 36px
|
||
overflow hidden
|
||
_font(12px,18px,,200,right)
|
||
word-break break-all
|
||
.popover_block
|
||
position absolute
|
||
left 0
|
||
top 0
|
||
z-index 100
|
||
.foldline
|
||
position absolute
|
||
z-index 102
|
||
_wh(127px,105px)
|
||
_bis('../assets/images/dot_line.png')
|
||
.popver_bg
|
||
position absolute
|
||
z-index 101
|
||
_wh(500px,288px)
|
||
padding 20px 18px 36px 10px
|
||
overflow hidden
|
||
_bis('../assets/images/popover_1.png')
|
||
// 弹窗在第一行左侧1-6列情况
|
||
.position_1a_l
|
||
top 35px
|
||
left 80px
|
||
transform rotateY(180deg)
|
||
.position_1b_l
|
||
left 190px
|
||
top -20px
|
||
// 弹窗在第一行右侧7-9列情况
|
||
.position_1a_r
|
||
top 35px
|
||
left -22px
|
||
.position_1b_r
|
||
left -505px
|
||
top -20px
|
||
// 弹窗在第二行左侧1-7列情况
|
||
.position_2a_l
|
||
top -36px
|
||
left 80px
|
||
.position_2b_l
|
||
left 190px
|
||
top -130px
|
||
// 弹窗在第二行右侧侧8、9列情况
|
||
.position_2a_r
|
||
top -36px
|
||
left -22px
|
||
transform rotateY(180deg)
|
||
.position_2b_r
|
||
left -505px
|
||
top -130px
|
||
.popver_block
|
||
padding 8px 0 0 12px
|
||
background top center / 100% 18px url(../assets/images/popover_line.png) no-repeat
|
||
_wh(100%,100%)
|
||
overflow hidden
|
||
.pop_info_name
|
||
width 100%
|
||
_font(14px,20px,#32C5FF,,left)
|
||
text-shadow 2px 2px 4px #A6E6FF
|
||
margin-bottom 8px
|
||
.pop_info_tip
|
||
position relative
|
||
height auto
|
||
.pop_status
|
||
position absolute
|
||
right 0
|
||
top 0
|
||
.pop_tip
|
||
font-size 14px
|
||
line-height 28px
|
||
.pop_status_dot
|
||
display inline-block
|
||
width 10px
|
||
height 10px
|
||
border-radius 50%
|
||
background-color #fff
|
||
.pop_status_text
|
||
display inline-block
|
||
font-size 14px
|
||
color #fff
|
||
.pop_table
|
||
width 100%
|
||
margin-top 10px
|
||
border-collapse separate
|
||
border 1px solid #2595DE
|
||
border-spacing 0
|
||
border-radius 4px 4px 0 0
|
||
tr
|
||
th
|
||
opacity 0.7
|
||
_font(12px,32px,rgba(255,255,255,0.60))
|
||
background #3D6CAA
|
||
padding 0 10px
|
||
border-right 1px solid #2595DE
|
||
border-bottom 1px solid #2595DE
|
||
&:nth-child(1)
|
||
text-align left
|
||
&:last-child
|
||
border-right none
|
||
td
|
||
_font(12px,14px)
|
||
height 36px
|
||
vertical-align middle
|
||
padding 0 10px
|
||
border-right 1px solid #2595DE
|
||
border-bottom 1px solid #2595DE
|
||
&:nth-child(1)
|
||
text-align left
|
||
&:last-child
|
||
border-right none
|
||
&:last-child td
|
||
border-bottom none
|
||
.tag_block
|
||
position fixed
|
||
bottom 10px
|
||
right 54px
|
||
.tag_type
|
||
display inline-block
|
||
padding-left 30px
|
||
.type_color
|
||
display inline-block
|
||
width 10px
|
||
height 10px
|
||
border-radius 50%
|
||
.tag_text
|
||
display inline-block
|
||
_font(14px,20px,,,left)
|
||
.green
|
||
background-color $green
|
||
.yellow
|
||
background-color $yellow
|
||
.gray
|
||
background-color $gray
|
||
.orange
|
||
background-color $orange
|
||
.fgreen
|
||
color $green
|
||
.fyellow
|
||
color $yellow
|
||
.fgray
|
||
color $gray
|
||
.forange
|
||
color $orange
|
||
</style>
|