likang

src/config/componentsMap.js

@@ -84,6 +84,9 @@ export default {
     routeMap: () =>
         import ('@/views/map/routeMap.vue'),
     //设备管理
+    //液压设备管理
+    hyd_equipment: () =>
+        import ('@/views/device/hyd_equipment'),
     hydraulic: () =>
         import ('@/views/device/hydraulic'),
     wrench: () =>

src/views/device/hyd_equipment/checkDetail.vue

@@ -0,0 +1,132 @@
+<template>
+    <el-dialog :modal="false" title="校验记录详情" :visible.sync="drowDetailVisible">
+        <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">{{ record.wrenchNumber}}</span>
+              </div>
+              <div class="detail-item">
+                <pre style="display: inline">外观检查：</pre>
+                <span class="item">{{ record.inspectionVisual==1?'合格':'不合格' }}</span>
+              </div>
+             
+              <div class="detail-item">
+                <span>检测结果：</span>
+                <span class="item">{{ record.preload_three_results==1?'合格':'不合格' }}</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">{{ record.CalibratorName }}</span>
+              </div>
+              <div class="detail-item">
+                <span>校验人：</span>
+                <span class="item">{{ record.CheckName}}</span>
+              </div>
+              <div class="detail-item">
+                <span>签发人: </span>
+                <span class="item">{{ record.IssueName }}</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">{{ record.CalibratorDate}}</span>
+              </div>
+              <div class="detail-item">
+                <pre style="display: inline">校验日期：</pre>
+                <span class="item">{{ record.CheckDate }}</span>
+              </div>
+              <div class="detail-item">
+                <span>签发日期：</span>
+                <span class="item">{{ record.IssueDate }}</span>
+              </div>
+              
+            </el-col>
+            <el-col :span="6"></el-col>
+          </div>
+        </el-row>
+
+        <el-table :data="gridData" style="width: 100%">
+            <el-table-column property="stress" label="压力" ></el-table-column>
+            <el-table-column property="torque" label="扭矩" ></el-table-column>
+        </el-table>
+        
+    </el-dialog>
+</template>
+<script>
+
+  export default {
+    props: ["checkDetailVisible", "record"],
+    data() {
+      return {
+        gridData:[],
+        form: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        },
+        formLabelWidth: '160px'
+      };
+    },
+    computed:{
+        drowDetailVisible:{
+            set(val) {
+                this.$emit("sendVal", val); // 表示将子组件改变的值传递给父组件
+            },
+            get() {
+               this.$http.get("wrenchCheckRecordData?id="+this.record.id).then((response) => {
+                  this.gridData = response.data;
+                });
+                return this.checkDetailVisible; // 表示获取父组件的值
+            }
+        }
+        
+    },
+
+
+  };
+</script>
+<style scoped>
+.table {
+  margin: 0 auto;
+}
+.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;
+}
+.pagination-container{
+  padding-left:25px;
+  padding-right:25px;
+}
+</style>

src/views/device/hyd_equipment/detail.vue

@@ -0,0 +1,148 @@
+<template>
+  <el-drawer
+    title="设备信息"
+    :visible.sync="drawerVisible"
+    :direction="direction"
+    size="45%"
+  >
+    <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">
+                <pre style="display: inline">设备分类：</pre>
+                <span class="item">{{ record.classification }}</span>
+              </div>
+              <div class="detail-item">
+                <pre style="display: inline">设备型号：</pre>
+                <span class="item">{{ record.equipment_model }}</span>
+              </div>
+              <div class="detail-item">
+                <span>名称：</span>
+                <span class="item">{{ record.name }}</span>
+              </div>
+              <div class="detail-item">
+                <span>序列号：</span>
+                <span class="item">{{ record.serial_number }}</span>
+              </div>
+               <div class="detail-item">
+                <span>检验状态：</span>
+                <span class="item">{{ record.check_status1}}</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">{{ record.equ_type_name }}</span>
+              </div>
+              <div class="detail-item">
+                <span>发放单位：</span>
+                <span class="item">{{ record.issue_unit}}</span>
+              </div>
+              <div class="detail-item">
+                <pre style="display: inline">固定资产编号：</pre>
+                <span class="item">{{ record.fixed_asset_number }}</span>
+              </div>
+              <div class="detail-item">
+                <span>上次校验时间：</span>
+                <span class="item">{{ record.check_last_time}}</span>
+              </div>
+                <div class="detail-item">
+                <span>设备状态：</span>
+                <span class="item">{{ record.status1}}</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">{{ record.material_number}}</span>
+              </div>
+              <div class="detail-item">
+                <span>出厂编号：</span>
+                <span class="item">{{ record.factory_number}}</span>
+              </div>
+              <div class="detail-item">
+                <pre style="display: inline">类固资产编号：</pre>
+                <span class="item">{{ record.fixed_asset_number2 }}</span>
+              </div>
+               <div class="detail-item">
+                <span>下次校验时间：</span>
+                <span class="item">{{ record.check_next_time}}</span>
+              </div>
+
+            </el-col>
+            <el-col :span="6"></el-col>
+          </div>
+        </el-row>
+      </el-tab-pane>
+      
+    </el-tabs>
+  </el-drawer>
+</template>
+<script>
+import rlListOperate from "@/layout/rl-list-operate/rlListOperate";
+export default {
+  props: ["detailVisible", "record"],
+  mixins: [rlListOperate],
+  data() {
+    return {
+      drawer: false,
+      direction: "rtl",
+      activeName: "first",
+      nowData: [],
+      queryParam: {
+        device_number: "",
+      }
+    };
+  },
+  methods: {
+    handleClick(){
+
+    }
+  },
+  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;
+}
+.pagination-container{
+  padding-left:25px;
+  padding-right:25px;
+}
+</style>

src/views/device/hyd_equipment/formModel.vue

