You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1348 lines
74 KiB
1348 lines
74 KiB
const e="48ba7a60-4d22-4b7e-ada8-e3a9f9d51816",n="custom-scrolltable-node",t="表格",a='<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1695274327794" class="icon" viewBox="0 0 1142 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12610" xmlns:xlink="http://www.w3.org/1999/xlink" width="223.046875" height="200"><path d="M1102.769231 39.384615v945.23077H39.384615V39.384615h1063.384616m0-39.384615H39.384615a39.384615 39.384615 0 0 0-39.384615 39.384615v945.23077a39.384615 39.384615 0 0 0 39.384615 39.384615h1063.384616a39.384615 39.384615 0 0 0 39.384615-39.384615V39.384615a39.384615 39.384615 0 0 0-39.384615-39.384615z" fill="#1296db" p-id="12611"></path><path d="M39.384615 393.846154h1063.384616v39.384615H39.384615zM39.384615 590.769231h1063.384616v39.384615H39.384615zM39.384615 787.692308h1063.384616v39.384615H39.384615zM39.384615 196.923077h1063.384616v39.384615H39.384615z" fill="#1296db" p-id="12612"></path><path d="M315.076923 196.923077v787.692308H275.692308V196.923077zM590.769231 196.923077v787.692308h-39.384616V196.923077zM866.461538 196.923077v787.692308h-39.384615V196.923077z" fill="#1296db" p-id="12613"></path><path d="M39.384615 39.384615h1063.384616v157.538462H39.384615z" fill="#1296db" p-id="12614"></path></svg>',o="svg",r="动态",l="数据展示",u=!1,c=!0,i="时序",d=`{"type":"page","id":"u:270584784ce1","name":"page1","asideResizor":false,"style":{"boxShadow":" 0px 0px 0px 0px transparent"},"pullRefresh":{"disabled":true},"body":[{"type":"tabs","name":"tab","tabs":[{"title":"样式","icon":"fa fa-th-large","body":[{"type":"form","title":"","name":"basicPropForm","body":[{"type":"input-text","label":"名称","name":"nodeAlias","id":"u:6b126f0520cb","size":"full","mode":"horizontal","inputControlClassName":"w-100","className":"m-b"},{"type":"input-text","label":"ID ","name":"id","id":"u:6232710ac003","size":"full","mode":"horizontal","inputControlClassName":"w-100","className":"m-b"},{"type":"grid","id":"u:c605398a724c","className":"m-b","columns":[{"body":[{"type":"input-number","label":"宽度","name":"width","keyboard":true,"id":"u:dcc0c21d16f6","step":1,"suffix":"px","placeholder":"组件左边距","size":"full","mode":"horizontal","className":"m-b","value":200,"labelAlign":"left","precision":2,"inputClassName":"w-full","labelClassName":"w-8"}],"id":"u:14cc19d6ffb0","md":6},{"body":[{"type":"input-number","label":"高度","name":"height","keyboard":true,"id":"u:cd6fdff9ca88","step":1,"suffix":"px","placeholder":"组件上边距","size":"full","mode":"horizontal","className":"m-b","value":200,"labelAlign":"left","precision":2,"inputClassName":"w-full","labelClassName":"w-8"}],"id":"u:4931801ca9b8","md":6}]},{"type":"grid","id":"u:da449a94908a","className":"m-b","columns":[{"body":[{"type":"input-number","label":"X 轴","name":"x","keyboard":true,"id":"u:29852d093d9d","step":1,"suffix":"px","placeholder":"组件左边距","size":"full","mode":"horizontal","className":"m-b","value":200,"labelAlign":"left","precision":2,"inputClassName":"w-full","labelClassName":"w-8"}],"id":"u:1b561d652acc","md":6},{"body":[{"type":"input-number","label":"Y 轴","name":"y","keyboard":true,"id":"u:dc8c1daed8ed","step":1,"suffix":"px","placeholder":"组件上边距","size":"full","mode":"horizontal","className":"m-b","value":200,"labelAlign":"left","precision":2,"inputClassName":"w-full","labelClassName":"w-8"}],"id":"u:9672575193ac","md":6}]},{"type":"grid","id":"u:a332a7bf83c1","className":"m-b","columns":[{"body":[{"type":"input-number","label":"旋转","name":"rotation","id":"u:f6a2dbb518f9","placeholder":"组件旋转角度","mode":"horizontal","size":"full","className":"","keyboard":true,"step":1,"suffix":"deg","value":0,"labelAlign":"left","inputClassName":"w-full"}],"id":"u:646cd98b7955","md":6},{"body":[{"type":"input-number","label":"透明","name":"opacity","id":"u:cf80f59d8d42","placeholder":"组件透明度","mode":"horizontal","size":"full","className":"m-b","keyboard":true,"step":0,"suffix":"","value":1,"inputClassName":"w-full","precision":2}],"id":"u:51ddf54ac749","md":6}],"gap":""},{"type":"grid","columns":[],"id":"u:235f153e5ad5","className":"m-b"},{"type":"grid","columns":[],"id":"u:19e1ffafeb70","className":"m-b"},{"type":"switch","label":"渲染空表格","option":"","name":"emptyTable","falseValue":false,"trueValue":true,"id":"u:acbab600e88b","value":false,"mode":"horizontal","labelRemark":{"icon":"fa fa-question-circle","trigger":["hover"],"className":"Remark--warning","placement":"top","title":"提示：","content":"渲染空表格，意味着不再渲染来自数据源的数据，意味着可以拖拽“文本” 部件 或其它任何部件到单元格。渲染空表格时，请确保【没有】绑定数据点。"}},{"type":"input-number","label":"表列数","name":"colNum","keyboard":true,"id":"u:530cb9456502","step":1,"mode":"horizontal","inputClassName":"w-full","visibleOn":"this.emptyTable","value":3},{"type":"input-number","label":"表行数","name":"rowNum","keyboard":true,"id":"u:88b944e2e694","step":1,"mode":"horizontal","inputClassName":"w-full"},{"type":"input-number","label":"表头高度","name":"headerHeight","keyboard":true,"id":"u:859eacd8676d","step":1,"mode":"horizontal","value":"","inputClassName":"w-full"},{"type":"input-color","label":"表背景色","name":"tableBGC","id":"u:037d3f839c33","format":"rgba","value":"rgba(0, 186, 255, 1)","mode":"horizontal","inputClassName":"w-full"},{"type":"input-color","label":"表头背景色","name":"headerBGC","id":"u:ea904dcf505c","format":"rgba","value":"rgba(0, 186, 255, 1)","mode":"horizontal","inputClassName":"w-full"},{"type":"input-color","label":"奇数行背景色","name":"oddRowBGC","id":"u:4e1231994a61","format":"rgba","value":"rgba(0, 59, 81, 1)","mode":"horizontal","inputClassName":"w-full"},{"type":"input-text","label":"奇数行渐变背景","name":"oddRowGradBG","id":"u:2dd7d7ff6e90","editorState":"default","mode":"horizontal"},{"type":"input-color","label":"偶数行背景色","name":"evenRowBGC","id":"u:f9fab90331c2","format":"rgba","value":"rgba(10, 39, 50, 1)","mode":"horizontal","inputClassName":"w-full"},{"type":"input-text","label":"偶数行渐变背景","name":"evenRowGradBG","id":"u:a03dce775fd5","editorState":"default","mode":"horizontal"},{"type":"input-color","label":"高亮行背景色","name":"highlightBGC","id":"u:d693bc5c139b","format":"rgba","value":"rgba(10, 39, 50, 1)","mode":"horizontal","inputClassName":"w-full"},{"type":"input-text","label":"高亮行渐变背景","name":"highlightGradBG","id":"u:3067ffba315c","editorState":"default","mode":"horizontal"},{"type":"input-color","label":"高亮行字体颜色","name":"highlightFontColor","id":"u:0048fcafb112","format":"rgba","value":"","mode":"horizontal","inputClassName":"w-full"},{"type":"switch","label":"点击高亮行","option":"","name":"clickHighlight","falseValue":false,"trueValue":true,"id":"u:d4a40e5ad316","value":false,"mode":"horizontal"},{"type":"switch","label":"开启所有边框","option":"","name":"enableBorder","falseValue":false,"trueValue":true,"id":"u:b077b0c1ce5e","value":false,"mode":"horizontal"},{"type":"switch","label":"仅外边框","option":"","name":"onlyOuterBorder","falseValue":false,"trueValue":true,"id":"u:a695f4e62e35","value":false,"mode":"horizontal"},{"type":"switch","label":"仅表头边框","option":"","name":"onlyHeaderBorder","falseValue":false,"trueValue":true,"id":"u:17878008bbed","value":false,"mode":"horizontal"},{"type":"switch","label":"表头仅横向边框","option":"","name":"onlyHeaderHoriBorder","falseValue":false,"trueValue":true,"id":"u:912cb9647cb4","value":false,"mode":"horizontal"},{"type":"switch","label":"仅表体边框","option":"","name":"onlyBodyBorder","falseValue":false,"trueValue":true,"id":"u:37bd6c515bb3","value":false,"mode":"horizontal"},{"type":"select","label":"表体边框风格","name":"bodyBorderStyle","options":[{"label":"实线","value":"solid"},{"label":"虚线","value":"dashed"}],"id":"u:3d06eb4f02c1","multiple":false,"mode":"horizontal","inputClassName":"w-full","value":"solid"},{"type":"switch","label":"表体仅横向边框","option":"","name":"onlyHoriBorder","falseValue":false,"trueValue":true,"id":"u:494cb591c1da","value":false,"mode":"horizontal"},{"type":"input-color","label":"边框颜色","name":"borderColor","id":"u:a7b5b2ae82c1","format":"rgba","mode":"horizontal","inputClassName":"w-full"},{"type":"combo","label":"列宽度","name":"columnWidth","multiple":true,"addable":true,"removable":true,"removableMode":"icon","addBtn":{"label":"新增","icon":"fa fa-plus","level":"primary","size":"sm","id":"u:2cc14b06d765"},"items":[{"type":"input-text","name":"col","placeholder":"文本","id":"u:e06e533226e1","editorState":"default","label":"列"},{"type":"input-number","name":"colW","placeholder":"","id":"u:443daabf4e98","label":"宽度"}],"id":"u:79429d21574f","strictMode":true,"syncFields":[],"mode":"horizontal","inputClassName":"w-full"},{"type":"combo","label":"列对齐","name":"align","multiple":true,"addable":true,"removable":true,"removableMode":"icon","addBtn":{"label":"新增","icon":"fa fa-plus","level":"primary","size":"sm","id":"u:2297905fc785"},"items":[{"type":"input-text","name":"col","placeholder":"文本","id":"u:a10bfc4da6f2","editorState":"default","label":"列"},{"type":"select","name":"align","placeholder":"选项","options":[{"label":"左对齐","value":"left"},{"label":"居中对齐","value":"center"},{"label":"右对齐","value":"right"}],"id":"u:80784d6fc30e","multiple":false,"label":"对齐"}],"id":"u:74a75875151f","strictMode":true,"syncFields":[],"mode":"horizontal","inputClassName":"w-full"},{"type":"switch","label":"显示行号","option":"","name":"index","falseValue":false,"trueValue":true,"id":"u:7751ee009d1f","value":false,"mode":"horizontal"},{"type":"select","label":"轮播方式","name":"carousel","options":[{"label":"单行","value":"single"},{"label":"单页","value":"page"}],"id":"u:c87e427af127","multiple":false,"mode":"horizontal","inputClassName":"w-full"},{"type":"switch","label":"开启轮播","option":"","name":"enableCarousel","falseValue":false,"trueValue":true,"id":"u:fd08c5417853","value":false,"mode":"horizontal"},{"type":"input-number","label":"轮播时间间隔","name":"waitTime","keyboard":true,"id":"u:4153f8822ab0","step":1,"value":"","unitOptions":["ms"],"mode":"horizontal","inputClassName":"w-full"},{"type":"switch","label":"悬浮暂停轮播","option":"","name":"hoverPause","falseValue":false,"trueValue":true,"id":"u:fdddfae70f25","value":false,"mode":"horizontal"},{"type":"input-color","label":"表字体颜色","name":"fontColor","id":"u:33b76afeb08a","format":"rgba","mode":"horizontal","inputClassName":"w-full"},{"type":"input-range","label":"表字体大小","name":"fontSize","id":"u:392d15d87a9b","multiple":false,"value":0,"min":0,"max":100,"step":1,"unit":"","tooltipPlacement":"auto","showInput":false,"parts":1,"showSteps":false,"marks":{},"mode":"horizontal"},{"type":"input-color","label":"表头字体颜色","name":"headerFontColor","id":"u:e1282c3f1558","format":"rgba","mode":"horizontal","inputClassName":"w-full"},{"type":"input-range","label":"表头字体大小","name":"headerFontSize","id":"u:cc235e005e0e","multiple":false,"value":0,"min":0,"max":100,"step":1,"unit":"","tooltipPlacement":"auto","showInput":false,"parts":1,"showSteps":false,"marks":{},"mode":"horizontal"}],"id":"u:a5ebe5f02407","submitText":"","onEvent":{"change":{"weight":0,"actions":[]}},"debug":false,"mode":"normal","panelClassName":"p","labelAlign":"left","className":"","wrapWithPanel":true}],"id":"u:c309ae58472c","className":"p-none no-border"},{"title":"交互","icon":"fa fa-calendar-minus-o","body":[{"type":"service","body":[{"type":"collapse","key":"1","active":true,"header":"常规","body":[{"type":"service","id":"u:6cb6d200ede2","data":{"dataPoint":"","compareType":"","conditionVariables":[],"defaultValue":"","unit":""},"body":[{"type":"input-text","label":"数据点","name":"dataPoint","id":"normalDataPoint","multiple":false,"mode":"horizontal","size":"full","onEvent":{"focus":{"weight":0,"actions":[{"actionType":"dialog","dialog":{"type":"dialog","title":"请配置需要绑定的数据点","body":[{"type":"tabs","tabs":[{"title":"常规数据点","body":[{"type":"form","title":"","body":[{"type":"select","label":"数据源","name":"dataSource","id":"u:c273f087b8ed","mode":"horizontal","multiple":false,"size":"md","horizontal":{"leftFixed":"sm"},"source":"\${apiDtoList || thingApiDTOList}","labelField":"name","valueField":"id","onEvent":{"change":{"actions":[{"actionType":"reload","componentId":"u:1cdb908c23a8"},{"actionType":"custom","script":"if (!event.data.value) { doAction({'actionType': 'setValue', 'componentId': 'u:1cdb908c23a8', 'args': {'value': ''} });\\r\\n doAction({'actionType': 'setValue', 'componentId': 'u:8147daea685d', 'args': {'value': ''} }); }"}]}},"clearable":true,"actionType":"change","target":"u:1cdb908c23a8"},{"type":"combo","label":"设备属性","name":"deviceAttrs","id":"u:98559a2dd514","multiple":false,"mode":"horizontal","size":"full","horizontal":{"leftFixed":"sm"},"items":[{"type":"input-table","label":false,"id":"u:41dfc35c368c","name":"table","strictMode":false,"needConfirm":false,"addable":true,"removable":true,"columns":[{"type":"input-text","label":"序号","id":"u:434e22030bc6","name":"num","size":"sm","mode":"horizontal","quickEdit":{"mode":"popOver","id":"u:c6a294f5c93a"},"horizontal":{"left":2,"right":10},"placeholder":"例：A/B/C/AA/BB","width":200},{"type":"select","name":"devices","id":"u:1cdb908c23a8","label":"设备","multiple":false,"mode":"horizontal","quickEdit":true,"size":"sm","source":{"url":"/thing/v2/api/telemetryById?id=\${dataSource}","method":"get","messages":{},"headers":{"token":"\${myToken}","tenantCode":"\${myTenantCode}","companyId":"\${myCompanyId}"},"adaptor":"if (payload && payload.data && payload.data.result) {console.log('payload.data.result', payload.data.result); \\r\\n const list = []\\r\\n const devices = payload.data.result.info \\r\\n for (const key in devices) {\\r\\n const device_info = devices[key] \\r\\n list.push({\\r\\n label: device_info.entityName,\\r\\n value: device_info.entityId,\\r\\n deviceCode: device_info.entityCode,\\r\\n deviceInfo: device_info,\\r\\n attrs: device_info.attrs })\\r\\n }\\r\\n payload.data = list;\\r\\n return payload\\r\\n}","sendOn":"this.dataSource"},"onEvent":{"change":{"actions":[{"actionType":"custom","script":"if (!event.data.value) { doAction({'actionType': 'setValue', 'componentId': 'u:8147daea685d', 'args': {'value': ''} }); }"}]}},"responseData":{"&":"$$","list":"\${items}"},"clearable":true,"horizontal":{"left":2,"right":10},"checkAll":false},{"type":"select","name":"dataPoint","id":"u:8147daea685d","label":"数据点","multiple":false,"quickEdit":true,"mode":"horizontal","size":"sm","source":{"url":"/thing/v2/api/callDict?id=\${dataSource}&entityId=\${devices}","method":"get","messages":{},"headers":{"token":"\${myToken}","tenantCode":"\${myTenantCode}","companyId":"\${myCompanyId}"},"sendOn":"this.dataSource && this.devices","adaptor":"const list = payload.data.map(item => {\\r\\n item.dictName = item.dictName + ' - ' + item.dictCode\\r\\n return item\\r\\n})\\r\\npayload.data = list;\\r\\nreturn payload"},"labelField":"dictName","valueField":"dictCode","checkAll":false,"horizontal":{"left":2,"right":10},"overlay":{"width":"350px"},"searchable":true}]}],"strictMode":true,"syncFields":[],"tabsMode":false,"canAccessSuperData":true,"inputClassName":"w-full","className":"m-b-sm"},{"type":"checkbox","label":"数据处理","name":"enableDataHandle","id":"u:034ca60f2135","mode":"horizontal","horizontal":{"leftFixed":"normal"},"option":""},{"type":"combo","id":"u:a06125153fa6","name":"calcRules","label":"计算规则","mode":"horizontal","visibleOn":"this.enableDataHandle","multiple":true,"items":[{"name":"formular","label":"计算公式","type":"input-text","id":"u:318a7f0c6449","placeholder":"例： (A + B) / C","width":"50%","size":"full"},{"name":"resultAttr","label":"计算结果属性","type":"input-text","id":"u:1e6e491ccbaa","placeholder":"例：A8、B、C...","width":"50%"}],"strictMode":true,"syncFields":[],"hidden":false,"inputClassName":"w-full","multiLine":false,"className":"calcRules"},{"type":"input-text","label":"唯一数据点","name":"uniquePoint","id":"u:3b257b599c19","mode":"horizontal","visibleOn":"this.enableDataHandle","editorState":"default","labelRemark":{"icon":"fa fa-question-circle","trigger":["hover"],"className":"Remark--warning","placement":"top","title":"场景：","content":"当有数据处理，并且只需绑定一个数据点作为 【实时/立即/最新数据】时，请填写所需数据点的序号或计算结果属性。"},"inputControlClassName":"m-b"}],"id":"u:51f0e51abd7c","data":{"attrs":[],"deviceCode":"\${deviceCode || ''}","devices":"\${devices || ''}","dataPoint":"\${dataPoint || ''}","dataSource":"\${dataSource || ''}","deviceAttrs":"\${deviceAttrs || []}"},"submitText":"","onEvent":{"inited":{"actions":{"actionType":"custom","script":"if(event.data.devices && event.data.dataPoint && event.data.deviceAttrs.length === 0) { const dataPoints = event.data.dataPoint.split(','); const newDeviceAttrs = dataPoints.map((point, idx) => ({ num: String.fromCharCode(65+idx), devices: event.data.devices, dataPoint: point }) ); doAction({ 'actionType': 'setValue', 'componentId': 'u:51f0e51abd7c', 'args': { value: {deviceAttrs: { table: newDeviceAttrs } }} }); }"}}}}],"id":"u:5505e7ef7cab"},{"title":"虚拟变量","body":[{"type":"tpl","tpl":"暂时无虚拟变量可配置","wrapperComponent":"","inline":false,"id":"u:722592249b31"}],"id":"u:b739cc6a6ed7"}],"id":"u:3b446450d643"}],"showCloseButton":true,"showErrorMsg":true,"showLoading":true,"id":"u:f46c2439c983","data":{"&":"\${dataPoint | toJson}","apiDtoList":"\${thingApiDTOList}","myToken":"\${myToken}","myTenantCode":"\${myTenantCode}","myCompanyId":"\${myCompanyId}"},"onEvent":{"confirm":{"actions":[{"actionType":"custom","script":"const tableData = event.data.deviceAttrs.table; let devices = ''; let dataPoint = ''; if(tableData) { tableData.forEach(item => { devices += (item.devices + ',');dataPoint += (item.dataPoint + ','); });}; if(tableData && tableData.length > 0) { devices = devices.substring(0, devices.length - 1); dataPoint = dataPoint.substring(0, dataPoint.length - 1); const newValue = {...event.data, devices: devices, dataPoint: dataPoint, dataSource: event.data.dataSource} ; doAction({ 'componentId': 'normalDataPoint', 'actionType': 'setValue', 'args': { value: JSON.stringify(newValue) } }) } else {doAction({ 'componentId': 'normalDataPoint', 'actionType': 'setValue', 'args': { value: JSON.stringify(event.data) } }) };"}]}},"closeOnEsc":false,"size":"lg"}}]}},"className":"w-full m-b-sm","inputClassName":"w-full","clearable":true,"visibleOn":"!this.customDatasource"},{"type":"input-text","label":"默认值","clearable":true,"name":"defaultValue","id":"u:13ccbc565f5e","mode":"horizontal","size":"full","inputControlClassName":"mb-sm","labelClassName":"mb-sm","className":"m-b-sm"},{"type":"input-text","label":"单位   ","name":"unit","id":"u:0f606558e8c7","mode":"horizontal","size":"full","className":"m-b-sm"},{"type":"input-number","label":"渲染间隔","name":"renderInterval","keyboard":true,"id":"u:3f7cb08b0e2b","step":1,"mode":"horizontal","unitOptions":["ms"],"min":30000,"labelRemark":{"icon":"fa fa-question-circle","trigger":["hover"],"className":"Remark--warning","placement":"top","content":"最低渲染间隔为30秒","title":"提示："}},{"type":"switch","label":"开启渲染间隔","option":"","name":"renderIntervalEnabled","falseValue":false,"trueValue":true,"id":"u:457aaa1b64ed","value":true,"mode":"horizontal","labelRemark":{"icon":"fa fa-question-circle","trigger":["hover"],"className":"Remark--warning","placement":"top","title":"提示：","content":"关闭渲染间隔，将会渲染socket 推送的实时数据，意味着此时配置的数据源api如果不是 “最新” 值，将不会渲染。并且关闭渲染间隔后，需保存并刷新看板，才能看到效果。"}},{"type":"switch","label":"自定义数据源","option":"","name":"customDatasource","falseValue":false,"trueValue":true,"id":"u:648ca964f693","value":false,"mode":"horizontal"},{"type":"input-text","label":"数据源api","name":"dataPoint","id":"normalDataPoint","multiple":false,"mode":"horizontal","size":"full","className":"w-full m-b-sm","inputClassName":"w-full","clearable":true,"visibleOn":"this.customDatasource"},{"type":"radios","label":"请求方式","name":"requestMethod","options":[{"label":"get 请求","value":"get"},{"label":"post 请求","value":"post"}],"id":"u:2c48207f4f65","mode":"horizontal","visibleOn":"this.customDatasource","value":"get"},{"type":"editor","label":"请求入参","name":"requestParams","id":"u:e94982b03d0c","language":"javascript","value":"return {};","visibleOn":"this.customDatasource","inputClassName":"","className":"text-left"},{"type":"editor","label":"数据过滤","name":"dataFilterFn","id":"u:f9ef754971e0","language":"javascript","value":"// datas 数据处理\\n// .....\\nconst defaultHeader = ['列1', '列2', '列3']\\nconst defaultDatas = [\\n[{ val: '行1列1', style: {color: 'red'}},{ val: '行1列2', style: {color: 'green'}}, { val: '行1列3', style: {color: 'blue', cursor: 'pointer'}}],\\n[{ val: '行2列1', style: {color: 'red'}},{ val: '行2列2', style: {color: 'green'}}, { val: '行2列3', style: {color: 'blue', cursor: 'pointer'}}],\\n]\\n// 或\\n// const defaultDatas = [\\n// ['行1列1', '行1列2', '行1列3'],\\n// ['行2列1', '行2列2', '行2列3'],\\n// ]\\n\\nreturn {\\n headerDatas: defaultHeader ,\\ntableDatas: defaultDatas \\n}","labelRemark":{"icon":"fa fa-question-circle","trigger":["hover"],"className":"Remark--warning","placement":"top","content":"入参api返回数据： datas"},"labelClassName":"text-left","inputClassName":"text-left","options":{"lineNumbers":"off"},"visibleOn":"this.customDatasource"},{"type":"switch","label":"测试数据","option":"","name":"enableTestDatas","falseValue":false,"trueValue":true,"id":"u:69f7cb2f3c34","value":false,"mode":"horizontal"},{"type":"editor","label":"测试数据组装并返回","name":"testDatas","id":"u:e52de9e4e231","language":"javascript","visibleOn":"this.enableTestDatas","className":"text-left"}],"name":"normalService","className":"p-none"},{"type":"service","body":[],"id":"u:0dd069ac163f"}],"id":"u:7b021709614e","headingClassName":"p-sm bg-white b-b b-light","className":"m-b r-3x","bodyClassName":"p-none"},{"type":"collapse","key":"2","header":"事件","body":[{"type":"service","id":"u:4ec2acc50405","body":[{"type":"combo","label":"","name":"eventCombo","multiple":true,"addable":false,"removable":false,"removableMode":"icon","addBtn":{"label":"新增","icon":"fa fa-plus","level":"primary","size":"sm","id":"u:ae1b0a0c0f55"},"items":[{"type":"select","name":"eventType","placeholder":"选择事件","options":[{"label":"点击行","value":"change"}],"id":"u:a7b44847011a","label":"名称"},{"type":"checkBox","id":"u:79dadbc61f74","name":"enable","label":"启用"},{"type":"fieldset","title":"目标节点发起请求","collapsable":true,"body":[{"type":"input-text","label":"目标节点","name":"targetNode","id":"u:6efb6f120e47","multiple":false,"mode":"horizontal","inputClassName":"w-full","visibleOn":"this.eventType === 'change'","removable":"true","placeholder":"目标节点id"},{"type":"select","label":"入参类型","name":"targetParamsType","options":[{"label":"物实体","value":"entitys"},{"label":"物属性","value":"attrs"},{"label":"时间","value":"times"}],"id":"u:d10a57a9b966","multiple":false,"mode":"horizontal","inputClassName":"w-full","removable":true},{"type":"radios","label":"入参实体","name":"targetParamsEntitys","options":[{"label":"物组","value":"group"},{"label":"列表","value":"list"},{"label":"关系","value":"relation"},{"label":"搜索","value":"search"},{"label":"标签","value":"tag"},{"label":"类型","value":"type"}],"id":"u:26df91ece010","onEvent":{"change":{"actions":[{"actionType":"custom","script":"console.log('event', event);"}]}},"checkAll":false,"joinValues":true,"inputClassName":"w-full text-left","mode":"horizontal","labelClassName":"","visibleOn":"this.targetParamsType === 'entitys'"},{"type":"radios","label":"属性类型","name":"targetParamsAttrsType","options":[{"label":"分属性","value":"split"},{"label":"全部","value":"all"}],"id":"u:26df91ece010","checkAll":false,"joinValues":true,"inputClassName":"w-full text-left","mode":"horizontal","labelClassName":"","visibleOn":"this.targetParamsType === 'attrs'"},{"type":"radios","label":"入参属性","name":"targetParamsAttrsKeysEntitys","options":[{"label":"物","value":"entitys"},{"label":"属性","value":"keys"}],"id":"u:26df91ece010","checkAll":false,"joinValues":true,"inputClassName":"w-full text-left","mode":"horizontal","labelClassName":"","visibleOn":"this.targetParamsType === 'attrs'"},{"type":"radios","label":"入参时间","name":"targetParamsTimesType","options":[{"label":"最近","value":"nearest"},{"label":"时间段","value":"range"},{"label":"区间","value":"interval"}],"id":"u:26df91ece010","multiple":false,"checkAll":false,"joinValues":true,"inputClassName":"w-full text-left","mode":"horizontal","labelClassName":"","visibleOn":"this.targetParamsType === 'times'"},{"type":"input-text","label":"超级api","name":"apiId","id":"u:912394455375","placeholder":"超级apiId"}],"id":"u:fbccd2ccc8a3"},{"type":"fieldset","title":"更多操作","collapsable":true,"body":[{"type":"tpl","tpl":"function (context, service, nodeId, event) {","inline":true,"wrapperComponent":"","id":"u:799cd3277731"},{"type":"editor","id":"u:77aca39f5961","label":"","name":"moreOperation","language":"javascript","className":"my-0"},{"type":"tpl","tpl":"}","inline":true,"wrapperComponent":"","id":"u:cd392cfb6ffb"}],"id":"u:51249df94c65","bodyClassName":"text-left"}],"id":"u:364496dd313b","deleteBtn":{"type":"icon","icon":"fa fa-trash","id":"u:6d4a75088bc2","className":"border-none"},"strictMode":true,"syncFields":[],"labelClassName":""}],"data":{"eventCombo":[{"eventType":"click","enable":false,"config":""}]},"name":"eventsService"}],"id":"u:14834e895716","headingClassName":"p-sm bg-white b-b b-light","className":"m-b r-3x","bodyClassName":"p-none"}],"id":"u:3eb6b9a42dcb","name":"dynamicService"}],"id":"u:043251c106af","className":"p-sm"},{"title":"脚本解析","icon":"fa fa-star","body":[{"type":"flex","id":"u:edef8e21c1e3","justify":"flex-end","items":[{"type":"button","id":"u:f6d8d837a48d","label":"导入","onEvent":{"click":{"actions":[]}},"icon":"fa fa-download","level":"primary","className":"mr-2"},{"type":"button","id":"u:23f988f98a28","label":"保存","onEvent":{"click":{"actions":[{"actionType":"setValue","componentId":"u:6dc2a126004a","args":{"value":{"save":true}}}]}},"icon":"fa fa-save"}]},{"type":"service","id":"u:6dc2a126004a","body":[{"type":"tpl","id":"u:c77724a2f3b3","tpl":"function (context, service, nodeId) {","inline":true,"wrapperComponent":"","style":{"fontFamily":"","fontSize":16}},{"type":"editor","label":"","name":"script","id":"u:55ceb80e58a7","language":"javascript","size":"xxl","className":"m-b-none","onEvent":{"focus":{"actions":[{"actionType":"setValue","componentId":"u:6dc2a126004a","args":{"value":{"save":false}}}]}},"description":"参数提示：\\n1. context 是整个看板上下文，可以获取看板所有元素节点和连线节点，也可以访问 context.globalDatas 获取全局socket 数据。 \\n2. service 是 Ajax 请求服务。\\n3. nodeId 是节点 id . \\n4. 如果返回一个函数，则可以当socket 数据更新时，调用此函数，此函数入参分别是 context, service, nodeId, globalDatas ;，以满足多样化的业务需求。"},{"type":"tpl","tpl":"}","inline":true,"wrapperComponent":"","id":"u:fa21aebb859b","style":{"fontFamily":"","fontSize":16}}],"name":"scriptService","data":{"script":"","save":false},"className":"text-left"}],"id":"u:dc8d331cbe5e"}],"id":"u:178107498966","tabsMode":"radio","className":"p-none w-full","contentClassName":"p-none"}],"className":""}`,s={jsPlugin:'[{"url":"./logicflow/core.umd.js","isModule":false,"disabled":true},{"url":"./logicflow/extensionLib/NodeResize.js","isModule":false,"disabled":true}]',json:`{
|
|
"nodes": [
|
|
{
|
|
"id": "d11b46e7-237d-4ca8-96fc-4c0f7a011316",
|
|
"type": "custom-scrolltable-node",
|
|
"x": 200,
|
|
"y": 200,
|
|
"text": {
|
|
"value": "",
|
|
"x": 200,
|
|
"y": 200
|
|
},
|
|
"properties": {
|
|
"id": "d11b46e7-237d-4ca8-96fc-4c0f7a011316",
|
|
"width": 500,
|
|
"height": 200,
|
|
"x": 200,
|
|
"y": 200,
|
|
"rotation": 0,
|
|
"opacity": 1,
|
|
"emptyTable": false,
|
|
"headerHeight": 35,
|
|
"tableBGC": "rgba(5, 32, 73, 1)",
|
|
"headerBGC": "#00BAFF",
|
|
"oddRowBGC": "",
|
|
"evenRowBGC": "",
|
|
"highlightBGC": "",
|
|
"highlightFontColor": "rgba(245, 166, 35, 1)",
|
|
"clickHighlight": true,
|
|
"enableBorder": false,
|
|
"onlyOuterBorder": false,
|
|
"onlyHeaderBorder": false,
|
|
"onlyHeaderHoriBorder": false,
|
|
"onlyBodyBorder": false,
|
|
"bodyBorderStyle": "solid",
|
|
"onlyHoriBorder": false,
|
|
"index": false,
|
|
"enableCarousel": false,
|
|
"waitTime": "2000ms",
|
|
"hoverPause": false,
|
|
"fontSize": 12,
|
|
"headerFontSize": 14,
|
|
"showDefaultValue": false,
|
|
"showUnit": false,
|
|
"nodeAlias": "表格",
|
|
"rowNum": 5,
|
|
"columnWidth": [
|
|
{
|
|
"col": "1",
|
|
"colW": 150
|
|
}
|
|
],
|
|
"carousel": "single",
|
|
"align": [
|
|
{
|
|
"col": "1",
|
|
"align": "center"
|
|
}
|
|
],
|
|
"headerFontColor": "#ffffff",
|
|
"fontColor": "#ffffff",
|
|
"borderColor": "#4a4a4a",
|
|
"colNum": 3,
|
|
"oddRowGradBG": "",
|
|
"evenRowGradBG": "",
|
|
"highlightGradBG": "",
|
|
"dynamic": {
|
|
"normalData": {
|
|
"dataPoint": "",
|
|
"compareType": "",
|
|
"conditionVariables": [],
|
|
"defaultValue": "",
|
|
"unit": "",
|
|
"renderIntervalEnabled": true,
|
|
"customDatasource": true,
|
|
"enableTestDatas": true,
|
|
"testDatas": "",
|
|
"renderInterval": "30000ms",
|
|
"dataFilterFn": "// datas 数据处理\\r\\n// datas.forEach().....\\r\\n\\r\\n// 返回格式为：\\r\\nconst defaultHeader = [{ val: '列1', style: { color: 'red' } }, { val: '列2', style: { color: 'red' } }, { val: '列3', style: { color: 'red' } }]\\r\\nconst defaultDatas = [\\r\\n [{ val: '行1列1', style: { color: 'red' } }, { val: '行1列2', style: { color: 'green' } }, { val: '行1列3', style: { color: 'blue', cursor: 'pointer' } }],\\r\\n [{ val: '行2列1', style: { color: 'red' } }, { val: '行2列2', style: { color: 'green' } }, { val: '行2列3', style: { color: 'blue', cursor: 'pointer' } }],\\r\\n]\\r\\n// 或\\r\\n// const defaultHeader = ['列1', '列2', '列3']\\r\\n// const defaultDatas = [\\r\\n// ['行1列1', '行1列2', '行1列3'],\\r\\n// ['行2列1', '行2列2', '行2列3'],\\r\\n// ]\\r\\nreturn {\\r\\n headerDatas: defaultHeader,\\r\\n tableDatas: defaultDatas\\r\\n}",
|
|
"requestMethod": "get",
|
|
"requestParams": "return {};"
|
|
},
|
|
"eventsData": {
|
|
"eventCombo": [
|
|
{
|
|
"eventType": "change",
|
|
"enable": false,
|
|
"config": ""
|
|
}
|
|
]
|
|
},
|
|
"uiData": {
|
|
"dataPoint": "",
|
|
"compareType": "",
|
|
"conditionVariables": []
|
|
},
|
|
"animationData": {
|
|
"animationCombo": [
|
|
{
|
|
"dataPoint": "",
|
|
"min": "",
|
|
"max": "",
|
|
"animationName": "旋转"
|
|
}
|
|
]
|
|
},
|
|
"hiddenData": {
|
|
"hiddenCombo": [
|
|
{
|
|
"dataPoint": "",
|
|
"min": "",
|
|
"max": "",
|
|
"showOrHiddenName": "隐藏"
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}`,javascript:`// 工具函数
|
|
/**
|
|
* 精准判断对象类型
|
|
* @param obj
|
|
*/
|
|
function typeOf(obj) {
|
|
const toString = Object.prototype.toString
|
|
const map = {
|
|
'[object Boolean]': 'boolean',
|
|
'[object Number]': 'number',
|
|
'[object String]': 'string',
|
|
'[object Function]': 'function',
|
|
'[object Array]': 'array',
|
|
'[object Date]': 'date',
|
|
'[object RegExp]': 'regExp',
|
|
'[object Undefined]': 'undefined',
|
|
'[object Null]': 'null',
|
|
'[object Object]': 'object',
|
|
}
|
|
return map[toString.call(obj)]
|
|
}
|
|
|
|
/**
|
|
* 深拷贝
|
|
* @param data
|
|
*/
|
|
function deepCopy(data) {
|
|
const t = typeOf(data)
|
|
let o
|
|
|
|
if (t === 'array') {
|
|
o = []
|
|
} else if (t === 'object') {
|
|
o = {}
|
|
} else {
|
|
return data
|
|
}
|
|
|
|
if (t === 'array') {
|
|
for (let i = 0; i < data.length; i++) {
|
|
o.push(deepCopy(data[i]))
|
|
}
|
|
} else if (t === 'object') {
|
|
for (const i in data) {
|
|
o[i] = deepCopy(data[i])
|
|
}
|
|
}
|
|
return o
|
|
}
|
|
|
|
/**
|
|
* 深覆盖
|
|
* @param target
|
|
* @param merged
|
|
*/
|
|
function deepMerge(target, merged) {
|
|
for (const key in merged) {
|
|
if (target[key] && typeof target[key] === 'object') {
|
|
deepMerge(target[key], merged[key])
|
|
continue
|
|
}
|
|
if (typeof merged[key] === 'object') {
|
|
target[key] = deepCopy(merged[key])
|
|
|
|
continue
|
|
}
|
|
target[key] = merged[key]
|
|
}
|
|
|
|
return target
|
|
}
|
|
|
|
|
|
/**
|
|
* 节流函数，(限制函数的执行频率)返回函数连续调用时，空闲时间必须大于或等于 wait，func 才会执行
|
|
* @param {function} func 回调函数
|
|
* @param {number} wait 表示时间窗口的间隔
|
|
* @param immediate 是否立即执行 true 则先调用，false不先调用
|
|
* @return {function} 返回客户调用函数
|
|
*/
|
|
function throttle(func, wait, immediate) {
|
|
let timeoutID
|
|
let lastExec = 0
|
|
|
|
function wrapper() {
|
|
const self = this
|
|
const elapsed = Number(new Date()) - lastExec
|
|
const args = arguments
|
|
|
|
function clearExistingTimeout() {
|
|
if (timeoutID) {
|
|
clearTimeout(timeoutID)
|
|
}
|
|
}
|
|
|
|
function clear() {
|
|
timeoutID = undefined
|
|
}
|
|
|
|
function exec() {
|
|
lastExec = Number(new Date())
|
|
func.apply(self, args)
|
|
}
|
|
|
|
if (immediate && !timeoutID) {
|
|
exec()
|
|
}
|
|
clearExistingTimeout()
|
|
if (immediate === undefined && elapsed > wait) {
|
|
exec()
|
|
} else {
|
|
timeoutID = setTimeout(immediate ? clear : exec, immediate === undefined ? wait - elapsed : wait)
|
|
}
|
|
}
|
|
|
|
return wrapper
|
|
}
|
|
|
|
/**
|
|
* 防抖函数，(限制函数的执行频率) 保证再一系列调用时间内，只调用一次
|
|
*
|
|
* @param {function} func 回调函数
|
|
* @param {number} wait 表示时间窗口的间隔
|
|
* @return {function} 返回客户调用函数
|
|
*/
|
|
function debounce(func, wait) {
|
|
return throttle(func, wait, false)
|
|
}
|
|
|
|
|
|
const { createApp, createVNode, render, nextTick, onBeforeUnmount, onUnmounted, onMounted, reactive, ref, toRefs, watch } = Vue;
|
|
const app = createApp({})
|
|
|
|
function useAutoResize(props, afterResizeFun) {
|
|
const domRef = ref(null) // dorm容器，默认设置为domRef
|
|
const status = reactive({
|
|
width: 0,
|
|
height: 0,
|
|
})
|
|
let __resizeHandler = null
|
|
|
|
function resize(resize = true) {
|
|
nextTick().then(() => {
|
|
const dom = domRef.value
|
|
status.width = dom ? dom.clientWidth : 0
|
|
status.height = dom ? dom.clientHeight : 0
|
|
|
|
if (!dom) {
|
|
console.warn('fei-datav: Failed to get dom node, component rendering may be abnormal!')
|
|
} else if (!status.width || !status.height) {
|
|
console.warn('fei-datav: Component width or height is 0px, rendering abnormality may occur!')
|
|
}
|
|
|
|
if (typeof afterResizeFun === 'function' && resize) afterResizeFun()
|
|
})
|
|
}
|
|
|
|
watch([() => props.containerWidth, () => props.containerHeight], () => {
|
|
__resizeHandler && __resizeHandler();
|
|
})
|
|
|
|
onMounted(() => {
|
|
setTimeout(() => {
|
|
resize();
|
|
}, 500)
|
|
__resizeHandler = debounce(resize, 100)
|
|
})
|
|
|
|
return {
|
|
domRef,
|
|
...toRefs(status),
|
|
resize,
|
|
}
|
|
}
|
|
|
|
const ScrollTable = {
|
|
template: \`
|
|
<div class="bv-scroll-table" ref="domRef" :style="tableStyle">
|
|
<div class="header" v-if="header.length && mergedConfig" :style="{'background-color': mergedConfig.headerBGC}">
|
|
<div
|
|
class="header-item"
|
|
v-for="(headerItem, i) in header"
|
|
:key="(headerItem.val || headerItem) + '-' + i"
|
|
:style="getHeaderItemStyle(widths, mergedConfig, i, header, enableBorder, borderColor, headerFontSize, headerFontColor, onlyOuterBorder, onlyHeaderBorder, onlyHeaderHoriBorder, headerItem, aligns[i])"
|
|
:align="aligns[i]"
|
|
v-html="headerItem.val || headerItem"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-if="mergedConfig"
|
|
class="rows"
|
|
:style="getRowsHeight"
|
|
>
|
|
<div
|
|
class="row-item"
|
|
v-for="(row, ri) in rows"
|
|
:key="row.toString() + '-' + row.scroll"
|
|
:style="getRowItemStyle(heights, mergedConfig, row, ri, highlightGradBG, highlightBGC, rows, enableBorder, borderColor, onlyBodyBorder, bodyBorderStyle, onlyHoriBorder, onlyOuterBorder)"
|
|
>
|
|
<div
|
|
class="cell"
|
|
v-for="(cell, ci) in row.cells"
|
|
:key="(cell.val || cell) + '-' + ri + '-' + ci"
|
|
:style="getCellStyle(widths, ci, row.cells, enableBorder, borderColor, fontSize, fontColor, onlyBodyBorder, bodyBorderStyle, onlyHoriBorder, onlyOuterBorder, cell, row, highlightFontColor)"
|
|
:align="aligns[ci]"
|
|
v-html="getCellContent(cell)"
|
|
@click="clickHandler('click', ri, ci, row, cell)"
|
|
@mouseenter="handleHover(true, ri, ci, row, cell)"
|
|
@mouseleave="handleHover(false)"
|
|
@mousemove="(e) => handleMove(e, ri, ci, row, cell)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
\`,
|
|
name: 'BvScrollTable',
|
|
props: {
|
|
config: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
containerWidth: {
|
|
type: Number,
|
|
default: 500,
|
|
},
|
|
containerHeight: {
|
|
type: Number,
|
|
default: 200,
|
|
},
|
|
fontColor: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
fontSize: {
|
|
type: Number,
|
|
default: 12
|
|
},
|
|
headerFontColor: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
headerFontSize: {
|
|
type: Number,
|
|
default: 12
|
|
},
|
|
enableBorder: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
borderColor: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
enableCarousel: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
onlyOuterBorder: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
onlyHeaderBorder: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
onlyBodyBorder: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
bodyBorderStyle: {
|
|
type: String,
|
|
default: 'solid'
|
|
},
|
|
onlyHoriBorder: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
onlyHeaderHoriBorder: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
tableBGC: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
clickHighlight: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
highlightBGC: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
highlightGradBG: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
highlightNumber: {
|
|
type: Number,
|
|
default: -1
|
|
},
|
|
highlightFontColor: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
computed: {
|
|
tableStyle() {
|
|
const style = {};
|
|
if (this.tableBGC) {
|
|
style.background = this.tableBGC
|
|
}
|
|
if (this.enableBorder || this.onlyOuterBorder) {
|
|
return {
|
|
border: \`1px solid \${this.borderColor}\`,
|
|
'box-sizing': 'border-box',
|
|
...style
|
|
}
|
|
} else {
|
|
return style
|
|
}
|
|
},
|
|
getHeaderItemStyle: () => (widths, mergedConfig, i, header, enableBorder, borderColor, headerFontSize, headerFontColor, onlyOuterBorder, onlyHeaderBorder, onlyHeaderHoriBorder, headerItem, align) => {
|
|
const isLast = i === header.length - 1;
|
|
const borderObj = {}
|
|
if (enableBorder) {
|
|
!isLast && (borderObj['border-right'] = \`1px solid \${borderColor}\`);
|
|
}
|
|
if (!enableBorder && !onlyOuterBorder && onlyHeaderBorder && !onlyHeaderHoriBorder) {
|
|
borderObj['border-top'] = \`1px solid \${borderColor}\`;
|
|
borderObj['border-bottom'] = \`1px solid \${borderColor}\`;
|
|
borderObj['border-right'] = \`1px solid \${borderColor}\`;
|
|
i === 0 && (borderObj['border-left'] = \`1px solid \${borderColor}\`);
|
|
}
|
|
if (!enableBorder && !onlyOuterBorder && onlyHeaderBorder && onlyHeaderHoriBorder) {
|
|
borderObj['border-top'] = \`1px solid \${borderColor}\`;
|
|
borderObj['border-bottom'] = \`1px solid \${borderColor}\`;
|
|
i === 0 && (borderObj['border-left'] = \`1px solid \${borderColor}\`);
|
|
isLast && (borderObj['border-right'] = \`1px solid \${borderColor}\`);
|
|
}
|
|
if (!enableBorder && onlyOuterBorder && onlyHeaderBorder && !onlyHeaderHoriBorder) {
|
|
borderObj['border-bottom'] = \`1px solid \${borderColor}\`;
|
|
!isLast && (borderObj['border-right'] = \`1px solid \${borderColor}\`);
|
|
}
|
|
if (!enableBorder && onlyOuterBorder && onlyHeaderBorder && onlyHeaderHoriBorder) {
|
|
borderObj['border-bottom'] = \`1px solid \${borderColor}\`;
|
|
}
|
|
|
|
let headItemStyle = {};
|
|
if (headerItem.style) {
|
|
headItemStyle = {
|
|
...headerItem.style
|
|
}
|
|
}
|
|
return {
|
|
'height': mergedConfig.headerHeight + 'px',
|
|
'width': widths[i] + 'px',
|
|
'font-size': headerFontSize + 'px',
|
|
'color': headerFontColor,
|
|
...borderObj,
|
|
...headItemStyle,
|
|
display: 'flex',
|
|
'justify-content': align === 'center' ? 'center' : align === 'left' ? 'flex-start' : align === 'right' ? 'flex-end' : 'left',
|
|
'align-items': 'center',
|
|
'text-align': align === 'center' ? 'center' : align === 'left' ? 'left' : align === 'right' ? 'right' : 'left',
|
|
}
|
|
},
|
|
getCellStyle: () => (widths, ci, cells, enableBorder, borderColor, fontSize, fontColor, onlyBodyBorder, bodyBorderStyle, onlyHoriBorder, onlyOuterBorder, cell, row, highlightFontColor) => {
|
|
const isLast = ci === cells.length - 1;
|
|
const borderObj = {}
|
|
if (enableBorder) {
|
|
!isLast && (borderObj['border-right'] = \`1px \${bodyBorderStyle} \${borderColor}\`);
|
|
}
|
|
if (!enableBorder && !onlyOuterBorder && onlyBodyBorder && !onlyHoriBorder) {
|
|
borderObj['border-right'] = \`1px \${bodyBorderStyle} \${borderColor}\`;
|
|
ci === 0 && (borderObj['border-left'] = \`1px \${bodyBorderStyle} \${borderColor}\`);
|
|
}
|
|
if (!enableBorder && onlyOuterBorder && onlyBodyBorder && !onlyHoriBorder) {
|
|
!isLast && (borderObj['border-right'] = \`1px \${bodyBorderStyle} \${borderColor}\`);
|
|
}
|
|
|
|
let cellStyle = {};
|
|
if (cell.style) {
|
|
cellStyle = {
|
|
...cell.style
|
|
}
|
|
}
|
|
|
|
const isHighlight = row.isHighlight;
|
|
let fontC = cellStyle.color || fontColor;
|
|
if (isHighlight) {
|
|
fontC = highlightFontColor;
|
|
}
|
|
|
|
return {
|
|
width: widths[ci] + 'px',
|
|
'font-size': fontSize + 'px',
|
|
...borderObj,
|
|
...cellStyle,
|
|
'color': fontC,
|
|
}
|
|
},
|
|
getRowsHeight() {
|
|
const { height, header, mergedConfig, enableCarousel } = this;
|
|
return {
|
|
height: height - (header.length ? mergedConfig.headerHeight : 0) + 'px',
|
|
overflow: enableCarousel ? 'hidden' : 'auto'
|
|
}
|
|
},
|
|
getRowItemStyle: () => (heights, mergedConfig, row, ri, highlightGradBG, highlightBGC, rows, enableBorder, borderColor, onlyBodyBorder, bodyBorderStyle, onlyHoriBorder, onlyOuterBorder) => {
|
|
const h = heights[ri];
|
|
const isHighlight = row.isHighlight;
|
|
let background = mergedConfig[row.rowIndex % 2 === 0 ? 'evenRowBGC' : 'oddRowBGC'];
|
|
if (background.includes('http') && !background.includes('url')) {
|
|
background = \`url(\${background})\`;
|
|
}
|
|
if (isHighlight) {
|
|
background = highlightGradBG || highlightBGC;
|
|
if (background.includes('http') && !background.includes('url')) {
|
|
background = \`url(\${background})\`;
|
|
}
|
|
}
|
|
|
|
const borderObj = {}
|
|
const isLastRow = ri === rows.length - 1;
|
|
if (enableBorder) {
|
|
ri === 0 && (borderObj['border-top'] = \`1px \${bodyBorderStyle} \${borderColor}\`);
|
|
borderObj['border-bottom'] = \`1px \${bodyBorderStyle} \${borderColor}\`;
|
|
}
|
|
if (!enableBorder && !onlyOuterBorder && onlyBodyBorder && !onlyHoriBorder) {
|
|
ri === 0 && (borderObj['border-top'] = \`1px \${bodyBorderStyle} \${borderColor}\`);
|
|
borderObj['border-bottom'] = \`1px \${bodyBorderStyle} \${borderColor}\`;
|
|
}
|
|
if (!enableBorder && !onlyOuterBorder && onlyBodyBorder && onlyHoriBorder) {
|
|
ri === 0 && (borderObj['border-top'] = \`1px \${bodyBorderStyle} \${borderColor}\`);
|
|
borderObj['border-bottom'] = \`1px \${bodyBorderStyle} \${borderColor}\`;
|
|
}
|
|
if (!enableBorder && onlyOuterBorder && onlyBodyBorder && !onlyHoriBorder) {
|
|
ri === 0 && (borderObj['border-top'] = \`1px \${bodyBorderStyle} \${borderColor}\`);
|
|
!isLastRow && (borderObj['border-bottom'] = \`1px \${bodyBorderStyle} \${borderColor}\`);
|
|
}
|
|
if (!enableBorder && onlyOuterBorder && onlyBodyBorder && onlyHoriBorder) {
|
|
ri === 0 && (borderObj['border-top'] = \`1px \${bodyBorderStyle} \${borderColor}\`);
|
|
!isLastRow && (borderObj['border-bottom'] = \`1px \${bodyBorderStyle} \${borderColor}\`);
|
|
}
|
|
|
|
return {
|
|
height: h + 'px',
|
|
'line-height': h + 'px',
|
|
'background': background,
|
|
'background-size': '100% 100%',
|
|
...borderObj
|
|
}
|
|
}
|
|
},
|
|
emits: ['mouseover', 'click'],
|
|
setup(props, { emit }) {
|
|
const { onUnmounted, watch, reactive, ref, toRefs } = Vue;
|
|
|
|
const defaultConfig = ref({
|
|
/**
|
|
* @description Board header
|
|
* @type {Array<String>}
|
|
* @default header = []
|
|
* @example header = ['column1', 'column2', 'column3']
|
|
*/
|
|
header: [],
|
|
/**
|
|
* @description Board data
|
|
* @type {Array<Array>}
|
|
* @default data = []
|
|
*/
|
|
data: [],
|
|
/**
|
|
* @description Row num
|
|
* @type {Number}
|
|
* @default rowNum = 5
|
|
*/
|
|
rowNum: 5,
|
|
/**
|
|
* @description Header background color
|
|
* @type {String}
|
|
* @default headerBGC = '#00BAFF'
|
|
*/
|
|
headerBGC: '#00BAFF',
|
|
/**
|
|
* @description Odd row background color
|
|
* @type {String}
|
|
* @default oddRowBGC = '#003B51'
|
|
*/
|
|
oddRowBGC: '#003B51',
|
|
/**
|
|
* @description Even row background color
|
|
* @type {String}
|
|
* @default evenRowBGC = '#003B51'
|
|
*/
|
|
evenRowBGC: '#0A2732',
|
|
/**
|
|
* @description Scroll wait time
|
|
* @type {Number}
|
|
* @default waitTime = 2000
|
|
*/
|
|
waitTime: 2000,
|
|
/**
|
|
* @description Header height
|
|
* @type {Number}
|
|
* @default headerHeight = 35
|
|
*/
|
|
headerHeight: 35,
|
|
/**
|
|
* @description Column width
|
|
* @type {Array<Number>}
|
|
* @default columnWidth = []
|
|
*/
|
|
columnWidth: [],
|
|
/**
|
|
* @description Column align
|
|
* @type {Array<String>}
|
|
* @default align = []
|
|
* @example align = ['left', 'center', 'right']
|
|
*/
|
|
align: [],
|
|
/**
|
|
* @description Show index
|
|
* @type {Boolean}
|
|
* @default index = false
|
|
*/
|
|
index: false,
|
|
/**
|
|
* @description index Header
|
|
* @type {String}
|
|
* @default indexHeader = '#'
|
|
*/
|
|
indexHeader: '#',
|
|
/**
|
|
* @description Carousel type
|
|
* @type {String}
|
|
* @default carousel = 'single'
|
|
* @example carousel = 'single' | 'page'
|
|
*/
|
|
carousel: 'single',
|
|
/**
|
|
* @description Pause scroll when mouse hovered
|
|
* @type {Boolean}
|
|
* @default hoverPause = true
|
|
* @example hoverPause = true | false
|
|
*/
|
|
hoverPause: true,
|
|
})
|
|
|
|
function calcData() {
|
|
stopAnimation()
|
|
mergeConfig()
|
|
calcHeaderData()
|
|
calcRowsData()
|
|
calcWidths()
|
|
calcHeights()
|
|
calcAligns()
|
|
animation(true)
|
|
}
|
|
|
|
const { domRef, width, height, resize } = useAutoResize(props, calcData)
|
|
const status = reactive({
|
|
mergedConfig: null,
|
|
header: [],
|
|
rowsData: [],
|
|
rows: [],
|
|
widths: [],
|
|
heights: [],
|
|
avgHeight: 0,
|
|
aligns: [],
|
|
animationIndex: 0,
|
|
animationHandler: '',
|
|
updater: 0,
|
|
needCalc: false,
|
|
})
|
|
|
|
function handleHover(enter, ri, ci, row, cell) {
|
|
if (enter) emitEvent('mouseover', ri, ci, row, cell)
|
|
if (!status.mergedConfig.hoverPause) return
|
|
const tooltip = document.querySelector('.scroll-table-tooltip');
|
|
if (enter) {
|
|
stopAnimation()
|
|
} else {
|
|
animation(true);
|
|
}
|
|
}
|
|
|
|
function onResize() {
|
|
if (!status.mergedConfig) return
|
|
stopAnimation()
|
|
calcWidths()
|
|
calcHeights(true)
|
|
animation(true)
|
|
}
|
|
|
|
function mergeConfig() {
|
|
status.mergedConfig = deepMerge(deepCopy(defaultConfig.value), props.config || {})
|
|
}
|
|
|
|
function calcHeaderData() {
|
|
let { header, index, indexHeader } = status.mergedConfig
|
|
if (!header.length) {
|
|
status.header = []
|
|
return
|
|
}
|
|
header = [...header]
|
|
if (index) header.unshift(indexHeader)
|
|
status.header = header
|
|
}
|
|
|
|
function calcRowsData() {
|
|
let { data, index, headerBGC, rowNum, enableCarousel } = status.mergedConfig
|
|
if (index) {
|
|
data = data.map((row, i) => {
|
|
row = [...row]
|
|
const indexTag = \`<span class="index" style="background-color: \${headerBGC};">\${i + 1}</span>\`;
|
|
row.unshift(indexTag)
|
|
return row
|
|
})
|
|
}
|
|
data = data.map((cells, i) => ({ cells, rowIndex: i }))
|
|
const rowLength = data.length
|
|
if (enableCarousel && rowLength > rowNum && rowLength < 2 * rowNum) {
|
|
data = [...data, ...data]
|
|
}
|
|
data = data.map((d, i) => ({ ...d, scroll: i }))
|
|
status.rowsData = data
|
|
status.rows = data
|
|
}
|
|
|
|
function calcWidths() {
|
|
const { mergedConfig, rowsData } = status
|
|
const { columnWidth, header } = mergedConfig
|
|
const usedWidth = columnWidth.reduce((all, w) => all + w, 0)
|
|
let columnNum = 0
|
|
if (rowsData[0]) {
|
|
columnNum = rowsData[0].cells.length
|
|
} else if (header.length) {
|
|
columnNum = header.length
|
|
}
|
|
const avgWidth = (width.value - usedWidth) / (columnNum - columnWidth.length)
|
|
const widths = new Array(columnNum).fill(avgWidth)
|
|
status.widths = deepMerge(widths, columnWidth)
|
|
}
|
|
|
|
function calcHeights(onresize = false) {
|
|
const { mergedConfig, header } = status
|
|
const { headerHeight, rowNum, data } = mergedConfig
|
|
let allHeight = height.value
|
|
if (header.length) allHeight -= headerHeight
|
|
const avgHeight = allHeight / rowNum
|
|
status.avgHeight = avgHeight
|
|
if (!onresize) status.heights = new Array(data.length).fill(avgHeight)
|
|
}
|
|
|
|
function calcAligns() {
|
|
const { header, mergedConfig } = status
|
|
const columnNum = header.length
|
|
let aligns = new Array(columnNum).fill('left')
|
|
const { align } = mergedConfig
|
|
status.aligns = deepMerge(aligns, align)
|
|
}
|
|
|
|
async function animation(start = false) {
|
|
if (!props.enableCarousel) return;
|
|
const { needCalc, calcHeights, calcRowsData } = status
|
|
if (needCalc) {
|
|
calcRowsData()
|
|
calcHeights()
|
|
status.needCalc = false
|
|
}
|
|
let { avgHeight, animationIndex, mergedConfig, rowsData, updater } = status
|
|
const { waitTime, carousel, rowNum } = mergedConfig
|
|
const rowLength = rowsData.length
|
|
if (rowNum >= rowLength) return
|
|
if (start) {
|
|
await new Promise(resolve => setTimeout(resolve, waitTime))
|
|
if (updater !== status.updater) return
|
|
}
|
|
const animationNum = carousel === 'single' ? 1 : rowNum
|
|
let rows = rowsData.slice(animationIndex)
|
|
rows.push(...rowsData.slice(0, animationIndex))
|
|
status.rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1)
|
|
status.heights = new Array(rowLength).fill(avgHeight)
|
|
|
|
await new Promise(resolve => setTimeout(resolve, 300))
|
|
if (updater !== status.updater) return
|
|
|
|
status.heights.splice(0, animationNum, ...new Array(animationNum).fill(0))
|
|
|
|
animationIndex += animationNum
|
|
|
|
const back = animationIndex - rowLength
|
|
if (back >= 0) animationIndex = back
|
|
|
|
status.animationIndex = animationIndex
|
|
status.animationHandler = setTimeout(animation, waitTime - 300)
|
|
}
|
|
|
|
function stopAnimation() {
|
|
const { animationHandler, updater } = status
|
|
status.updater = (updater + 1) % 999999
|
|
if (!animationHandler) return
|
|
clearTimeout(animationHandler)
|
|
}
|
|
|
|
function emitEvent(type, ri, ci, row, cell) {
|
|
emit(type, ri, ci, row, cell)
|
|
}
|
|
|
|
const clickHandler = (type, ri, ci, row, cell) => {
|
|
if (props.clickHighlight) {
|
|
status.rows.forEach((item, index) => {
|
|
if (index === ri) {
|
|
item['isHighlight'] = true
|
|
} else {
|
|
item['isHighlight'] = false
|
|
}
|
|
})
|
|
}
|
|
emit(type, ri, ci, row, cell)
|
|
}
|
|
|
|
function updateRows(rows, animationIndex) {
|
|
const { mergedConfig, animationHandler } = {
|
|
...mergedConfig,
|
|
data: [...rows],
|
|
}
|
|
|
|
status.needCalc = true
|
|
|
|
if (typeof animationIndex === 'number') status.animationIndex = animationIndex
|
|
if (!animationHandler) animation(true)
|
|
}
|
|
|
|
watch(() => props.config, () => {
|
|
stopAnimation()
|
|
status.animationIndex = 0
|
|
calcData()
|
|
}, { deep: true })
|
|
|
|
watch(() => props.highlightNumber, (num) => {
|
|
if (props.enableCarousel) {
|
|
if (num > -1) {
|
|
status.animationIndex = num;
|
|
animation(false);
|
|
if (status.rows.length <= props.config.rowNum) {
|
|
status.rows.forEach((row, index) => {
|
|
if (index === num) {
|
|
row.isHighlight = true
|
|
} else {
|
|
row.isHighlight = false
|
|
}
|
|
})
|
|
} else {
|
|
status.rows.forEach((row, index) => {
|
|
if (index === 0) {
|
|
row.isHighlight = true
|
|
} else {
|
|
row.isHighlight = false
|
|
}
|
|
})
|
|
}
|
|
stopAnimation();
|
|
setTimeout(() => {
|
|
stopAnimation();
|
|
animation(true);
|
|
}, 3000)
|
|
}
|
|
} else {
|
|
const rows = document.querySelectorAll('.bv-scroll-table .rows .row-item');
|
|
if (rows[num]) {
|
|
rows[num].scrollIntoView();
|
|
status.rows.forEach((row, index) => {
|
|
if (index === num) {
|
|
row.isHighlight = true
|
|
} else {
|
|
row.isHighlight = false
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
|
|
const moveHandler = (e) => {
|
|
const target = e.target;
|
|
const insideTable = target.closest('.bv-scroll-table');
|
|
if (!insideTable) {
|
|
const tooltip = document.querySelector('.scroll-table-tooltip');
|
|
if (tooltip) {
|
|
tooltip.remove();
|
|
}
|
|
}
|
|
}
|
|
|
|
const handleMove = window._.debounce(function (e, ri, ci, row, cell) {
|
|
const x = e.pageX;
|
|
const y = e.pageY;
|
|
const offsetWidth = e.target.offsetWidth;
|
|
const scrollWidth = e.target.scrollWidth;
|
|
if (offsetWidth < scrollWidth) {
|
|
const tooltip = document.querySelector('.scroll-table-tooltip');
|
|
if (!tooltip) {
|
|
const span = document.createElement('span');
|
|
span.className = 'scroll-table-tooltip';
|
|
span.innerHTML = cell.val || cell;
|
|
span.style.top = y + 10 + 'px';
|
|
span.style.left = x + 15 + 'px';
|
|
document.body.appendChild(span);
|
|
} else {
|
|
tooltip.innerHTML = cell.val || cell;
|
|
tooltip.style.top = y + 10 + 'px';
|
|
tooltip.style.left = x + 15 + 'px';
|
|
}
|
|
} else {
|
|
const tooltip = document.querySelector('.scroll-table-tooltip');
|
|
tooltip && tooltip.remove();
|
|
}
|
|
}, 200)
|
|
|
|
onMounted(() => {
|
|
document.body.addEventListener('mousemove', moveHandler)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
stopAnimation();
|
|
document.body.removeEventListener('mousemove', moveHandler)
|
|
})
|
|
|
|
const getCellContent = (cell) => {
|
|
if (typeof cell === 'object') {
|
|
return cell.val
|
|
} else {
|
|
return cell
|
|
}
|
|
}
|
|
|
|
return {
|
|
defaultConfig,
|
|
...toRefs(status),
|
|
domRef,
|
|
width,
|
|
height,
|
|
resize,
|
|
updateRows,
|
|
handleHover,
|
|
onResize,
|
|
emitEvent,
|
|
clickHandler,
|
|
handleMove,
|
|
getCellContent,
|
|
}
|
|
}
|
|
}
|
|
|
|
const defaultHeader = ['列1', '列2', '列3']
|
|
const defaultDatas = [
|
|
['行1列1', '行1列2', '行1列3'],
|
|
['行2列1', '行2列2', '行2列3'],
|
|
['行3列1', '行3列2', '行3列3'],
|
|
['行4列1', '行4列2', '行4列3'],
|
|
['行5列1', '行5列2', '行5列3'],
|
|
['行6列1', '行6列2', '行6列3'],
|
|
['行7列1', '行7列2', '行7列3'],
|
|
['行8列1', '行8列2', '行8列3'],
|
|
['行9列1', '行9列2', '行9列3'],
|
|
['行10列1', '行10列2', '行10列3']
|
|
]
|
|
|
|
class CustomScrollTableNode extends HtmlResize.view {
|
|
headerDatas = defaultHeader
|
|
tableDatas = defaultDatas
|
|
oldProperties = {}
|
|
chartRendered = false
|
|
historyDatas = []
|
|
instance = null
|
|
|
|
setHtml(rootEl) {
|
|
if (!rootEl) return;
|
|
const { graphModel, model } = this.props;
|
|
const { properties, width, height, } = this.props.model;
|
|
const {
|
|
rowNum, headerBGC, oddRowBGC, evenRowBGC, waitTime, headerHeight, columnWidth,
|
|
align, index, carousel, hoverPause, fontColor, headerFontColor, oddRowGradBG, evenRowGradBG,
|
|
enableBorder, borderColor, enableCarousel, fontSize, headerFontSize, onlyHeaderHoriBorder,
|
|
onlyOuterBorder, onlyHeaderBorder, onlyBodyBorder, bodyBorderStyle, onlyHoriBorder, tableBGC,
|
|
clickHighlight, highlightBGC, highlightGradBG, highlightNumber, highlightFontColor } = properties;
|
|
const alignData = align.map(i => i.align);
|
|
const colWidths = columnWidth.map(i => i.colW);
|
|
|
|
const clickHandler = (ri, ci, row, cell) => {
|
|
graphModel.eventCenter.emit("node:change", {
|
|
data: model,
|
|
e: {
|
|
ri, ci, row, cell
|
|
},
|
|
});
|
|
}
|
|
|
|
if (this.instance) {
|
|
// 实时数据不能推送一次就创建一次图表，可以在原有实例基础之上更改数据。
|
|
Object.assign(this.instance.component.props, {
|
|
name: properties.nodeAlias,
|
|
onClick: clickHandler,
|
|
config: {
|
|
header: this.headerDatas,
|
|
data: this.tableDatas,
|
|
rowNum,
|
|
waitTime: parseInt(waitTime),
|
|
headerBGC,
|
|
oddRowBGC: oddRowBGC || oddRowGradBG,
|
|
evenRowBGC: evenRowBGC || evenRowGradBG,
|
|
headerHeight,
|
|
columnWidth: colWidths,
|
|
align: alignData,
|
|
index, carousel,
|
|
hoverPause,
|
|
},
|
|
containerWidth: width,
|
|
containerHeight: height, clickHighlight, highlightBGC, highlightGradBG, highlightNumber, highlightFontColor,
|
|
fontColor, headerFontColor, enableBorder, borderColor, enableCarousel, fontSize, headerFontSize,
|
|
onlyOuterBorder, onlyHeaderBorder, onlyBodyBorder, bodyBorderStyle, onlyHoriBorder, onlyHeaderHoriBorder, tableBGC
|
|
})
|
|
return
|
|
}
|
|
const el = document.createElement('div');
|
|
rootEl.innerHTML = '';
|
|
el.style.height = '100%';
|
|
const instance = createVNode(ScrollTable, {
|
|
name: properties.nodeAlias,
|
|
onClick: clickHandler,
|
|
config: {
|
|
header: this.headerDatas,
|
|
data: this.tableDatas,
|
|
rowNum,
|
|
waitTime: parseInt(waitTime),
|
|
headerBGC,
|
|
oddRowBGC: oddRowBGC || oddRowGradBG,
|
|
evenRowBGC: evenRowBGC || evenRowGradBG,
|
|
headerHeight,
|
|
columnWidth: colWidths,
|
|
align: alignData,
|
|
index, carousel,
|
|
hoverPause,
|
|
},
|
|
containerWidth: width,
|
|
containerHeight: height, clickHighlight, highlightBGC, highlightGradBG, highlightNumber, highlightFontColor,
|
|
fontColor, headerFontColor, enableBorder, borderColor, enableCarousel, fontSize, headerFontSize,
|
|
onlyOuterBorder, onlyHeaderBorder, onlyBodyBorder, bodyBorderStyle, onlyHoriBorder, onlyHeaderHoriBorder, tableBGC
|
|
})
|
|
instance.appContext = app._context
|
|
render(instance, el)
|
|
rootEl.appendChild(el);
|
|
this.instance = instance;
|
|
}
|
|
|
|
sameProps(properties) {
|
|
const isSame = window._.isEqual(this.oldProperties, properties);
|
|
if (isSame) return true;
|
|
this.oldProperties = properties;
|
|
return false
|
|
}
|
|
|
|
filterDatasByGroup(datas, attrs) {
|
|
let headers = [];
|
|
let tableDatas = [];
|
|
if (datas.length > 0) {
|
|
headers = ['物编码', '物属性', '时间', '值', '单位'];
|
|
const datasGrouped = window._.groupBy(datas, 'attrKey');
|
|
const unitMap = {};
|
|
for (const key in attrs) {
|
|
unitMap[key] = attrs[key].unit;
|
|
}
|
|
for (const key in datasGrouped) {
|
|
const serieData = datasGrouped[key];
|
|
serieData.forEach(i => {
|
|
const time = window.dayjs(Number(i.ts)).format('YYYY-MM-DD HH:mm:ss');
|
|
tableDatas.push([i.thingCode, i.attrKey, time, i.val, unitMap[i.attrKey] || ''])
|
|
})
|
|
}
|
|
this.headerDatas = headers;
|
|
this.tableDatas = tableDatas;
|
|
}
|
|
}
|
|
|
|
filterHistoryData(thingCodeArr, totalAttrs, dataPointArr, apiid, renderIntervalEnabled) {
|
|
if (dataPointArr && dataPointArr.length > 0) {
|
|
let datas = []
|
|
if (renderIntervalEnabled) {
|
|
datas = window.totalHistoryDatas[apiid];
|
|
} else {
|
|
datas = window.globalDashboardDatas[apiid].values;
|
|
}
|
|
if (datas && datas.length > 0) {
|
|
const gotValues = datas.filter((val) => thingCodeArr.includes(val.thingCode) && dataPointArr.includes(val.attrKey))
|
|
this.filterDatasByGroup(gotValues, totalAttrs)
|
|
this.chartRendered = true;
|
|
}
|
|
}
|
|
}
|
|
|
|
renderEmpty(properties) {
|
|
const { emptyTable, colNum, rowNum } = properties;
|
|
if (emptyTable != undefined && emptyTable) {
|
|
// 渲染空表格
|
|
this.headerDatas = new Array(colNum).fill('');
|
|
this.tableDatas = new Array(rowNum * 2).fill('').map(() => this.headerDatas.slice());
|
|
} else {
|
|
this.headerDatas = defaultHeader;
|
|
this.tableDatas = defaultDatas;
|
|
}
|
|
this.chartRendered = true;
|
|
}
|
|
|
|
// 生命周期 支持重写内容, 但格式需一致
|
|
shouldUpdate() {
|
|
const { properties } = this.props.model;
|
|
const { apiid } = properties;
|
|
const { normalData } = properties.dynamic || {};
|
|
const { dataPointArr, thingCodeArr, customApiDatas, enableTestDatas, testDatas } = normalData || {}
|
|
let totalAttrs = {}
|
|
if (normalData && normalData.dataPoint) {
|
|
if (window.isJSON(normalData.dataPoint)) {
|
|
const dataPointStrParsed = JSON.parse(normalData.dataPoint || '{}')
|
|
const { attrs } = dataPointStrParsed;
|
|
totalAttrs = attrs;
|
|
}
|
|
}
|
|
|
|
if (!dataPointArr || (dataPointArr && dataPointArr.length === 0)) {
|
|
this.renderEmpty(properties);
|
|
}
|
|
|
|
// 如果采用来自自定义数据源的数据
|
|
if (customApiDatas) {
|
|
this.headerDatas = customApiDatas.headerDatas || defaultHeader;
|
|
this.tableDatas = customApiDatas.tableDatas || defaultDatas;
|
|
this.chartRendered = true;
|
|
}
|
|
|
|
if (enableTestDatas && testDatas) {
|
|
const fn = new Function('', testDatas);
|
|
const ret = fn();
|
|
if (ret && ret.headerDatas && ret.tableDatas) {
|
|
this.headerDatas = ret.headerDatas;
|
|
this.tableDatas = ret.tableDatas;
|
|
this.chartRendered = true;
|
|
}
|
|
}
|
|
|
|
const propertiesBack = window._.cloneDeep(properties);
|
|
// 由于事件change 会给properties 增加一个 event 属性（见目录scadaDashboard/Diagram/useDynamicEventsHandler），会引发属性的改变，导致组件重渲染。
|
|
delete propertiesBack.event;
|
|
if (propertiesBack.dynamic.normalData) {
|
|
propertiesBack.dynamic.normalData.defaultValue = '';
|
|
const isSameProps = this.sameProps(propertiesBack);
|
|
if (isSameProps && this.chartRendered) {
|
|
return false
|
|
} else {
|
|
if (dataPointArr && apiid && !this.chartRendered) {
|
|
this.filterHistoryData(thingCodeArr, totalAttrs, dataPointArr, apiid, normalData.renderIntervalEnabled);
|
|
return true;
|
|
}
|
|
}
|
|
return true
|
|
}
|
|
}
|
|
|
|
updateHtml() {
|
|
this.setHtml(this.rootEl);
|
|
}
|
|
|
|
componentDidMount() {
|
|
const { properties } = this.props.model;
|
|
const { normalData } = properties.dynamic || {};
|
|
const { renderInterval, dataPointArr, thingCodeArr } = normalData || {};
|
|
let totalAttrs = {}
|
|
if (normalData && normalData.dataPoint) {
|
|
if (window.isJSON(normalData.dataPoint)) {
|
|
const dataPointStrParsed = JSON.parse(normalData.dataPoint || '{}')
|
|
const { attrs } = dataPointStrParsed;
|
|
totalAttrs = attrs;
|
|
}
|
|
}
|
|
|
|
if (this.shouldUpdate()) {
|
|
this.setHtml(this.rootEl);
|
|
}
|
|
|
|
let inters = parseInt(renderInterval || '300000')
|
|
if (normalData && !normalData.renderIntervalEnabled) {
|
|
inters = 1000
|
|
}
|
|
setInterval(() => {
|
|
if (window.totalHistoryDatas && window.totalHistoryDatas[properties.apiid]) {
|
|
this.filterHistoryData(thingCodeArr, totalAttrs, dataPointArr, properties.apiid, normalData.renderIntervalEnabled);
|
|
this.setHtml(this.rootEl);
|
|
}
|
|
}, inters)
|
|
// 防止拖动时候频繁渲染图表
|
|
this.updateHtmlDebounced = window._.debounce(this.updateHtml.bind(this), 500);
|
|
}
|
|
|
|
componentDidUpdate() {
|
|
if (this.shouldUpdate()) {
|
|
this.updateHtmlDebounced();
|
|
}
|
|
}
|
|
}
|
|
|
|
class CustomScrollTableModel extends HtmlResize.model {
|
|
initNodeData(data) {
|
|
// 自定义组件，需最开始重置一下text 。
|
|
data.text = {
|
|
value: "",
|
|
x: data.x,
|
|
y: data.y,
|
|
};
|
|
|
|
super.initNodeData(data);
|
|
const { properties } = this;
|
|
this.width = properties.width || 80;
|
|
this.height = properties.height || 35;
|
|
this.text.editable = false; // 不允许文本被编辑
|
|
}
|
|
|
|
setAttributes() {
|
|
// 自定义组件需重置 text
|
|
const { x, y, properties } = this;
|
|
const { textHorizontalMove = 0, textVerticalMove = 0 } = properties;
|
|
this.text = {
|
|
...this.text,
|
|
x: x + textHorizontalMove,
|
|
y: y + textVerticalMove,
|
|
value: "",
|
|
}
|
|
}
|
|
}
|
|
|
|
lf.register({
|
|
type: 'custom-scrolltable-node',
|
|
view: CustomScrollTableNode,
|
|
model: CustomScrollTableModel,
|
|
})`,css:`.bv-scroll-table {\r
|
|
position: relative;\r
|
|
width: 100%;\r
|
|
height: 100%;\r
|
|
color: #fff;\r
|
|
}\r
|
|
\r
|
|
.bv-scroll-table .text {\r
|
|
padding: 0 10px;\r
|
|
box-sizing: border-box;\r
|
|
white-space: nowrap;\r
|
|
overflow: hidden;\r
|
|
text-overflow: ellipsis;\r
|
|
}\r
|
|
\r
|
|
.bv-scroll-table .header {\r
|
|
display: flex;\r
|
|
flex-direction: row;\r
|
|
font-size: 15px;\r
|
|
}\r
|
|
\r
|
|
.bv-scroll-table .header .header-item {\r
|
|
padding: 0 10px;\r
|
|
box-sizing: border-box;\r
|
|
transition: all 0.3s;\r
|
|
}\r
|
|
\r
|
|
.bv-scroll-table .rows {\r
|
|
overflow: hidden;\r
|
|
}\r
|
|
\r
|
|
.bv-scroll-table .rows::-webkit-scrollbar {\r
|
|
width: 8px;\r
|
|
}\r
|
|
\r
|
|
/* Track */\r
|
|
.bv-scroll-table .rows::-webkit-scrollbar-track {\r
|
|
box-shadow: inset 0 0 1px grey;\r
|
|
border-radius: 4px;\r
|
|
}\r
|
|
\r
|
|
/* Handle */\r
|
|
.bv-scroll-table .rows::-webkit-scrollbar-thumb {\r
|
|
background: #006FFF;\r
|
|
border-radius: 4px;\r
|
|
}\r
|
|
\r
|
|
/* Handle on hover */\r
|
|
.bv-scroll-table .rows::-webkit-scrollbar-thumb:hover {\r
|
|
background: #0090FF;\r
|
|
}\r
|
|
\r
|
|
.bv-scroll-table .rows .row-item {\r
|
|
display: flex;\r
|
|
font-size: 14px;\r
|
|
transition: all 0.3s;\r
|
|
}\r
|
|
\r
|
|
.bv-scroll-table .rows .cell {\r
|
|
padding: 0 10px;\r
|
|
box-sizing: border-box;\r
|
|
white-space: nowrap;\r
|
|
overflow: hidden;\r
|
|
text-overflow: ellipsis;\r
|
|
}\r
|
|
\r
|
|
.bv-scroll-table .rows .index {\r
|
|
border-radius: 3px;\r
|
|
padding: 0 3px;\r
|
|
}\r
|
|
\r
|
|
.scroll-table-tooltip {\r
|
|
position: absolute;\r
|
|
display: inline-block;\r
|
|
background-color: rgba(0, 0, 0, 0.65);\r
|
|
color: #ffffff;\r
|
|
font-size: 12px;\r
|
|
padding: 5px 5px;\r
|
|
max-width: 120px;\r
|
|
max-height: 120px;\r
|
|
overflow-y: auto;\r
|
|
z-index: 8888;\r
|
|
transition: all 0.2s;\r
|
|
}`,fakeData:""},m={id:e,name:n,aliasName:t,image:a,imageType:o,groupName:r,groupType:l,isRemote:!1,isDefault:!0,sectionType:i,config:d,files:s};export{t as aliasName,d as config,m as default,s as files,r as groupName,l as groupType,e as id,a as image,o as imageType,c as isDefault,u as isRemote,n as name,i as sectionType};
|