写在前面的话

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

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

集成文档

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

# 安装 pnpm
npm install pnpm -g

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

2.添加配置文件

//public/config/config.js:

//全局配置项
;(function (window) {
  window.globalConfig = {
    // 添加以下配置
    AlarmCenterWsUrl: `128.23.13.125:28082`, // 接警响应Socket地址
    AlarmRobotApiContext: '/api/', //告警弹窗接口前缀
    AlarmWebPath: '接警响应前端首页', // 接警响应前端首页
    LinkedControlUrl: 'http:128.x.x.x', //联动管控地址配置 注:/#/前面的地址

  }
})(window)

配置说明: | 参数 | 说明 | 类型 | 是否必要 | 默认值 | | :----|:----| :----: |:----: |:----: | | AlarmCenterWsUrl | 接警响应Socket地址 eg:127.0.0.1:9527 | String | 是 | - | | AlarmRobotApiContext | 告警弹窗接口前缀,需要拦截该前缀转发到对应后端地址 eg:/api/| String | 是 | - | | AlarmWebPath | 接警响应首页地址(外部系统集成需要配置,配置该项会新开页签并跳转) eg:http://localhost:9527/| String | 否 | - | | LinkedControlUrl(v0.2.23+) | 联动管控地址配置 | String | 否 | - |

3.组件引入:

• 使用组件的地方

<script setup lang="ts">
  // 引入组件
import '@leatop/alarm-helper-cloud/dist/index.css'
import AlarmHelpCloud, { type UserInfo } from "@leatop/alarm-helper-cloud";

// userId
const userInf = computed(() => {
  return { userId: userStore.user.userId } as any as UserInfo;
});
// token
const tokenId = computed(() => {
  return userStore.token as string;
});
// 是否是超级管理员
const isSuperRole = computed(() => {
  return Number(userStore.user?.roleType) === 3;
});
</script>

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

• 组件属性说明:

| 属性名 | 说明 | 类型 | 是否必要 | 默认值 | 备注 | | :------- | :----------- | :--------------------: | :-------------------------------------: | :----------------------------------: | :--------------------------------: | | userInfo | 用户信息对象 | {userId:string} | 是 | - | - | | tokenId | 登录的token | string | 是 | - | v0.2.17+ 新增 | | isSuperRole | 是否超管角色 | boolean | 是 | - | v0.2.37+ 新增 |

• 组件事件说明:

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

4.集成效果: