wuguolin
/
smartbi2
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

百分比组件

Browse Source
dev
zhenghuang 4 years ago
parent e00a8a22b7
commit 5d7f1158d3
6 changed files with 569 additions and 381 deletions
Show Stats Download Patch File Download Diff File

6
backend/src/main/java/com/ipsos/provider/mysql/MysqlQueryProvider.java
Unescape Escape View File

@ -414,7 +414,7 @@ public class MysqlQueryProvider extends QueryProvider {
}
String fieldAlias = String.format(SQLConstants.FIELD_ALIAS_Y_PREFIX, i);
// 处理纵轴字段
yFields.add(getYFields(y, originField, fieldAlias));
yFields.add(getYFields(y, originField, fieldAlias, table));
// 处理纵轴过滤
yWheres.addAll(getYWheres(y, originField, fieldAlias));
// 处理纵轴排序
@ -528,7 +528,7 @@ public class MysqlQueryProvider extends QueryProvider {
}
String fieldAlias = String.format(SQLConstants.FIELD_ALIAS_Y_PREFIX, i);
// 处理纵轴字段
yFields.add(getYFields(y, originField, fieldAlias));
yFields.add(getYFields(y, originField, fieldAlias, table));
// 处理纵轴过滤
yWheres.addAll(getYWheres(y, originField, fieldAlias));
// 处理纵轴排序
@ -615,7 +615,7 @@ public class MysqlQueryProvider extends QueryProvider {
}
String fieldAlias = String.format(SQLConstants.FIELD_ALIAS_Y_PREFIX, i);
// 处理纵轴字段
yFields.add(getYFields(y, originField, fieldAlias));
yFields.add(getYFields(y, originField, fieldAlias, table));
// 处理纵轴过滤
yWheres.addAll(getYWheres(y, originField, fieldAlias));
// 处理纵轴排序

107
frontend/src/components/widget/DeWidget/DeDate.vue
Unescape Escape View File

@ -1,6 +1,6 @@
<template>
<el-date-picker
v-if="options!== null && options.attrs!==null"
v-if="options !== null && options.attrs !== null"
ref="dateRef"
v-model="options.value"
:type="options.attrs.type"
@ -9,89 +9,112 @@
:end-placeholder="$t(options.attrs.endPlaceholder)"
:placeholder="$t(options.attrs.placeholder)"
:append-to-body="inScreen"
style="min-height: 36px;"
style="min-height: 36px"
@change="dateChange"
/>
</template>
<script>
import { timeSection } from '@/utils'
import { timeSection } from "@/utils";
export default {
props: {
element: {
type: Object,
default: null
default: null,
},
inDraw: {
type: Boolean,
default: true
default: true,
},
inScreen: {
type: Boolean,
required: false,
default: true
}
default: true,
},
},
data() {
return {
options: null,
operator: 'between',
values: null
}
operator: "between",
values: null,
};
},
created() {
this.options = this.element.options
if ((this.options.attrs.type === 'date' || this.options.attrs.type === 'daterange') && Array.isArray(this.options.value) && this.options.value.length === 0) {
this.options.value = null
this.options = this.element.options;
if (this.options.attrs.type === "date") {
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
this.options.value = start;
console.log("date", this.options, start);
} else if (this.options.attrs.type === "daterange") {
const end = new Date();
end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 8);
this.options.value = [start, end];
console.log("daterange", this.options);
} else {
this.options.value = null;
}
if (
(this.options.attrs.type === "date" || this.options.attrs.type === "daterange") &&
Array.isArray(this.options.value) &&
this.options.value.length === 0
) {
this.options.value = null;
}
if (!!this.options && !!this.options.value && Object.keys(this.options.value).length === 0) {
this.options.value = null
if (
!!this.options &&
!!this.options.value &&
Object.keys(this.options.value).length === 0
) {
// this.options.value = null;
}
},
methods: {
search() {
this.setCondition()
this.setCondition();
},
setCondition() {
const param = {
component: this.element,
value: Array.isArray(this.options.value) ? this.options.value : [this.options.value],
operator: this.operator
}
param.value = this.formatValues(param.value)
this.inDraw && this.$store.commit('addViewFilter', param)
value: Array.isArray(this.options.value)
? this.options.value
: [this.options.value],
operator: this.operator,
};
param.value = this.formatValues(param.value);
this.inDraw && this.$store.commit("addViewFilter", param);
},
dateChange(value) {
this.setCondition()
this.styleChange()
this.setCondition();
this.styleChange();
},
formatValues(values) {
if (!values || values.length === 0) {
return []
return [];
}
if (this.options.attrs.type === 'daterange') {
if (this.options.attrs.type === "daterange") {
if (values.length !== 2) {
return null
return null;
}
let start = values[0]
let end = values[1]
start = timeSection(start, 'date')[0]
end = timeSection(end, 'date')[1]
const results = [start, end]
return results
let start = values[0];
let end = values[1];
start = timeSection(start, "date")[0];
end = timeSection(end, "date")[1];
const results = [start, end];
return results;
} else {
const value = values[0]
return timeSection(value, this.options.attrs.type)
const value = values[0];
return timeSection(value, this.options.attrs.type);
}
},
styleChange() {
this.$store.commit('recordStyleChange')
}
}
}
this.$store.commit("recordStyleChange");
},
},
};
</script>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>

181
frontend/src/views/chart/components/ChartComponent.vue
Unescape Escape View File

