修改表格

wwl

2024-12-12 b5cb047de1308844583d07d7fc5ff5c5c2accec7

 src/views/doctor/checkAll/index.vue

@@ -247,7 +247,7 @@
      <div class="top">
        <table
          style="
            width: 98%;
            width: 100%;
            margin: 10px 10px;
            border: 1px solid #dfe6ec;
            border-collapse: collapse;
@@ -311,32 +311,32 @@

      <div style="margin-right: 10px; display: flex" class="btnbox">
        <div class="btn1" v-if="msgtuwen == 'y' || msgtuwen == 'Y'">
          <el-button @click="Graphicreport()" type="primary"
            >图文报告</el-button
          >
          <el-button @click="Graphicreport()" type="primary">
            <span class="vertical-text">图文报告</span>
          </el-button>
        </div>
        <div class="btn1">
          <el-button @click="historicalreport()" type="primary"
            >历史报告</el-button
            ><span class="vertical-text">历史报告</span></el-button
          >
        </div>
        <div v-if="tableAll.tjCategory == '02'" class="btn1">
          <el-button @click="medicalhistory()" type="primary"
            >职业病史</el-button
            ><span class="vertical-text">职业病史</span></el-button
          >
        </div>
        <div class="btn1" v-if="msgjianqian == 'y' || msgjianqian == 'Y'">
          <el-button @click="jianqian()" type="primary">检前问诊</el-button>
          <el-button @click="jianqian()" type="primary"><span class="vertical-text">检前问诊</span></el-button>
        </div>

        <div class="btn1">
          <el-button @click="xiangmuqingkuang()" type="primary"
            >项目情况</el-button
            ><span class="vertical-text">项目情况</span></el-button
          >
        </div>
        <div class="btn1">
          <el-button @click="yichangjieguo()" type="primary"
            >异常结果</el-button
            ><span class="vertical-text">异常结果</span></el-button
          >
        </div>
      </div>
@@ -346,7 +346,7 @@
          style="
            font-size: 14px;
            height: calc(100% - 11%);
            width: 1300px;
            width: 1100px;
            margin-left: 10px;
          "
        >
@@ -368,7 +368,7 @@
                :row-style="changRed"
                :header-cell-style="{ background: '#aad8df' }"
              >
                <el-table-column align="center" label="检测项目" width="240">
                <el-table-column align="center" label="检测项目" width="464">
                  <template slot-scope="scope">
                    <div>{{ scope.row.proName }}</div>
                  </template>
@@ -611,7 +611,7 @@

        <div class="rightbox">
          <div class="right">
            <template v-if="status == 0">
            <template v-if="status1 == 0">
              <div v-for="(item, index) in yichangList" :key="index">
                <div
                  style="
@@ -622,15 +622,36 @@
                >
                  {{ item.proName || "" }}
                </div>
                <el-table
                <template v-if="item.jyjc == '0'">
                  <el-table
                  :stripe="true"
                  :row-style="red"
                  :data="item.sone"
                  border
                  style="width: 100%"
                  :header-cell-style="{ background: '#67C23A' }"
                  :expand-row-keys="expends"
                  :row-key="getRowKeys"
                >
                  <el-table-column align="center" label="检测项目" width="220">
                  <el-table-column type="expand">
                    <template slot-scope="props">
                      <div
                        v-if="props.row.advices && props.row.advices.length > 0"
                      >
                        <div
                          v-for="(jianyi, index1) in props.row.advices"
                          :key="index1"
                          style="padding: 0 10px; margin-bottom: 10px"
                        >
                          <div>标题：{{ jianyi.bt || "" }}</div>
                          <div>内容：{{ jianyi.nr || "" }}</div>
                        </div>
                      </div>
                      <div v-else style="padding: 0 10px">暂无内容</div>
                    </template>
                  </el-table-column>

                  <el-table-column align="center" label="检测项目" width="335">
                    <template slot-scope="scope">
                      <div>{{ scope.row.proName }}</div>
                    </template>
@@ -639,7 +660,7 @@
                    align="center"
                    prop="proResult"
                    label="检测结果"
                    width="160"
                    width="85"
                  >
                  </el-table-column>

