|
|
const e="0134f363-6673-4443-a165-53d5c6cbea75",a="custom-progress-node",t="进度条",n="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA5EAAAC7CAYAAAD8DRpyAAAAAXNSR0IArs4c6QAAIABJREFUeF7t3X/sXXV9x/H3F5DOpjCHw6VlihObNTRDUYNDSExsy49CtYkITYyYOCgplrloJgFtK9WUwDL9Yy2NtN0SGAnFuaSWFrS2kdgJGp2ggXUizKr0i1k3KAy6ltHvcj4/zvl8zvmccz73fu6939uep4kp/facc895nNPe+7rvz+fznhCRKeF/CCCAAAIIIIAAAggggAACCEQITBAiI5TYBAEEEEAAAQQQQAABBBBAQAkQInkQEEAAAQQQQAABBBBAAAEEogUIkdFUbIgAAggggAACCCCAAAIIIECI5BlAAAEEEEAAAQQQQAABBBCIFiBERlOxIQIIIIAAAggggAACCCCAACGSZwABBBBAAAEEEEAAAQQQQCBagBAZTcWGCCCAAAIIIIAAAggggAAChEieAQQQQAABBBBAAAEEEEAAgWgBQmQ0FRsigAACCCCAAAIIIIAAAggQInkGEEAAAQQQQAABBBBAAAEEogUIkdFUbIgAAggggAACCCCAAAIIIECI5BlAAAEEEEAAAQQQQAABBBCIFiBERlOxIQIIIIAAAggggAACCCCAACGSZwABBBBAAAEEEEAAAQQQQCBagBAZTcWGCCCAAAIIIIAAAggggAAChEieAQQQQAABBBBAAAEEEEAAgWgBQmQ0FRsigAACCCCAAAIIIIAAAggQInkGEEAAAQQQQAABBBBAAAEEogUIkdFUbIgAAggggAACCCCAAAIIIECI5BlAAAEEEEAAAQQQQAABBBCIFiBERlOxIQIIIIAAAggggAACCCCAACGSZwABBBBAAAEEEEAAAQQQQCBagBAZTcWGCCCAAAIIIIAAAggggAAChEieAQQQQAABBBBAAAEEEEAAgWgBQmQ0FRsigAACCCCAAAIIIIAAAggQInkGEEAAAQQQQAABBBBAAAEEogUIkdFUbIgAAggggAACCCCAAAIIIECI5BlAAAEEEEAAAQQQQAABBBCIFiBERlOxIQIIIIAAAggggAACCCCAACGSZwABBBBAAAEEEEAAAQQQQCBagBAZTcWGCCCAAAIIIIAAAggggAAChEieAQQQQAABBBBAAAEEEEAAgWgBQmQ0FRsigAACCCCAAAIIIIAAAggQInkGEEAAAQQQQAABBBBAAAEEogUIkdFUbIgAAggggAACCCCAAAIIIECI5BlAAAEEEEAAAQQQQAABBBCIFiBERlOxIQIIIIAAAggggAACCCCAACGSZwABBBBAAAEEEEAAAQQQQCBagBAZTcWGCCCAAAIIIIAAAggggAAChEieAQQQQAABBBBAAAEEEEAAgWgBQmQ0FRsigAACCCCAAAIIIIAAAggQInkGEEAAAQQQQAABBBBAAAEEogUIkdFUbIgAAggggAACCCCAAAIIIECI5BlAAAEEEEAAAQQQQAABBBCIFiBERlOxIQIIIIAAAggggAACCCCAACGSZwABBBBAAAEEEEAAAQQQQCBagBAZTcWGCCCAAAIIIIAAAggggAAChEieAQQQQAABBBBAAAEEEEAAgWgBQmQ0FRsigAACCCCAAAIIIIAAAggQInkGEEAAAQQQQAABBBBAAAEEogUIkdFUbIgAAggggAACCCCAAAIIIECI5BlAAAEEEEAAAQQQQAABBBCIFiBERlOxIQIIIIAAAggggAACCCCAACGSZwABBBBAAAEEEEAAAQQQQCBagBAZTcWGCCCAAAIIIIAAAggggAAChEieAQQQQAABBBBAAAEEEEAAgWgBQmQ0FRsigAACCCCAAAIIIIAAAggQInkGEEAAAQQQQAABBBBAAAEEogUIkdFUbIgAAggggAACCCCAAAIIIECI5BlAAAEEEEAAAQQQQAABBBCIFiBERlOFNzz94msTj8DuCCCAAAIIIIAAAgggMEqBl/beM8qXO+FeixCZeEsJkYmA7I4AAggggAACCCCAwIgFCJFp4ITIND8hRCYCsjsCCCCAAAIIIIAAAiMWIESmgRMi0/wIkYl+7I4AAggggAACCCCAwKgFCJFp4oTIND9CZKIfuyOAAAIIIIAAAgggMGoBQmSaOCEyzU9k45RMZIpifxWZevA2ddSTP7zG/Fwz6+2k9Gvdz+12U6J2m3D2U793fu4dc0ptPDGR/Vp+rez3+udHn9glr/37D9V/n7bsi+qc9Ov4x1Wv6/7cHtP+XF1X4vXVukzI7/5hnTq3k2eeJmcuW5l7TsiUNrE2+a91P3c8G16vep/iru/ZDXeqc/mjyz4ss+bOc+yb7nu9m70+ew+L66y/Pu1R/Hn+vJn7d3jyeXnmH+9T5/lnN3+ueA5j7nvQuu15yXaKe57MI6Tcntp8v/zPb59X//3+VX8lMjWR3RZ9r/Xjq39vfp7/3v55eXuzT/boT6nj6OPZ/xfHzX4+VT1u/pr+eez92t+qlz5z7p/KvMuv1H9Ja4+rKPzzV9tnJ1W6PrNddp76fItz1Q5mP/N6leNmx3P2eeTv71S/vfBjN8qMmbOK6w8e1/Xt09u5P1OZp3XJf26Pa657SmT/L34kv3hit3rxSz56i3EM3/fMy/wzVnirR7HFpfb+FM9Tvbd22fntr+j7ISKLF67Sz0vL89R8viHvuufBPgf6DIrn2fm5OZ9vPabfg+affYmcM/tC8yLj9cvhoy/Jrn/9mjqpD/959l45nv/78dPfkAP/9dTAz/NLP/uMHHrtxfG8aM4KgY4IECLTbjQhMs3PCZFFYDt2g36TP2XTsRGEnJhwpC/SDbFHHt8lL6y9Umacv0jevGZ75c91mOo35KiPv60hzw/V4dc7sP4WObh1vcy5aZ28RYXIQAhX6ckJa2qjQAi3PzefwNSHv7aQY8JTca7hkP7YkovklV/ukwt37JVZ75xXhPL8XMyHzZ6/TIgLsVWX6nNxeHJStp33Hpk5Z7Ys/flPGr7UiLt/5RBf/jKlen+rz6H3nJlw9OSWrbL7+s/L/E8tkwVf1+Fch8cidPhhsvTndnsnjLnb6wBqj2dCnPlQXg2p+n57IdYcd9uNy2Xfju2y9K5NMu/yJc6H+h5Dan6+JsSWQpd/vkWwK8JjjYvxXHfJ2+XIKy/LFx7eLzNmnpYH2Sx0eSEv92rxrgtNTtiuhLyW8JuFyA2rFsjZcy+QlbftKXmbf4fU+daFavMPub23zv1V4dJ5JopQbu6Tvfct9yG7pixE7tz1ZVm8aJVcsSgLke6XEdUvBfzzbfoyxHnOnC9Kii8N6r/0CH3Jsm7rB+SZyUfl1qt/MNYhcuXG35c3nnq6rF9xKPWdeGj7ZyFy486r5X1zPyYrFj8wsNchRA6MkgMh0LcAIbJvOv153PmuOe1IXd1747FK2Dp2w0lKIwuR6kOyF2qc6pmtYHrhxq38hUKOCSMt4cd+gLcf9P0QpCuRL6xdIjPevUjOWLPdVCj98FCEguFVGtsqtJPrb5WDD6yXOSvXOZXIahhpr9Rlny5D12cCZ8/hzg9pjy25WIfIB/eaSmS/4S9iv0o12FaYmyvQhw9MyrZ3vbcIkX2E6Ur117rllWnjYp/PYOW95nkyH+Kf3HK/7Fl+swmRd7RUIksfvt1Kpa3kBSuAoQ/lNRVOrxJZVJ62rVgu+3Zul49suFuHyNpwVVSOeg2/rSHvWHuF9vZLdYi89aFf6RBZE4rzCqcJXcEKp+drKruhCqAX2tpDtQqRq22I3O1VIm0A9MNfWwUwrvKrQl5NpbmoVBcVzixEPmRC5OKFXywq4u4XF/kXEqXKaMuXG/6XAuHr0+fbFIr1fuseIEQO6iMJIXJQkhwHgfETIESm3RNCZJpfoBI5JX6I1B+qhxtyeg95Rx7/jg6RjZXIalhrq1DaUBgeZlpT4VJBI1xJ9CqR16wMVDfrhktGDs+tDNMshfTg8N2iGqpy2IRIXok0ITJmmO2oQ3p8JXKaQnqW
"nodes": [ { "id": "f0bb3636-d4a4-4437-a37d-b1eda804a5d9", "type": "custom-progress-node", "x": 200, "y": 200, "text": { "value": "", "x": 200, "y": 200 }, "properties": { "id": "f0bb3636-d4a4-4437-a37d-b1eda804a5d9", "width": 500, "height": 100, "x": 200, "y": 200, "rotation": 0, "opacity": 1, "showCategoryName": true, "showMaxValue": true, "showRectSplit": true, "splitMargin": 2, "showToolTip": true, "showToolTipBack": true, "xOffset": -35, "yOffset": -12, "codeConfig": "return option", "fontSize": 12, "showRightValue": true, "nodeAlias": "进度条", "showDefaultValue": false, "showUnit": false, "valueColor": "rgba(245, 166, 35, 1)", "categoryName": "A29", "categoryNameColor": "#03fcfe", "categoryFontSize": 12, "maxValue": 10000, "maxValueColor": "#0097ff", "maxValueFontSize": 12, "innerBarWidth": 18, "innerBarBack": [ { "offset": 0, "color": "#0097ff" }, { "offset": 0.4, "color": "#6dffe1" }, { "offset": 0.8, "color": "#9d6fff" } ], "outerBarWidth": 25, "outerBarBack": "#0e3c5e", "canvasBack": "rgb(24, 20, 50)", "tooltipBackUrl": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAAZCAYAAAB6v90+AAAA2klEQVRYhe2YMUoDQRhG32zAwsKkyRGCHmE9hE3uuSkNSqogaOEBcgzXDVg+i2xhEdKYn2GWefDX33vlDCjoCu3QHrXQ68eGFUpC74EPYME0+ALahHbAOrfNldkktAfucptcmWNCzW0RQZNbIIoaVho1rDRqWGnUsNKoYaUx6bDv3BIBHBtgl9sigNeEPgDvTOsF/dgAB6AFNsCQVel/DJwaWuDA+JkTcTfo9sLnS4fOwvYDw0Bv0f2ZqJcxPG47OAx0jn7+iXobg0N306kunCXwDPwAT0AfPfgLAvYRIEVmrDQAAAAASUVORK5CYII=", "tooltipFontColor": "#ffffff", "tooltipFontSize": 12, "innerBarRadius": 0, "outerBarRadius": 0, "dynamic": { "normalData": { "dataPoint": "", "compareType": "", "conditionVariables": [], "defaultValue": "", "unit": "" } } } } ]}`,javascript:`const { createApp, createVNode, render } = Vue;const app = createApp({})const Progress = { template: '<div :id="chartId" style="width: 100%; height: 100%"></div>', props: { realValue: { type: String, default: '' }, unit: { type: String, default: '' }, chartId: { type: String, default: '' }, fontColor: { type: String, default: '#ffffff' }, fontSize: { type: Number, default: 14 }, fontFamily: { type: String, default: '宋体' }, fontStyle: { type: String, default: 'normal' }, width: { type: Number, default: 80 }, height: { type: Number, default: 35 }, showCategoryName: { type: Boolean, default: true }, showMaxValue: { type: Boolean, default: true }, showRectSplit: { type: Boolean, default: true }, splitMargin: { type: Number, default: 2, }, showToolTip: { type: Boolean, default: true }, showToolTipBack: { type: Boolean, default: true }, tooltipBackUrl: { type: String, default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAAZCAYAAAB6v90+AAAA2klEQVRYhe2YMUoDQRhG32zAwsKkyRGCHmE9hE3uuSkNSqogaOEBcgzXDVg+i2xhEdKYn2GWefDX33vlDCjoCu3QHrXQ68eGFUpC74EPYME0+ALahHbAOrfNldkktAfucptcmWNCzW0RQZNbIIoaVho1rDRqWGnUsNKoYaUx6bDv3BIBHBtgl9sigNeEPgDvTOsF/dgAB6AFNsCQVel/DJwaWuDA+JkTcTfo9sLnS4fOwvYDw0Bv0f2ZqJcxPG47OAx0jn7+iXobg0N306kunCXwDPwAT0AfPfgLAvYRIEVmrDQAAAAASUVORK5CYII=' }, xOffset: { type: Number, default: -35, }, yOffset: { type: Number, default: -12, }, categoryName: { type: String, default: "A29" }, categoryNameColor: { type: String, default: "#03fcfe" }, categoryFontSize: { type: Number, default: 12 }, tooltipFontColor:{ type: String, default: "#fff" }, tooltipFontSize:{ type: Number, default: 12 }, maxValue: { type: Number, default: 10000 }, maxValueColor: { type: String, default: "#0097ff" }, maxValueFontSize: { type: Number, default: 12 }, innerBarWidth: { type: Number, default: 18 }, innerBarBack: { type: Array, default: () => [ { "offset": 0, "color": "#0097ff" }, { "offset": 0.4, "color": "#6dffe1" }, { "offset": 0.8, "color": "#9d6fff" } ] }, outerBarWidth: { type: Number, default: 25 }, outerBarBack: { type: String, default: "#0e3c5e" }, canvasBack: { type: String, default: "rgb(24, 20, 50)" }, innerBarRadius: { type: Number, default: 0 }, outerBarRadius: { type: Number, default: 0 } }, setup(props) { const { watch, nextTick, toRefs } = Vue; const { canvasBack, tooltipBackUrl, showCategoryName, showMaxValue, showRectSplit, splitMargin, tooltipFontColor, tooltipFontSize, showToolTip, showToolTipBack, xOffset, yOffset, categoryName, categoryNameColor, categoryFontSize,innerBarRadius, outerBarRadius, unit, maxValue, maxValueColor, maxValueFontSize, innerBarWidth, innerBarBack, outerBarWidth, outerBarBack } = toRefs(props)
let myChart = null; const initChart = (val) => { // 基于准备好的dom，初始化echarts实例
const dom = document.getElementById(props.chartId); if (dom && !myChart) { if (!myChart) { myChart = echarts.init(dom); } if (val) { let category = [{ name: categoryName.value, value: Number(val) } ]; //类别
let total = maxValue.value; //数据总数
let datas = []; var rich = { white: { backgroundColor: { image: tooltipBackUrl.value }, padding: [5, 0, 5, 5], align: 'center', }, };
let rightValues = []
category.forEach(value => { datas.push(value.value); });
var option = { backgroundColor: canvasBack.value, xAxis: { max: total, splitLine: { show: false }, axisLine: { show: false }, axisLabel: { show: false }, axisTick: { show: false } }, grid: { left: 80, top: 20, //设置条形图的边距
right: 80, bottom: 20 }, yAxis: [{ type: 'category', inverse: true, axisLabel: { show: showCategoryName.value, textStyle: { fontSize: categoryFontSize.value, color: categoryNameColor.value, }, }, splitLine: { show: false, }, axisTick: { show: false, }, axisLine: { show: false, }, data: [categoryName.value], }], series: [{ //内
type: "bar", barWidth: innerBarWidth.value,
legendHoverLink: false, silent: true, itemStyle: { barBorderRadius: innerBarRadius.value, color: { type: "linear", x: 0, y: 0, x2: 1, y2: 0, colorStops: innerBarBack.value } }, label: { normal: { show: showToolTip.value, textStyle: { color: tooltipFontColor.value, fontSize: tooltipFontSize.value }, position: 'right', offset: [xOffset.value, yOffset.value], formatter: function (data) { const ratio = (data.value / total * 100).toFixed(2) return '{white|' + ratio + '%' + '}'; }, verticalAlign: 'bottom', rich: showToolTipBack.value ? rich : {} } }, data: category, z: 1, }, { //外边框
type: "pictorialBar", symbol: "rect", symbolBoundingData: total, itemStyle: { normal: { color: "none" } }, label: { normal: { show: showMaxValue.value, position: "right", offset: [0, 0], //设置右边数据位置
textStyle: { color: maxValueColor.value, fontSize: maxValueFontSize.value, fontWeight: 600 }, formatter(value) { const v = value.value >= 10000 ? value.value / 10000 + '万' + ' ' + unit.value : value.value + ' ' + unit.value; return v } } }, data: datas, z: 0, }, { name: "外框", type: "bar", barGap: "-120%", //设置外框粗细
data: [total, total, total], barWidth: outerBarWidth.value, itemStyle: { normal: { color: outerBarBack.value, //填充色
barBorderColor: outerBarBack.value, //边框色
barBorderWidth: 1, //边框宽度
barBorderRadius: outerBarRadius.value, //圆角半径
label: { //标签显示位置
show: false, position: "top" //insideTop 或者横向的 insideLeft
} } }, z: 0 } ] };
if (showRectSplit.value) { option.series.splice(1, 0, { //分隔
type: "pictorialBar", itemStyle: { color: "#000" }, symbolRepeat: "fixed", symbolMargin: splitMargin.value, symbol: "rect", symbolClip: true, symbolSize: [2, 21], symbolPosition: "start", symbolOffset: [0, 0], symbolBoundingData: total, data: category, z: 2, }) } // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option); } } }
watch(() => props.realValue, (val) => { if (val) { console.log('val', val) nextTick(() => { initChart(val) }) } }, { immediate: true }) }}
class CustomProgressNode extends HtmlResize.view { setHtml(rootEl) { const { properties, width, height, } = this.props.model;
const { id, fontColor, fontSize, fontFamily, fontStyle, showCategoryName, showMaxValue, showRectSplit, splitMargin, tooltipFontColor, tooltipFontSize,innerBarRadius, outerBarRadius, showToolTip, showToolTipBack, xOffset, yOffset, categoryName, categoryNameColor, categoryFontSize, maxValue, maxValueColor, maxValueFontSize, innerBarWidth, innerBarBack, outerBarWidth, outerBarBack, canvasBack } = properties; const { model } = this.props;
const { normalData } = properties.dynamic || {}; let realValue = ""; let unit = ''; if (normalData) { realValue = window.resolveScadaNewValue(normalData.defaultValue); unit = normalData.unit; }
const el = document.createElement('div'); el.style.height = "100%"; rootEl.innerHTML = ''; const instance = createVNode(Progress, { realValue: realValue || '2500', unit, chartId: 'progress_' + id, fontColor, fontSize, fontFamily, fontStyle, width, height, showCategoryName, showMaxValue, showRectSplit, splitMargin, tooltipFontColor, tooltipFontSize,innerBarRadius, outerBarRadius, showToolTip, showToolTipBack, xOffset, yOffset, categoryName, categoryNameColor, categoryFontSize, maxValue, maxValueColor, maxValueFontSize, innerBarWidth, innerBarBack, outerBarWidth, outerBarBack, canvasBack }) instance.appContext = app._context render(instance, el) rootEl.appendChild(el); }
// 生命周期 支持重写内容, 但格式需一致
// shouldUpdate() {
// if (this.preProperties && this.preProperties === this.currentProperties) return;
// this.preProperties = this.currentProperties;
// return true;
// }
// componentDidMount() {
// if (this.shouldUpdate()) {
// this.setHtml(this.rootEl);
// }
// }
// componentDidUpdate() {
// if (this.shouldUpdate()) {
// this.setHtml(this.rootEl);
// }
// }
}
class CustomProgressModel 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; }
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-progress-node', view: CustomProgressNode, model: CustomProgressModel,})
`,css:"",fakeData:""},c={id:e,name:a,aliasName:t,image:n,imageType:l,groupName:o,groupType:i,isRemote:!1,isDefault:!0,sectionType:A,config:r,files:s};export{t as aliasName,r as config,c as default,s as files,o as groupName,i as groupType,e as id,n as image,l as imageType,u as isDefault,d as isRemote,a as name,A as sectionType};
|
