center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

feat:增加仪表盘预览等功能

Browse Source
This commit is contained in:
wangjiahao 2021-03-29 14:57:04 +08:00
parent ced8c21e28
commit 873a03065c
17 changed files with 351 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
backend/src/main/java/io/dataease/base/domain/PanelGroup.java
View File

@ -21,7 +21,5 @@ public class PanelGroup implements Serializable {
private String panelType;
private String panelStyle;
private static final long serialVersionUID = 1L;
}

70
backend/src/main/java/io/dataease/base/domain/PanelGroupExample.java
View File

@ -643,76 +643,6 @@ public class PanelGroupExample {
addCriterion("panel_type not between", value1, value2, "panelType");
return (Criteria) this;
}
public Criteria andPanelStyleIsNull() {
addCriterion("panel_style is null");
return (Criteria) this;
}
public Criteria andPanelStyleIsNotNull() {
addCriterion("panel_style is not null");
return (Criteria) this;
}
public Criteria andPanelStyleEqualTo(String value) {
addCriterion("panel_style =", value, "panelStyle");
return (Criteria) this;
}
public Criteria andPanelStyleNotEqualTo(String value) {
addCriterion("panel_style <>", value, "panelStyle");
return (Criteria) this;
}
public Criteria andPanelStyleGreaterThan(String value) {
addCriterion("panel_style >", value, "panelStyle");
return (Criteria) this;
}
public Criteria andPanelStyleGreaterThanOrEqualTo(String value) {
addCriterion("panel_style >=", value, "panelStyle");
return (Criteria) this;
}
public Criteria andPanelStyleLessThan(String value) {
addCriterion("panel_style <", value, "panelStyle");
return (Criteria) this;
}
public Criteria andPanelStyleLessThanOrEqualTo(String value) {
addCriterion("panel_style <=", value, "panelStyle");
return (Criteria) this;
}
public Criteria andPanelStyleLike(String value) {
addCriterion("panel_style like", value, "panelStyle");
return (Criteria) this;
}
public Criteria andPanelStyleNotLike(String value) {
addCriterion("panel_style not like", value, "panelStyle");
return (Criteria) this;
}
public Criteria andPanelStyleIn(List<String> values) {
addCriterion("panel_style in", values, "panelStyle");
return (Criteria) this;
}
public Criteria andPanelStyleNotIn(List<String> values) {
addCriterion("panel_style not in", values, "panelStyle");
return (Criteria) this;
}
public Criteria andPanelStyleBetween(String value1, String value2) {
addCriterion("panel_style between", value1, value2, "panelStyle");
return (Criteria) this;
}
public Criteria andPanelStyleNotBetween(String value1, String value2) {
addCriterion("panel_style not between", value1, value2, "panelStyle");
return (Criteria) this;
}
}
public static class Criteria extends GeneratedCriteria {

17
backend/src/main/java/io/dataease/base/domain/PanelGroupWithBLOBs.java Normal file
View File

@ -0,0 +1,17 @@
package io.dataease.base.domain;
import java.io.Serializable;
import lombok.Data;
import lombok.EqualsAndHashCode;
import lombok.ToString;
@Data
@EqualsAndHashCode(callSuper = true)
@ToString(callSuper = true)
public class PanelGroupWithBLOBs extends PanelGroup implements Serializable {
private String panelStyle;
private String panelData;
private static final long serialVersionUID = 1L;
}

17
backend/src/main/java/io/dataease/base/mapper/PanelGroupMapper.java
View File

@ -2,6 +2,7 @@ package io.dataease.base.mapper;
import io.dataease.base.domain.PanelGroup;
import io.dataease.base.domain.PanelGroupExample;
import io.dataease.base.domain.PanelGroupWithBLOBs;
import java.util.List;
import org.apache.ibatis.annotations.Param;
@ -12,19 +13,25 @@ public interface PanelGroupMapper {
int deleteByPrimaryKey(String id);
int insert(PanelGroup record);
int insert(PanelGroupWithBLOBs record);
int insertSelective(PanelGroup record);
int insertSelective(PanelGroupWithBLOBs record);
List<PanelGroupWithBLOBs> selectByExampleWithBLOBs(PanelGroupExample example);
List<PanelGroup> selectByExample(PanelGroupExample example);
PanelGroup selectByPrimaryKey(String id);
PanelGroupWithBLOBs selectByPrimaryKey(String id);
int updateByExampleSelective(@Param("record") PanelGroup record, @Param("example") PanelGroupExample example);
int updateByExampleSelective(@Param("record") PanelGroupWithBLOBs record, @Param("example") PanelGroupExample example);
int updateByExampleWithBLOBs(@Param("record") PanelGroupWithBLOBs record, @Param("example") PanelGroupExample example);
int updateByExample(@Param("record") PanelGroup record, @Param("example") PanelGroupExample example);
int updateByPrimaryKeySelective(PanelGroup record);
int updateByPrimaryKeySelective(PanelGroupWithBLOBs record);
int updateByPrimaryKeyWithBLOBs(PanelGroupWithBLOBs record);
int updateByPrimaryKey(PanelGroup record);
}

97
backend/src/main/java/io/dataease/base/mapper/PanelGroupMapper.xml
View File

@ -10,7 +10,10 @@
<result column="create_by" jdbcType="VARCHAR" property="createBy" />
<result column="create_time" jdbcType="BIGINT" property="createTime" />
<result column="panel_type" jdbcType="VARCHAR" property="panelType" />
<result column="panel_style" jdbcType="VARCHAR" property="panelStyle" />
</resultMap>
<resultMap extends="BaseResultMap" id="ResultMapWithBLOBs" type="io.dataease.base.domain.PanelGroupWithBLOBs">
<result column="panel_style" jdbcType="LONGVARCHAR" property="panelStyle" />
<result column="panel_data" jdbcType="LONGVARCHAR" property="panelData" />
</resultMap>
<sql id="Example_Where_Clause">
<where>
@ -71,8 +74,27 @@
</where>
</sql>
<sql id="Base_Column_List">
id, `name`, pid, `level`, node_type, create_by, create_time, panel_type, panel_style
id, `name`, pid, `level`, node_type, create_by, create_time, panel_type
</sql>
<sql id="Blob_Column_List">
panel_style, panel_data
</sql>
<select id="selectByExampleWithBLOBs" parameterType="io.dataease.base.domain.PanelGroupExample" resultMap="ResultMapWithBLOBs">
select
<if test="distinct">
distinct
</if>
<include refid="Base_Column_List" />
,
<include refid="Blob_Column_List" />
from panel_group
<if test="_parameter != null">
<include refid="Example_Where_Clause" />
</if>
<if test="orderByClause != null">
order by ${orderByClause}
</if>
</select>
<select id="selectByExample" parameterType="io.dataease.base.domain.PanelGroupExample" resultMap="BaseResultMap">
select
<if test="distinct">
@ -87,9 +109,11 @@
order by ${orderByClause}
</if>
</select>
<select id="selectByPrimaryKey" parameterType="java.lang.String" resultMap="BaseResultMap">
<select id="selectByPrimaryKey" parameterType="java.lang.String" resultMap="ResultMapWithBLOBs">
select
<include refid="Base_Column_List" />
,
<include refid="Blob_Column_List" />
from panel_group
where id = #{id,jdbcType=VARCHAR}
</select>
@ -103,17 +127,17 @@
<include refid="Example_Where_Clause" />
</if>
</delete>
<insert id="insert" parameterType="io.dataease.base.domain.PanelGroup">
<insert id="insert" parameterType="io.dataease.base.domain.PanelGroupWithBLOBs">
insert into panel_group (id, `name`, pid,
`level`, node_type, create_by,
create_time, panel_type, panel_style
)
create_time, panel_type, panel_style,
panel_data)
values (#{id,jdbcType=VARCHAR}, #{name,jdbcType=VARCHAR}, #{pid,jdbcType=VARCHAR},
#{level,jdbcType=INTEGER}, #{nodeType,jdbcType=VARCHAR}, #{createBy,jdbcType=VARCHAR},
#{createTime,jdbcType=BIGINT}, #{panelType,jdbcType=VARCHAR}, #{panelStyle,jdbcType=VARCHAR}
)
#{createTime,jdbcType=BIGINT}, #{panelType,jdbcType=VARCHAR}, #{panelStyle,jdbcType=LONGVARCHAR},
#{panelData,jdbcType=LONGVARCHAR})
</insert>
<insert id="insertSelective" parameterType="io.dataease.base.domain.PanelGroup">
<insert id="insertSelective" parameterType="io.dataease.base.domain.PanelGroupWithBLOBs">
insert into panel_group
<trim prefix="(" suffix=")" suffixOverrides=",">
<if test="id != null">
@ -143,6 +167,9 @@
<if test="panelStyle != null">
panel_style,
</if>
<if test="panelData != null">
panel_data,
</if>
</trim>
<trim prefix="values (" suffix=")" suffixOverrides=",">
<if test="id != null">
@ -170,7 +197,10 @@
#{panelType,jdbcType=VARCHAR},
</if>
<if test="panelStyle != null">
#{panelStyle,jdbcType=VARCHAR},
#{panelStyle,jdbcType=LONGVARCHAR},
</if>
<if test="panelData != null">
#{panelData,jdbcType=LONGVARCHAR},
</if>
</trim>
</insert>
@ -208,13 +238,32 @@
panel_type = #{record.panelType,jdbcType=VARCHAR},
</if>
<if test="record.panelStyle != null">
panel_style = #{record.panelStyle,jdbcType=VARCHAR},
panel_style = #{record.panelStyle,jdbcType=LONGVARCHAR},
</if>
<if test="record.panelData != null">
panel_data = #{record.panelData,jdbcType=LONGVARCHAR},
</if>
</set>
<if test="_parameter != null">
<include refid="Update_By_Example_Where_Clause" />
</if>
</update>
<update id="updateByExampleWithBLOBs" parameterType="map">
update panel_group
set id = #{record.id,jdbcType=VARCHAR},
`name` = #{record.name,jdbcType=VARCHAR},
pid = #{record.pid,jdbcType=VARCHAR},
`level` = #{record.level,jdbcType=INTEGER},
node_type = #{record.nodeType,jdbcType=VARCHAR},
create_by = #{record.createBy,jdbcType=VARCHAR},
create_time = #{record.createTime,jdbcType=BIGINT},
panel_type = #{record.panelType,jdbcType=VARCHAR},
panel_style = #{record.panelStyle,jdbcType=LONGVARCHAR},
panel_data = #{record.panelData,jdbcType=LONGVARCHAR}
<if test="_parameter != null">
<include refid="Update_By_Example_Where_Clause" />
</if>
</update>
<update id="updateByExample" parameterType="map">
update panel_group
set id = #{record.id,jdbcType=VARCHAR},
@ -224,13 +273,12 @@
node_type = #{record.nodeType,jdbcType=VARCHAR},
create_by = #{record.createBy,jdbcType=VARCHAR},
create_time = #{record.createTime,jdbcType=BIGINT},
panel_type = #{record.panelType,jdbcType=VARCHAR},
panel_style = #{record.panelStyle,jdbcType=VARCHAR}
panel_type = #{record.panelType,jdbcType=VARCHAR}
<if test="_parameter != null">
<include refid="Update_By_Example_Where_Clause" />
</if>
</update>
<update id="updateByPrimaryKeySelective" parameterType="io.dataease.base.domain.PanelGroup">
<update id="updateByPrimaryKeySelective" parameterType="io.dataease.base.domain.PanelGroupWithBLOBs">
update panel_group
<set>
<if test="name != null">
@ -255,11 +303,27 @@
panel_type = #{panelType,jdbcType=VARCHAR},
</if>
<if test="panelStyle != null">
panel_style = #{panelStyle,jdbcType=VARCHAR},
panel_style = #{panelStyle,jdbcType=LONGVARCHAR},
</if>
<if test="panelData != null">
panel_data = #{panelData,jdbcType=LONGVARCHAR},
</if>
</set>
where id = #{id,jdbcType=VARCHAR}
</update>
<update id="updateByPrimaryKeyWithBLOBs" parameterType="io.dataease.base.domain.PanelGroupWithBLOBs">
update panel_group
set `name` = #{name,jdbcType=VARCHAR},
pid = #{pid,jdbcType=VARCHAR},
`level` = #{level,jdbcType=INTEGER},
node_type = #{nodeType,jdbcType=VARCHAR},
create_by = #{createBy,jdbcType=VARCHAR},
create_time = #{createTime,jdbcType=BIGINT},
panel_type = #{panelType,jdbcType=VARCHAR},
panel_style = #{panelStyle,jdbcType=LONGVARCHAR},
panel_data = #{panelData,jdbcType=LONGVARCHAR}
where id = #{id,jdbcType=VARCHAR}
</update>
<update id="updateByPrimaryKey" parameterType="io.dataease.base.domain.PanelGroup">
update panel_group
set `name` = #{name,jdbcType=VARCHAR},
@ -268,8 +332,7 @@
node_type = #{nodeType,jdbcType=VARCHAR},
create_by = #{createBy,jdbcType=VARCHAR},
create_time = #{createTime,jdbcType=BIGINT},
panel_type = #{panelType,jdbcType=VARCHAR},
panel_style = #{panelStyle,jdbcType=VARCHAR}
panel_type = #{panelType,jdbcType=VARCHAR}
where id = #{id,jdbcType=VARCHAR}
</update>
</mapper>