@@ -647,14 +668,65 @@
                    align="center"
                    prop="stanId"
                    label=" 参考范围"
                    width="117"
                  >
                  </el-table-column>
                  <el-table-column align="center" prop="proAdvice" label="单位">

                  <el-table-column
                    align="center"
                    prop="proAdvice"
                    label="单位"
                    width="78"
                  >
                  </el-table-column>
                </el-table>
                </template>
                <template v-if="item.jyjc == '1'">
                  <el-table
                  :stripe="true"
                  :row-style="red"
                  :data="item.sone"
                  border
                  style="width: 100%"
                  :header-cell-style="{ background: '#67C23A' }"
                  :expand-row-keys="expends"
                  :row-key="getRowKeys"
                >
                  <el-table-column type="expand">
                    <template slot-scope="props">
                      <div
                        v-if="props.row.advices && props.row.advices.length > 0"
                      >
                        <div
                          v-for="(jianyi, index1) in props.row.advices"
                          :key="index1"
                          style="padding: 0 10px; margin-bottom: 10px"
                        >
                          <div>标题：{{ jianyi.bt || "" }}</div>
                          <div>内容：{{ jianyi.nr || "" }}</div>
                        </div>
                      </div>
                      <div v-else style="padding: 0 10px">暂无内容</div>
                    </template>
                  </el-table-column>

                  <el-table-column align="center" label="检测项目" width="250">
                    <template slot-scope="scope">
                      <div>{{ scope.row.proName }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="proResult"
                    label="检测结果"
                    width="366"
                  >
                  </el-table-column>
                </el-table>
                </template>
              </div>
            </template>
            <template v-if="status == 1">
            <template v-if="status1 == 1">
              <div>
                <div
                  style="
@@ -670,19 +742,12 @@
                  :data="statusList"
                  style="width: 100%"
                  :header-cell-style="{ background: '#e6a23c' }"
                  :expand-row-keys="expends"
                  :row-key="getRowKeys"
                  :stripe="true"
                >
                  <el-table-column type="expand">
                    <template slot-scope="props">
                      <span>{{ props.row.deptName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="部门"
                    width="160"
                    width="185"
                    prop="deptName"
                  >
                  </el-table-column>
@@ -690,7 +755,7 @@
                    align="center"
                    prop="proName"
                    label="项目"
                    width="160"
                    width="260"
                  >
                  </el-table-column>

@@ -1362,7 +1427,7 @@
        tjCategory: undefined,
        payType: undefined,
      },
      status: 0, // 0展示异常1展示项目情况
      status1: 0, // 0展示异常1展示项目情况
      viewportHeight: 0,
      expends: [],
    };
@@ -1395,18 +1460,21 @@
    },
    //设置table中的扩展项，展开的id，此处我需要全部展开
    getExpends() {
      var proId = this.statusList.map((item) => item.proId);
      this.expends = proId;
      // 通过flatMap将每个sone数组中的ID提取出来，并返回一个扁平化的ID数组
      this.expends = this.yichangList.flatMap((item) =>
        item.sone.map((subItem) => subItem.proId)
      );
    },

    getRowKeys(row) {
      return row.proId;
    },
    // 项目情况
    xiangmuqingkuang() {
      cSWebGetPro(this.tjNumber).then((res) => {
        this.status = 1;
        this.status1 = 1;
        this.statusList = res.data;
        this.getExpends();

        if (this.statusList.length == 0) {
          _this.$message.msgSuccess("暂无项目情况");
        }
@@ -1416,14 +1484,18 @@
      this.drawer = false;
    },
    yichangjieguo() {
      this.status = 0;
      this.status1 = 0;
      let _this = this;
      yichang({
        tjNum: this.tjNumber,
      }).then((res) => {
        this.yichangList = res.data;
        if (this.yichangList.length == 0) {
          _this.$message.msgSuccess("暂无异常报告");
        this.getExpends();
        if(!this.yichangList){
          this.$message({
          type: "warning ",
          message: "暂无异常报告",
        });
        }
      });
    },
@@ -1883,8 +1955,8 @@

      getState(this.tjNumber).then((res) => {
        this.status = res.data;

        if (this.status.status === "1") {
        if (this.status) {
          if (this.status.status === "1") {
          this.yichangjieguo();
          getInfo().then((response) => {
            this.userId = response.user.userId;
@@ -2009,6 +2081,13 @@

          this.drawer = false;
        }
        } else {
          this.$message({
                type: "warning",
                message: "请稍后重试",
              });
        }
       
      });

      // 获取小结
@@ -2255,69 +2334,68 @@
.btn {
  margin: 20px 0px;
}
/* 按钮的初始状态 */
.btnbox {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 按钮之间的间距 */
  position: fixed; /* 使整个按钮区域固定在页面 */
  right: 0;  /* 固定在页面右侧 */
  top: 20%;  /* 初始位置 */
  right: 0; /* 固定在页面右侧 */
  top: 20%; /* 初始位置 */
  z-index: 10;
}

/* 每个按钮的样式 */
.btn1 {
  animation: fadeInUp 0.5s ease-out forwards;  /* 按钮加载时的淡入动画 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: fadeInUp 0.5s ease-out forwards; /* 按钮加载时的淡入动画 */
  cursor: pointer;
  writing-mode: vertical-rl;  /* 按钮文本竖直排列 */
  text-align: center;  /* 文字居中 */
  text-align: center; 
}
.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright;

}

/* 设置动画效果 */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.5);  /* 初始状态：透明且缩小 */
    transform: translateY(20px) scale(0.5); /* 初始状态：透明且缩小 */
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);  /* 最终状态：完全显示且正常大小 */
    transform: translateY(0) scale(1); /* 最终状态：完全显示且正常大小 */
  }
}

/* 每个按钮的位置和动画延迟 */
.btnbox > div:nth-child(1) {
  top: 20%;  /* 第一个按钮的位置 */
  animation-delay: 0s;  /* 无延迟 */
  top: 20%; /* 第一个按钮的位置 */
  animation-delay: 0s; /* 无延迟 */
}

.btnbox > div:nth-child(2) {
  top: 30%;  /* 第二个按钮的位置 */
  top: 30%; /* 第二个按钮的位置 */
  animation-delay: 0.2s;
}

.btnbox > div:nth-child(3) {
  top: 40%;  /* 第三个按钮的位置 */
  top: 40%; /* 第三个按钮的位置 */
  animation-delay: 0.4s;
}

.btnbox > div:nth-child(4) {
  top: 50%;  /* 第四个按钮的位置 */
  top: 50%; /* 第四个按钮的位置 */
  animation-delay: 0.6s;
}

.btnbox > div:nth-child(5) {
  top: 60%;  /* 第五个按钮的位置 */
  top: 60%; /* 第五个按钮的位置 */
  animation-delay: 0.8s;
}

.btnbox > div:nth-child(6) {
  top: 70%;  /* 第六个按钮的位置 */
  top: 70%; /* 第六个按钮的位置 */
  animation-delay: 1s;
}

@@ -2345,7 +2423,13 @@
  -moz-border-radius: 2em;
  border-radius: 2em;
}

::v-deep .el-dialog {
  width: 1200px;
  height: 800px;
}
::v-deep .el-button--medium  {
 padding: 10px;
}
/* .el-dialog {
  width: 1264px;
  height: 800px;
@@ -2381,7 +2465,7 @@
  align-items: center;
  padding: 0px 20px;
  z-index: 1000; /* 确保按钮层级在其他内容上方 */
  width: 100%;
  width: 300px;
  background-color: white; /* 可根据需要调整背景颜色 */
}

@@ -2404,11 +2488,11 @@
}

.rightbox {
  margin-left: 30px;
  margin-left: 60px;
  overflow-y: scroll;
  position: sticky;
  top: 0px;

  width: 684px;
  .right {
    position: sticky;
    top: 0px;
@@ -2437,6 +2521,9 @@
.kong {
  box-shadow: none;
}
::v-deep .el-table--medium .el-table__cell {
  padding: 5px 0;
}
</style>