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