3
backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java
View File

@ -1,6 +1,7 @@
package io.dataease.controller.panel;
import io.dataease.base.domain.DatasetGroup;
import io.dataease.base.domain.PanelGroupWithBLOBs;
import io.dataease.controller.request.dataset.DataSetGroupRequest;
import io.dataease.controller.request.panel.PanelGroupRequest;
import io.dataease.dto.dataset.DataSetGroupDTO;
@ -47,7 +48,7 @@ public class PanelGroupController {
}
@GetMapping("/findOne/{id}")
public PanelGroupDTO findOne(@PathVariable String id) throws Exception {
public PanelGroupWithBLOBs findOne(@PathVariable String id) throws Exception {
return panelGroupService.findOne(id);
}

3
backend/src/main/java/io/dataease/dto/panel/PanelGroupDTO.java
View File

@ -1,6 +1,7 @@
package io.dataease.dto.panel;
import io.dataease.base.domain.PanelGroup;
import io.dataease.base.domain.PanelGroupWithBLOBs;
import io.dataease.dto.chart.ChartViewDTO;
import lombok.Data;
@ -13,7 +14,7 @@ import java.util.List;
* Description:
*/
@Data
public class PanelGroupDTO extends PanelGroup {
public class PanelGroupDTO extends PanelGroupWithBLOBs {
private String label;

8
backend/src/main/java/io/dataease/service/panel/PanelGroupService.java
View File

@ -77,7 +77,7 @@ public class PanelGroupService {
request.setCreateTime(System.currentTimeMillis());
panelGroupMapper.insert(request);
} else {
panelGroupMapper.updateByPrimaryKey(request);
panelGroupMapper.updateByPrimaryKeySelective(request);
}
PanelGroupDTO panelGroupDTO = new PanelGroupDTO();
BeanUtils.copyBean(panelGroupDTO, request);
@ -92,7 +92,11 @@ public class PanelGroupService {
}
public PanelGroupDTO findOne(String panelId) throws Exception{
public PanelGroupWithBLOBs findOne(String panelId){
return panelGroupMapper.selectByPrimaryKey(panelId);
}
public PanelGroupDTO findOneBack(String panelId) throws Exception{
PanelGroupDTO panelGroupDTO = extPanelGroupMapper.panelGroup(panelId);
Assert.notNull(panelGroupDTO, "未查询到仪表盘信息");
PanelDesignExample panelDesignExample = new PanelDesignExample();

5
backend/src/main/resources/db/migration/V12__panel_table.sql
View File

@ -21,6 +21,7 @@ CREATE TABLE `panel_design` (
-- ----------------------------
-- Table structure for panel_group
-- ----------------------------
-- ----------------------------
DROP TABLE IF EXISTS `panel_group`;
CREATE TABLE `panel_group` (
`id` varchar(50) NOT NULL,
@ -31,10 +32,10 @@ CREATE TABLE `panel_group` (
`create_by` varchar(255) DEFAULT NULL COMMENT '创建人',
`create_time` bigint(13) DEFAULT NULL COMMENT '创建时间',
`panel_type` varchar(255) DEFAULT NULL COMMENT '仪表盘类型 system 系统内置 self 用户自建 ',
`panel_style` varchar(2000) DEFAULT NULL COMMENT 'panel 样式',
`panel_style` longtext COMMENT 'panel 样式',
`panel_data` longtext COMMENT 'panel 数据',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of panel_group
-- ----------------------------

4
backend/src/main/resources/generatorConfig.xml
View File

@ -65,8 +65,8 @@
<!--要生成的数据库表 -->
<!-- <table tableName="datasource"/>-->
<table tableName="panel_design"/>
<table tableName="panel_design"/>
<table tableName="panel_group"/>
<!-- <table tableName="panel_design"/>-->
</context>

88
frontend/src/components/Editor/Preview-back.vue Normal file
View File

@ -0,0 +1,88 @@
<template>
<div class="bg" v-if="show">
<el-button @click="close" class="close">关闭</el-button>
<div class="canvas-container">
<div class="canvas"
:style="{
width: changeStyleWithScale(canvasStyleData.width) + 'px',
height: changeStyleWithScale(canvasStyleData.height) + 'px',
}"
>
<ComponentWrapper
v-for="(item, index) in componentData"
:key="index"
:config="item"
/>
</div>
</div>
</div>
</template>
<script>
import { getStyle } from '@/utils/style'
import { mapState } from 'vuex'
import ComponentWrapper from './ComponentWrapper'
import { changeStyleWithScale } from '@/utils/translate'
export default {
model: {
prop: 'show',
event: 'change',
},
props: {
show: {
type: Boolean,
default: false,
},
},
components: { ComponentWrapper },
computed: mapState([
'componentData',
'canvasStyleData',
]),
methods: {
changeStyleWithScale,
getStyle,
close() {
this.$emit('change', false)
},
},
}
</script>
<style lang="scss" scoped>
.bg {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
background: rgb(0, 0, 0, .5);
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
overflow: auto;
padding: 20px;
.canvas-container {
width: calc(100% - 40px);
height: calc(100% - 120px);
overflow: auto;
.canvas {
background: #fff;
position: relative;
margin: auto;
}
}
.close {
position: absolute;
right: 20px;
top: 100px;
}
}
</style>

20
frontend/src/components/Editor/Preview.vue
View File

@ -1,8 +1,7 @@
<template>
<div class="bg" v-if="show">
<el-button @click="close" class="close">关闭</el-button>
<div class="canvas-container">
<div class="canvas"
<div
class="canvas"
:style="{
width: changeStyleWithScale(canvasStyleData.width) + 'px',
height: changeStyleWithScale(canvasStyleData.height) + 'px',
@ -15,7 +14,6 @@
/>
</div>
</div>
</div>
</template>
<script>
@ -25,20 +23,20 @@ import ComponentWrapper from './ComponentWrapper'
import { changeStyleWithScale } from '@/utils/translate'
export default {
components: { ComponentWrapper },
model: {
prop: 'show',
event: 'change',
event: 'change'
},
props: {
show: {
type: Boolean,
default: false,
default: false
}
},
},
components: { ComponentWrapper },
computed: mapState([
'componentData',
'canvasStyleData',
'canvasStyleData'
]),
methods: {
changeStyleWithScale,
@ -47,8 +45,8 @@ export default {
close() {
this.$emit('change', false)
},
},
}
}
}
</script>

46
frontend/src/components/Toolbar.vue
View File

@ -1,23 +1,36 @@
<template>
<div>
<div class="toolbar">
<el-button @click="undo">撤消</el-button>
<el-button @click="redo">重做</el-button>
<label for="input" class="insert">插入图片</label>
<input id="input" type="file" hidden @change="handleFileChange">
<el-button style="margin-left: 10px;" @click="preview">预览</el-button>
<el-button @click="save">保存</el-button>
<el-button @click="clearCanvas">清空画布</el-button>
<div class="canvas-config">
<span>画布大小</span>
<input v-model="canvasStyleData.width">
<span>*</span>
<input v-model="canvasStyleData.height">
</div>
<div class="canvas-config">
<div class="canvas-config" style="margin-right: 10px">
<span>画布比例</span>
<input v-model="scale" @input="handleScaleChange"> %
</div>
<el-tooltip content="撤消">
<el-button class="el-icon-refresh-right" size="mini" circle @click="undo" />
</el-tooltip>
<el-tooltip content="重做">
<el-button class="el-icon-refresh-left" size="mini" circle @click="redo" />
</el-tooltip>
<el-tooltip content="插入图片">
<el-button class="el-icon-upload" size="mini" circle @click="goFile" />
</el-tooltip>
<el-tooltip content="清空画布" style="margin-right: 10px">
<el-button class="el-icon-document-delete" size="mini" circle @click="clearCanvas" />
</el-tooltip>
<input id="input" ref="files" type="file" hidden @change="handleFileChange">
<el-tooltip content="保存">
<el-button class="el-icon-circle-check" size="mini" circle @click="save" />
</el-tooltip>
<el-tooltip content="预览">
<el-button class="el-icon-view" size="mini" circle @click="preview" />
</el-tooltip>
</div>
<!-- 预览 -->
@ -33,6 +46,7 @@ import Preview from '@/components/Editor/Preview'
import { commonStyle, commonAttr } from '@/custom-component/component-list'
import eventBus from '@/utils/eventBus'
import { deepCopy } from '@/utils/utils'
import { post } from '@/api/panel/panel'
export default {
components: { Preview },
@ -65,6 +79,9 @@ export default {
this.scale = this.canvasStyleData.scale
},
methods: {
goFile() {
this.$refs.files.click()
},
format(value) {
const scale = this.scale
return value * parseInt(scale) / 100
@ -171,9 +188,15 @@ export default {
save() {
localStorage.setItem('canvasData', JSON.stringify(this.componentData))
localStorage.setItem('canvasStyle', JSON.stringify(this.canvasStyleData))
// 保存到数据库
const requestInfo = {
id: this.$store.state.panel.panelInfo.id,
panelStyle: JSON.stringify(this.canvasStyleData),
panelData: JSON.stringify(this.componentData)
}
post('panel/group/save', requestInfo, () => {})
this.$message.success('保存成功')
},
clearCanvas() {
this.$store.commit('setComponentData', [])
this.$store.commit('recordSnapshot')
@ -188,8 +211,9 @@ export default {
<style lang="scss" scoped>
.toolbar {
height: 50px;
line-height: 50px;
float: right;
height: 35px;
line-height: 35px;
background: #fff;
border-bottom: 1px solid #ddd;

7
frontend/src/custom-component/UserView.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="rect-shape">
<chart-component v-if="showCard" :ref="element.propValue.id" class="chart-class" :chart-id="element.propValue.id" :chart="chart" />
<chart-component :ref="element.propValue.id" class="chart-class" :chart-id="element.propValue.id" :chart="chart" />
</div>
</template>
@ -18,9 +18,7 @@ export default {
},
data() {
return {
chart: {},
showCard: false
chart: {}
}
},
created() {
@ -40,7 +38,6 @@ export default {
post('/chart/view/getData/' + id, null).then(response => {
// 将视图传入echart组件
this.chart = response.data
this.showCard = true
})
}
}

68
frontend/src/views/panel/edit/index.vue
View File

@ -1,37 +1,17 @@
<template>
<el-container>
<!-- <de-header>Header</de-header> -->
<el-header class="de-header">
<el-row class="panel-design-head">
<span style="float: left;line-height: 50px; color: gray">
<span>名称：测试仪表板</span>
<span style="float: left;line-height: 35px; color: gray">
名称：{{ panelInfo.name || '测试仪表板' }}
</span>
<!--横向工具栏-->
<Toolbar />
<!-- <span style="float: right;line-height: 35px;">-->
<!-- <el-tooltip content="返回目录">-->
<!-- <el-button class="el-icon-refresh-left" size="mini" circle @click="toDir" />-->
<!-- </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-circle-check" size="mini" circle @click="saveDrawing" />-->
<!-- </el-tooltip>-->
<!-- <el-tooltip content="预览">-->
<!-- <el-button class="el-icon-view" size="mini" circle @click="preViewShow" />-->
<!-- </el-tooltip>-->
<!-- </span>-->
</el-row>
</el-header>
<de-container>
<de-aside-container class="ms-aside-container">
<div style="width: 60px; left: 0px; top: 0px; bottom: 0px; position: absolute">
<div style="width: 60px;height: 100%;overflow: hidden auto;position: relative;margin: 0px auto;">
<!-- 视图图表 -->
<div class="button-div-class" style=" width: 24px;height: 24px;text-align: center;line-height: 1;position: relative;margin: 32px auto 0px;font-size:150%;">
@ -49,28 +29,19 @@
</div>
<!-- 过滤组件 -->
<div tabindex="-1" style="position: relative; margin: 20px auto">
<div style="height: 60px; position: relative">
<div class="button-div-class" style=" text-align: center;line-height: 1;position: absolute;inset: 0px 0px 45px; ">
<!-- <i class="el-icon-s-tools" style="width: 24px; height: 24px;position: relative;flex-shrink: 0;font-size:150%;" /> -->
<el-button circle class="el-icon-s-tools" size="mini" @click="showPanel(1)" />
</div>
<div style=" position: absolute;left: 0px;right: 0px;bottom: 10px; height: 16px;">
<div style=" max-width: 100%;text-align: center;white-space: nowrap;text-overflow: ellipsis;position: relative;flex-shrink: 0;">
组件
</div>
</div>
</div>
</div>
</div>
</div>
<div ref="leftPanel" :class="{show:show}" class="leftPanel-container">
<div />
<div v-show="show" class="leftPanel">
@ -81,8 +52,9 @@
</div>
</div>
</div>
</de-aside-container>
<!--画布区域-->
<de-main-container class="ms-main-container">
<div
class="content"
@ -113,6 +85,7 @@ import { listenGlobalKeyDown } from '@/utils/shortcutKey'
import { mapState } from 'vuex'
import { uuid } from 'vue-uuid'
import Toolbar from '@/components/Toolbar'
import { get } from '@/api/panel/panel'
// 引入样式
import '@/assets/iconfont/iconfont.css'
@ -140,12 +113,19 @@ export default {
reSelectAnimateIndex: undefined
}
},
computed: mapState([
computed: {
panelInfo() {
return this.$store.state.panel.panelInfo
},
...mapState([
'componentData',
'curComponent',
'isClickComponent',
'canvasStyleData'
]),
])
},
watch: {
show(value) {
if (value && !this.clickNotClose) {
@ -156,10 +136,14 @@ export default {
} else {
removeClass(document.body, 'showRightPanel')
}
},
panelInfo(newVal, oldVal) {
this.init(newVal.id)
}
},
created() {
this.restore()
this.init(this.$store.state.panel.panelInfo.id)
// this.restore()
// 全局监听按键事件
listenGlobalKeyDown()
},
@ -174,6 +158,18 @@ export default {
elx && elx.remove()
},
methods: {
init(panelId) {
// 清理原有画布本地数据
localStorage.setItem('canvasData', null)
localStorage.setItem('canvasStyle', null)
if (panelId) {
get('panel/group/findOne/' + panelId).then(response => {
localStorage.setItem('canvasData', response.data.panelData)
localStorage.setItem('canvasStyle', response.data.panelStyle)
this.restore()
})
}
},
save() {
},

31
frontend/src/views/panel/list/PanelList.vue
View File

@ -147,7 +147,8 @@
<script>
import GrantAuth from '../GrantAuth'
import LinkGenerate from '@/views/link/generate'
import { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree, defaultTree } from '@/api/panel/panel'
import generateID from '@/utils/generateID'
import { loadTable, getScene, addGroup, delGroup, addTable, delTable, groupTree, defaultTree, get } from '@/api/panel/panel'
export default {
name: 'PanelList',
@ -422,6 +423,22 @@ export default {
if (data.nodeType === 'panel') {
this.currGroup = data
this.$store.dispatch('panel/setPanelInfo', data)
// 加载视图数据
this.$nextTick(() => {
localStorage.setItem('canvasData', null)
localStorage.setItem('canvasStyle', null)
get('panel/group/findOne/' + data.id).then(response => {
localStorage.setItem('canvasData', response.data.panelData)
localStorage.setItem('canvasStyle', response.data.panelStyle)
// 用保存的数据恢复画布
if (localStorage.getItem('canvasData')) {
this.$store.commit('setComponentData', this.resetID(JSON.parse(localStorage.getItem('canvasData'))))
}
if (localStorage.getItem('canvasStyle')) {
this.$store.commit('setCanvasStyle', JSON.parse(localStorage.getItem('canvasStyle')))
}
})
})
}
if (node.expanded) {
this.expandedArray.push(data.id)
@ -431,14 +448,18 @@ export default {
this.expandedArray.splice(index, 1)
}
}
// console.log(this.expandedArray);
},
resetID(data) {
data.forEach(item => {
item.id = generateID()
})
return data
},
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: '' })
},

35
frontend/src/views/panel/list/PanelViewShow.vue
View File

@ -6,54 +6,27 @@
<!--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-full-screen" size="mini" circle />
</el-tooltip>
<!-- <el-tooltip content="保存">
<el-button class="el-icon-success" size="mini" circle @click="savePanel" />
</el-tooltip> -->
<el-tooltip content="预览">
<el-button class="el-icon-view" size="mini" circle @click="preViewShow" />
</el-tooltip>
</span>
</el-row>
<drawing-board />
<!-- <el-row class="panel-design-show">
<div class="container" :style="panelDetails.gridStyle">
<vue-drag-resize-rotate
v-for="panelDesign in panelDetails.panelDesigns"
v-show="panelDesign.keepFlag"
:key="panelDesign.id"
:panel-design="panelDesign"
:parent="true"
@newStyle="newStyle"
>
<chart-component v-if="panelDesign.componentType==='view'" :ref="panelDesign.id" :chart-id="panelDesign.id" :chart="panelDesign.chartView" />
</vue-drag-resize-rotate>
</div>
</el-row> -->
<!--TODO 仪表盘预览区域-->
<!-- <Preview />-->
</el-col>
</el-row>
</el-row>
</template>
<script>
import DrawingBoard from '../DrawingBoard'
import bus from '@/utils/bus'
import Preview from '@/components/Editor/Preview'
export default {
name: 'PanelViewShow',
components: { DrawingBoard },
components: { Preview },
data() {
return {