station-test-ui/src/views/device/flange/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_type}}</span>
              </div>
              <div class="detail-item">
                <span>所属部门：</span>
                <span class="item">{{ data.depart_name }}</span>
              </div>
               <div class="detail-item">
                <span>所属风场：</span>
                <span class="item">{{ data.wind_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>
               <div class="detail-item">
                <span>所属风机编号：</span>
                <span class="item">{{ data.fan_number }}</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">
                <span>位置：</span>
                <span class="item">{{ data.install_position }}</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="6"
              style="margin-top: 10px; font-size: 14px; color: #a0a0a0"
            >
              <div class="detail-item">
                <pre style="display: inline">外    径：</pre>
                <span class="item">{{ data.outside }}</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.bolt_size }}</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.bolt_size }}</span>
              </div>
            </el-col>
            <el-col :span="6"></el-col>
          </div>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="液压扳手" name="second">
        <el-table
          :data="AssemblyData"
          style="width: 100%; margin-left: 20px"
        >
          <el-table-column prop="number" label="编号"> </el-table-column>
          <el-table-column prop="text" label="名称"> </el-table-column>
          <el-table-column prop="name" label="型号"> </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="螺栓紧固方案" name="third">
        <el-tabs tab-position="left" style="width: 100%; margin-left: 20px">
          <el-tab-pane :label="item.name" v-for="item in synschemeData" :key="item.id">
            <el-table :data="item.data" style="width: 100%">
              <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-column prop="real_preload" label="标准扭矩力（N*m）">
              </el-table-column>
              
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
   
      <el-tab-pane label="维保记录" name="five">
          <div class="search-box-area" id="searchBox" style="margin-left:20px">
           <div class="search-item">
          <el-input
            placeholder="法兰编号"
            clearable
            class="filter-item form-search-input fl"
            @keyup.enter.native="handleSearch"
          />
        </div>
        <div class="search-item" style="margin-left:20px">
          <el-input
            placeholder="泵编号"
            clearable
            class="filter-item form-search-input fl"
            @keyup.enter.native="handleSearch"
          />
        </div>
         <el-button
         style="margin-left:20px"
          class="filter-item search fl"
          icon="el-icon-search"
          @click="handleSearch"
          >搜索</el-button
        >
        <el-button
        style="margin-left:20px"
          class="filter-item fl"
          icon="el-icon-refresh"
          @click="handleRefresh"
          >重置</el-button
        >
          </div>
        <el-table :data="historyData" style="width: 100%; margin-left: 20px">
           <el-table-column prop="flange_number" label="法兰编号"> </el-table-column>
          <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="wrench_number" label="拧紧角度"> </el-table-column>
           <el-table-column prop="status" 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-column prop="end_time" label="操作时间">
          </el-table-column>
        </el-table>
        <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange8"
              :current-page="currentPage1"
              :page-size="pageSize"
              layout="total,  prev, pager, next, jumper"
              style="float:right"
              :total="45"
            />
      </el-tab-pane>
    </el-tabs>
  </el-drawer>
</template>
<script>
import toolData from './toolData'
import oneData from './oneData'
import twoData from './twoData'
import fourData from './fourData'
import sixData from './sixData'
import nowData from './nowData'
import historyData from './historyData'
export default {
  props: ["detailVisible", "data"],
  data() {
    return {
      drawer: false,
      direction: "rtl",
      activeName: "first",
      AssemblyData: toolData,
      //螺栓紧固方案
      synschemeData:[],
      nowData: nowData[0],
      historyData: historyData[0],
      pageSize: 10,
      currentPage1: 1,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 1,
    };
  },
  methods: {
    handleClick(tab, event) {
    
       //获取液压扳手
       if(tab.name=='second')
       {
          this.$http.get("wrenchtype",{ params: {id:this.data.wrench} }).then(response => {
            this.AssemblyData = response.data;
          });
       }
       if(tab.name=='third')
       {
         this.$http.get("synlist",{ params: {id:this.data.fastening_scheme} }).then(response => {
            this.synschemeData = response.data;
          });

       }
  
    },
   

    handleRefresh()
    {

    },
    handleSearch(){

    },

    handleSizeChange(val) {
     this.pageSize = val
    },
    handleCurrentChange7(val) {
      this.nowData = nowData[val-1];
    },
    handleCurrentChange8(val) {
      this.historyData = historyData[val-1];
    },
  },
  computed: {
    drawerVisible: {
      set(val) {
        this.$emit("sendVal", val); // 表示将子组件改变的值传递给父组件
      },
      get() {
        return this.detailVisible; // 表示获取父组件的值
      },
    },
  },
};
</script>
<style lang="scss" scoped>
 @import "@/views/device/hydraulic/index.scss";
.detail-item {
  width: 100%;
  padding: 15px 0px;
  list-style-type: none;
}
.item {
  font-size: 14px;
  color: black;
  margin-top: 5px;
}
</style>