1。保德火灾粉尘三维模型组件修改

2. 添加全局预警弹框拖拽功能

public/js/config.js

@@ -13,5 +13,6 @@ const VENT_PARAM = {
   // simulatedPassword: '123456', //(simulatedPassword 为空时有密码输入框弹出，不为空时不弹出密码输入框，无需输入密码)
   simulatedPassword: '',
   showReport: true,
-  isoOpenSso: 'false'
+  isoOpenSso: 'false',
+  modalText: '' //国家能源集团沙吉海煤矿 //三维模型电子屏底部文字配置
 }

src/components/Modal/src/hooks/useModalDrag.ts

@@ -38,11 +38,11 @@ export function useModalDragMove(context: UseModalDragMoveContext) {
       const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
       const minDragDomTop = dragDom.offsetTop;
       let maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;
-      //update-begin-author:liusq---date:20230407--for: [issue/430]弹出页面出现自动吸顶，无法移动和显示头部--- 
-      if(maxDragDomTop<0){
-        maxDragDomTop = screenHeight - dragDom.offsetTop
+      //update-begin-author:liusq---date:20230407--for: [issue/430]弹出页面出现自动吸顶，无法移动和显示头部---
+      if (maxDragDomTop < 0) {
+        maxDragDomTop = screenHeight - dragDom.offsetTop;
       }
-      //update-end-author:liusq---date:20230407--for: [issue/430]弹出页面出现自动吸顶，无法移动和显示头部--- 
+      //update-end-author:liusq---date:20230407--for: [issue/430]弹出页面出现自动吸顶，无法移动和显示头部---
       // 获取到的值带px 正则匹配替换
       const domLeft = getStyle(dragDom, 'left');
       const domTop = getStyle(dragDom, 'top');

src/hooks/event/useDrag.ts

@@ -42,4 +42,4 @@ export function useDrag(sliderDom: HTMLElement) {
   document.addEventListener('pointerup', onMosueUp);
 
   return { onMouseDown, onMouseMove, onMosueUp };
-}
+}

src/layouts/default/header/components/VoiceBroadcast.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="position: fixed; z-index: 999; right: 120px; top: 20px; color: #fff">
+  <div style="position: fixed; z-index: 999999; right: 120px; top: 20px; color: #fff">
     <div class="btn" @click="showWarningBroad">
       <!-- <div>语音播报</div>
     <a-badge :count="10">
@@ -10,11 +10,11 @@
         <WarningOutlined style="font-size: 22px; color: #fff" />
       </a-badge>
     </div>
-    <div v-if="isShowWarningBroad" class="broadcast">
+    <div v-if="isShowWarningBroad" class="broadcast" ref="VoiceBroadcastRef" id="VoiceBroadcast">
       <div class="title">
         <div class="message-title">预警通知</div>
         <div class="badge-box">
-          <SoundOutlined :class="{ 'no-play': !isBroad }" style="font-size: 16px; color: #fff" @click="handleBroad" />
+          <SoundOutlined :class="{ 'no-play': !isBroad }" style="font-size: 20px; color: #fff" @click="handleBroad" />
         </div>
       </div>
       <div class="broadcast-context">
@@ -33,7 +33,7 @@
             :style="{ color: item['isok'] == 0 ? '#f73210' : '#eee', fontWeight: item['isok'] == 0 ? '600' : '500' }"
           >
             <div>{{ item['createTime'] }}</div>
-            <div>{{ item['devicekind_dictText'] }}</div>
+            <div>{{ item['devicename'] }}</div>
             <div>{{ item['wardescrip'] || item['nwartype_dictText'] }}</div>
             <div>{{ item['isok'] ? '已解决' : '未解决' }}</div>
           </div>
@@ -47,7 +47,7 @@
   import { Tooltip, Badge } from 'ant-design-vue';
   import { SoundOutlined, BellOutlined, WarningOutlined } from '@ant-design/icons-vue';
   import Icon from '/@/components/Icon';
-  import { defineComponent, ref, unref, onMounted } from 'vue';
+  import { defineComponent, ref, unref, onMounted, nextTick } from 'vue';
   import { defHttp } from '/@/utils/http/axios';
   import { useRouter } from 'vue-router';
   import { connectWebSocket, onWebSocket } from '/@/hooks/web/useWebSocket';
@@ -55,6 +55,7 @@
   import { useUserStore } from '/@/store/modules/user';
   import { useGlobSetting } from '/@/hooks/setting';
   import SpeakVoice from './notify/speakVoice';
+  import { useDrag } from '@/hooks/event/useDrag';
 
   export default defineComponent({
     name: 'VoiceBroadcast',
@@ -71,10 +72,15 @@
       const isBroad = ref(true);
       const isWarningDot = ref(false);
       const broadcastList = ref([]);
+
       function showWarningBroad() {
         isShowWarningBroad.value = !isShowWarningBroad.value;
         if (isShowWarningBroad.value) {
           toSelectList(0);
+          nextTick(() => {
+            const dom = document.getElementById('VoiceBroadcast');
+            if (dom) useDrag(dom);
+          });
         }
       }
 
@@ -84,7 +90,7 @@
 
       async function toSelectList(key) {
         activeKey.value = key;
-        const res = await list({ pageSize: 20, devicetype: '', isok: key == 1 ? 0 : key == 2 ? 1 : null });
+        const res = await list({ pageSize: 20, devicetype: '', isok: key == 1 ? 0 : key == 2 ? 1 : null, sort: 'createTime' });
         broadcastList.value = res['records'];
         // const isHasWarning = broadcastList.value.findIndex((item) => !item['isok']);
         // isWarningDot.value = isHasWarning > -1 ? true : false;
@@ -145,14 +151,23 @@
   }
 
   .no-play {
-    background: linear-gradient(
-      to bottom left,
-      transparent 0%,
-      transparent calc(50% - 1px),
-      #000000 50%,
-      transparent calc(50% + 1px),
-      transparent 100%
-    );
+    position: relative;
+    &::after {
+      position: absolute;
+      width: 70%;
+      height: 100%;
+      content: '';
+      left: 15%;
+      top: 0;
+      background: linear-gradient(
+        to bottom left,
+        transparent 0%,
+        transparent calc(50% - 1px),
+        #ffffff 50%,
+        transparent calc(50% + 1px),
+        transparent 100%
+      );
+    }
   }
 
   .broadcast {
@@ -248,11 +263,11 @@
             justify-content: flex-start;
 
             &:nth-child(1) {
-              width: 40%;
+              width: 44%;
             }
 
             &:nth-child(2) {
-              width: 20%;
+              width: 40%;
             }
 
             &:nth-child(3) {

src/layouts/default/header/components/notify/speakVoice.ts

@@ -9,7 +9,12 @@ export default class SpeakVoice {
     this.voices = [];
     this.initVoice();
   }
-
+  button = document.createElement('button');
+  event = new MouseEvent('click', {
+    view: window,
+    bubbles: true,
+    cancelable: true,
+  });
   // 初始化
   initVoice() {
     this.instance.volume = 1; // 声音音量：1，范围从0到1
@@ -28,9 +33,20 @@ export default class SpeakVoice {
 
   // 语音队列重播
   handleReply(text) {
-    this.instance.text = text;
-    this.handleCancel();
-    this.handleSpeak();
+    const _this = this;
+
+    // button.textContent = '点击我';
+
+    // 添加点击事件处理程序
+    this.button.addEventListener('click', function () {
+      _this.instance.text = text;
+      _this.handleCancel();
+      _this.handleSpeak();
+    });
+
+    // 模拟用户点击事件
+
+    this.button.dispatchEvent(this.event);
   }
 
   // 语音队列删除 , 删除队列中所有的语音.如果正在播放,则直接停止

src/layouts/default/header/index.less

@@ -11,6 +11,8 @@
   margin-left: -1px;
   line-height: @header-height;
   color: @white;
+  position: relative;
+  z-index: 99999;
   // background-color: @white;
 
   // align-items: center;

src/layouts/default/header/index.vue

@@ -12,6 +12,7 @@
         'no-header': currentRoute.path.endsWith('home'),
       },
     ]"
+    style="z-index: 9999"
   >
     <!-- left start -->
     <div :class="`${prefixCls}-left`">
@@ -55,7 +56,7 @@
   <div
     v-else-if="currentRoute.path.endsWith('home') || currentRoute.path.startsWith('/micro')"
     :class="`${prefixCls}-action`"
-    style="position: fixed; top: 30px; right: 20px; z-index: 999"
+    style="position: fixed; top: 30px; right: 20px; z-index: 999999"
   >
     <div class="right-position">
       <UserDropDown v-if="showUserDropdown" :theme="getHeaderTheme" />

src/views/vent/home/configurable/dustBD.vue

@@ -54,8 +54,7 @@
       :page-type="pageType"
     />
     <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
-      <!-- <VentModal /> -->
-      <iframe style="width: 1000px; height: 570px" :src="iframeUrl" ref="frameRef" @load="hideLoading"></iframe>
+      <VentModal />
     </div>
   </div>
 </template>
@@ -66,7 +65,7 @@
   // import { useInitConfigs } from './hooks/useInit';
   import ModuleBD from './components/ModuleBD.vue';
   import { testConfigBDDust } from './configurable.data';
-  // import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import VentModal from '/@/components/vent/micro/ventModal.vue';
   import { getBDDustData } from './configurable.api';
   import { getToken } from '/@/utils/auth';
 

src/views/vent/home/configurable/fireBD.vue

@@ -65,8 +65,7 @@
       :page-type="pageType"
     />
     <div style="width: 1000px; height: 550px; position: absolute; left: calc(50% - 500px); top: 60px">
-      <!-- <VentModal /> -->
-      <iframe style="width: 1000px; height: 550px" :src="iframeUrl" ref="frameRef" @load="hideLoading"></iframe>
+      <VentModal />
     </div>
   </div>
 </template>
@@ -78,7 +77,7 @@
   import ModuleBD from './components/ModuleBD.vue';
   import ModuleBDDual from './components/ModuleBDDual.vue';
   import { testConfigBDFire } from './configurable.data';
-  // import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import VentModal from '/@/components/vent/micro/ventModal.vue';
   import { getBDFireData } from './configurable.api';
   import { getToken } from '/@/utils/auth';
 
@@ -87,9 +86,7 @@
   const mainTitle = ref('保德煤矿火灾预警系统');
   const pageType = 'BD_fire';
   const loading = ref(true);
-  const iframeUrl = ref(
-    `${location.protocol}//${location.hostname}:8091/dashboard/analysis?type=empty&deviceType=empty&showid=1&token=${getToken()}`
-  ); //正式时用 `${location.protocol}//${location.hostname}:8091/url`
+
   // const url = ref('http://localhost:8088/');
   // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
 

src/views/vent/monitorManager/fanLocalMonitor1/components/fanlocal-warn-history.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="alarm-history">
-    <AlarmHistoryTable columns-type="alarm" :device-type="`${devicekide}`" designScope="alarm-history" :scroll="scroll" />
+    <AlarmHistoryTable columns-type="alarm" :device-type="`${devicekide}`" designScope="alarm-history" :scroll="scroll" :deviceId="deviceId" />
   </div>
 </template>
 <script setup lang="ts">
-  import { reactive } from 'vue';
+  import { reactive, computed } from 'vue';
   import AlarmHistoryTable from '../../comment/AlarmHistoryTable.vue';
 
   const props = defineProps({
@@ -17,6 +17,7 @@
       default: '',
     },
   });
+  const deviceId = computed(() => props.deviceId);
   let scroll = reactive({
     y: 580,
   });