专家质控-静态功能开发

src/styles/custom.scss

@@ -22,11 +22,7 @@
     color: #004983;
     cursor: pointer;
   }
-  .blue-link {
-    text-decoration: underline;
-    color: #206ccf;
-    cursor: pointer;
-  }
+  
   .red-link {
     font-weight: 600;
     color: red;
@@ -34,6 +30,11 @@
     cursor: pointer;
   }
 }
+.blue-link {
+  text-decoration: underline;
+  color: #206ccf;
+  cursor: pointer;
+}
 
 // 搜索button
 .long-btn {

src/views/allcase/caseViews.vue

@@ -394,7 +394,7 @@ export default {
       })
     },
     getInitData() {
-      this.valData = this.storageGet('getData');
+      this.valData = this.$route.query.from == 'expertQualityControl'? this.$route.query.ZYH : this.storageGet('getData');
       this.ruleId = this.storageGet('getDataRule');
       let xqItemError = this.storageGet('xqItemError');
       if(xqItemError){

src/views/recordsRoom/qc/components/expertQualityControl/SearchBox.vue

@@ -0,0 +1,397 @@
+<template>
+  <el-form style="width: 100%" ref="filterListFormRef" :model="formData" class="demo-form-inline" label-suffix=":"
+    label-width="90px">
+    <el-row :gutter="24">
+      <el-radio-group v-model="formData.in_hospital" @input="onSubmit" style="margin-bottom:15px">
+        <el-radio-button label="全部"></el-radio-button>
+        <el-radio-button label="出院"></el-radio-button>
+        <el-radio-button label="在院"></el-radio-button>
+      </el-radio-group>
+    </el-row>
+    <el-row :gutter="24">
+      <el-col :span="7">
+        <el-form-item label="出院日期">
+          <div style="width: 100%;display: flex;gap: 5px;">
+            <el-form-item prop="AAC01_START">
+              <el-date-picker style="width: 100%" v-model="formData.AAC01_START" type="date" placeholder="开始日期"
+                :picker-options="AAC01PickerOptions" value-format="yyyyMMdd" format="yyyy年MM月dd日">
+              </el-date-picker>
+            </el-form-item>
+            <el-form-item prop="AAC01_END">
+              <el-date-picker style="width: 100%" v-model="formData.AAC01_END" type="date" placeholder="结束日期"
+                value-format="yyyyMMdd" format="yyyy年MM月dd日">
+              </el-date-picker>
+            </el-form-item>
+          </div>
+        </el-form-item>
+      </el-col>
+      <el-col :span="5">
+        <el-form-item label="出院科室" prop="KS_CODE">
+          <el-cascader style="width: 100%;" placeholder="请选择" v-model="formData.KS_CODE"
+            :options="searchOptions.ksArray" filterable :props="searchOptions.cascaderProps" clearable collapse-tags
+            @change="ksChange">
+          </el-cascader>
+        </el-form-item>
+      </el-col>
+      <el-col :span="5">
+        <el-form-item label="出院病区" prop="BQ_CODE">
+          <el-cascader style="width: 100%;" placeholder="请选择" v-model="formData.BQ_CODE"
+            :options="searchOptions.bqArray" filterable :props="searchOptions.cascaderProps" clearable collapse-tags>
+          </el-cascader>
+        </el-form-item>
+      </el-col>
+      <el-col :span="7">
+        <el-form-item label="病案号" prop="AAA28">
+          <el-input style="width: 100%" v-model="formData.AAA28" placeholder="请输入"></el-input>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row :gutter="24">
+      <el-col :span="7">
+        <el-form-item label="入院日期">
+          <div style="width: 100%;display: flex;gap: 5px;">
+            <el-form-item prop="AAB01_START">
+              <el-date-picker style="width: 100%" v-model="formData.AAB01_START" type="date" placeholder="开始日期"
+                :picker-options="AAB01PickerOptions" value-format="yyyyMMdd" format="yyyy年MM月dd日">
+              </el-date-picker>
+            </el-form-item>
+            <el-form-item prop="AAB01_END">
+              <el-date-picker style="width: 100%" v-model="formData.AAB01_END" type="date" placeholder="结束日期"
+                value-format="yyyyMMdd" format="yyyy年MM月dd日">
+              </el-date-picker>
+            </el-form-item>
+          </div>
+        </el-form-item>
+      </el-col>
+      <el-col :span="5">
+        <el-form-item label="医嘱名称" prop="yzmc">
+          <el-input v-model="formData.yzmc" placeholder="请输入"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="5">
+        <el-form-item label="费用名称" prop="fymc">
+          <el-input v-model="formData.fymc" placeholder="请输入"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="7">
+        <el-form-item label="住院天数" prop="">
+          <div style="width: 100%;display: flex;gap: 5px;">
+            <el-form-item prop="endDay1">
+              <el-input style="width: 100%;" v-model="formData.endDay1">
+                <template slot="append">天</template>
+              </el-input>
+            </el-form-item>
+            -
+            <el-form-item prop="endDay2">
+              <el-input style="width: 100%;" v-model="formData.endDay2">
+                <template slot="append">天</template>
+              </el-input>
+            </el-form-item>
+          </div>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row :gutter="24" v-show="expand">
+      <el-col :span="7">
+        <el-form-item label="非计划手术" prop="unplannedSurgery">
+          <el-select style="width: 100%" v-model="formData.unplannedSurgery" placeholder="请选择">
+            <el-option v-for="item in searchOptions.unplannedSurgeryArray" :key="item.value" :label="item.label" :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="5">
+        <el-form-item label="手术安排" prop="surgicalPlanning">
+          <el-select style="width: 100%" v-model="formData.surgicalPlanning" placeholder="请选择">
+            <el-option v-for="item in searchOptions.surgicalPlanningArray" :key="item.value" :label="item.label" :value="item.value">
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="5">
+        <el-form-item label="离院方式" prop="AEM01C">
+          <el-select v-model="formData.AEM01C" clearable filterable placeholder="请选择" style="width: 100%;">
+            <el-option v-for="(item, index) in searchOptions.lyTypeArray" :label="item.name" :value="item.id" :key="index"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="7">
+        <el-form-item label="住院天数" prop="">
+          <div style="width: 100%;display: flex;gap: 5px;">
+            <el-form-item prop="const1">
+              <el-input style="width: 100%;" v-model="formData.const1">
+                <template slot="append">元</template>
+              </el-input>
+            </el-form-item>
+            -
+            <el-form-item prop="const2">
+              <el-input style="width: 100%;" v-model="formData.const2">
+                <template slot="append">元</template>
+              </el-input>
+            </el-form-item>
+          </div>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-row :gutter="24">
+      <el-col :span="7">
+        <el-form-item label="" prop="">
+          <el-row type="flex" justify="start" style="margin-left: -90px">
+            <el-button type="text" :icon="`el-icon-arrow-${expand? 'up' : 'down'}`" @click="expand = !expand">{{
+              expand ? '收起' : '展开'}}</el-button>
+          </el-row>
+        </el-form-item>
+      </el-col>
+      <el-col :span="7" :offset="10">
+        <el-form-item label="" prop="">
+          <el-row type="flex" justify="end">
+            <el-button type="primary" @click="onSubmit">查询</el-button>
+            <el-button @click="onReset">重置</el-button>
+          </el-row>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+<script>
+import moment from 'moment/moment';
+
+export default {
+  emits: ['search', 'reset'],
+  data() {
+    const that = this
+    return {
+      formData: {
+        in_hospital: '全部',
+        AAC01_START: '',
+        AAC01_END: '',
+        KS_CODE: [],
+        BQ_CODE: [],
+        AAA28: '',
+        AAB01_START: '',
+        AAB01_END: '',
+        yzmc: '',
+        fymc: '',
+        endDay1: '',
+        endDay2: '',
+        unplannedSurgery: '',
+        surgicalPlanning: '',
+        AEM01C: '',
+        const1: '',
+        const2: ''
+      },
+      searchOptions: {
+        ksArray: [],//科室options
+        bqArray: [],//病区options
+        lyTypeArray: [], //离院方式
+        unplannedSurgeryArray: [{
+          label: '全部', value: ''
+        },{
+          label: '是', value: 'Y'
+        },{
+          label: '否', value: 'N'
+        }],
+        surgicalPlanningArray: [{
+          label: '全部', value: ''
+        },{
+          label: '有', value: 'Y'
+        },{
+          label: '无', value: 'N'
+        }],
+        cascaderProps: {
+          multiple: true,      // 开启多选模式
+          label: 'dep_name',
+          value: 'dep_id',
+          children: 'children',
+          checkStrictly: true, // 允许独立选择任意层级
+          emitPath: false,     // 是否返回完整路径（true 返回路径数组，false 只返回末节点值）
+        },
+      },
+      AAC01PickerOptions: {
+        disabledDate: (time) => {
+          if (that.formData.AAC01_END != "") {
+            return time.getTime() > Date.now();
+          }
+        },
+        shortcuts: [{
+          text: '今天',
+          onClick(picker) {
+            picker.$emit('pick', moment().format('YYYYMMDD'));
+            that.formData.AAC01_END = moment().format('YYYYMMDD')
+          }
+        }, {
+          text: '近7天',
+          onClick(picker) {
+            picker.$emit('pick', moment().subtract(7, 'days').format('YYYYMMDD'));
+            that.formData.AAC01_END = moment().format('YYYYMMDD')
+          }
+        }, {
+          text: '近30天',
+          onClick(picker) {
+            picker.$emit('pick', moment().subtract(30, 'days').format('YYYYMMDD'));
+            that.formData.AAC01_END = moment().format('YYYYMMDD')
+          }
+        }, {
+          text: '一季度',
+          onClick(picker) {
+            picker.$emit('pick', moment().startOf('year').format('YYYYMMDD'));
+            that.formData.AAC01_END = moment().startOf('year').add(3, 'M').subtract(1, 'days').format('YYYYMMDD')
+          }
+        }, {
+          text: '二季度',
+          onClick(picker) {
+            picker.$emit('pick', moment().startOf('year').add(3, 'M').format('YYYYMMDD'));
+            that.formData.AAC01_END = moment().startOf('year').add(6, 'M').subtract(1, 'days').format('YYYYMMDD')
+          }
+        }, {
+          text: '三季度',
+          onClick(picker) {
+            picker.$emit('pick', moment().startOf('year').add(6, 'M').format('YYYYMMDD'));
+            that.formData.AAC01_END = moment().startOf('year').add(9, 'M').subtract(1, 'days').format('YYYYMMDD')
+          }
+        }, {
+          text: '四季度',
+          onClick(picker) {
+            picker.$emit('pick', moment().startOf('year').add(9, 'M').format('YYYYMMDD'));
+            that.formData.AAC01_END = moment().startOf('year').add(12, 'M').subtract(1, 'days').format('YYYYMMDD')
+          }
+        }, {
+          text: moment().add(-2, 'Y').format("YYYY"),
+          onClick(picker) {
+            picker.$emit('pick', moment().add(-2, 'Y').startOf('year').format('YYYYMMDD'));
+            that.formData.AAC01_END = moment().add(-2, 'Y').endOf('year').format('YYYYMMDD')
+          }
+        }, {
+          text: moment().add(-1, 'Y').format("YYYY"),
+          onClick(picker) {
+            picker.$emit('pick', moment().add(-1, 'Y').startOf('year').format('YYYYMMDD'));
+            that.formData.AAC01_END = moment().add(-1, 'Y').endOf('year').format('YYYYMMDD')
+          }
+        }, {
+          text: moment().format("YYYY"),
+          onClick(picker) {
+            picker.$emit('pick', moment().startOf('year').format('YYYYMMDD'));
+            that.formData.AAC01_END = moment().endOf('year').format('YYYYMMDD')
+          }
+        }]
+      },
+      AAB01PickerOptions: {
+        disabledDate: (time) => {
+          if (that.formData.AAB01_END != "") {
+            return time.getTime() > Date.now();
+          }
+        },
+        shortcuts: [{
+          text: '今天',
+          onClick(picker) {
+            picker.$emit('pick', moment().format('YYYYMMDD'));
+            that.formData.AAB01_END = moment().format('YYYYMMDD')
+          }
+        }, {
+          text: '近7天',
+          onClick(picker) {
+            picker.$emit('pick', moment().subtract(7, 'days').format('YYYYMMDD'));
+            that.formData.AAB01_END = moment().format('YYYYMMDD')
+          }
+        }, {
+          text: '近30天',
+          onClick(picker) {
+            picker.$emit('pick', moment().subtract(30, 'days').format('YYYYMMDD'));
+            that.formData.AAB01_END = moment().format('YYYYMMDD')
+          }
+        }, {
+          text: '一季度',
+          onClick(picker) {
+            picker.$emit('pick', moment().startOf('year').format('YYYYMMDD'));
+            that.formData.AAB01_END = moment().startOf('year').add(3, 'M').subtract(1, 'days').format('YYYYMMDD')
+          }
+        }, {
+          text: '二季度',
+          onClick(picker) {
+            picker.$emit('pick', moment().startOf('year').add(3, 'M').format('YYYYMMDD'));
+            that.formData.AAB01_END = moment().startOf('year').add(6, 'M').subtract(1, 'days').format('YYYYMMDD')
+          }
+        }, {
+          text: '三季度',
+          onClick(picker) {
+            picker.$emit('pick', moment().startOf('year').add(6, 'M').format('YYYYMMDD'));
+            that.formData.AAB01_END = moment().startOf('year').add(9, 'M').subtract(1, 'days').format('YYYYMMDD')
+          }
+        }, {
+          text: '四季度',
+          onClick(picker) {
+            picker.$emit('pick', moment().startOf('year').add(9, 'M').format('YYYYMMDD'));
+            that.formData.AAB01_END = moment().startOf('year').add(12, 'M').subtract(1, 'days').format('YYYYMMDD')
+          }
+        }, {
+          text: moment().add(-2, 'Y').format("YYYY"),
+          onClick(picker) {
+            picker.$emit('pick', moment().add(-2, 'Y').startOf('year').format('YYYYMMDD'));
+            that.formData.AAB01_END = moment().add(-2, 'Y').endOf('year').format('YYYYMMDD')
+          }
+        }, {
+          text: moment().add(-1, 'Y').format("YYYY"),
+          onClick(picker) {
+            picker.$emit('pick', moment().add(-1, 'Y').startOf('year').format('YYYYMMDD'));
+            that.formData.AAB01_END = moment().add(-1, 'Y').endOf('year').format('YYYYMMDD')
+          }
+        }, {
+          text: moment().format("YYYY"),
+          onClick(picker) {
+            picker.$emit('pick', moment().startOf('year').format('YYYYMMDD'));
+            that.formData.AAB01_END = moment().endOf('year').format('YYYYMMDD')
+          }
+        }]
+      },
+      expand: false
+    }
+  },
+  created() {
+    this.getSearchOptions()
+  },
+  methods: {
+    onSubmit() {
+      this.$emit('search')
+    },
+    onReset() {
+      this.$refs.filterListFormRef.resetFields();
+      this.$emit('reset')
+    },
+    getSearchOptions() {
+      this.$axios.post('CaseHistory/Terminal/getQxBlSearchOptions', {}).then(res => {
+        this.searchOptions.ksArray = this.cancelChildren(res.data.ksArray);//科室
+        this.searchOptions.bqArray = this.cancelChildren(res.data.bqArray);//病区
+        this.searchOptions.lyTypeArray = res.data.lyTypeArray
+      })
+    },
+    //科室change事件
+    ksChange() {
+      this.formData.BQ_CODE = [];
+      this.$axios.post('CaseHistory/Terminal/getBqOptions', { 'KS_CODE': this.formData.KS_CODE }).then(res => {
+        this.searchOptions.bqArray = this.cancelChildren(res.data.bqArray);//病区
+      })
+    },
+    //  将下拉框为空的children属性设置为undefined
+    cancelChildren(arr) {
+      if (!arr) {
+        return [];
+      }
+      return arr.map(item => {
+        if (item.children.length == 0) {
+          item.children = undefined;
+        } else {
+          item.children.map(childreItem => {
+            if (childreItem.children.length == 0) {
+              childreItem.children = undefined;
+            }
+            return childreItem
+          })
+        }
+        return item
+      })
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/recordsRoom/qc/components/expertQualityControl/TableBox.vue

@@ -0,0 +1,126 @@
+<template>
+  <el-table
+    v-loading="loading"
+    :data="data"
+    style="width: 100%"
+    height="452px"
+  >
+    <!-- <el-table-column type="selection" width="40"></el-table-column> -->
+    <el-table-column type="index" label="序号" width="50" />
+    <el-table-column prop="AAA28" label="病案号" width="80">
+      <template slot-scope="scope">
+        <el-button class="blue-link" type="text" @click="toPage(scope.row)">{{ scope.row.AAA28 }}</el-button>
+      </template>
+    </el-table-column>
+    <el-table-column prop="BRXM" label="患者姓名" width="90" />
+    <el-table-column prop="AAB01" label="入院时间"/>
+    <el-table-column prop="AAC01" label="出院时间"/>
+  </el-table>
+</template>
+
+<script>
+import moment from 'moment/moment';
+
+export default {
+  props: {
+    data: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    loading: {
+      type: Boolean,
+      default() {
+        return false;
+      },
+    }
+  },
+  data() {
+    return {
+      selectedArray: []
+    }
+  },
+  emits: ['onClickRow'],
+  methods: {
+    moment,
+    toPage(row) {
+      this.$emit('onClickRow', row)
+    },
+
+    handleSelectionChange(val) {
+      this.selectedArray = val;
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+// ::v-deep.el-table {
+//   .selected-row {
+//     background-color:#ecf5ff !important;
+//   }
+// }
+
+@mixin status() {
+    width: 60px;
+    text-align: center;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 4px;
+    font-weight: 500
+}
+
+.status-0 {
+  @include status();
+  background-color: #fccbd4;
+  border-color: #ef1f3a;
+  color: #ef1f3a;
+}
+.status-1 {
+  @include status();
+  background-color: #d2e4d6;
+  border-color: #318240;
+  color: #318240;
+}
+.status-2 {
+  @include status();
+  background-color: #ef1f3a;
+  border-color: #ef1f3a;
+  color: #ffffff;
+}
+
+@mixin score-level() {
+    font-weight: 500
+}
+
+.score-level-1 {
+  @include score-level();
+  color: #318240;
+}
+.score-level-2 {
+  @include score-level();
+  color: #89c30f;
+}
+.score-level-3 {
+  @include score-level();
+  color: #ec890e;
+}
+.score-level-4 {
+  @include score-level();
+  color: #ef1f3a;
+}
+
+.quality-type-1 {
+  @include score-level();
+  color: #07818a;
+}
+.quality-type-2 {
+  @include score-level();
+  color: #3c108f;
+}
+.quality-type-3 {
+  @include score-level();
+  color: #a26d0a
+}
+</style>

src/views/recordsRoom/qc/components/expertQualityControl/detailBox.vue

@@ -0,0 +1,45 @@
+<template>
+    <el-collapse class="detailBox" v-model="activeNames" @change="handleChange">
+        <el-collapse-item v-for="(item, key) in dataSource" :title="item.name" :name="item.name" :key="key">
+            <div v-if="item.list && Array.isArray(item.list) && !!(item.list.length)">
+                <p v-for="(element) in item.list" class="blue-link" @click="toPage(item)">
+                    {{element.name}}
+                </p>
+            </div>
+            <p v-else class="blue-link" @click="toPage(item)">{{item.name}}</p>
+        </el-collapse-item>
+    </el-collapse>
+</template>
+<script>
+export default {
+    props: ['dataSource'],
+    data() {
+        return {
+            activeNames: ''
+        }
+    },
+    methods: {
+      handleChange(val) {
+        console.log(val);
+      },
+      toPage(e) {
+        this.$router.push(`/caseViews?from=expertQualityControl&ZYH=123456`)
+      }
+    },
+    watch: {
+        dataSource: {
+            handler (newVal) {
+                let dataSourceArray = Object.keys(newVal)
+                if(!!dataSourceArray.length) {
+                    this.activeNames = newVal[dataSourceArray[0]].name
+                }else{
+                    this.activeNames = ''
+                }
+            },
+            deep: true // 启用深度监听
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+</style>

src/views/recordsRoom/qc/expertQualityControl.vue

@@ -0,0 +1,161 @@
+<template>
+    <div class="app-container">
+        <SearchBoxVue class="filter-list-form" ref="SearchBoxRef" @search="handleSearch" @reset="handleReset" />
+        <div class="filter-list-action">
+            <el-row type="flex" justify="space-between" align="middle">
+                <mPagination v-if="tableData && tableData.length !== 0" :data="paginationData"
+                    @pageChangeEvent="pageHasChanged"></mPagination>
+            </el-row>
+            <div class="content">
+                <el-card class="tableCard">
+                    <TableBoxVue :loading="loading" :data="tableData" ref="tableRef" @onClickRow="getDetailData()"/>
+                </el-card>
+                <el-card class="detailCard" v-loading="detailLoading">
+                    <div slot="header" class="detailCardHeader">
+                       <el-row type="flex" align="middle" v-for="(value, key) in detailHeaderData">
+                            <div class="title">{{key}}：</div>
+                            <span class="value">{{value}}</span>
+                       </el-row>
+                    </div>
+                    <DetailBoxVue :dataSource="detailData"/>
+                </el-card>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import mPagination from '@/components/m-pagination';
+import SearchBoxVue from '@/views/recordsRoom/qc/components/expertQualityControl/SearchBox.vue'
+import TableBoxVue from '@/views/recordsRoom/qc/components/expertQualityControl/TableBox.vue'
+import DetailBoxVue from '@/views/recordsRoom/qc/components/expertQualityControl/detailBox.vue'
+import pagination from '@/components/Pagination/index2.vue'
+import { getCaseAppealList } from '@/api/admin'
+
+export default {
+    components: {
+        mPagination,
+        SearchBoxVue,
+        TableBoxVue,
+        DetailBoxVue,
+        pagination
+    },
+    data() {
+        return {
+            loading: false,
+            detailLoading: false,
+            tableData: [],
+            paginationData: {
+                total: 0,
+                currentPage: 1,
+                pageSize: 10
+            },
+            detailHeaderData: {
+                病案号: '11',
+                床号: '',
+                管床医师: '',
+                病人科室: '',
+                住院天数: '',
+                总费用: '',
+            },
+            detailData: []
+        }
+    },
+    created() {
+    },
+    mounted() {
+        this.getList()
+    },
+    methods: {
+        getList() {
+            this.loading = true
+            getCaseAppealList({
+                ...this.$refs.SearchBoxRef.formData,
+                page: this.paginationData.currentPage,
+                page_size: this.paginationData.pageSize
+            }).then(res => {
+                this.paginationData.total = res.data.count
+                this.tableData = res.data.list
+                this.tableData = this.tableData.concat(this.tableData)
+                this.tableData = this.tableData.concat(this.tableData)
+                this.tableData = this.tableData.concat(this.tableData)
+                this.$refs.tableRef.selectedArray = []
+                this.getDetailData()
+            }).catch(error => {
+                console.log(error)
+            }).finally(() => {
+                this.loading = false
+            })
+        },
+
+        pageHasChanged() {
+            this.getList()
+        },
+        handleSearch() {
+            this.paginationData.currentPage = 1
+            this.getList()
+        },
+        handleReset() {
+            this.handleSearch()
+        },
+        getDetailData() {
+            // this.detailData = [{
+            //     title: '入院记录',
+            //     content: '1111'
+            // }]
+            this.detailLoading = true
+            this.$axios.post('/getTree', {
+                id: 123456,
+            }).then(res => {
+                this.detailLoading = false
+                this.detailData = res.data || {}
+            }).catch(() => {
+                this.detailLoading = false
+            })
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+    display: grid;
+    grid-template-columns: 1fr 1fr; /* 或者使用其他单位如百分比或像素 */
+    gap: 10px; /* 可选，添加间隙 */
+    .tableCard {
+        ::v-deep .el-card__header {
+            height: 0;
+        }
+        ::v-deep .el-card__body {
+            height: 504px;
+            overflow-y: scroll;
+        }
+    }
+  
+    .detailCard {
+        ::v-deep .el-card__body {
+            height: 400px;
+            overflow-y: scroll;
+        }
+        ::v-deep .el-card__header {
+            background-color: rgb(240, 240, 240);
+            .detailCardHeader {
+                display: grid;
+                grid-template-columns: repeat(4, 1fr); /* 创建4列，每列占据可用空间的1份 */   
+                gap: 5px; /* 可选，添加间隙 */  
+                font-size: 14px;
+                font-weight: 700;
+                & .title {
+                    width: 70px;
+                    text-align: right;
+                }
+                & .value {
+                    color: rgba(78, 89, 105, 1);
+                    font-size: 14px;
+                    font-weight: 400;
+                }       
+            }
+        }
+    }
+}
+</style>