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

百分比组件

Browse Source
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); 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)); 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); 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)); 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); 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)); yWheres.addAll(getYWheres(y, originField, fieldAlias));
// 处理纵轴排序 // 处理纵轴排序

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

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

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

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

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

@ -1,7 +1,17 @@
<template> <template>
<div style="display: flex;"> <div style="display: flex">
<view-track-bar ref="viewTrack" :track-menu="trackMenu" class="track-bar" :style="trackBarStyleTime" @trackClick="trackClick" /> <view-track-bar
<div :id="chartId" style="width: 100%;height: 100%;overflow: hidden;" :style="{ borderRadius: borderRadius}" /> 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> </div>
</template> </template>
@ -74,7 +84,9 @@ export default {
preDraw() { preDraw() {
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
// 渲染echart等待dom加载完毕,渲染之前先尝试销毁具有相同id的echart 放置多次切换仪表板有重复id情况 // 渲染echart等待dom加载完毕,渲染之前先尝试销毁具有相同id的echart 放置多次切换仪表板有重复id情况
new Promise((resolve) => { resolve() }).then(() => { new Promise((resolve) => {
resolve()
}).then(() => {
// 此dom为echarts图标展示dom // 此dom为echarts图标展示dom
// this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId)) // this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
// if (!this.myChart) { // if (!this.myChart) {
@ -157,6 +169,4 @@ export default {
} }
</script> </script>
<style scoped> <style scoped></style>
</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"> <el-row v-show="chart.type === 'table-info'" class="table-page">
<span class="total-style"> <span class="total-style">
{{ $t("chart.total") }} {{ $t('chart.total') }}
<span>{{ <span>{{
chart.data && chart.data.tableRow ? chart.data.tableRow.length : 0 chart.data && chart.data.tableRow ? chart.data.tableRow.length : 0
}}</span> }}</span>
{{ $t("chart.items") }} {{ $t('chart.items') }}
</span> </span>
<el-pagination <el-pagination
small small
@ -62,198 +62,212 @@
</template> </template>
<script> <script>
import { hexColorToRGBA } from "../../chart/util"; import { hexColorToRGBA } from '../../chart/util'
import eventBus from "@/components/canvas/utils/eventBus"; import eventBus from '@/components/canvas/utils/eventBus'
export default { export default {
name: "TableNormal", name: 'TableNormal',
props: { props: {
chart: { chart: {
type: Object, type: Object,
required: true, required: true
}, },
filter: { filter: {
type: Object, type: Object,
required: false, required: false,
default: function () { default: function() {
return {}; return {}
}, }
}, },
showSummary: { showSummary: {
type: Boolean, type: Boolean,
required: false, required: false,
default: true, default: true
}, }
}, },
data() { data() {
return { return {
fields: [], fields: [],
height: "auto", height: 'auto',
title_class: { title_class: {
margin: "0 0", margin: '0 0',
width: "100%", width: '100%',
fontSize: "18px", fontSize: '18px',
color: "#303133", color: '#303133',
textAlign: "left", textAlign: 'left',
fontStyle: "normal", fontStyle: 'normal',
fontWeight: "normal", fontWeight: 'normal'
}, },
// bg_class: { // bg_class: {
// background: hexColorToRGBA('#ffffff', 0), // background: hexColorToRGBA('#ffffff', 0),
// borderRadius: this.borderRadius // borderRadius: this.borderRadius
// }, // },
table_header_class: { table_header_class: {
fontSize: "12px", fontSize: '12px',
color: "#606266", color: '#606266',
background: "#e8eaec", background: '#e8eaec',
height: "36px", height: '36px'
}, },
table_item_class: { table_item_class: {
fontSize: "12px", fontSize: '12px',
color: "#606266", color: '#606266',
background: "#ffffff", background: '#ffffff',
height: "36px", height: '36px'
}, },
table_item_class_stripe: { table_item_class_stripe: {
fontSize: "12px", fontSize: '12px',
color: "#606266", color: '#606266',
background: "#ffffff", background: '#ffffff',
height: "36px", height: '36px'
}, },
title_show: true, title_show: true,
borderRadius: "0px", borderRadius: '0px',
currentPage: { currentPage: {
page: 1, page: 1,
pageSize: 10, pageSize: 10,
show: 0, show: 0
}, }
}; }
}, },
computed: { computed: {
bg_class() { bg_class() {
return { return {
background: hexColorToRGBA("#ffffff", 0), background: hexColorToRGBA('#ffffff', 0),
borderRadius: this.borderRadius, borderRadius: this.borderRadius
}; }
}, }
}, },
watch: { watch: {
chart: function () { chart: function() {
this.init(); this.init()
}, }
}, },
mounted() { mounted() {
this.init(); this.init()
// 监听元素变动事件 // 监听元素变动事件
eventBus.$on("resizing", (componentId) => { eventBus.$on('resizing', (componentId) => {
this.chartResize(); this.chartResize()
}); })
}, },
methods: { methods: {
init() { init() {
this.resetHeight(); this.resetHeight()
this.$nextTick(() => { this.$nextTick(() => {
this.initData(); this.initData()
this.calcHeightDelay(); this.calcHeightDelay()
}); })
this.setBackGroundBorder(); this.setBackGroundBorder()
}, },
setBackGroundBorder() { setBackGroundBorder() {
if (this.chart.customStyle) { if (this.chart.customStyle) {
const customStyle = JSON.parse(this.chart.customStyle); const customStyle = JSON.parse(this.chart.customStyle)
if (customStyle.background) { if (customStyle.background) {
this.borderRadius = (customStyle.background.borderRadius || 0) + "px"; this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
} }
} }
}, },
initData() { initData() {
const that = this; const that = this
let datas = []; let datas = []
if (this.chart.data) { if (this.chart.data) {
this.fields = JSON.parse(JSON.stringify(this.chart.data.fields)); this.fields = JSON.parse(JSON.stringify(this.chart.data.fields))
datas = JSON.parse(JSON.stringify(this.chart.data.tableRow)); const yAxis = JSON.parse(this.chart.yaxis)
if (this.chart.type === "table-info") { 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 = const pageStart =
(this.currentPage.page - 1) * this.currentPage.pageSize; (this.currentPage.page - 1) * this.currentPage.pageSize
const pageEnd = pageStart + this.currentPage.pageSize; const pageEnd = pageStart + this.currentPage.pageSize
datas = datas.slice(pageStart, pageEnd); datas = datas.slice(pageStart, pageEnd)
} }
} else { } else {
this.fields = []; this.fields = []
datas = []; datas = []
this.resetPage(); this.resetPage()
} }
this.$refs.plxTable.reloadData(datas); this.$refs.plxTable.reloadData(datas)
this.$nextTick(() => { this.$nextTick(() => {
this.initStyle(); this.initStyle()
}); })
window.onresize = function () { window.onresize = function() {
that.calcHeightDelay(); that.calcHeightDelay()
}; }
}, },
calcHeightRightNow() { calcHeightRightNow() {
this.$nextTick(() => { this.$nextTick(() => {
if (this.$refs.tableContainer) { if (this.$refs.tableContainer) {
let pageHeight = 0; let pageHeight = 0
if (this.chart.type === "table-info") { if (this.chart.type === 'table-info') {
pageHeight = 36; pageHeight = 36
} }
const currentHeight = this.$refs.tableContainer.offsetHeight; const currentHeight = this.$refs.tableContainer.offsetHeight
const tableMaxHeight = const tableMaxHeight =
currentHeight - this.$refs.title.offsetHeight - 16 - pageHeight; currentHeight - this.$refs.title.offsetHeight - 16 - pageHeight
let tableHeight; let tableHeight
if (this.chart.data) { if (this.chart.data) {
if (this.chart.type === "table-info") { if (this.chart.type === 'table-info') {
tableHeight = (this.currentPage.pageSize + 2) * 36 - pageHeight; tableHeight = (this.currentPage.pageSize + 2) * 36 - pageHeight
} else { } else {
tableHeight = tableHeight =
(this.chart.data.tableRow.length + 2) * 36 - pageHeight; (this.chart.data.tableRow.length + 2) * 36 - pageHeight
} }
} else { } else {
tableHeight = 0; tableHeight = 0
} }
if (tableHeight > tableMaxHeight) { if (tableHeight > tableMaxHeight) {
this.height = tableMaxHeight + "px"; this.height = tableMaxHeight + 'px'
} else { } else {
this.height = "auto"; this.height = 'auto'
} }
} }
}); })
}, },
calcHeightDelay() { calcHeightDelay() {
setTimeout(() => { setTimeout(() => {
this.calcHeightRightNow(); this.calcHeightRightNow()
}, 100); }, 100)
}, },
initStyle() { initStyle() {
if (this.chart.customAttr) { if (this.chart.customAttr) {
const customAttr = JSON.parse(this.chart.customAttr); const customAttr = JSON.parse(this.chart.customAttr)
if (customAttr.color) { 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( this.table_header_class.background = hexColorToRGBA(
customAttr.color.tableHeaderBgColor, customAttr.color.tableHeaderBgColor,
customAttr.color.alpha 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( this.table_item_class.background = hexColorToRGBA(
customAttr.color.tableItemBgColor, customAttr.color.tableItemBgColor,
customAttr.color.alpha customAttr.color.alpha
); )
} }
if (customAttr.size) { if (customAttr.size) {
this.table_header_class.fontSize = this.table_header_class.fontSize =
customAttr.size.tableTitleFontSize + "px"; customAttr.size.tableTitleFontSize + 'px'
this.table_item_class.fontSize = this.table_item_class.fontSize =
customAttr.size.tableItemFontSize + "px"; customAttr.size.tableItemFontSize + 'px'
this.table_header_class.height = this.table_header_class.height =
customAttr.size.tableTitleHeight + "px"; customAttr.size.tableTitleHeight + 'px'
this.table_item_class.height = customAttr.size.tableItemHeight + "px"; this.table_item_class.height = customAttr.size.tableItemHeight + 'px'
} }
this.table_item_class_stripe = JSON.parse( this.table_item_class_stripe = JSON.parse(
JSON.stringify(this.table_item_class) JSON.stringify(this.table_item_class)
); )
// 暂不支持斑马纹 // 暂不支持斑马纹
// if (customAttr.color.tableStripe) { // if (customAttr.color.tableStripe) {
// // this.table_item_class_stripe.background = hexColorToRGBA(customAttr.color.tableItemBgColor, customAttr.color.alpha - 40) // // this.table_item_class_stripe.background = hexColorToRGBA(customAttr.color.tableItemBgColor, customAttr.color.alpha - 40)
@ -266,121 +280,133 @@ export default {
// } // }
} }
if (this.chart.customStyle) { if (this.chart.customStyle) {
const customStyle = JSON.parse(this.chart.customStyle); const customStyle = JSON.parse(this.chart.customStyle)
if (customStyle.text) { if (customStyle.text) {
this.title_show = customStyle.text.show; this.title_show = customStyle.text.show
this.title_class.fontSize = customStyle.text.fontSize + "px"; this.title_class.fontSize = customStyle.text.fontSize + 'px'
this.title_class.color = customStyle.text.color; this.title_class.color = customStyle.text.color
this.title_class.textAlign = customStyle.text.hPosition; this.title_class.textAlign = customStyle.text.hPosition
this.title_class.fontStyle = customStyle.text.isItalic this.title_class.fontStyle = customStyle.text.isItalic
? "italic" ? 'italic'
: "normal"; : 'normal'
this.title_class.fontWeight = customStyle.text.isBolder this.title_class.fontWeight = customStyle.text.isBolder
? "bold" ? 'bold'
: "normal"; : 'normal'
} }
if (customStyle.background) { if (customStyle.background) {
this.bg_class.background = hexColorToRGBA( this.bg_class.background = hexColorToRGBA(
customStyle.background.color, customStyle.background.color,
customStyle.background.alpha customStyle.background.alpha
); )
} }
} }
// 修改footer合计样式 // 修改footer合计样式
const table = document.getElementsByClassName(this.chart.id); const table = document.getElementsByClassName(this.chart.id)
for (let i = 0; i < table.length; i++) { 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) // console.log(s_table)
let s = ""; let s = ''
for (const i in this.table_header_class) { for (const i in this.table_header_class) {
s += s +=
(i === "fontSize" ? "font-size" : i) + (i === 'fontSize' ? 'font-size' : i) +
":" + ':' +
this.table_header_class[i] + this.table_header_class[i] +
";"; ';'
} }
// console.log(s_table) // console.log(s_table)
for (let i = 0; i < s_table.length; i++) { for (let i = 0; i < s_table.length; i++) {
s_table[i].setAttribute("style", s); s_table[i].setAttribute('style', s)
} }
} }
}, },
getRowStyle({ row, rowIndex }) { getRowStyle({ row, rowIndex }) {
if (rowIndex % 2 !== 0) { if (rowIndex % 2 !== 0) {
return this.table_item_class_stripe; return this.table_item_class_stripe
} else { } else {
return this.table_item_class; return this.table_item_class
} }
}, },
summaryMethod({ columns, data }) { summaryMethod({ columns, data }) {
const that = this; const that = this
const means = []; // 合计 const means = [] // 合计
columns.forEach((column, columnIndex) => { columns.forEach((column, columnIndex) => {
if (columnIndex === 0) { if (columnIndex === 0) {
means.push("合计"); means.push('合计')
} else { } else {
let isRatio = false
if ( if (
columnIndex >= columnIndex >=
that.chart.data.fields.length - that.chart.data.series.length 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))) { if (!values.every((value) => isNaN(value))) {
means[columnIndex] = values.reduce((prev, curr) => { means[columnIndex] = values.reduce((prev, curr) => {
const value = Number(curr); const value = Number(curr)
if (!isNaN(value)) { if (!isNaN(value)) {
return prev + curr; return prev + curr
} else { } else {
return prev; return prev
} }
}, 0); }, 0)
means[columnIndex] = (means[columnIndex] + "").includes(".") means[columnIndex] = (means[columnIndex] + '').includes('.')
? means[columnIndex].toFixed(2) ? means[columnIndex].toFixed(2)
: means[columnIndex]; : means[columnIndex]
if (isRatio) {
means[columnIndex] += '%'
}
} else { } else {
means[columnIndex] = ""; means[columnIndex] = ''
} }
} else { } else {
means[columnIndex] = ""; means[columnIndex] = ''
} }
} }
}); })
// 返回一个二维数组的表尾合计(不要平均值，就不要在数组中添加) // 返回一个二维数组的表尾合计(不要平均值，就不要在数组中添加)
return [means]; return [means]
}, },
chartResize() { chartResize() {
// 指定图表的配置项和数据 // 指定图表的配置项和数据
this.calcHeightDelay(); this.calcHeightDelay()
}, },
initClass() { initClass() {
return this.chart.id; return this.chart.id
}, },
resetHeight() { resetHeight() {
this.height = 100; this.height = 100
}, },
pageChange(val) { pageChange(val) {
this.currentPage.pageSize = val; this.currentPage.pageSize = val
this.init(); this.init()
}, },
pageClick(val) { pageClick(val) {
this.currentPage.page = val; this.currentPage.page = val
this.init(); this.init()
}, },
resetPage() { resetPage() {
this.currentPage = { this.currentPage = {
page: 1, page: 1,
pageSize: 10, pageSize: 10,
show: 0, show: 0
}; }
}, }
}, }
}; }
</script> </script>
<style scoped> <style scoped>

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

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

Write Preview
Loading…
Cancel
Save