Skip to content

D
dataease
提交 7a529b29 authored 作者: wangjiahao's avatar wangjiahao
浏览文件
操作

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

上级 8a6b75eb e891798a
显示空白字符变更
内嵌 并排
正在显示 包含 1566 行增加 和 107 行删除
frontend/package.json
浏览文件 @ 7a529b29
......@@ -28,14 +28,15 @@
"svg-sprite-loader": "4.1.3",
"svgo": "1.2.2",
"umy-ui": "^1.1.6",
"vcolorpicker": "^1.1.0",
"vue": "2.6.10",
"vue-codemirror": "^4.0.6",
"vue-i18n": "7.3.2",
"vue-router": "3.0.6",
"vue-uuid": "2.0.2",
"vuedraggable": "^2.24.3",
"vuex": "3.1.0",
"webpack": "^4.46.0",
"vue-uuid": "2.0.2"
"webpack": "^4.46.0"
},
"devDependencies": {
"@babel/core": "^7.4.0-0",
......
frontend/src/icons/svg/bar-horizontal.svg
浏览文件 @ 7a529b29
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616054957891" class="icon" viewBox="0 0 1072 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1374" xmlns:xlink="http://www.w3.org/1999/xlink" width="209.375" height="200"><defs><style type="text/css"></style></defs><path d="M150.528 77.482667v207.286857H623.177143l2.998857-207.286857zM1023.853714 380.830476H150.528v207.286857h867.791238zM820.711619 684.178286H150.528v207.286857h665.916952z" p-id="1375"></path><path d="M115.151238 943.079619V0.146286h-41.203809v994.377143h996.10819v-51.44381H115.151238z" fill="#8a8a8a" p-id="1376"></path></svg>
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616054957891" class="icon" viewBox="0 0 1072 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1374" xmlns:xlink="http://www.w3.org/1999/xlink" width="209.375" height="200"><defs><style type="text/css"></style></defs><path d="M150.528 77.482667v207.286857H623.177143l2.998857-207.286857zM1023.853714 380.830476H150.528v207.286857h867.791238zM820.711619 684.178286H150.528v207.286857h665.916952z" p-id="1375"></path><path d="M115.151238 943.079619V0.146286h-41.203809v994.377143h996.10819v-51.44381H115.151238z" p-id="1376"></path></svg>
frontend/src/icons/svg/line-stack.svg 0 → 100644
浏览文件 @ 7a529b29
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616398663420" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="787" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M637.6 381.7L495.8 493.1c-4.1 3.1-9.8 3.6-13.9 1l-154.7-84.6c-4.6-2.6-10.8-2.1-14.4 1.5L162.2 547.2v153.1l150-133.5c3.6-3.6 9.8-4.1 14.4-1.5l177.9 96.4c4.1 2.1 9.3 2.1 12.9-0.5l144.4-91.3c1-0.5 2.6-1.5 3.6-1.5l294.4-72.7V301.8l-317.6 77.3c-1.5 0.5-3.1 1.6-4.6 2.6z" p-id="788"></path><path d="M662.3 622.2l-142.8 91.3c-3.6 2.6-8.8 2.6-12.9 0.5l-179.9-96.4c-4.6-2.6-10.8-2.1-14.4 1.5 0 0-150.5 133.5-150.5 136.6v111.4h797.6V545.9l-293.9 74.8-3.2 1.5z" p-id="789"></path><path d="M64 144.2c0-1.3 0.5-2.6 1.5-3.6s2.3-1.5 3.6-1.5H101c1.3 0 2.6 0.5 3.6 1.5s1.5 2.3 1.5 3.6v778.9H955c1.3 0 2.6 0.5 3.6 1.5s1.5 2.3 1.5 3.6v31.9c0 1.3-0.5 2.6-1.5 3.6s-2.3 1.5-3.6 1.5H64v-821z" p-id="790"></path></svg>
frontend/src/icons/svg/pie.svg
浏览文件 @ 7a529b29
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616054982578" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1729" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M549.254095 0.219429v469.430857h469.430857C1018.684952 214.211048 804.693333 0.219429 549.254095 0.219429z" p-id="1730"></path><path d="M494.031238 517.973333V48.542476c-262.339048 0-469.430857 214.016-469.430857 469.430857 0 255.439238 213.991619 469.430857 469.430857 469.430857 262.339048 0 469.430857-213.991619 469.430857-469.430857H494.031238z" fill="#8a8a8a" p-id="1731"></path></svg>
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616054982578" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1729" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M549.254095 0.219429v469.430857h469.430857C1018.684952 214.211048 804.693333 0.219429 549.254095 0.219429z" p-id="1730"></path><path d="M494.031238 517.973333V48.542476c-262.339048 0-469.430857 214.016-469.430857 469.430857 0 255.439238 213.991619 469.430857 469.430857 469.430857 262.339048 0 469.430857-213.991619 469.430857-469.430857H494.031238z" p-id="1731"></path></svg>
frontend/src/icons/svg/radar.svg 0 → 100644
浏览文件 @ 7a529b29
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616397690155" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="859" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M499.809524 24.380952L0 405.74781 190.927238 1024h617.764572L999.619048 405.74781 499.809524 24.380952z m396.361143 378.343619l-63.975619 15.018667-302.908953-194.438095v-100.449524l366.884572 279.893333z m-443.830857 144.944762l-139.946667 226.913524L269.897143 504.685714l182.418286 43.008z m-159.939048-100.449523l177.93219-150.430477v192.414477l-177.956571-41.984zM499.809524 584.167619l64.487619 103.960381-185.953524 92.476952L499.809524 584.167619z m47.494095-36.498286l195.413333-46.470095-131.462095 149.455238-63.951238-102.985143z m-18.505143-57.977904v-201.411048l229.424762 146.944-229.424762 54.491429zM470.820571 122.831238v103.960381L226.913524 432.249905l-123.465143-28.988953 367.37219-280.380952zM77.970286 459.702857l136.435809 32.012191 55.491048 351.841523-48.981333 78.994286-142.945524-462.823619z m187.928381 502.808381l57.977904-93.45219 269.409524-133.461334 140.434286 227.425524H265.898667v-0.487619z m512.804571-39.984762l-138.435048-223.914666 192.902096-217.916953 88.478476-20.967619-142.945524 462.823619z" p-id="860"></path></svg>
frontend/src/lang/zh.js
浏览文件 @ 7a529b29
......@@ -635,9 +635,30 @@ export default {
line_symbol_pin: '钉子',
line_symbol_arrow: '箭头',
line_symbol_none: '无',
line_area: '面积',
pie_inner_radius: '内径',
pie_outer_radius: '外径',
funnel_width: '宽度'
funnel_width: '宽度',
line_smooth: '平滑折线',
title_style: '标题样式',
text_fontsize: '字体大小',
text_color: '字体颜色',
text_h_position: '水平位置',
text_v_position: '垂直位置',
text_pos_left: '左',
text_pos_center: '中',
text_pos_right: '右',
text_pos_top: '上',
text_pos_bottom: '下',
text_italic: '字体倾斜',
italic: '倾斜',
orient: '方向',
horizontal: '水平',
vertical: '垂直',
legend: '图例',
shape: '形状',
polygon: '多边形',
circle: '圆形'
},
dataset: {
datalist: '数据集',
......
frontend/src/main.js
浏览文件 @ 7a529b29
......@@ -25,6 +25,10 @@ import UmyUi from 'umy-ui'
Vue.use(UmyUi)
import vcolorpicker from 'vcolorpicker'
Vue.use(vcolorpicker)
/**
* If you don't want to use mock-server
* you want to use MockJs for mock api
......
frontend/src/router/index.js
浏览文件 @ 7a529b29
......@@ -59,6 +59,19 @@ export const constantRoutes = [
hidden: true
},
{
path: '/panelEdit',
component: Layout,
redirect: '/panelEdit/edit',
hidden: true,
children: [
{
path: 'edit',
component: () => import('@/views/panel/new/edit')
}
]
},
{
path: '/',
component: Layout,
......
frontend/src/views/chart/chart/bar/bar.js
浏览文件 @ 7a529b29
import { hexColorToRGBA } from '../util.js'
import { componentStyle } from '../common/common'
export function baseBarOption(chart_option, chart) {
// 处理shape attr
......@@ -35,6 +36,7 @@ export function baseBarOption(chart_option, chart) {
}
}
// console.log(chart_option);
componentStyle(chart_option, chart)
return chart_option
}
......@@ -86,6 +88,7 @@ export function horizontalBarOption(chart_option, chart) {
}
}
// console.log(chart_option);
componentStyle(chart_option, chart)
return chart_option
}
......
frontend/src/views/chart/chart/chart.js
浏览文件 @ 7a529b29
......@@ -11,9 +11,26 @@ export const DEFAULT_SIZE = {
lineType: 'solid',
lineSymbol: 'emptyCircle',
lineSymbolSize: 4,
lineSmooth: false,
lineArea: false,
pieInnerRadius: 0,
pieOuterRadius: 60,
funnelWidth: 80
funnelWidth: 80,
radarShape: 'polygon'
}
export const DEFAULT_TITLE_STYLE = {
show: true,
fontSize: '18',
color: '#000000',
hPosition: 'center',
vPosition: 'top',
isItalic: false
}
export const DEFAULT_LEGEND_STYLE = {
show: true,
hPosition: 'center',
vPosition: 'bottom',
orient: 'horizontal'
}
export const BASE_BAR = {
title: {
......@@ -21,6 +38,8 @@ export const BASE_BAR = {
},
tooltip: {},
legend: {
show: true,
type: 'scroll',
data: []
},
xAxis: {
......@@ -29,7 +48,12 @@ export const BASE_BAR = {
yAxis: {
type: 'value'
},
series: []
series: [],
dataZoom: [
{
type: 'inside'
}
]
}
export const HORIZONTAL_BAR = {
title: {
......@@ -37,6 +61,8 @@ export const HORIZONTAL_BAR = {
},
tooltip: {},
legend: {
show: true,
type: 'scroll',
data: []
},
xAxis: {
......@@ -45,7 +71,12 @@ export const HORIZONTAL_BAR = {
yAxis: {
data: []
},
series: []
series: [],
dataZoom: [
{
type: 'inside'
}
]
}
export const BASE_LINE = {
......@@ -54,15 +85,23 @@ export const BASE_LINE = {
},
tooltip: {},
legend: {
show: true,
type: 'scroll',
data: []
},
xAxis: {
boundaryGap: false,
data: []
},
yAxis: {
type: 'value'
},
series: []
series: [],
dataZoom: [
{
type: 'inside'
}
]
}
export const BASE_PIE = {
......@@ -73,7 +112,10 @@ export const BASE_PIE = {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {},
legend: {
show: true,
type: 'scroll'
},
series: [
{
name: '',
......@@ -100,7 +142,8 @@ export const BASE_FUNNEL = {
trigger: 'item'
},
legend: {
// data: []
show: true,
type: 'scroll'
},
series: [
{
......@@ -140,3 +183,30 @@ export const BASE_FUNNEL = {
}
]
}
export const BASE_RADAR = {
title: {
text: ''
},
tooltip: {},
legend: {
data: []
},
radar: {
shape: 'polygon',
name: {
textStyle: {
color: '#000000'
// backgroundColor: '#999',
// borderRadius: 3,
// padding: [3, 5]
}
},
indicator: []
},
series: [{
type: 'radar',
// areaStyle: {normal: {}},
data: []
}]
}
frontend/src/views/chart/chart/common/common.js 0 → 100644
浏览文件 @ 7a529b29
export function componentStyle(chart_option, chart) {
if (chart.customStyle) {
const customStyle = JSON.parse(chart.customStyle)
if (customStyle.text) {
chart_option.title.show = customStyle.text.show
chart_option.title.left = customStyle.text.hPosition
chart_option.title.top = customStyle.text.vPosition
const style = chart_option.title.textStyle ? chart_option.title.textStyle : {}
style.fontSize = customStyle.text.fontSize
style.color = customStyle.text.color
customStyle.text.isItalic ? style.fontStyle = 'italic' : style.fontStyle = 'normal'
chart_option.title.textStyle = style
}
if (customStyle.legend) {
chart_option.legend.show = customStyle.legend.show
chart_option.legend.left = customStyle.legend.hPosition
chart_option.legend.top = customStyle.legend.vPosition
chart_option.legend.orient = customStyle.legend.orient
}
}
}
frontend/src/views/chart/chart/funnel/funnel.js
浏览文件 @ 7a529b29
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle } from '../common/common'
export function baseFunnelOption(chart_option, chart) {
// 处理shape attr
......@@ -36,6 +37,7 @@ export function baseFunnelOption(chart_option, chart) {
}
}
// console.log(chart_option);
componentStyle(chart_option, chart)
return chart_option
}
frontend/src/views/chart/chart/line/line.js
浏览文件 @ 7a529b29
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle } from '../common/common'
export function baseLineOption(chart_option, chart) {
// 处理shape attr
......@@ -27,6 +28,8 @@ export function baseLineOption(chart_option, chart) {
width: customAttr.size.lineWidth,
type: customAttr.size.lineType
}
y.smooth = customAttr.size.lineSmooth
customAttr.size.lineArea ? y.areaStyle = { opacity: 0.6 } : { opacity: 0 }
}
y.type = 'line'
chart_option.legend.data.push(y.name)
......@@ -34,6 +37,18 @@ export function baseLineOption(chart_option, chart) {
}
}
// console.log(chart_option);
componentStyle(chart_option, chart)
return chart_option
}
export function stackLineOption(chart_option, chart) {
baseLineOption(chart_option, chart)
// ext
chart_option.tooltip.trigger = 'axis'
chart_option.series.forEach(function(s) {
s.stack = 'stack'
})
return chart_option
}
frontend/src/views/chart/chart/pie/pie.js
浏览文件 @ 7a529b29
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle } from '../common/common'
export function basePieOption(chart_option, chart) {
// 处理shape attr
......@@ -34,6 +35,7 @@ export function basePieOption(chart_option, chart) {
}
}
// console.log(chart_option);
componentStyle(chart_option, chart)
return chart_option
}
frontend/src/views/chart/chart/radar/radar.js 0 → 100644
浏览文件 @ 7a529b29
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle } from '../common/common'
export function baseRadarOption(chart_option, chart) {
// 处理shape attr
let customAttr = {}
if (chart.customAttr) {
customAttr = JSON.parse(chart.customAttr)
if (customAttr.color) {
chart_option.color = customAttr.color.colors
}
// size
if (customAttr.size) {
chart_option.radar.shape = customAttr.size.radarShape
}
}
// 处理data
if (chart.data) {
chart_option.title.text = chart.title
chart.data.x.forEach(function(ele) {
chart_option.radar.indicator.push({ name: ele })
})
for (let i = 0; i < chart.data.series.length; i++) {
const y = chart.data.series[i]
// color
y.itemStyle = {
color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha)
}
chart_option.legend.data.push(y.name)
y.value = JSON.parse(JSON.stringify(y.data))
chart_option.series[0].data.push(y)
}
}
// console.log(chart_option);
componentStyle(chart_option, chart)
return chart_option
}
frontend/src/views/chart/components/ChartComponent.vue
浏览文件 @ 7a529b29
......@@ -5,11 +5,12 @@
</template>
<script>
import { BASE_BAR, BASE_LINE, HORIZONTAL_BAR, BASE_PIE, BASE_FUNNEL } from '../chart/chart'
import { BASE_BAR, BASE_LINE, HORIZONTAL_BAR, BASE_PIE, BASE_FUNNEL, BASE_RADAR } from '../chart/chart'
import { baseBarOption, stackBarOption, horizontalBarOption, horizontalStackBarOption } from '../chart/bar/bar'
import { baseLineOption } from '../chart/line/line'
import { baseLineOption, stackLineOption } from '../chart/line/line'
import { basePieOption } from '../chart/pie/pie'
import { baseFunnelOption } from '../chart/funnel/funnel'
import { baseRadarOption } from '../chart/radar/radar'
export default {
name: 'ChartComponent',
......@@ -56,10 +57,14 @@ export default {
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)
} else if (chart.type === 'line-stack') {
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)
} else if (chart.type === 'funnel') {
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)
}
console.log(chart_option)
this.myEcharts(chart_option)
......
frontend/src/views/chart/components/ChartComponentView.vue deleted 100644 → 0
浏览文件 @ 8a6b75eb
<template>
<div class="Echarts" style="height: 100%;display: flex;margin-top: 10px;">
<div :id="chartId" style="width: 100%;height: 100%;" />
</div>
</template>
<script>
import { BASE_BAR, BASE_LINE, HORIZONTAL_BAR, BASE_PIE, BASE_FUNNEL } from '../chart/chart'
import { baseBarOption, stackBarOption, horizontalBarOption, horizontalStackBarOption } from '../chart/bar/bar'
import { baseLineOption } from '../chart/line/line'
import { basePieOption } from '../chart/pie/pie'
import { baseFunnelOption } from '../chart/funnel/funnel'
export default {
name: 'ChartComponentView',
props: {
chart: {
type: Object,
required: true
},
chartId: {
type: String,
required: false
}
},
data() {
return {
myChart: {}
}
},
watch: {
chart() {
this.drawEcharts()
},
resize() {
this.drawEcharts()
}
},
mounted() {
// 基于准备好的dom，初始化echarts实例
this.myChart = this.$echarts.init(document.getElementById(this.chartId))
this.drawEcharts()
},
methods: {
drawEcharts() {
const chart = this.chart
let chart_option = {}
// todo type
if (chart.type === 'bar') {
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)
} else if (chart.type === 'bar-horizontal') {
chart_option = horizontalBarOption(JSON.parse(JSON.stringify(HORIZONTAL_BAR)), chart)
} else if (chart.type === 'bar-horizontal-stack') {
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)
} else if (chart.type === 'pie') {
chart_option = basePieOption(JSON.parse(JSON.stringify(BASE_PIE)), chart)
} else if (chart.type === 'funnel') {
chart_option = baseFunnelOption(JSON.parse(JSON.stringify(BASE_FUNNEL)), chart)
}
console.log(chart_option)
this.myEcharts(chart_option)
},
myEcharts(option) {
// 指定图表的配置项和数据
const chart = this.myChart
setTimeout(chart.setOption(option, true), 500)
window.onresize = function() {
chart.resize()
}
},
chartResize() {
// 指定图表的配置项和数据
const chart = this.myChart
chart.resize()
}
}
}
</script>
<style scoped>
</style>
frontend/src/views/chart/components/component_style/LegendSelector.vue 0 → 100644
浏览文件 @ 7a529b29
<template>
<div>
<div style="width:100%;height: 32px;margin:0;padding:0 4px;border-radius: 4px;border: 1px solid #DCDFE6;display: flex;align-items: center;">
<el-popover
placement="right"
width="400"
trigger="click"
>
<el-col>
<el-form ref="legendForm" :model="legendForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="legendForm.show" @change="changeLegendStyle">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.orient')" class="form-item">
<el-radio-group v-model="legendForm.orient" size="mini" @change="changeLegendStyle">
<el-radio-button label="horizontal">{{ $t('chart.horizontal') }}</el-radio-button>
<el-radio-button label="vertical">{{ $t('chart.vertical') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle">
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
<el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.text_v_position')" class="form-item">
<el-radio-group v-model="legendForm.vPosition" size="mini" @change="changeLegendStyle">
<el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
<el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
<el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
</el-radio-group>
</el-form-item>
</el-form>
</el-col>
<el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.legend') }}<i class="el-icon-setting el-icon--right" /></el-button>
</el-popover>
</div>
</div>
</template>
<script>
import { DEFAULT_LEGEND_STYLE } from '../../chart/chart'
export default {
name: 'LegendSelector',
props: {
chart: {
type: Object,
required: true
}
},
data() {
return {
legendForm: JSON.parse(JSON.stringify(DEFAULT_LEGEND_STYLE))
}
},
watch: {
'chart': {
handler: function() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customStyle) {
const customStyle = JSON.parse(chart.customStyle)
if (customStyle.legend) {
this.legendForm = customStyle.legend
}
}
}
}
},
mounted() {
},
methods: {
changeLegendStyle() {
this.$emit('onLegendChange', this.legendForm)
}
}
}
</script>
<style scoped lang="scss">
.shape-item{
padding: 6px;
border: none;
}
.form-item-slider>>>.el-form-item__label{
font-size: 12px;
line-height: 38px;
}
.form-item>>>.el-form-item__label{
font-size: 12px;
}
.el-select-dropdown__item{
padding: 0 20px;
}
span{
font-size: 12px
}
.el-form-item{
margin-bottom: 6px;
}
</style>
frontend/src/views/chart/components/component_style/TitleSelector.vue 0 → 100644
浏览文件 @ 7a529b29
<template>
<div>
<div style="width:100%;height: 32px;margin:0;padding:0 4px;border-radius: 4px;border: 1px solid #DCDFE6;display: flex;align-items: center;">
<el-popover
placement="right"
width="400"
trigger="click"
>
<el-col>
<el-form ref="titleForm" :model="titleForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.show')" class="form-item">
<el-checkbox v-model="titleForm.show" @change="changeTitleStyle">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.text_fontsize')" class="form-item">
<el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle">
<el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('chart.text_color')" class="form-item">
<colorPicker v-model="titleForm.color" style="padding-top: 6px;cursor: pointer;z-index: 999" @change="changeTitleStyle" />
</el-form-item>
<el-form-item :label="$t('chart.text_h_position')" class="form-item">
<el-radio-group v-model="titleForm.hPosition" size="mini" @change="changeTitleStyle">
<el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
<el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
<el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.text_v_position')" class="form-item">
<el-radio-group v-model="titleForm.vPosition" size="mini" @change="changeTitleStyle">
<el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
<el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
<el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('chart.text_italic')" class="form-item">
<el-checkbox v-model="titleForm.isItalic" @change="changeTitleStyle">{{ $t('chart.italic') }}</el-checkbox>
</el-form-item>
</el-form>
</el-col>
<el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.title') }}<i class="el-icon-setting el-icon--right" /></el-button>
</el-popover>
</div>
</div>
</template>
<script>
import { DEFAULT_TITLE_STYLE } from '../../chart/chart'
export default {
name: 'TitleSelector',
props: {
chart: {
type: Object,
required: true
}
},
data() {
return {
titleForm: JSON.parse(JSON.stringify(DEFAULT_TITLE_STYLE)),
fontSize: []
}
},
watch: {
'chart': {
handler: function() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customStyle) {
const customStyle = JSON.parse(chart.customStyle)
if (customStyle.text) {
this.titleForm = customStyle.text
}
}
}
}
},
mounted() {
this.init()
},
methods: {
init() {
const arr = []
for (let i = 10; i <= 60; i = i + 2) {
arr.push({
name: i + '',
value: i + ''
})
}
this.fontSize = arr
},
changeTitleStyle() {
this.$emit('onTextChange', this.titleForm)
}
}
}
</script>
<style scoped lang="scss">
.shape-item{
padding: 6px;
border: none;
}
.form-item-slider>>>.el-form-item__label{
font-size: 12px;
line-height: 38px;
}
.form-item>>>.el-form-item__label{
font-size: 12px;
}
.el-select-dropdown__item{
padding: 0 20px;
}
span{
font-size: 12px
}
.el-form-item{
margin-bottom: 6px;
}
</style>
frontend/src/views/chart/components/shape_attr/ColorSelector.vue
浏览文件 @ 7a529b29
......@@ -26,7 +26,6 @@
<el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.color') }}<i class="el-icon-setting el-icon--right" /></el-button>
</el-popover>
<!--todo other color attr-->
</div>
</div>
</template>
......
frontend/src/views/chart/components/shape_attr/SizeSelector.vue
浏览文件 @ 7a529b29
......@@ -42,6 +42,12 @@
<el-form-item :label="$t('chart.line_symbol_size')" class="form-item form-item-slider">
<el-slider v-model="sizeForm.lineSymbolSize" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase" />
</el-form-item>
<el-form-item :label="$t('chart.line_smooth')" class="form-item">
<el-checkbox v-model="sizeForm.lineSmooth" @change="changeBarSizeCase">{{ $t('chart.line_smooth') }}</el-checkbox>
</el-form-item>
<el-form-item :label="$t('chart.line_area')" class="form-item">
<el-checkbox v-model="sizeForm.lineArea" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
</el-form-item>
</el-form>
<el-form v-if="chart.type && chart.type.includes('pie')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">
......@@ -58,11 +64,19 @@
<el-slider v-model="sizeForm.funnelWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
</el-form-item>
</el-form>
<el-form v-if="chart.type && chart.type.includes('radar')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">
<el-form-item :label="$t('chart.shape')" class="form-item">
<el-radio-group v-model="sizeForm.radarShape" size="mini" @change="changeBarSizeCase">
<el-radio-button label="polygon">{{ $t('chart.polygon') }}</el-radio-button>
<el-radio-button label="circle">{{ $t('chart.circle') }}</el-radio-button>
</el-radio-group>
</el-form-item>
</el-form>
</el-col>
<el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.size') }}<i class="el-icon-setting el-icon--right" /></el-button>
</el-popover>
<!--todo other size attr-->
</div>
</div>
</template>
......
frontend/src/views/chart/group/Group.vue
浏览文件 @ 7a529b29
......@@ -211,7 +211,7 @@
<script>
import { post } from '@/api/chart/chart'
import TableSelector from '../view/TableSelector'
import { DEFAULT_COLOR_CASE, DEFAULT_SIZE } from '../chart/chart'
import { DEFAULT_COLOR_CASE, DEFAULT_LEGEND_STYLE, DEFAULT_SIZE, DEFAULT_TITLE_STYLE } from '../chart/chart'
export default {
name: 'Group',
......@@ -509,6 +509,10 @@ export default {
color: DEFAULT_COLOR_CASE,
size: DEFAULT_SIZE
})
view.customStyle = JSON.stringify({
text: DEFAULT_TITLE_STYLE,
legend: DEFAULT_LEGEND_STYLE
})
post('/chart/view/save', view).then(response => {
this.selectTableFlag = false
this.$store.dispatch('chart/setTableId', null)
......
frontend/src/views/chart/view/ChartEdit.vue
浏览文件 @ 7a529b29
......@@ -79,14 +79,25 @@
<el-row>
<div class="chart-type">
<!--TODO 这里要替换好看点的图标，UI标签可以重新定义-->
<el-radio-group v-model="view.type" @change="save">
<el-radio-group
v-model="view.type"
style="width: 100%"
@change="save"
>
<div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
<el-radio value="bar" label="bar"><svg-icon icon-class="bar" class="chart-icon" /></el-radio>
<el-radio value="bar-stack" label="bar-stack"><svg-icon icon-class="bar-stack" class="chart-icon" /></el-radio>
<el-radio value="bar-horizontal" label="bar-horizontal"><svg-icon icon-class="bar-horizontal" class="chart-icon" /></el-radio>
<el-radio value="bar-horizontal-stack" label="bar-horizontal-stack"><svg-icon icon-class="bar-stack-horizontal" class="chart-icon" /></el-radio>
<el-radio value="line" label="line"><svg-icon icon-class="line" class="chart-icon" /></el-radio>
</div>
<div style="width: 100%;display: flex;display: -webkit-flex;justify-content: space-between;flex-direction: row;flex-wrap: wrap;">
<el-radio value="line-stack" label="line-stack"><svg-icon icon-class="line-stack" class="chart-icon" /></el-radio>
<el-radio value="pie" label="pie"><svg-icon icon-class="pie" class="chart-icon" /></el-radio>
<el-radio value="funnel" label="funnel"><svg-icon icon-class="funnel" class="chart-icon" /></el-radio>
<el-radio value="radar" label="radar"><svg-icon icon-class="radar" class="chart-icon" /></el-radio>
<el-radio value="" label="" disabled class="disabled-none-cursor"><svg-icon icon-class="" class="chart-icon" /></el-radio>
</div>
</el-radio-group>
</div>
</el-row>
......@@ -97,7 +108,10 @@
<color-selector class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
<size-selector class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
</el-tab-pane>
<el-tab-pane :label="$t('chart.module_style')" class="padding-lr">TODO</el-tab-pane>
<el-tab-pane :label="$t('chart.module_style')" class="padding-lr">
<title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
<legend-selector class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
</el-tab-pane>
</el-tabs>
</div>
<div style="height: 30%;overflow:auto;border-top: 1px solid #e6e6e6" class="padding-lr">
......@@ -154,14 +168,16 @@ import draggable from 'vuedraggable'
import DimensionItem from '../components/DimensionItem'
import QuotaItem from '../components/QuotaItem'
import ChartComponent from '../components/ChartComponent'
// shape attr
import { DEFAULT_COLOR_CASE, DEFAULT_SIZE } from '../chart/chart'
// shape attr,component style
import { DEFAULT_COLOR_CASE, DEFAULT_SIZE, DEFAULT_TITLE_STYLE, DEFAULT_LEGEND_STYLE } from '../chart/chart'
import ColorSelector from '../components/shape_attr/ColorSelector'
import SizeSelector from '../components/shape_attr/SizeSelector'
import TitleSelector from '../components/component_style/TitleSelector'
import LegendSelector from '../components/component_style/LegendSelector'
export default {
name: 'ChartEdit',
components: { SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
components: { LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
data() {
return {
table: {},
......@@ -176,6 +192,10 @@ export default {
customAttr: {
color: DEFAULT_COLOR_CASE,
size: DEFAULT_SIZE
},
customStyle: {
text: DEFAULT_TITLE_STYLE,
legend: DEFAULT_LEGEND_STYLE
}
},
// 定义要被拖拽对象的数组
......@@ -263,6 +283,7 @@ export default {
view.xaxis = JSON.stringify(view.xaxis)
view.yaxis = JSON.stringify(view.yaxis)
view.customAttr = JSON.stringify(view.customAttr)
view.customStyle = JSON.stringify(view.customStyle)
post('/chart/view/save', view).then(response => {
// this.get(response.data.id);
this.getData(response.data.id)
......@@ -280,6 +301,7 @@ export default {
this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
this.view.customAttr = this.view.customAttr ? JSON.parse(this.view.customAttr) : {}
this.view.customStyle = this.view.customStyle ? JSON.parse(this.view.customStyle) : {}
// 将视图传入echart组件
this.chart = response.data
})
......@@ -386,6 +408,16 @@ export default {
onSizeChange(val) {
this.view.customAttr.size = val
this.save()
},
onTextChange(val) {
this.view.customStyle.text = val
this.save()
},
onLegendChange(val) {
this.view.customStyle.legend = val
this.save()
}
}
}
......@@ -489,4 +521,9 @@ export default {
.attr-selector{
margin: 2px 0;
}
.disabled-none-cursor{
cursor: not-allowed;
pointer-events:none;
}
</style>
frontend/src/views/panel/new/PanelList.vue 0 → 100644
浏览文件 @ 7a529b29
<template xmlns:el-col="http://www.w3.org/1999/html">
<el-col>
<!-- panel list -->
<el-col>
<el-row>
<span class="header-title">默认仪表盘</span>
<div class="block">
<el-tree
:default-expanded-keys="expandedArray"
:data="defaultData"
node-key="id"
:expand-on-click-node="true"
@node-click="panelDefaultClick"
>
<span slot-scope="{ data }" class="custom-tree-node">
<span>
<span>
<el-button
icon="el-icon-picture-outline"
type="text"
/>
</span>
<span style="margin-left: 6px">{{ data.name }}</span>
</span>
</span>
</el-tree>
</div>
</el-row>
<el-row>
<span class="header-title">仪表盘列表</span>
</el-row>
<el-col class="custom-tree-container">
<div class="block">
<el-tree
:default-expanded-keys="expandedArray"
:data="tData"
node-key="id"
:expand-on-click-node="true"
@node-click="nodeClick"
>
<span slot-scope="{ node, data }" class="custom-tree-node">
<span>
<span v-if="data.nodeType === 'panel'">
<el-button
icon="el-icon-picture-outline"
type="text"
/>
</span>
<span style="margin-left: 6px">{{ data.name }}</span>
</span>
<span>
<span v-if="data.nodeType ==='folder'" @click.stop>
<el-dropdown trigger="click" size="small" @command="clickAdd">
<span class="el-dropdown-link">
<el-button
icon="el-icon-plus"
type="text"
size="small"
/>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-circle-plus" :command="beforeClickAdd('folder',data,node)">
{{ $t('panel.groupAdd') }}
</el-dropdown-item>
<el-dropdown-item icon="el-icon-folder-add" :command="beforeClickAdd('panel',data,node)">
{{ $t('panel.panelAdd') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
<span style="margin-left: 12px;" @click.stop>
<el-dropdown trigger="click" size="small" @command="clickMore">
<span class="el-dropdown-link">
<el-button
icon="el-icon-more"
type="text"
size="small"
/>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('rename',data,node)">
{{ $t('panel.rename') }}
</el-dropdown-item>
<el-dropdown-item icon="el-icon-delete" :command="beforeClickMore('delete',data,node)">
{{ $t('panel.delete') }}
</el-dropdown-item>
<el-dropdown-item v-if="data.nodeType==='panel'" icon="el-icon-share" :command="beforeClickMore('share',data,node)">
{{ $t('panel.share') }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
</span>
</span>
</el-tree>
</div>
</el-col>
<el-dialog :title="dialogTitle" :visible="editGroup" :show-close="false" width="30%">
<el-form ref="groupForm" :model="groupForm" :rules="groupFormRules">
<el-form-item :label="$t('commons.name')" prop="name">
<el-input v-model="groupForm.name" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="close()">{{ $t('panel.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="saveGroup(groupForm)">{{ $t('panel.confirm') }}
</el-button>
</div>
</el-dialog>
<el-dialog
:title="authTitle"
:visible.sync="authVisible"
custom-class="de-dialog"
>
<grant-auth v-if="authVisible" :resource-id="authResourceId" @close-grant="closeGrant" />
<!-- <span slot="footer" class="dialog-footer">
<el-button @click="authVisible = false">取 消</el-button>
<el-button type="primary" @click="authVisible = false">确 定</el-button>
</span> -->
</el-dialog>
</el-col>
</el-col>
</template>
<script>
import GrantAuth from '../GrantAuth'
import { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree, defaultTree } from '@/api/panel/panel'
export default {
name: 'PanelList',
components: { GrantAuth },
data() {
return {
authTitle: null,
authResourceId: null,
authVisible: false,
defaultData: [],
dialogTitle: '',
search: '',
editGroup: false,
editTable: false,
tData: [],
tableData: [],
currGroup: {},
expandedArray: [],
groupForm: {
name: null,
pid: null,
level: 0,
nodeType: null,
children: [],
sort: 'node_type desc,name asc'
},
tableForm: {
name: '',
mode: '',
sort: 'node_type asc,create_time desc,name asc'
},
groupFormRules: {
name: [
{ required: true, message: this.$t('commons.input_content'), trigger: 'blur' }
]
},
tableFormRules: {
name: [
{ required: true, message: this.$t('commons.input_content'), trigger: 'blur' }
],
mode: [
{ required: true, message: this.$t('commons.input_content'), trigger: 'blur' }
]
}
}
},
computed: {
},
watch: {
// search(val){
// this.groupForm.name = val;
// this.tree(this.groupForm);
// }
},
mounted() {
this.defaultTree()
this.tree(this.groupForm)
this.refresh()
this.tableTree()
// this.$router.push('/dataset');
},
methods: {
clickAdd(param) {
// console.log(param);
this.add(param.type)
this.groupForm.pid = param.data.id
this.groupForm.level = param.data.level + 1
},
beforeClickAdd(type, data, node) {
return {
'type': type,
'data': data,
'node': node
}
},
clickMore(param) {
console.log(param)
switch (param.type) {
case 'rename':
this.add(param.data.nodeType)
this.groupForm = JSON.parse(JSON.stringify(param.data))
break
case 'move':
break
case 'delete':
this.delete(param.data)
break
case 'editTable':
this.editTable = true
this.tableForm = JSON.parse(JSON.stringify(param.data))
this.tableForm.mode = this.tableForm.mode + ''
break
case 'deleteTable':
this.deleteTable(param.data)
break
case 'share':
this.share(param.data)
break
}
},
beforeClickMore(type, data, node) {
return {
'type': type,
'data': data,
'node': node
}
},
add(nodeType) {
switch (nodeType) {
case 'folder':
this.dialogTitle = this.$t('panel.groupAdd')
break
case 'panel':
this.dialogTitle = this.$t('panel.panelAdd')
break
}
this.groupForm.nodeType = nodeType
this.editGroup = true
},
saveGroup(group) {
// console.log(group);
this.$refs['groupForm'].validate((valid) => {
if (valid) {
addGroup(group).then(res => {
this.close()
this.$message({
message: this.$t('commons.save_success'),
type: 'success',
showClose: true
})
this.tree(this.groupForm)
})
} else {
this.$message({
message: this.$t('commons.input_content'),
type: 'error',
showClose: true
})
return false
}
})
},
saveTable(table) {
// console.log(table)
table.mode = parseInt(table.mode)
this.$refs['tableForm'].validate((valid) => {
if (valid) {
addTable(table).then(response => {
this.closeTable()
this.$message({
message: this.$t('commons.save_success'),
type: 'success',
showClose: true
})
this.tableTree()
// this.$router.push('/dataset/home')
this.$emit('switchComponent', { name: '' })
this.$store.dispatch('dataset/setTable', null)
})
} else {
this.$message({
message: this.$t('commons.input_content'),
type: 'error',
showClose: true
})
return false
}
})
},
delete(data) {
this.$confirm(this.$t('panel.confirm_delete'), this.$t('panel.tips'), {
confirmButtonText: this.$t('panel.confirm'),
cancelButtonText: this.$t('panel.cancel'),
type: 'warning'
}).then(() => {
delGroup(data.id).then(response => {
this.$message({
type: 'success',
message: this.$t('panel.delete_success'),
showClose: true
})
this.tree(this.groupForm)
})
}).catch(() => {
})
},
deleteTable(data) {
this.$confirm(this.$t('panel.confirm_delete'), this.$t('panel.tips'), {
confirmButtonText: this.$t('panel.confirm'),
cancelButtonText: this.$t('panel.cancel'),
type: 'warning'
}).then(() => {
delTable(data.id).then(response => {
this.$message({
type: 'success',
message: this.$t('panel.delete_success'),
showClose: true
})
this.tableTree()
// this.$router.push('/dataset/home')
this.$emit('switchComponent', { name: '' })
this.$store.dispatch('dataset/setTable', null)
})
}).catch(() => {
})
},
close() {
this.editGroup = false
this.groupForm = {
name: null,
pid: null,
level: 0,
nodeType: null,
children: [],
sort: 'node_type desc,name asc'
}
},
closeTable() {
this.editTable = false
this.tableForm = {
name: ''
}
},
tree(group) {
groupTree(group).then(res => {
this.tData = res.data
})
},
defaultTree() {
const requestInfo = {
panelType: 'system'
}
defaultTree(requestInfo).then(res => {
this.defaultData = res.data
})
},
tableTree() {
this.tableData = []
if (this.currGroup.id) {
loadTable({
sort: 'type asc,create_time desc,name asc',
sceneId: this.currGroup.id
}).then(res => {
this.tableData = res.data
})
}
},
nodeClick(data, node) {
if (data.nodeType === 'panel') {
this.currGroup = data
// this.$store.dispatch('panel/setPanelInfo', data)
this.$router.replace('/panelEdit')
}
if (node.expanded) {
this.expandedArray.push(data.id)
} else {
const index = this.expandedArray.indexOf(data.id)
if (index > -1) {
this.expandedArray.splice(index, 1)
}
}
// console.log(this.expandedArray);
},
back() {
this.sceneMode = false
// const route = this.$store.state.permission.currentRoutes
// console.log(route)
// this.$router.push('/dataset/index')
this.$store.dispatch('dataset/setSceneData', null)
this.$emit('switchComponent', { name: '' })
},
clickAddData(param) {
// console.log(param);
switch (param.type) {
case 'db':
this.addDB()
break
case 'sql':
this.$message(param.type)
break
case 'excel':
this.$message(param.type)
break
case 'custom':
this.$message(param.type)
break
}
},
beforeClickAddData(type) {
return {
'type': type
}
},
addDB() {
// this.$router.push({
// name: 'add_db',
// params: {
// scene: this.currGroup
// }
// })
this.$emit('switchComponent', { name: 'AddDB', param: this.currGroup })
},
sceneClick(data, node) {
// console.log(data);
this.$store.dispatch('dataset/setTable', null)
this.$store.dispatch('dataset/setTable', data.id)
// this.$router.push({
// name: 'table',
// params: {
// table: data
// }
// })
this.$emit('switchComponent', { name: 'ViewTable' })
},
refresh() {
const path = this.$route.path
if (path === '/dataset/table') {
this.sceneMode = true
const sceneId = this.$store.state.dataset.sceneData
getScene(sceneId).then(res => {
this.currGroup = res.data
})
}
},
panelDefaultClick(data, node) {
console.log(data)
console.log(node)
this.$store.dispatch('panel/setPanelInfo', data)
// 切换view
this.$emit('switchComponent', { name: 'PanelView' })
},
share(data) {
this.authResourceId = data.id
this.authTitle = '把[' + data.label + ']分享给'
this.authVisible = true
},
closeGrant() {
this.authResourceId = null
this.authVisible = false
}
}
}
</script>
<style scoped>
.header-title {
font-size: 14px;
flex: 1;
color: #606266;
font-weight: bold;
}
.el-divider--horizontal {
margin: 12px 0
}
.search-input {
padding: 12px 0;
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
.custom-position {
flex: 1;
display: flex;
align-items: center;
font-size: 14px;
flex-flow: row nowrap;
}
.form-item {
margin-bottom: 0;
}
.title-css {
height: 26px;
}
.title-text {
line-height: 26px;
}
</style>
frontend/src/views/panel/new/PanelViewShow.vue 0 → 100644
浏览文件 @ 7a529b29
<template>
<el-row style="height: 100%;overflow-y: hidden;width: 100%;">
<el-row style="display: flex;height: 100%">
<el-col class="panel-design">
<!--TODO 仪表盘设计公共设置区域-->
<el-row class="panel-design-head">
<span style="float: left;line-height: 40px; color: gray">
<span>名称：{{ panelInfo.name || '测试仪表板' }}</span>
</span>
<span style="float: right;line-height: 40px;">
<el-tooltip content="返回目录">
<el-button class="el-icon-refresh-left" size="mini" circle />
</el-tooltip>
<el-tooltip content="背景图">
<el-button class="el-icon-full-screen" size="mini" circle />
</el-tooltip>
<el-tooltip content="预览">
<el-button class="el-icon-view" size="mini" circle @click="save" />
</el-tooltip>
</span>
</el-row>
<el-row class="panel-design-show">
<div class="container" style="overflow-y: auto">
<div :style="gridStyle">
<!-- <draggable-->
<!-- v-model="thumbnailsTmp"-->
<!-- :options="{group:{name: 'itxst',pull:'clone'},sort: true}"-->
<!-- animation="300"-->
<!-- :move="onMove"-->
<!-- style="height: 100%;overflow:auto"-->
<!-- @end="end1"-->
<!-- >-->
<vdrr v-for="item in thumbnailsTmp" v-show="item.keepFlag" :key="item.name" :view-id="item.id" :parent="true" @newStyle="newStyle" @removeView="removeView">
<img class="view-list-thumbnails" :src="'/common-files/images/'+item.id" alt="">
</vdrr>
<!-- </draggable>-->
</div>
</div>
<!-- <div class="Echarts" style="height: 100%;display: flex;margin-top: 10px;">-->
<!-- <div id="echart" style="width: 100%;height: 80vh;"/>-->
<!-- </div>-->
</el-row>
</el-col>
</el-row>
</el-row>
</template>
<script>
import { post } from '@/api/dataset/dataset'
export default {
name: 'PanelViewShow',
data() {
return {
gridStyle: {
position: 'relative',
height: '2000px',
width: '2000px',
backgroundColor: '#808080',
background: 'linear-gradient(-90deg, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .1) 1px, transparent 1px)',
backgroundSize: '20px 20px, 20px 20px'
},
ViewActiveName: 'Views',
table: {},
thumbnailsTmp: [
{ id: 'b4e3fd39-1424-4f22-bbac-07885829fb59', name: 'TEST1', keepFlag: true, style: '' },
{ id: 'bf91a1dc-10c1-4383-87ae-9ab1d6e57918', name: 'TEST2', keepFlag: true, style: '' }
],
thumbnails: [
{ id: 'e70d7955-44dc-4158-9002-7b48ed0d5d80', name: 'TEST1' },
{ id: 'bf91a1dc-10c1-4383-87ae-9ab1d6e57918', name: 'TEST2' },
{ id: 'aebc8346-c3f2-44ad-97d3-1e36a10dd0fa', name: 'TEST3' },
{ id: 'b4e3fd39-1424-4f22-bbac-07885829fb59', name: 'TEST4' }
],
quota: [],
view: {
xaxis: [],
yaxis: [],
show: true,
type: 'bar',
title: ''
},
// 定义要被拖拽对象的数组
arr1: [
{ id: 1, name: 'id' },
{ id: 2, name: '名称' },
{ id: 3, name: '类型' },
{ id: 5, name: '状态' },
{ id: 4, name: '指标指标指标' }
],
arr2: [
{ id: 11, name: '容量' }
],
moveId: -1
}
},
computed: {
panelInfo() {
return this.$store.state.panel.panelInfo
}
},
watch: {},
created() {
// this.get(this.$store.state.chart.viewId);
},
mounted() {
// this.get(this.$store.state.chart.viewId);
this.getData(this.$store.state.chart.viewId)
// this.myEcharts();
},
activated() {
},
methods: {
panelViewAdd(item) {
const pushItem = {
id: item.id,
name: item.name,
keepFlag: true
}
debugger
this.thumbnailsTmp.push(pushItem)
console.log(this.thumbnailsTmp)
},
removeView(viewId) {
this.thumbnailsTmp.forEach(function(item, index) {
if (item.id === viewId) {
item.keepFlag = false
}
})
},
newStyle(viewId, newStyleInfo) {
console.log(viewId)
console.log(JSON.stringify(newStyleInfo))
},
initTableData(id) {
if (id != null) {
post('/dataset/table/get/' + id, null).then(response => {
this.table = response.data
this.initTableField(id)
})
}
},
initTableField(id) {
post('/dataset/table/getFieldsFromDE', this.table).then(response => {
this.thumbnails = response.data.thumbnails
this.quota = response.data.quota
})
},
click1(item) {
// console.log(item);
const c = this.view.xaxis.filter(function(ele) {
return ele.id === item.id
})
// console.log(c);
if (c && c.length === 0) {
this.view.xaxis.push(item)
}
},
click2(item) {
// console.log(item);
const c = this.view.yaxis.filter(function(ele) {
return ele.id === item.id
})
// console.log(c);
if (c && c.length === 0) {
this.view.yaxis.push(item)
}
},
clear1(index) {
this.view.xaxis.splice(index, 1)
},
clear2(index) {
this.view.yaxis.splice(index, 1)
},
get(id) {
if (id) {
post('/chart/view/get/' + id, null).then(response => {
this.view = response.data
this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
})
} else {
this.view = {}
}
},
save() {
const view = JSON.parse(JSON.stringify(this.view))
view.id = this.view.id
view.sceneId = this.sceneId
view.name = this.table.name
view.tableId = this.$store.state.chart.tableId
view.xaxis = JSON.stringify(view.xaxis)
view.yaxis = JSON.stringify(view.yaxis)
post('/chart/view/save', view).then(response => {
// this.get(response.data.id);
this.getData(response.data.id)
this.$store.dispatch('chart/setChartSceneData', null)
this.$store.dispatch('chart/setChartSceneData', this.sceneId)
})
},
getData(id) {
// if (id) {
// post('/chart/view/getData/' + id, null).then(response => {
// this.view = response.data
// this.view.xaxis = this.view.xaxis ? JSON.parse(this.view.xaxis) : []
// this.view.yaxis = this.view.yaxis ? JSON.parse(this.view.yaxis) : []
// const chart = response.data
// const chart_option = JSON.parse(JSON.stringify(BASE_BAR))
// // console.log(chart_option);
// if (chart.data) {
// chart_option.title.text = chart.title
// chart_option.xAxis.data = chart.data.x
// chart.data.series.forEach(function(y) {
// chart_option.legend.data.push(y.name)
// chart_option.series.push(y)
// })
// }
// // console.log(chart_option);
// this.myEcharts(chart_option)
// })
// } else {
// this.view = {}
// }
},
// 左边往右边拖动时的事件
end1(e) {
// console.log(e)
// var that = this;
// var items = this.arr2.filter(function (m) {
// return m.id == that.moveId
// })
// //如果左边
// if (items.length < 2) return;
// this.arr2.splice(e.newDraggableIndex, 1)
},
// 右边往左边拖动时的事件
end2(e) {
// console.log(e)
// var that = this;
// var items = this.yAxisData.filter(function (m) {
// return m.id == that.moveId
// })
// //如果左边
// if (items.length < 2) return;
// this.yAxisData.splice(e.newDraggableIndex, 1)
},
end3(e) {
},
end4(e) {
},
// move回调方法
onMove(e, originalEvent) {
console.log(e)
// this.moveId = e.relatedContext.element.id;
// //不允许停靠
// if (e.relatedContext.element.id == 1) return false;
// //不允许拖拽
// if (e.draggedContext.element.id == 4) return false;
// if (e.draggedContext.element.id == 11) return false;
return true
},
myEcharts(option) {
// 基于准备好的dom，初始化echarts实例
var myChart = this.$echarts.init(document.getElementById('echart'))
// 指定图表的配置项和数据
setTimeout(myChart.setOption(option, true), 500)
window.onresize = function() {
myChart.resize()
}
}
}
}
</script>
<style scoped>
.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 {
width: 100%;
padding: 0px 15px 15px 0px;
}
.panel-design {
height: 100%;
min-width: 500px;
border-top: 1px solid #E6E6E6;
}
.panel-design-head {
height: 40px;
}
.panel-design-show {
height: 100%;
width: 100%;
border-top: 1px solid #E6E6E6;
}
.padding-lr {
padding: 0 6px;
}
.itxst {
margin: 10px;
text-align: left;
}
.col {
width: 40%;
flex: 1;
padding: 10px;
border: solid 1px #eee;
border-radius: 5px;
float: left;
}
.col + .col {
margin-left: 10px;
}
.item {
padding: 2px 12px;
margin: 3px 3px 0 3px;
border: solid 1px #eee;
background-color: #f1f1f1;
text-align: left;
display: block;
}
.item + .item {
border-top: none;
margin-top: 3px;
}
.item:hover {
background-color: #fdfdfd;
cursor: pointer;
}
.item-axis {
padding: 2px 12px;
margin: 3px 3px 0 3px;
border: solid 1px #eee;
background-color: #f1f1f1;
text-align: left;
}
.item-axis:hover {
background-color: #fdfdfd;
cursor: pointer;
}
.el-form-item {
margin-bottom: 0;
}
.container {
width: 100%;
height: 600px;
border: 1px solid #000;
position: relative;
box-sizing: border-box;
}
span {
font-size: 12px;
}
</style>
frontend/src/views/panel/new/edit.vue 0 → 100644
浏览文件 @ 7a529b29
<template>
<el-container>
<!-- <de-header>Header</de-header> -->
<el-header class="de-header">Header</el-header>
<de-container>
<de-aside-container class="ms-aside-container">Aside</de-aside-container>
<de-main-container class="ms-main-container"> Main</de-main-container>
</de-container>
</el-container>
</template>
<script>
import DeMainContainer from '@/components/dataease/DeMainContainer'
import DeContainer from '@/components/dataease/DeContainer'
import DeAsideContainer from '@/components/dataease/DeAsideContainer'
export default {
components: {
DeMainContainer,
DeContainer,
DeAsideContainer
}
}
</script>
<style scoped>
.ms-aside-container {
height: calc(100vh - 91px);
padding: 15px;
min-width: 260px;
max-width: 460px;
border: none;
}
.ms-main-container {
height: calc(100vh - 91px);
}
.de-header {
height: 35px !important;
border-bottom: 1px solid #E6E6E6;
}
</style>
frontend/src/views/panel/new/index1.vue 0 → 100644
浏览文件 @ 7a529b29
<template>
<de-container>
<de-aside-container>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane name="PanelList">
<span slot="label"><i class="el-icon-document" />列表</span>
<PanelList />
</el-tab-pane>
<el-tab-pane name="panels_star">
<span slot="label"><i class="el-icon-star-off" />收藏</span>
开发中...
</el-tab-pane>
<el-tab-pane name="panels_share" :lazy="true">
<span slot="label"><i class="el-icon-share" />分享</span>
<share-tree v-if="showShare" />
</el-tab-pane>
</el-tabs>
</de-aside-container>
<de-main-container>
<!--<router-view/>-->
<component :is="component" :param="param" />
</de-main-container>
</de-container>
</template>
<script>
import DeMainContainer from '@/components/dataease/DeMainContainer'
import DeContainer from '@/components/dataease/DeContainer'
import DeAsideContainer from '@/components/dataease/DeAsideContainer'
// import Group from './group/Group'
import PanelList from './PanelList'
import PanelView from '../list/PanelView'
import PanelViewShow from './PanelViewShow'
import ShareTree from '../GrantAuth/shareTree'
export default {
name: 'Panel',
components: { DeMainContainer, DeContainer, DeAsideContainer, PanelList, PanelView, PanelViewShow, ShareTree },
data() {
return {
component: PanelViewShow,
param: {},
activeName: 'PanelList',
showShare: false
}
},
methods: {
handleClick(tab, event) {
// 点击分析面板需要刷新分享内容
if (tab.name === 'panels_share') {
this.refreshShare()
}
},
// switchComponent(c) {
// console.log(c)
// this.param = c.param
// switch (c.name) {
// case 'PanelViewShow':
// this.component = PanelViewShow
// break
// }
// },
refreshShare() {
this.showShare = false
this.$nextTick(() => (this.showShare = true))
}
}
}
</script>
<style scoped>
.ms-aside-container {
height: calc(100vh - 56px);
padding: 15px;
min-width: 260px;
max-width: 460px;
}
.ms-main-container {
height: calc(100vh - 56px);
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论