WEB组态

# 内置全局函数

TIP

ZK-VIEW 内置了常用的全局可调用函数，全局可调用函数可在js脚本中进行使用，具体的函数有

  • axios网络请求库
  • 工具函数
  • 时间日期格式化
  • 把秒转为时分秒
  • 判断是否包含某个字符串
  • 统计字符串中包含的特定字符个数
  • 替换全部，oldWord如果有特殊字符需要 \ 转义，newWord无需
  • 弹出消息
  • 弹出确认消息
  • 数据源相关信息
  • 获取测点的实时值
  • 获取所有测点的实时值
  • 获取图纸所有的数据源信息（包含测点信息）
  • 获取图纸某个数据源下的所有测点信息
  • 数据源全局方法类
  • 为数据源本地赋值
  • 为socket数据源发送数据
  • get 请求
  • post 请求
  • 全局动画控制函数
  • 启动动画
  • 停止动画

# 全局函数

// 定义全局工具函数
window.global = {
  // axios网络请求库
  axios: axios,
  // 工具函数
  util: {
    // 时间日期格式化
    formatDate(),
    // 把秒转为时分秒
    formatSeconds(),
    // 判断是否包含某个字符串
    contains(),
    // 统计字符串中包含的特定字符个数
    countWord(),
    // 替换全部，oldWord如果有特殊字符需要 \ 转义，newWord无需
    replaceAll()
  },
  // 弹出消息
  message(),
  // 弹出确认消息
  confirm(),
  // 数据源相关信息
  source: {
    // 获取测点的实时值
    getData(sourceKey, pointKey),
    // 获取所有测点的实时值
    getAllData(),
    // 获取图纸所有的数据源信息（包含测点信息）
    getSourceList(),
    // 获取图纸某个数据源下的所有测点信息
    getPointList(sourceKey)
  },
  // 数据源全局方法类
  socket: {
    // 为数据源本地赋值
    setData(sourceKey, data),
    // 为socket数据源发送数据
    sendData(sourceKey, data),
    // http 代理请求
    http(sourceKey, data)
  },
  // 全局动画控制函数
  aniCtrl: {
    // 启动动画
    start(aniId),
    // 停止动画
    stop(aniId)
  },
  // xgplayer模块
  player: xgplayer,
  HlsJsPlayer: xgplayer-hls.js,
  FlvJsPlayer: xgplayer-flv.js,
  Music: xgplayer-music.js,
  // echarts模块
  echarts: echarts.js,
}

# 使用示例

# axios网络请求库

/**
 *  函数名称： axios网络请求库实例
 *  函数名： window.global.axios
 *  参数： 无
 *  返回值： 无
 */
window.global.axios.get("http://localhost:3000/posts?id=1")
    .then(function(response){
        console.log(response.data);
    })
    .catch(function(error){
        console.log(error);
    })

# 工具函数:时间日期格式化

/**
 *  函数名称： 工具函数:时间日期格式化
 *  函数名： window.global.util.formatDate(format, date)
 *  参数： 
 *        format: 默认值 '', 可选值 datetime/date/time
 *  返回值： datetime(YYYY-mm-dd HH:MM:SS)/date(YYYY-mm-dd)/time(HH:MM:SS)
 */
const fmtDate = window.global.util.formatDate('', new Date())
// fmtDate = 2023-01-02 23:14:37
const fmtDate = window.global.util.formatDate('datetime', new Date())
// fmtDate = 2023-01-02 23:14:37
const fmtDate = window.global.util.formatDate('date', new Date())
// fmtDate = 2023-01-02
const fmtDate = window.global.util.formatDate('time', new Date())
// fmtDate = 23:14:37

# 工具函数:把秒转为时分秒

/**
 *  函数名称： 工具函数:把秒转为时分秒
 *  函数名： window.global.util.formatSeconds(seconds)
 *  参数： seconds: 秒数（int类型）
 *  返回值： 字符串类型（时分秒）
 */
const res = window.global.util.formatSeconds(100)
// res = 01分40秒

# 工具函数:判断是否包含某个字符串

/**
 *  函数名称： 工具函数:判断是否包含某个字符串
 *  函数名： window.global.util.contains(rootStr, targetStr)
 *  参数： rootStr: 源字符串
 *        targetStr: 目标字符串
 *  返回值： 布尔值 true/false
 */
const rootStr = 'today is a good day'
const targetStr = 'day'
const res = window.global.util.contains(rootStr, targetStr)
// res = true

