吉安感知网项目-前端
chenyao
2026-02-26 4d79070b1b00c233d6b143feca4cd26effb56918
Merge remote-tracking branch 'origin/master'
6 files modified
1 files added
358 ■■■■ changed files
applications/drone-command/src/components/map-container/device-map-container.vue 221 ●●●● patch | view | raw | blame | history
applications/drone-command/src/styles/common/cockpit.scss 4 ●●●● patch | view | raw | blame | history
applications/mobile-web-view/src/appPages/voiceCallDetail/index.vue 10 ●●●●● patch | view | raw | blame | history
uniapps/work-app/src/hooks/useGlobalWS.js 112 ●●●● patch | view | raw | blame | history
uniapps/work-app/src/pages/voiceCall/index.vue 4 ●●●● patch | view | raw | blame | history
uniapps/work-app/src/static/audio/ringtone.mp3 patch | view | raw | blame | history
uniapps/work-app/src/subPackages/voiceCallDetail/index.vue 7 ●●●● patch | view | raw | blame | history
applications/drone-command/src/components/map-container/device-map-container.vue
@@ -7,30 +7,42 @@
            @stage-change="handleStageChange" />
        <div v-if="props.showLayerControl" class="layer-control-root" :class="{ collapsed: props.rightCollapsed }">
            <div class="layer-control-wrap" ref="layerWrapRef">
                <div class="layer-control" @click="toggleLayerPanel">
                <div class="layer-control" @click.stop="toggleLayerPanel">
                    <img :src="layerControlIcon" alt="图层控制" />
                </div>
                <transition name="layer-panel-slide">
                    <div v-if="showLayerPanel" class="layer-panel">
                        <div class="panel-title">底图切换</div>
                        <div class="base-map-options">
                            <div class="base-map-card" :class="{ active: baseLayerKey === 'base-standard' }"
                                @click="handleBaseLayerSelect('base-standard')">
                                <img class="base-map-thumb standard" :src="dzIcon" alt="">
                                <div class="base-map-label">标准地图</div>
                            </div>
                            <div class="base-map-card" :class="{ active: baseLayerKey === 'base-satellite' }"
                                @click="handleBaseLayerSelect('base-satellite')">
                                <img class="base-map-thumb satellite" :src="yxIcon" alt="">
                                <div class="base-map-label">卫星地图</div>
                            </div>
                        </div>
                        <div class="panel-title">图层管理</div>
                        <div class="panel-content">
                            <el-tree ref="layerTreeRef" class="command-tree map-layer-tree" :data="layerTree" show-checkbox
                                default-expand-all node-key="key" :props="layerTreeProps"
                            <el-tree ref="layerTreeRef" class="command-tree map-layer-tree" :data="layerTree"
                            icon="el-icon-arrow-down-bold"
                                show-checkbox default-expand-all node-key="key" :props="layerTreeProps"
                                :default-checked-keys="treeCheckedKeys" @check="handleLayerCheck" />
                        </div>
                    </div>
                </transition>
            </div>
        </div>
        <div v-if="props.showLayerControl" class="base-layer-switch-root" :class="{ collapsed: props.rightCollapsed }">
            <div class="base-layer-switch-wrap" @mouseenter="showBaseLayerPanel = true"
                @mouseleave="showBaseLayerPanel = false">
                <div class="base-layer-trigger">
                    <img class="base-layer-trigger-thumb" :src="currentBaseLayer.icon" :alt="currentBaseLayer.label">
                    <div class="base-layer-trigger-label">{{ currentBaseLayer.shortLabel }}</div>
                </div>
                <transition name="layer-panel-slide">
                    <div v-if="showBaseLayerPanel" class="base-layer-panel">
                        <div class="base-map-options">
                            <div class="base-map-card" :class="{ active: baseLayerKey === 'base-satellite' }"
                                @click="handleBaseLayerSelect('base-satellite')">
                                <img class="base-map-thumb" :src="yxIcon" alt="">
                                <div class="base-map-label">卫星地图</div>
                            </div>
                            <div class="base-map-card" :class="{ active: baseLayerKey === 'base-standard' }"
                                @click="handleBaseLayerSelect('base-standard')">
                                <img class="base-map-thumb" :src="dzIcon" alt="">
                                <div class="base-map-label">标准地图</div>
                            </div>
                        </div>
                    </div>
                </transition>
