From 64dd51ab06ea20d70682f69d46dc69ba0206a593 Mon Sep 17 00:00:00 2001
From: danshihao <danshihao@syxysoft.com>
Date: Fri, 26 Apr 2024 10:48:53 +0800
Subject: [PATCH] =?UTF-8?q?[fix=2084025]=20=E9=83=A8=E5=88=86=E6=BA=A2?=
 =?UTF-8?q?=E5=87=BA=E6=95=88=E6=9E=9C=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/vant/DictPicker.vue            | 46 ++++++++++++++++++-
 src/components/vant/SelectPicker.vue          | 43 ++++++++++++++++-
 src/utils/charts.js                           |  4 +-
 .../EquipmentManagement.vue                   | 11 ++++-
 4 files changed, 99 insertions(+), 5 deletions(-)

diff --git a/src/components/vant/DictPicker.vue b/src/components/vant/DictPicker.vue
index d83e66f..e6f4be3 100644
--- a/src/components/vant/DictPicker.vue
+++ b/src/components/vant/DictPicker.vue
@@ -14,19 +14,24 @@
                position="bottom"
                safe-area-inset-bottom>
       <van-picker
+        ref="picker"
         :loading="loading"
         :title="placeholder"
         :columns="dictOptions"
         show-toolbar
         @confirm="onConfirm"
         @cancel="onCancel"
-      />
+      >
+        <span slot="option" slot-scope="option" class="custom-option">{{ option.text || option.label }}</span>
+      </van-picker>
     </van-popup>
   </div>
 </template>
 
 <script>
 
