station-test-ui/src/views/device/hydraulic/detail.vue

<template>
  <el-drawer
    title="设备信息"
    :visible.sync="drawerVisible"
    :direction="direction"
    size="60%"
  >
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="液压泵信息" name="first">
        <el-divider content-position="left">基础信息</el-divider>
        <el-row>
          <div style="margin-bottom: 30px; margin-left: 50px">
            <el-col
              :span="6"
              style="margin-top: 10px; font-size: 14px; color: #a0a0a0"
            >
              <div class="detail-item">
                <span>法兰编号：</span>
                <span class="item">{{ data.number }}</span>
              </div>
              <div class="detail-item">
                <pre style="display: inline">型    号：</pre>
                <span class="item">{{ data.model }}</span>
              </div>
              <div class="detail-item">
                <span>所属部门：</span>
                <span class="item">{{ data.depart_name }}</span>
              </div>
            </el-col>
            <el-col
              :span="6"
              style="margin-top: 10px; font-size: 14px; color: #a0a0a0"
            >
              <div class="detail-item">
                <pre style="display: inline">名    称：</pre>
                <span class="item">{{ data.name }}</span>
              </div>
              <div class="detail-item">
                <span>使用状态：</span>
                <span class="item">在用</span>
              </div>
              <div class="detail-item">
                <pre style="display: inline">品    牌：</pre>
                <span class="item">{{ data.brand }}</span>
              </div>
            </el-col>
            <el-col
              :span="6"
              style="margin-top: 10px; font-size: 14px; color: #a0a0a0"
            >
              <div class="detail-item">
                <pre style="display: inline">供 应 商：</pre>
                <span class="item">{{ data.supplier }}</span>
              </div>
              <div class="detail-item">
                <span>出厂日期：</span>
                <span class="item">{{ data.out_date }}</span>
              </div>
              <div class="detail-item">
                <pre style="display: inline">备    注：</pre>
                <span class="item">{{ data.remark }}</span>
              </div>
            </el-col>
            <el-col :span="6"></el-col>
          </div>
        </el-row>
        <el-divider content-position="left">规格信息</el-divider>
        <el-row>
          <div style="margin-bottom: 30px; margin-left: 50px">
            <el-col
              :span="24"
              style="margin-top: 10px; font-size: 14px; color: #a0a0a0"
            >
              <div class="detail-item">
                <pre style="display: inline">压力范围（PSI）：</pre>
                <span class="item">{{ data.pressure_range }}</span>
              </div>
            </el-col>
          </div>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="使用扳手" name="second">
        <el-table
          :data="AssemblyData"
          style="width: 100%; margin-left: 20px"
          :row-class-name="tableRowClassName"
        >
          <el-table-column prop="number" label="编号"> </el-table-column>
          <el-table-column prop="name" label="名称"> </el-table-column>
          <el-table-column prop="model" label="型号"> </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="螺栓紧固方案" name="third">
        <el-divider content-position="left"><span style="color:#1850ef">单同步</span></el-divider>
        <el-table
          :data="oneData"
          style="width: 100%;margin-left: 20px"
        >
          <el-table-column prop="step" label="步骤">
          </el-table-column>
          <el-table-column prop="number" label="螺栓编号">
          </el-table-column>
          <el-table-column prop="preload" label="标准预紧力（N*m）"> </el-table-column>
        </el-table>
        <el-divider content-position="left"><span style="color:#1850ef">两同步</span></el-divider>
        <el-table
          :data="twoData"
          style="width: 100%;margin-left: 20px"
        >
          <el-table-column prop="step" label="步骤">
          </el-table-column>
          <el-table-column prop="number" label="螺栓编号">
          </el-table-column>
          <el-table-column prop="preload" label="标准预紧力（N*m）"> </el-table-column>
        </el-table>
        <el-divider content-position="left"><span style="color:#1850ef">四同步</span></el-divider>
        <el-table
          :data="fourData"
          style="width: 100%;margin-left: 20px"
        >
          <el-table-column prop="step" label="步骤">
          </el-table-column>
          <el-table-column prop="number" label="螺栓编号">
          </el-table-column>
          <el-table-column prop="preload" label="标准预紧力（N*m）"> </el-table-column>
        </el-table>
        <el-divider content-position="left"><span style="color:#1850ef">六同步</span></el-divider>
        <el-table
          :data="sixData"
          style="width: 100%;margin-left: 20px"
        >
          <el-table-column prop="step" label="步骤">
          </el-table-column>
          <el-table-column prop="number" label="螺栓编号">
          </el-table-column>
          <el-table-column prop="preload" label="标准预紧力（N*m）"> </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="实时维保信息" name="fourth">
           <el-table
          :data="nowData"
          style="width: 100%;margin-left: 20px"
        >
          <el-table-column prop="number" label="螺栓编号">
          </el-table-column>
          <el-table-column prop="real_preload" label="实际预紧力（N*m）">
          </el-table-column>
          <el-table-column prop="stand_preload" label="标准预紧力（N*m）">
          </el-table-column>
          <el-table-column prop="end_time" label="预紧结束时间">
          </el-table-column>
          <el-table-column prop="beng_no" label="液压泵编号">
          </el-table-column>
          <el-table-column prop="banshou_no" label="液压扳手编号">
          </el-table-column>
          <el-table-column prop="ways" label="紧固方式">
          </el-table-column>
          <el-table-column prop="operator" label="操作员"> </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="历史维保记录" name="five">
           <el-table
          :data="historyData"
          style="width: 100%;margin-left: 20px"
        >
         <el-table-column prop="number" label="螺栓编号">
          </el-table-column>
          <el-table-column prop="real_preload" label="实际预紧力（N*m）">
          </el-table-column>
          <el-table-column prop="stand_preload" label="标准预紧力（N*m）">
          </el-table-column>
          <el-table-column prop="end_time" label="预紧结束时间">
          </el-table-column>
          <el-table-column prop="beng_no" label="液压泵编号">
          </el-table-column>
          <el-table-column prop="banshou_no" label="液压扳手编号">
          </el-table-column>
          <el-table-column prop="ways" label="紧固方式">
          </el-table-column>
          <el-table-column prop="operator" label="操作员"> </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </el-drawer>
