8-15 下班提交

XiaoRuby

2023-08-15 76da76135e3a7564b9f81116a2567454ecad3577

8-15 下班提交

 src/App.vue

@@ -26,7 +26,7 @@
</script>
<style>
/* @import url("../static/img/alifont/iconfont.css"); */
@import url("//at.alicdn.com/t/c/font_4179845_lomzsmcvwfg.css");
@import url("//at.alicdn.com/t/c/font_4179845_pixkgb97c4p.css");

* {
  margin: 0;

 src/components/view/measurementManagement.vue

@@ -1,145 +1,417 @@
<template>
  <div>
    <el-row>
      <el-col :span="12" class="top_left_name">计量管理</el-col>
      <el-col :span="12" style="text-align: right;">
        <el-button
          v-show="radio1 == 2"
          @click="routingJump()"
          type="primary"
          size="mini"
          icon="el-icon-plus"
          style="background: #004EA2; "
          >新增</el-button
        >
        <el-button size="mini"
          ><i class="font icon-xiazaidaoru" style="padding-right: 3px;"></i
          >导出</el-button
        >
      </el-col>
    </el-row>
    <div class="top_div">
      <div class="table_top_div">
        <span>计量编号：</span>
        <el-select
          class="table_top_input"
          size="small"
          v-model="value"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
  <div class="main_div">
    <div
      class="first_div"
      :style="
        `width:${addShow ? 0 : 100}%; overflow: hidden;opacity: ${
          addShow ? 0 : 1
        };`
      "
    >
      <el-row>
        <el-col :span="12" class="top_left_name">{{
          radio1 == 1 ? "计量台账" : "计量预测"
        }}</el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button
            v-show="radio1 == 2"
            @click="addShow = true"
            type="primary"
            size="mini"
            icon="el-icon-plus"
            style="background: #004EA2; "
            >新增</el-button
          >
          </el-option>
        </el-select>
        <span>仪器设备名称：</span>
        <el-select
          class="table_top_input"
          size="small"
          v-model="value"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          <el-button size="mini"
            ><i class="font icon-xiazaidaoru" style="padding-right: 3px;"></i
            >导出</el-button
          >
          </el-option>
        </el-select>
        <span>计量单位：</span>
        <el-select
          class="table_top_input"
          size="small"
          v-model="value"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        </el-col>
      </el-row>
      <div class="top_div">
        <div class="table_top_div">
          <span>计量编号：</span>
          <el-select
            class="table_top_input"
            size="small"
            v-model="value"
            placeholder="请选择"
          >
          </el-option>
        </el-select>
        <el-button size="mini" @click="reset"><span>重 置</span></el-button>
        <el-button
          size="mini"
          type="primary"
          @click="selectSearch"
          style="background: #004EA2;"
          ><span>查 询</span></el-button
        >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span>仪器设备名称：</span>
          <el-select
            class="table_top_input"
            size="small"
            v-model="value"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span>计量单位：</span>
          <el-select
            class="table_top_input"
            size="small"
            v-model="value"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-button size="mini" @click="reset"><span>重 置</span></el-button>
          <el-button
            size="mini"
            type="primary"
            @click="selectSearch"
            style="background: #004EA2;"
            ><span>查 询</span></el-button
          >
        </div>
      </div>
      <div class="middle_div">
        <div class="middle_top_div">
          <el-radio-group class="ai-tab-change" v-model="radio1">
            <el-radio-button size="small" label="1">
              <div class="el_radio_button_div">计量台账</div>
            </el-radio-button>
            <el-radio-button size="small" label="2">
              <div class="el_radio_button_div">计量计划</div>
            </el-radio-button>
          </el-radio-group>
        </div>
        <div class="middle_middle_div">
          <el-table
            v-show="radio1 == 1"
            ref="multipleTable"
            :data="tableData"
            border
            tooltip-effect="dark"
            class="middle_middle_table"
            height="calc(100vh - 372px)"
            width="100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="仪器设备编号" min-width="130px">
            </el-table-column>
            <el-table-column label="仪器设备名称" min-width="130px">
            </el-table-column>
            <el-table-column
              label="测量范围"
              min-width="130px"
            ></el-table-column>
            <el-table-column
              label="计量周期"
              min-width="130px"
            ></el-table-column>
            <el-table-column
              label="计量结果"
              min-width="130px"
            ></el-table-column>
            <el-table-column
              label="计量日期"
              min-width="130px"
            ></el-table-column>
            <el-table-column
              label="计量有效期"
              min-width="130px"
            ></el-table-column>
            <el-table-column label="负责人" min-width="130px"></el-table-column>
            <el-table-column
              label="创建日期"
              min-width="130px"
            ></el-table-column>
            <el-table-column label="创建人" min-width="130px"></el-table-column>
            <el-table-column
              label="计量单位"
              min-width="130px"
            ></el-table-column>
            <el-table-column
              label="计量编号"
              min-width="130px"
            ></el-table-column>
            <el-table-column
              fixed="right"
              class="table-fixed"
              min-width="200px"
              label="操作"
              show-overflow-tooltip
            >
              <el-button
                type="text"
                size="mini"
                @click="
                  addShow = true;
                  viewResume = false;
                "
                >查看计量履历</el-button
              >
              <el-button type="text" size="mini">查看附件</el-button>
            </el-table-column>
          </el-table>
          <el-table
            v-show="radio1 == 2"
            ref="multipleTable"
            :data="tableData"
            border
            tooltip-effect="dark"
            class="middle_middle_table"
            height="calc(100vh - 372px)"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="计划单号" min-width="130px">
            </el-table-column>
            <el-table-column label="设备编码" min-width="130px">
            </el-table-column>
            <el-table-column
              label="设备名称"
              min-width="130px"
            ></el-table-column>
            <el-table-column
              label="计划日期"
              min-width="130px"
            ></el-table-column>
            <el-table-column
              label="计划状态"
              min-width="130px"
            ></el-table-column>
            <el-table-column
              label="计量负责人"
              min-width="130px"
            ></el-table-column>
            <el-table-column
              label="计量单位"
              min-width="130px"
            ></el-table-column>
            <el-table-column label="创建人" min-width="130px"></el-table-column>
            <el-table-column
              label="创建日期"
              min-width="130px"
            ></el-table-column>
            <el-table-column
              fixed="right"
              width="200px"
              label="操作"
              show-overflow-tooltip
            >
              <el-button
                type="text"
                size="mini"
                @click="
                  addShow = true;
                  viewResume = false;
                "
                >查看计量履历</el-button
              >
              <el-button type="text" size="mini">查看附件</el-button>
            </el-table-column>
          </el-table>
        </div>

        <div class="middle_under_div">
          <el-pagination
            v-show="radio1 == 1"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[12, 20, 30, 40]"
            :pager-count="9"
            :page-size="12"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
          >
          </el-pagination>
          <el-pagination
            v-show="radio1 == 2"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[12, 20, 30, 40]"
            :pager-count="9"
            :page-size="12"
            layout="total, sizes, prev, pager, next, jumper"
            :total="600"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <div class="middle_div">
      <div class="middle_top_div">
        <el-radio-group class="ai-tab-change" v-model="radio1">
          <el-radio-button size="small" label="1">
            <div class="el_radio_button_div">计量台账</div>
          </el-radio-button>
          <el-radio-button size="small" label="2">
            <div class="el_radio_button_div">计量计划</div>
          </el-radio-button>
        </el-radio-group>
      </div>
      <div class="middle_middle_div">
        <el-table
          v-show="radio1 == 1"
          ref="multipleTable"
          :data="tableData"
          border
          tooltip-effect="dark"
          class="middle_middle_table"
          height="calc(100vh - 325px)"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="日期" width="120">
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址" show-overflow-tooltip>
          </el-table-column>
        </el-table>
        <el-table
          v-show="radio1 == 2"
          ref="multipleTable"
          :data="tableData"
          border
          tooltip-effect="dark"
          class="middle_middle_table"
          height="calc(100vh - 325px)"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="日期" width="120">
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="address" label="地址" show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </div>
      <div class="middle_under_div">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[12, 20, 30, 40]"
          :pager-count="9"
          :page-size="12"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
    <div
      class="second_div"
      :style="
        `width: ${addShow ? 100 : 0}%; overflow: hidden;opacity: ${
          addShow ? 1 : 0
        };`
      "
    >
      <el-row>
        <el-col :span="12" class="top_left_name">{{
          viewResume ? "新增计量计划" : "查看计量履历"
        }}</el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button
            @click="
              addShow = false;
              viewResume = true;
            "
            size="mini"
            :style="`opacity: ${addShow ? 1 : 0};transition: 0s`"
            ><i class="font icon-fanhui"></i>返回</el-button
          >
          <el-button
            v-show="viewResume == true"
            type="primary"
            size="mini"
            icon="el-icon-plus"
            :style="`background: #3a7bfa; opacity: ${addShow ? 1 : 0}`"
            >保存</el-button
          >
        </el-col>
      </el-row>
      <div class="second_div_main">
        <div class="second_div_top">
          <el-descriptions class="secode_div_top_descriptions">
            <template slot="title">
              <span>计划信息</span>
              <span v-show="viewResume == false" style="font-size: 14px;"
                >&ensp;已完成</span
              >
            </template>
            <el-descriptions-item label="计划编号"
              >kooriookami</el-descriptions-item
            >
            <el-descriptions-item label="创建人"
              >18100000000</el-descriptions-item
            >
            <el-descriptions-item label="创建日期">苏州市</el-descriptions-item>
            <el-descriptions-item label="计划日期">苏州市</el-descriptions-item>
            <el-descriptions-item label="计划单位"
              >江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item
            >
            <el-descriptions-item label="负责人">苏州市</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="second_div_middle">
          <div class="el_divider_span">设备信息</div>
          <el-divider></el-divider>
        </div>
        <div class="second_div_table">
          <!-- <div>
            <el-button size="mini" style="padding: 5px 7px;" icon="el-icon-plus"
              ><span style="font-size: 14px;">批量计量</span></el-button
            >
          </div> -->
          <div v-show="viewResume == true">
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              border
              style="width: 100%; margin-top: 12px;"
              height="calc(100vh - 382px)"
            >
              <el-table-column type="selection" width="55" min-width="5%">
              </el-table-column>
              <el-table-column label="仪器设备编码" min-width="10%">
              </el-table-column>
              <el-table-column
                label="仪器设备名称"
                min-width="10%"
              ></el-table-column>
              <el-table-column
                label="测量范围"
                min-width="10%"
              ></el-table-column>
              <el-table-column
                label="计量周期"
                min-width="10%"
              ></el-table-column>
              <el-table-column
                label="计量结果"
                min-width="10%"
              ></el-table-column>
              <el-table-column
                label="计量日期"
                min-width="10%"
              ></el-table-column>
              <el-table-column
                label="计量有效期"
                min-width="10%"
              ></el-table-column>
              <el-table-column label="操作" min-width="10%">
                <el-button type="text" size="mini">作废</el-button>
              </el-table-column>
            </el-table>
            <div class="middle_under_div">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[12, 20, 30, 40]"
                :pager-count="9"
                :page-size="12"
                layout="total, sizes, prev, pager, next, jumper"
                :total="600"
              >
              </el-pagination>
            </div>
          </div>
          <div v-show="viewResume == false">
            <el-table
              :data="tableData"
              tooltip-effect="dark"
              border
              :row-style="{ height: '50px' }"
              :cell-style="{ padding: '0px' }"
              style="width: 100%; margin-top: 12px;"
              height="calc(100vh - 382px)"
            >
              <el-table-column label="仪器设备编码"> </el-table-column>
              <el-table-column label="仪器设备名称"></el-table-column>
              <el-table-column label="测量范围"></el-table-column>
              <el-table-column label="计量周期"></el-table-column>
              <el-table-column label="计量结果"></el-table-column>
              <el-table-column label="计量日期"></el-table-column>
              <el-table-column label="计量有效期"></el-table-column>
              <el-table-column label="负责人"></el-table-column>
              <el-table-column label="创建日期"></el-table-column>
              <el-table-column label="创建人"></el-table-column>
              <el-table-column label="计量单位"></el-table-column>
              <el-table-column label="计量编号"></el-table-column>
            </el-table>
            <div class="middle_under_div">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[12, 20, 30, 40]"
                :pager-count="9"
                :page-size="12"
                layout="total, sizes, prev, pager, next, jumper"
                :total="600"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@@ -160,7 +432,9 @@
  name: "measurementManagement",
  data() {
    return {
      radio1: 1, // 分类切换
      radio1: 1, // 计量台账计量计划切换
      addShow: false, // 新增计量
      viewResume: true, // 点击查看履历显示
      currentPage4: 4,
      value: "",
      options: [
@@ -255,24 +529,36 @@
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    routingJump() {
      this.$router.push("/measure/manage");
    }
  }
};
</script>

<style>
.main_div {
  height: calc(100vh - 110px);
  position: relative;
  width: 100%;
}
.first_div {
  float: left;
  height: calc(100vh - 110px);
  transition: 0.5s;
}
.second_div {
  float: left;
  height: calc(100vh - 110px);
  transition: 0.5s;
}
.top_div {
  width: 100%;
  height: 70px;
  height: 100px;
  background-color: #ffffff;
  margin: 5px 0;
}
.middle_div {
  width: 100%;
  height: calc(100vh - 225px);
  height: calc(100vh - 290x);
  background-color: #ffffff;
}
.middle_top_div {
@@ -284,7 +570,7 @@
}
.middle_middle_div {
  width: 100%;
  height: calc(100vh - 325px);
  height: calc(100vh - 360px);
  margin-top: 5px;
}
.middle_middle_table {
@@ -295,6 +581,7 @@
  width: 99%;
  height: 30px;
  margin-top: 5px;
  padding-bottom: 6px;
  text-align: right;
}
.table_top_input {
@@ -318,4 +605,61 @@
  color: #2661a0;
  line-height: 14px;
}
.second_div_top {
  height: 136px;
  margin-bottom: 5px;
  margin-top: 5px;
}
.second_div_table {
  height: calc(100vh - 342px);
  padding: 0 20px;
}
.second_div_middle {
  height: 30px;
  position: relative;
}
.el_divider_span {
  z-index: 1;
  width: 60px;
  height: 20px;
  position: absolute;
  border-bottom: #538bfb 2px solid;
  color: #538bfb;
  margin-left: 15px;
  font-size: 14px;
}
.el-divider {
  position: absolute;
  background-color: #dcdfe6;
  width: 97%;
  margin: 20px 60px 15px 15px;
}
.second_div_main {
  background-color: #ffffff;
  height: calc(100vh - 150px);
}
.secode_div_top_descriptions {
  padding-left: 20px;
  padding-top: 10px;
}
.el-descriptions__title {
  font-size: 15px;
  font-weight: 500;
}
.el-descriptions__body span {
  padding-left: 30px;
  font-size: 14px;
}
.el-descriptions__table {
  width: 90%;
  height: 80px;
  margin: 0 auto;
}
::-webkit-scrollbar {
  height: 10px;
  background-color: transparent;
}
.icon-fanhui {
  padding-right: 6px;
}
</style>