+import debounce from 'lodash/debounce'
+
 export default {
   name: 'DictPicker',
   props: {
@@ -48,7 +53,31 @@ export default {
       dictOptions: []
     }
   },
+  watch: {
+    show (val) {
+      val && this.updateScroll()
+    }
+  },
   methods: {
+    // 处理滚动样式
+    updateScroll: debounce(function () {
+      this.$nextTick(() => {
+        // 获取所有选项
+        const selectedItems = [...this.$refs.picker.$el.querySelectorAll('.van-picker-column__item')]
+        selectedItems.forEach(item => {
+          const child = item.querySelector('.custom-option')
+          // 文字超出父容器大小就添加滚动样式设置滚动时间
+          if (child.offsetWidth > item.offsetWidth) {
+            child.classList.add('custom-option-scroll')
+            // 根据内容宽度调整速度
+            child.style = `animation-duration: ${child.offsetWidth / 50}s`
+          } else {
+            child.classList.remove('custom-option-scroll')
+            child.style = ''
+          }
+        })
+      })
+    }, 500),
     // 打开下拉，并且获取下拉数据
     onOpen () {
       // 如果是被禁用就不打开弹框
@@ -98,4 +127,19 @@ export default {
     background: transparent;
   }
 }
+
+// 一行显示不全，增加滚动显示所有文字
+.custom-option {
+  white-space: nowrap;
+}
+.custom-option-scroll {
+  animation: scrollText 4s linear infinite;
+}
+@keyframes scrollText {
+  //0% { transform: translateX(100%); }
+  //100% { transform: translateX(-100%); }
+  0% { transform: translateX(50%); }
+  50% { transform: translateX(-50%); }
+  100% { transform: translateX(50%); }
+}
 </style>
diff --git a/src/components/vant/SelectPicker.vue b/src/components/vant/SelectPicker.vue
index 9682176..c5d02e5 100644
--- a/src/components/vant/SelectPicker.vue
+++ b/src/components/vant/SelectPicker.vue
@@ -15,6 +15,7 @@
                position="bottom"
                safe-area-inset-bottom>
       <van-picker
+        ref="picker"
         :loading="loading"
         :title="placeholder"
         :columns="options"
@@ -22,12 +23,15 @@
         :value-key="labelKey"
         @confirm="onConfirm"
         @cancel="onCancel"
-      />
+      >
+        <span slot="option" slot-scope="option" class="custom-option">{{option[labelKey]}}</span>
+      </van-picker>
     </van-popup>
   </div>
 </template>
 
 <script>
+import debounce from 'lodash/debounce'
 
 export default {
   name: 'SelectPicker',
@@ -76,9 +80,31 @@ export default {
           ...val
         ]
       }
+    },
+    show (val) {
+      val && this.updateScroll()
     }
   },
   methods: {
+    // 处理滚动样式
+    updateScroll: debounce(function () {
+      this.$nextTick(() => {
+        // 获取所有选项
+        const selectedItems = [...this.$refs.picker.$el.querySelectorAll('.van-picker-column__item')]
+        selectedItems.forEach(item => {
+          const child = item.querySelector('.custom-option')
+          // 文字超出父容器大小就添加滚动样式设置滚动时间
+          if (child.offsetWidth > item.offsetWidth) {
+            child.classList.add('custom-option-scroll')
+            // 根据内容宽度调整速度
+            child.style = `animation-duration: ${child.offsetWidth / 50}s`
+          } else {
+            child.classList.remove('custom-option-scroll')
+            child.style = ''
+          }
+        })
+      })
+    }, 500),
     // 打开下拉，并且获取下拉数据
     onOpen () {
       // 如果是被禁用就不打开弹框
@@ -121,4 +147,19 @@ export default {
     background: transparent;
   }
 }
+
+// 一行显示不全，增加滚动显示所有文字
+.custom-option {
+  white-space: nowrap;
+}
+.custom-option-scroll {
+  animation: scrollText 4s linear infinite;
+}
+@keyframes scrollText {
+  //0% { transform: translateX(100%); }
+  //100% { transform: translateX(-100%); }
+  0% { transform: translateX(50%); }
+  50% { transform: translateX(-50%); }
+  100% { transform: translateX(50%); }
+}
 </style>
diff --git a/src/utils/charts.js b/src/utils/charts.js
index 784513d..c5aed8e 100644
--- a/src/utils/charts.js
+++ b/src/utils/charts.js
@@ -1,8 +1,8 @@
 // 折线图点base64
 export const lineSymbolBase64 = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAdhJREFUOE+tlEFLVGEUhp/TrbTRUcPFjMVkSQQuIig0C4I2Qi36Aa76G25cufFvtOoHtEncuEgqSyFcuCjKGquZTWUOU5nXY+94vhjCaRF98HG58H3Pfc973nON/7CsneHuetc+DQwBg8BRYAfYAqpAzczy9nt/QnqBceAnsBEXBTgGnASGgQx4bmaNBPoNcXcBrgFvgA9xWBd0xoE9YBc4BZwDHidQC+LuOnwD2JRcoAs4HqUkiNRJlXYZOAMsmtlegsiDEWA1ACeAQoCOhIofwHegGc8rKtnMqgkyESV8AXqA3lqT89VtZnO4lMF6pch0ucBLYDtAA1JkZssJcgtYCvnypu9Znfu5czGZlxkrYyXuAl8BmaoOXTezhwlyB1gAVEaf9pM6q3irvQfL2J0ocTkgAn379eFJM3uQILdDiQxOSu7ljupurcxYGysx1aZEnZKS+QS5Gp4oUDJUnlyoNpjLndEMXlSKzJQLvIpSVI5yM2RmTxOkApwFVoDuAOmpVv+tO6/N7H2C6OBN4F3kRBkRQJ50yoli8Ugj0CmxHw9JrLrRObHJPHcvQstMXXgLfI45kqr+mB3N0fKhs9MGUocUa/mkiypNCj4BUripqHec4n/9tewDCYOsEgwJGJUAAAAASUVORK5CYII='
-const styleObj = {
+export const styleObj = {
   // x轴颜色
-  xAxisLineColor: 'rgba(108,128,151,0.4)',
+  xAxisLineColor: '#647C97',
   // x轴文字颜色
   xAxisFontColor: '#86909C',
   // y轴文字颜色
diff --git a/src/views/systemOverview/equipmentManagement/EquipmentManagement.vue b/src/views/systemOverview/equipmentManagement/EquipmentManagement.vue
index dc9cf46..6396f12 100644
--- a/src/views/systemOverview/equipmentManagement/EquipmentManagement.vue
+++ b/src/views/systemOverview/equipmentManagement/EquipmentManagement.vue
@@ -102,6 +102,7 @@
                   </a-form-item>
                   <a-form-item label="设备类型">
                     <j-dict-select-tag :triggerChange="true"
+                                       class="select-max-width"
                                        dictCode="device_type"
                                        v-decorator="['deviceType', validatorRules.deviceType]"
                                        placeholder="请选择设备类型">
@@ -109,9 +110,10 @@
                   </a-form-item>
                   <a-form-item label="所属井口">
                     <a-select v-decorator="['wellheadId', validatorRules.wellheadId]" allowClear
+                              class="select-max-width"
                               placeholder="请选择所属井口">
                       <a-icon slot="suffixIcon" type="caret-down" class="select-arrow" />
-                      <a-select-option v-for="item in wellheadList" :key="item.id" :value="item.id">{{ item.wellheadName }}</a-select-option>
+                      <a-select-option v-for="item in wellheadList" :key="item.id" :value="item.id" :title="item.wellheadName">{{ item.wellheadName }}</a-select-option>
                     </a-select>
                   </a-form-item>
                   <a-form-item label="设备描述">
@@ -147,6 +149,7 @@
                   </a-form-item>
                   <a-form-item label="所属井场">
                     <j-dict-select-tag :triggerChange="true"
+                                       class="select-max-width"
                                        dictCode="wellhead_area"
                                        v-decorator="['wellheadArea', validatorRules.wellheadArea]"
                                        placeholder="请选择所属井场">
@@ -154,6 +157,7 @@
                   </a-form-item>
                   <a-form-item label="井口类型">
                     <j-dict-select-tag :triggerChange="true"
+                                       class="select-max-width"
                                        dictCode="wellhead_type"
                                        v-decorator="['wellheadType', validatorRules.wellheadType]"
                                        placeholder="请选择井口类型">
@@ -623,4 +627,9 @@ export default {
     }
   }
 }
+.select-max-width {
+  // 下拉框选择被内容撑开最大宽度
+  // 全屏幕 - 两侧内边距 - 左侧内容宽度 - 菜单宽度 - 距离菜单间隔 - 一些误差
+  max-width: calc((100vw - 48px - 545px - 172px - 24px - 24px) / 2 - 40px);
+}
 </style>