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.
917 lines
49 KiB
917 lines
49 KiB
const e="f31282bd-dd67-4c07-9951-ac7270c5a896",n="scroll-rank-board",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="1704849974974" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18948" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M392.96 193.1264h502.784a43.9808 43.9808 0 1 1 0 87.9616h-502.784a43.9808 43.9808 0 0 1 0-87.9616z m0 274.944h502.784a43.9808 43.9808 0 1 1 0 87.9104h-502.784a43.9808 43.9808 0 1 1 0-87.9616z m0 274.8416h502.784a43.9808 43.9808 0 0 1 0 87.9616h-502.784a43.9808 43.9808 0 1 1 0-87.9616z" fill="#1296db" p-id="18949"></path><path d="M146.688 183.04l-28.8256 12.6976v-34.1504l39.424-22.8352h25.7536v163.1744h-36.352V183.04zM112.4864 540.1088q17.6128-15.872 30.8736-29.2864 13.312-13.4656 23.9104-28.672 10.6496-15.36 10.6496-26.624 0-11.6736-8.192-18.1248-8.0384-6.4512-21.0944-6.4512-9.3184 0-20.2752 3.84-10.9568 3.84-21.504 10.6496v-26.624q11.008-6.6048 24.9856-10.752 13.9264-4.2496 26.624-4.2496 25.7024 0 40.8064 12.8 15.0528 12.6464 15.0528 34.6112 0 15.616-10.496 33.4336-10.4448 17.7664-24.0128 31.6416-13.5168 13.8752-32.1024 30.464l-6.6048-4.5056h73.216v27.136H103.936v-21.7088l8.5504-7.5776zM156.16 839.3216q-24.4224 0-47.4624-10.3936v-31.232q10.24 7.3216 21.8624 10.9056 11.6736 3.584 23.296 3.584 13.0048 0 19.8656-5.632 7.0144-5.7344 7.0144-16.6912 0-12.3392-8.6528-18.6368-8.5504-6.3488-22.6304-6.3488h-23.2448v-23.9616h20.7872q13.7216 0 21.2992-6.144 7.6288-6.144 7.6288-17.0496 0-9.0624-6.912-14.1824-6.912-5.12-18.432-5.12-8.2432 0-18.432 2.2016-10.0864 2.2016-18.432 6.144v-25.344q9.216-4.9664 20.736-7.4752 11.4688-2.6624 22.784-2.6624 24.1664 0 38.1952 11.6224 14.08 11.6224 14.08 31.4368 0 12.4416-6.4512 22.272-6.3488 9.8304-18.2272 15.4624 14.1312 5.0176 21.76 15.36 7.68 10.2912 7.68 24.2176 0 13.9776-7.0656 24.7808-7.168 10.752-20.4288 16.7936-13.1584 6.0928-30.5664 6.0928z" fill="#1296db" p-id="18950"></path></svg>',o="svg",i="动态",l="数据展示",u=!1,c=!0,r="时序",s=`{"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":[{"body":[{"type":"input-color","label":"主题颜色","name":"color","id":"u:3c207c08dd64","format":"rgba","mode":"horizontal","inputClassName":"w-full"},{"type":"input-color","label":"文本颜色","name":"textColor","id":"u:c607e356c6f7","format":"rgba","mode":"horizontal","inputClassName":"w-full"},{"type":"input-number","label":"字体大小","name":"fontSize","keyboard":true,"id":"u:932c723f1ac1","step":1,"mode":"horizontal","inputClassName":"w-full"},{"type":"input-number","label":"排名行数","name":"rowNum","keyboard":true,"id":"u:2fbb0cbeb795","step":1,"mode":"horizontal","inputClassName":"w-full"},{"type":"switch","label":"显示排名","option":"","name":"showRank","falseValue":false,"trueValue":true,"id":"u:dbd6f4ee1e0d","value":false,"mode":"horizontal"},{"type":"select","label":"排名格式","name":"rankFormat","options":[{"label":"No.1","value":"No.1"},{"label":"1.","value":"1."},{"label":"1","value":"1"}],"id":"u:e2078e49e819","multiple":false,"mode":"horizontal","inputClassName":"w-full"},{"type":"input-color","label":"排名颜色","name":"numberColor","id":"u:48b05c789b9d","format":"rgba","mode":"horizontal","inputClassName":"w-full"},{"type":"switch","label":"开启轮播","option":"","name":"enableCarousel","falseValue":false,"trueValue":true,"id":"u:eedc6ca00bfb","value":false,"mode":"horizontal"},{"type":"input-number","label":"轮播间隔","name":"waitTime","keyboard":true,"id":"u:307c870fac70","step":1,"mode":"horizontal","inputClassName":"w-full","suffix":"ms","value":2000},{"type":"select","label":"轮播方式","name":"carousel","options":[{"label":"单个","value":"single"},{"label":"整页","value":"page"}],"id":"u:a7251aa24d25","multiple":false,"mode":"horizontal","inputClassName":"w-full"},{"type":"input-color","label":"名称颜色","name":"nameColor","id":"u:0746ff8cabf7","format":"rgba","mode":"horizontal","inputClassName":"w-full"},{"type":"input-color","label":"数值颜色","name":"valueColor","id":"u:3f2eeb0515a3","format":"rgba","mode":"horizontal","inputClassName":"w-full"},{"type":"input-text","label":"数值单位","name":"unit","id":"u:8678447aea6a","editorState":"default","mode":"horizontal"},{"type":"input-color","label":"单位颜色","name":"unitColor","id":"u:bb4eb7ae24d1","format":"rgba","mode":"horizontal","inputClassName":"w-full"},{"type":"switch","label":"显示百分比","option":"","name":"showRatio","falseValue":false,"trueValue":true,"id":"u:4437411a4ae4","value":false,"mode":"horizontal"},{"type":"input-number","label":"百分比宽度","name":"ratioSpace","keyboard":true,"id":"u:fe002ec7fc26","step":1,"mode":"horizontal","inputClassName":"w-full","suffix":"%"},{"type":"input-color","label":"百分比颜色","name":"ratioColor","id":"u:0b6da2a1973a","format":"rgba","mode":"horizontal","inputClassName":"w-full"},{"type":"switch","label":"内框分割","option":"","name":"divideInsideColumn","falseValue":false,"trueValue":true,"id":"u:fadd1a2835d5","value":false,"mode":"horizontal"},{"type":"input-number","label":"分割宽度","name":"dividerWidth","keyboard":true,"id":"u:a3018e66764b","step":1,"mode":"horizontal","inputClassName":"w-full","suffix":"px"},{"type":"input-color","label":"分割背景","name":"dividerBack","id":"u:b340c0e236b6","format":"rgba","mode":"horizontal","inputClassName":"w-full"},{"type":"input-number","label":"分割间距","name":"dividerSpace","keyboard":true,"id":"u:3ee82a7f812d","step":1,"mode":"horizontal","inputClassName":"w-full","suffix":"px"}],"id":"u:afc37bde0156","md":12}],"id":"u:235f153e5ad5","className":"m-b"},{"type":"editor","label":"自定义外框样式","name":"rankColumnStyle","id":"u:bc79720a78ad","language":"javascript","className":"text-left"},{"type":"editor","label":"自定义内框样式","name":"insideColumnStyle","id":"u:9bb1a181934a","language":"javascript","className":"text-left"},{"type":"fieldset","id":"u:2a93d8eee7a9","className":"","title":"值字体","collapsable":true,"body":[{"type":"container","id":"u:1606d0ad8360","body":[{"type":"select","id":"u:6f3470628b86","label":"字体类型","name":"fontFamily","mode":"horizontal","horizontal":{"leftFixed":"sm"},"size":"lg","options":[{},{"label":"宋体","value":"SimSun"},{"label":"微软雅黑","value":"Microsoft Yahei"},{"label":"庞门正道","value":"PangMenZhengDao"},{"label":"优设标题黑 ","value":"YouSheBiaoTiHei"},{"label":"阿里巴巴普惠体","value":"AlibabaPuHuiTi"},{"label":"苹方","value":"PingFang SC"},{"label":"Andale Mono","value":"andale mono,monospace"},{"label":"Arial","value":"arial,helvetica,sans-serif"},{"label":"Arial Black","value":"arial black,sans-serif"},{"label":"Book Antiqua","value":"book antiqua,palatino,serif"},{"label":"Comic Sans MS","value":"comic sans ms,sans-serif"},{"label":"Courier New","value":"courier new,courier,monospace"},{"label":"Georgia","value":"georgia,palatino,serif"},{"label":"Helvetica Neue","value":"Helvetica Neue"},{"label":"Helvetica","value":"helvetica,arial,sans-serif"},{"label":"Impact","value":"impact,sans-serif"},{"label":"Symbol","value":"symbol"},{"label":"Tahoma","value":"tahoma,arial,helvetica,sans-serif"},{"label":"Terminal","value":"terminal,monaco,monospace"},{"label":"Times New Roman","value":"times new roman,times,serif"},{"label":"Trebuchet MS","value":"trebuchet ms,geneva,sans-serif"},{"label":"Verdana","value":"verdana,geneva,sans-serif"}],"multiple":false,"className":"m-b","menuTpl":"<span style=font-family:\${value}>\${label}</span>","inputClassName":"w-full"},{"type":"input-text","label":"渐变字体","name":"gradientFontColor","id":"u:f9d40c238b7c","mode":"horizontal","clearable":true,"placeholder":"渐变字体颜色"},{"type":"checkboxes","id":"u:b34f4c274416","className":"custom-checkbox-style m-b","label":"文字样式","name":"fontStyle","options":[{"label":"fa-bold fa","value":"bold"},{"label":"fa-italic fa","value":"italic"},{"label":"fa-underline fa","value":"underline"},{"label":"fa fa-strikethrough","value":"line-through"}],"checkAll":false,"joinValues":true,"mode":"horizontal","horizontal":{"leftFixed":"sm"},"optionType":"button","menuTpl":"<span class='text-lg \${label}'></span>","inputClassName":"","multiple":true}],"style":{"position":"static","display":"block"},"wrapperBody":false}],"bodyClassName":"m-b"}],"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","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},{"type":"input-text","label":"默认值","placeholder":"[{ \\"val\\": 0.00 }]","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":"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":"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"}],"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"}],"id":"u:3eb6b9a42dcb","name":"dynamicService"}],"id":"u:043251c106af","className":"p"},{"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":""}`,d={jsPlugin:'[{"url":"./logicflow/core.umd.js","isModule":false,"disabled":true},{"url":"./logicflow/extensionLib/NodeResize.js","isModule":false,"disabled":true}]',json:`{
|
|
"nodes": [
|
|
{
|
|
"id": "709113b2-7076-4e9b-8406-e0b2ad30c9e5",
|
|
"type": "scroll-rank-board",
|
|
"x": 200,
|
|
"y": 200,
|
|
"text": {
|
|
"value": "",
|
|
"x": 200,
|
|
"y": 200
|
|
},
|
|
"properties": {
|
|
"id": "709113b2-7076-4e9b-8406-e0b2ad30c9e5",
|
|
"width": 500,
|
|
"height": 200,
|
|
"x": 200,
|
|
"y": 200,
|
|
"rotation": 0,
|
|
"opacity": 1,
|
|
"showRank": true,
|
|
"enableCarousel": false,
|
|
"waitTime": 2000,
|
|
"showRatio": true,
|
|
"divideInsideColumn": true,
|
|
"fontSize": 12,
|
|
"showDefaultValue": false,
|
|
"showUnit": false,
|
|
"valueColor": "rgba(8, 80, 164, 1)",
|
|
"nodeAlias": "滚动排名",
|
|
"rankColumnStyle": "return {\\r\\n borderBottom: '1px solid rgba(74, 144, 226, 1)'\\r\\n}",
|
|
"color": "rgba(16, 120, 242, 1)",
|
|
"insideColumnStyle": "",
|
|
"textColor": "rgba(8, 80, 164, 1)",
|
|
"carousel": "single",
|
|
"unit": "kWh",
|
|
"rankFormat": "No.1",
|
|
"unitColor": "rgba(8, 80, 164, 1)",
|
|
"ratioColor": "rgba(8, 80, 164, 1)",
|
|
"ratioSpace": 70,
|
|
"nameColor": "rgba(8, 80, 164, 1)",
|
|
"dividerWidth": 2,
|
|
"dividerSpace": 4,
|
|
"dividerBack": "rgba(255, 255, 255, 1)",
|
|
"numberColor": "rgba(8, 80, 164, 1)",
|
|
"rowNum": 5,
|
|
"fontFamily": "Microsoft Yahei",
|
|
"fontColor": "",
|
|
"fontStyle": "",
|
|
"gradientFontColor": "",
|
|
"dynamic": {
|
|
"normalData": {
|
|
"dataPoint": "",
|
|
"compareType": "",
|
|
"conditionVariables": [],
|
|
"defaultValue": "",
|
|
"unit": "",
|
|
"customDatasource": true,
|
|
"dataFilterFn": "// datas 数据处理\\n// .....\\nconst defaultDatas = [\\n {\\n name: '周口',\\n value: 55123,\\n },\\n {\\n name: '南阳',\\n value: 12022,\\n },\\n {\\n name: '西峡',\\n value: 78932\\n },\\n {\\n name: '驻马店',\\n value: 63411\\n },\\n {\\n name: '新乡',\\n value: 44231\\n }\\n]\\n\\nreturn defaultDatas"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}`,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 ScrollRankBoard = {
|
|
template: \`
|
|
<div ref="domRef" class="dv-scroll-ranking-board" :style="{color: textColor}">
|
|
<div
|
|
v-for="(item, i) in rows"
|
|
:key="item.toString() + item.scroll"
|
|
class="row-item"
|
|
:style="getRowItemStyle(heights, i)"
|
|
>
|
|
<div class="ranking-info" :style="{fontSize: fontSize}">
|
|
<div v-if="showRank" class="rank" :style="{color: numberColor || color }">
|
|
{{ getRanking(item, rankFormat) }}
|
|
</div>
|
|
<div class="info-name" v-html="item.name" :style="{color: nameColor || textColor }"/>
|
|
<div v-if="showRatio" :style="getRatioStyle(ratioColor, ratioSpace)">{{item.percent.toFixed(2) + '%'}}</div>
|
|
<div class="ranking-value" v-html="getValueUnit(mergedConfig, item, valueColor, unitColor, fontFamily, fontStyle, gradientFontColor)"></div>
|
|
</div>
|
|
|
|
<div class="ranking-column" :style="getRankingColumnStyle(rankColumnStyle)">
|
|
<div
|
|
ref="insideColRefs"
|
|
class="inside-column"
|
|
:style="getInsideColumnStyle(item, color, insideColumnStyle)"
|
|
>
|
|
<div v-if="divideInsideColumn" class="dividerColumn" v-html="dividerColumnContent(containerWidth, containerHeight, item, i, dividerWidth, dividerSpace, dividerBack)"></div>
|
|
<div class="shine" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
\`,
|
|
name: 'ScrollRankingBoard',
|
|
props: {
|
|
config: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
containerWidth: {
|
|
type: Number,
|
|
default: 500,
|
|
},
|
|
containerHeight: {
|
|
type: Number,
|
|
default: 200,
|
|
},
|
|
rankColumnStyle: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
insideColumnStyle: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
enableCarousel: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
showRank: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
showRatio: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
nameColor: {
|
|
type: String,
|
|
default: 'rgba(8, 80, 164, 1)',
|
|
},
|
|
valueColor: {
|
|
type: String,
|
|
default: 'rgba(8, 80, 164, 1)',
|
|
},
|
|
unitColor: {
|
|
type: String,
|
|
default: 'rgba(8, 80, 164, 1)',
|
|
},
|
|
ratioColor: {
|
|
type: String,
|
|
default: 'rgba(8, 80, 164, 1)',
|
|
},
|
|
numberColor: {
|
|
type: String,
|
|
default: 'rgba(8, 80, 164, 1)',
|
|
},
|
|
rankFormat: {
|
|
type: String,
|
|
default: 'No.1',
|
|
},
|
|
ratioSpace: {
|
|
type: Number,
|
|
default: 70
|
|
},
|
|
divideInsideColumn: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
dividerWidth: {
|
|
type: Number,
|
|
default: 2
|
|
},
|
|
dividerSpace: {
|
|
type: Number,
|
|
default: 2
|
|
},
|
|
dividerBack: {
|
|
type: String,
|
|
default: '#fff',
|
|
},
|
|
fontFamily: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
fontColor: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
fontStyle: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
gradientFontColor: {
|
|
type: String,
|
|
default: '',
|
|
}
|
|
},
|
|
computed: {
|
|
getRowItemStyle: () => (heights, i) => {
|
|
return {
|
|
height: heights[i] + 'px',
|
|
}
|
|
},
|
|
getRankingColumnStyle: () => (rankColumnStyle) => {
|
|
const fn = new Function('', rankColumnStyle);
|
|
let styles = {};
|
|
const styleObj = fn();
|
|
if (styleObj && typeof styleObj === 'object') {
|
|
styles = {
|
|
...styleObj
|
|
}
|
|
}
|
|
return {
|
|
...styles
|
|
}
|
|
},
|
|
getInsideColumnStyle: () => (item, color, insideColumnStyle) => {
|
|
const fn = new Function('', insideColumnStyle);
|
|
let styles = {};
|
|
const styleObj = fn();
|
|
if (styleObj && typeof styleObj === 'object') {
|
|
styles = {
|
|
...styleObj
|
|
}
|
|
}
|
|
return {
|
|
width: item.percent + '%',
|
|
background: color,
|
|
...styles
|
|
}
|
|
},
|
|
getValueUnit: () => (mergedConfig, item, valueColor, unitColor, fontFamily, fontStyle, gradientFontColor) => {
|
|
const style = {};
|
|
if(fontStyle) {
|
|
if (fontStyle.includes('bold')) {
|
|
style.fontWeight = 'bold';
|
|
}
|
|
if(fontStyle.includes('italic')) {
|
|
style.fontStyle = 'italic'
|
|
}
|
|
if (fontStyle.includes('underline,line-through')) {
|
|
style.textDecoration = 'underline line-through'
|
|
} else if (fontStyle.includes('line-through,underline')) {
|
|
style.textDecoration = 'line-through underline'
|
|
} else if (fontStyle.includes('underline')) {
|
|
style.textDecoration = 'underline'
|
|
} else if (fontStyle.includes('line-through')) {
|
|
style.textDecoration = 'line-through'
|
|
}
|
|
}
|
|
if (mergedConfig.valueFormatter) {
|
|
return mergedConfig.valueFormatter(item, valueColor, unitColor)
|
|
} else {
|
|
return \`<span style='color: \${gradientFontColor || valueColor}; font-family: \${fontFamily};font-weight: \${style.fontWeight}; font-style: \${style.fontStyle};text-decoration: \${style.textDecoration}'>\${item.value}</span><span style='color: \${unitColor}; margin-left: 3px'>\${mergedConfig.unit}</span>\`
|
|
}
|
|
},
|
|
getRanking: () => (item, rankFormat) => {
|
|
if (rankFormat === 'No.1') {
|
|
return \`No.\${item.ranking}\`
|
|
} else if (rankFormat === '1.') {
|
|
return \`\${item.ranking}.\`;
|
|
} else if (rankFormat === '1.') {
|
|
return \`\${item.ranking}\`
|
|
}
|
|
},
|
|
getRatioStyle: () => (ratioColor, ratioSpace) => {
|
|
return {
|
|
color: ratioColor,
|
|
flex: \`0 0 \${ratioSpace}%\`,
|
|
textAlign: 'left'
|
|
}
|
|
},
|
|
dividerColumnContent: () => (width, height, item, ri, dividerWidth, dividerSpace, dividerBack) => {
|
|
const totalDividers = Math.floor(width * (item.percent/100) / (dividerWidth + dividerSpace));
|
|
const arr = new Array(totalDividers).fill('');
|
|
let strs = '';
|
|
arr.forEach((_, index) => {
|
|
const span = \`<span style='float: left; display: inline-block; width: \${dividerWidth}px; height: 100%; background: \${dividerBack}; margin-left: \${dividerSpace}px'></span>\`;
|
|
strs += span;
|
|
})
|
|
return strs;
|
|
}
|
|
},
|
|
emits: ['mouseover', 'click'],
|
|
setup(props, { emit }) {
|
|
const { onMounted, onUnmounted, watch, reactive, ref, toRefs, computed } = Vue;
|
|
|
|
const insideColRefs = ref([]);
|
|
const dividerColumnContents = ref([]);
|
|
|
|
function calcData() {
|
|
stopAnimation()
|
|
mergeConfig()
|
|
calcRowsData()
|
|
calcHeights()
|
|
animation(true)
|
|
}
|
|
|
|
|
|
const { domRef, width, height, resize } = useAutoResize(props, calcData)
|
|
|
|
const defaultConfig = ref({
|
|
/**
|
|
* @description Board data
|
|
* @type {Array<Object>}
|
|
* @default data = []
|
|
*/
|
|
data: [],
|
|
/**
|
|
* @description Row num
|
|
* @type {Number}
|
|
* @default rowNum = 5
|
|
*/
|
|
rowNum: 5,
|
|
/**
|
|
* @description Scroll wait time
|
|
* @type {Number}
|
|
* @default waitTime = 2000
|
|
*/
|
|
waitTime: 2000,
|
|
/**
|
|
* @description Carousel type
|
|
* @type {String}
|
|
* @default carousel = 'single'
|
|
* @example carousel = 'single' | 'page'
|
|
*/
|
|
carousel: 'single',
|
|
/**
|
|
* @description Value unit
|
|
* @type {String}
|
|
* @default unit = ''
|
|
* @example unit = 'ton'
|
|
*/
|
|
unit: '',
|
|
/**
|
|
* @description Auto sort by value
|
|
* @type {Boolean}
|
|
* @default sort = true
|
|
*/
|
|
sort: true,
|
|
/**
|
|
* @description Value formatter
|
|
* @type {Function}
|
|
* @default valueFormatter = null
|
|
*/
|
|
valueFormatter: null,
|
|
/**
|
|
* @description Text color
|
|
* @type {String}
|
|
* @default textColor = '#fff'
|
|
*/
|
|
textColor: '#fff',
|
|
/**
|
|
* @description Main theme color
|
|
* @type {String}
|
|
* @default color = '#1370fb'
|
|
*/
|
|
color: '#1370fb',
|
|
/**
|
|
* @description Font size
|
|
* @type {Number}
|
|
* @default fontSize = 13
|
|
*/
|
|
fontSize: 13,
|
|
})
|
|
|
|
const status = reactive({
|
|
mergedConfig: null,
|
|
|
|
rowsData: [],
|
|
|
|
rows: [],
|
|
|
|
heights: [],
|
|
|
|
avgHeight: 0,
|
|
|
|
animationIndex: 0,
|
|
|
|
animationHandler: '',
|
|
|
|
updater: 0,
|
|
})
|
|
|
|
watch(() => props.config, () => {
|
|
stopAnimation()
|
|
|
|
calcData()
|
|
}, {
|
|
deep: true,
|
|
})
|
|
|
|
const textColor = computed(() => {
|
|
return props.config.textColor ? props.config.textColor : defaultConfig.value.textColor
|
|
})
|
|
|
|
const color = computed(() => {
|
|
return props.config.color ? props.config.color : defaultConfig.value.color
|
|
})
|
|
|
|
const fontSize = computed(() => {
|
|
return \`\${props.config.fontSize ? props.config.fontSize : defaultConfig.value.fontSize}px\`
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
stopAnimation()
|
|
})
|
|
|
|
|
|
function onResize() {
|
|
if (!status.mergedConfig)
|
|
return
|
|
|
|
calcHeights(true)
|
|
}
|
|
|
|
function mergeConfig() {
|
|
status.mergedConfig = deepMerge(deepCopy(defaultConfig.value, true), props.config || {})
|
|
}
|
|
|
|
function calcRowsData() {
|
|
let { data } = status.mergedConfig
|
|
const { rowNum, sort } = status.mergedConfig
|
|
|
|
sort && data.sort(({ value: a }, { value: b }) => {
|
|
if (a > b)
|
|
return -1
|
|
else if (a < b)
|
|
return 1
|
|
else
|
|
return 0
|
|
})
|
|
|
|
const value = data.map(({ value }) => value)
|
|
|
|
const min = Math.min(...value) || 0
|
|
|
|
// abs of min
|
|
const minAbs = Math.abs(min)
|
|
|
|
const max = Math.max(...value) || 0
|
|
|
|
// abs of max
|
|
const maxAbs = Math.abs(max)
|
|
|
|
const total = max + minAbs
|
|
|
|
data = data.map((row, i) => ({ ...row, ranking: i + 1, percent: (row.value + minAbs) / total * 100 }))
|
|
|
|
const rowLength = data.length
|
|
|
|
if (rowLength > rowNum && rowLength < 2 * rowNum)
|
|
data = [...data, ...data]
|
|
|
|
data = data.map((d, i) => ({ ...d, scroll: i }))
|
|
|
|
status.rowsData = data
|
|
status.rows = data
|
|
}
|
|
|
|
function calcHeights(onresize = false) {
|
|
const { rowNum, data } = status.mergedConfig
|
|
|
|
const avgHeight = height.value / rowNum
|
|
|
|
status.avgHeight = avgHeight
|
|
|
|
if (!onresize)
|
|
status.heights = new Array(data.length).fill(avgHeight)
|
|
}
|
|
|
|
const isSingle = computed(() => status.mergedConfig.carousel === 'single')
|
|
|
|
async function animation(start = false) {
|
|
if (!props.enableCarousel) return;
|
|
const { waitTime, rowNum } = status.mergedConfig
|
|
|
|
const rowLength = status.rowsData.length
|
|
if (rowNum >= rowLength) return
|
|
const { updater } = status
|
|
if (start) {
|
|
await new Promise(resolve => setTimeout(resolve, waitTime))
|
|
if (updater !== status.updater)
|
|
return
|
|
}
|
|
|
|
const animationNum = isSingle.value ? 1 : rowNum
|
|
|
|
const rows = status.rowsData.slice(status.animationIndex)
|
|
rows.push(...status.rowsData.slice(0, status.animationIndex))
|
|
|
|
status.rows = rows.slice(0, isSingle.value ? rowNum + 1 : rowNum * 2)
|
|
status.heights = new Array(status.rows.length).fill(status.avgHeight)
|
|
|
|
await new Promise(resolve => setTimeout(resolve, 300))
|
|
if (updater !== status.updater)
|
|
return
|
|
|
|
status.heights.splice(0, animationNum, ...new Array(animationNum).fill(0))
|
|
|
|
status.animationIndex += animationNum
|
|
|
|
const back = status.animationIndex - rowLength
|
|
if (back >= 0)
|
|
status.animationIndex = back
|
|
|
|
status.animationIndex += animationNum
|
|
status.animationHandler = setTimeout(animation, waitTime - 300)
|
|
}
|
|
|
|
function stopAnimation() {
|
|
status.updater = (status.updater + 1) % 999999
|
|
|
|
if (!status.animationHandler)
|
|
return
|
|
|
|
clearTimeout(status.animationHandler)
|
|
}
|
|
|
|
watch(() => props.config, () => {
|
|
stopAnimation()
|
|
status.animationIndex = 0
|
|
calcData()
|
|
}, { deep: true })
|
|
|
|
onUnmounted(() => {
|
|
stopAnimation()
|
|
})
|
|
|
|
return {
|
|
defaultConfig,
|
|
...toRefs(status),
|
|
domRef,
|
|
color,
|
|
textColor,
|
|
fontSize,
|
|
insideColRefs,
|
|
}
|
|
}
|
|
}
|
|
|
|
const defaultDatas = [
|
|
{
|
|
name: '周口',
|
|
value: 55123,
|
|
},
|
|
{
|
|
name: '南阳',
|
|
value: 12022,
|
|
},
|
|
{
|
|
name: '西峡',
|
|
value: 78932
|
|
},
|
|
{
|
|
name: '驻马店',
|
|
value: 63411
|
|
},
|
|
{
|
|
name: '新乡',
|
|
value: 44231
|
|
},
|
|
{
|
|
name: '信阳',
|
|
value: 44531
|
|
},
|
|
{
|
|
name: '郑州',
|
|
value: 42531
|
|
}
|
|
]
|
|
|
|
class ScrollRankBoardNode extends HtmlResize.view {
|
|
tableDatas = defaultDatas
|
|
instance = null
|
|
|
|
setHtml(rootEl) {
|
|
if (!rootEl) return;
|
|
const { graphModel, model } = this.props;
|
|
const { properties, width, height, } = this.props.model;
|
|
const { normalData } = properties.dynamic || {};
|
|
const { customApiDatas } = normalData || {};
|
|
|
|
const {
|
|
rowNum, waitTime = 2000, color, textColor, fontSize, rankColumnStyle, insideColumnStyle,
|
|
carousel, unit, enableCarousel, showRank, nameColor, valueColor, unitColor, showRatio, ratioColor,
|
|
rankFormat, ratioSpace, divideInsideColumn, dividerWidth, dividerSpace, dividerBack, numberColor,
|
|
fontFamily, fontColor, fontStyle, gradientFontColor} = properties;
|
|
|
|
// 如果采用来自自定义数据源的数据
|
|
if (customApiDatas) {
|
|
this.tableDatas = customApiDatas || this.tableDatas;
|
|
}
|
|
|
|
if (this.instance) {
|
|
// 实时数据不能推送一次就创建一次图表，可以在原有实例基础之上更改数据。
|
|
Object.assign(this.instance.component.props, {
|
|
name: properties.nodeAlias,
|
|
config: {
|
|
data: this.tableDatas,
|
|
rowNum: rowNum,
|
|
waitTime: parseInt(waitTime),
|
|
carousel: carousel,
|
|
unit: unit,
|
|
sort: true,
|
|
valueFormatter: null,
|
|
color, textColor, fontSize,
|
|
},
|
|
containerWidth: width,
|
|
containerHeight: height,
|
|
rankColumnStyle, insideColumnStyle,
|
|
enableCarousel, showRank, fontFamily, fontColor, fontStyle, gradientFontColor,
|
|
nameColor, valueColor, unitColor, showRatio, ratioColor, numberColor,
|
|
rankFormat, ratioSpace, divideInsideColumn, dividerWidth, dividerSpace, dividerBack
|
|
})
|
|
return
|
|
}
|
|
const el = document.createElement('div');
|
|
rootEl.innerHTML = '';
|
|
el.style.height = '100%';
|
|
const instance = createVNode(ScrollRankBoard, {
|
|
name: properties.nodeAlias,
|
|
config: {
|
|
data: this.tableDatas,
|
|
rowNum: rowNum,
|
|
waitTime: parseInt(waitTime),
|
|
carousel: carousel,
|
|
unit: unit,
|
|
sort: true,
|
|
valueFormatter: null,
|
|
color, textColor, fontSize,
|
|
},
|
|
containerWidth: width,
|
|
containerHeight: height,
|
|
rankColumnStyle, insideColumnStyle,
|
|
enableCarousel, showRank, fontFamily, fontColor, fontStyle, gradientFontColor,
|
|
nameColor, valueColor, unitColor, showRatio, ratioColor, numberColor,
|
|
rankFormat, ratioSpace, divideInsideColumn, dividerWidth, dividerSpace, dividerBack
|
|
})
|
|
instance.appContext = app._context
|
|
render(instance, el)
|
|
rootEl.appendChild(el);
|
|
this.instance = instance;
|
|
}
|
|
}
|
|
|
|
class ScrollRankBoardModel 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: 'scroll-rank-board',
|
|
view: ScrollRankBoardNode,
|
|
model: ScrollRankBoardModel,
|
|
})`,css:`.dv-scroll-ranking-board {\r
|
|
width: 100%;\r
|
|
height: 100%;\r
|
|
overflow: hidden;\r
|
|
}\r
|
|
\r
|
|
.dv-scroll-ranking-board .row-item {\r
|
|
transition: all 0.3s;\r
|
|
display: flex;\r
|
|
flex-direction: column;\r
|
|
justify-content: center;\r
|
|
overflow: hidden;\r
|
|
}\r
|
|
\r
|
|
.dv-scroll-ranking-board .ranking-info {\r
|
|
display: flex;\r
|
|
width: 100%;\r
|
|
}\r
|
|
.dv-scroll-ranking-board .ranking-info .rank {\r
|
|
width: 40px;\r
|
|
}\r
|
|
\r
|
|
.dv-scroll-ranking-board .ranking-info .info-name {\r
|
|
flex: 1;\r
|
|
text-align: left;\r
|
|
}\r
|
|
\r
|
|
.dv-scroll-ranking-board .ranking-column {\r
|
|
margin-top: 5px;\r
|
|
}\r
|
|
\r
|
|
.dv-scroll-ranking-board .ranking-column .inside-column {\r
|
|
position: relative;\r
|
|
height: 6px;\r
|
|
margin-bottom: 2px;\r
|
|
border-radius: 1px;\r
|
|
overflow: hidden;\r
|
|
}\r
|
|
.dv-scroll-ranking-board .ranking-column .inside-column .dividerColumn {\r
|
|
position: absolute;\r
|
|
top: 0;\r
|
|
right: 0;\r
|
|
left: 0;\r
|
|
bottom: 0;\r
|
|
z-index: 10;\r
|
|
overflow: hidden;\r
|
|
}\r
|
|
\r
|
|
.dv-scroll-ranking-board .ranking-column .shine {\r
|
|
position: absolute;\r
|
|
left: 0%;\r
|
|
top: 2px;\r
|
|
height: 2px;\r
|
|
width: 50px;\r
|
|
transform: translateX(-100%);\r
|
|
background: radial-gradient(rgb(40, 248, 255) 5%, transparent 80%);\r
|
|
animation: shine 3s ease-in-out infinite alternate;\r
|
|
}\r
|
|
\r
|
|
@keyframes shine {\r
|
|
80% {\r
|
|
left: 0%;\r
|
|
transform: translateX(-100%);\r
|
|
}\r
|
|
\r
|
|
100% {\r
|
|
left: 100%;\r
|
|
transform: translateX(0%);\r
|
|
}\r
|
|
}`,fakeData:""},m={id:e,name:n,aliasName:t,image:a,imageType:o,groupName:i,groupType:l,isRemote:!1,isDefault:!0,sectionType:r,config:s,files:d};export{t as aliasName,s as config,m as default,d as files,i as groupName,l as groupType,e as id,a as image,o as imageType,c as isDefault,u as isRemote,n as name,r as sectionType};
|