668 lines
28 KiB
Vue
668 lines
28 KiB
Vue
<template>
|
||
<section class="container" @click="uid = ''">
|
||
<t-header index='3'></t-header>
|
||
<div class="content">
|
||
<div class="item_tr clearfix">
|
||
<div class="item_block fl" v-for="e in deviceDatas" :key="e.device_code">
|
||
<div class="item_inner" @click.stop="getInfo(e)">
|
||
<div class="item_img">
|
||
<img v-if="e.device_url !== ''" :src="require('../assets/images/devmoni/' + 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 clearfix">
|
||
<div class="fl info_table_block">
|
||
<div v-if="e.material_name !== null && e.material_name !== undefined" class="info_table"><p>当前生产：</p></div>
|
||
<div v-if="e.work_time !== null && e.work_time !== undefined" class="info_table"><p>已工作：</p></div>
|
||
<div v-if="e.real_qty !== null && e.real_qty !== undefined" class="info_table"><p>已生产：</p></div>
|
||
<div v-if="e.vehicle_qty !== null && e.vehicle_qty !== undefined" class="info_table"><p>当前窑车数：</p></div>
|
||
<div v-if="e.vehicle_max_qty !== null && e.vehicle_max_qty !== undefined" class="info_table"><p>容 量：</p></div>
|
||
<div v-if="e.vehicle_type !== null && e.vehicle_type !== undefined" class="info_table"><p>载具类型：</p></div>
|
||
<div v-if="e.device_status_name !== null && e.device_status_name !== undefined" class="info_table"><p>当前状态：</p></div>
|
||
</div>
|
||
<div class="fr info_data_block">
|
||
<div v-if="e.material_name !== null && e.material_name !== undefined" class="info_data"><p>{{e.material_name}}</p></div>
|
||
<div v-if="e.work_time !== null && e.work_time !== undefined" class="info_data"><p>{{e.work_time}}小时</p></div>
|
||
<div v-if="e.real_qty !== null && e.real_qty !== undefined" class="info_data"><p>{{e.real_qty}}KG</p></div>
|
||
<div v-if="e.vehicle_qty !== null && e.vehicle_qty !== undefined" class="info_data"><p>{{e.vehicle_qty}}车</p></div>
|
||
<div v-if="e.vehicle_max_qty !== null && e.vehicle_max_qty !== undefined" class="info_data"><p>{{e.vehicle_max_qty}}车</p></div>
|
||
<div v-if="e.vehicle_type !== null && e.vehicle_type !== undefined" class="info_data"><p>{{e.vehicle_type}}</p></div>
|
||
<div v-if="e.device_status_name !== null && e.device_status_name !== undefined" class="info_data"><p>{{e.device_status_name}}</p></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="e.device_code === uid" 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">{{form.device_name}}</div>
|
||
<div class="pop_info_tip">
|
||
<div class="pop_status">
|
||
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(form.device_status) - 1]"></div>
|
||
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.device_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.device_status) - 1]}}</div>
|
||
</div>
|
||
<div v-if="form.material_name !== ''" class="pop_tip">当前生产：{{form.material_name}}</div>
|
||
<div v-if="form.real_qty !== ''" class="pop_tip">已生产：{{form.real_qty}}KG</div>
|
||
<div v-if="form.vehicle_code !== ''" class="pop_tip">载具：{{form.vehicle_code}}</div>
|
||
<div v-if="form.instorage_time !== ''" class="pop_tip">入库时间：{{form.instorage_time}}</div>
|
||
<div v-if="form.vehicle_qty !== ''" class="pop_tip">载具数量：{{form.vehicle_qty}}托</div>
|
||
<div v-if="form.ivt_weight !== ''" class="pop_tip">重量：{{form.ivt_weight}}</div>
|
||
<div v-if="form.pallet_qty !== ''" class="pop_tip">搬运托盘数：{{form.pallet_qty}}托</div>
|
||
<div v-if="form.ready_lane !== ''" class="pop_tip">搬入准备车道：{{form.ready_lane}}托</div>
|
||
<div v-if="form.move_first_kiln !== ''" class="pop_tip">搬入1号窑：{{form.move_first_kiln}}托</div>
|
||
<div v-if="form.move_second_kiln !== ''" class="pop_tip">搬入2号窑：{{form.move_second_kiln}}托</div>
|
||
<div v-if="form.first_kiln_qty !== ''" class="pop_tip">窑1窑车数：{{form.first_kiln_qty}}托</div>
|
||
<div v-if="form.second_kiln_qty !== ''" class="pop_tip">窑2窑车数：{{form.second_kiln_qty}}托</div>
|
||
<div v-if="form.mechanical_pallet_qty !== ''" class="pop_tip">完成托盘数：{{form.mechanical_pallet_qty}}车</div>
|
||
<div v-if="form.mechanical_arm_qty !== ''" class="pop_tip">完成数量：{{form.mechanical_arm_qty}}块</div>
|
||
<div v-if="form.finish_pallet_qty !== ''" class="pop_tip">完成托盘数：{{form.finish_pallet_qty}}个</div>
|
||
<div v-if="form.finish_pile_qty !== ''" class="pop_tip">完成跺数：{{form.finish_pile_qty}}垛</div>
|
||
<div v-if="form.faulty_info !== '' || allrows1.length > 0 || allrows2.length > 0 || allrows3.length > 0" class="pop_tip">故障信息：{{form.faulty_info}}</div>
|
||
<table v-if="allrows1.length > 0" class="pop_table">
|
||
<tr>
|
||
<th width="48%">本日生产</th>
|
||
<th width="26%">已生产数量</th>
|
||
<th>单位</th>
|
||
</tr>
|
||
<tr v-for="(e,i) in allrows1" :key="i">
|
||
<td>{{e.productionDetails}}</td>
|
||
<td>{{e.productionQty}}</td>
|
||
<td>{{e.weightUnitName}}</td>
|
||
</tr>
|
||
</table>
|
||
<table v-if="allrows2.length > 0" class="pop_table">
|
||
<tr>
|
||
<th width="48%">本日生产</th>
|
||
<th width="26%">生产厂家</th>
|
||
<th>已生产(块)</th>
|
||
</tr>
|
||
<tr v-for="(e,i) in allrows1" :key="i">
|
||
<td>{{e.productionDetails}}</td>
|
||
<td>{{e.manufacturer}}</td>
|
||
<td>{{e.productionQty}}</td>
|
||
</tr>
|
||
</table>
|
||
<table v-if="allrows3.length > 0" class="pop_table">
|
||
<tr>
|
||
<th width="48%">本日生产</th>
|
||
<th width="26%">生产厂家</th>
|
||
<th>已生产(块)</th>
|
||
</tr>
|
||
<tr v-for="(e,i) in allrows3" :key="i">
|
||
<td>{{e.productionDetails}}</td>
|
||
<td>{{e.manufacturer}}</td>
|
||
<td>{{e.productionQty}}</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
|
||
</div>
|
||
</div>
|
||
<!-- 混碾机LB0001 -->
|
||
<div v-if="e.device_code === uid && e.deviceclass_code === 'LB0001'" 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">{{form.device_name}}</div>
|
||
<div class="pop_info_tip">
|
||
<div class="pop_status">
|
||
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(form.device_status) - 1]"></div>
|
||
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.device_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.device_status) - 1]}}</div>
|
||
</div>
|
||
<div class="pop_tip">本周用电：{{form.week_electricity}}kw.h</div>
|
||
<div class="pop_tip">本月用电：{{form.mouth_electricity}}kw.h</div>
|
||
<div class="pop_tip">故障信息：{{form.error_info}}</div>
|
||
<table class="pop_table">
|
||
<tr>
|
||
<th width="48%">本日生产</th>
|
||
<th width="26%">已生产数量</th>
|
||
<th>单位</th>
|
||
</tr>
|
||
<tr v-for="(e,i) in allrows1" :key="i">
|
||
<td>{{e.material_name}}</td>
|
||
<td>{{e.produce_num}}</td>
|
||
<td>{{e.unit_name}}</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
|
||
</div>
|
||
</div>
|
||
<!-- 压力机LB0004、机械手LB0006 -->
|
||
<div v-if="e.device_code === uid && (e.deviceclass_code === 'LB0004' || (e.deviceclass_code === 'LB0006' && e.device_code !== 'CDJQR01' && e.device_code !== 'MDJXS01'))" 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">{{form.device_name}}</div>
|
||
<div class="pop_info_tip">
|
||
<div class="pop_status">
|
||
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(form.device_status) - 1]"></div>
|
||
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.device_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.device_status) - 1]}}</div>
|
||
</div>
|
||
<div class="pop_tip">本周用电：{{form.week_electricity}}kw.h</div>
|
||
<div class="pop_tip">本月用电：{{form.mouth_electricity}}kw.h</div>
|
||
<div class="pop_tip">故障信息：{{form.error_info}}</div>
|
||
<table class="pop_table">
|
||
<tr>
|
||
<th width="48%">本日生产</th>
|
||
<th width="26%">生产厂家</th>
|
||
<th>已生产（块）</th>
|
||
</tr>
|
||
<tr v-for="(e,i) in allrows2" :key="i">
|
||
<td>{{e.material_name}}</td>
|
||
<td>{{e.factory_name}}</td>
|
||
<td>{{e.produce_num}}</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
|
||
</div>
|
||
</div>
|
||
<!-- 衍架LB0010 -->
|
||
<div v-if="e.device_code === uid && e.deviceclass_code === 'LB0010'" 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">{{form.device_name}}</div>
|
||
<div class="pop_info_tip">
|
||
<div class="pop_status">
|
||
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(form.device_status) - 1]"></div>
|
||
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.device_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.device_status) - 1]}}</div>
|
||
</div>
|
||
<div class="pop_tip">本周用电：{{form.week_electricity}}kw.h</div>
|
||
<div class="pop_tip">本月用电：{{form.mouth_electricity}}kw.h</div>
|
||
<div class="pop_tip">故障信息：{{form.error_info}}</div>
|
||
<div class="pop_tip">搬运托盘数：{{form.in_produce_num}}托</div>
|
||
<div class="pop_tip">搬入准备车道：{{form.in_prepare}}托</div>
|
||
<div class="pop_tip">搬入1号窑：{{form.in_first}}托</div>
|
||
<div class="pop_tip">搬入2号窑：{{form.in_second}}托</div>
|
||
</div>
|
||
</div>
|
||
<div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
|
||
</div>
|
||
</div>
|
||
<!-- 空车道LB0011、准备车道LB0012、窑-暂存LB0014 -->
|
||
<div v-if="e.device_code === uid && (e.deviceclass_code === 'LB0011' || e.deviceclass_code === 'LB0012' || e.deviceclass_code === 'LB0014')" 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">{{form.device_name}}</div>
|
||
<div class="pop_info_tip">
|
||
<div class="pop_status">
|
||
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(form.device_status) - 1]"></div>
|
||
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.device_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.device_status) - 1]}}</div>
|
||
</div>
|
||
<div class="pop_tip">本周用电：{{form.week_electricity}}kw.h</div>
|
||
<div class="pop_tip">本月用电：{{form.mouth_electricity}}kw.h</div>
|
||
<div class="pop_tip">故障信息：{{form.error_info}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
|
||
</div>
|
||
</div>
|
||
<!-- 窑LB0013 -->
|
||
<div v-if="e.device_code === uid && e.deviceclass_code === 'LB0013'" 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">{{form.device_name}}</div>
|
||
<div class="pop_info_tip">
|
||
<div class="pop_status">
|
||
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(form.device_status) - 1]"></div>
|
||
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.device_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.device_status) - 1]}}</div>
|
||
</div>
|
||
<div class="pop_tip">本周用电/气：{{form.week_electricity}}kw.h / {{form.week_gas}} Nm</div>
|
||
<div class="pop_tip">本月用电/气：{{form.mouth_electricity}}kw.h / {{form.month_gas}} Nm</div>
|
||
<div class="pop_tip">故障信息：{{form.error_info}}</div>
|
||
<table class="pop_table">
|
||
<tr>
|
||
<th width="48%">本日生产</th>
|
||
<th width="26%">生产厂家</th>
|
||
<th>已生产（块）</th>
|
||
</tr>
|
||
<tr v-for="(e,i) in allrows2" :key="i">
|
||
<td>{{e.material_name}}</td>
|
||
<td>{{e.factory_name}}</td>
|
||
<td>{{e.produce_num}}</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
|
||
</div>
|
||
</div>
|
||
<!-- RGVLB0015 -->
|
||
<div v-if="e.device_code === uid && e.deviceclass_code === 'LB0015'" 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">{{form.device_name}}</div>
|
||
<div class="pop_info_tip">
|
||
<div class="pop_status">
|
||
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(form.device_status) - 1]"></div>
|
||
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.device_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.device_status) - 1]}}</div>
|
||
</div>
|
||
<div class="pop_tip">本周用电：{{form.week_electricity}}kw.h</div>
|
||
<div class="pop_tip">本月用电：{{form.mouth_electricity}}kw.h</div>
|
||
<div class="pop_tip">故障信息：{{form.error_info}}</div>
|
||
<div class="pop_tip">完成托盘数：{{form.carrier_num}}托</div>
|
||
</div>
|
||
</div>
|
||
<div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
|
||
</div>
|
||
</div>
|
||
<!-- 拆垛机械手、码垛机械手LB0006 -->
|
||
<div v-if="e.device_code === uid && (e.deviceclass_code === 'LB0006' && e.device_code === 'CDJQR01'|| e.device_code === 'MDJXS01')" 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">{{form.device_name}}</div>
|
||
<div class="pop_info_tip">
|
||
<div class="pop_status">
|
||
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(form.device_status) - 1]"></div>
|
||
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.device_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.device_status) - 1]}}</div>
|
||
</div>
|
||
<div class="pop_tip">本周用电：{{form.week_electricity}}kw.h</div>
|
||
<div class="pop_tip">本月用电：{{form.mouth_electricity}}kw.h</div>
|
||
<div class="pop_tip">故障信息：{{form.error_info}}</div>
|
||
<div class="pop_tip">完成托盘数：{{form.carrier_num}}托</div>
|
||
<div class="pop_tip">完成数量：{{form.produce_total_num}}块</div>
|
||
</div>
|
||
</div>
|
||
<div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
|
||
</div>
|
||
</div>
|
||
<!-- 叠盘机LB0016 -->
|
||
<div v-if="e.device_code === uid && e.deviceclass_code === 'LB0016'" 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">{{form.device_name}}</div>
|
||
<div class="pop_info_tip">
|
||
<div class="pop_status">
|
||
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(form.device_status) - 1]"></div>
|
||
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.device_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.device_status) - 1]}}</div>
|
||
</div>
|
||
<div class="pop_tip">本周用电：{{form.week_electricity}}kw.h</div>
|
||
<div class="pop_tip">本月用电：{{form.mouth_electricity}}kw.h</div>
|
||
<div class="pop_tip">故障信息：{{form.error_info}}</div>
|
||
<div class="pop_tip">完成托盘数：{{form.carrier_num}}托</div>
|
||
<div class="pop_tip">完成垛数：{{form.stack_num}}垛</div>
|
||
</div>
|
||
</div>
|
||
<div class="iconfont icon-guanbi close_btn" @click="closebtn"></div>
|
||
</div>
|
||
</div>
|
||
<!-- AGVLB0019 -->
|
||
<div v-if="e.device_code === uid && e.deviceclass_code === 'LB0019'" 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">{{form.device_name}}</div>
|
||
<div class="pop_info_tip">
|
||
<div class="pop_status">
|
||
<div class="pop_status_dot" :class="['yellow', 'green', 'orange', 'gray'][Number(form.device_status) - 1]"></div>
|
||
<div class="pop_status_text" :class="['fyellow', 'fgreen', 'forange', 'fgray'][Number(form.device_status) - 1]">{{['待机', '生产中', '故障', '关机'][Number(form.device_status) - 1]}}</div>
|
||
</div>
|
||
<div class="pop_tip">已完成搬运：0个</div>
|
||
<div class="pop_tip">故障信息：{{form.error_info}}</div>
|
||
</div>
|
||
</div>
|
||
<div class="iconfont icon-guanbi close_btn" @click="closebtn"></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, findDeviceById } from '@js/getData2'
|
||
export default {
|
||
name: 'DeviceMonitor',
|
||
components: {
|
||
THeader
|
||
},
|
||
data () {
|
||
return {
|
||
interTime: this.$store.getters.setTime,
|
||
timer: null,
|
||
deviceDatas: [],
|
||
form: {},
|
||
allrows1: [],
|
||
allrows2: [],
|
||
allrows3: [],
|
||
uid: ''
|
||
}
|
||
},
|
||
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.addPosition()
|
||
} else {
|
||
this.toast(res.desc)
|
||
}
|
||
},
|
||
async _findDeviceById (id) {
|
||
let res = await findDeviceById(id)
|
||
this.form = res.result
|
||
this.allrows1 = res.result.mixingList
|
||
this.allrows2 = res.result.crushingList
|
||
this.allrows3 = res.result.mKilnList
|
||
this.uid = id
|
||
},
|
||
addPosition () {
|
||
for (let i = 0; i < this.deviceDatas.length; i++) {
|
||
if (i <= 5) {
|
||
this.deviceDatas[i].postion1 = 'position_1a_l'
|
||
this.deviceDatas[i].postion2 = 'position_1b_l'
|
||
} else if (i > 5 && i <= 8) {
|
||
this.deviceDatas[i].postion1 = 'position_1a_r'
|
||
this.deviceDatas[i].postion2 = 'position_1b_r'
|
||
} else if (i > 8 && i <= 14) {
|
||
this.deviceDatas[i].postion1 = 'position_1a_l'
|
||
this.deviceDatas[i].postion2 = 'position_1b_l'
|
||
} else if (i > 14 && i <= 17) {
|
||
this.deviceDatas[i].postion1 = 'position_1a_r'
|
||
this.deviceDatas[i].postion2 = 'position_1b_r'
|
||
} else if (i > 17 && i <= 23) {
|
||
this.deviceDatas[i].postion1 = 'position_1a_l'
|
||
this.deviceDatas[i].postion2 = 'position_1b_l'
|
||
} else if (i > 23 && i <= 26) {
|
||
this.deviceDatas[i].postion1 = 'position_1a_r'
|
||
this.deviceDatas[i].postion2 = 'position_1b_r'
|
||
} else if (i > 26 && i <= 32) {
|
||
this.deviceDatas[i].postion1 = 'position_2a_l'
|
||
this.deviceDatas[i].postion2 = 'position_2b_l'
|
||
} else if (i > 32 && i <= 35) {
|
||
this.deviceDatas[i].postion1 = 'position_2a_r'
|
||
this.deviceDatas[i].postion2 = 'position_2b_r'
|
||
}
|
||
}
|
||
},
|
||
getInfo (e) {
|
||
// if (this.uid === e.device_code) {
|
||
// this.uid = ''
|
||
// } else {
|
||
// this.form = {}
|
||
// this.allrows1 = []
|
||
// this.allrows2 = []
|
||
// this.allrowsw3 = []
|
||
// this._findDeviceById(e.device_code)
|
||
// }
|
||
},
|
||
closebtn () {
|
||
this.uid = ''
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="stylus" scoped>
|
||
@import '~@css/mixin'
|
||
.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% - 135px)
|
||
overflow-y auto
|
||
padding 10px 1rem 0
|
||
.item_tr
|
||
width 100%
|
||
.item_block
|
||
position relative
|
||
_wh(180px,209px)
|
||
padding 8px 4px
|
||
margin-bottom 21px
|
||
margin-right calc((100% - 180px * 9) / 8)
|
||
background center center / 100% 100% url(../assets/images/bg_item.png) no-repeat
|
||
&:nth-child(9n)
|
||
margin-right 0
|
||
.item_inner
|
||
_wh(100%,100%)
|
||
.item_img
|
||
_wh(100%,91px)
|
||
margin-bottom 5px
|
||
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, .info_block
|
||
width 100%
|
||
padding 4px 0
|
||
.info_table_block
|
||
width 30%
|
||
.info_table_block_1
|
||
width 50%
|
||
.info_data_block
|
||
width 70%
|
||
.info_data_block_1
|
||
width 50%
|
||
.info_table
|
||
width 100%
|
||
height 18px
|
||
overflow hidden
|
||
p
|
||
display inline-block
|
||
width 100%
|
||
height 18px
|
||
_font(12px,18px,,100,left)
|
||
transform scale(0.78)
|
||
transform-origin left center
|
||
letter-spacing -1px
|
||
white-space nowrap
|
||
.info_table_1
|
||
height 36px
|
||
.info_data
|
||
width 100%
|
||
height 18px
|
||
overflow hidden
|
||
p
|
||
display inline-block
|
||
width 100%
|
||
height 18px
|
||
_font(12px,18px,,200,right)
|
||
// transform scale(0.9)
|
||
word-break break-all
|
||
.info_data_1
|
||
height 36px
|
||
p
|
||
letter-spacing -1px
|
||
transform scale(0.9)
|
||
transform-origin center center
|
||
.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 196px
|
||
overflow-y scroll
|
||
.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 25px
|
||
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>
|