设备页面-样式优化

gaoluyang

2025-03-24 50756d8ae4d36a4517ab1d4072d64b20fc52f6b4

设备页面-样式优化

 src/views/CNAS/resourceDemand/device/component/equipmentAccident.vue

@@ -30,7 +30,7 @@
          </el-table-column>
        </el-table>
        <el-pagination :current-page="1" :page-size="pagination1.size" :page-sizes="[10, 20, 30, 50, 100]"
          :total="pagination1.total" layout="->,total, sizes, prev, pager, next, jumper"
          :total="pagination1.total" layout="->,total, sizes, prev, pager, next, jumper" background
          @size-change="handleSizeChange1" @current-change="handleCurrentChange1">
        </el-pagination>
      </div>

 src/views/CNAS/resourceDemand/device/component/equipmentFailure.vue

@@ -28,7 +28,7 @@
          </el-table-column>
        </el-table>
        <el-pagination :current-page="1" :page-size="pagination1.size" :page-sizes="[10, 20, 30, 50, 100]"
          :total="pagination1.total" layout="->,total, sizes, prev, pager, next, jumper"
          :total="pagination1.total" layout="->,total, sizes, prev, pager, next, jumper" background
          @size-change="handleSizeChange1" @current-change="handleCurrentChange1">
        </el-pagination>
      </div>

 src/views/CNAS/resourceDemand/device/component/equipmentScrap.vue

@@ -30,7 +30,7 @@
        </el-table>
        <el-pagination :current-page="1" :page-size="pagination1.size" :page-sizes="[10, 20, 30, 50, 100]"
          :total="pagination1.total" layout="->,total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange1" @current-change="handleCurrentChange1">
          @size-change="handleSizeChange1" @current-change="handleCurrentChange1" background>
        </el-pagination>
      </div>
    </div>

 src/views/CNAS/resourceDemand/device/component/inspectionOfEquipment.vue

@@ -38,7 +38,7 @@
          </el-table-column>
        </el-table>
        <el-pagination :current-page="1" :page-size="pagination1.size" :page-sizes="[10, 20, 30, 50, 100]"
          :total="pagination1.total" layout="->,total, sizes, prev, pager, next, jumper"
          :total="pagination1.total" layout="->,total, sizes, prev, pager, next, jumper" background
          @size-change="handleSizeChange1" @current-change="handleCurrentChange1">
        </el-pagination>
      </div>

 src/views/CNAS/resourceDemand/device/component/operationInstruction.vue

@@ -40,7 +40,7 @@
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="1"
      :page-sizes="[10, 20, 30, 50, 100]" :page-size="search.size" layout="->,total, sizes, prev, pager, next, jumper"
      :total="search.total">
      :total="search.total" background>
    </el-pagination>
    <el-dialog :visible.sync="dialogVisible" title="受控申请" width="60%">
      <div style="height: 60vh; overflow-y: auto; overflow-x: hidden;">

 src/views/CNAS/resourceDemand/device/component/state.vue

@@ -2,27 +2,20 @@
<template>
  <div>
    <div class="search">
      <el-row :gutter="10" style="width: 100%;">
        <el-col :span="20" style="display: flex;flex-wrap: wrap;">
          <div class="search_thing">
            <div class="search_label">流程编号：</div>
            <div class="search_input">
              <el-input v-model="search.processNumber" clearable placeholder="请输入" size="small" style="width: 100%"
                @keyup.enter.native="getDeviceStatePage(clickNodeVal.value)"></el-input>
            </div>
          </div>
          <div class="search_thing" style="padding-left: 20px;">
            <el-button size="mini" type="primary" @click="getDeviceStatePage(clickNodeVal.value)">查询</el-button>
            <el-button size="mini" @click="resetSearch">重置</el-button>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="btns">
            <el-button size="small" type="primary" @click="dialogVisible = true">新建</el-button>
            <el-button :loading="outLoading" size="small" type="primary" @click="handleDown">导出Excel</el-button>
          </div>
        </el-col>
      </el-row>
      <el-form :model="search" ref="search" size="small" :inline="true">
        <el-form-item label="流程编号">
          <el-input v-model="search.processNumber" clearable placeholder="请输入" size="small" style="width: 100%"
                    @keyup.enter.native="getDeviceStatePage(clickNodeVal.value)"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="getDeviceStatePage(clickNodeVal.value)">查询</el-button>
          <el-button size="mini" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-button size="small" type="primary" @click="dialogVisible = true">新建</el-button>
        <el-button :loading="outLoading" size="small" type="primary" @click="handleDown">导出Excel</el-button>
      </div>
    </div>
    <div>
      <el-table :data="tableDatalist" height="calc(100vh - 20em)" style="width: 100% ;"
@@ -54,7 +47,7 @@
      </el-table>
      <el-pagination :current-page="1" :page-size="search.size" :page-sizes="[10, 20, 30, 50, 100]"
        :total="search.total" layout="->,total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
        @current-change="handleCurrentChange" background>
      </el-pagination>
    </div>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisible" title="设备情况"
@@ -509,98 +502,10 @@
</script>

<style scoped>
.dialog-content {
  max-height: 70vh;
  /* 设置最大高度 */
  overflow-y: auto;
  /* 启用垂直滚动 */
}

h4 {
  font-weight: 400;
  font-size: 16px;
  margin: 10px 0;
}

/*
保存提交按钮样式
*/
h4 .title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

h4 .title .line {
  display: inline-block;
  width: 3px;
  height: 16px;
  background: #3A7BFA;
  margin-right: 4px;
}

.tables {
  width: 100%;
  height: calc(100vh - 15em);
}

.el-from {
  max-width: 400px;
  margin: 0 auto;
}

.form-row {
  display: flex;
  justify-content: space-between;
}


.form-row .el-form-item {
  flex: 1;
  /* 每个表单项占据相同比例的空间 */
  margin-right: 100px;
  /* 可选：为右侧元素添加间距 */
}

/* 移除最后一个元素的右边距 */
.form-row .el-form-item:last-child {
  margin-right: 0;

}

.search {
  background-color: #fff;
  margin: 10px 0;
  height: 46px;
  display: flex;
  align-items: center;
  position: relative;
}

.search_thing {
  display: flex;
  align-items: center;
  height: 40px;
}

.search_label {
  width: 70px;
  font-size: 14px;
  text-align: right;
}

.search_input {
  width: 70%;
}

.btns {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
}

.form .search_label {
  width: 120px;
  justify-content: space-between;
  margin-top: 10px;
}
</style>