</template>
<script>
export default {
  props: ["detailVisible", "data"],
  data() {
    return {
      drawer: false,
      direction: "rtl",
      activeName: "first",
      AssemblyData: [
        {
          model: "v23300",
          name: "测试工具1",
          number: "2022030301",
        },
        {
          model: "v23301",
          name: "测试工具2",
          number: "2022030302",
        },
        {
          model: "v23302",
          name: "测试工具3",
          number: "2022030303",
        },
        {
          model: "v23303",
          name: "测试工具4",
          number: "2022030304",
        },
      ],
       oneData: [
        {
          step: 1,
          preload: "2120",
          number: "01",
        },
        {
          step: 2,
          preload: "2126",
          number: "02",
        }
      ],
      twoData: [
        {
          step: 1,
          preload: "2128",
          number: "03",
        },
        {
          step: 2,
          preload: "2100",
          number: "04",
        }
      ],
       fourData: [
        {
          step: 1,
          preload: "2128",
          number: "05",
        },
        {
          step: 2,
          preload: "2100",
          number: "06",
        }
      ],
       sixData: [
        {
          step: 1,
          preload: "2128",
          number: "07",
        },
        {
          step: 2,
          preload: "2100",
          number: "08",
        }
      ],
       nowData: [
        {
          number: '09',
          real_preload: "2128",
          stand_preload: "3000",
          end_time:'2022-03-02 15:31:54',
          beng_no:'200001',
          banshou_no:'300001',
          ways:'单同步',
          operator:'张速'
        },
        {
          number: 10,
          real_preload: "2129",
          stand_preload: "3001",
          end_time:'2022-03-02 16:31:44',
          beng_no:'200002',
          banshou_no:'300002',
          ways:'两同步',
          operator:'张速'
        },
         {
          number: 11,
          real_preload: "2139",
          stand_preload: "3002",
          end_time:'2022-03-02 16:31:44',
          beng_no:'200002',
          banshou_no:'300002',
          ways:'四同步',
          operator:'张速'
        },
         {
          number: 12,
          real_preload: "2129",
          stand_preload: "3003",
          end_time:'2022-03-02 16:31:44',
          beng_no:'200002',
          banshou_no:'300002',
          ways:'六同步',
          operator:'张速'
        }
      ],
       historyData: [
        {
          number: 13,
          real_preload: "2128",
          stand_preload: "3005",
          end_time:'2022-03-02 15:31:54',
          beng_no:'200001',
          banshou_no:'300001',
          ways:'单同步',
          operator:'张速'
        },
        {
          number: 14,
          real_preload: "2129",
          stand_preload: "3006",
          end_time:'2022-03-02 16:31:44',
          beng_no:'200002',
          banshou_no:'300002',
          ways:'两同步',
          operator:'张速'
        },
         {
          number: 15,
          real_preload: "2139",
          stand_preload: "3007",
          end_time:'2022-03-02 16:31:44',
          beng_no:'200002',
          banshou_no:'300002',
          ways:'四同步',
          operator:'张速'
        },
         {
          number: 16,
          real_preload: "2129",
          stand_preload: "3008",
          end_time:'2022-03-02 16:31:44',
          beng_no:'200002',
          banshou_no:'300002',
          ways:'六同步',
          operator:'张速'
        },
         {
          number: 17,
          real_preload: "2128",
          stand_preload: "3009",
          end_time:'2022-03-02 15:31:54',
          beng_no:'200001',
          banshou_no:'300001',
          ways:'单同步',
          operator:'张速'
        },
        {
          number: 18,
          real_preload: "2129",
          stand_preload: "3010",
          end_time:'2022-03-02 16:31:44',
          beng_no:'200002',
          banshou_no:'300002',
          ways:'两同步',
          operator:'张速'
        },
         {
          number: 19,
          real_preload: "2139",
          stand_preload: "3012",
          end_time:'2022-03-02 16:31:44',
          beng_no:'200002',
          banshou_no:'300002',
          ways:'四同步',
          operator:'张速'
        },
         {
          number: 20,
          real_preload: "2129",
          stand_preload: "3013",
          end_time:'2022-03-02 16:31:44',
          beng_no:'200002',
          banshou_no:'300002',
          ways:'六同步',
          operator:'张速'
        }
      ],
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
  },
  computed: {
    drawerVisible: {
      set(val) {
        this.$emit("sendVal", val); // 表示将子组件改变的值传递给父组件
      },
      get() {
        return this.detailVisible; // 表示获取父组件的值
      },
    },
  },
};
</script>
<style scoped>
.detail-item {
  width: 100%;
  padding: 15px 0px;
  list-style-type: none;
}
.item {
  font-size: 14px;
  color: black;
  margin-top: 5px;
}
.el-table .warning-row {
  background: oldlace !important;
}

.el-table .success-row {
  background: #f0f9eb !important;
}
</style>