From 10a43d4c04a577e4699fb71a1603701501972584 Mon Sep 17 00:00:00 2001
From: caiyiling <1321909229@qq.com>
Date: Wed, 6 May 2026 10:23:56 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E8=87=AA=E5=8A=A8=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E8=82=BF=E7=98=A4=E5=AD=A6=E9=98=85=E7=89=87=E6=9C=9Fbug?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../subject/reading-period/components/AddSubjectRP.vue          | 2 +-
 src/views/trials/trials-panel/subject/reading-period/index.vue  | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/views/trials/trials-panel/subject/reading-period/components/AddSubjectRP.vue b/src/views/trials/trials-panel/subject/reading-period/components/AddSubjectRP.vue
index 52875a57..78f473ca 100644
--- a/src/views/trials/trials-panel/subject/reading-period/components/AddSubjectRP.vue
+++ b/src/views/trials/trials-panel/subject/reading-period/components/AddSubjectRP.vue
@@ -138,7 +138,7 @@ export default {
           addReadModule(this.form).then(res => {
             this.btnLoading = false
             this.$emit('getList')
-            this.$emit('close', {visitStageId: this.form.VisitStageId})
+            this.$emit('close', {visitStageId: this.form.VisitStageId, expirationVisitNum: this.form.ExpirationVisitNum})
             this.form.Name = null
             this.form.VisitStageId = null
             this.$message.success(this.$t('common:message:savedSuccessfully'))
diff --git a/src/views/trials/trials-panel/subject/reading-period/index.vue b/src/views/trials/trials-panel/subject/reading-period/index.vue
index b3d03a84..8732441e 100644
--- a/src/views/trials/trials-panel/subject/reading-period/index.vue
+++ b/src/views/trials/trials-panel/subject/reading-period/index.vue
@@ -540,6 +540,7 @@ export default {
           if (res === 'confirm') {
             this.param.ReadingSetType = 1
             this.param.VisitStageId = obj.visitStageId
+            this.param.ExpirationVisitNum = obj.expirationVisitNum
             this.subjectPeriod = { visible: true, title: this.$t('trials:readingPeriod:dialogTitle:addSubjectTumorPR') }
           } else {
             this.subjectPeriod.visible = true

From d08df877d792580535164201689a6e5c03382e44 Mon Sep 17 00:00:00 2001
From: caiyiling <1321909229@qq.com>
Date: Wed, 6 May 2026 11:23:57 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dicoms/components/Fusion/PetCt.vue        |   4 +-
 .../reading/dicoms/components/StudyList.vue   | 104 +++++++++------
 .../reading/dicoms3D/components/StudyList.vue | 118 ++++++++++--------
 3 files changed, 129 insertions(+), 97 deletions(-)

diff --git a/src/views/trials/trials-panel/reading/dicoms/components/Fusion/PetCt.vue b/src/views/trials/trials-panel/reading/dicoms/components/Fusion/PetCt.vue
index c3053ad1..204f79cc 100644
--- a/src/views/trials/trials-panel/reading/dicoms/components/Fusion/PetCt.vue
+++ b/src/views/trials/trials-panel/reading/dicoms/components/Fusion/PetCt.vue
@@ -130,7 +130,7 @@
           <div class="text">{{ $t('trials:reading:button:reset') }}</div>
         </div>
       </el-tooltip>
-      <el-tooltip v-if="!isBaseLineTask" class="item" effect="dark" :content="$t('trials:lugano:button:record')"
+      <!-- <el-tooltip v-if="!isBaseLineTask" class="item" effect="dark" :content="$t('trials:lugano:button:record')"
         placement="bottom">
         <div class="tool-wrapper">
           <div class="icon" @click.prevent="historyRecord">
@@ -138,7 +138,7 @@
           </div>
           <div class="text">{{ $t('trials:lugano:button:record') }}</div>
         </div>
-      </el-tooltip>
+      </el-tooltip> -->
       <!-- 伪彩 -->
       <colorMap v-show="isFusion" ref="colorMap" :unit="fusionOverlayModality === 'NM' ? 'counts' : 'g/ml'"
         :modality="fusionOverlayModality" @setColorMap="setColorMap" @voiChange="voiChange" />
diff --git a/src/views/trials/trials-panel/reading/dicoms/components/StudyList.vue b/src/views/trials/trials-panel/reading/dicoms/components/StudyList.vue
index 20fb8faf..c8a33cad 100644
--- a/src/views/trials/trials-panel/reading/dicoms/components/StudyList.vue
+++ b/src/views/trials/trials-panel/reading/dicoms/components/StudyList.vue
@@ -20,49 +20,49 @@
               style="width: 135px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
             >
                 <div>
-                  <div style="text-overflow: ellipsis;overflow: hidden;" v-if="!study.StudyName">
+                  <div style="text-overflow: ellipsis;overflow: hidden;">
                     <span :title="study.StudyCode">{{ study.StudyCode }}</span>
-                    <span style="margin-left: 5px;">{{ study.Modalities }} ({{ study.SeriesCount }})</span>  
-                  </div>
-                  <div style="text-overflow: ellipsis;overflow: hidden;" v-else>
-                    <span :title="study.StudyCode">{{ study.StudyCode }}</span>
-                    <span v-if="taskInfo && taskInfo.IsShowStudyName" :title="study.StudyName" style="margin: 0 5px">
+                    <span v-if="taskInfo && taskInfo.IsShowStudyName && study.StudyName" :title="study.StudyName" style="margin-left: 5px;">
                       {{study.StudyName}}
                     </span>
-                    <div>{{ study.Modalities }} ({{ study.SeriesCount }})</div>
                   </div>
-                  <div style="text-overflow: ellipsis;overflow: hidden;" :title="study.Description">{{ study.Description }}</div>
-                  <div class="patient-info" v-if="['PT、CT', 'CT、PT', 'PET-CT'].includes(study.Modalities)">
-                    <el-popover placement="right-start" trigger="hover" popper-class="patient-info-popper">
-                      <h4>{{ $t('trials:ptData:title') }}</h4>
-                      <div class="patient-info-row">
-                        <label>{{ $t('trials:ptData:label:patientSex') }}</label>
-                        <span>{{ study.PatientSex }}</span>
-                      </div>
-                      <div class="patient-info-row">
-                        <label>{{ $t('trials:ptData:label:patientWeight') }}</label>
-                        <span>{{ study.PatientWeight }}</span>
-                      </div>
-                      <div class="patient-info-row">
-                        <label>{{ $t('trials:ptData:label:totalDose') }}</label>
-                        <span>{{ study.RadionuclideTotalDose }}</span>
-                      </div>
-                      <div class="patient-info-row">
-                        <label>{{ $t('trials:ptData:label:halfLife') }}</label>
-                        <span>{{ study.RadionuclideHalfLife }}</span>
-                      </div>
-                      <div class="patient-info-row">
-                        <label>{{ $t('trials:ptData:label:injectTime') }}</label>
-                        <span>{{ study.RadiopharmaceuticalStartTime }}</span>
-                      </div>
-                      <div class="patient-info-row">
-                        <label>{{ $t('trials:ptData:label:acquisitionTime') }}</label>
-                        <span>{{ study.AcquisitionTime }}</span>
-                      </div>
-                      <i slot="reference" class="el-icon-document"
-                        style="font-size: 15px;cursor: pointer;color: #f5f7fa;" />
-                    </el-popover>
+                  <div style="text-overflow: ellipsis;overflow: hidden;">
+                    <span class="study-meta-line" :title="study.Modalities">
+                      <span>{{ study.Modalities }} ({{ study.SeriesCount }})</span>
+                      <span class="patient-info" v-if="['PT、CT', 'CT、PT', 'PET-CT'].includes(study.Modalities)">
+                        <el-popover placement="right-start" trigger="hover" popper-class="patient-info-popper">
+                          <h4>{{ $t('trials:ptData:title') }}</h4>
+                          <div class="patient-info-row">
+                            <label>{{ $t('trials:ptData:label:patientSex') }}</label>
+                            <span>{{ study.PatientSex }}</span>
+                          </div>
+                          <div class="patient-info-row">
+                            <label>{{ $t('trials:ptData:label:patientWeight') }}</label>
+                            <span>{{ study.PatientWeight }}</span>
+                          </div>
+                          <div class="patient-info-row">
+                            <label>{{ $t('trials:ptData:label:totalDose') }}</label>
+                            <span>{{ study.RadionuclideTotalDose }}</span>
+                          </div>
+                          <div class="patient-info-row">
+                            <label>{{ $t('trials:ptData:label:halfLife') }}</label>
+                            <span>{{ study.RadionuclideHalfLife }}</span>
+                          </div>
+                          <div class="patient-info-row">
+                            <label>{{ $t('trials:ptData:label:injectTime') }}</label>
+                            <span>{{ study.RadiopharmaceuticalStartTime }}</span>
+                          </div>
+                          <div class="patient-info-row">
+                            <label>{{ $t('trials:ptData:label:acquisitionTime') }}</label>
+                            <span>{{ study.AcquisitionTime }}</span>
+                          </div>
+                          <i slot="reference" class="el-icon-document"
+                            style="font-size: 15px;cursor: pointer;color: #f5f7fa;" />
+                        </el-popover>
+                      </span>
+                    </span>
                   </div>
+                  <div v-if="study.Description" class="study-desc-text" :title="study.Description">{{ study.Description }}</div>
                 </div>
 
             </div>
@@ -974,6 +974,18 @@ export default {
     color: #d0d0d0;
     padding: 2px;
   }
+  .study-meta-line {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    vertical-align: middle;
+  }
+  .study-desc-text {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 
   .ps {
     overflow-anchor: none;
@@ -1069,7 +1081,16 @@ export default {
       color: #ddd;
       border-bottom-color:#5a5a5a;
       padding-left: 5px;
-      height: 40px;
+      min-height: 40px;
+      height: auto;
+      line-height: 20px;
+      align-items: flex-start;
+      padding-top: 6px;
+      padding-bottom: 6px;
+    }
+    .el-collapse-item__arrow{
+      align-self: flex-start;
+      margin-top: 2px;
       line-height: 20px;
     }
   }
@@ -1141,8 +1162,9 @@ export default {
 </style>
 <style lang="scss">
 .patient-info {
-  // display: inline-block;
-  text-align: right;
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
 }
 .patient-info-popper {
   font-size: 12px;
diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/StudyList.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/StudyList.vue
index 7af6bb91..5133afee 100644
--- a/src/views/trials/trials-panel/reading/dicoms3D/components/StudyList.vue
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/StudyList.vue
@@ -14,56 +14,51 @@
           <el-collapse-item :key="`${study.StudyId}`" :name="`${study.StudyId}`" v-if="!study.IsCriticalSequence">
             <template slot="title">
               <div v-if="readingTool !== 3 || !study.IsCriticalSequence" class="dicom-desc">
-                <template v-if="taskInfo && taskInfo.IsShowStudyName">
-                  <div style="text-overflow: ellipsis;overflow: hidden;">
-                    <span :title="study.StudyCode">{{ study.StudyCode }}</span>
-                    <span v-if="study.StudyName" :title="study.StudyName" style="margin-left: 5px;">{{ study.StudyName
-                    }}</span>
-                    <span v-else :title="study.Modalities" style="margin-left: 5px;">{{ `${study.Modalities}
-                      (${study.SeriesCount})` }}</span>
-                  </div>
-                  <div v-if="study.StudyName" style="text-overflow: ellipsis;overflow: hidden;">
-                    <span :title="study.Modalities">{{ `${study.Modalities} (${study.SeriesCount})` }}</span>
-                  </div>
-                </template>
-                <template v-else-if="taskInfo && !taskInfo.IsShowStudyName">
-                  <div style="text-overflow: ellipsis;overflow: hidden;">
-                    <span :title="study.StudyCode">{{ study.StudyCode }}</span>
-                    <span :title="study.Modalities">{{ `${study.Modalities} (${study.SeriesCount})` }}</span>
-                  </div>
-                </template>
-                <div class="patient-info" v-if="['PT、CT', 'CT、PT', 'PET-CT'].includes(study.Modalities)">
-                  <el-popover placement="right-start" trigger="hover" popper-class="patient-info-popper">
-                    <h4>{{ $t('trials:ptData:title') }}</h4>
-                    <div class="patient-info-row">
-                      <label>{{ $t('trials:ptData:label:patientSex') }}</label>
-                      <span>{{ study.PatientSex }}</span>
-                    </div>
-                    <div class="patient-info-row">
-                      <label>{{ $t('trials:ptData:label:patientWeight') }}</label>
-                      <span>{{ study.PatientWeight }}</span>
-                    </div>
-                    <div class="patient-info-row">
-                      <label>{{ $t('trials:ptData:label:totalDose') }}</label>
-                      <span>{{ study.RadionuclideTotalDose }}</span>
-                    </div>
-                    <div class="patient-info-row">
-                      <label>{{ $t('trials:ptData:label:halfLife') }}</label>
-                      <span>{{ study.RadionuclideHalfLife }}</span>
-                    </div>
-                    <div class="patient-info-row">
-                      <label>{{ $t('trials:ptData:label:injectTime') }}</label>
-                      <span>{{ study.RadiopharmaceuticalStartTime }}</span>
-                    </div>
-                    <div class="patient-info-row">
-                      <label>{{ $t('trials:ptData:label:acquisitionTime') }}</label>
-                      <span>{{ study.AcquisitionTime }}</span>
-                    </div>
-                    <i slot="reference" class="el-icon-document"
-                      style="font-size: 15px;cursor: pointer;color: #f5f7fa;" />
-                  </el-popover>
+                <div style="text-overflow: ellipsis;overflow: hidden;">
+                  <span :title="study.StudyCode">{{ study.StudyCode }}</span>
+                  <span v-if="taskInfo && taskInfo.IsShowStudyName && study.StudyName" :title="study.StudyName" style="margin-left: 5px;">
+                    {{ study.StudyName }}
+                  </span>
+                </div>
+                <div style="text-overflow: ellipsis;overflow: hidden;">
+                  <span class="study-meta-line" :title="study.Modalities">
+                    <span>{{ `${study.Modalities} (${study.SeriesCount})` }}</span>
+                    <span class="patient-info" v-if="['PT、CT', 'CT、PT', 'PET-CT'].includes(study.Modalities)">
+                      <el-popover placement="right-start" trigger="hover" popper-class="patient-info-popper">
+                        <h4>{{ $t('trials:ptData:title') }}</h4>
+                        <div class="patient-info-row">
+                          <label>{{ $t('trials:ptData:label:patientSex') }}</label>
+                          <span>{{ study.PatientSex }}</span>
+                        </div>
+                        <div class="patient-info-row">
+                          <label>{{ $t('trials:ptData:label:patientWeight') }}</label>
+                          <span>{{ study.PatientWeight }}</span>
+                        </div>
+                        <div class="patient-info-row">
+                          <label>{{ $t('trials:ptData:label:totalDose') }}</label>
+                          <span>{{ study.RadionuclideTotalDose }}</span>
+                        </div>
+                        <div class="patient-info-row">
+                          <label>{{ $t('trials:ptData:label:halfLife') }}</label>
+                          <span>{{ study.RadionuclideHalfLife }}</span>
+                        </div>
+                        <div class="patient-info-row">
+                          <label>{{ $t('trials:ptData:label:injectTime') }}</label>
+                          <span>{{ study.RadiopharmaceuticalStartTime }}</span>
+                        </div>
+                        <div class="patient-info-row">
+                          <label>{{ $t('trials:ptData:label:acquisitionTime') }}</label>
+                          <span>{{ study.AcquisitionTime }}</span>
+                        </div>
+                        <i slot="reference" class="el-icon-document"
+                          style="font-size: 15px;cursor: pointer;color: #f5f7fa;" />
+                      </el-popover>
+                    </span>
+                  </span>
+                </div>
+                <div style="text-overflow: ellipsis;overflow: hidden;">
+                  <span :title="study.Description">{{ study.Description }}</span>
                 </div>
-
               </div>
               <div v-else>
                 <!-- 关键序列 -->
@@ -265,10 +260,10 @@ export default {
 }
 </script>
 <style lang="scss">
-.patient-info {
-  // display: inline-block;
-  text-align: right;
-}
+// .patient-info {
+//   // display: inline-block;
+//   // text-align: right;
+// }
 
 .patient-info-popper {
   font-size: 12px;
@@ -343,6 +338,17 @@ export default {
     overflow: hidden;
     text-overflow: ellipsis;
   }
+  .study-meta-line {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    vertical-align: middle;
+  }
+  .patient-info {
+    display: inline-flex;
+    align-items: center;
+    line-height: 1;
+  }
 
   .ps {
     flex: 1;
@@ -427,8 +433,12 @@ export default {
       color: #ddd;
       border-bottom-color: #5a5a5a;
       padding-left: 5px;
-      // height: 50px;
+      min-height: 40px;
+      height: auto;
       line-height: 20px;
+      align-items: flex-start;
+      padding-top: 6px;
+      padding-bottom: 6px;
     }
   }
 

From 6a65b6507fdaf0822c5bbbe43dc4d4ba18e8361f Mon Sep 17 00:00:00 2001
From: caiyiling <1321909229@qq.com>
Date: Wed, 6 May 2026 11:38:18 +0800
Subject: [PATCH 3/4] 1

---
 .../trials-panel/reading/dicoms/components/Fusion/PetCt.vue   | 2 +-
 .../trials-panel/reading/dicoms3D/components/StudyList.vue    | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/views/trials/trials-panel/reading/dicoms/components/Fusion/PetCt.vue b/src/views/trials/trials-panel/reading/dicoms/components/Fusion/PetCt.vue
index 204f79cc..e44094dc 100644
--- a/src/views/trials/trials-panel/reading/dicoms/components/Fusion/PetCt.vue
+++ b/src/views/trials/trials-panel/reading/dicoms/components/Fusion/PetCt.vue
@@ -140,7 +140,7 @@
         </div>
       </el-tooltip> -->
       <!-- 伪彩 -->
-      <colorMap v-show="isFusion" ref="colorMap" :unit="fusionOverlayModality === 'NM' ? 'counts' : 'g/ml'"
+      <colorMap v-show="isFusion" ref="colorMap" :unit="fusionOverlayModality === 'NM' ? '' : 'g/ml'"
         :modality="fusionOverlayModality" @setColorMap="setColorMap" @voiChange="voiChange" />
 
       <!-- 截屏 -->
diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/StudyList.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/StudyList.vue
index 5133afee..ba7bad36 100644
--- a/src/views/trials/trials-panel/reading/dicoms3D/components/StudyList.vue
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/StudyList.vue
@@ -56,9 +56,7 @@
                     </span>
                   </span>
                 </div>
-                <div style="text-overflow: ellipsis;overflow: hidden;">
-                  <span :title="study.Description">{{ study.Description }}</span>
-                </div>
+
               </div>
               <div v-else>
                 <!-- 关键序列 -->

From ec7cb78018f8c603fd31ebf16629af3058ce4a87 Mon Sep 17 00:00:00 2001
From: caiyiling <1321909229@qq.com>
Date: Wed, 6 May 2026 13:21:45 +0800
Subject: [PATCH 4/4] =?UTF-8?q?lugano=E6=A0=87=E5=87=86=E8=9E=8D=E5=90=88?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8Dcolormap=20bar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dicoms/components/Fusion/PetCt.vue        |  4 ++--
 .../dicoms/components/Fusion/Viewport.vue     | 21 ++++++++++++++++---
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/views/trials/trials-panel/reading/dicoms/components/Fusion/PetCt.vue b/src/views/trials/trials-panel/reading/dicoms/components/Fusion/PetCt.vue
index e44094dc..f4f156ac 100644
--- a/src/views/trials/trials-panel/reading/dicoms/components/Fusion/PetCt.vue
+++ b/src/views/trials/trials-panel/reading/dicoms/components/Fusion/PetCt.vue
@@ -130,7 +130,7 @@
           <div class="text">{{ $t('trials:reading:button:reset') }}</div>
         </div>
       </el-tooltip>
-      <!-- <el-tooltip v-if="!isBaseLineTask" class="item" effect="dark" :content="$t('trials:lugano:button:record')"
+      <el-tooltip v-if="!isBaseLineTask" class="item" effect="dark" :content="$t('trials:lugano:button:record')"
         placement="bottom">
         <div class="tool-wrapper">
           <div class="icon" @click.prevent="historyRecord">
@@ -138,7 +138,7 @@
           </div>
           <div class="text">{{ $t('trials:lugano:button:record') }}</div>
         </div>
-      </el-tooltip> -->
+      </el-tooltip>
       <!-- 伪彩 -->
       <colorMap v-show="isFusion" ref="colorMap" :unit="fusionOverlayModality === 'NM' ? '' : 'g/ml'"
         :modality="fusionOverlayModality" @setColorMap="setColorMap" @voiChange="voiChange" />
diff --git a/src/views/trials/trials-panel/reading/dicoms/components/Fusion/Viewport.vue b/src/views/trials/trials-panel/reading/dicoms/components/Fusion/Viewport.vue
index 83339788..b0f4b923 100644
--- a/src/views/trials/trials-panel/reading/dicoms/components/Fusion/Viewport.vue
+++ b/src/views/trials/trials-panel/reading/dicoms/components/Fusion/Viewport.vue
@@ -6,7 +6,7 @@
   >
     <div :id="`viewport${index}`" ref="viewportCanvas" style="height: 100%;width:100%" />
     <!-- 序列信息 -->
-    <div
+    <div 
       v-if="seriesInfo.taskBlindName"
       class="seriesInfo_wrapper"
       :style="{color:index%2 == 1 ? '#ddd' : '#666'}"
@@ -81,7 +81,7 @@
       {{ markers.left }}
     </div>
     <div v-if="presetName" class="color_bar">
-      <canvas id="colorBar_Canvas" />
+      <canvas ref="colorBarCanvas" />
     </div>
     <div v-if="index === 4" id="rotateBar" ref="rotateBar" class="rotate_slider_box" @click.stop="clickRotate($event)">
       <div id="rotateSlider" :style="{left: rotateBarLeft + 'px'}" class="box" @click.stop.prevent="() => {return}" @mousedown.stop="rotateBarMousedown($event)" />
@@ -162,6 +162,10 @@ export default {
       default() {
         return []
       }
+    },
+    rgbPresetName: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -203,6 +207,16 @@ export default {
       handler(v) {
         console.log('activeIndex ', v)
       }
+    },
+    rgbPresetName: {
+      immediate: true,
+      handler(v) {
+        this.presetName = v || ''
+        if (!this.presetName) return
+        this.$nextTick(() => {
+          this.renderColorBar(this.presetName)
+        })
+      }
     }
   },
   mounted() {
@@ -574,7 +588,8 @@ export default {
         colorMap = getColormap(presetName)
       }
       const rgbPoints = colorMap.RGBPoints
-      const canvas = document.getElementById('colorBar_Canvas')
+      const canvas = this.$refs.colorBarCanvas
+      if (!canvas) return
       const ctx = canvas.getContext('2d')
       const canvasWidth = 160
       const canvasHeight = 5