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

添加下拉事件

Browse Source
qianlishi 2 years ago
parent 18bd9d5388
commit 1bd50e3ac6
7 changed files with 135 additions and 98 deletions
Show Stats Download Patch File Download Diff File

5
report-ui/src/utils/eventBus.js
Unescape Escape View File

@ -0,0 +1,5 @@
import Vue from 'vue'
const eventBus = new Vue()
export { eventBus }

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

@ -0,0 +1,17 @@
export function setAssChartData(widgets, options) {
const selectOptions = options.filter(item => item.uuid).map(item => {
return {
code: item.uuid,
name: item.label
}
})
widgets.forEach(item => {
const setup = item['options']['setup']
console.log(setup)
setup.forEach(sItem => {
if (sItem.name == 'assChart') {
sItem['selectOptions'] = selectOptions
}
})
})
}

3
report-ui/src/views/bigscreenDesigner/designer/components/dynamicForm.vue
Unescape Escape View File

@ -88,6 +88,7 @@
size="mini" size="mini"
:disabled="item.disabled" :disabled="item.disabled"
v-model="formData[item.name]" v-model="formData[item.name]"
:multiple="item.multiple"
clearable clearable
placeholder="请选择" placeholder="请选择"
@change="(val) => changed(val, item.name)" @change="(val) => changed(val, item.name)"
@ -384,6 +385,8 @@ export default {
}, },
// 无论哪个输入框改变 都需要触发事件 将值回传 // 无论哪个输入框改变 都需要触发事件 将值回传
changed(val, key) { changed(val, key) {
console.log(val);
console.log(key);
if (val.extend) { if (val.extend) {
this.$set(this.formData, key, val.value); this.$set(this.formData, key, val.value);
} else { } else {

11
report-ui/src/views/bigscreenDesigner/designer/index.vue
Unescape Escape View File

@ -312,6 +312,7 @@ import VueRulerTool from "vue-ruler-tool"; // 大屏设计页面的标尺插件
import contentMenu from "./components/contentMenu"; import contentMenu from "./components/contentMenu";
import { getToken } from "@/utils/auth"; import { getToken } from "@/utils/auth";
import { Revoke } from "@/utils/revoke"; //处理历史记录 2022-02-22 import { Revoke } from "@/utils/revoke"; //处理历史记录 2022-02-22
import { setAssChartData } from "@/utils/screen.js";
export default { export default {
name: "Login", name: "Login",
@ -444,7 +445,6 @@ export default {
watch: { watch: {
widgets: { widgets: {
handler(val) { handler(val) {
this.handlerLayerWidget(val);
//以下部分是记录历史 //以下部分是记录历史
this.$nextTick(() => { this.$nextTick(() => {
this.revoke.push(this.widgets); this.revoke.push(this.widgets);
@ -491,7 +491,7 @@ export default {
this.widgets = record; this.widgets = record;
}, },
handlerLayerWidget(val) { handlerLayerWidget(val) {
console.log(val) console.log(val);
const layerWidgetArr = []; const layerWidgetArr = [];
for (let i = 0; i < val.length; i++) { for (let i = 0; i < val.length; i++) {
const obj = {}; const obj = {};
@ -501,11 +501,14 @@ export default {
if (el.name == "layerName") { if (el.name == "layerName") {
obj.label = el.value; obj.label = el.value;
} }
if (el.name == "uuid") {
obj.uuid = el.value;
}
}); });
layerWidgetArr.push(obj); layerWidgetArr.push(obj);
} }
this.layerWidget = layerWidgetArr; this.layerWidget = layerWidgetArr;
console.log(this.layerWidget); setAssChartData(this.widgets, this.layerWidget);
}, },
async initEchartData() { async initEchartData() {
const reportCode = this.$route.query.reportCode; const reportCode = this.$route.query.reportCode;
@ -517,6 +520,7 @@ export default {
this.dashboard = screenData; this.dashboard = screenData;
this.bigscreenWidth = this.dashboard.width; this.bigscreenWidth = this.dashboard.width;
this.bigscreenHeight = this.dashboard.height; this.bigscreenHeight = this.dashboard.height;
this.handlerLayerWidget(this.widgets);
}, },
handleBigScreen(data) { handleBigScreen(data) {
const optionScreen = getToolByCode("screen").options; const optionScreen = getToolByCode("screen").options;
@ -746,6 +750,7 @@ export default {
this.setOptionsOnClickWidget(this.widgets.length - 1); this.setOptionsOnClickWidget(this.widgets.length - 1);
console.log("123", this.widgets); console.log("123", this.widgets);
this.handlerLayerWidget(this.widgets);
}, },
// 对组件默认值处理 // 对组件默认值处理

31
report-ui/src/views/bigscreenDesigner/designer/tools/configure/form/widget-select.js
Unescape Escape View File

@ -3,7 +3,7 @@
* @Author: qianlishi qianlishi@anji-plus.com * @Author: qianlishi qianlishi@anji-plus.com
* @Date: 2023-01-09 13:02:59 * @Date: 2023-01-09 13:02:59
* @LastEditors: qianlishi qianlishi@anji-plus.com * @LastEditors: qianlishi qianlishi@anji-plus.com
* @LastEditTime: 2023-01-10 09:40:53 * @LastEditTime: 2023-01-12 14:39:29
*/ */
export const widgetSelect = { export const widgetSelect = {
@ -24,11 +24,11 @@ export const widgetSelect = {
}, },
{ {
type: 'el-input-text', type: 'el-input-text',
label: '默认值', label: '字段属性值',
name: 'text', name: 'field',
required: false, required: false,
placeholder: '', placeholder: '请输入',
value: '超链接', value: '',
}, },
{ {
type: 'vue-color', type: 'vue-color',
@ -52,11 +52,8 @@ export const widgetSelect = {
name: 'assChart', name: 'assChart',
required: false, required: false,
placeholder: '', placeholder: '',
selectOptions: [ multiple: true,
{ code: 'center', name: '居中' }, selectOptions: [],
{ code: 'left', name: '左对齐' },
{ code: 'right', name: '右对齐' },
],
value: '', value: '',
}, },
{ {
@ -102,11 +99,11 @@ export const widgetSelect = {
relactiveDom: 'dataType', relactiveDom: 'dataType',
relactiveDomValue: 'staticData', relactiveDomValue: 'staticData',
value: [ value: [
{ "axis": "苹果", "data": 1000 }, { "name": "苹果", "code": 1000 },
{ "axis": "三星", "data": 2229 }, { "name": "三星", "code": 2229 },
{ "axis": "小米", "data": 3879 }, { "name": "小米", "code": 3879 },
{ "axis": "oppo", "data": 2379 }, { "name": "oppo", "code": 2379 },
{ "axis": "vivo", "data": 4079 }, { "name": "vivo", "code": 4079 },
], ],
}, },
{ {
@ -117,8 +114,8 @@ export const widgetSelect = {
placeholder: '', placeholder: '',
relactiveDom: 'dataType', relactiveDom: 'dataType',
relactiveDomValue: 'dynamicData', relactiveDomValue: 'dynamicData',
chartType: 'widget-barchart', chartType: 'widget-select',
dictKey: 'BAR_PROPERTIES', dictKey: 'SELECT_PROPERTIES',
value: '', value: '',
}, },
], ],

120
report-ui/src/views/bigscreenDesigner/designer/widget/bar/widgetBarchart.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 { eventBus } from "@/utils/eventBus";
export default { export default {
name: "WidgetBarchart", name: "WidgetBarchart",
components: {}, components: {},
props: { props: {
value: Object, value: Object,
ispreview: Boolean ispreview: Boolean,
}, },
data() { data() {
return { return {
@ -18,8 +19,8 @@ export default {
grid: {}, grid: {},
legend: { legend: {
textStyle: { textStyle: {
color: "#fff" color: "#fff",
} },
}, },
xAxis: { xAxis: {
type: "category", type: "category",
@ -27,9 +28,9 @@ export default {
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
color: "#fff" color: "#fff",
} },
} },
}, },
yAxis: { yAxis: {
type: "value", type: "value",
@ -37,9 +38,9 @@ export default {
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
color: "#fff" color: "#fff",
} },
} },
}, },
series: [ series: [
{ {
@ -47,15 +48,15 @@ export default {
type: "bar", type: "bar",
barGap: "0%", barGap: "0%",
itemStyle: { itemStyle: {
borderRadius: null borderRadius: null,
} },
} },
] ],
}, },
optionsStyle: {}, // 样式 optionsStyle: {}, // 样式
optionsData: {}, // 数据 optionsData: {}, // 数据
optionsSetup: {}, optionsSetup: {},
flagInter: null flagInter: null,
}; };
}, },
computed: { computed: {
@ -66,9 +67,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: {
@ -79,8 +80,8 @@ export default {
this.optionsSetup = val.setup; this.optionsSetup = val.setup;
this.editorOptions(); this.editorOptions();
}, },
deep: true deep: true,
} },
}, },
mounted() { mounted() {
this.optionsStyle = this.value.position; this.optionsStyle = this.value.position;
@ -88,6 +89,20 @@ 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;
const optionsData = this.optionsData;
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];
}
}
this.getEchartData(optionsData.dynamicData, optionsSetup);
}
});
}, },
methods: { methods: {
// 修改图标options属性 // 修改图标options属性
@ -134,7 +149,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,
@ -147,23 +162,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;
}, },
@ -181,7 +196,7 @@ export default {
name: optionsSetup.textNameY, name: optionsSetup.textNameY,
nameTextStyle: { nameTextStyle: {
color: optionsSetup.nameColorY, color: optionsSetup.nameColorY,
fontSize: optionsSetup.nameFontSizeY fontSize: optionsSetup.nameFontSizeY,
}, },
// 轴反转 // 轴反转
inverse: optionsSetup.reversalY, inverse: optionsSetup.reversalY,
@ -192,23 +207,23 @@ export default {
textStyle: { textStyle: {
// 坐标文字颜色 // 坐标文字颜色
color: optionsSetup.colorY, color: optionsSetup.colorY,
fontSize: optionsSetup.fontSizeY fontSize: optionsSetup.fontSizeY,
} },
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: optionsSetup.lineColorY, color: optionsSetup.lineColorY,
width: optionsSetup.lineWidthY, width: optionsSetup.lineWidthY,
} },
}, },
splitLine: { splitLine: {
show: optionsSetup.isShowSplitLineY, show: optionsSetup.isShowSplitLineY,
lineStyle: { lineStyle: {
color: optionsSetup.splitLineColorY, color: optionsSetup.splitLineColorY,
width: optionsSetup.splitLineWidthY, width: optionsSetup.splitLineWidthY,
} },
} },
}; };
this.options.yAxis = yAxis; this.options.yAxis = yAxis;
}, },
@ -220,14 +235,14 @@ export default {
if (optionsSetup.verticalShow) { if (optionsSetup.verticalShow) {
series[0].label = { series[0].label = {
show: optionsSetup.isShow, show: optionsSetup.isShow,
position: 'right', position: "right",
distance: optionsSetup.distance, distance: optionsSetup.distance,
textStyle: { textStyle: {
fontSize: optionsSetup.fontSize, fontSize: optionsSetup.fontSize,
color: optionsSetup.subTextColor, color: optionsSetup.subTextColor,
fontWeight: optionsSetup.fontWeight fontWeight: optionsSetup.fontWeight,
} },
} };
} else { } else {
series[0].label = { series[0].label = {
show: optionsSetup.isShow, show: optionsSetup.isShow,
@ -235,8 +250,8 @@ export default {
distance: optionsSetup.distance, distance: optionsSetup.distance,
fontSize: optionsSetup.fontSize, fontSize: optionsSetup.fontSize,
color: optionsSetup.subTextColor, color: optionsSetup.subTextColor,
fontWeight: optionsSetup.fontWeight fontWeight: optionsSetup.fontWeight,
} };
} }
} }
series[0].barWidth = optionsSetup.maxWidth; series[0].barWidth = optionsSetup.maxWidth;
@ -250,8 +265,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;
}, },
@ -263,7 +278,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;
}, },
@ -278,11 +293,11 @@ export default {
} }
const itemStyle = { const itemStyle = {
normal: { normal: {
color: params => { color: (params) => {
return arrColor[params.dataIndex]; return arrColor[params.dataIndex];
}, },
barBorderRadius: optionsSetup.radius barBorderRadius: optionsSetup.radius,
} },
}; };
for (const key in this.options.series) { for (const key in this.options.series) {
if (this.options.series[key].type == "bar") { if (this.options.series[key].type == "bar") {
@ -297,11 +312,7 @@ export default {
const optionsData = this.optionsData; // 数据类型 静态 or 动态 const optionsData = this.optionsData; // 数据类型 静态 or 动态
optionsData.dataType == "staticData" optionsData.dataType == "staticData"
? this.staticDataFn(optionsData.staticData) ? this.staticDataFn(optionsData.staticData)
: this.dynamicDataFn( : this.dynamicDataFn(optionsData.refreshTime);
optionsData.dynamicData,
optionsData.refreshTime,
optionsSetup
);
}, },
// 静态数据 // 静态数据
staticDataFn(val) { staticDataFn(val) {
@ -311,7 +322,7 @@ export default {
let data = []; let data = [];
for (const i in val) { for (const i in val) {
axis[i] = val[i].axis; axis[i] = val[i].axis;
data[i] = val[i].data data[i] = val[i].data;
} }
// x轴 // x轴
if (optionsSetup.verticalShow) { if (optionsSetup.verticalShow) {
@ -330,7 +341,10 @@ export default {
} }
}, },
// 动态数据 // 动态数据
dynamicDataFn(val, refreshTime, optionsSetup) { dynamicDataFn(refreshTime) {
const optionsSetup = this.optionsSetup;
const optionsData = this.optionsData;
const val = optionsData.dynamicData;
if (!val) return; if (!val) return;
if (this.ispreview) { if (this.ispreview) {
this.getEchartData(val, optionsSetup); this.getEchartData(val, optionsSetup);
@ -343,7 +357,7 @@ export default {
}, },
getEchartData(val, optionsSetup) { getEchartData(val, optionsSetup) {
const data = this.queryEchartsData(val); const data = this.queryEchartsData(val);
data.then(res => { data.then((res) => {
this.renderingFn(optionsSetup, res); this.renderingFn(optionsSetup, res);
}); });
}, },
@ -367,8 +381,8 @@ export default {
series[i].data = val.series[i].data; series[i].data = val.series[i].data;
} }
} }
} },
} },
}; };
</script> </script>

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