@@ -0,0 +1,390 @@
+<template>
+  <ele-form-dialog
+    v-bind="formConfig"
+    v-model="formFieldsData"
+    v-dialogDrag
+    :title="title"
+    :request-fn="handleFormSubmit"
+    :visible.sync="DialogVisible"
+    custom-class="abow_dialog"
+    label-width="100px"
+    label-position="left"
+    :dialogAttrs="{ 'close-on-click-modal': false,'top':'8vh'}"
+  />
+</template>
+
+<script>
+import { array } from 'jszip/lib/support';
+export default {
+  props: ["formModelVisible", "title"],
+  data() {
+    // var validateMaxPressure = (rule, value, callback) => {
+    //     if ( (value !== '') && (this.formFieldsData.min_pressure !=='')) {
+    //         var min_pressure = this.formFieldsData.min_pressure - 0;
+    //         var max_pressure = value - 0;
+    //         if (min_pressure > max_pressure) {
+    //             callback(new Error('不能小于最小压力'))
+    //         } else {
+    //             callback()
+    //         }
+    //     } else {
+    //        callback()
+    //     }
+    // };
+    // var validateMinPressure = (rule, value, callback) => {
+    //     if ( (value !== '') && (this.formFieldsData.max_pressure !=='')) {
+    //         var max_pressure = this.formFieldsData.max_pressure - 0;
+    //         var min_pressure = value - 0;
+    //         if (min_pressure > max_pressure) {
+    //             callback(new Error('不能大于最大压力'))
+    //         } else {
+    //             callback()
+    //         }
+    //     } else {
+    //        callback()
+    //     }
+    // };
+    return {
+      formData: {},
+      deviceTypes:[],
+      formFieldsData: {
+        id:'',
+        equipment_type:"",
+        equipment_model:"",
+        material_number: "",
+        name: "",
+        issue_unit:"",
+        fixed_asset_number:"",
+        fixed_asset_number2:'',
+        serial_number:"",
+        factory_number:"",
+        check_last_time:"",
+        check_next_time:"",
+        check_status:"",
+        status:"",
+        list:"",
+      },
+      url: "hydEquipment",
+      formConfig: {
+        formDesc: {
+          equipment_type:{
+            layout: 12,
+            type:"select",
+            label:'设备类型',
+            required:true,
+            options:[],
+            disabled (data) {
+             if(data.id)
+             {
+              return true;
+             }
+            return false;
+          }
+          },
+          equipment_model: {
+            layout: 12,
+            type: "input",
+            label: "型号",
+          },
+           name: {
+             layout: 12,
+            type: "input",
+            label: "名称",
+            required:true
+          },
+          material_number: {
+            layout: 12,
+            type: "input",
+            label: "物料号",
+            required:true,
+          },
+           issue_unit: {
+            layout: 12,
+            type: "input",
+            label: "发放单位",
+          },
+          fixed_asset_number:
+          {
+            layout: 12,
+            type: "input",
+            label: "固定资产编号",
+          },
+          fixed_asset_number2:
+          {
+            layout: 12,
+            type: "input",
+            label: "类固资产编号",
+          },
+          serial_number:{
+            layout: 12,
+            type: "input",
+            label: "序列号",
+
+          },
+          factory_number:{
+            layout: 12,
+            type: "input",
+            label: "出厂编号"
+          },
+          check_last_time:{
+            layout: 12,
+            type: "date",
+            label: "上次校验时间"
+          },
+          check_next_time:{
+            layout: 12,
+            type: "date",
+            label: "下次校验时间"
+          },
+          check_status:{
+            layout: 12,
+            type: "select",
+            label: "校验状态",
+            options:[],
+
+          },
+          status:{
+            layout: 12,
+            type: "select",
+            label: "状态",
+            options:[],
+
+          },
+
+          department_id: {
+            layout: 12,
+            type: "cascader",
+            label: "所属部门",
+            isOptions: true,
+            options: [],
+            required: true,
+            attrs: {
+              props: {
+                label: "department_name",
+                value: "id",
+                emitPath: false,
+                checkStrictly: true
+              }
+            },
+            vif(data)
+            {
+              if(data.equipment_type&&data.equipment_type<5)
+              {
+                return true;
+              }
+              return false;
+            }
+          },
+          number:{
+            layout: 12,
+            type: "input",
+            label: "编号",
+            required:true,
+            vif(data)
+            {
+              if(data.equipment_type&&data.equipment_type<5)
+              {
+                return true;
+              }
+              return false;
+            }
+          },
+          imei: {
+            layout: 12,
+            type: "input",
+            label: "IMEI号",
+            required:true,
+             vif(data)
+            {
+              if(data.equipment_type&&data.equipment_type==2)
+              {
+                return true;
+              }
+              return false;
+            }
+
+          },
+          angle_sensor:{
+            type: 'switch',
+            label: "角度传感器",
+            vif(data)
+            {
+              if(data.equipment_type==3||data.equipment_type==4)
+              {
+                return true;
+              }
+              return false;
+            }
+          },
+          pressure:{
+            layout: 12,
+            type: "input",
+            label: "压力",
+            vif(data)
+            {
+              if(data.equipment_type==3||data.equipment_type==4)
+              {
+                return true;
+              }
+              return false;
+            }
+          },
+           torque:{
+            layout: 12,
+            type: "input",
+            label: "扭矩",
+            vif(data)
+            {
+              if(data.equipment_type==3||data.equipment_type==4)
+              {
+                return true;
+              }
+              return false;
+            }
+          },
+          max_pressure: {
+            layout: 12,
+            type: "input",
+            required: true,
+            label: "最大压力",
+            vif(data)
+            {
+              console.log('我测试了最大压力');
+              if(data.equipment_type&&data.equipment_type==2)
+              {
+                
+                return true;
+              }
+              return false;
+            }
+
+          },
+          min_pressure: {
+            layout: 12,
+            type: "input",
+            required: true,
+            label: "最小压力",
+            vif(data)
+            {
+              if(data.equipment_type&&data.equipment_type==2)
+              {
+                return true;
+              }
+              return false;
+            }
+          },
+          effective_period: {
+             layout: 12,
+            type: "input",
+            required: true,
+            label: "有效周期",
+            vif(data)
+            {
+              if(data.equipment_type&&data.equipment_type==2)
+              {
+                return true;
+              }
+              return false;
+            }
+          },
+         
+          remark: {
+            type: "textarea",
+            label: "显示信息",
+            attrs: {
+              autosizeType: "switch",
+              autosize: false,
+              rows: 2
+            },
+            vif(data)
+            {
+              if(data.equipment_type&&data.equipment_type<5)
+              {
+                return true;
+              }
+              return false;
+            }
+          }
+        },
+        order: ['equipment_type','equipment_model',"name","material_number",'issue_unit','fixed_asset_number','fixed_asset_number2',"serial_number",'factory_number','check_last_time','check_next_time','check_status','status',"number","department_id","pressure","pressure","torque",'angle_sensor',"imei","min_pressure","max_pressure", "effective_period","remark"]
+      }
+    };
+  },
+  created() {
+
+    this.$http.get("departments").then(response => {
+      this.formConfig.formDesc.department_id.options = response.data;
+    });
+     this.$http.get("getHydEquipmentType",{ params: {code:'ToolStatus'} }).then(response => {
+      this.formConfig.formDesc.status.options = response.data;
+    });
+      this.$http.get("getHydEquipmentType",{ params: {code:'Check'} }).then(response => {
+      this.formConfig.formDesc.check_status.options = response.data;
+    });
+      this.$http.get("findAllByPid",{ params: {id:1} }).then(resp => {
+        let data= resp.data;
+        let ar=[];
+        data.forEach((item) => {
+            ar.push({text:item.name,value:item.id})
+        });
+        this.formConfig.formDesc.equipment_type.options = ar;
+     });
+  },
+
+  methods: {
+    //更新内容
+    update()
+    {
+      // this.formFieldsData.equipment_type=this.formFieldsData.equipment_type;
+      if(this.formFieldsData.list)
+      {
+        this.formFieldsData.number = this.formFieldsData.list.number;
+        this.formFieldsData.remark = this.formFieldsData.list.remark;
+        this.formFieldsData.department_id = this.formFieldsData.list.department_id;
+        if(this.formFieldsData.equipment_type==2)
+        {
+          //泵
+           this.formFieldsData.imei = this.formFieldsData.list.imei;
+           this.formFieldsData.max_pressure= this.formFieldsData.list.max_pressure;
+           this.formFieldsData.min_pressure= this.formFieldsData.list.min_pressure;
+           this.formFieldsData.effective_period = this.formFieldsData.list.effective_period
+        }
+        else
+        {
+          //扳手
+           this.formFieldsData.angle_sensor = this.formFieldsData.list.angle_sensor;
+           this.formFieldsData.pressure= this.formFieldsData.list.pressure;
+           this.formFieldsData.torque= this.formFieldsData.list.torque;
+          
+        }
+
+      }
+
+    },
+    handleFormSubmit(data) {
+      this.$parent.handleSubmit();
+    },
+    handleRequest(data) {
+      return Promise.resolve();
+    },
+    handleRequestSuccess() {
+      this.$message.success("发送成功");
+    }
+  },
+  computed: {
+    DialogVisible: {
+      set(val) {
+        //this.$forceUpdate();
+        this.$emit("sendVal", val); // 表示将子组件改变的值传递给父组件
+      },
+      get() {
+        if(this.formModelVisible)
+        {
+          this.update();
+        }
+        return this.formModelVisible; // 表示获取父组件的值
+      }
+    }
+  }
+};
+</script>