# 工具函数:统计字符串中包含的特定字符个数

/**
 *  函数名称： 工具函数:统计字符串中包含的特定字符个数
 *  函数名： window.global.util.countWord(rootStr, targetStr)
 *  参数： rootStr: 源字符串
 *        targetStr: 目标字符串
 *  返回值： int(包含的个数)
 */
const rootStr = 'today is a good day'
const targetStr = 'day'
const res = window.global.util.countWord(rootStr, targetStr)
// res = 2

# 工具函数:替换全部

/**
 *  函数名称： 工具函数:替换全部，oldWord如果有特殊字符需要 \ 转义，newWord无需
 *  函数名： window.global.util.replaceAll(rootStr, oldWord, newWord)
 *  参数： rootStr: 源字符串
 *        oldWord: 要替换的目标字符
 *        newWord: 要替换的结果字符
 *  返回值： 字符出(替换后的字符串)
 */
const rootStr = 'today is a good day, good'
const oldWord = 'good'
const newWord = 'perfect'
const res = window.global.util.replaceAll(rootStr, oldWord, newWord)
// res = today is a perfect day, perfect

# message 通知

/**
 *  函数名称：message 通知
 *  函数名： window.global.message.(success/error/info/warning)(messageText)
 *  参数： messageText: 通知的文字
 *  返回值：无
 */
// 成功消息通知
window.global.message.success('成功')
// 错误消息通知
window.global.message.error('错误')
// 信息通知
window.global.message.info('信息')
// 警告消息通知
window.global.message.warning('警告')

# confirm 弹出确认消息

/**
 *  函数名称：confirm 弹出确认消息
 *  函数名： window.global.confirm(confirmCallback, confirmText, cancelCallback)
 *  参数： confirmCallback: 确认回调函数
 *        confirmText: 显示消息内容
 *        cancelCallback：可选： 取消时的回调函数
 *  返回值：无
 */
window.global.confirm(() => {
  window.global.message.success('删除成功')
}, '您确定删除该项目？')

# 数据源：获取测点的实时值

/**
 *  函数名称：数据源相关信息：获取测点的实时值
 *  函数名： window.global.source.getData(sourceKey, pointKey)
 *  参数： sourceKey: 数据源识别码
 *        pointKey: 测点key
 *  返回值：对象：{ "value": "xxx", "time": xxx }
 */
const res = window.global.source.getData('random', 'text_1')
// res = { "value": "有约不来过夜半", "time": 1672674622970 }
const res = window.global.source.getData('random', 'text_1').value
// res = "有约不来过夜半"

# 数据源：获取所有测点的实时值

/**
 *  函数名称：数据源相关信息：获取所有测点的实时值
 *  函数名： window.global.source.getAllData()
 *  参数： 无
 *  返回值：所有测点 map 对象 
 */
const res = window.global.source.getAllData()
/*
res = {
    "random.num_1_1": {
        "value": 0.9774,
        "time": 1672674797400
    },
    "random.num_1_2": {
        "value": 0.7314,
        "time": 1672674797400
    },
    ...
}
*/

# 数据源：获取图纸所有的数据源信息（包含测点信息）

/**
 *  函数名称：数据源相关信息：获取图纸所有的数据源信息（包含测点信息）
 *  函数名： window.global.source.getSourceList()
 *  参数： 无
 *  返回值：所有数据源列表
 */
const res = window.global.source.getSourceList()
/*
res = [
    {
        "sourceId": 1,
        "datasourceId": 1,
        "arrange": 1000,
        "name": "test",
        "url": "ws://localhost:9601/zkSource",
        "sourceKey": "aaa",
        "script": "",
        "manageUrl": "",
        "createTime": 1672404260089,
        "description": "",
        "pointList": [
            {
                "pointId": 28,
                "sourceId": 1,
                "sourceKey": null,
                "pointKey": "num_1_1",
                "createTime": 1672675031423,
                "arrange": 1000,
                "type": 0,
                "script": null,
                "name": null,
                "handle": null,
                "value": null
            },
            ...
        ],
        "paramsId": "627bd3f1-7037-447f-870c-a7782ff90662",
        "datasourceName": "ces"
    },
    ...
]
*/

# 数据源：获取图纸某个数据源下的所有测点信息

/**
 *  函数名称：数据源相关信息：获取图纸某个数据源下的所有测点信息
 *  函数名： window.global.source.getPointList(sourceKey)
 *  参数： sourceKey: 数据源识别码
 *  返回值：所有数据源列表
 */
