const e="aaa9be68-db1f-4bd3-8812-2ba0fa7b2cf3",t="custom-3d-piechart",n="3D立体饼图",a='',l="svg",i="动态",o="图表组件",c=!1,p=!0,s="时间",r=`{"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":[{"body":[{"type":"input-color","label":"图例颜色","name":"legendFontColor","id":"u:e8cb1c5f2784","format":"hex","mode":"horizontal","inputClassName":"w-full myColorPick"}],"id":"u:0eb487d20f40"}],"id":"u:d97854cb6bb7","className":"m-b"},{"type":"input-color","label":"标签颜色","name":"labelTextColor","id":"u:45de3deb2287","body":[{"type":"input-color","label":"标签字体颜色","name":"labelTextColor","id":"u:e56831dd4754","format":"hex","mode":"horizontal"}],"format":"hex","mode":"horizontal","inputClassName":"w-full"},{"type":"fieldset","title":"数据项颜色","collapsable":true,"body":[{"type":"combo","label":"","name":"itemColors","id":"u:ecbe4c39bbde","multiple":true,"addable":true,"removable":true,"removableMode":"icon","addBtn":{"label":"新增","icon":"fa fa-plus","level":"primary","size":"sm","id":"u:4eaf7bbd0de4"},"items":[{"type":"input-color","label":"","name":"color","id":"u:25d0f4cfde50","format":"rgba"}],"strictMode":true,"syncFields":[],"body":[{"type":"input-color","label":"颜色","name":"color","id":"u:d03cefb8aa55"},{"type":"input-color","label":"颜色","name":"color","id":"u:686fa9789255"},{"type":"input-color","label":"颜色","name":"color","id":"u:7f8d8a0cfc4a"}]}],"id":"u:fffdde5fd34d","bodyClassName":"m-b"},{"type":"fieldset","title":"提示框","collapsable":true,"body":[{"type":"input-color","label":"边框颜色","name":"tooltip.borderColor","keyboard":true,"id":"u:8078d2f4c631","step":1,"mode":"horizontal","inputClassName":"w-full","format":"rgba"},{"type":"input-color","label":"背景颜色","name":"tooltip.backgroundColor","keyboard":true,"id":"u:bbba51c172d3","step":1,"mode":"horizontal","inputClassName":"w-full","format":"rgba"},{"type":"input-color","label":"字体颜色","name":"tooltip.style.color","keyboard":true,"id":"u:b117c60c1199","step":1,"mode":"horizontal","inputClassName":"w-full","format":"rgba"},{"type":"input-number","label":"边框宽度","name":"tooltip.borderWidth","keyboard":true,"id":"u:f7e4e4c8f74f","step":1,"mode":"horizontal","inputClassName":"w-full"},{"type":"input-number","label":"边框圆角","name":"tooltip.borderRadius","keyboard":true,"id":"u:9aac2d800b91","step":1,"mode":"horizontal","inputClassName":"w-full"}],"id":"u:63a4dc69bb8e","bodyClassName":"m-b"},{"type":"fieldset","title":"代码配置","collapsable":true,"body":[{"type":"editor","label":"function (option, datas) {","name":"codeConfig","id":"u:689625dc5d7d","language":"javascript","value":"return option","labelClassName":"text-left","inputClassName":"text-left","className":"m-b-xs"},{"type":"tpl","tpl":"}","inline":true,"wrapperComponent":"","id":"u:f533d43d9ee4","className":"m-t-xs p-t-xs"}],"id":"u:cf0267c9669d","headingClassName":""}],"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":"默认值","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":"radios","label":"数据展示","name":"dataShowTypes","options":[{"label":"单个物单个属性","value":"oneThingOneAttr"},{"label":"单个物多个属性","value":"oneThingManyAttr"},{"label":"多个物多个属性","value":"manyThingManyAttr"},{"label":"多个物一个属性","value":"manyThingOneAttr"}],"id":"u:b8aeecd9e52f","mode":"horizontal","inputClassName":"w-full","itemClassName":"w-full","labelRemark":{"icon":"fa fa-question-circle","trigger":["hover"],"className":"Remark--warning","placement":"top","content":"请确保数据点的选择与数据展示方式一致"},"onEvent":{"change":{"actions":[{"componentId":"u:0fc48eacd2a4","actionType":"setValue","args":{"value":""}}]}}},{"type":"select","label":"图例名称展示","name":"legendNameType","options":[{"label":"物名称","value":"thingName","disabledOn":"this.dataShowTypes === 'oneThingManyAttr' || this.dataShowTypes === 'manyThingManyAttr' "},{"label":"物编码","value":"thingCode","disabledOn":"this.dataShowTypes === 'oneThingManyAttr' || this.dataShowTypes === 'manyThingManyAttr'"},{"label":"属性名称","value":"attrName","disabledOn":"this.dataShowTypes === 'manyThingManyAttr' || this.dataShowTypes === 'manyThingOneAttr'"},{"label":"属性编码","value":"attrCode","disabledOn":"this.dataShowTypes === 'manyThingManyAttr' || this.dataShowTypes === 'manyThingOneAttr'"},{"label":"物名称 + 属性名称","value":"thingNameAttrName"},{"label":"物编码 + 属性编码","value":"thingCodeAttrCode"}],"id":"u:0fc48eacd2a4","multiple":false,"mode":"horizontal","inputClassName":"w-full","value":"attrName"}],"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-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":""}`,d={jsPlugin:'[{"url":"./logicflow/core.umd.js","isModule":false,"disabled":true},{"url":"./logicflow/extensionLib/NodeResize.js","isModule":false,"disabled":true},{"url":"./plugins/highcharts/highcharts.js","isModule":false,"disabled":false},{"url":"./plugins/highcharts/highcharts-3d.js","isModule":false,"disabled":false},{"url":"./plugins/highcharts/exporting.js","isModule":false,"disabled":false}]',json:`{ "nodes": [ { "id": "6f18dc4b-ebff-47b9-89e3-4ff1d967b64f", "type": "custom-3d-piechart", "x": 200, "y": 200, "text": { "value": "", "x": 200, "y": 200 }, "properties": { "id": "6f18dc4b-ebff-47b9-89e3-4ff1d967b64f", "width": 350, "height": 200, "x": 200, "y": 200, "rotation": 0, "opacity": 1, "codeConfig": "return option;", "nodeAlias": "3D立体饼图", "showDefaultValue": false, "showUnit": false, "valueColor": "rgba(245, 166, 35, 1)", "fontSize": 12, "legendFontColor": "#50e3c2", "color": "#50e3c2", "labelTextColor": "#50e3c2", "itemColors": [ { "color": "#00B5EC" }, { "color": "#F39800" }, { "color": "#8FC31F" }, { "color": "#F29C9F" }, { "color": "#009944" }, { "color": "#8A8000" } ], "tooltip": { "borderColor": "rgba(0, 141, 255, 0.6)", "backgroundColor": "rgba(70,94,144,0.6)", "style": { "color": "rgba(255, 255, 255, 1)" }, "borderWidth": 1, "borderRadius": 6 }, "dynamic": { "normalData": { "dataPoint": "", "compareType": "", "conditionVariables": [], "defaultValue": "", "unit": "", "renderIntervalEnabled": true, "legendNameType": "attrName", "dataShowTypes": "oneThingManyAttr" } } } } ] }`,javascript:`const { createApp, createVNode, render } = Vue; const app = createApp({}) const timeArr = new Array(24).fill(''); const totals = []; // timeArr.forEach((i, index) => { const t = window.dayjs().hour(index).valueOf(); totals.push({ val: Math.random(1000) * 100, ts: t, attrKey: "A29" }) }); const defaultSocketValue = totals; let myChart = null; // 图例格式化 const assembleLegend = (api, thingKey, attrkey, dataShowTypes, legendNameType, datas) => { if (api) { const infos = window.totalDeviceInfos[api]; const thing = infos[datas[0].thingCode]; const thingName = thing.entityName; const attrName = thing.attrs[attrkey].name; if (dataShowTypes.value === 'oneThingOneAttr') { switch (legendNameType.value) { case "thingName": return thing.entityName; case "thingCode": return thingKey; case "attrName": return attrName; case "attrCode": return attrkey; case "thingNameAttrName": return thingName + '-' + attrName; case "thingCodeAttrCode": return thingKey + '-' + attrkey; } } else if (dataShowTypes.value === 'oneThingManyAttr') { switch (legendNameType.value) { case "attrName": return thing.attrs[attrkey].name; case "attrCode": return attrkey; case "thingNameAttrName": return thingName + '-' + attrName; case "thingCodeAttrCode": return thingKey + '-' + thingKey } } else if (dataShowTypes.value === 'manyThingManyAttr') { switch (legendNameType.value) { case "thingNameAttrName": const attrName = thing.attrs[attrKey].name return thingName + '-' + attrName; case "thingCodeAttrCode": return thingKey + '-' + thingKey; } } else if (dataShowTypes.value === 'manyThingOneAttr') { switch (legendNameType.value) { case "thingName": return thingName; case "thingCode": return thingKey; case "thingNameAttrName": const attrName = thing.attrs[attrKey].name return thingName + '-' + attrName; case "thingCodeAttrCode": return thingKey + '-' + thingKey; } } } else { return attrkey; } } const PieChart3D = { template: '
', props: { lineId: { type: String, default: '' }, historyDatas: { type: Array, default: () => [] }, width: { type: Number, default: 350 }, height: { type: Number, default: 150 }, codeConfig: { type: String, default: '' }, legendFontColor: { type: String, default: '' }, labelTextColor: { type: String, default: '' }, dataShowTypes: { type: String, default: 'oneThingManyAttr', }, legendNameType: { type: String, default: 'attrName', }, apiid: { type: String, default: '', }, itemColors: { type: Array, default: () => [ { "color": "#00B5EC" }, { "color": "#F39800" }, { "color": "#8FC31F" }, { "color": "#F29C9F" }, { "color": "#009944" }, { "color": "#8A8000" } ] }, tooltip: { type: Object, default: () => ({ backgroundColor: "rgba(70,94,144,0.6)", borderColor: "rgba(0, 141, 255, 0.6)", borderRadius: 6, borderWidth: 1, style: { color: "#fff" } }) } }, computed: { getStyle() { return { width: \`\${this.width}px\`, height: \`\${this.height}px\` } } }, setup(props) { const { onMounted, nextTick, toRefs, watch } = Vue; const { historyDatas, codeConfig, apiid, dataShowTypes, legendNameType, tooltip, itemColors } = toRefs(props); const initChart = (datas) => { // 基于准备好的dom,初始化echarts实例 const dom = document.getElementById(props.lineId); if (dom) { if (myChart) { myChart.destroy(); myChart = null; } if (datas) { let totalDatas = []; let totalAmount = 0 if (datas.length > 0) { const thingGrouped = window._.groupBy(datas, 'thingCode'); for (const thingKey in thingGrouped) { const attrGrouped = window._.groupBy(thingGrouped[thingKey], 'attrKey') for (const key in attrGrouped) { let serieData = attrGrouped[key]; const legendKey = assembleLegend(apiid.value, thingKey, key, dataShowTypes, legendNameType, serieData); totalDatas.push([legendKey, serieData[0].val]); totalAmount += serieData[0].val; } } totalDatas = totalDatas.map(i => { i[1] = Number((i[1] / totalAmount * 100).toFixed(2)); return i; }) } else { totalDatas = [ ['Firefox', 45.0], ['IE', 26.8], { name: 'Chrome', y: 12.8, sliced: true, selected: true }, ['Safari', 8.5], ['Opera', 6.2], ['Others', 0.7] ] } // 指定图表的配置项和数据 var option = { chart: { accessibility: { enabled: false }, reflow: true, type: "pie", borderWidth: null, plotBorderWidth: null, options3d: { enabled: true, alpha: 50, beta: 0 }, events: { // load: function () { // const each = Highcharts.each; // const points = this.series[0].points; // each(points, function (p, i) { // p.graphic.attr({ // translateY: -p.shapeArgs.ran // }); // p.graphic.side1.attr({ // translateY: -p.shapeArgs.ran // }); // p.graphic.side2.attr({ // translateY: -p.shapeArgs.ran // }); // }); // } }, backgroundColor: null, marginRight: 130, marginBottom: 0, spacingBottom: 0 }, title: { text: "" }, exporting: { enabled: false }, credits: { enabled: false }, tooltip: { pointFormat: "{series.name}: {point.percentage:.1f}%", ...tooltip.value }, plotOptions: { pie: { allowPointSelect: true, cursor: "pointer", depth: 25, dataLabels: { enabled: true, formatter: function () { return \`\${this.point.name}\`; }, connectorColor: "#02AAD0", style: { textOverflow: "ellipsis", textOutline: "none" } }, showInLegend: true, states: { hover: { halo: { size: 10, opacity: 0.5, attributes: { // fill: "white" } } } } } }, series: [ { type: "pie", name: "当月用能占比", size: "50%", data: totalDatas } ], legend: { layout: "vertical", floating: true, backgroundColor: "none", align: "right", verticalAlign: "top", x: 10, y: 45, itemStyle: { cursor: "pointer", color: props.legendFontColor, textOverflow: "ellipsis", textOutline: "none" }, itemWidth: 70, itemHoverStyle: { color: "#34dcfc" }, symbolWidth: 12, symbolHeight: 8, symbolRadius: 0, itemMarginBottom: 5, }, colors: itemColors.value.map( i => i.color) }; const func = new Function('option', 'datas', codeConfig.value); const opt = func(window._.cloneDeep(option), datas); // 使用刚指定的配置项和数据显示图表。 nextTick(() => { myChart = Highcharts.chart(props.lineId, opt); }) } } } watch(historyDatas, (val) => { if (val) { nextTick(() => { initChart(val); }) } }, { immediate: true }) } } class Custom3DPieChartNode extends HtmlResize.view { chartRendered = false historyDatas = [] oldProperties = {} setHtml(rootEl) { if (!rootEl) return; const { properties, width, height, } = this.props.model; const { nodeAlias, grid, title, legend, tooltip, xAxis, yAxis, codeConfig, legendFontColor, labelTextColor, apiid, itemColors } = properties; const { dataShowTypes, legendNameType, } = properties.normalData || {}; const el = document.createElement('div'); rootEl.innerHTML = ''; const instance = createVNode(PieChart3D, { name: nodeAlias, lineId: \`line-\${properties.id}\`, historyDatas: this.historyDatas, width, height, grid, title, legend, tooltip, xAxis, yAxis, codeConfig, legendFontColor, labelTextColor, dataShowTypes, legendNameType, apiid, itemColors }) instance.appContext = app._context render(instance, el) rootEl.appendChild(el); } sameProps(properties) { const isSame = window._.isEqual(this.oldProperties, properties); if (isSame) return true; this.oldProperties = properties; return false } filterHistoryData(thingCodeArr, dataPointArr, apiid, renderIntervalEnabled) { if (dataPointArr && dataPointArr.length > 0) { let datas = [] if (renderIntervalEnabled) { datas = window.totalHistoryDatas[apiid]; } else { if (window.globalDashboardDatas[apiid]) { datas = window.globalDashboardDatas[apiid].values; } } if (datas && datas.length > 0) { const gotValues = datas.filter((val) => thingCodeArr.includes(val.thingCode) && dataPointArr.includes(val.attrKey)) this.historyDatas = gotValues this.chartRendered = true; } } } // 生命周期 支持重写内容, 但格式需一致 shouldUpdate() { const { properties } = this.props.model; const { apiid } = properties; const { normalData } = properties.dynamic || {}; const { dataPointArr, defaultValue, thingCodeArr } = normalData || {} if (normalData && !normalData.dataPoint && !normalData.defaultValue) { this.historyDatas = defaultSocketValue; return true } else if (normalData && !normalData.dataPoint && normalData.defaultValue) { this.historyDatas = JSON.parse(defaultValue); return true } const propertiesBack = window._.cloneDeep(properties); if (propertiesBack.dynamic.normalData) { propertiesBack.dynamic.normalData.defaultValue = ''; if (this.sameProps(propertiesBack) && this.chartRendered) { return false } if (dataPointArr && apiid && !this.chartRendered) { this.filterHistoryData(thingCodeArr, 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 || {}; if (this.shouldUpdate()) { this.setHtml(this.rootEl); } let inters = parseInt(renderInterval || '300000') if (normalData && !normalData.renderIntervalEnabled) { inters = 1000 } setInterval(() => { if (window.totalHistoryDatas[properties.apiid]) { this.filterHistoryData(thingCodeArr, 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 Custom3DPieChartModel 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-3d-piechart', view: Custom3DPieChartNode, model: Custom3DPieChartModel, })`,css:`.highcharts-wrapper .highcharts-root {\r stroke: none;\r }`,fakeData:""},u={id:e,name:t,aliasName:n,image:a,imageType:l,groupName:i,groupType:o,isRemote:!1,isDefault:!0,sectionType:s,config:r,files:d};export{n as aliasName,r as config,u as default,d as files,i as groupName,o as groupType,e as id,a as image,l as imageType,p as isDefault,c as isRemote,t as name,s as sectionType};