{{item.name}}
{{item.formatVal}}
{{currentRow.name}} :
{{currentRow.value}}
{{ unit }}
\`,
props: {
chartId: {
type: String,
default: ''
},
historyDatas: {
type: Array,
default: () => []
},
width: {
type: Number,
default: 350
},
height: {
type: Number,
default: 150
},
codeConfig: {
type: String,
default: ''
},
nameColor: {
type: String,
default: ''
},
valueColor: {
type: String,
default: ''
},
valueFrontBg: {
type: String,
default: ''
},
maxValueBg: {
type: String,
default: ''
},
tooltipColor: {
type: String,
default: ''
},
tooltipBack: {
type: String,
default: ''
},
tooltipBorderColor: {
type: String,
default: ''
},
unit: {
type: String,
default: ''
},
dataShowTypes: {
type: String,
default: ''
},
yAxisNameType: {
type: String,
default: ''
},
apiid: {
type: String,
default: ''
}
},
computed: {
getStyle() {
return {
width: \`\${this.width}px\`,
height: \`\${this.height}px\`
}
},
getRowStyle: () => (len) => {
const ratio = 1 / (len + 3) * len / len * 100 + '%'
return {
flex: \`0 0 \${ratio}\`,
}
},
getValueStyle: () => (val, maxVal, valueFrontBg) => {
return {
width: val / maxVal * 100 + '%',
background: valueFrontBg
}
},
getBgStyle() {
return {
'background-color': this.maxValueBg
}
},
},
setup(props) {
const { onMounted, computed, nextTick, ref, toRefs, watch, reactive } = Vue;
const { historyDatas, codeConfig, dataShowTypes, yAxisNameType, apiid } = toRefs(props)
const filterDatas = (api, yAxisName, dataArr, datas) => {
if (api) {
const infos = window.totalDeviceInfos[api];
const thing = infos[datas[0].thingCode];
const attrName = thing.attrs[datas[0].attrKey].name
if (dataShowTypes.value === 'oneThingOneAttr') {
switch (yAxisNameType.value) {
case "thingName":
yAxisName.push(thing.entityName);
dataArr.push(datas[0].val);
return;
case "thingCode":
yAxisName.push(datas[0].thingCode);
dataArr.push(datas[0].val);
return;
case "attrName":
yAxisName.push(attrName);
dataArr.push(datas[0].val);
return;
case "attrCode":
yAxisName.push(datas[0].attrKey);
dataArr.push(datas[0].val);
return;
case "thingNameAttrName":
const thingName = thing.entityName;
yAxisName.push(thingName + ' ' + attrName);
dataArr.push(datas[0].val);
return;
case "thingCodeAttrCode":
const thingCode = datas[0].thingCode;
const attrCode = datas[0].attrKey;
yAxisName.push(thingCode + ' ' + attrCode);
dataArr.push(datas[0].val);
return;
}
} else if (dataShowTypes.value === 'oneThingManyAttr') {
const datasGrouped = window._.groupBy(datas, 'attrKey');
switch (yAxisNameType.value) {
case "attrName":
for (const key in datasGrouped) {
const serieData = datasGrouped[key];
const thing = infos[serieData[0].thingCode];
const attrName = thing.attrs[serieData[0].attrKey].name
yAxisName.push(attrName);
dataArr.push(serieData[0].val);
}
return;
case "attrCode":
for (const key in datasGrouped) {
const serieData = datasGrouped[key];
yAxisName.push(serieData[0].attrKey);
dataArr.push(serieData[0].val);
}
return;
case "thingNameAttrName":
for (const key in datasGrouped) {
const serieData = datasGrouped[key];
const thing = infos[serieData[0].thingCode];
const thingName = thing.entityName;
const attrName = thing.attrs[serieData[0].attrKey].name
yAxisName.push(thingName + ' ' + attrName);
dataArr.push(serieData[0].val);
}
return;
case "thingCodeAttrCode":
for (const key in datasGrouped) {
const serieData = datasGrouped[key];
const thingCode = serieData[0].thingCode;
const attrCode = serieData[0].attrKey;
yAxisName.push(thingCode + ' ' + attrCode);
dataArr.push(serieData[0].val);
}
return;
}
} else if (dataShowTypes.value === 'manyThingManyAttr') {
switch (yAxisNameType.value) {
case "thingNameAttrName":
datas.forEach((val) => {
const thing = infos[val.thingCode];
const thingName = thing.entityName;
const attrName = thing.attrs[val.attrKey].name
yAxisName.push(thingName + ' ' + attrName);
dataArr.push(val.val);
})
return;
case "thingCodeAttrCode":
datas.forEach((val) => {
yAxisName.push(val.thingCode + ' ' + val.attrKey);
dataArr.push(val.val);
})
return;
}
} else if (dataShowTypes.value === 'manyThingOneAttr') {
const datasGrouped = window._.groupBy(datas, 'thingCode');
switch (yAxisNameType.value) {
case "thingName":
for (const key in datasGrouped) {
const serieData = datasGrouped[key];
const thing = infos[serieData[0].thingCode];
yAxisName.push(thing.entityName);
dataArr.push(serieData[0].val);
}
return;
case "thingCode":
for (const key in datasGrouped) {
const serieData = datasGrouped[key];
yAxisName.push(key);
dataArr.push(serieData[0].val);
}
return;
case "thingNameAttrName":
for (const key in datasGrouped) {
const serieData = datasGrouped[key];
const thing = infos[serieData[0].thingCode];
const thingName = thing.entityName;
const attrName = thing.attrs[serieData[0].attrKey].name
yAxisName.push(thingName + ' ' + attrName);
dataArr.push(serieData[0].val);
}
return;
case "thingCodeAttrCode":
for (const key in datasGrouped) {
const serieData = datasGrouped[key];
const thingCode = serieData[0].thingCode;
const attrCode = serieData[0].attrKey;
yAxisName.push(thingCode + ' ' + attrCode);
dataArr.push(serieData[0].val);
}
return;
}
}
}
}
const totalDatas = ref([]);
const totalBackground = ref([]);
const initChart = (datas) => {
// 基于准备好的dom，初始化echarts实例
if (datas) {
let dataArr = [];
let databackground = [];
let yAxisName = [];
if (datas.length > 0) {
filterDatas(apiid.value, yAxisName, dataArr, datas);
const maxVal = Math.max(...dataArr);
databackground = dataArr.map(() => maxVal);
} else {
dataArr = [50000000, 22000000, 10000000, 5000000, 1];
databackground = [50000000, 50000000, 50000000, 50000000, 50000000];
yAxisName = ['大米', '玉米', '蔬菜', '鸡蛋', '坚果'];
}
totalDatas.value = dataArr.map((item, index) => {
const formatVal = dataArr[index] > 10000 ? (dataArr[index] / 10000).toFixed(2) + '万' : dataArr[index];
return {
name: yAxisName[index],
value: dataArr[index],
formatVal,
maxVal: databackground[index]
}
})
totalBackground.value = databackground;
setTimeout(() => {
const bgs = document.getElementById(props.chartId).querySelectorAll('.horibar-bg');
bgs.forEach((bg) => {
bg.style.transform = 'scaleX(1)';
})
const vals = document.getElementById(props.chartId).querySelectorAll('.horibar-value');
vals.forEach((val) => {
val.style.transform = 'scaleX(1)';
})
}, 100)
}
}
watch(historyDatas, (val) => {
if (val) {
nextTick(() => {
initChart(val);
})
}
}, {
immediate: true
})
const currentRow = ref({});
const showTooltip = ref(false);
const tooltipPos = ref({
top: -1000,
left: -1000,
})
let parentX = 0;
let parentY = 0;
onMounted(() => {
nextTick(() => {
const parentDom = document.getElementById(props.chartId);
const { x, y } = parentDom.getBoundingClientRect();
parentX = x;
parentY = y;
})
})
const hoverTooltip = (e, row) => {
if (!showTooltip.value) {
showTooltip.value = true;
};
const parentDom = document.getElementById(props.chartId);
const { height } = parentDom.querySelector('.hori-tooltip').getBoundingClientRect();
let hovertipHeight = height;
currentRow.value = row;
const isCloseBottom = Math.abs(props.height - (e.y - parentY)) < hovertipHeight;
tooltipPos.value = {
left: e.x - parentX,
top: isCloseBottom ? e.y - parentY - hovertipHeight : e.y - parentY,
}
}
const hoverTooltipDebounced = window._.throttle(hoverTooltip, 500);
const getTooltipStyle = computed(() => {
const pos = tooltipPos.value;
return {
position: 'absolute',
top: pos.top + 'px',
left: pos.left + 'px',
padding: '15px 15px',
color: props.tooltipColor,
'background-color': props.tooltipBack,
border: \`1px solid \${props.tooltipBorderColor}\`,
'border-radius': '5px',
'z-index': 9999,
transition: 'all 0.25s ease-in-out'
}
})
const mouseEnterHandler = window._.throttle(() => {
showTooltip.value = true;
}, 200)
const mouseLeaveHandler = window._.throttle(() => {
showTooltip.value = false;
}, 200)
return reactive({
totalDatas,
totalBackground,
hoverTooltipDebounced,
currentRow,
tooltipPos,
showTooltip,
getTooltipStyle,
mouseEnterHandler,
mouseLeaveHandler,
})
}
}
class CustomHoriBarChartNode extends HtmlResize.view {
chartRendered = false
historyDatas = []
oldProperties = {}
setHtml(rootEl) {
if (!rootEl) return;
const { properties, width, height, } = this.props.model;
const { nodeAlias, codeConfig, nameColor, valueColor, valueFrontBg, maxValueBg, tooltipColor, tooltipBack, tooltipBorderColor } = properties;
const { normalData } = properties.dynamic || {};
const { unit, dataShowTypes, yAxisNameType } = normalData || {};
const el = document.createElement('div');
rootEl.innerHTML = '';
const instance = createVNode(HoriBarChart, {
name: nodeAlias,
chartId: \`horibar-\${properties.id}\`,
historyDatas: this.historyDatas,
width,
height,
codeConfig,
nameColor, valueColor, valueFrontBg, maxValueBg,
tooltipColor, tooltipBack, tooltipBorderColor, unit,
dataShowTypes, yAxisNameType,
apiid: properties.apiid
})
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 { thingCodeArr, dataPointArr, defaultValue } = 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() {
// 防止拖动时候频繁渲染图表
this.updateHtmlDebounced = window._.debounce(this.updateHtml.bind(this), 500);
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 || '30000')
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)
}
componentDidUpdate() {
if (this.shouldUpdate()) {
this.updateHtmlDebounced();
}
}
}
class CustomHoriBarChartModel 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-horizontal-barchart',
view: CustomHoriBarChartNode,
model: CustomHoriBarChartModel,
})`,css:`.horibar-chart-box {\r
display: flex;\r
flex-direction: column;\r
justify-content: space-between;\r
position: relative;\r
}\r
.horibar-chart-box .horibar-item-row {\r
display: flex;\r
}\r
.horibar-chart-box .horibar-item-row .horibar-name {\r
flex: 0 0 auto;\r
overflow: hidden;\r
text-overflow: ellipsis;\r
white-space: nowrap;\r
display: flex;\r
align-items: center;\r
padding: 0 5px;\r
}\r
.horibar-chart-box .horibar-item-row .horibar-value-wrapper {\r
flex: 1;\r
position: relative;\r
}\r
.horibar-chart-box .horibar-item-row .horibar-value-wrapper .horibar-value {\r
position: absolute;\r
top: 0;\r
bottom: 0;\r
height: 100%;\r
z-index: 1;\r
border-radius: 20px;\r
transform: scaleX(0);\r
transform-origin: 0%;\r
transition: all 0.35s ease-in-out;\r
}\r
.horibar-chart-box .horibar-item-row .horibar-value-wrapper .horibar-bg {\r
width: 100%;\r
height: 100%;\r
border-radius: 20px;\r
transform: scaleX(0);\r
transform-origin: 0%;\r
transition: all 0.2s ease-in-out;\r
}\r
\r
.horibar-chart-box .horibar-item-row .horibar-value-show {\r
flex: 0 0 70px;\r
overflow: hidden;\r
text-overflow: ellipsis;\r
white-space: nowrap;\r
display: flex;\r
align-items: center;\r
padding-left: 5px;\r
}`,fakeData:""},u={id:e,name:t,aliasName:a,image:n,imageType:o,groupName:i,groupType:r,isRemote:!1,isDefault:!0,sectionType:l,config:s,files:d};export{a as aliasName,s as config,u as default,d as files,i as groupName,r as groupType,e as id,n as image,o as imageType,p as isDefault,c as isRemote,t as name,l as sectionType};