| | |
| | | <div class="top"> |
| | | <table |
| | | style=" |
| | | width: 98%; |
| | | width: 100%; |
| | | margin: 10px 10px; |
| | | border: 1px solid #dfe6ec; |
| | | border-collapse: collapse; |
| | |
| | | style=" |
| | | font-size: 14px; |
| | | height: calc(100% - 11%); |
| | | width: 1300px; |
| | | width: 1100px; |
| | | margin-left: 10px; |
| | | " |
| | | > |
| | |
| | | :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> |
| | |
| | | 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> |
| | |
| | | align="center" |
| | | prop="proResult" |
| | | label="检测结果" |
| | | width="160" |
| | | width="85" |
| | | > |
| | | </el-table-column> |
| | | |
| | |
| | | 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> |
| | | </div> |
| | |
| | | :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> |
| | |
| | | align="center" |
| | | prop="proName" |
| | | label="项目" |
| | | width="160" |
| | | width="260" |
| | | > |
| | | </el-table-column> |
| | | |
| | |
| | | }, |
| | | //设置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; |
| | | }, |
| | |
| | | cSWebGetPro(this.tjNumber).then((res) => { |
| | | this.status = 1; |
| | | this.statusList = res.data; |
| | | this.getExpends(); |
| | | |
| | | if (this.statusList.length == 0) { |
| | | _this.$message.msgSuccess("暂无项目情况"); |
| | | } |
| | |
| | | tjNum: this.tjNumber, |
| | | }).then((res) => { |
| | | this.yichangList = res.data; |
| | | this.getExpends(); |
| | | if (this.yichangList.length == 0) { |
| | | _this.$message.msgSuccess("暂无异常报告"); |
| | | } |
| | |
| | | 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; /* 按钮加载时的淡入动画 */ |
| | | animation: fadeInUp 0.5s ease-out forwards; /* 按钮加载时的淡入动画 */ |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | justify-content: center; |
| | | cursor: pointer; |
| | | writing-mode: vertical-rl; /* 按钮文本竖直排列 */ |
| | | text-align: center; /* 文字居中 */ |
| | | writing-mode: vertical-rl; /* 按钮文本竖直排列 */ |
| | | text-align: center; /* 文字居中 */ |
| | | } |
| | | |
| | | /* 设置动画效果 */ |
| | | @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; |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | .rightbox { |
| | | margin-left: 30px; |
| | | margin-left: 60px; |
| | | overflow-y: scroll; |
| | | position: sticky; |
| | | top: 0px; |
| | | |
| | | width: 684px; |
| | | .right { |
| | | position: sticky; |
| | | top: 0px; |
| | |
| | | .kong { |
| | | box-shadow: none; |
| | | } |
| | | ::v-deep .el-table--medium .el-table__cell { |
| | | padding: 5px 0; |
| | | } |
| | | </style> |
| | | |
| | | |