ehs_tanghHe
/
tanghe-report
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新

Browse Source
qianlishi 2 years ago
parent 1bd50e3ac6
commit 1cb6b6469b
5 changed files with 112 additions and 91 deletions
Show Stats Download Patch File Download Diff File

8
report-ui/src/mixins/queryform.js
Unescape Escape View File

@ -1,6 +1,5 @@
import miment from 'miment' import miment from 'miment'
import {getData} from '@/api/bigscreen' import { getData } from '@/api/bigscreen'
export default { export default {
data() { data() {
return { return {
@ -59,6 +58,7 @@ export default {
}, },
computed: {}, computed: {},
created() { created() {
}, },
mounted() { mounted() {
}, },
@ -96,7 +96,7 @@ export default {
// 查询echarts 数据 // 查询echarts 数据
queryEchartsData(params) { queryEchartsData(params) {
return new Promise(async (resolve) => { return new Promise(async (resolve) => {
const {code, data} = await getData(params); const { code, data } = await getData(params);
if (code != 200) return if (code != 200) return
const analysisData = this.analysisChartsData(params, data); const analysisData = this.analysisChartsData(params, data);
resolve(analysisData) resolve(analysisData)
@ -277,7 +277,7 @@ export default {
// 字段名 // 字段名
const radarField = []; const radarField = [];
let nameField; let nameField;
for(const key in chartProperties) { for (const key in chartProperties) {
if (chartProperties[key] == 'radar') { if (chartProperties[key] == 'radar') {
radarField.push(key) radarField.push(key)
} }

17
report-ui/src/utils/screen.js
Unescape Escape View File

@ -1,3 +1,5 @@
import { eventBus } from "@/utils/eventBus";
export function setAssChartData(widgets, options) { export function setAssChartData(widgets, options) {
const selectOptions = options.filter(item => item.uuid).map(item => { const selectOptions = options.filter(item => item.uuid).map(item => {
return { return {
@ -15,3 +17,18 @@ export function setAssChartData(widgets, options) {
}) })
}) })
} }
export function eventBusParams(optionsSetup, optionsData, callback) {
eventBus.$on("eventParams", (formParams) => {
const uuid = optionsSetup.uuid;
if (formParams.assChart.includes(uuid)) {
const contextData = optionsData.dynamicData.contextData;
for (const key in contextData) {
if (formParams.hasOwnProperty(key)) {
contextData[key] = formParams[key];
}
}
callback(optionsData.dynamicData, optionsSetup)
}
});
}

22
report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.vue
Unescape Escape View File

@ -5,7 +5,7 @@
</template> </template>
<script> <script>
import { eventBus } from "@/utils/eventBus"; import { eventBusParams } from "@/utils/screen";
export default { export default {
name: "WidgetBarchart", name: "WidgetBarchart",
components: {}, components: {},
@ -89,20 +89,14 @@ export default {
this.optionsCollapse = this.value.setup; this.optionsCollapse = this.value.setup;
this.optionsSetup = this.value.setup; this.optionsSetup = this.value.setup;
this.editorOptions(); this.editorOptions();
eventBus.$on("params", (formParams) => {
const optionsSetup = this.optionsSetup; eventBusParams(
const optionsData = this.optionsData; this.optionsSetup,
const uuid = optionsSetup.uuid; this.optionsData,
if (formParams.assChart.includes(uuid)) { (dynamicData, optionsSetup) => {
const contextData = optionsData.dynamicData.contextData; this.getEchartData(dynamicData, optionsSetup);
for (const key in contextData) {
if (formParams.hasOwnProperty(key)) {
contextData[key] = formParams[key];
}
}
this.getEchartData(optionsData.dynamicData, optionsSetup);
} }
}); );
}, },
methods: { methods: {
// 修改图标options属性 // 修改图标options属性

154
report-ui/src/views/bigscreenDesigner/designer/widget/barline/widgetBarlinechart.vue
Unescape Escape View File

@ -1,16 +1,17 @@
<template> <template>
<div :style="styleObj"> <div :style="styleObj">
<v-chart :options="options" autoresize/> <v-chart :options="options" autoresize />
</div> </div>
</template> </template>
<script> <script>
import { eventBusParams } from "@/utils/screen";
export default { export default {
name: "WidgetBarlinechart", name: "WidgetBarlinechart",
components: {}, components: {},
props: { props: {
value: Object, value: Object,
ispreview: Boolean ispreview: Boolean,
}, },
data() { data() {
return { return {
@ -20,16 +21,16 @@ export default {
title: { title: {
text: "", text: "",
textStyle: { textStyle: {
color: "#fff" color: "#fff",
} },
}, },
tooltip: { tooltip: {
trigger: "item", trigger: "item",
formatter: "{a} <br/>{b} : {c}%" formatter: "{a} <br/>{b} : {c}%",
}, },
legend: { legend: {
textStyle: { textStyle: {
color: "#fff" color: "#fff",
}, },
}, },
xAxis: [ xAxis: [
@ -39,10 +40,10 @@ export default {
axisLabel: { axisLabel: {
show: false, show: false,
textStyle: { textStyle: {
color: "#fff" color: "#fff",
} },
} },
} },
], ],
yAxis: [ yAxis: [
{ {
@ -54,9 +55,9 @@ export default {
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
color: "#fff" color: "#fff",
} },
} },
}, },
{ {
type: "value", type: "value",
@ -67,10 +68,10 @@ export default {
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
color: "#fff" color: "#fff",
} },
} },
} },
], ],
series: [ series: [
{ {
@ -79,22 +80,22 @@ export default {
yAxisIndex: 0, yAxisIndex: 0,
data: [], data: [],
itemStyle: { itemStyle: {
barBorderRadius: null barBorderRadius: null,
} },
}, },
{ {
name: "", name: "",
type: "line", type: "line",
yAxisIndex: 1, yAxisIndex: 1,
data: [], data: [],
itemStyle: {} itemStyle: {},
} },
] ],
}, },
optionsStyle: {}, // 样式 optionsStyle: {}, // 样式
optionsData: {}, // 数据 optionsData: {}, // 数据
optionsCollapse: {}, // 图标属性 optionsCollapse: {}, // 图标属性
optionsSetup: {} optionsSetup: {},
}; };
}, },
computed: { computed: {
@ -105,9 +106,9 @@ export default {
height: this.optionsStyle.height + "px", height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px", left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px", top: this.optionsStyle.top + "px",
background: this.optionsSetup.background background: this.optionsSetup.background,
}; };
} },
}, },
watch: { watch: {
value: { value: {
@ -118,8 +119,8 @@ export default {
this.optionsSetup = val.setup; this.optionsSetup = val.setup;
this.editorOptions(); this.editorOptions();
}, },
deep: true deep: true,
} },
}, },
created() { created() {
this.optionsStyle = this.value.position; this.optionsStyle = this.value.position;
@ -127,6 +128,14 @@ export default {
this.optionsCollapse = this.value.collapse; this.optionsCollapse = this.value.collapse;
this.optionsSetup = this.value.setup; this.optionsSetup = this.value.setup;
this.editorOptions(); this.editorOptions();
eventBusParams(
this.optionsSetup,
this.optionsData,
(dynamicData, optionsSetup) => {
this.getEchartData(dynamicData, optionsSetup);
}
);
}, },
methods: { methods: {
// 修改图标options属性 // 修改图标options属性
@ -175,7 +184,7 @@ export default {
name: optionsSetup.nameX, name: optionsSetup.nameX,
nameTextStyle: { nameTextStyle: {
color: optionsSetup.nameColorX, color: optionsSetup.nameColorX,
fontSize: optionsSetup.nameFontSizeX fontSize: optionsSetup.nameFontSizeX,
}, },
// 轴反转 // 轴反转
inverse: optionsSetup.reversalX, inverse: optionsSetup.reversalX,
@ -188,23 +197,23 @@ export default {
textStyle: { textStyle: {
// 坐标文字颜色 // 坐标文字颜色
color: optionsSetup.colorX, color: optionsSetup.colorX,
fontSize: optionsSetup.fontSizeX fontSize: optionsSetup.fontSizeX,
} },
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: optionsSetup.lineColorX, color: optionsSetup.lineColorX,
width: optionsSetup.lineWidthX, width: optionsSetup.lineWidthX,
} },
}, },
splitLine: { splitLine: {
show: optionsSetup.isShowSplitLineX, show: optionsSetup.isShowSplitLineX,
lineStyle: { lineStyle: {
color: optionsSetup.splitLineColorX, color: optionsSetup.splitLineColorX,
width: optionsSetup.splitLineWidthX, width: optionsSetup.splitLineWidthX,
} },
} },
}; };
this.options.xAxis = xAxis; this.options.xAxis = xAxis;
}, },
@ -223,7 +232,7 @@ export default {
// 别名 // 别名
nameTextStyle: { nameTextStyle: {
color: optionsSetup.nameColorYLeft, color: optionsSetup.nameColorYLeft,
fontSize: optionsSetup.nameFontSizeYLeft fontSize: optionsSetup.nameFontSizeYLeft,
}, },
axisLabel: { axisLabel: {
show: true, show: true,
@ -232,10 +241,11 @@ export default {
textStyle: { textStyle: {
// 坐标文字颜色 // 坐标文字颜色
color: optionsSetup.colorYLeft, color: optionsSetup.colorYLeft,
fontSize: optionsSetup.fontSizeYLeft fontSize: optionsSetup.fontSizeYLeft,
} },
}, },
axisTick: { // 刻度 axisTick: {
// 刻度
show: optionsSetup.tickLineYLeft, show: optionsSetup.tickLineYLeft,
}, },
axisLine: { axisLine: {
@ -243,15 +253,15 @@ export default {
lineStyle: { lineStyle: {
width: optionsSetup.lineWidthYLeft, width: optionsSetup.lineWidthYLeft,
color: optionsSetup.lineColorYLeft, color: optionsSetup.lineColorYLeft,
} },
}, },
splitLine: { splitLine: {
show: optionsSetup.isShowSplitLineYLeft, show: optionsSetup.isShowSplitLineYLeft,
lineStyle: { lineStyle: {
color: optionsSetup.splitLineColorYLeft, color: optionsSetup.splitLineColorYLeft,
width: optionsSetup.splitLineFontWidthYLeft, width: optionsSetup.splitLineFontWidthYLeft,
} },
} },
}, },
{ {
type: "value", type: "value",
@ -264,7 +274,7 @@ export default {
// 别名 // 别名
nameTextStyle: { nameTextStyle: {
color: optionsSetup.nameColorYRight, color: optionsSetup.nameColorYRight,
fontSize: optionsSetup.nameFontSizeYRight fontSize: optionsSetup.nameFontSizeYRight,
}, },
axisLabel: { axisLabel: {
show: true, show: true,
@ -273,10 +283,11 @@ export default {
textStyle: { textStyle: {
// 坐标文字颜色 // 坐标文字颜色
color: optionsSetup.colorYRight, color: optionsSetup.colorYRight,
fontSize: optionsSetup.fontSizeYRight fontSize: optionsSetup.fontSizeYRight,
} },
}, },
axisTick: { // 刻度 axisTick: {
// 刻度
show: optionsSetup.tickLineYRight, show: optionsSetup.tickLineYRight,
}, },
axisLine: { axisLine: {
@ -284,16 +295,16 @@ export default {
lineStyle: { lineStyle: {
width: optionsSetup.lineWidthYRight, width: optionsSetup.lineWidthYRight,
color: optionsSetup.lineColorYRight, color: optionsSetup.lineColorYRight,
} },
}, },
splitLine: { splitLine: {
show: optionsSetup.isShowSplitLineYRight, show: optionsSetup.isShowSplitLineYRight,
lineStyle: { lineStyle: {
color: optionsSetup.splitLineColorYRight, color: optionsSetup.splitLineColorYRight,
width: optionsSetup.splitLineFontWidthYRight, width: optionsSetup.splitLineFontWidthYRight,
} },
} },
} },
]; ];
this.options.yAxis = yAxis; this.options.yAxis = yAxis;
}, },
@ -309,15 +320,15 @@ export default {
series[key].smooth = optionsSetup.smoothCurve; series[key].smooth = optionsSetup.smoothCurve;
if (optionsSetup.area) { if (optionsSetup.area) {
series[key].areaStyle = { series[key].areaStyle = {
opacity: optionsSetup.areaThickness / 100 opacity: optionsSetup.areaThickness / 100,
}; };
} else { } else {
series[key].areaStyle = { series[key].areaStyle = {
opacity: 0 opacity: 0,
}; };
} }
series[key].lineStyle = { series[key].lineStyle = {
width: optionsSetup.lineWidth width: optionsSetup.lineWidth,
}; };
series[key].itemStyle.borderRadius = optionsSetup.radius; series[key].itemStyle.borderRadius = optionsSetup.radius;
series[key].label = { series[key].label = {
@ -326,7 +337,7 @@ export default {
distance: optionsSetup.distanceLine, distance: optionsSetup.distanceLine,
fontSize: optionsSetup.fontSizeLine, fontSize: optionsSetup.fontSizeLine,
color: optionsSetup.subTextColorLine, color: optionsSetup.subTextColorLine,
fontWeight: optionsSetup.fontWeightLine fontWeight: optionsSetup.fontWeightLine,
}; };
} }
} }
@ -344,7 +355,7 @@ export default {
distance: optionsSetup.distanceBar, distance: optionsSetup.distanceBar,
fontSize: optionsSetup.fontSizeBar, fontSize: optionsSetup.fontSizeBar,
color: optionsSetup.subTextColorBar, color: optionsSetup.subTextColorBar,
fontWeight: optionsSetup.fontWeightBar fontWeight: optionsSetup.fontWeightBar,
}; };
series[key].barWidth = optionsSetup.maxWidth; series[key].barWidth = optionsSetup.maxWidth;
series[key].barMinHeight = optionsSetup.minHeight; series[key].barMinHeight = optionsSetup.minHeight;
@ -361,8 +372,8 @@ export default {
show: true, show: true,
textStyle: { textStyle: {
color: optionsSetup.tipsColor, color: optionsSetup.tipsColor,
fontSize: optionsSetup.tipsFontSize fontSize: optionsSetup.tipsFontSize,
} },
}; };
this.options.tooltip = tooltip; this.options.tooltip = tooltip;
}, },
@ -374,7 +385,7 @@ export default {
right: optionsSetup.marginRight, right: optionsSetup.marginRight,
bottom: optionsSetup.marginBottom, bottom: optionsSetup.marginBottom,
top: optionsSetup.marginTop, top: optionsSetup.marginTop,
containLabel: true containLabel: true,
}; };
this.options.grid = grid; this.options.grid = grid;
}, },
@ -384,32 +395,31 @@ export default {
legend.show = optionsSetup.isShowLegend; legend.show = optionsSetup.isShowLegend;
legend.left = optionsSetup.lateralPosition; legend.left = optionsSetup.lateralPosition;
legend.top = optionsSetup.longitudinalPosition; legend.top = optionsSetup.longitudinalPosition;
legend.bottom = legend.bottom = optionsSetup.longitudinalPosition;
optionsSetup.longitudinalPosition;
legend.orient = optionsSetup.layoutFront; legend.orient = optionsSetup.layoutFront;
legend.textStyle = { legend.textStyle = {
color: optionsSetup.legendColor, color: optionsSetup.legendColor,
fontSize: optionsSetup.legendFontSize fontSize: optionsSetup.legendFontSize,
}; };
legend.itemWidth = optionsSetup.legendWidth; legend.itemWidth = optionsSetup.legendWidth;
}, },
// 图例名称设置 // 图例名称设置
setOptionsLegendName(name){ setOptionsLegendName(name) {
const optionsSetup = this.optionsSetup; const optionsSetup = this.optionsSetup;
const series = this.options.series; const series = this.options.series;
const legendName = optionsSetup.legendName; const legendName = optionsSetup.legendName;
// 图例没有手动写则显示原值，写了则显示新值 // 图例没有手动写则显示原值，写了则显示新值
if (null == legendName || legendName == '') { if (null == legendName || legendName == "") {
for (let i = 0; i < name.length; i++) { for (let i = 0; i < name.length; i++) {
series[i].name = name[i]; series[i].name = name[i];
} }
this.options.legend['data'] = name; this.options.legend["data"] = name;
}else { } else {
const arr = legendName.split('|'); const arr = legendName.split("|");
for (let i = 0; i < arr.length; i++) { for (let i = 0; i < arr.length; i++) {
series[i].name = arr[i]; series[i].name = arr[i];
} }
this.options.legend['data'] = arr this.options.legend["data"] = arr;
} }
}, },
// 图例颜色修改 // 图例颜色修改
@ -452,9 +462,9 @@ export default {
} }
} }
const legendName = []; const legendName = [];
legendName.push('bar'); legendName.push("bar");
legendName.push('line'); legendName.push("line");
this.options.legend['data'] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);
}, },
dynamicDataFn(val, refreshTime) { dynamicDataFn(val, refreshTime) {
@ -470,7 +480,7 @@ export default {
}, },
getEchartData(val) { getEchartData(val) {
const data = this.queryEchartsData(val); const data = this.queryEchartsData(val);
data.then(res => { data.then((res) => {
this.renderingFn(res); this.renderingFn(res);
}); });
}, },
@ -487,10 +497,10 @@ export default {
} }
legendName.push(val.series[i].name); legendName.push(val.series[i].name);
} }
this.options.legend['data'] = legendName; this.options.legend["data"] = legendName;
this.setOptionsLegendName(legendName); this.setOptionsLegendName(legendName);
} },
} },
}; };
</script> </script>

2
report-ui/src/views/bigscreenDesigner/designer/widget/form/widgetSelect.vue
Unescape Escape View File

@ -65,7 +65,7 @@ export default {
const params = {}; const params = {};
params[optionsSetup.field] = event; params[optionsSetup.field] = event;
params["assChart"] = optionsSetup.assChart; params["assChart"] = optionsSetup.assChart;
eventBus.$emit("params", params); eventBus.$emit("eventParams", params);
}, },
}, },
}; };

Write Preview
Loading…
Cancel
Save