update
qianlishi
3 years ago
parent
a758578156
commit
941001f46d
@ -0,0 +1,179 @@
|
|||||||
|
export const handlerLayerWidget = (val, getToolByCode) => {
|
||||||
|
const layerWidgetArr = [];
|
||||||
|
for (let i = 0; i < val.length; i++) {
|
||||||
|
const obj = {};
|
||||||
|
obj.icon = getToolByCode(val[i].type).icon;
|
||||||
|
const options = val[i].options["setup"];
|
||||||
|
options.forEach(el => {
|
||||||
|
if (el.name == "layerName") {
|
||||||
|
obj.label = el.value;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
layerWidgetArr.push(obj);
|
||||||
|
}
|
||||||
|
return layerWidgetArr;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const handleBigScreen = (data, getToolByCode, callBcak) => {
|
||||||
|
const optionScreen = getToolByCode("screen").options;
|
||||||
|
const setup = optionScreen.setup;
|
||||||
|
for (const key in data) {
|
||||||
|
for (let i = 0; i < setup.length; i++) {
|
||||||
|
if (key == setup[i].name) {
|
||||||
|
setup[i].value = data[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
callBcak();
|
||||||
|
return {
|
||||||
|
backgroundColor: (data && data.backgroundColor) || "",
|
||||||
|
backgroundImage: (data && data.backgroundImage) || "",
|
||||||
|
height: (data && data.height) || "1080",
|
||||||
|
title: (data && data.title) || "",
|
||||||
|
width: (data && data.width) || "1920"
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const handleInitEchartsData = (data, getToolByCode) => {
|
||||||
|
const widgets = data.dashboard ? data.dashboard.widgets : [];
|
||||||
|
const widgetsData = [];
|
||||||
|
for (let i = 0; i < widgets.length; i++) {
|
||||||
|
let obj = {};
|
||||||
|
obj.type = widgets[i].type;
|
||||||
|
obj.value = {
|
||||||
|
setup: widgets[i].value.setup,
|
||||||
|
data: widgets[i].value.data,
|
||||||
|
position: widgets[i].value.position
|
||||||
|
};
|
||||||
|
const tool = deepClone(getToolByCode(widgets[i].type))
|
||||||
|
const option = tool.options;
|
||||||
|
const options = handleOptionsData(widgets[i].value, option);
|
||||||
|
obj.options = options;
|
||||||
|
widgetsData.push(obj);
|
||||||
|
}
|
||||||
|
return widgetsData;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const handleOptionsData = (data, option) => {
|
||||||
|
for (const key in data.setup) {
|
||||||
|
for (let i = 0; i < option.setup.length; i++) {
|
||||||
|
let item = option.setup[i];
|
||||||
|
if (Object.prototype.toString.call(item) == "[object Object]") {
|
||||||
|
if (key == option.setup[i].name) {
|
||||||
|
option.setup[i].value = data.setup[key];
|
||||||
|
}
|
||||||
|
} else if (Object.prototype.toString.call(item) == "[object Array]") {
|
||||||
|
for (let j = 0; j < item.length; j++) {
|
||||||
|
const list = item[j].list;
|
||||||
|
list.forEach(el => {
|
||||||
|
if (key == el.name) {
|
||||||
|
el.value = data.setup[key];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// position
|
||||||
|
for (const key in data.position) {
|
||||||
|
for (let i = 0; i < option.position.length; i++) {
|
||||||
|
if (key == option.position[i].name) {
|
||||||
|
option.position[i].value = data.position[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// data
|
||||||
|
for (const key in data.data) {
|
||||||
|
for (let i = 0; i < option.data.length; i++) {
|
||||||
|
if (key == option.data[i].name) {
|
||||||
|
option.data[i].value = data.data[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return option;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 在缩放模式下的大小
|
||||||
|
export const getPXUnderScale = (bigscreenScaleInWorkbench, px) => {
|
||||||
|
return bigscreenScaleInWorkbench * px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 对组件默认值处理
|
||||||
|
export const handleDefaultValue = (widgetJson) => {
|
||||||
|
for (const key in widgetJson) {
|
||||||
|
if (key == "options") {
|
||||||
|
// collapse、data、position、setup
|
||||||
|
// setup 处理
|
||||||
|
for (let i = 0; i < widgetJson.options.setup.length; i++) {
|
||||||
|
const item = widgetJson.options.setup[i];
|
||||||
|
if (Object.prototype.toString.call(item) == "[object Object]") {
|
||||||
|
widgetJson.value.setup[item.name] = item.value;
|
||||||
|
} else if (
|
||||||
|
Object.prototype.toString.call(item) == "[object Array]"
|
||||||
|
) {
|
||||||
|
for (let j = 0; j < item.length; j++) {
|
||||||
|
const list = item[j].list;
|
||||||
|
list.forEach(el => {
|
||||||
|
widgetJson.value.setup[el.name] = el.value;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// position
|
||||||
|
for (let i = 0; i < widgetJson.options.position.length; i++) {
|
||||||
|
const item = widgetJson.options.position[i];
|
||||||
|
if (item.value) {
|
||||||
|
widgetJson.value.position[item.name] = item.value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// data 处理
|
||||||
|
if (widgetJson.options.data && widgetJson.options.data.length > 0) {
|
||||||
|
for (let i = 0; i < widgetJson.options.data.length; i++) {
|
||||||
|
const item = widgetJson.options.data[i];
|
||||||
|
if (item.value) {
|
||||||
|
widgetJson.value.data[item.name] = item.value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return widgetJson;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置默认
|
||||||
|
export const setDefaultValue = (options, val) => {
|
||||||
|
for (let i = 0; i < options.length; i++) {
|
||||||
|
if (Object.prototype.toString.call(options[i]) == "[object Object]") {
|
||||||
|
for (const k in val) {
|
||||||
|
if (options[i].name == k) {
|
||||||
|
options[i].value = val[k];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (
|
||||||
|
Object.prototype.toString.call(options[i]) == "[object Array]"
|
||||||
|
) {
|
||||||
|
for (let j = 0; j < options[i].length; j++) {
|
||||||
|
const list = options[i][j].list;
|
||||||
|
for (let z = 0; z < list.length; z++) {
|
||||||
|
for (const k in val) {
|
||||||
|
if (list[z].name == k) {
|
||||||
|
list[z].value = val[k];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 数组 元素互换位置
|
||||||
|
export const swapArr = (arr, oldIndex, newIndex) => {
|
||||||
|
arr[oldIndex] = arr.splice(newIndex, 1, arr[oldIndex])[0];
|
||||||
|
return arr;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const deepClone = (obj) => {
|
||||||
|
return JSON.parse(JSON.stringify(obj))
|
||||||
|
}
|
||||||
@ -0,0 +1,367 @@
|
|||||||
|
<template>
|
||||||
|
<div :style="styleObj">
|
||||||
|
<v-chart :options="options" autoresize />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "WidgetBarchart",
|
||||||
|
components: {},
|
||||||
|
props: {
|
||||||
|
value: Object,
|
||||||
|
ispreview: Boolean
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
options: {
|
||||||
|
grid: {},
|
||||||
|
legend: {
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
data: [],
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
data: [],
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: [],
|
||||||
|
type: "bar",
|
||||||
|
barGap: "0%",
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
optionsStyle: {}, // 样式
|
||||||
|
optionsData: {}, // 数据
|
||||||
|
optionsSetup: {},
|
||||||
|
flagInter: null
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
styleObj() {
|
||||||
|
return {
|
||||||
|
position: this.ispreview ? "absolute" : "static",
|
||||||
|
width: this.optionsStyle.width + "px",
|
||||||
|
height: this.optionsStyle.height + "px",
|
||||||
|
left: this.optionsStyle.left + "px",
|
||||||
|
top: this.optionsStyle.top + "px",
|
||||||
|
background: this.optionsSetup.background
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
value: {
|
||||||
|
handler(val) {
|
||||||
|
this.optionsStyle = val.position;
|
||||||
|
this.optionsData = val.data;
|
||||||
|
this.optionsCollapse = val.setup;
|
||||||
|
this.optionsSetup = val.setup;
|
||||||
|
this.editorOptions();
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.optionsStyle = this.value.position;
|
||||||
|
this.optionsData = this.value.data;
|
||||||
|
this.optionsCollapse = this.value.setup;
|
||||||
|
this.optionsSetup = this.value.setup;
|
||||||
|
this.editorOptions();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 修改图标options属性
|
||||||
|
editorOptions() {
|
||||||
|
this.setOptionsTitle();
|
||||||
|
this.setOptionsX();
|
||||||
|
this.setOptionsY();
|
||||||
|
this.setOptionsTop();
|
||||||
|
this.setOptionsTooltip();
|
||||||
|
this.setOptionsMargin();
|
||||||
|
this.setOptionsColor();
|
||||||
|
this.setOptionsData();
|
||||||
|
},
|
||||||
|
// 标题修改
|
||||||
|
setOptionsTitle() {
|
||||||
|
const optionsSetup = this.optionsSetup;
|
||||||
|
const title = {};
|
||||||
|
title.text = optionsSetup.titleText;
|
||||||
|
title.show = optionsSetup.isNoTitle;
|
||||||
|
title.left = optionsSetup.textAlign;
|
||||||
|
title.textStyle = {
|
||||||
|
color: optionsSetup.textColor,
|
||||||
|
fontSize: optionsSetup.textFontSize,
|
||||||
|
fontWeight: optionsSetup.textFontWeight
|
||||||
|
};
|
||||||
|
title.subtext = optionsSetup.subText;
|
||||||
|
title.subtextStyle = {
|
||||||
|
color: optionsSetup.subTextColor,
|
||||||
|
fontWeight: optionsSetup.subTextFontWeight,
|
||||||
|
fontSize: optionsSetup.subTextFontSize
|
||||||
|
};
|
||||||
|
|
||||||
|
this.options.title = title;
|
||||||
|
},
|
||||||
|
// X轴设置
|
||||||
|
setOptionsX() {
|
||||||
|
const optionsSetup = this.optionsSetup;
|
||||||
|
const xAxis = {
|
||||||
|
type: "category",
|
||||||
|
show: optionsSetup.hideX, // 坐标轴是否显示
|
||||||
|
name: optionsSetup.xName, // 坐标轴名称
|
||||||
|
nameTextStyle: {
|
||||||
|
color: optionsSetup.xNameColor,
|
||||||
|
fontSize: optionsSetup.xNameFontSize
|
||||||
|
},
|
||||||
|
nameRotate: optionsSetup.textAngle, // 文字角度
|
||||||
|
inverse: optionsSetup.reversalX, // 轴反转
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
interval: optionsSetup.textInterval, // 文字角度
|
||||||
|
rotate: optionsSetup.textAngle, // 文字角度
|
||||||
|
textStyle: {
|
||||||
|
color: optionsSetup.Xcolor, // x轴 坐标文字颜色
|
||||||
|
fontSize: optionsSetup.fontSizeX
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: optionsSetup.lineColorX
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: optionsSetup.isShowSplitLineX,
|
||||||
|
lineStyle: {
|
||||||
|
color: optionsSetup.splitLineColorX
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
this.options.xAxis = xAxis;
|
||||||
|
},
|
||||||
|
// Y轴设置
|
||||||
|
setOptionsY() {
|
||||||
|
const optionsSetup = this.optionsSetup;
|
||||||
|
const yAxis = {
|
||||||
|
type: "value",
|
||||||
|
scale: optionsSetup.scale,
|
||||||
|
splitNumber: optionsSetup.splitNumber, // 均分
|
||||||
|
show: optionsSetup.isShowY, // 坐标轴是否显示
|
||||||
|
name: optionsSetup.textNameY, // 坐标轴名称
|
||||||
|
nameTextStyle: {
|
||||||
|
color: optionsSetup.nameColorY,
|
||||||
|
fontSize: optionsSetup.nameFontSizeY
|
||||||
|
},
|
||||||
|
inverse: optionsSetup.reversalY, // 轴反转
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
rotate: optionsSetup.ytextAngle, // 文字角度
|
||||||
|
textStyle: {
|
||||||
|
color: optionsSetup.colorY, // x轴 坐标文字颜色
|
||||||
|
fontSize: optionsSetup.fontSizeY
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: optionsSetup.lineColorY
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: optionsSetup.isShowSplitLineY,
|
||||||
|
lineStyle: {
|
||||||
|
color: optionsSetup.splitLineColorY
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
this.options.yAxis = yAxis;
|
||||||
|
},
|
||||||
|
// 数值设定 or 柱体设置
|
||||||
|
setOptionsTop() {
|
||||||
|
const optionsSetup = this.optionsSetup;
|
||||||
|
const series = this.options.series;
|
||||||
|
if (series[0].type == "bar") {
|
||||||
|
if (optionsSetup.verticalShow) {
|
||||||
|
series[0].label = {
|
||||||
|
show: optionsSetup.isShow,
|
||||||
|
position: "right",
|
||||||
|
distance: optionsSetup.distance,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: optionsSetup.fontSize,
|
||||||
|
color: optionsSetup.subTextColor,
|
||||||
|
fontWeight: optionsSetup.fontWeight
|
||||||
|
}
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
series[0].label = {
|
||||||
|
show: optionsSetup.isShow,
|
||||||
|
position: "top",
|
||||||
|
distance: optionsSetup.distance,
|
||||||
|
fontSize: optionsSetup.fontSize,
|
||||||
|
color: optionsSetup.subTextColor,
|
||||||
|
fontWeight: optionsSetup.fontWeight
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
series[0].barWidth = optionsSetup.maxWidth;
|
||||||
|
series[0].barMinHeight = optionsSetup.minHeight;
|
||||||
|
},
|
||||||
|
// tooltip 设置
|
||||||
|
setOptionsTooltip() {
|
||||||
|
const optionsSetup = this.optionsSetup;
|
||||||
|
const tooltip = {
|
||||||
|
trigger: "item",
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: optionsSetup.lineColor,
|
||||||
|
fontSize: optionsSetup.tipsFontSize
|
||||||
|
}
|
||||||
|
};
|
||||||
|
this.options.tooltip = tooltip;
|
||||||
|
},
|
||||||
|
// 边距设置
|
||||||
|
setOptionsMargin() {
|
||||||
|
const optionsSetup = this.optionsSetup;
|
||||||
|
const grid = {
|
||||||
|
left: optionsSetup.marginLeft,
|
||||||
|
right: optionsSetup.marginRight,
|
||||||
|
bottom: optionsSetup.marginBottom,
|
||||||
|
top: optionsSetup.marginTop,
|
||||||
|
containLabel: true
|
||||||
|
};
|
||||||
|
this.options.grid = grid;
|
||||||
|
},
|
||||||
|
// 图例颜色修改
|
||||||
|
setOptionsColor() {
|
||||||
|
const optionsSetup = this.optionsSetup;
|
||||||
|
const customColor = optionsSetup.customColor;
|
||||||
|
if (!customColor) return;
|
||||||
|
const arrColor = [];
|
||||||
|
for (let i = 0; i < customColor.length; i++) {
|
||||||
|
arrColor.push(customColor[i].color);
|
||||||
|
}
|
||||||
|
const itemStyle = {
|
||||||
|
normal: {
|
||||||
|
color: params => {
|
||||||
|
return arrColor[params.dataIndex];
|
||||||
|
},
|
||||||
|
barBorderRadius: optionsSetup.radius
|
||||||
|
}
|
||||||
|
};
|
||||||
|
for (const key in this.options.series) {
|
||||||
|
if (this.options.series[key].type == "bar") {
|
||||||
|
this.options.series[key].itemStyle = itemStyle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.options = Object.assign({}, this.options);
|
||||||
|
},
|
||||||
|
// 数据解析
|
||||||
|
setOptionsData() {
|
||||||
|
const optionsSetup = this.optionsSetup;
|
||||||
|
const optionsData = this.optionsData; // 数据类型 静态 or 动态
|
||||||
|
optionsData.dataType == "staticData"
|
||||||
|
? this.staticDataFn(optionsData.staticData)
|
||||||
|
: this.dynamicDataFn(
|
||||||
|
optionsData.dynamicData,
|
||||||
|
optionsData.refreshTime,
|
||||||
|
optionsSetup
|
||||||
|
);
|
||||||
|
},
|
||||||
|
// 静态数据
|
||||||
|
staticDataFn(val) {
|
||||||
|
const optionsSetup = this.optionsSetup;
|
||||||
|
const series = this.options.series;
|
||||||
|
let axis = [];
|
||||||
|
let data = [];
|
||||||
|
for (const i in val) {
|
||||||
|
axis[i] = val[i].axis;
|
||||||
|
data[i] = val[i].data;
|
||||||
|
}
|
||||||
|
// x轴
|
||||||
|
if (optionsSetup.verticalShow) {
|
||||||
|
this.options.xAxis.data = [];
|
||||||
|
this.options.yAxis.data = axis;
|
||||||
|
this.options.xAxis.type = "value";
|
||||||
|
this.options.yAxis.type = "category";
|
||||||
|
} else {
|
||||||
|
this.options.xAxis.data = axis;
|
||||||
|
this.options.yAxis.data = [];
|
||||||
|
this.options.xAxis.type = "category";
|
||||||
|
this.options.yAxis.type = "value";
|
||||||
|
}
|
||||||
|
if (series[0].type == "bar") {
|
||||||
|
series[0].data = data;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 动态数据
|
||||||
|
dynamicDataFn(val, refreshTime, optionsSetup) {
|
||||||
|
if (!val) return;
|
||||||
|
if (this.ispreview) {
|
||||||
|
this.getEchartData(val, optionsSetup);
|
||||||
|
this.flagInter = setInterval(() => {
|
||||||
|
this.getEchartData(val, optionsSetup);
|
||||||
|
}, refreshTime);
|
||||||
|
} else {
|
||||||
|
this.getEchartData(val, optionsSetup);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getEchartData(val, optionsSetup) {
|
||||||
|
const data = this.queryEchartsData(val);
|
||||||
|
data.then(res => {
|
||||||
|
this.renderingFn(optionsSetup, res);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
renderingFn(optionsSetup, val) {
|
||||||
|
// x轴
|
||||||
|
if (optionsSetup.verticalShow) {
|
||||||
|
this.options.xAxis.data = [];
|
||||||
|
this.options.yAxis.data = val.xAxis;
|
||||||
|
this.options.xAxis.type = "value";
|
||||||
|
this.options.yAxis.type = "category";
|
||||||
|
} else {
|
||||||
|
this.options.xAxis.data = val.xAxis;
|
||||||
|
this.options.yAxis.data = [];
|
||||||
|
this.options.xAxis.type = "category";
|
||||||
|
this.options.yAxis.type = "value";
|
||||||
|
}
|
||||||
|
// series
|
||||||
|
const series = this.options.series;
|
||||||
|
for (const i in series) {
|
||||||
|
if (series[i].type == "bar") {
|
||||||
|
series[i].name = val.series[i].name;
|
||||||
|
series[i].data = val.series[i].data;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.echarts {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue