| | |
| | | </div> |
| | | |
| | | <div> |
| | | <table cellpadding="0" cellspacing="0" width="100%"> |
| | | <tr> |
| | | <td> |
| | | <table width="100%"> |
| | | <tr style="word-break: keep-all;"> |
| | | <td align="right"><a id="btnMdcLogWline" href="#"> |
| | | <div style="padding-top: 15px;" @click="openWorkChart"> |
| | | <img src="../../../../../assets/image/linechart.png" alt=""> |
| | | <p>工作曲线</p> |
| | | </div> |
| | | </a></td> |
| | | <td width="100%" height="100%"> |
| | | <table width="100%" height="100%" align="center" cellpadding="0" cellspacing="0"> |
| | | <tr> |
| | | <td style="word-break: keep-all;" align="left"> |
| | | <div |
| | | style="width: 100%; height: 62px;border: 1px solid;border-color: #9d9d9d;position: relative;overflow: hidden"> |
| | | <div class="mdcLogShowOne" |
| | | :style='{display: "inline-block",width:item.dateProportion, height: "100%"}' |
| | | v-for="item in normal"> |
| | | <div class="equipment-status-container"> |
| | | <a href="#" @click="openWorkChart"> |
| | | <img src="@/assets/image/linechart.png" alt=""> |
| | | <div>工作曲线</div> |
| | | </a> |
| | | |
| | | <div> |
| | | <div :style='{display: "inline-block",width:item.dateProportion, height: "100%"}' v-for="item in normal"> |
| | | <span v-if="item.status == 0" |
| | | :style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#A8A8A8",position:"absolute",top:"0"}'></span> |
| | | <span v-if="item.status == 1" |
| | |
| | | <span v-if="item.status == 23" |
| | | :style='{display: "inline-block",width:item.dateProportion, height: "100%", background: "#19FE01",position:"absolute",bottom:"0"}'></span> |
| | | </div> |
| | | <div v-if="item.status == 22" style="z-index: 999;" |
| | | <div v-if="item.status == 22" |
| | | :style='{display: "inline-block",left:item.left,width:item.dateProportion, height: "100%",position:"absolute"}' |
| | | v-for="item in warning"> |
| | | <span |
| | | :style='{display: "inline-block",width:"100%", left:0, height: "68%", background: "#FD0008",position:"absolute",bottom:"0"}'></span> |
| | | </div> |
| | | <div v-if="item.status == 25" style="z-index: 1000;" |
| | | <div v-if="item.status == 25" |
| | | :style='{display: "inline-block",left:item.left,width:item.dateProportion, height: "100%",position:"absolute"}' |
| | | v-for="item in fault"> |
| | | <span |
| | | :style='{display: "inline-block",width:"100%", left:0, height: "50%", background: "#C11900",position:"absolute",bottom:"0"}'></span> |
| | | </div> |
| | | </div> |
| | | </td> |
| | | </tr> |
| | | </table> |
| | | </td> |
| | | <td align="left"><a id="btnMdcLogBar" href="#"> |
| | | <div style="padding-top: 15px;" @click="openHistoryChart"> |
| | | <img src="../../../../../assets/image/Histogram.png" alt=""> |
| | | <p>历史记录</p> |
| | | |
| | | <a href="#" @click="openHistoryChart"> |
| | | <img src="@/assets/image/Histogram.png" alt=""> |
| | | <div>历史记录</div> |
| | | </a> |
| | | </div> |
| | | </a></td> |
| | | </tr> |
| | | <tr> |
| | | <td align="right">0</td> |
| | | <td width="100%"> |
| | | <table width="100%;" cellpadding="0" cellspacing="0"> |
| | | <tr align="right" style="word-break: keep-all;"> |
| | | <td>02:00</td> |
| | | <td>04:00</td> |
| | | <td>06:00</td> |
| | | <td>08:00</td> |
| | | <td>10:00</td> |
| | | <td>12:00</td> |
| | | <td>14:00</td> |
| | | <td>16:00</td> |
| | | <td>18:00</td> |
| | | <td>20:00</td> |
| | | <td>22:00</td> |
| | | <td>24:00</td> |
| | | </tr> |
| | | </table> |
| | | </td> |
| | | <td></td> |
| | | </tr> |
| | | </table> |
| | | </td> |
| | | </tr> |
| | | </table> |
| | | |
| | | <div class="time-container"> |
| | | <div>0</div> |
| | | <div> |
| | | <div v-for="item in 12">{{('0'+item*2).slice(-2)}}:00</div> |
| | | </div> |
| | | <div></div> |
| | | </div> |
| | | |
| | | <a-space class="date-change-container"> |
| | | <img @click="dataBefore" src="@/assets/image/left.png" alt=""> |
| | |
| | | </script> |
| | | |
| | | <style scoped="scoped" lang="less"> |
| | | @image-container-width: 58px; |
| | | |
| | | .equipment-status-container { |
| | | display: flex; |
| | | |
| | | > a { |
| | | display: inline-block; |
| | | text-align: center; |
| | | width: @image-container-width |
| | | } |
| | | |
| | | > div { |
| | | height: 62px; |
| | | border: 1px solid #9d9d9d; |
| | | position: relative; |
| | | overflow: hidden; |
| | | flex: 1 |
| | | } |
| | | } |
| | | |
| | | .time-container { |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | > div:not(:nth-child(2)) { |
| | | width: @image-container-width; |
| | | text-align: right; |
| | | } |
| | | |
| | | > div:nth-child(2) { |
| | | width: calc(100% - @image-container-width * 2); |
| | | display: flex; |
| | | |
| | | div { |
| | | width: calc(100% / 12); |
| | | text-align: right; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .date-change-container { |
| | | display: flex; |
| | | align-items: center; |