const res = window.global.source.getPointList('aaa')
/*
res = [
    {
        "pointId": 28,
        "sourceId": 1,
        "sourceKey": null,
        "pointKey": "num_1_1",
        "createTime": 1672675031423,
        "arrange": 1000,
        "type": 0,
        "script": null,
        "name": null,
        "handle": null,
        "value": null
    },
    ...
]
*/

# 数据源：为数据源本地赋值

/**
 *  函数名称：数据源全局方法类：为数据源本地赋值
 *  函数名： window.global.socket.setData(sourceKey, data)
 *  参数： sourceKey: 数据源识别码
 *         data: 用户数据（任意类型）
 *  返回值：无
 */
const data = {
  'test1': '测试数据' 
}
window.global.socket.setData('aaa', data)

# 数据源：为socket数据源发送数据

/**
 *  函数名称：数据源全局方法类：为socket数据源发送数据
 *  函数名： window.global.socket.sendData(sourceKey, data)
 *  参数： sourceKey: 数据源识别码
 *         data: 用户数据（任意类型）
 *  返回值：无
 */
const data = {
  'test1': '测试数据' 
}
window.global.socket.sendData('aaa', data)
// 后端： 收到用户发送数据{"test1":"测试数据"}

# 数据源：http 代理请求

/**
 *  函数名称：数据源全局方法类：http 代理请求
 *  函数名： window.global.socket.http(sourceKey, data)
 *  参数： sourceKey: 数据源识别码
 *         data: 用户数据
 *  返回值：无
 */
const data = {
  key: 'myHttp',  // 请求识别码, 必填, 可以通过定义key进行返回值匹配
  url: 'http://localhost:9602/postTest', // 请求地址
  type: 'post', // 请求方式 get 或 post
  // 请求头 (可选)
  header: {
    token: 'xxx',
    Referer: 'http://localhost'
  },
  // post 请求参数 (post请求可选, 如果是post请求可以添加)
  params: {
    name: '张三',
    value: 18
  }
}
window.global.socket.http('aaa', data)

# 全局动画控制函数：启动动画

/**
 *  函数名称：全局动画控制函数：启动动画
 *  函数名： window.global.aniCtrl.start(aniId)
 *  参数： aniId: 创建完动画后，列表第一项为动画ID，单击即可复制
 *  返回值：无
 */
const aniId = '7c2c68fc-9842-467f-aaa9-2c40cee552be'
window.global.aniCtrl.start(aniId)

# 全局动画控制函数：停止动画

/**
 *  函数名称：全局动画控制函数：停止动画
 *  函数名： window.global.aniCtrl.stop(aniId)
 *  参数： aniId: 创建完动画后，列表第一项为动画ID，单击即可复制
 *  返回值：无
 */
const aniId = '7c2c68fc-9842-467f-aaa9-2c40cee552be'
window.global.aniCtrl.stop(aniId)

# 全局插件使用

# echarts全局模块

可以应用于vue组件当中，在组件中显示echarts图表

  • 具体内容，可参考echarts官方文档：https://echarts.apache.org/zh/index.html 包含示例：window.global.echarts

echarts: echarts.js

<!-- template -->
<div class="view" id="chart1"></div>

// script
// 使用$nextTick等待组件渲染完成后获取标签元素
this.$nextTick(() => {
  // 在template定义div的id和大小，如果是跟标签无需定义大小
  var myChart = window.global.echarts.init(document.getElementById('chart1'));
  // 指定图表的配置项和数据
  var option = {
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
      data: ['销量']
    },
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
})

# player全局模块

可以应用于vue组件当中，在组件中显示视频

  • 具体内容，可参考xgplayer官方文档：https://v2.h5player.bytedance.com/ 包含实例：window.global.player，window.global.HlsJsPlayer，window.global.FlvJsPlayer，window.global.Music

player: xgplayer HlsJsPlayer: xgplayer-hls.js FlvJsPlayer: xgplayer-flv.js Music: xgplayer-music.js

<!-- template -->
<div class="view" id="mse"></div>

// script
// 使用$nextTick等待组件渲染完成后获取标签元素
this.$nextTick(() => {
  let player = new window.global.player({
    id: 'mse',
    autoplay: false,
    volume: 0.3,
    url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4',
    poster: "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
    playsinline: true,
    height: '100%',
    width: '100%'
  });
})

←