项目汇总图表需要优化

src/views/trials/trials-panel/reading/read-task/index.vue

@@ -379,7 +379,7 @@ export default {
     isTumor() {
       let criterion = this.trialCriterionList.find(item => item.TrialReadingCriterionId === this.TrialReadingCriterionId)
       if (criterion) {
-        return [1, 18, 2, 3, 7].includes(Number(criterion.CriterionType))
+        return [1, 18, 2, 3, 7, 17].includes(Number(criterion.CriterionType))
       } else {
         return false
       }

src/views/trials/trials-panel/trial-summary/report-forms/index.vue

@@ -12,17 +12,18 @@
             </el-form>
         </div>
         <div class="contentBox">
-            <div class="chartBox">
+            <div class="chartBox" :style="{ height: isTumor ? '50%' : '100%' }">
                 <div ref="chartContainer_left" style="width: 100%; height: 100%;" v-loading="loading_left"></div>
             </div>
-            <div class="chartBox">
+            <div class="chartBox" :style="{ height: isTumor ? '50%' : '100%' }">
                 <div ref="chartContainer_right" style="width: 100%; height: 100%;" v-loading="loading_right"></div>
             </div>
-            <div class="chartBox" style="position: relative;">
+            <div class="chartBox" :style="{ position: 'relative', width: isHas_bottom_right ? '50%' : '100%' }"
+                v-if="isTumor">
                 <div ref="chartContainer_bottom" style="width: 100%; height: 100%;" v-loading="loading_bottom"></div>
                 <span v-if="ORR" style="position: absolute;top: 0;right:20px">ORR: {{ ORR }}</span>
             </div>
-            <div class="chartBox">
+            <div class="chartBox" v-if="isHas_bottom_right && isTumor">
                 <div ref="chartContainer_bottom_right" style="width: 100%; height: 100%;" v-loading="loading_bottom">
                 </div>
             </div>
@@ -76,23 +77,36 @@ export default {
             loading_bottom: false,
             chart_bottom: null,
             chart_bottom_right: null,
+            isHas_bottom_right: false,
             ORR: null
         }
     },
     created() {
         this.getTrialCriterionList()
     },
+    computed: {
+        isTumor() {
+            let criterion = this.trialCriterionList.find(item => item.TrialReadingCriterionId === this.searchData.TrialReadingCriterionId)
+            if (criterion) {
+                return [1, 18, 2, 3, 7, 17].includes(Number(criterion.CriterionType))
+            } else {
+                return false
+            }
+        }
+    },
     watch: {
         'searchData.TrialReadingCriterionId': {
             handler() {
                 if (this.searchData.TrialReadingCriterionId) {
                     this.getTrialVisitFinishedStatList()
                     this.getTrialQuestionStatList()
+                    if (this.isTumor) {
                         this.getTrialEfficacyEvaluationStatList()
                     }
                 }
             }
         },
+    },
     methods: {
         getTrialCriterionList() {
             getTrialCriterionList(this.$route.query.trialId, false).then(res => {
@@ -177,15 +191,20 @@ export default {
                         gap: 2,
                         label: {
                             show: true,
-                            position: 'inside'
+                            position: 'inside',
-                        },
+                            textStyle: {
-                        labelLine: {
+                                fontSize: 14, // 设置字体大小为 14px
-                            length: 10,
+                                color: '#000', // 设置字体颜色为白色
-                            lineStyle: {
+                                // fontWeight: 'bold' // 设置字体加粗
-                                width: 1,
-                                type: 'solid'
                             }
                         },
+                        // labelLine: {
+                        //     length: 10,
+                        //     lineStyle: {
+                        //         width: 1,
+                        //         type: 'solid'
+                        //     }
+                        // },
                         itemStyle: {
                             borderColor: '#fff',
                             borderWidth: 1
@@ -201,6 +220,9 @@ export default {
             };
             // 4. 使用配置项渲染图表
             this.chart_left.setOption(option);
+            this.$nextTick(() => {
+                this.chart_left.resize()
+            })
         },
         // 获取质疑统计列表
         async getTrialQuestionStatList() {
@@ -282,6 +304,9 @@ export default {
             };
             // 4. 使用配置项渲染图表
             this.chart_right.setOption(option);
+            this.$nextTick(() => {
+                this.chart_right.resize()
+            })
         },
         // 获取疗效统计表
         async getTrialEfficacyEvaluationStatList() {
@@ -306,6 +331,9 @@ export default {
                         obj.xAxisData.push(item.OverallTumorEvaluation)
                         obj.seriesData.push(item.SubjectCount)
                     })
+                    this.$nextTick(() => {
+                        this.initChart_bottom(obj)
+                    })
                     let obj2 = {
                         xAxisData: [],
                         seriesData: [],
@@ -314,14 +342,19 @@ export default {
                         titleText: this.$t("trials:reportForms:cjart:title:dataDistribution"),
                     }
                     if (OtherInfo.PDList && OtherInfo.PDList.length > 0) {
+                        this.isHas_bottom_right = true
                         OtherInfo.PDList.forEach(item => {
                             obj2.xAxisData.push(item.SubjectCode)
                             obj2.seriesData.push(item.DaysDiff)
                         })
-                    }
                         obj2.medianValue = this.calculateMedian(obj2.seriesData)
-                    this.initChart_bottom(obj)
+                        this.$nextTick(() => {
                             this.initChart_bottom_right(obj2)
+                        })
+                    } else {
+                        this.isHas_bottom_right = false
+                    }
+
                 }
             } catch (err) {
                 console.log(err)