forked from github/dataease
Merge branch 'dev-v2' into pr@dev-v2_dzz
This commit is contained in:
dataeaseShu
commit
c635da1c6a
41
README.md
41
README.md
@ -3,7 +3,6 @@
|
||||
<p align="center">
|
||||
<a href="https://www.gnu.org/licenses/gpl-3.0.html"><img src="https://img.shields.io/github/license/dataease/dataease?color=%231890FF" alt="License: GPL v3"></a>
|
||||
<a href="https://app.codacy.com/gh/dataease/dataease?utm_source=github.com&utm_medium=referral&utm_content=dataease/dataease&utm_campaign=Badge_Grade_Dashboard"><img src="https://app.codacy.com/project/badge/Grade/da67574fd82b473992781d1386b937ef" alt="Codacy"></a>
|
||||
<a href="https://github.com/dataease/dataease/releases/latest"><img src="https://img.shields.io/github/v/release/dataease/dataease" alt="Latest release"></a>
|
||||
<a href="https://github.com/dataease/dataease"><img src="https://img.shields.io/github/stars/dataease/dataease?color=%231890FF&style=flat-square" alt="Stars"></a>
|
||||
<a href="https://app.fossa.com/projects/git%2Bgithub.com%2F1dataease%2Fdataease?ref=badge_shield"><img src="https://app.fossa.com/api/projects/git%2Bgithub.com%2Fdataease%2Fdataease.svg?type=shield" alt="FOSSA Status"></a>
|
||||
</p>
|
||||
@ -13,23 +12,21 @@
|
||||
|
||||
DataEase 是开源的数据可视化分析工具，帮助用户快速分析数据并洞察业务趋势，从而实现业务的改进与优化。DataEase 支持丰富的数据源连接，能够通过拖拉拽方式快速制作图表，并可以方便的与他人分享。
|
||||
|
||||
|
||||
|
||||
**DataEase 的功能包括：**
|
||||
|
||||
- 图表展示：支持 PC 端、移动端、大屏;
|
||||
- 图表制作：支持丰富的图表类型(Apache ECharts / AntV)、支持拖拉拽方式快速制作仪表板;
|
||||
- 数据引擎：支持直连模式、本地模式(基于 Apache Doris / Kettle 实现);
|
||||
- 图表展示：支持 PC 端、移动端、大屏及嵌入式使用场景;
|
||||
- 图表制作：支持丰富的图表类型、支持拖拉拽方式快速制作仪表板;
|
||||
- 数据引擎：基于 Apache Calcite，实现统一的 SQL 解析、验证、优化和执行;
|
||||
- 数据连接：支持数据仓库/数据湖、OLAP 数据库、OLTP 数据库、Excel 数据文件、API 等各种数据源。
|
||||
|
||||
## DataEase 的优势
|
||||
**DataEase 的优势：**
|
||||
|
||||
- 开源开放：零门槛，线上快速获取和安装；快速获取用户反馈、按月发布新版本；
|
||||
- 简单易用：极易上手，通过鼠标点击和拖拽即可完成分析；
|
||||
- 秒级响应：集成 Apache Doris，超大数据量下秒级查询返回延时；
|
||||
- 全场景支持：多平台支持、多种嵌入式方案支持；
|
||||
- 安全分享：支持多种数据分享方式，确保数据安全。
|
||||
|
||||
## DataEase 支持的数据源
|
||||
**DataEase 支持的数据源：**
|
||||
|
||||
<p align="center">
|
||||
<img src="https://dataease.io/images/dataSource/excel.jpg" alt="excel" border="0" width="155" height="107"/>
|
||||
@ -37,36 +34,18 @@ DataEase 是开源的数据可视化分析工具，帮助用户快速分析数
|
||||
<img src="https://dataease.io/images/dataSource/oracle.jpg" alt="oracle" border="0" width="155" height="107"/>
|
||||
<img src="https://dataease.io/images/dataSource/sqlservel.jpg" alt="sqlserver" border="0" width="155" height="107"/>
|
||||
<img src="https://dataease.io/images/dataSource/mariadb.jpg" alt="mariadb" border="0" width="155" height="107"/>
|
||||
<img src="https://dataease.io/images/dataSource/elasticsearch.jpg" alt="elasticsearch" border="0" width="155" height="107"/>
|
||||
<img src="https://dataease.io/images/dataSource/clickhouse.jpg" alt="clickhouse" border="0" width="155" height="107"/>
|
||||
<img src="https://dataease.io/images/dataSource/doris.jpg" alt="doris" border="0" width="155" height="107"/>
|
||||
<img src="https://dataease.io/images/dataSource/mongodb.jpg" alt="mongodb" border="0" width="155" height="107"/>
|
||||
<img src="https://dataease.io/images/dataSource/redshift.jpg" alt="redshift" border="0" width="155" height="107"/>
|
||||
<img src="https://dataease.io/images/dataSource/hive.png" alt="hive" border="0" width="155" height="107"/>
|
||||
<img src="https://dataease.io/images/dataSource/DB2.jpg" alt="DB2" border="0" width="155" height="107"/>
|
||||
<img src="https://dataease.io/images/dataSource/API.jpg" alt="API" border="0" width="155" height="107"/>
|
||||
<img src="https://dataease.io/images/dataSource/TiDB.jpg" alt="TiDB" border="0" width="155" height="107"/>
|
||||
<img src="https://dataease.io/images/dataSource/StarRocks.jpg" alt="StarRocks" border="0" width="155" height="107"/>
|
||||
<img src="https://dataease.io/images/dataSource/PrestoDB.jpg" alt="PrestoDB" border="0" width="155" height="107"/>
|
||||
<img src="https://dataease.io/images/dataSource/dm.jpg" alt="dm" border="0" width="155" height="107"/>
|
||||
<img src="https://dataease.io/images/dataSource/kingbase.jpg" alt="KingBase" border="0" width="155" height="107"/>
|
||||
<img src="https://dataease.io/images/dataSource/kylin.jpg" alt="Kylin" border="0" width="180" height="107"/>
|
||||
</p>
|
||||
|
||||
## DataEase 模板市场
|
||||
|
||||
- [模板市场](https://dataease.io/templates/)
|
||||
|
||||
|
||||
|
||||
## 快速开始
|
||||
|
||||
**在线体验**
|
||||
|
||||
- 环境地址：<https://dataease.fit2cloud.com/>
|
||||
- 用户名：demo
|
||||
- 密码：dataease
|
||||
|
||||
**一键安装**
|
||||
|
||||
仅需两步快速安装 DataEase：
|
||||
@ -83,17 +62,13 @@ curl -sSL https://dataease.oss-cn-hangzhou.aliyuncs.com/quick_start.sh | bash
|
||||
- [在线文档](https://dataease.io/docs/)
|
||||
- [社区论坛](https://bbs.fit2cloud.com/c/de/6)
|
||||
|
||||
**加入微信交流群**
|
||||
|
||||
<img src="https://dataease.oss-cn-hangzhou.aliyuncs.com/img/wechat-helper.png" width="156" height="156"/>
|
||||
|
||||
## DataEase 的技术栈
|
||||
|
||||
- 前端：[Vue.js](https://vuejs.org/)、[Element](https://element.eleme.cn/)
|
||||
- 图库：[Apache ECharts](https://github.com/apache/echarts)、[AntV](https://antv.vision/zh)
|
||||
- 图库：[AntV](https://antv.vision/zh)
|
||||
- 后端：[Spring Boot](https://spring.io/projects/spring-boot)
|
||||
- 中间件：[MySQL](https://www.mysql.com/)
|
||||
- 数据处理：[Kettle](https://github.com/pentaho/pentaho-kettle)、[Apache Doris](https://github.com/apache/doris/)
|
||||
- 数据处理：[Apache Calcite](https://github.com/apache/calcite/)
|
||||
- 基础设施：[Docker](https://www.docker.com/)
|
||||
|
||||
## Star History
|
||||
|
||||
@ -951,6 +951,7 @@ export default {
|
||||
field_can_not_empty: '字段不能为空',
|
||||
conditions_can_not_empty: '字段的条件不能为空，若无条件，请直接删除该字段',
|
||||
remark: '备注',
|
||||
remark_show: '显示备注',
|
||||
remark_edit: '编辑备注',
|
||||
remark_bg_color: '背景填充',
|
||||
quota_font_family: '值字体',
|
||||
|
||||
@ -199,7 +199,7 @@ const getQuotaField = id => {
|
||||
}
|
||||
|
||||
const isValidField = field => {
|
||||
return field.id !== 'count' && field.deType !== 0 && field.deType !== 1 && field.deType !== 5
|
||||
return field.id !== '-1' && state.quotaData.findIndex(ele => ele.id === field.id) !== -1
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
@ -282,27 +282,25 @@ onMounted(() => {
|
||||
<el-form-item class="form-item" :class="'form-item-' + themes">
|
||||
<el-select
|
||||
:effect="themes"
|
||||
v-model="state.miscForm.gaugeMinField.id"
|
||||
:placeholder="t('chart.field')"
|
||||
:class="{ 'invalid-field': !validMinField }"
|
||||
v-model="state.miscForm.gaugeMinField.id"
|
||||
@change="changeQuotaField('min', true)"
|
||||
>
|
||||
<el-option
|
||||
class="series-select-option"
|
||||
v-for="item in state.quotaData"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
<span style="float: left">
|
||||
<el-icon>
|
||||
<Icon
|
||||
:className="`field-icon-${fieldType[item.deType]}`"
|
||||
:name="`field_${fieldType[item.deType]}`"
|
||||
></Icon>
|
||||
</el-icon>
|
||||
</span>
|
||||
<span class="field-item">
|
||||
{{ item.name }}
|
||||
</span>
|
||||
<el-icon style="margin-right: 8px">
|
||||
<Icon
|
||||
:className="`field-icon-${fieldType[item.deType]}`"
|
||||
:name="`field_${fieldType[item.deType]}`"
|
||||
/>
|
||||
</el-icon>
|
||||
{{ item.name }}
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@ -311,8 +309,8 @@ onMounted(() => {
|
||||
<el-form-item class="form-item" :class="'form-item-' + themes">
|
||||
<el-select
|
||||
:effect="themes"
|
||||
v-model="state.miscForm.gaugeMinField.summary"
|
||||
:placeholder="t('chart.summary')"
|
||||
v-model="state.miscForm.gaugeMinField.summary"
|
||||
@change="changeQuotaField('min')"
|
||||
>
|
||||
<el-option v-if="validMinField" key="sum" value="sum" :label="t('chart.sum')" />
|
||||
@ -375,27 +373,25 @@ onMounted(() => {
|
||||
<el-form-item class="form-item" :class="'form-item-' + themes">
|
||||
<el-select
|
||||
:effect="themes"
|
||||
v-model="state.miscForm.gaugeMaxField.id"
|
||||
:placeholder="t('chart.field')"
|
||||
:class="{ 'invalid-field': !validMaxField }"
|
||||
v-model="state.miscForm.gaugeMaxField.id"
|
||||
@change="changeQuotaField('max', true)"
|
||||
>
|
||||
<el-option
|
||||
class="series-select-option"
|
||||
v-for="item in state.quotaData"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
<span style="float: left">
|
||||
<el-icon>
|
||||
<Icon
|
||||
:className="`field-icon-${fieldType[item.deType]}`"
|
||||
:name="`field_${fieldType[item.deType]}`"
|
||||
></Icon>
|
||||
</el-icon>
|
||||
</span>
|
||||
<span class="field-item">
|
||||
{{ item.name }}
|
||||
</span>
|
||||
<el-icon style="margin-right: 8px">
|
||||
<Icon
|
||||
:className="`field-icon-${fieldType[item.deType]}`"
|
||||
:name="`field_${fieldType[item.deType]}`"
|
||||
/>
|
||||
</el-icon>
|
||||
{{ item.name }}
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@ -519,8 +515,9 @@ onMounted(() => {
|
||||
<el-form-item class="form-item" :class="'form-item-' + themes">
|
||||
<el-select
|
||||
:effect="themes"
|
||||
v-model="state.miscForm.liquidMaxField.id"
|
||||
:placeholder="t('chart.field')"
|
||||
:class="{ 'invalid-field': !validLiquidMaxField }"
|
||||
v-model="state.miscForm.liquidMaxField.id"
|
||||
@change="changeQuotaField('max', true)"
|
||||
>
|
||||
<el-option
|
||||
@ -847,22 +844,32 @@ onMounted(() => {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
:deep(.dynamic-item) {
|
||||
width: 100px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.field-item {
|
||||
float: left;
|
||||
color: #8492a6;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.margin-bottom-8 {
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.series-select-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
padding: 0 11px;
|
||||
}
|
||||
|
||||
.invalid-field {
|
||||
::v-deep(.ed-input__wrapper) {
|
||||
box-shadow: 0 0 0 1px rgb(245, 74, 69) inset !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script lang="ts" setup>
|
||||
import { PropType, computed, onMounted, reactive, toRefs, watch, nextTick } from 'vue'
|
||||
import { PropType, computed, onMounted, reactive, toRefs, watch, nextTick, ref } from 'vue'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import {
|
||||
COLOR_PANEL,
|
||||
@ -10,6 +10,8 @@ import {
|
||||
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { cloneDeep, defaultsDeep } from 'lodash-es'
|
||||
import { ElButton, ElIcon } from 'element-plus-secondary'
|
||||
import Icon from '@/components/icon-custom/src/Icon.vue'
|
||||
const dvMainStore = dvMainStoreWithOut()
|
||||
const { batchOptStatus } = storeToRefs(dvMainStore)
|
||||
|
||||
@ -55,7 +57,6 @@ const fontSizeList = computed(() => {
|
||||
})
|
||||
|
||||
const changeTitleStyle = prop => {
|
||||
console.log(prop)
|
||||
emit('onTextChange', state.titleForm, prop)
|
||||
}
|
||||
|
||||
@ -73,6 +74,25 @@ const init = () => {
|
||||
})
|
||||
}
|
||||
|
||||
const showEditRemark = ref<boolean>(false)
|
||||
const tempRemark = ref<string>('')
|
||||
|
||||
const openEditRemark = () => {
|
||||
tempRemark.value = cloneDeep(state.titleForm.remark)
|
||||
showEditRemark.value = true
|
||||
}
|
||||
|
||||
const closeEditRemark = () => {
|
||||
showEditRemark.value = false
|
||||
tempRemark.value = ''
|
||||
}
|
||||
|
||||
const saveEditRemark = () => {
|
||||
showEditRemark.value = false
|
||||
state.titleForm.remark = tempRemark.value
|
||||
changeTitleStyle('remark')
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
@ -87,219 +107,268 @@ watch(
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-form
|
||||
ref="titleForm"
|
||||
:disabled="!state.titleForm.show"
|
||||
:model="state.titleForm"
|
||||
label-position="top"
|
||||
>
|
||||
<el-form-item
|
||||
:label="t('chart.title')"
|
||||
class="form-item"
|
||||
:class="'form-item-' + themes"
|
||||
v-if="!batchOptStatus"
|
||||
<div>
|
||||
<el-form
|
||||
ref="titleForm"
|
||||
:disabled="!state.titleForm.show"
|
||||
:model="state.titleForm"
|
||||
label-position="top"
|
||||
>
|
||||
<el-input
|
||||
:effect="themes"
|
||||
v-model="chart.title"
|
||||
size="small"
|
||||
maxlength="100"
|
||||
:placeholder="t('chart.title')"
|
||||
clearable
|
||||
@blur="changeTitleStyle('title')"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item
|
||||
class="form-item"
|
||||
:class="'form-item-' + themes"
|
||||
:effect="themes"
|
||||
:label="t('chart.text')"
|
||||
>
|
||||
<el-select
|
||||
:effect="themes"
|
||||
v-model="state.titleForm.fontFamily"
|
||||
:placeholder="t('chart.font_family')"
|
||||
@change="changeTitleStyle('fontFamily')"
|
||||
<el-form-item
|
||||
:label="t('chart.title')"
|
||||
class="form-item"
|
||||
:class="'form-item-' + themes"
|
||||
v-if="!batchOptStatus"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in fontFamily"
|
||||
:key="option.value"
|
||||
:label="option.name"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<div style="display: flex">
|
||||
<el-form-item class="form-item" :class="'form-item-' + themes" style="padding-right: 4px">
|
||||
<el-color-picker
|
||||
<el-input
|
||||
:effect="themes"
|
||||
v-model="state.titleForm.color"
|
||||
class="color-picker-style"
|
||||
:predefine="predefineColors"
|
||||
@change="changeTitleStyle('color')"
|
||||
is-custom
|
||||
v-model="chart.title"
|
||||
size="small"
|
||||
maxlength="100"
|
||||
:placeholder="t('chart.title')"
|
||||
clearable
|
||||
@blur="changeTitleStyle('title')"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item" :class="'form-item-' + themes" style="padding: 0 4px">
|
||||
<el-tooltip content="字号" :effect="toolTip" placement="top">
|
||||
<el-select
|
||||
style="width: 56px"
|
||||
:effect="themes"
|
||||
v-model="state.titleForm.fontSize"
|
||||
:placeholder="t('chart.text_fontsize')"
|
||||
size="small"
|
||||
@change="changeTitleStyle('fontSize')"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in fontSizeList"
|
||||
:key="option.value"
|
||||
:label="option.name"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item class="form-item" :class="'form-item-' + themes" style="padding-left: 4px">
|
||||
<el-form-item
|
||||
class="form-item"
|
||||
:class="'form-item-' + themes"
|
||||
:effect="themes"
|
||||
:label="t('chart.text')"
|
||||
>
|
||||
<el-select
|
||||
:effect="themes"
|
||||
v-model="state.titleForm.letterSpace"
|
||||
:placeholder="t('chart.quota_letter_space')"
|
||||
@change="changeTitleStyle('letterSpace')"
|
||||
v-model="state.titleForm.fontFamily"
|
||||
:placeholder="t('chart.font_family')"
|
||||
@change="changeTitleStyle('fontFamily')"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<Icon name="icon_letter-spacing_outlined" />
|
||||
</el-icon>
|
||||
</template>
|
||||
<el-option
|
||||
v-for="option in fontLetterSpace"
|
||||
v-for="option in fontFamily"
|
||||
:key="option.value"
|
||||
:label="option.name"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-space>
|
||||
<div style="display: flex">
|
||||
<el-form-item class="form-item" :class="'form-item-' + themes" style="padding-right: 4px">
|
||||
<el-color-picker
|
||||
:effect="themes"
|
||||
v-model="state.titleForm.color"
|
||||
class="color-picker-style"
|
||||
:predefine="predefineColors"
|
||||
@change="changeTitleStyle('color')"
|
||||
is-custom
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item" :class="'form-item-' + themes" style="padding: 0 4px">
|
||||
<el-tooltip content="字号" :effect="toolTip" placement="top">
|
||||
<el-select
|
||||
style="width: 56px"
|
||||
:effect="themes"
|
||||
v-model="state.titleForm.fontSize"
|
||||
:placeholder="t('chart.text_fontsize')"
|
||||
size="small"
|
||||
@change="changeTitleStyle('fontSize')"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in fontSizeList"
|
||||
:key="option.value"
|
||||
:label="option.name"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item class="form-item" :class="'form-item-' + themes" style="padding-left: 4px">
|
||||
<el-select
|
||||
:effect="themes"
|
||||
v-model="state.titleForm.letterSpace"
|
||||
:placeholder="t('chart.quota_letter_space')"
|
||||
@change="changeTitleStyle('letterSpace')"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<Icon name="icon_letter-spacing_outlined" />
|
||||
</el-icon>
|
||||
</template>
|
||||
<el-option
|
||||
v-for="option in fontLetterSpace"
|
||||
:key="option.value"
|
||||
:label="option.name"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-space>
|
||||
<el-form-item class="form-item" :class="'form-item-' + themes">
|
||||
<el-checkbox
|
||||
:effect="themes"
|
||||
class="icon-checkbox"
|
||||
v-model="state.titleForm.isBolder"
|
||||
@change="changeTitleStyle('isBolder')"
|
||||
>
|
||||
<el-tooltip :effect="toolTip" placement="top">
|
||||
<template #content>
|
||||
{{ t('chart.bolder') }}
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{ dark: themes === 'dark', active: state.titleForm.isBolder }"
|
||||
>
|
||||
<el-icon>
|
||||
<Icon name="icon_bold_outlined" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item class="form-item" :class="'form-item-' + themes">
|
||||
<el-checkbox
|
||||
:effect="themes"
|
||||
class="icon-checkbox"
|
||||
v-model="state.titleForm.isItalic"
|
||||
@change="changeTitleStyle('isItalic')"
|
||||
>
|
||||
<el-tooltip :effect="toolTip" placement="top">
|
||||
<template #content>
|
||||
{{ t('chart.italic') }}
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{ dark: themes === 'dark', active: state.titleForm.isItalic }"
|
||||
>
|
||||
<el-icon>
|
||||
<Icon name="icon_italic_outlined" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
|
||||
<div class="position-divider" :class="'position-divider--' + themes"></div>
|
||||
|
||||
<el-form-item class="form-item" :class="'form-item-' + themes">
|
||||
<el-radio-group
|
||||
:effect="themes"
|
||||
class="icon-radio-group"
|
||||
v-model="state.titleForm.hPosition"
|
||||
@change="changeTitleStyle('hPosition')"
|
||||
>
|
||||
<el-radio :effect="themes" label="left">
|
||||
<el-tooltip :effect="toolTip" placement="top">
|
||||
<template #content>
|
||||
{{ t('chart.text_pos_left') }}
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{ dark: themes === 'dark', active: state.titleForm.hPosition === 'left' }"
|
||||
>
|
||||
<el-icon>
|
||||
<Icon name="icon_left-alignment_outlined" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</el-radio>
|
||||
<el-radio :effect="themes" label="center">
|
||||
<el-tooltip :effect="toolTip" placement="top">
|
||||
<template #content>
|
||||
{{ t('chart.text_pos_center') }}
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{
|
||||
dark: themes === 'dark',
|
||||
active: state.titleForm.hPosition === 'center'
|
||||
}"
|
||||
>
|
||||
<el-icon>
|
||||
<Icon name="icon_center-alignment_outlined" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</el-radio>
|
||||
<el-radio :effect="themes" label="right">
|
||||
<el-tooltip :effect="toolTip" placement="top">
|
||||
<template #content>
|
||||
{{ t('chart.text_pos_right') }}
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{
|
||||
dark: themes === 'dark',
|
||||
active: state.titleForm.hPosition === 'right'
|
||||
}"
|
||||
>
|
||||
<el-icon>
|
||||
<Icon name="icon_right-alignment_outlined" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-space>
|
||||
|
||||
<el-form-item class="form-item" :class="'form-item-' + themes">
|
||||
<el-checkbox
|
||||
size="small"
|
||||
:effect="themes"
|
||||
class="icon-checkbox"
|
||||
v-model="state.titleForm.isBolder"
|
||||
@change="changeTitleStyle('isBolder')"
|
||||
v-model="state.titleForm.fontShadow"
|
||||
@change="changeTitleStyle('fontShadow')"
|
||||
>
|
||||
<el-tooltip :effect="toolTip" placement="top">
|
||||
<template #content>
|
||||
{{ t('chart.bolder') }}
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{ dark: themes === 'dark', active: state.titleForm.isBolder }"
|
||||
>
|
||||
<el-icon>
|
||||
<Icon name="icon_bold_outlined" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
{{ t('chart.font_shadow') }}
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item class="form-item" :class="'form-item-' + themes">
|
||||
<el-checkbox
|
||||
size="small"
|
||||
:effect="themes"
|
||||
class="icon-checkbox"
|
||||
v-model="state.titleForm.isItalic"
|
||||
@change="changeTitleStyle('isItalic')"
|
||||
v-model="state.titleForm.remarkShow"
|
||||
@change="changeTitleStyle('remarkShow')"
|
||||
>
|
||||
<el-tooltip :effect="toolTip" placement="top">
|
||||
<template #content>
|
||||
{{ t('chart.italic') }}
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{ dark: themes === 'dark', active: state.titleForm.isItalic }"
|
||||
>
|
||||
<el-icon>
|
||||
<Icon name="icon_italic_outlined" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
{{ t('chart.remark_show') }}
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
|
||||
<div class="position-divider" :class="'position-divider--' + themes"></div>
|
||||
|
||||
<el-form-item class="form-item" :class="'form-item-' + themes">
|
||||
<el-radio-group
|
||||
:effect="themes"
|
||||
class="icon-radio-group"
|
||||
v-model="state.titleForm.hPosition"
|
||||
@change="changeTitleStyle('hPosition')"
|
||||
>
|
||||
<el-radio :effect="themes" label="left">
|
||||
<el-tooltip :effect="toolTip" placement="top">
|
||||
<template #content>
|
||||
{{ t('chart.text_pos_left') }}
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{ dark: themes === 'dark', active: state.titleForm.hPosition === 'left' }"
|
||||
>
|
||||
<el-icon>
|
||||
<Icon name="icon_left-alignment_outlined" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</el-radio>
|
||||
<el-radio :effect="themes" label="center">
|
||||
<el-tooltip :effect="toolTip" placement="top">
|
||||
<template #content>
|
||||
{{ t('chart.text_pos_center') }}
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{ dark: themes === 'dark', active: state.titleForm.hPosition === 'center' }"
|
||||
>
|
||||
<el-icon>
|
||||
<Icon name="icon_center-alignment_outlined" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</el-radio>
|
||||
<el-radio :effect="themes" label="right">
|
||||
<el-tooltip :effect="toolTip" placement="top">
|
||||
<template #content>
|
||||
{{ t('chart.text_pos_right') }}
|
||||
</template>
|
||||
<div
|
||||
class="icon-btn"
|
||||
:class="{ dark: themes === 'dark', active: state.titleForm.hPosition === 'right' }"
|
||||
>
|
||||
<el-icon>
|
||||
<Icon name="icon_right-alignment_outlined" />
|
||||
</el-icon>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
<el-form-item class="form-item" :class="'form-item-' + themes" style="margin-left: 22px">
|
||||
<label class="remark-label" :class="{ 'remark-label--dark': themes === 'dark' }">
|
||||
{{ t('chart.remark_edit') }}
|
||||
</label>
|
||||
<el-button text @click="openEditRemark" :effect="themes">
|
||||
<el-icon size="14px">
|
||||
<Icon name="icon_edit_outlined" />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-space>
|
||||
</el-form>
|
||||
|
||||
<el-form-item class="form-item" :class="'form-item-' + themes">
|
||||
<el-checkbox
|
||||
size="small"
|
||||
:effect="themes"
|
||||
v-model="state.titleForm.fontShadow"
|
||||
@change="changeTitleStyle('fontShadow')"
|
||||
>
|
||||
{{ t('chart.font_shadow') }}
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-dialog
|
||||
:title="t('chart.remark_edit')"
|
||||
:visible="showEditRemark"
|
||||
v-model="showEditRemark"
|
||||
width="420px"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<div @keydown.stop @keyup.stop>
|
||||
<el-form-item :label="t('chart.remark')" class="form-item" prop="chartShowName">
|
||||
<el-input type="textarea" autosize v-model="tempRemark" :maxlength="50" clearable />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="closeEditRemark">{{ t('chart.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="saveEditRemark()">{{ t('chart.confirm') }}</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@ -401,4 +470,16 @@ watch(
|
||||
background: rgba(235, 235, 235, 0.15);
|
||||
}
|
||||
}
|
||||
.remark-label {
|
||||
color: var(--N600, #646a73);
|
||||
font-family: PingFang SC;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
|
||||
&.remark-label--dark {
|
||||
color: var(--N600-Dark, #a6a6a6);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1088,7 +1088,7 @@ const onRefreshChange = val => {
|
||||
<span style="font-size: 14px">{{ view.title }}</span>
|
||||
</el-row>
|
||||
|
||||
<el-row style="height: calc(100vh - 110px)">
|
||||
<el-row style="height: calc(100vh - 110px); overflow-y: auto">
|
||||
<div class="query-style-tab" v-if="view.type === 'VQuery'">
|
||||
<div class="tab-container" style="width: 100%">
|
||||
<el-tabs v-model="tabActiveVQuery">
|
||||
|
||||
@ -101,6 +101,10 @@ const snapshotStore = snapshotStoreWithOut()
|
||||
const state = reactive({
|
||||
initReady: true, //curComponent 切换期间 不接收外部的calcData 和 renderChart 事件
|
||||
title_show: true,
|
||||
title_remark: {
|
||||
show: false,
|
||||
remark: ''
|
||||
},
|
||||
title_class: {
|
||||
fontSize: '18px',
|
||||
color: '#303133',
|
||||
@ -240,6 +244,9 @@ const initTitle = () => {
|
||||
customStyle.background.alpha
|
||||
)
|
||||
}
|
||||
|
||||
state.title_remark.show = customStyle.text.remarkShow
|
||||
state.title_remark.remark = customStyle.text.remark
|
||||
}
|
||||
}
|
||||
|
||||
@ -563,8 +570,16 @@ const toolTip = computed(() => {
|
||||
<div
|
||||
class="icons-container"
|
||||
:class="{ 'is-editing': titleEditStatus }"
|
||||
v-if="trackMenu.length > 0"
|
||||
v-if="trackMenu.length > 0 || state.title_remark.show"
|
||||
>
|
||||
<el-tooltip :effect="toolTip" placement="top" v-if="state.title_remark.show">
|
||||
<template #content>
|
||||
<div style="white-space: pre-wrap" v-html="state.title_remark.remark"></div>
|
||||
</template>
|
||||
<el-icon size="16px" class="inner-icon">
|
||||
<Icon name="icon_info_outlined" />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
<el-tooltip :effect="toolTip" placement="top" content="已设置联动" v-if="hasLinkIcon">
|
||||
<el-icon size="16px" class="inner-icon">
|
||||
<Icon name="icon_link-record_outlined" />
|
||||
|
||||
@ -131,6 +131,7 @@ const initForm = type => {
|
||||
if (type === 'oracle') {
|
||||
form.value.configuration.connectionType = 'sid'
|
||||
}
|
||||
|
||||
form.value.type = type
|
||||
setTimeout(() => {
|
||||
dsForm.value.clearValidate()
|
||||
|
||||
Loading…
Reference in New Issue
Block a user