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

Merge remote-tracking branch 'origin/dev' into dev

Browse Source
qianming 2 years ago
parent b65a8be9ca 1cb6b6469b
commit 82f6d55a3e
9 changed files with 232 additions and 174 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)
} }

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 }

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

@ -0,0 +1,34 @@
import { eventBus } from "@/utils/eventBus";
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
}
})
})
}
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)
}
});
}

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: '',
}, },
], ],

114
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 { eventBusParams } from "@/utils/screen";
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,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();
eventBusParams(
this.optionsSetup,
this.optionsData,
(dynamicData, optionsSetup) => {
this.getEchartData(dynamicData, optionsSetup);
}
);
}, },
methods: { methods: {
// 修改图标options属性 // 修改图标options属性
@ -134,7 +143,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 +156,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 +190,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 +201,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 +229,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 +244,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 +259,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 +272,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 +287,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 +306,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 +316,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 +335,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 +351,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 +375,8 @@ export default {
series[i].data = val.series[i].data; series[i].data = val.series[i].data;
} }
} }
} },
} },
}; };
</script> </script>

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>

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("eventParams", params);
},
},
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

Write Preview
Loading…
Cancel
Save