@ -4,11 +4,13 @@
:style="styleObj" :style="styleObj"
v-model="selectValue" v-model="selectValue"
:localOptions="options" :localOptions="options"
label="text" label="name"
option="id" option="code"
@[eventChange]="change"
/> />
</template> </template>
<script> <script>
import { eventBus } from "@/utils/eventBus";
export default { export default {
name: "WidgetSelect", name: "WidgetSelect",
props: { props: {
@ -17,28 +19,6 @@ export default {
}, },
data() { data() {
return { return {
options: [
{
id: "选项1",
text: "黄金糕",
},
{
id: "选项2",
text: "双皮奶",
},
{
id: "选项3",
text: "蚵仔煎",
},
{
id: "选项4",
text: "龙须面",
},
{
id: "选项5",
text: "北京烤鸭",
},
],
selectValue: "", selectValue: "",
optionsStyle: {}, optionsStyle: {},
optionsData: {}, optionsData: {},
@ -55,10 +35,18 @@ export default {
top: this.optionsStyle.top + "px", top: this.optionsStyle.top + "px",
}; };
}, },
options() {
const data = this.optionsData;
return data.dataType == "staticData" ? data.staticData : data.dynamicData;
},
eventChange() {
return this.optionsSetup.event || "change";
},
}, },
watch: { watch: {
value: { value: {
handler(val) { handler(val) {
console.log("val", val);
this.optionsSetup = val.setup; this.optionsSetup = val.setup;
this.optionsData = val.data; this.optionsData = val.data;
this.optionsStyle = val.position; this.optionsStyle = val.position;
@ -71,7 +59,15 @@ export default {
this.optionsData = this.value.data; this.optionsData = this.value.data;
this.optionsStyle = this.value.position; this.optionsStyle = this.value.position;
}, },
methods: {}, methods: {
change(event) {
const optionsSetup = this.optionsSetup;
const params = {};
params[optionsSetup.field] = event;
params["assChart"] = optionsSetup.assChart;
eventBus.$emit("params", params);
},
},
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

Write Preview
Loading…
Cancel
Save