写在前面的话

:warning: 此库只适用于Vue3 + 云端项目集成:exclamation::exclamation::exclamation:

➡️ 路段版请使用 智慧版告警中心小助手

集成文档

1.安装依赖(建议使用 pnpm 下载)

# 安装 pnpm
npm install pnpm -g

# 安装依赖
pnpm i @lollipope/alarm-helper-cloud

2.添加配置文件

//public/config/config.js:

//全局配置项
;(function (window) {
  window.globalConfig = {
    // 添加以下配置
    AlarmCenterWsUrl: `128.23.13.125:28082`, // 告警中心Socket地址
    AlarmRobotApiContext: '/api/', //告警弹窗接口前缀
    AlarmWebPath: '告警中心前端首页', //暂时不用配置
    AlarmStreamPath: `http://xxxx/api/GetCameraPlayURL`, //流媒体服务接口
    AlarmStreamDomain: `private`, //外网（public）还是内网（private）
    AlarmStreamRate: `slaver`, //获取主码流（master）或者副码流（slaver）
    LinkedControlUrl: 'http:128.xxx/device-chain', //联动管控地址配置
    AlarmUAV:{  // 无人机临时配置
      // 收费路段Id
      sectionId:'G0004440040' , //惠河路段 G0025440060
       // 国家高速
      nationalRoadNo:{
        // 长深高速 G25
        G25:{
          start:'K3514+432',
          end:'K3595+506'
        },
        // 济广高速 G35
        G35:{
          start:'K3480+100',
          end:'K3594+077'
        }
      },
      direction:1 // 上行
    }
  }
})(window)

配置说明: | 参数 | 说明 | 类型 | 是否必要 | 默认值 | | :----|:----| :----: |:----: |:----: | | AlarmCenterWsUrl | 告警中心Socket地址 eg:127.0.0.1:9527 | String | 是 | - | | AlarmRobotApiContext | 告警弹窗接口前缀,需要拦截该前缀转发到对应后端地址 eg:/api/| String | 是 | - | | AlarmWebPath | 告警中心首页地址(外部系统集成需要配置,配置该项会新开页签并跳转) eg:http://localhost:9527/| String | 否 | - | | AlarmStreamPath | 流媒体服务接口Uri eg:http://ip:port/api/GetCameraPlayURL| String | 是 | - | | AlarmStreamDomain | 流媒体取流来源 | String | 否 | private | | AlarmStreamRate | 流媒体码流 | String | 否 | slaver | | AlarmStreamMode(v0.2.13+) | 流媒体码流取流方式, 1:视频一体机 0:流媒体 | String | 否 | - | | LinkedControlUrl(v0.2.23+) | 联动管控地址配置 | String | 否 | - | | AlarmUAV(v0.2.33+) | 无人机配置 | UAVConf | 否 | - |

相关参数说明

| UAVConf | 说明 | 类型 | 是否必要 | 默认值 | | :----|:----| :----: |:----: |:----: | | sectionId | 收费路段Id | string | 是 | - | | nationalRoadNo | 国家高速 | {[key: string]: NationalRoad} | 是 | - | | direction | 方向 | number | 是 | 1|

| NationalRoad | 说明 | 类型 | 是否必要 | 默认值 | | :----|:----| :----: |:----: |:----: | |start | 开始桩号 | string | 是 | - | | end| 结束桩号 | string | 是 | - |

示例:

//  NationalRoad 示例
{
  start:'K3514+432',
  end:'K3595+506'
}

3.组件引入:

• 使用组件的地方

<script setup lang="ts">
  // 引入组件
  import '@lollipope/alarm-helper-cloud/dist/index.css'
  import AlarmHelper from '@lollipope/alarm-helper-cloud'

  const userInfo = ref({ userId: '用户id' })
  const tokenId = ref('登录的token') //v0.2.17+ 新增
</script>

<template>
  <div class="cdp-base-container">
    <!-- 使用组件 -->
    <AlarmHelper :user-info="userInfo" :token-id="tokenId" />
  </div>
</template>

• 组件属性说明:

| 属性名 | 说明 | 类型 | 是否必要 | 默认值 | 备注 | | :------- | :----------- | :--------------------: | :-------------------------------------: | :----------------------------------: | :--------------------------------: | | userInfo | 用户信息对象 | Object&{userId:String} | 是 | - | - | | tokenId | 登录的token | String | 是 | - | v0.2.17+ 新增 |

• 组件事件说明:

| 事件名 | 说明 | 回调参数 | 备注 | | :--------- | :----------- | :-----------: | :-------------: | | onApiError | 接口异常触发 | AlarmApiError | v0.2.12+ 新增 |

4.集成效果: