cuilei
2025-06-24 a22a69946912221dab4d32987dda6c4c8ba3c5d8
src/views/mdc/base/modules/DeviceLog/LogInfo.vue
@@ -31,26 +31,14 @@
    </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"
@@ -62,56 +50,33 @@
                            <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="">
@@ -342,6 +307,46 @@
</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;