src/views/device/hyd_equipment/hydraulic_detail.vue

@@ -0,0 +1,172 @@
+<template>
+  <el-drawer
+    title="设备信息"
+    :visible.sync="drawerVisible"
+    :direction="direction"
+    size="45%"
+  >
+    <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">
+                <pre style="display: inline">编    号：</pre>
+                <span class="item">{{ record.number }}</span>
+              </div>
+              <div class="detail-item">
+                <pre style="display: inline">型    号：</pre>
+                <span class="item">{{ record.model_name }}</span>
+              </div>
+              <div class="detail-item">
+                <span>所属部门：</span>
+                <span class="item">{{ record.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">{{ record.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">{{ record.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">{{ record.supplier }}</span>
+              </div>
+              <div class="detail-item">
+                <span>出厂日期：</span>
+                <span class="item">{{ record.out_date }}</span>
+              </div>
+              <div class="detail-item">
+                <pre style="display: inline">备    注：</pre>
+                <span class="item">{{ record.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">{{ record.min_pressure }}~{{ record.max_pressure }}</span>
+              </div>
+            </el-col>
+          </div>
+        </el-row>
+      </el-tab-pane>
+      <el-tab-pane label="健康状态" name="fourth">
+          <el-table
+            :data="data"
+            style="width: 100%;margin-left: 20px"
+          >
+          <el-table-column prop="longitude" label="经度" align="center"></el-table-column>
+          <el-table-column prop="latitude" label="纬度" align="center"></el-table-column>
+          <el-table-column prop="device_state" label="设备状态" align="center"></el-table-column>
+          <el-table-column prop="run_time" label="运行时长" align="center"></el-table-column>
+          <el-table-column prop="online_time" label="上报时间" align="center"></el-table-column>
+          <el-table-column prop="info" label="维护信息" align="center"></el-table-column>
+          
+        </el-table>
+        <el-pagination
+      background
+      class="pagination-container"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="paginate.current"
+      :page-sizes="paginate.sizes"
+      :page-size="paginate.limit"
+      :layout="paginate.layout"
+      :total="paginate.total"
+    />
+      </el-tab-pane>
+      
+    </el-tabs>
+  </el-drawer>
+</template>
+<script>
+import rlListOperate from "@/layout/rl-list-operate/rlListOperate";
+export default {
+  props: ["detailVisible", "record"],
+  mixins: [rlListOperate],
+  data() {
+    return {
+      drawer: false,
+      direction: "rtl",
+      activeName: "first",
+      nowData: [],
+      url:'maintainLog',
+      queryParam: {
+        device_number: "",
+      }
+    };
+  },
+  methods: {
+    handleClick(){
+
+    }
+  },
+  computed: {
+    drawerVisible: {
+      set(val) {
+        this.$emit("sendVal", val); // 表示将子组件改变的值传递给父组件
+      },
+      get() {
+        if(this.detailVisible){
+          //获取维护记录
+          this.queryParam.device_number=this.record.number
+          this.getList()
+        }
+        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;
+}
+.pagination-container{
+  padding-left:25px;
+  padding-right:25px;
+}
+</style>

src/views/device/hyd_equipment/index.scss

@@ -0,0 +1,109 @@
+.col-setting-popover {
+    min-width: 100px;
+    padding: 9px 16px;
+    .col-setting-title {
+      color: #7f8b93;
+      font-size: 12px;
+    }
+    .col-setting-group {
+      .el-checkbox {
+        display: block;
+        margin-top: 5px;
+      }
+    }
+  }
+  .icyuandianda {
+    font-size: 12px;
+  }
+  .search-box-area {
+    width: 70%;
+    height: 44px;
+    float: left;
+  }
+  .search-operate-area {
+    width: 20%;
+    height: 44px;
+    float: left;
+  }
+  .search-item {
+    width: 25%;
+    height: 44px;
+    float: left;
+  }
+  #searchBox {
+    overflow: hidden;
+  }
+  .upload-dialog .el-dialog__body {
+    padding: 0px, 20px !important;
+  }
+  .columnOption {
+    position: fixed;
+    z-index: 20;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.3);
+    display: flex;
+    flex-direction: row-reverse;
+    .content {
+      width: 140px;
+      height: 100%;
+      background-color: rgb(255, 255, 255);
+      .head {
+        width: 100%;
+        height: 44px;
+        border-bottom: 1px solid #000;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 12px;
+      }
+      .body {
+        width: 100%;
+        height: calc(100% - 88px);
+        box-sizing: border-box;
+        padding-top: 10px;
+        padding-left: 10px;
+        overflow-y: auto;
+        .items {
+          width: 100%;
+          height: 100%;
+          overflow-y: auto;
+          display: flex;
+          flex-direction: column;
+          .el-checkbox {
+            width: 100%;
+            height: 28px;
+            line-height: 28px;
+            margin-bottom: 14px;
+            display: inline-block;
+            font-family: PingFang SC;
+            font-style: normal;
+            font-weight: normal;
+            font-size: 14px;
+            color: #000;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            box-sizing: border-box;
+            padding-left: 14px;
+          }
+          .el-checkbox:hover {
+            background-color: #f5f7fa;
+          }
+        }
+      }
+      .footer {
+        width: 100%;
+        height: 44px;
+        border-top: 1px solid #000;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+  .el-tag {
+    border: 0px;
+  }

src/views/device/hyd_equipment/index.vue

@@ -0,0 +1,767 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container" style="padding-bottom: 0px">
+      <div class="search-box-area" id="searchBox">
+        <div class="search-item">
+          <el-cascader
+            class="filter-item form-search-input fl"
+            v-model="queryParam.department_id"
+            placeholder="请选择所属部门"
+            :options="departments"
+            clearable
+            :props="{
+              checkStrictly: true,
+              label: 'department_name',
+              value: 'id',
+            }"
+            @change="handleChange"
+          ></el-cascader>
+        </div>
+        <div class="search-item">
+          <el-input
+            v-model="queryParam.number"
+            placeholder="请输入设备编号"
+            clearable
+            class="filter-item form-search-input fl"
+            @keyup.enter.native="handleSearch"
+          />
+        </div>
+        <div class="search-item">
+          <el-input
+            v-model="queryParam.name"
+            placeholder="请输入设备名称"
+            clearable
+            class="filter-item form-search-input fl"
+            @keyup.enter.native="handleSearch"
+          />
+        </div>
+        <div class="search-item">
+
+          <el-select
+            v-model="queryParam.model"
+            placeholder="请输入设备型号"
+            class="filter-item form-search-input fl"
+            clearable
+          >
+          <el-option
+                v-for="item in deviceTypes"
+                :key="item.value"
+                :label="item.text"
+                :value="item.value">
+              </el-option>
+          </el-select>
+        </div>
+        <div class="search-item">
+          <el-select
+            v-model="queryParam.is_used"
+            placeholder="启用状态"
+            class="filter-item form-search-input fl"
+            clearable
+          >
+            <el-option value="0" label="未使用">启用</el-option>
+            <el-option value="1" label="已使用">停用</el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="search-operate-area">
+        <!-- <el-input v-model="queryParam.code" placeholder="唯一编码" clearable class="filter-item form-search-input fl" /> -->
+        <el-button
+          class="filter-item search fl"
+          icon="el-icon-search"
+          @click="handleSearch"
+          >搜索</el-button
+        >
+        <el-button
+          class="filter-item fl"
+          icon="el-icon-refresh"
+          @click="handleRefresh"
+          >重置</el-button
+        >
+        <el-button
+          class="filter-item search fl"
+          :icon="this.searchDisplay ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
+          @click="searchDis"
+          >{{ word }}</el-button
+        >
+      </div>
+      <div class="list-operate-area">
+        <!-- <el-button size="mini" class="filter-item search fl" icon="el-icon-plus" @click="handleCreate">添加</el-button> -->
+        <el-button
+          class="filter-item search fl"
+          icon="el-icon-setting"
+          @click="showColumnOption"
+          >列设置</el-button
+        >
+        <el-button
+          class="filter-item search fl"
+          icon="el-icon-refresh-right"
+          @click="refresh"
+          >刷新</el-button
+        >
+      </div>
+    </div>
+    <el-table
+      :data="data"
+      v-loading="loading"
+      ref="multipleTable"
+      @selection-change="hydraulicSelectMulti"
+      @sort-change="sortChange"
+      :dynamicColumnSetting="true"
+      tooltip-effect="dark"
+      style="width: 100%"
+      border
+      fit
+    >
+      <el-table-column
+        type="selection"
+        fixed="left"
+        width="55"
+      ></el-table-column>
+      <el-table-column
+        prop="material_number"
+        label="物料号"
+        align="center"
+        v-if="showColumn.material_number"
+
+        width="120"
+      />
+      <!-- <el-table-column
+        prop="net_state"
+        label="在线状态"
+        align="center"
+        v-if="showColumn.net_state"
+        :show-overflow-tooltip="true"
+        width="80"
+      >
+        <template slot-scope="record">
+          <el-tag type="success" v-if="record.row.net_state == '0'" >在线</el-tag >
+          <el-tag type="gray" v-else-if="record.row.net_state == '1'" >离线</el-tag >
+          <el-tag type="danger" v-else>从未上线</el-tag>
+        </template>
+      </el-table-column> -->
+      <el-table-column
+        prop="classification"
+        label="设备分类"
+        align="center"
+        v-if="showColumn.classification"
+       
+      />
+      <el-table-column
+        prop="equ_type_name"
+        label="设备类别"
+        align="center"
+        v-if="showColumn.equ_type_name"
+       
+        width="120"
+      />
+       <el-table-column
+        prop="name"
+        label="设备名称"
+        align="center"
+        v-if="showColumn.name"
+       
+        width="120"
+      />
+      <el-table-column
+        prop="equipment_model"
+        label="设备型号"
+        align="center"
+        v-if="showColumn.equipment_model"
+      />
+      <el-table-column
+        prop="issue_unit"
+        label="发放单位"
+        align="center"
+        v-if="showColumn.issue_unit"
+       
+      />
+      <el-table-column
+        prop="fixed_asset_number"
+        label="固定资产编号"
+        align="center"
+        v-if="showColumn.fixed_asset_number"
+      />
+       <el-table-column
+        prop="fixed_asset_number2"
+        label="类固资产编号"
+        align="center"
+        v-if="showColumn.fixed_asset_number"
+      />
+
+      <el-table-column
+        prop="serial_number"
+        label="序列号"
+        align="center"
+        v-if="showColumn.serial_number"
+  
+      />
+      <el-table-column
+        prop="factory_number"
+        label="出厂编号"
+        align="center"
+       
+        v-if="showColumn.factory_number"
+      />
+      <el-table-column
+        prop="check_last_time"
+        label="上次校验时间"
+        align="center"
+        v-if="showColumn.check_last_time"
+       
+        width="100"
+      />
+      <el-table-column
+        prop="check_next_time"
+        label="下次校验时间"
+        align="center"
+       
+        width="100"
+        v-if="showColumn.check_next_time"
+      />
+      <el-table-column
+        prop="check_status1"
+        label="校验状态"
+        align="center"
+        v-if="showColumn.check_status1"
+      />
+       <el-table-column
+        prop="status1"
+        label="状态"
+        align="center"
+        v-if="showColumn.status1"
+       
+      />
+      <!-- <el-table-column
+        prop="status"
+        label="状态"
+        align="center"
+        v-if="showColumn.status"
+        :show-overflow-tooltip="true"
+      >
+        <template slot-scope="record">
+          <el-switch
+            v-model="record.row.is_used"
+            active-color="#13ce66"
+            @change="changeUsedEvent(record.row,$event)"
+            inactive-color="#ff4949">
+          </el-switch>
+        </template>
+      </el-table-column> -->
+
+       <!-- <el-table-column
+        prop="online_time"
+        label="在线时间"
+        align="center"
+        v-if="showColumn.online_time"
+        width="130"
+       
+      />
+       <el-table-column
+        prop="check_time"
+        label="校准日期"
+        align="center"
+        v-if="showColumn.check_time"
+        width="130"
+       
+      />
+      <el-table-column
+        prop="effective_period"
+        label="有效周期"
+        align="center"
+        v-if="showColumn.effective_period"
+        width="100"
+       
+      />
+      <el-table-column
+        prop="effective_time"
+        label="有效截止时间"
+        align="center"
+        v-if="showColumn.effective_time"
+        width="130"
+       
+      />
+      <el-table-column
+        prop="creator_user"
+        label="导入用户"
+        align="center"
+        v-if="showColumn.creator_user"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        prop="created_at"
+        label="添加时间"
+        align="center"
+        v-if="showColumn.created_at"
+        :show-overflow-tooltip="true"
+        width="130"
+       
+      />
+       <el-table-column
+        prop="remark"
+        label="显示信息"
+        align="center"
+        v-if="showColumn.remark"
+        :show-overflow-tooltip="true"
+      /> -->
+      <el-table-column
+        label="操作"
+        width="180"
+        align="center"
+        fixed="right"
+      >
+        <template slot-scope="record">
+          <el-tooltip
+            content="修改"
+            placement="top"
+            :enterable="false"
+          >
+            <el-button
+              type="primary"
+              size="mini"
+              icon="el-icon-edit"
+              @click="handleUpdate(record.row)"
+            ></el-button>
+          </el-tooltip>
+          <el-tooltip
+            content="查看"
+            placement="top"
+            :enterable="false"
+          >
+            <el-button
+              type="primary"
+              size="mini"
+              icon="el-icon-view"
+              @click="handleDetail(record.row)"
+            ></el-button>
+          </el-tooltip>
+          <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(record.row.id)" />
+        </template>
+      </el-table-column>
+    </el-table>
+    <transition name="fade">
+      <div class="columnOption" v-show="isShowColumn">
+        <div class="content">
+          <div class="head">选择显示字段</div>
+          <div class="body">
+            <el-checkbox v-model="checkList.depart_name" disabled>所属部门</el-checkbox>
+            <!-- <el-checkbox v-model="checkList.alarm_state_text" disabled>告警状态</el-checkbox> -->
+            <el-checkbox v-model="checkList.material_number">物料号</el-checkbox>
+            <el-checkbox v-model="checkList.classification">设备分类</el-checkbox>
+            <el-checkbox v-model="checkList.equ_type_name">设备类别</el-checkbox>
+            <el-checkbox v-model="checkList.name">名称</el-checkbox>
+            <el-checkbox v-model="checkList.equipment_model">设备型号</el-checkbox>
+            <el-checkbox v-model="checkList.fixed_asset_number">固定资产编号</el-checkbox>
+            <el-checkbox v-model="checkList.fixed_asset_number2">类固定资产编号</el-checkbox>
+            <el-checkbox v-model="checkList.serial_number">序列号</el-checkbox>
+            <el-checkbox v-model="checkList.factory_number">出厂编号</el-checkbox>
+            <el-checkbox v-model="checkList.check_last_time">上次校验时间</el-checkbox>
+            <el-checkbox v-model="checkList.check_next_time">下次校验时间</el-checkbox>
+            <el-checkbox v-model="checkList.check_status1">校验状态</el-checkbox>
+            <el-checkbox v-model="checkList.status1">状态</el-checkbox>
+          </div>
+          <div class="footer">
+            <el-button size="small" type="primary" plain @click="saveColumn"
+              >保存列配置</el-button
+            >
+          </div>
+        </div>
+      </div>
+    </transition>
+    <el-button
+      type="primary"
+      icon="el-icon-plus"
+      :loading="downloadLoading"
+      style="margin-top: 15px"
+      @click="handleCreate"
+      >添加</el-button
+    >
+    <el-button
+      type="danger"
+      icon="el-icon-delete"
+      v-if="selectedIds.length > 0"
+      style="margin-top: 15px"
+      @click="handleMultiDelete()"
+      >删除</el-button
+    >
+    <el-button
+      type="warning"
+      icon="el-icon-download"
+      :loading="downloadLoading"
+      style="margin-top: 15px"
+      @click="exportExcel"
+      >导出</el-button
+    >
+    <el-button
+      type="success"
+      icon="el-icon-upload"
+      :loading="downloadLoading"
+      style="margin-top: 15px"
+      @click="importExcel"
+      >导入</el-button
+    >
+    <el-pagination
+      background
+      class="pagination-container"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="paginate.current"
+      :page-sizes="paginate.sizes"
+      :page-size="paginate.limit"
+      :layout="paginate.layout"
+      :total="paginate.total"
+    />
+    <keep-alive>
+     <form-model
+      @sendVal="closeDialog"
+      :formModelVisible="formVisible"
+      :title="title"
+      :ref="formName"
+    />
+    </keep-alive>
+    <detail
+      :detailVisible="detailVisible"
+       @sendVal="closeDrawer"
+       :record="detail"
+    />
+   
+     <hydraulicDetail
+      :detailVisible="hydraulicDetailVisible"
+       @sendVal="closeDrawer"
+       :record="hydraulicDetail"
+    />
+     <wrenchDetail
+      :detailVisible="wrenchDetailVisible"
+       @sendVal="closeDrawer"
+       :record="wrenchDetail"
+    />
+
+    <!-- 导入弹框 -->
+    <el-dialog
+      title="导入液压设备"
+      append-to-body
+      width="400px"
+      :visible.sync="uploadDialogVisible"
+      custom-class="upload-dialog"
+    >
+      <el-cascader
+        v-model="selectedDepartId"
+        class="filter-item form-search-input fl"
+        :options="departments"
+        :props="{ checkStrictly: true, label: 'department_name', value: 'id' }"
+        style="margin-bottom: 10px"
+        @change="changeCards"
+      ></el-cascader>
+      <el-upload
+        class="upload-demo"
+        drag
+        :action="actionUrl"
+        :headers="headers"
+        :before-upload="beforeUpload"
+        :show-file-list="true"
+        :on-change="onchange"
+        :on-remove="onremove"
+        :on-exceed="onexeced"
+        :limit="1"
+        ref="upload"
+      >
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">
+          将文件拖到此处，或
+          <em>点击上传</em>
+        </div>
+        <div class="el-upload__tip upload-tips" slot="tip">
+          只能上传xls/xlsx文件
+        </div>
+      </el-upload>
+      <el-link
+        type="primary"
+        href="https://rlfd.oss-cn-hangzhou.aliyuncs.com/smart_tool/import_pump.xls"
+        style="margin-top: 10px"
+        >下载模板</el-link
+      >
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="uploadDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="importCards" :loading="loadings">{{
+          submitText
+        }}</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import rlListOperate from "@/layout/rl-list-operate/rlListOperate";
+import { action } from "@/directive/permission/index.js";
+import { getToken } from "../../../utils/auth";
+import detail from "./detail.vue"
+import wrenchDetail from "./wrench_detail.vue"
+import hydraulicDetail from "./hydraulic_detail.vue"
+import formModel from './formModel.vue'
+export default {
+  name: "hydraulic",
+  directives: { action },
+  mixins: [rlListOperate],
+  components: {
+    formModel,
+    detail,
+    wrenchDetail,
+    hydraulicDetail
+  },
+  data() {
+    return {
+      url: "hydEquipment",
+      queryParam: {
+        number: "",
+        department_id: [],
+        name: "",
+        model: "",
+        is_used: "",
+      },
+      deviceTypes:[],
+      current_type: {
+        0: "success",
+        1: "danger",
+      },
+      formName:'hydraulic',
+      formVisible:false,
+      //搜索
+      searchDisplay: true,
+      departments: [],
+
+      //详情
+      detailVisible:false,
+      detail:{},
+      //泵详情
+      hydraulicDetailVisible:false,
+      hydraulicDetail:{},
+      //扳手详情
+      wrenchDetailVisible:false,
+      wrenchDetail:{},
+
+      isShowColumn: false,
+      // 列的配置化对象，存储配置信息
+      checkList: {},
+      showColumn: {
+        material_number: true,
+        classification: true,
+        equ_type_name:true,
+        name:true,
+        equipment_model: true,
+        issue_unit: true,
+        fixed_asset_number:true,
+        fixed_asset_number2: true,
+        serial_number: true,
+        factory_number:true,
+        check_last_time:true,
+        check_next_time:true,
+        check_status1:true,
+        status1: true,
+      },
+      //导入请求url
+      actionUrl: process.env.VUE_APP_BASE_API + "/upload/file_excel",
+      headers: { authorization: "Bearer " + getToken() },
+      excel_url: "", //上传学生Excel返回的url
+      uploadDialogVisible: false, //下发配置显示与否
+      selectedDepartId: "",
+      loadings: false,
+      submitText: "确 定",
+    };
+  },
+  created() {
+    this.$http.get("departments").then((response) => {
+      this.departments = response.data;
+    });
+
+    // 0-液压泵
+    this.$http.get("get_device_mold",{ params: {type:0} }).then(resp => {
+        this.deviceTypes = resp.data
+     });
+  },
+  methods: {
+   
+    handleChange(val) {
+      //  console.log(val)
+      this.queryParam.department_id = val;
+      this.handleSearch();
+    },
+    hydraulicSelectMulti(data) {
+      this.selectedIds = [];
+      data.forEach((item) => {
+        this.selectedIds.push(item.id);
+      });
+    },
+    refresh() {
+      this.queryParam.page = this.paginate.current;
+      this.getList();
+    },
+    searchDis() {
+      this.searchDisplay = !this.searchDisplay;
+      var searchBoxHeght = document.getElementById("searchBox");
+      if (this.searchDisplay == false) {
+        searchBoxHeght.style.height = 40 + "px";
+      } else {
+        searchBoxHeght.style.height = "auto";
+      }
+    },
+    showColumnOption() {
+      this.isShowColumn = true;
+    },
+    saveColumn() {
+      localStorage.setItem("hydEquSet", JSON.stringify(this.checkList));
+      this.isShowColumn = false;
+    },
+    handleDetail(row){
+      if(row.equipment_type==2)
+      {
+        this.hydraulicDetailVisible=true;
+        this.hydraulicDetail=row;
+      }
+      if(row.equipment_type==2||row.equipment_type==3)
+      {
+        this.wrenchDetailVisible=true;
+        this.wrenchDetail=row;
+
+      }
+      else
+      {
+         this.detailVisible = true,
+         this.detail = row
+      }
+    },
+    closeDrawer(){
+      this.detailVisible = false;
+      this.hydraulicDetailVisible=false;
+      this.wrenchDetailVisible=false;
+    },
+    changeUsedEvent(row,value){
+
+      this.$http.put('hydraulic/' + row.id, { is_used: value }).then(resp => {
+          if (resp.code === 10000) {
+              this.$message.success('操作成功')
+              // row[field] = val
+              // this.$emit('rowClick', row)
+          }
+      })
+    },
+    importExcel() {
+      this.uploadDialogVisible = true;
+    },
+    changeCards(v) {
+      this.selectedDepartId = v[v.length - 1];
+    },
+    beforeUpload(file) {
+      if (!/\.(xlsx|xls|XLSX|XLS)$/.test(file.name)) {
+        this.$notify.error({
+          title: "错误",
+          message: "上传文件只能为excel文件，且为xlsx,xls格式",
+        });
+        return false;
+      }
+      return true;
+    },
+    onremove() {
+      //移除文件钩子
+      this.excel_url = "";
+    },
+    onexeced(files) {
+      if (files.length == 1) {
+        this.$message.error("只能上传一个文件");
+      }
+    },
+    onchange(file, fileList) {
+      if (file.response) {
+        this.$message.success(file.response.data.msg);
+        this.excel_url = file.response.data.excel_url;
+      } else {
+        // console.log(file);
+      }
+    },
+    importCards() {
+      // console.log(this.excel_url);
+      var url = this.excel_url,
+        depart_id = this.selectedDepartId;
+      if (depart_id == "") {
+        this.$message.error("请选择部门");
+        return;
+      }
+      if (url == "") {
+        this.$message.error("请上传文件");
+        return;
+      }
+      this.loadings = true;
+      this.submitText = "导入中";
+      this.$http
+        .post("cardDevice/import", { url: url, depart_id: depart_id })
+        .then((response) => {
+          if (response.data.error) {
+            this.$message.error(response.data.msg);
+          } else {
+            this.$message.success(response.data);
+          }
+          this.excel_url = "";
+          this.selectedDepartId = "";
+          this.$refs.upload.clearFiles();
+          this.loadings = false;
+          this.submitText = "确定";
+          this.uploadDialogVisible = false;
+          this.getList();
+        });
+    },
+  },
+  watch: {
+    // 监听复选框配置列所有的变化
+    checkList: {
+      handler: function (newnew, oldold) {
+        // console.log(newnew);
+        this.showColumn = newnew;
+        // 这里需要让表格重新绘制一下，否则会产生固定列错位的情况
+        this.$nextTick(() => {
+          this.$refs.multipleTable.doLayout();
+        });
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  computed: {
+    word: function () {
+      if (this.searchDisplay == false) {
+        //对文字进行处理
+        return "展开";
+      } else {
+        return "收起";
+      }
+    },
+  },
+  mounted() {
+    // this.getIsUseVoice();
+    this.$nextTick(function () {
+      this.searchDis();
+    });
+    // 发请求得到checkListInitData的列的名字
+    if (localStorage.getItem("hydEquSet")) {
+      this.checkList = JSON.parse(localStorage.getItem("hydEquSet"));
+    } else {
+      this.checkList = {
+        material_number: true,
+        classification: true,
+        equ_type_name:true,
+        name:true,
+        equipment_model: true,
+        issue_unit: true,
+        fixed_asset_number:true,
+        fixed_asset_number2: true,
+        serial_number: true,
+        factory_number:true,
+        check_last_time:true,
+        check_next_time:true,
+        check_status1:true,
+        status1: true,
+      };
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+ @import "@/views/device/hydraulic/index.scss";
+</style>

src/views/device/hyd_equipment/wrenchCheckDetail.vue

@@ -0,0 +1,132 @@
+<template>
+    <el-dialog :modal="false" title="校验记录详情" :visible.sync="drowDetailVisible">
+        <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">{{ record.wrenchNumber}}</span>
+              </div>
+              <div class="detail-item">
+                <pre style="display: inline">外观检查：</pre>
+                <span class="item">{{ record.inspectionVisual==1?'合格':'不合格' }}</span>
+              </div>
+             
+              <div class="detail-item">
+                <span>检测结果：</span>
+                <span class="item">{{ record.preload_three_results==1?'合格':'不合格' }}</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">{{ record.CalibratorName }}</span>
+              </div>
+              <div class="detail-item">
+                <span>校验人：</span>
+                <span class="item">{{ record.CheckName}}</span>
+              </div>
+              <div class="detail-item">
+                <span>签发人: </span>
+                <span class="item">{{ record.IssueName }}</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">{{ record.CalibratorDate}}</span>
+              </div>
+              <div class="detail-item">
+                <pre style="display: inline">校验日期：</pre>
+                <span class="item">{{ record.CheckDate }}</span>
+              </div>
+              <div class="detail-item">
+                <span>签发日期：</span>
+                <span class="item">{{ record.IssueDate }}</span>
+              </div>
+              
+            </el-col>
+            <el-col :span="6"></el-col>
+          </div>
+        </el-row>
+
+        <el-table :data="gridData" style="width: 100%">
+            <el-table-column property="stress" label="压力" ></el-table-column>
+            <el-table-column property="torque" label="扭矩" ></el-table-column>
+        </el-table>
+        
+    </el-dialog>
+</template>
+<script>
+
+  export default {
+    props: ["checkDetailVisible", "record"],
+    data() {
+      return {
+        gridData:[],
+        form: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        },
+        formLabelWidth: '160px'
+      };
+    },
+    computed:{
+        drowDetailVisible:{
+            set(val) {
+                this.$emit("sendVal", val); // 表示将子组件改变的值传递给父组件
+            },
+            get() {
+               this.$http.get("wrenchCheckRecordData?id="+this.record.id).then((response) => {
+                  this.gridData = response.data;
+                });
+                return this.checkDetailVisible; // 表示获取父组件的值
+            }
+        }
+        
+    },
+
+
+  };
+</script>
+<style scoped>
+.table {
+  margin: 0 auto;
+}
+.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;
+}
+.pagination-container{
+  padding-left:25px;
+  padding-right:25px;
+}
+</style>

src/views/device/hyd_equipment/wrench_detail.vue

@@ -0,0 +1,227 @@
+<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">
+                <pre style="display: inline">设备分类：</pre>
+                <span class="item">{{ record.classification }}</span>
+              </div>
+              <div class="detail-item">
+                <pre style="display: inline">设备型号：</pre>
+                <span class="item">{{ record.equipment_model }}</span>
+              </div>
+              <div class="detail-item">
+                <span>名称：</span>
+                <span class="item">{{ record.name }}</span>
+              </div>
+              <div class="detail-item">
+                <span>序列号：</span>
+                <span class="item">{{ record.serial_number }}</span>
+              </div>
+               <div class="detail-item">
+                <span>检验状态：</span>
+                <span class="item">{{ record.check_status1}}</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">{{ record.equ_type_name }}</span>
+              </div>
+              <div class="detail-item">
+                <span>发放单位：</span>
+                <span class="item">{{ record.issue_unit}}</span>
+              </div>
+              <div class="detail-item">
+                <pre style="display: inline">固定资产编号：</pre>
+                <span class="item">{{ record.fixed_asset_number }}</span>
+              </div>
+              <div class="detail-item">
+                <span>上次校验时间：</span>
+                <span class="item">{{ record.check_last_time}}</span>
+              </div>
+                <div class="detail-item">
+                <span>设备状态：</span>
+                <span class="item">{{ record.status1}}</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">{{ record.material_number}}</span>
+              </div>
+              <div class="detail-item">
+                <span>出厂编号：</span>
+                <span class="item">{{ record.factory_number}}</span>
+              </div>
+              <div class="detail-item">
+                <pre style="display: inline">类固资产编号：</pre>
+                <span class="item">{{ record.fixed_asset_number2 }}</span>
+              </div>
+               <div class="detail-item">
+                <span>下次校验时间：</span>
+                <span class="item">{{ record.check_next_time}}</span>
+              </div>
+
+            </el-col>
+            <el-col :span="6"></el-col>
+          </div>
+        </el-row>
+      </el-tab-pane>
+      <el-tab-pane label="校验记录" name="fourth">
+        <el-table :data="data" style="width: 100%; margin-left: 20px">
+          <el-table-column prop="CalibratorName" label="校准人名称" align="center"></el-table-column>
+          <el-table-column prop="CheckName" label="校验人名称" align="center"></el-table-column>
+          <el-table-column prop="IssueName" label="签发人名称" align="center"></el-table-column>
+          <el-table-column  label="检测是否合格" align="center">
+           <template slot-scope="scope">
+              <p  v-if="scope.row.preload_three_results==1">合格</p>
+              <p  v-else style="color:red">不合格</p>
+            </template>
+          </el-table-column>
+          <el-table-column label="外观是否合格" align="center">
+            <template slot-scope="scope">
+                <p  v-if="scope.row.inspectionVisual==1">合格</p>
+                <p  v-else style="color:red">不合格</p>
+              </template>
+          </el-table-column>
+          <el-table-column prop="CheckDate" label="检验时间" align="center" min-width="160"></el-table-column>
+          <el-table-column
+        label="操作"
+        width="180"
+        align="center"
+        fixed="right"
+      >
+        <template slot-scope="record">
+          <el-tooltip
+            content="查看"
+            placement="top"
+            :enterable="false"
+          >
+            <el-button
+              type="primary"
+              size="mini"
+              icon="el-icon-view"
+              @click="handleDetail(record.row)"
+            ></el-button>
+          </el-tooltip>
+       
+        </template>
+      </el-table-column>
+        </el-table>
+        <el-pagination
+      background
+      class="pagination-container"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="paginate.current"
+      :page-sizes="paginate.sizes"
+      :page-size="paginate.limit"
+      :layout="paginate.layout"
+      :total="paginate.total"
+    />
+      </el-tab-pane>
+     
+    </el-tabs>
+    <checkdetail :checkDetailVisible="checkDetailVisible" :record="detail"  @sendVal="closeDrawer"></checkdetail>
+  </el-drawer>
+
+</template>
+<script>
+import rlListOperate from "@/layout/rl-list-operate/rlListOperate";
+import checkdetail from './checkDetail.vue';
+export default {
+  components: { checkdetail },
+  props: ["detailVisible", "record"],
+   mixins: [rlListOperate],
+  data() {
+    return {
+      url:'wrenchCheckRecord',
+      drawer: false,
+      data:[],
+      direction: "rtl",
+      activeName: "first",
+      detail:'',
+      checkDetailVisible:false
+    };
+  },
+  methods: {
+
+    handleClick(tab, event) {
+      // console.log(tab, event);
+    },
+    closeDrawer(){
+      this.checkDetailVisible = false
+    },
+    handleDetail(row){
+
+      this.detail = row;
+      this.checkDetailVisible=true;
+    },
+    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() {
+        if(this.detailVisible){
+          //获取维护记录
+          this.queryParam.wrench_id=this.record.list.id;
+          this.getList()
+        }
+        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;
+}
+.pagination-container{
+  padding-left:25px;
+  padding-right:25px;
+}
+</style>