large_screen/src/views/drain/configImg/tableData.vue

<template>
  <div>
    <ul class="header">
      <li>
        {{ id }}号管道流量:<span>{{ tableData.pipelineFlow }}m3/h</span>
      </li>
      <li>
        {{ id }}号管道流量统计:<span
          >{{ tableData.pipelineFlowTotal }}m3/h</span
        >
      </li>
    </ul>
    <ul class="center">
      <li>
        {{ id }}号运行总时间:<br /><span>{{ tableData.runningTime }}h</span>
      </li>
      <li>
        {{ id }}号无人值守运行时间:<br /><span
          >{{ tableData.UnattendedRuntime }}h</span
        >
      </li>
    </ul>
    <ul class="bottom1">
      <li>
        {{ id }}号正压:<span>{{ tableData.positivePressure }}℃</span>
      </li>
      <li>
        {{ id }}号负压:<span>{{ tableData.negativePressure }}℃</span>
      </li>
    </ul>
    <ul class="bottom2">
      <li>
        {{ id }}号电压:<span>{{ tableData.positivePressure }}℃</span
        >{{ id }}号前轴温度:<span>{{ tableData.frontAxleTemp }}℃</span>
      </li>
      <li>
        {{ id }}号电流:<span>{{ tableData.negativePressure }}℃</span
        >{{ id }}号后轴温度:<span>{{ tableData.rearAxleTemp }}℃</span>
      </li>
    </ul>
    <div class="bottom3">液位:<span style="color:#fff">{{ tableData.liquidLevel }}m</span></div>
  </div>
</template>

<script>
export default {
  props: ["tableData", "id"],
};
</script>

<style scoped>
div {
  font-size: 18px;
}
.header {
  color: #4adefe;
  position: relative;
  top: 80px;
  left: 180px;
}
.header span {
  margin-left: 10px;
  color: #f3db5c;
}
.center {
  color: #4adefe;
  position: relative;
  top: 200px;
  left: 180px;
}
.center span {
  margin-left: 10px;
  color: #f3db5c;
  /* float: left; */
}
.bottom1 {
  color: #4adefe;
  position: relative;
  top: 230px;
  left: -20px;
}
.bottom1 span {
  margin-left: 10px;
  color: #f3db5c;
  /* float: left; */
}
.bottom2 {
  color: #4adefe;
  position: relative;
  top: 330px;
  left: -20px;
}
.bottom2 span {
  margin-left: 10px;
  color: #f3db5c;
  margin-right: 20px;
  /* float: left; */
}
.bottom3 {
  color: black;
  position: relative;
  top: 330px;
  left: 210px;
}
.bottom3 span {
  margin-left: 10px;
  color: #f3db5c;
}
li {
  list-style-type: none;
  line-height: 30px;
}
</style>