WEB组态

# 内置预置文件

TIP

ZK-VIEW 平台支持定制化更改，达到与第三方无缝接入

# 预置文件修改

  • 预置图标修改
  • 预置标题显示内容
  • 预置分享文本模板
  • 预置动画参数
  • 预置数据绑定参数
  • 预置图纸初始化脚本
  • 预置图纸在Iframe下运行时的接收到父页面消息回调脚本
  • 预置通用图表参数
  • 预置VUE组件参数
  • 预置媒体组件参数
  • 预置拓展组件参数
  • 环境参数
  • 登录通知参数
  • 内置公共数据源

预置可修改文件位于 html/static/zkSetting/ZkSetting.js 文件中

# 预置全局函数修改

预置全局函数修改后，图纸中可以进行全局调用

预置全局函数修改位置：

html/static/zkSetting/GlobalFunction.js

导出文件模板中需进行同步更新

export_html/zkview_assets/js/GlobalFunction.js

# 预置图标修改

TIP

  1. 默认浏览器顶部图标修改：替换根目录下 favicon.icon
  2. 默认千环智能logo修改：替换static目录下 image/logo.png
  3. 默认千环智能小logo修改，替换static目录下 image/QHlogo.png
  4. 默认背景图片修改，替换static目录下 image/background.png

# 预置标题显示内容

ZS.titleStyle = {
  header: '千环WEB组态设计平台',
  title: 'Web组态设计平台',
  subTitle: '企业定制版v2.2',
  footer: '千环智能',
  publishTitle: '千环云部署',
  shareLinkTitle: '千环云分享'
}

# 预置分享文本模板

ZS.copyTextMode = {
  share: {
    prefix: '---------zk-view 资源分享---------\r\n\r\n',
    suffix: '\r\n---------千环web组态技术支持---------'
  },
  publish: {
    prefix: '---------zk-view 云部署图纸信息---------\r\n\r\n',
    suffix: '\r\n---------千环web组态技术支持1111---------'
  }
}

# 预置动画参数

ZS.aniCircleParams = {
  circleRotate: {
    name: '连续旋转',
    params: {
      // 旋转中心位置
      rotateSite: 'center',
      // 旋转方向
      direction: true,
      speed: 50,
      speedBind: false
    }
  },
  circleHeart: {
    name: '连续心跳',
    params: {
      heartScale: 20,
      speed: 50,
      speedBind: false,
      rotateSite: 'center'
    }
  },
  ...
}

# 预置数据绑定参数

ZS.dataBindParams = {
  bindText: {
    name: '数据显示',
    params: {
      fixed: {
        open: false,
        value: 2
      },
      transition: false,
      subText: ''
    }
  },
  bindHeight: {
    name: '高度绑定',
    params: {
      height: 200,
      zeroValue: 0,
      fullValue: 100,
      rotateSite: 'bottom-center'
    }
  },
  ...
}

# 预置图纸初始化脚本

ZS.initPaperJs = ''

# 预置图纸在Iframe下运行时的接收到父页面消息回调脚本

ZS.iframePaperJs = ''

# 预置通用图表参数

const styleCode = {}
ZS.basicEchartsCode = {
  line: {
    styleCode: styleCode,
    initCode: `
var data = [150, 230, 224, 218, 135, 147, 260];
chart.option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'line',
      data: data
    }
  ]
};
chart.data = data;
`,
    updateCode: ''
  },
}

# 预置VUE组件参数

ZS.vueModel = {
  basic: {
    template: `
<div class="view">
  <el-button type="primary">按钮</el-button>
</div>`,
    script: `
export default {
  props: [],
  data () {
    return {}
  },
  mounted () {
    // 此处建议写初始化静态数据展示逻辑，动态数据在watch中进行逻辑编写
  },
  watch: {
    // 预览模式和导出模式，建议此处通过监听的方式更新实时数据
  },
  methods: {}
}`,
    style: `
.view {
  height: 100%;
  width: 100%;
}`
  }
  ...
}

# 预置媒体组件参数

ZS.videoModel = {
  MP4: {
    code: '',
    viewMode: 'stretching',
    url: 'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4',
    volume: 1,
    autoplay: true,
    poster: ''
  },
}

# 预置拓展组件参数

ZS.expandDomModel = {
  iframe: {
    url: 'https://www.bilibili.com/',
    viewMode: 'stretching',
    poster: ''
  }
}

# 登录通知参数

ZS.message = {
  date: '2022年12月15日',
  info: [
    {
      title: '用户须知111',
      content: `
尊敬的用户:
      您好!
  
      zk-view 版本升级，您在之前版本注册的账户，在新的版本中登录方式如下：
  
      用户名（手机）：继续输入您注册时的手机号码
      密码：初始密码 123456

PS： 初始登陆后，请点击右上角头像 - 用户管理，及时更改密码
`
    }
  ]
}

# 内置公共数据源

ZS.commonDatasource = [
  {
    name: '数据源工程1',
    description: '数据源工程介绍1',
    sourceList: [
      {
        name: '数据源1',
        description: '数据源1',
        url: 'ws://localhost:9601/zkSource',
        sourceKey: 'aaa',
        script: '', // 数据更新时触发的脚本
        pointList: [
          {
            name: '测点1',
            pointKey: 'test1',
            type: 0, // 0: 原始点， 1： 中间点
            script: '' // 原始点 script 为空
          },
          {
            name: '测点2',
            pointKey: 'test2',
            type: 1, // 0: 原始点， 1： 中间点
            script: "return data['First_Send0'] > 50"
          }
        ]
      },
      {
        name: '数据源2',
        description: '数据源2',
        url: 'ws://localhost:9601/websocketzk',
        sourceKey: 'bbb',
        script: '', // 数据更新时触发的脚本
        pointList: [
          {
            name: '测点1',
            pointKey: 'test1',
            type: 0, // 0: 原始点， 1： 中间点
            script: '' // 原始点 script 为空
          },
          {
            name: '测点2',
            pointKey: 'test2',
            type: 1, // 0: 原始点， 1： 中间点
            script: "return data['First_Send0'] > 50"
          }
        ]
      }
    ]
  }
]

← API 接口文档 →