@@ -47,6 +59,7 @@
</template>
<script setup>
import * as Cesium from 'cesium'
import CommonCesiumMap from '@/components/map-container/common-cesium-map.vue'
import { buildEllipsePositions } from '@/utils/cesium/shapeTools'
@@ -141,6 +154,7 @@
const clusterVisible = ref(false)
const countyCenterMap = new Map()
const showLayerPanel = ref(false)
const showBaseLayerPanel = ref(false)
const layerWrapRef = ref(null)
const layerTreeRef = ref(null)
const selectedDevice = ref(null)
@@ -155,6 +169,11 @@
const baseLayerKeys = ['base-standard', 'base-satellite']
const defaultCheckedKeys = ['ja-terrain', 'admin', 'city-base']
const baseLayerKey = ref('base-satellite')
const baseLayerMeta = {
    'base-standard': { icon: dzIcon, label: '标准地图', shortLabel: '标准' },
    'base-satellite': { icon: yxIcon, label: '卫星地图', shortLabel: '影像' },
}
const currentBaseLayer = computed(() => baseLayerMeta[baseLayerKey.value] || baseLayerMeta['base-satellite'])
const treeCheckedKeys = ref([...defaultCheckedKeys])
const layerTree = ref([
    {
@@ -1294,7 +1313,9 @@
watch(
    () => props.rightCollapsed,
    isCollapsed => {
        if (isCollapsed) showLayerPanel.value = false
        if (!isCollapsed) return
        showLayerPanel.value = false
        showBaseLayerPanel.value = false
    }
)
@@ -1333,7 +1354,7 @@
    setDroneVisibility(!showCluster)
}
const  handleMapReady = async ({ viewer: mapViewer, publicCesium: mapPublic }) => {
const handleMapReady = async ({ viewer: mapViewer, publicCesium: mapPublic }) => {
    if (mapReadyHandled) return
    mapReadyHandled = true
    viewer = mapViewer
@@ -1355,7 +1376,7 @@
    updateStageDisplay(stage)
}
const handleClickOutside = event => {
const handleLayerClickOutside = event => {
    if (!showLayerPanel.value) return
    const target = event.target
    if (layerWrapRef.value?.contains(target)) return
@@ -1363,13 +1384,13 @@
}
onMounted(() => {
    document.addEventListener('click', handleClickOutside)
    document.addEventListener('click', handleLayerClickOutside)
    const map = mapRef.value?.getMap()
    if (map?.viewer) handleMapReady(map)
})
onBeforeUnmount(() => {
    document.removeEventListener('click', handleClickOutside)
    document.removeEventListener('click', handleLayerClickOutside)
    clearDeviceEntities()
    clearPartitionEntities()
    clearAggregationEntities()
@@ -1480,51 +1501,125 @@
        overflow: auto;
    }
    .base-map-title {
        margin-bottom: 8px;
        font-size: 12px;
        color: #ffffff;
        font-weight: 600;
    }
}
    .base-map-options {
        padding: 16px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
.base-layer-switch-root {
    position: absolute;
    right: 337px;
    bottom: 78px;
    z-index: 11;
    transition: transform 0.3s ease-in-out;
    pointer-events: none;
    .base-map-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
    &.collapsed {
        transform: translateX(317px);
    }
}
.base-layer-switch-wrap {
    position: relative;
    pointer-events: auto;
}
.base-layer-trigger {
    width: 55px;
    padding: 8px 0;
    border-radius: 8px;
    background: #191932;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.base-layer-trigger-thumb {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: block;
    // border: 2px solid #fff;
    background-size: cover;
    background-position: center;
    box-sizing: border-box;
}
.base-layer-trigger-label {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1;
    color: #ffffff;
    font-weight: 700;
}
.base-layer-panel {
    position: absolute;
    right: calc(100% + 10px);
    bottom: 0;
    margin-bottom: 0;
    width: 160px;
    background: #191932;
    border-radius: 8px;
    z-index: 99;
    &::after {
        content: '';
        position: absolute;
        right: -10px;
        top: 0;
        width: 10px;
        height: 100%;
        background: transparent;
    }
}
.base-map-options {
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.base-map-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 6px;
    color: #d8e6ff;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    .base-map-thumb {
        width: 36px;
        height: 36px;
        border-radius: 6px;
        color: #d8e6ff;
        font-size: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
        .base-map-thumb {
            width: 46px;
            height: 46px;
            border-radius: 4px;
            background-size: cover;
            background-position: center;
            box-sizing: border-box;
        }
        &.active {
            .base-map-thumb {
                border: 2px solid #2ea8ff;
            }
            .base-map-label {
                color: #2ea8ff;
            }
        }
        // border: 2px solid #fff;
        background-size: cover;
        background-position: center;
        box-sizing: border-box;
    }
    .base-map-label {
        margin-top: 8px;
        font-size: 12px;
        line-height: 1;
        color: #ffffff;
        font-weight: 700;
    }
    // &.active {
    //     .base-map-thumb {
    //         border: 2px solid #2ea8ff;
    //     }
    //     .base-map-label {
    //         color: #2ea8ff;
    //     }
    // }
}
.layer-panel-slide-enter-active,
applications/drone-command/src/styles/common/cockpit.scss
@@ -135,6 +135,10 @@
    .el-tree-node__expand-icon.is-leaf {
        visibility: hidden;
    }
    .el-tree-node__expand-icon.expanded {
        transform: rotate(-180deg);
    }
}
.command-cascader {
applications/mobile-web-view/src/appPages/voiceCallDetail/index.vue
@@ -448,6 +448,9 @@
    send('accept', incomingFrom, null)
    log('✅ 已点击接听,发送 accept 给', incomingFrom)
    // 停止铃声
    const transmitData = { data: { type: 'stopVoice' } }
uni.postMessage(transmitData)
    state.value = 'calling'
    // 如果 offer 已经提前到达(我们暂存了),立刻 answer
@@ -463,6 +466,10 @@
    // 你后端没有 reject,用 busy 表示拒绝/不可接听
    send('busy', incomingFrom, null)
    log('❌ 已拒绝来电,发送 busy 给', incomingFrom)
    // 停止铃声
    const transmitData = { data: { type: 'stopVoice' } }
uni.postMessage(transmitData)
    incomingFrom = null
    acceptedByMe = false
@@ -514,6 +521,9 @@
}
function hangup() {
    // 停止铃声
    const transmitData = { data: { type: 'stopVoice' } }
uni.postMessage(transmitData)
    cleanup(true)
}
uniapps/work-app/src/hooks/useGlobalWS.js
@@ -8,6 +8,8 @@
  const callStatus = ref(null)
  // token 存储
  const accessToken = ref('')
  // 存储铃声实例
  let ringtoneInstance = null
  // 设置默认用户ID为3
  const defaultUserId = '2021474815063486465';
@@ -23,6 +25,10 @@
    // 处理语音通话请求
    if (t === 'call') {
      console.log('📞 全局收到来电 call,来自', payload.from)
      // 播放铃声
      playRingtone();
      // 触发震动
      triggerVibration();
      // 构建来电参数
      const callParams = {
        peerUid: payload.from,
@@ -47,31 +53,89 @@
      }
      return
    }
  }
    // 然后处理biz_code格式的消息
    // switch (bizCode) {
    //   case 'JOB_ISREFRESH':
    //     appStore.setJobUpdateKeyAdd()
    //     break
    //   case 'DEVICE_ISREFRESH':
    //     appStore.setDeviceUpdateKeyAdd()
    //     break
    //   case 'DOWNLOAD_PROGRESS':
    //     break
    //   case 'LOGOUT_USER':
    //     userStore.setUserInfo(null)
    //     uni.reLaunch({
    //       url: '/pages/login/index'
    //     })
    //     break
    //   case 'VoiceCall':
    //     // enterRoom(payload, userId.value)
    //     break
    //   default:
    //     // 记录未处理的消息
    //     console.log('未处理的WebSocket消息:', payload)
    //     break;
    // }
  // 播放来电铃声 - 定义在 messageHandler 外部
  function playRingtone() {
    try {
      if (typeof uni !== 'undefined' && uni.createInnerAudioContext) {
        const ringtone = uni.createInnerAudioContext();
        // 使用默认铃声,注意路径写法
        ringtone.src = '/static/audio/ringtone.mp3';
        ringtone.loop = true;
        ringtone.volume = 0.8;
        ringtone.play();
        // 存储铃声实例
        ringtoneInstance = ringtone; // 使用局部变量而不是window
      }
    } catch (error) {
    }
  }
  // 触发震动
  function triggerVibration() {
    try {
      if (typeof uni !== 'undefined') {
        // 方法1:使用uni.vibrate(现代API)
        if (uni.vibrate) {
          // 震动400ms
          uni.vibrate({
            duration: 400,
            success: () => {
              console.log('📳 震动已触发');
            },
            fail: (error) => {
              // 方法2:使用uni.vibrateLong(兼容旧设备)
              if (uni.vibrateLong) {
                uni.vibrateLong({
                  success: () => {
                    console.log('📳 兼容模式震动已触发');
                  },
                  fail: (err) => {
                    console.error('兼容模式震动失败:', err);
                  }
                });
              }
            }
          });
        }
        // 方法3:使用plus API(H5+)
        if (typeof plus !== 'undefined' && plus.device && plus.device.vibrate) {
          plus.device.vibrate(400);
          console.log('📳 H5+ 震动已触发');
        }
      }
    } catch (error) {
      console.error('触发震动失败:', error);
    }
  }
  // 停止铃声
  function stopRingtone() {
    try {
      if (ringtoneInstance) {
        ringtoneInstance.stop();
        ringtoneInstance.destroy();
        ringtoneInstance = null;
      }
    } catch (error) {
      // 即使出错也重置实例
      ringtoneInstance = null;
    }
  }
  // 监听停止铃声事件
  if (typeof uni !== 'undefined' && uni.$on) {
    uni.$on('stopRingtone', stopRingtone);
    // 监听WebView消息事件
    uni.$on('webViewMessage', (data) => {
      // 检查是否是停止铃声消息
      if (data?.type === 'stopVoice') {
        stopRingtone();
        console.log('📳 收到WebView停止铃声消息,已停止铃声');
      }
    });
  }
  // 初始化WebSocket连接
uniapps/work-app/src/pages/voiceCall/index.vue
@@ -48,8 +48,8 @@
import { getPhoneBookListApi } from '@/api/voiceCall/index.js'
import { onShow } from '@dcloudio/uni-app'
import defaultAvatar from '/static/images/defaultAvatar.svg'
  const userStore = useUserStore()
  const userId = userStore.userInfo.new_userInfo.userId
const userStore = useUserStore()
const userId = userStore.userInfo.new_userInfo.userId
// 联系人数据
const contacts = ref([])
const defaultParam = ref({
uniapps/work-app/src/static/audio/ringtone.mp3
Binary files differ
uniapps/work-app/src/subPackages/voiceCallDetail/index.vue
@@ -78,7 +78,12 @@
  viewUrl.value = getWebViewUrl("/voiceCallDetail", { contact: options.contact ,voiceparams: options.voiceparams});
});
function onPostMessage(data) {}
function onPostMessage(data) {
    // 将WebView消息传递给全局WebSocket处理
    if (typeof uni !== 'undefined' && uni.$emit) {
        uni.$emit('webViewMessage', data);
    }
}
</script>