@ -1,7 +1,17 @@
<template>
<div style="display: flex;">
<view-track-bar ref="viewTrack" :track-menu="trackMenu" class="track-bar" :style="trackBarStyleTime" @trackClick="trackClick" />
<div :id="chartId" style="width: 100%;height: 100%;overflow: hidden;" :style="{ borderRadius: borderRadius}" />
<div style="display: flex">
<view-track-bar
ref="viewTrack"
:track-menu="trackMenu"
class="track-bar"
:style="trackBarStyleTime"
@trackClick="trackClick"
/>
<div
:id="chartId"
style="width: 100%; height: 100%; overflow: hidden"
:style="{ borderRadius: borderRadius }"
/>
</div>
</template>
@ -19,7 +29,12 @@ import {
BASE_TREEMAP,
BASE_MIX
} from '../chart/chart'
import { baseBarOption, stackBarOption, horizontalBarOption, horizontalStackBarOption } from '../chart/bar/bar'
import {
baseBarOption,
stackBarOption,
horizontalBarOption,
horizontalStackBarOption
} from '../chart/bar/bar'
import { baseLineOption, stackLineOption } from '../chart/line/line'
import { basePieOption, rosePieOption } from '../chart/pie/pie'
import { baseMapOption } from '../chart/map/map'
@ -101,22 +116,30 @@ export default {
// 基于准备好的dom，初始化echarts实例
// 渲染echart等待dom加载完毕,渲染之前先尝试销毁具有相同id的echart 放置多次切换仪表板有重复id情况
const that = this
new Promise((resolve) => { resolve() }).then(() => {
new Promise((resolve) => {
resolve()
}).then(() => {
// 此dom为echarts图标展示dom
this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
this.myChart = this.$echarts.getInstanceByDom(
document.getElementById(this.chartId)
)
if (!this.myChart) {
this.myChart = this.$echarts.init(document.getElementById(this.chartId))
this.myChart = this.$echarts.init(
document.getElementById(this.chartId)
)
}
this.drawEcharts()
this.myChart.off('click')
this.myChart.on('click', function(param) {
that.pointParam = param
if (that.trackMenu.length < 2) { // 只有一个事件直接调用
if (that.trackMenu.length < 2) {
// 只有一个事件直接调用
that.trackClick(that.trackMenu[0])
} else { // 视图关联多个事件
} else {
// 视图关联多个事件
that.trackBarStyle.left = param.event.offsetX + 'px'
that.trackBarStyle.top = (param.event.offsetY - 15) + 'px'
that.trackBarStyle.top = param.event.offsetY - 15 + 'px'
that.$refs.viewTrack.trackButtonClick()
}
})
@ -127,33 +150,75 @@ export default {
let chart_option = {}
// type
if (chart.type === 'bar') {
chart_option = baseBarOption(JSON.parse(JSON.stringify(BASE_BAR)), chart)
chart_option = baseBarOption(
JSON.parse(JSON.stringify(BASE_BAR)),
chart
)
} else if (chart.type === 'bar-stack') {
chart_option = stackBarOption(JSON.parse(JSON.stringify(BASE_BAR)), chart)
chart_option = stackBarOption(
JSON.parse(JSON.stringify(BASE_BAR)),
chart
)
} else if (chart.type === 'bar-horizontal') {
chart_option = horizontalBarOption(JSON.parse(JSON.stringify(HORIZONTAL_BAR)), chart)
chart_option = horizontalBarOption(
JSON.parse(JSON.stringify(HORIZONTAL_BAR)),
chart
)
} else if (chart.type === 'bar-stack-horizontal') {
chart_option = horizontalStackBarOption(JSON.parse(JSON.stringify(HORIZONTAL_BAR)), chart)
chart_option = horizontalStackBarOption(
JSON.parse(JSON.stringify(HORIZONTAL_BAR)),
chart
)
} else if (chart.type === 'line') {
chart_option = baseLineOption(JSON.parse(JSON.stringify(BASE_LINE)), chart)
chart_option = baseLineOption(
JSON.parse(JSON.stringify(BASE_LINE)),
chart
)
} else if (chart.type === 'line-stack') {
chart_option = stackLineOption(JSON.parse(JSON.stringify(BASE_LINE)), chart)
chart_option = stackLineOption(
JSON.parse(JSON.stringify(BASE_LINE)),
chart
)
} else if (chart.type === 'pie') {
chart_option = basePieOption(JSON.parse(JSON.stringify(BASE_PIE)), chart)
chart_option = basePieOption(
JSON.parse(JSON.stringify(BASE_PIE)),
chart
)
} else if (chart.type === 'pie-rose') {
chart_option = rosePieOption(JSON.parse(JSON.stringify(BASE_PIE)), chart)
chart_option = rosePieOption(
JSON.parse(JSON.stringify(BASE_PIE)),
chart
)
} else if (chart.type === 'funnel') {
chart_option = baseFunnelOption(JSON.parse(JSON.stringify(BASE_FUNNEL)), chart)
chart_option = baseFunnelOption(
JSON.parse(JSON.stringify(BASE_FUNNEL)),
chart
)
} else if (chart.type === 'radar') {
chart_option = baseRadarOption(JSON.parse(JSON.stringify(BASE_RADAR)), chart)
chart_option = baseRadarOption(
JSON.parse(JSON.stringify(BASE_RADAR)),
chart
)
} else if (chart.type === 'gauge') {
chart_option = baseGaugeOption(JSON.parse(JSON.stringify(BASE_GAUGE)), chart)
chart_option = baseGaugeOption(
JSON.parse(JSON.stringify(BASE_GAUGE)),
chart
)
} else if (chart.type === 'scatter') {
chart_option = baseScatterOption(JSON.parse(JSON.stringify(BASE_SCATTER)), chart)
chart_option = baseScatterOption(
JSON.parse(JSON.stringify(BASE_SCATTER)),
chart
)
} else if (chart.type === 'treemap') {
chart_option = baseTreemapOption(JSON.parse(JSON.stringify(BASE_TREEMAP)), chart)
chart_option = baseTreemapOption(
JSON.parse(JSON.stringify(BASE_TREEMAP)),
chart
)
} else if (chart.type === 'chart-mix') {
chart_option = baseMixOption(JSON.parse(JSON.stringify(BASE_MIX)), chart)
chart_option = baseMixOption(
JSON.parse(JSON.stringify(BASE_MIX)),
chart
)
}
// console.log(JSON.stringify(chart_option))
@ -167,13 +232,15 @@ export default {
return
}
geoJson(cCode).then(res => {
this.$store.dispatch('map/setGeo', {
key: cCode,
value: res
}).then(() => {
this.initMapChart(res, chart)
})
geoJson(cCode).then((res) => {
this.$store
.dispatch('map/setGeo', {
key: cCode,
value: res
})
.then(() => {
this.initMapChart(res, chart)
})
})
return
}
@ -181,25 +248,25 @@ export default {
},
registerDynamicMap(areaCode) {
this.dynamicAreaCode = areaCode
// if (this.$store.getters.geoMap[areaCode]) {
// const json = this.$store.getters.geoMap[areaCode]
// this.myChart.dispose()
// this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
// this.$echarts.registerMap('MAP', json)
// return
// }
// geoJson(areaCode).then(res => {
// this.$store.dispatch('map/setGeo', {
// key: areaCode,
// value: res
// }).then(() => {
// this.myChart.dispose()
// this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
// this.$echarts.registerMap('MAP', res)
// })
// }).catch(() => {
// this.downOrUp = true
// })
// if (this.$store.getters.geoMap[areaCode]) {
// const json = this.$store.getters.geoMap[areaCode]
// this.myChart.dispose()
// this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
// this.$echarts.registerMap('MAP', json)
// return
// }
// geoJson(areaCode).then(res => {
// this.$store.dispatch('map/setGeo', {
// key: areaCode,
// value: res
// }).then(() => {
// this.myChart.dispose()
// this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
// this.$echarts.registerMap('MAP', res)
// })
// }).catch(() => {
// this.downOrUp = true
// })
},
initMapChart(geoJson, chart) {
@ -213,6 +280,16 @@ export default {
// 指定图表的配置项和数据
const chart = this.myChart
this.setBackGroundBorder()
if (
option.series &&
option.series.length > 0 &&
option.series[0].type === 'gauge'
) {
if (option.series[0].data && option.series[0].data.length > 0) {
option.series[0].max = option.series[0].data[0].value
}
}
console.log('哈哈哈', option)
setTimeout(chart.setOption(option, true), 500)
window.onresize = function() {
chart.resize()
@ -267,6 +344,4 @@ export default {
}
</script>
<style scoped>
</style>
<style scoped></style>

24
frontend/src/views/chart/components/ChartComponentG2.vue
Unescape Escape View File

@ -1,7 +1,17 @@
<template>
<div style="display: flex;">
<view-track-bar ref="viewTrack" :track-menu="trackMenu" class="track-bar" :style="trackBarStyleTime" @trackClick="trackClick" />
<div :id="chartId" style="width: 100%;height: 100%;overflow: hidden;" :style="{ borderRadius: borderRadius}" />
<div style="display: flex">
<view-track-bar
ref="viewTrack"
:track-menu="trackMenu"
class="track-bar"
:style="trackBarStyleTime"
@trackClick="trackClick"
/>
<div
:id="chartId"
style="width: 100%; height: 100%; overflow: hidden"
:style="{ borderRadius: borderRadius }"
/>
</div>
</template>
@ -74,7 +84,9 @@ export default {
preDraw() {
// 基于准备好的dom，初始化echarts实例
// 渲染echart等待dom加载完毕,渲染之前先尝试销毁具有相同id的echart 放置多次切换仪表板有重复id情况
new Promise((resolve) => { resolve() }).then(() => {
new Promise((resolve) => {
resolve()
}).then(() => {
// 此dom为echarts图标展示dom
// this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
// if (!this.myChart) {
@ -157,6 +169,4 @@ export default {
}
</script>
<style scoped>
</style>
<style scoped></style>

308
frontend/src/views/chart/components/table/TableNormal.vue
Unescape Escape View File

@ -38,11 +38,11 @@
<el-row v-show="chart.type === 'table-info'" class="table-page">
<span class="total-style">
{{ $t("chart.total") }}
{{ $t('chart.total') }}
<span>{{
chart.data && chart.data.tableRow ? chart.data.tableRow.length : 0
}}</span>
{{ $t("chart.items") }}
{{ $t('chart.items') }}
</span>
<el-pagination
small
@ -62,198 +62,212 @@
</template>
<script>
import { hexColorToRGBA } from "../../chart/util";
import eventBus from "@/components/canvas/utils/eventBus";
import { hexColorToRGBA } from '../../chart/util'
import eventBus from '@/components/canvas/utils/eventBus'
export default {
name: "TableNormal",
name: 'TableNormal',
props: {
chart: {
type: Object,
required: true,
required: true
},
filter: {
type: Object,
required: false,
default: function () {
return {};
},
default: function() {
return {}
}
},
showSummary: {
type: Boolean,
required: false,
default: true,
},
default: true
}
},
data() {
return {
fields: [],
height: "auto",
height: 'auto',
title_class: {
margin: "0 0",
width: "100%",
fontSize: "18px",
color: "#303133",
textAlign: "left",
fontStyle: "normal",
fontWeight: "normal",
margin: '0 0',
width: '100%',
fontSize: '18px',
color: '#303133',
textAlign: 'left',
fontStyle: 'normal',
fontWeight: 'normal'
},
// bg_class: {
// background: hexColorToRGBA('#ffffff', 0),
// borderRadius: this.borderRadius
// },
table_header_class: {
fontSize: "12px",
color: "#606266",
background: "#e8eaec",
height: "36px",
fontSize: '12px',
color: '#606266',
background: '#e8eaec',
height: '36px'
},
table_item_class: {
fontSize: "12px",
color: "#606266",
background: "#ffffff",
height: "36px",
fontSize: '12px',
color: '#606266',
background: '#ffffff',
height: '36px'
},
table_item_class_stripe: {
fontSize: "12px",
color: "#606266",
background: "#ffffff",
height: "36px",
fontSize: '12px',
color: '#606266',
background: '#ffffff',
height: '36px'
},
title_show: true,
borderRadius: "0px",
borderRadius: '0px',
currentPage: {
page: 1,
pageSize: 10,
show: 0,
},
};
show: 0
}
}
},
computed: {
bg_class() {
return {
background: hexColorToRGBA("#ffffff", 0),
borderRadius: this.borderRadius,
};
},
background: hexColorToRGBA('#ffffff', 0),
borderRadius: this.borderRadius
}
}
},
watch: {
chart: function () {
this.init();
},
chart: function() {
this.init()
}
},
mounted() {
this.init();
this.init()
// 监听元素变动事件
eventBus.$on("resizing", (componentId) => {
this.chartResize();
});
eventBus.$on('resizing', (componentId) => {
this.chartResize()
})
},
methods: {
init() {
this.resetHeight();
this.resetHeight()
this.$nextTick(() => {
this.initData();
this.calcHeightDelay();
});
this.setBackGroundBorder();
this.initData()
this.calcHeightDelay()
})
this.setBackGroundBorder()
},
setBackGroundBorder() {
if (this.chart.customStyle) {
const customStyle = JSON.parse(this.chart.customStyle);
const customStyle = JSON.parse(this.chart.customStyle)
if (customStyle.background) {
this.borderRadius = (customStyle.background.borderRadius || 0) + "px";
this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
}
}
},
initData() {
const that = this;
let datas = [];
const that = this
let datas = []
if (this.chart.data) {
this.fields = JSON.parse(JSON.stringify(this.chart.data.fields));
datas = JSON.parse(JSON.stringify(this.chart.data.tableRow));
if (this.chart.type === "table-info") {
this.fields = JSON.parse(JSON.stringify(this.chart.data.fields))
const yAxis = JSON.parse(this.chart.yaxis)
if (yAxis && yAxis.length > 0) {
yAxis.forEach((item) => {
console.log(11, item)
if (item.summary == 'ratio') {
this.chart.data.tableRow.forEach((tableRow) => {
console.log(33, tableRow)
tableRow[item.dataeaseName] += '%'
})
}
})
}
console.log(321123, yAxis)
console.log(123123, this.chart)
datas = JSON.parse(JSON.stringify(this.chart.data.tableRow))
if (this.chart.type === 'table-info') {
// 计算分页
this.currentPage.show = datas.length;
this.currentPage.show = datas.length
const pageStart =
(this.currentPage.page - 1) * this.currentPage.pageSize;
const pageEnd = pageStart + this.currentPage.pageSize;
datas = datas.slice(pageStart, pageEnd);
(this.currentPage.page - 1) * this.currentPage.pageSize
const pageEnd = pageStart + this.currentPage.pageSize
datas = datas.slice(pageStart, pageEnd)
}
} else {
this.fields = [];
datas = [];
this.resetPage();
this.fields = []
datas = []
this.resetPage()
}
this.$refs.plxTable.reloadData(datas);
this.$refs.plxTable.reloadData(datas)
this.$nextTick(() => {
this.initStyle();
});
window.onresize = function () {
that.calcHeightDelay();
};
this.initStyle()
})
window.onresize = function() {
that.calcHeightDelay()
}
},
calcHeightRightNow() {
this.$nextTick(() => {
if (this.$refs.tableContainer) {
let pageHeight = 0;
if (this.chart.type === "table-info") {
pageHeight = 36;
let pageHeight = 0
if (this.chart.type === 'table-info') {
pageHeight = 36
}
const currentHeight = this.$refs.tableContainer.offsetHeight;
const currentHeight = this.$refs.tableContainer.offsetHeight
const tableMaxHeight =
currentHeight - this.$refs.title.offsetHeight - 16 - pageHeight;
let tableHeight;
currentHeight - this.$refs.title.offsetHeight - 16 - pageHeight
let tableHeight
if (this.chart.data) {
if (this.chart.type === "table-info") {
tableHeight = (this.currentPage.pageSize + 2) * 36 - pageHeight;
if (this.chart.type === 'table-info') {
tableHeight = (this.currentPage.pageSize + 2) * 36 - pageHeight
} else {
tableHeight =
(this.chart.data.tableRow.length + 2) * 36 - pageHeight;
(this.chart.data.tableRow.length + 2) * 36 - pageHeight
}
} else {
tableHeight = 0;
tableHeight = 0
}
if (tableHeight > tableMaxHeight) {
this.height = tableMaxHeight + "px";
this.height = tableMaxHeight + 'px'
} else {
this.height = "auto";
this.height = 'auto'
}
}
});
})
},
calcHeightDelay() {
setTimeout(() => {
this.calcHeightRightNow();
}, 100);
this.calcHeightRightNow()
}, 100)
},
initStyle() {
if (this.chart.customAttr) {
const customAttr = JSON.parse(this.chart.customAttr);
const customAttr = JSON.parse(this.chart.customAttr)
if (customAttr.color) {
this.table_header_class.color = customAttr.color.tableFontColor;
this.table_header_class.color = customAttr.color.tableFontColor
this.table_header_class.background = hexColorToRGBA(
customAttr.color.tableHeaderBgColor,
customAttr.color.alpha
);
this.table_item_class.color = customAttr.color.tableFontColor;
)
this.table_item_class.color = customAttr.color.tableFontColor
this.table_item_class.background = hexColorToRGBA(
customAttr.color.tableItemBgColor,
customAttr.color.alpha
);
)
}
if (customAttr.size) {
this.table_header_class.fontSize =
customAttr.size.tableTitleFontSize + "px";
customAttr.size.tableTitleFontSize + 'px'
this.table_item_class.fontSize =
customAttr.size.tableItemFontSize + "px";
customAttr.size.tableItemFontSize + 'px'
this.table_header_class.height =
customAttr.size.tableTitleHeight + "px";
this.table_item_class.height = customAttr.size.tableItemHeight + "px";
customAttr.size.tableTitleHeight + 'px'
this.table_item_class.height = customAttr.size.tableItemHeight + 'px'
}
this.table_item_class_stripe = JSON.parse(
JSON.stringify(this.table_item_class)
);
)
// 暂不支持斑马纹
// if (customAttr.color.tableStripe) {
// // this.table_item_class_stripe.background = hexColorToRGBA(customAttr.color.tableItemBgColor, customAttr.color.alpha - 40)
@ -266,121 +280,133 @@ export default {
// }
}
if (this.chart.customStyle) {
const customStyle = JSON.parse(this.chart.customStyle);
const customStyle = JSON.parse(this.chart.customStyle)
if (customStyle.text) {
this.title_show = customStyle.text.show;
this.title_class.fontSize = customStyle.text.fontSize + "px";
this.title_class.color = customStyle.text.color;
this.title_class.textAlign = customStyle.text.hPosition;
this.title_show = customStyle.text.show
this.title_class.fontSize = customStyle.text.fontSize + 'px'
this.title_class.color = customStyle.text.color
this.title_class.textAlign = customStyle.text.hPosition
this.title_class.fontStyle = customStyle.text.isItalic
? "italic"
: "normal";
? 'italic'
: 'normal'
this.title_class.fontWeight = customStyle.text.isBolder
? "bold"
: "normal";
? 'bold'
: 'normal'
}
if (customStyle.background) {
this.bg_class.background = hexColorToRGBA(
customStyle.background.color,
customStyle.background.alpha
);
)
}
}
// 修改footer合计样式
const table = document.getElementsByClassName(this.chart.id);
const table = document.getElementsByClassName(this.chart.id)
for (let i = 0; i < table.length; i++) {
const s_table = table[i].getElementsByClassName("elx-table--footer");
const s_table = table[i].getElementsByClassName('elx-table--footer')
// console.log(s_table)
let s = "";
let s = ''
for (const i in this.table_header_class) {
s +=
(i === "fontSize" ? "font-size" : i) +
":" +
(i === 'fontSize' ? 'font-size' : i) +
':' +
this.table_header_class[i] +
";";
';'
}
// console.log(s_table)
for (let i = 0; i < s_table.length; i++) {
s_table[i].setAttribute("style", s);
s_table[i].setAttribute('style', s)
}
}
},
getRowStyle({ row, rowIndex }) {
if (rowIndex % 2 !== 0) {
return this.table_item_class_stripe;
return this.table_item_class_stripe
} else {
return this.table_item_class;
return this.table_item_class
}
},
summaryMethod({ columns, data }) {
const that = this;
const means = []; // 合计
const that = this
const means = [] // 合计
columns.forEach((column, columnIndex) => {
if (columnIndex === 0) {
means.push("合计");
means.push('合计')
} else {
let isRatio = false
if (
columnIndex >=
that.chart.data.fields.length - that.chart.data.series.length
) {
const values = data.map((item) => Number(item[column.property]));
const values = data.map((item) => {
let a = item[column.property]
if (a.indexOf('%') >= 0) {
a = a.replace('%', '')
isRatio = true
}
return Number(a)
})
// 合计
if (!values.every((value) => isNaN(value))) {
means[columnIndex] = values.reduce((prev, curr) => {
const value = Number(curr);
const value = Number(curr)
if (!isNaN(value)) {
return prev + curr;
return prev + curr
} else {
return prev;
return prev
}
}, 0);
means[columnIndex] = (means[columnIndex] + "").includes(".")
}, 0)
means[columnIndex] = (means[columnIndex] + '').includes('.')
? means[columnIndex].toFixed(2)
: means[columnIndex];
: means[columnIndex]
if (isRatio) {
means[columnIndex] += '%'
}
} else {
means[columnIndex] = "";
means[columnIndex] = ''
}
} else {
means[columnIndex] = "";
means[columnIndex] = ''
}
}
});
})
// 返回一个二维数组的表尾合计(不要平均值，就不要在数组中添加)
return [means];
return [means]
},
chartResize() {
// 指定图表的配置项和数据
this.calcHeightDelay();
this.calcHeightDelay()
},
initClass() {
return this.chart.id;
return this.chart.id
},
resetHeight() {
this.height = 100;
this.height = 100
},
pageChange(val) {
this.currentPage.pageSize = val;
this.init();
this.currentPage.pageSize = val
this.init()
},
pageClick(val) {
this.currentPage.page = val;
this.init();
this.currentPage.page = val
this.init()
},
resetPage() {
this.currentPage = {
page: 1,
pageSize: 10,
show: 0,
};
},
},
};
show: 0
}
}
}
}
</script>
<style scoped>

