决策信息tip提示，页面交互监听

src/components/alarm/commonAlarm.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import { watch, onUnmounted, ref } from 'vue';
+import { watch, onUnmounted, ref, onMounted } from 'vue';
 import { useLineNetStore } from 'src/stores/line-net-store';
 import { useQuasar } from 'quasar';
 import alarmInfoDialog from 'src/components/alarm/alarmInfoDialog.vue';
@@ -16,6 +16,12 @@ const lineNetStore = useLineNetStore();
 const audio = ref();
 const $q = useQuasar();
 const dialogInstance = ref();
+const playAble = ref(false);
+const watchInteract = () => {
+  playAble.value = true;
+  document.removeEventListener('click', watchInteract);
+  document.removeEventListener('keydown', watchInteract);
+};
 
 watch(
   () => lineNetStore.alarmInfo,
@@ -31,7 +37,9 @@ watch(
 );
 
 function playAlarmMusic() {
-  audio.value.play();
+  if (playAble.value) {
+    audio.value.play();
+  }
 }
 
 function alarm() {
@@ -43,6 +51,11 @@ function alarm() {
     });
 }
 
+onMounted(() => {
+  document.addEventListener('click', watchInteract);
+  document.addEventListener('keydown', watchInteract);
+});
+
 onUnmounted(() => {
   if (dialogInstance.value && lineNetStore.alarmDialog) {
     dialogInstance.value.hide();

src/pages/DecisionInfoManage.vue

@@ -17,6 +17,14 @@
       <template v-slot:body-cell="props">
         <q-td :props="props" class="custom-column">
           {{ props.value }}
+          <q-tooltip
+            anchor="bottom middle"
+            v-if="props.value && props.value.length > 20"
+          >
+            <div class="message-tip">
+              {{ props.value }}
+            </div>
+          </q-tooltip>
         </q-td>
       </template>
       <template v-slot:top-right>
@@ -363,4 +371,12 @@ async function deleteData(row: any) {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.message-tip {
+  width: 300px;
+  max-height: 250px;
+  overflow: auto;
+  line-height: 22px;
+  white-space: pre-wrap;
+  font-size: 14px;
+}
 </style>