HostIr 公共组件库

引入使用

import HostIrLibrary from "hostir-library";
app.use(HostIrLibrary);

Geometry

svg 几何工具

props

| 名称 | 类型 | 默认值 | 说明 | | ------------------ | -------------- | ------ | ------------------------------------------ | | sourceROI | [] | [] | ROI 数组 | | selectROI | ROI | [] | 单个 ROI，选中 | | sourceTemperature | [] | [] | ROI 最高最低温点位数组 | | measureTemperature | [] | [] | 全局最高最低温点位数组 | | width | number | 0 | 宽度 | | height | number | 0 | 高度 | | scale | number | 1 | 缩放 | | mouseType | -1、1、2、3、4 | -1 | -1 选择，1 点、2 线、3 矩形、4 圆 | | ir | string | '' | 热像图地址 | | dc | string | '' | 可见光地址 | | viewType | number | | 1：热像； 2：画中画； 3 ：可见光测温(融合) | | opacity | number | 100 | 透明度 | | dragPIP | boolean | false | 画中画是否可拖拽 | | @on-draw | function | | 添加 ROI 回调 | | @update:sourceROI | function | | 更新 ROI 回调 | | @update:selectROI | function | | 更新选中回调 | | @update:irRect | function | | 更新画中画区域回调 | | @deleteROI | | | 删除 ROI 回调 |

TemperatureSlider

vue 温宽滑块组件

Props

| 名称 | 类型 | 默认值 | 说明 | | ---------- | -------- | ------ | ------------------------------------------ | | max | number | | 滑块最高温 | | min | number | | 滑块最低温 | | currentMax | number | | 滑块当前最高温 | | currentMin | number | | 滑块当前最低温 | | image | string | | 滑块背景 | | invert | Boolean | | 滑块是否翻转 | | horizontal | Boolean | | 滑块是否水平放置 | | theme | String | | 滑块主题 默认值 light 可选值'light' 'dark' | | labelPlacement | String | | 滑块数值方向 'right', 默认左侧 | | @change | function | | 滑块值更改变化回调 |

useHostirConfirm

自定义 Confirm 方法

使用：

import {useHostirConfirm} from "hostir-library";
const hostirConfirm = useHostirConfirm();
// 调用显示
hostirConfirm.show({
    content: '是否保存',
    clickMaskToClose: false,
    theme: 'dark',
    confirmText: "保存",
    cancelText: "关闭",
    showCancelButton: true,
    showConfirmButton: true,
    closeIcon: true,
    onConfirm: () => {
        console.log("confirm");
    },
    onCancel: () => {
        console.log('onCancel');
    }
})

// 调用取消
hostirConfirm.hide()

参数说明：

| 名称 | 类型 | 默认值 | 说明 | | ----------------- | -------- | ------ | ------------------------ | | content | string | 内容 | 内容 | | clickMaskToClose | Boolean | false | 是否点击蒙版关闭 | | closeIcon | Boolean | true | 是否显示关闭按钮 | | theme | string | light | 主题 'light' 或者 'dark' | | confirmText | string | 保存 | 确认文本 | | cancelText | string | 关闭 | 取消文本 | | showCancelButton | Boolean | true | 是否显示取消按钮 | | showConfirmButton | Boolean | true | 是否显示确认按钮 | | language | String | en-US | 语言 | | confirmCallBack | function | | 确认回调 | | cancelCallBack | function | | 取消回调 |

Roulette

调控板组件

props

| 名称 | 类型 | 默认值 | 说明 | | ------- | -------- | ------ | ----------------------------------------------------- | | theme | string | light | 组件主题 | | time | number | 500 | 长按触发频率 | | @change | function | | 面板方向修改事件 回调参数({type: 'bottom', timer:500) |

RoiTemperatureLine

线温分布图组件 (组件温度类型全部传华氏度)

props

| 名称 | 类型 | 默认值 | 说明 | | --------------- | -------- | ------ | -------------------------- | | theme | string | light | 组件主题 | | name | string | | id | | roiList | [] | [] | | | temperatureType | number | 1 | 1 摄氏度 2 华氏度 3 开尔文 | | max | number | 1 | y 轴最大值 | | min | number | 1 | y 轴最小值 | | showLegend | Boolean | true | 是否显示 legend | | fileName | string | | 下载图片和 csv 的文件名 | | ref.fitView() | function | | 自适应 | | ref.saveImage() | function | | 保存图片 | | ref.exportCsv() | function | | 导出 csv |

roi list

const roiList = ref([
  {
    name: "ROI1",
    lineName: "ROI1", //折线图名称
    color: "#00f91a", //颜色
    show: true, //是否显示线
    data: [], //数据
  },
  {
    name: "ROI2",
    lineName: "ROI2",
    color: "#812F33",
    show: true,
    data: [],
  },
  {
    name: "ROI3",
    lineName: "ROI3",
    color: "#FEA443",
    show: false,
    data: [],
  },
]);

temperature type

export enum TemperatureMenu {
    C = 1,//摄氏度
    F = 2,//华氏度
    K = 3,//开尔文
}

RealTimeLine

| 名称 | 类型 | 默认值 | 说明 | | --------------- | -------- | ------ | ----------------------------- | | theme | string | light | 组件主题 | | name | string | | id | | roiList | [] | [] | | | temperatureType | number | 1 | 1 摄氏度 2 华氏度 3 开尔文 | | max | number | 1 | y 轴最大值 | | min | number | 1 | y 轴最小值 | | showLegend | Boolean | true | 是否显示 legend | | fileName | string | | 下载图片和 csv 的文件名 | | xRange | number | 10 | x 轴固定显示最新多少 s 的信息 | | xRotate | number | 45 | x 轴文本倾斜角度 | | fitView() | function | | 自适应 | | saveImage() | function | | 保存图片 | | exportCsv() | function | | 导出 csv |

const roiList = ref([
  {
    name: "ROI1",
    lineName: "ROI1 最高温",
    color: "#00f91a",
    show: true,
    data: [
      {
        name: time,
        value: [time, value],
      },
    ],
  },
  {
    name: "ROI2",
    lineName: "ROI2 最低温",
    color: "#812F33",
    show: true,
    data: [
      {
        name: time,
        value: [time, value],
      },
    ],
  },
]);