324
frontend/src/views/panel/list/PanelViewShow.vue
Unescape Escape View File

@ -1,68 +1,100 @@
<template>
<el-row style="height: 100%;width: 100%;">
<el-col v-if="panelInfo.name.length>0" class="panel-design">
<el-row style="height: 100%; width: 100%">
<el-col v-if="panelInfo.name.length > 0" class="panel-design">
<el-row class="panel-design-head">
<!--仪表板头部区域-->
<div style="border-bottom: 1px solid #dfe4ed;height: 100%;">
<el-col :span="12" style="text-overflow:ellipsis;overflow: hidden;white-space: nowrap;font-size: 14px">
<div style="border-bottom: 1px solid #dfe4ed; height: 100%">
<el-col
:span="12"
style="
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: 14px;
"
>
<span>{{ panelInfo.name || '测试仪表板' }}</span>
&nbsp;
<span v-if="panelInfo.isDefault" style="color: green;font-size: 12px">({{ $t('panel.default_panel_name') }}:{{ panelInfo.defaultPanelName }})</span>
<span v-if="panelInfo.sourcePanelName" style="color: green;font-size: 12px">({{ $t('panel.source_panel_name') }}:{{ panelInfo.sourcePanelName }})</span>
<span
v-if="panelInfo.isDefault"
style="color: green; font-size: 12px"
>({{ $t('panel.default_panel_name') }}:{{
panelInfo.defaultPanelName
}})</span>
<span
v-if="panelInfo.sourcePanelName"
style="color: green; font-size: 12px"
>({{ $t('panel.source_panel_name') }}:{{
panelInfo.sourcePanelName
}})</span>
</el-col>
<!-- <el-col :span="12">-->
<!-- <span v-if="hasDataPermission('export',panelInfo.privileges)" style="float: right;margin-right: 10px">-->
<!-- <el-tooltip :content="$t('panel.save_to_panel')">-->
<!-- <el-button class="el-icon-folder-checked" size="mini" circle @click="saveToTemplate" />-->
<!-- </el-tooltip>-->
<!-- </span>-->
<!-- <span v-if="hasDataPermission('export',panelInfo.privileges)" style="float: right;margin-right: 10px">-->
<!-- <el-tooltip :content="$t('panel.export_to_panel')">-->
<!-- <el-button class="el-icon-download" size="mini" circle @click="downloadToTemplate" />-->
<!-- </el-tooltip>-->
<!-- </span>-->
<!-- <span v-if="hasDataPermission('export',panelInfo.privileges)" style="float: right;margin-right: 10px">-->
<!-- <el-tooltip :content="$t('panel.export_to_pdf')">-->
<!-- <el-button class="el-icon-notebook-2" size="mini" circle @click="downloadAsPDF" />-->
<!-- </el-tooltip>-->
<!-- </span>-->
<!-- <span style="float: right;margin-right: 10px">-->
<!-- <el-tooltip :content="$t('panel.fullscreen_preview')">-->
<!-- <el-button class="el-icon-view" size="mini" circle @click="clickFullscreen" />-->
<!-- </el-tooltip>-->
<!-- </span>-->
<!-- <el-col :span="12">-->
<!-- <span v-if="hasDataPermission('export',panelInfo.privileges)" style="float: right;margin-right: 10px">-->
<!-- <el-tooltip :content="$t('panel.save_to_panel')">-->
<!-- <el-button class="el-icon-folder-checked" size="mini" circle @click="saveToTemplate" />-->
<!-- </el-tooltip>-->
<!-- </span>-->
<!-- <span v-if="hasDataPermission('export',panelInfo.privileges)" style="float: right;margin-right: 10px">-->
<!-- <el-tooltip :content="$t('panel.export_to_panel')">-->
<!-- <el-button class="el-icon-download" size="mini" circle @click="downloadToTemplate" />-->
<!-- </el-tooltip>-->
<!-- </span>-->
<!-- <span v-if="hasDataPermission('export',panelInfo.privileges)" style="float: right;margin-right: 10px">-->
<!-- <el-tooltip :content="$t('panel.export_to_pdf')">-->
<!-- <el-button class="el-icon-notebook-2" size="mini" circle @click="downloadAsPDF" />-->
<!-- </el-tooltip>-->
<!-- </span>-->
<!-- <span style="float: right;margin-right: 10px">-->
<!-- <el-tooltip :content="$t('panel.fullscreen_preview')">-->
<!-- <el-button class="el-icon-view" size="mini" circle @click="clickFullscreen" />-->
<!-- </el-tooltip>-->
<!-- </span>-->
<!-- <span style="float: right;margin-right: 10px">-->
<!-- <el-tooltip :content="$t('panel.new_tab_preview')">-->
<!-- <el-button class="el-icon-data-analysis" size="mini" circle @click="newTab" />-->
<!-- </el-tooltip>-->
<!-- </span>-->
<!-- <span style="float: right;margin-right: 10px">-->
<!-- <el-tooltip :content="$t('panel.new_tab_preview')">-->
<!-- <el-button class="el-icon-data-analysis" size="mini" circle @click="newTab" />-->
<!-- </el-tooltip>-->
<!-- </span>-->
<!-- <span v-if="!hasStar && panelInfo && !isShare" style="float: right;margin-right: 10px">-->
<!-- <el-tooltip :content="$t('panel.store')">-->
<!-- <el-button class="el-icon-star-off" size="mini" circle @click="star" />-->
<!-- </el-tooltip>-->
<!-- </span>-->
<!-- <span v-if="!hasStar && panelInfo && !isShare" style="float: right;margin-right: 10px">-->
<!-- <el-tooltip :content="$t('panel.store')">-->
<!-- <el-button class="el-icon-star-off" size="mini" circle @click="star" />-->
<!-- </el-tooltip>-->
<!-- </span>-->
<!-- <span v-if="hasStar && panelInfo && !isShare" style="float: right;margin-right: 10px">-->
<!-- <el-tooltip :content="$t('commons.cancel')">-->
<!-- <el-button class="el-icon-star-on" size="mini" circle @click="unstar" />-->
<!-- </el-tooltip>-->
<!-- </span>-->
<!-- </el-col>-->
<!-- <span v-if="hasStar && panelInfo && !isShare" style="float: right;margin-right: 10px">-->
<!-- <el-tooltip :content="$t('commons.cancel')">-->
<!-- <el-button class="el-icon-star-on" size="mini" circle @click="unstar" />-->
<!-- </el-tooltip>-->
<!-- </span>-->
<!-- </el-col>-->
</div>
</el-row>
<!-- 仪表板预览区域-->
<el-row class="panel-design-preview">
<div id="imageWrapper" ref="imageWrapper" style="width: 100%;height: 100%">
<fullscreen style="height: 100%;background: #f7f8fa;overflow-y: auto" :fullscreen.sync="fullscreen">
<Preview v-if="showMain" :in-screen="!fullscreen" :show-type="'width'" />
<div
id="imageWrapper"
ref="imageWrapper"
style="width: 100%; height: 100%"
>
<fullscreen
style="height: 100%; background: #f7f8fa; overflow-y: auto"
:fullscreen.sync="fullscreen"
>
<Preview
v-if="showMain"
:in-screen="!fullscreen"
:show-type="'width'"
/>
</fullscreen>
</div>
</el-row>
</el-col>
<el-col v-if="panelInfo.name.length===0" style="height: 100%;">
<el-row style="height: 100%; background-color: var(--MainContentBG);" class="custom-position">
<el-col v-if="panelInfo.name.length === 0" style="height: 100%">
<el-row
style="height: 100%; background-color: var(--MainContentBG)"
class="custom-position"
>
{{ $t('panel.select_panel_from_left') }}
</el-row>
</el-col>
@ -73,20 +105,27 @@
:visible.sync="templateSaveShow"
width="500px"
>
<save-to-template :template-info="templateInfo" @closeSaveDialog="closeSaveDialog" />
<save-to-template
:template-info="templateInfo"
@closeSaveDialog="closeSaveDialog"
/>
</el-dialog>
<el-dialog
v-if="pdfExportShow"
:title="'['+panelInfo.name+']'+'PDF导出'"
:title="'[' + panelInfo.name + ']' + 'PDF导出'"
:visible.sync="pdfExportShow"
width="80%"
:top="'8vh'"
:destroy-on-close="true"
class="dialog-css2"
>
<span style="position: absolute;right: 70px;top:15px">
<span style="position: absolute; right: 70px; top: 15px">
<svg-icon icon-class="PDF" class="ds-icon-pdf" />
<el-select v-model="pdfTemplateSelectedIndex" :placeholder="'切换PDF模板'" @change="changePdfTemplate()">
<el-select
v-model="pdfTemplateSelectedIndex"
:placeholder="'切换PDF模板'"
@change="changePdfTemplate()"
>
<el-option
v-for="(item, index) in pdfTemplateAll"
:key="index"
@ -95,7 +134,12 @@
/>
</el-select>
</span>
<PDFPreExport :snapshot="snapshotInfo" :panel-name="panelInfo.name" :template-content="pdfTemplateContent" @closePreExport="closePreExport" />
<PDFPreExport
:snapshot="snapshotInfo"
:panel-name="panelInfo.name"
:template-content="pdfTemplateContent"
@closePreExport="closePreExport"
/>
</el-dialog>
</el-row>
</template>
@ -106,7 +150,11 @@ import SaveToTemplate from '@/views/panel/list/SaveToTemplate'
import { mapState } from 'vuex'
import html2canvas from 'html2canvasde'
import FileSaver from 'file-saver'
import { enshrineList, saveEnshrine, deleteEnshrine } from '@/api/panel/enshrine'
import {
enshrineList,
saveEnshrine,
deleteEnshrine
} from '@/api/panel/enshrine'
import bus from '@/utils/bus'
import { queryAll } from '@/api/panel/pdfTemplate'
@ -139,10 +187,7 @@ export default {
panelInfo() {
return this.$store.state.panel.panelInfo
},
...mapState([
'componentData',
'canvasStyleData'
])
...mapState(['componentData', 'canvasStyleData'])
},
watch: {
panelInfo(newVal, oldVla) {
@ -170,7 +215,7 @@ export default {
},
methods: {
initPdfTemplate() {
queryAll().then(res => {
queryAll().then((res) => {
this.pdfTemplateAll = res.data
this.changePdfTemplate()
})
@ -184,7 +229,7 @@ export default {
},
saveToTemplate() {
this.templateSaveShow = true
html2canvas(document.getElementById('canvasInfoTemp')).then(canvas => {
html2canvas(document.getElementById('canvasInfoTemp')).then((canvas) => {
const snapshot = canvas.toDataURL('image/jpeg', 0.1) // 0.2是图片质量
if (snapshot !== '') {
this.templateInfo = {
@ -202,7 +247,7 @@ export default {
})
},
downloadToTemplate() {
html2canvas(document.getElementById('canvasInfoTemp')).then(canvas => {
html2canvas(document.getElementById('canvasInfoTemp')).then((canvas) => {
const snapshot = canvas.toDataURL('image/jpeg', 0.1) // 0.2是图片质量
if (snapshot !== '') {
this.templateInfo = {
@ -213,14 +258,19 @@ export default {
panelData: JSON.stringify(this.componentData),
dynamicData: ''
}
const blob = new Blob([JSON.stringify(this.templateInfo)], { type: '' })
FileSaver.saveAs(blob, this.$store.state.panel.panelInfo.name + '-TEMPLATE.DE')
const blob = new Blob([JSON.stringify(this.templateInfo)], {
type: ''
})
FileSaver.saveAs(
blob,
this.$store.state.panel.panelInfo.name + '-TEMPLATE.DE'
)
}
})
},
downloadAsPDF() {
html2canvas(document.getElementById('canvasInfoTemp')).then(canvas => {
html2canvas(document.getElementById('canvasInfoTemp')).then((canvas) => {
const snapshot = canvas.toDataURL('image/jpeg', 1) // 0.2是图片质量
if (snapshot !== '') {
this.snapshotInfo = snapshot
@ -230,7 +280,7 @@ export default {
},
refreshTemplateInfo() {
this.templateInfo = {}
html2canvas(document.getElementById('canvasInfoTemp')).then(canvas => {
html2canvas(document.getElementById('canvasInfoTemp')).then((canvas) => {
const snapshot = canvas.toDataURL('image/jpeg', 0.1) // 0.2是图片质量
if (snapshot !== '') {
this.templateInfo = {
@ -246,21 +296,25 @@ export default {
this.templateSaveShow = false
},
star() {
this.panelInfo && saveEnshrine(this.panelInfo.id).then(res => {
this.hasStar = true
this.refreshStarList(true)
})
this.panelInfo &&
saveEnshrine(this.panelInfo.id).then((res) => {
this.hasStar = true
this.refreshStarList(true)
})
},
unstar() {
this.panelInfo && deleteEnshrine(this.panelInfo.id).then(res => {
this.hasStar = false
this.refreshStarList(false)
})
this.panelInfo &&
deleteEnshrine(this.panelInfo.id).then((res) => {
this.hasStar = false
this.refreshStarList(false)
})
},
initHasStar() {
const param = {}
enshrineList(param).then(res => {
this.hasStar = res.data && res.data.some(item => item.panelGroupId === this.panelInfo.id)
enshrineList(param).then((res) => {
this.hasStar =
res.data &&
res.data.some((item) => item.panelGroupId === this.panelInfo.id)
})
},
refreshStarList(isStar) {
@ -269,80 +323,80 @@ export default {
}
},
changePdfTemplate() {
this.pdfTemplateContent = this.pdfTemplateAll[this.pdfTemplateSelectedIndex].templateContent
this.pdfTemplateContent =
this.pdfTemplateAll[this.pdfTemplateSelectedIndex].templateContent
},
closePreExport() {
this.pdfExportShow = false
}
}
}
</script>
<style>
.view-list {
height: 100%;
width: 20%;
min-width: 180px;
max-width: 220px;
border: 1px solid #E6E6E6;
border-left: 0 solid;
overflow-y: auto;
}
.view-list {
height: 100%;
width: 20%;
min-width: 180px;
max-width: 220px;
border: 1px solid #e6e6e6;
border-left: 0 solid;
overflow-y: auto;
}
.view-list-thumbnails-outline {
height: 100%;
overflow-y: auto;
}
.view-list-thumbnails-outline {
height: 100%;
overflow-y: auto;
}
.view-list-thumbnails {
width: 100%;
padding: 0px 15px 15px 0px;
}
.view-list-thumbnails {
width: 100%;
padding: 0px 15px 15px 0px;
}
.panel-design {
min-height: 400px;
height: 100%;
min-width: 500px;
overflow-y: auto;
border-top: 1px solid #E6E6E6;
}
.panel-design {
min-height: 400px;
height: 100%;
min-width: 500px;
overflow-y: auto;
border-top: 1px solid #e6e6e6;
}
.panel-design-head {
height: 40px;
background-color: var(--SiderBG, white);
padding: 0 10px;
line-height: 40px;
}
.blackTheme .panel-design-head {
color: var(--TextActive);
}
.panel-design-head {
height: 40px;
background-color: var(--SiderBG, white);
padding: 0 10px;
line-height: 40px;
}
.blackTheme .panel-design-head {
color: var(--TextActive);
}
.panel-design-preview {
width: 100%;
height: calc(100% - 40px);
overflow-x: hidden;
overflow-y: auto;
/*padding: 5px;*/
}
.panel-design-preview {
width: 100%;
height: calc(100% - 40px);
overflow-x: hidden;
overflow-y: auto;
/*padding: 5px;*/
}
.custom-position {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
flex-flow: row nowrap;
color: #9ea6b2;
}
.custom-position {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
flex-flow: row nowrap;
color: #9ea6b2;
}
.dialog-css2 ::v-deep .el-dialog__title {
font-size: 14px!important;
}
.dialog-css2 ::v-deep .el-dialog__header {
padding: 20px 20px 0!important;
}
.dialog-css2 ::v-deep .el-dialog__body {
padding: 0px 20px!important;
}
.dialog-css2 ::v-deep .el-dialog__title {
font-size: 14px !important;
}
.dialog-css2 ::v-deep .el-dialog__header {
padding: 20px 20px 0 !important;
}
.dialog-css2 ::v-deep .el-dialog__body {
padding: 0px 20px !important;
}
</style>

Write Preview
Loading…
Cancel
Save