Skip to content

Y
yqlh-dataEase
Commit 5650020c by cwx
Options

区块地图

parent dcae35ac
正在显示 包含 3991 行增加 和 1344 行删除
src/components/canvas/customComponent/UserView.vue
...@@ -3,9 +3,9 @@ ...@@ -3,9 +3,9 @@
v-loading="loadingFlag" v-loading="loadingFlag"
:class="[ :class="[
{ {
['active']: active, ['active']: active
}, },
'rect-shape', 'rect-shape'
]" ]"
> >
<EditBarView <EditBarView
...@@ -18,11 +18,14 @@ ...@@ -18,11 +18,14 @@
:view-id="element.propValue.viewId" :view-id="element.propValue.viewId"
@showViewDetails="openChartDetailsDialog" @showViewDetails="openChartDetailsDialog"
/> />
<div v-if="requestStatus === 'error'" class="chart-error-class"> <div
v-if="requestStatus === 'error'"
class="chart-error-class"
>
<div class="chart-error-message-class"> <div class="chart-error-message-class">
{{ message }},{{ $t("chart.chart_show_error") }} {{ message }},{{ $t('chart.chart_show_error') }}
<br /> <br>
{{ $t("chart.chart_error_tips") }} {{ $t('chart.chart_error_tips') }}
</div> </div>
</div> </div>
<plugin-com <plugin-com
...@@ -34,7 +37,7 @@ ...@@ -34,7 +37,7 @@
chart, chart,
trackMenu, trackMenu,
searchCount, searchCount,
terminalType: scaleCoefficientType, terminalType: scaleCoefficientType
}" }"
:chart="chart" :chart="chart"
:track-menu="trackMenu" :track-menu="trackMenu"
...@@ -126,7 +129,7 @@ ...@@ -126,7 +129,7 @@
v-else-if="aMapShowFlag" v-else-if="aMapShowFlag"
:ref="element.propValue.id" :ref="element.propValue.id"
class="amap-class" class="amap-class"
map-data="地图1" :chart="chart"
/> />
<div style="position: absolute; left: 8px; bottom: 8px"> <div style="position: absolute; left: 8px; bottom: 8px">
<drill-path <drill-path
...@@ -153,31 +156,34 @@ ...@@ -153,31 +156,34 @@
<el-button <el-button
v-if=" v-if="
showChartInfoType === 'enlarge' && showChartInfoType === 'enlarge' &&
hasDataPermission('export', panelInfo.privileges) && hasDataPermission('export', panelInfo.privileges) &&
showChartInfo && showChartInfo &&
!equalsAny(showChartInfo.type, 'symbol-map', 'flow-map') !equalsAny(showChartInfo.type, 'symbol-map', 'flow-map')
" "
class="el-icon-picture-outline" class="el-icon-picture-outline"
size="mini" size="mini"
:disabled="imageDownloading" :disabled="imageDownloading"
@click="exportViewImg" @click="exportViewImg"
> >
{{ $t("chart.export_img") }} {{ $t('chart.export_img') }}
</el-button> </el-button>
<el-button <el-button
v-if=" v-if="
showChartInfoType === 'details' && showChartInfoType === 'details' &&
hasDataPermission('export', panelInfo.privileges) hasDataPermission('export', panelInfo.privileges)
" "
size="mini" size="mini"
:disabled=" :disabled="
$store.getters.loadingMap[$store.getters.currentPath] || $store.getters.loadingMap[$store.getters.currentPath] ||
dialogLoading dialogLoading
" "
@click="exportExcel" @click="exportExcel"
> >
<svg-icon icon-class="ds-excel" class="ds-icon-excel" />{{ <svg-icon
$t("chart.export") icon-class="ds-excel"
class="ds-icon-excel"
/>{{
$t('chart.export')
}}Excel }}Excel
</el-button> </el-button>
</span> </span>
...@@ -210,43 +216,43 @@ ...@@ -210,43 +216,43 @@
</template> </template>
<script> <script>
import { viewData } from "@/api/panel/panel"; import { viewData } from '@/api/panel/panel'
import { viewInfo } from "@/api/link"; import { viewInfo } from '@/api/link'
import ChartComponent from "@/views/chart/components/ChartComponent.vue"; import ChartComponent from '@/views/chart/components/ChartComponent.vue'
import TableNormal from "@/views/chart/components/table/TableNormal"; import TableNormal from '@/views/chart/components/table/TableNormal'
import LabelNormal from "../../../views/chart/components/normal/LabelNormal"; import LabelNormal from '../../../views/chart/components/normal/LabelNormal'
import { uuid } from "vue-uuid"; import { uuid } from 'vue-uuid'
import bus from "@/utils/bus"; import bus from '@/utils/bus'
import { mapState } from "vuex"; import { mapState } from 'vuex'
import { isChange } from "@/utils/conditionUtil"; import { isChange } from '@/utils/conditionUtil'
import { BASE_CHART_STRING } from "@/views/chart/chart/chart"; import { BASE_CHART_STRING } from '@/views/chart/chart/chart'
import { deepCopy } from "@/components/canvas/utils/utils"; import { deepCopy } from '@/components/canvas/utils/utils'
import { getLinkToken, getToken } from "@/utils/auth"; import { getLinkToken, getToken } from '@/utils/auth'
import DrillPath from "@/views/chart/view/DrillPath"; import DrillPath from '@/views/chart/view/DrillPath'
import { areaMapping } from "@/api/map/map"; import { areaMapping } from '@/api/map/map'
import ChartComponentG2 from "@/views/chart/components/ChartComponentG2"; import ChartComponentG2 from '@/views/chart/components/ChartComponentG2'
import AMap from "@/views/chart/components/AMap"; import AMap from '@/views/chart/components/AMap'
import EditBarView from "@/components/canvas/components/editor/EditBarView"; import EditBarView from '@/components/canvas/components/editor/EditBarView'
import { import {
adaptCurTheme, adaptCurTheme,
customAttrTrans, customAttrTrans,
customStyleTrans, customStyleTrans,
recursionTransObj, recursionTransObj
} from "@/components/canvas/utils/style"; } from '@/components/canvas/utils/style'
import ChartComponentS2 from "@/views/chart/components/ChartComponentS2"; import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
import PluginCom from "@/views/system/plugin/PluginCom"; import PluginCom from '@/views/system/plugin/PluginCom'
import LabelNormalText from "@/views/chart/components/normal/LabelNormalText"; import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
import { viewEditSave, viewPropsSave } from "@/api/chart/chart"; import { viewEditSave, viewPropsSave } from '@/api/chart/chart'
import { checkAddHttp } from "@/utils/urlUtils"; import { checkAddHttp } from '@/utils/urlUtils'
import DeRichTextView from "@/components/canvas/customComponent/DeRichTextView"; import DeRichTextView from '@/components/canvas/customComponent/DeRichTextView'
import Vue from "vue"; import Vue from 'vue'
import { formatterItem, valueFormatter } from "@/views/chart/chart/formatter"; import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
import UserViewDialog from "@/components/canvas/customComponent/UserViewDialog"; import UserViewDialog from '@/components/canvas/customComponent/UserViewDialog'
import UserViewMobileDialog from "@/components/canvas/customComponent/UserViewMobileDialog"; import UserViewMobileDialog from '@/components/canvas/customComponent/UserViewMobileDialog'
import { equalsAny } from "@/utils/StringUtils"; import { equalsAny } from '@/utils/StringUtils'
export default { export default {
name: "UserView", name: 'UserView',
components: { components: {
UserViewMobileDialog, UserViewMobileDialog,
UserViewDialog, UserViewDialog,
...@@ -260,78 +266,78 @@ export default { ...@@ -260,78 +266,78 @@ export default {
LabelNormal, LabelNormal,
DrillPath, DrillPath,
ChartComponentG2, ChartComponentG2,
AMap, AMap
}, },
props: { props: {
inScreen: { inScreen: {
type: Boolean, type: Boolean,
required: false, required: false,
default: true, default: true
}, },
canvasId: { canvasId: {
type: String, type: String,
required: true, required: true
}, },
element: { element: {
type: Object, type: Object,
default: null, default: null
}, },
outStyle: { outStyle: {
type: Object, type: Object,
required: false, required: false,
default: function () { default: function() {
return {}; return {}
}, }
}, },
searchCount: { searchCount: {
type: Number, type: Number,
required: false, required: false,
default: 0, default: 0
}, },
active: { active: {
type: Boolean, type: Boolean,
required: false, required: false,
default: false, default: false
}, },
componentIndex: { componentIndex: {
type: Number, type: Number,
required: false, required: false
}, },
inTab: { inTab: {
type: Boolean, type: Boolean,
required: false, required: false,
default: false, default: false
}, },
isEdit: { isEdit: {
type: Boolean, type: Boolean,
require: false, require: false,
default: true, default: true
}, },
terminal: { terminal: {
type: String, type: String,
default: "pc", default: 'pc'
}, },
filters: { filters: {
type: Array, type: Array,
default: () => [], default: () => []
}, },
canvasStyleData: { canvasStyleData: {
type: Object, type: Object,
required: false, required: false,
default: function () { default: function() {
return {}; return {}
}, }
}, },
showPosition: { showPosition: {
type: String, type: String,
required: false, required: false,
default: "NotProvided", default: 'NotProvided'
}, },
editMode: { editMode: {
type: String, type: String,
require: false, require: false,
default: "preview", default: 'preview'
}, }
}, },
data() { data() {
return { return {
...@@ -342,7 +348,7 @@ export default { ...@@ -342,7 +348,7 @@ export default {
chartDetailsVisible: false, chartDetailsVisible: false,
showChartInfo: {}, showChartInfo: {},
showChartTableInfo: {}, showChartTableInfo: {},
showChartInfoType: "details", showChartInfoType: 'details',
dataRowNameSelect: {}, dataRowNameSelect: {},
dataRowSelect: {}, dataRowSelect: {},
curFields: [], curFields: [],
...@@ -350,7 +356,7 @@ export default { ...@@ -350,7 +356,7 @@ export default {
refId: null, refId: null,
getDataLoading: false, getDataLoading: false,
chart: BASE_CHART_STRING, chart: BASE_CHART_STRING,
requestStatus: "success", requestStatus: 'success',
message: null, message: null,
drillClickDimensionList: [], drillClickDimensionList: [],
drillFilters: [], drillFilters: [],
...@@ -358,7 +364,7 @@ export default { ...@@ -358,7 +364,7 @@ export default {
places: [], places: [],
httpRequest: { httpRequest: {
status: true, status: true,
msg: "", msg: ''
}, },
timeMachine: null, timeMachine: null,
scaleTimeMachine: null, scaleTimeMachine: null,
...@@ -377,11 +383,11 @@ export default { ...@@ -377,11 +383,11 @@ export default {
currentPage: { currentPage: {
page: 1, page: 1,
pageSize: 20, pageSize: 20,
show: 0, show: 0
}, },
view: {}, view: {},
cancelTime: null, cancelTime: null
}; }
}, },
computed: { computed: {
...@@ -390,20 +396,20 @@ export default { ...@@ -390,20 +396,20 @@ export default {
return ( return (
!(this.isEdit && this.currentCanvasNewId.includes(this.element.id)) && !(this.isEdit && this.currentCanvasNewId.includes(this.element.id)) &&
this.isFirstLoad this.isFirstLoad
); )
}, },
scaleCoefficient() { scaleCoefficient() {
if (this.terminal === "pc" && !this.mobileLayoutStatus) { if (this.terminal === 'pc' && !this.mobileLayoutStatus) {
return 1.1; return 1.1
} else { } else {
return 4.5; return 4.5
} }
}, },
scaleCoefficientType() { scaleCoefficientType() {
if (this.terminal === "pc" && !this.mobileLayoutStatus) { if (this.terminal === 'pc' && !this.mobileLayoutStatus) {
return "pc"; return 'pc'
} else { } else {
return "mobile"; return 'mobile'
} }
}, },
editBarViewShowFlag() { editBarViewShowFlag() {
...@@ -411,291 +417,288 @@ export default { ...@@ -411,291 +417,288 @@ export default {
(this.active && (this.active &&
this.inTab && this.inTab &&
!this.mobileLayoutStatus && !this.mobileLayoutStatus &&
!this.showPosition.includes("multiplexing")) || !this.showPosition.includes('multiplexing')) ||
this.showPosition.includes("email-task") this.showPosition.includes('email-task')
); )
}, },
richTextViewShowFlag() { richTextViewShowFlag() {
return ( return (
this.httpRequest.status && this.httpRequest.status &&
this.chart.type && this.chart.type &&
this.chart.type === "richTextView" this.chart.type === 'richTextView'
); )
}, },
charViewShowFlag() { charViewShowFlag() {
return ( return (
this.httpRequest.status && this.httpRequest.status &&
this.chart.type && this.chart.type &&
!this.chart.type.includes("table") && !this.chart.type.includes('table') &&
!this.chart.type.includes("text") && !this.chart.type.includes('text') &&
this.chart.type !== "label" && this.chart.type !== 'label' &&
this.renderComponent() === "echarts" this.renderComponent() === 'echarts'
); )
}, },
charViewG2ShowFlag() { charViewG2ShowFlag() {
console.log("g2", this);
return ( return (
this.httpRequest.status && this.httpRequest.status &&
this.chart.type && this.chart.type &&
!this.chart.type.includes("table") && !this.chart.type.includes('table') &&
!this.chart.type.includes("text") && !this.chart.type.includes('text') &&
this.chart.type !== "label" && this.chart.type !== 'label' &&
this.renderComponent() === "antv" this.renderComponent() === 'antv'
); )
}, },
aMapShowFlag() { aMapShowFlag() {
console.log("map", this); return this.chart.type === 'amap' && this.renderComponent() === 'aMap'
return this.chart.type === "map";
}, },
charViewS2ShowFlag() { charViewS2ShowFlag() {
return ( return (
this.httpRequest.status && this.httpRequest.status &&
this.chart.type && this.chart.type &&
this.chart.type.includes("table") && this.chart.type.includes('table') &&
!this.chart.type.includes("text") && !this.chart.type.includes('text') &&
this.chart.type !== "label" && this.chart.type !== 'label' &&
this.renderComponent() === "antv" this.renderComponent() === 'antv'
); )
}, },
tableShowFlag() { tableShowFlag() {
return ( return (
this.httpRequest.status && this.httpRequest.status &&
this.chart.type && this.chart.type &&
this.chart.type.includes("table") && this.chart.type.includes('table') &&
this.renderComponent() === "echarts" this.renderComponent() === 'echarts'
); )
}, },
labelShowFlag() { labelShowFlag() {
return ( return (
this.httpRequest.status && this.httpRequest.status &&
this.chart.type && this.chart.type &&
this.chart.type.includes("text") this.chart.type.includes('text')
); )
}, },
labelTextShowFlag() { labelTextShowFlag() {
return ( return (
this.httpRequest.status && this.httpRequest.status &&
this.chart.type && this.chart.type &&
this.chart.type === "label" this.chart.type === 'label'
); )
}, },
loadingFlag() { loadingFlag() {
return ( return (
(this.canvasStyleData.refreshViewLoading || (this.canvasStyleData.refreshViewLoading ||
(!this.innerRefreshTimer && this.searchCount === 0)) && (!this.innerRefreshTimer && this.searchCount === 0)) &&
this.requestStatus === "waiting" this.requestStatus === 'waiting'
); )
}, },
panelInfo() { panelInfo() {
return this.$store.state.panel.panelInfo; return this.$store.state.panel.panelInfo
}, },
filter() { filter() {
const filter = {}; const filter = {}
filter.filter = this.initLoad ? this.filters : this.cfilters; filter.filter = this.initLoad ? this.filters : this.cfilters
filter.linkageFilters = this.element.linkageFilters; filter.linkageFilters = this.element.linkageFilters
filter.outerParamsFilters = this.element.outerParamsFilters; filter.outerParamsFilters = this.element.outerParamsFilters
filter.drill = this.drillClickDimensionList; filter.drill = this.drillClickDimensionList
filter.resultCount = this.resultCount; filter.resultCount = this.resultCount
filter.resultMode = this.resultMode; filter.resultMode = this.resultMode
filter.queryFrom = "panel"; filter.queryFrom = 'panel'
return filter; return filter
}, },
cfilters() { cfilters() {
// 必要 勿删勿该 watch数组，哪怕发生变化 oldValue等于newValue ，深拷贝解决 // 必要 勿删勿该 watch数组，哪怕发生变化 oldValue等于newValue ，深拷贝解决
if (!this.element.filters) return []; if (!this.element.filters) return []
return JSON.parse(JSON.stringify(this.element.filters)); return JSON.parse(JSON.stringify(this.element.filters))
}, },
linkageFilters() { linkageFilters() {
// 必要 勿删勿该 watch数组，哪怕发生变化 oldValue等于newValue ，深拷贝解决 // 必要 勿删勿该 watch数组，哪怕发生变化 oldValue等于newValue ，深拷贝解决
if (!this.element.linkageFilters) return []; if (!this.element.linkageFilters) return []
return JSON.parse(JSON.stringify(this.element.linkageFilters)); return JSON.parse(JSON.stringify(this.element.linkageFilters))
}, },
trackMenu() { trackMenu() {
const trackMenuInfo = []; const trackMenuInfo = []
let linkageCount = 0; let linkageCount = 0
let jumpCount = 0; let jumpCount = 0
if (this.drillFilters.length && !this.chart.type.includes("table")) { if (this.drillFilters.length && !this.chart.type.includes('table')) {
const checkItem = this.drillFields[this.drillFilters.length]; const checkItem = this.drillFields[this.drillFilters.length]
const sourceInfo = this.chart.id + "#" + checkItem.id; const sourceInfo = this.chart.id + '#' + checkItem.id
if (this.nowPanelTrackInfo[sourceInfo]) { if (this.nowPanelTrackInfo[sourceInfo]) {
linkageCount++; linkageCount++
} }
if (this.nowPanelJumpInfo[sourceInfo]) { if (this.nowPanelJumpInfo[sourceInfo]) {
jumpCount++; jumpCount++
} }
} else { } else {
this.chart.data && this.chart.data &&
this.chart.data.fields && this.chart.data.fields &&
this.chart.data.fields.forEach((item) => { this.chart.data.fields.forEach((item) => {
const sourceInfo = this.chart.id + "#" + item.id; const sourceInfo = this.chart.id + '#' + item.id
if (this.nowPanelTrackInfo[sourceInfo]) { if (this.nowPanelTrackInfo[sourceInfo]) {
linkageCount++; linkageCount++
} }
}); })
this.chart.data && this.chart.data &&
this.chart.data.fields && this.chart.data.fields &&
this.chart.data.fields.forEach((item) => { this.chart.data.fields.forEach((item) => {
const sourceInfo = this.chart.id + "#" + item.id; const sourceInfo = this.chart.id + '#' + item.id
if (this.nowPanelJumpInfo[sourceInfo]) { if (this.nowPanelJumpInfo[sourceInfo]) {
jumpCount++; jumpCount++
} }
}); })
} }
jumpCount && trackMenuInfo.push("jump"); jumpCount && trackMenuInfo.push('jump')
linkageCount && trackMenuInfo.push("linkage"); linkageCount && trackMenuInfo.push('linkage')
this.drillFields.length && trackMenuInfo.push("drill"); this.drillFields.length && trackMenuInfo.push('drill')
return trackMenuInfo; return trackMenuInfo
}, },
chartType() { chartType() {
return this.chart.type; return this.chart.type
}, },
hw() { hw() {
return this.outStyle.width * this.outStyle.height; return this.outStyle.width * this.outStyle.height
}, },
resultMode() { resultMode() {
return ( return (
(this.canvasStyleData.panel && this.canvasStyleData.panel.resultMode) || (this.canvasStyleData.panel && this.canvasStyleData.panel.resultMode) ||
null null
); )
}, },
resultCount() { resultCount() {
return ( return (
(this.canvasStyleData.panel && (this.canvasStyleData.panel &&
this.canvasStyleData.panel.resultCount) || this.canvasStyleData.panel.resultCount) ||
null null
); )
}, },
gap() { gap() {
return ( return (
(this.canvasStyleData.panel && this.canvasStyleData.panel.gap) || null (this.canvasStyleData.panel && this.canvasStyleData.panel.gap) || null
); )
}, },
innerPadding() { innerPadding() {
return ( return (
(this.element.commonBackground && (this.element.commonBackground &&
this.element.commonBackground.innerPadding) || this.element.commonBackground.innerPadding) ||
0 0
); )
}, },
...mapState([ ...mapState([
"currentCanvasNewId", 'currentCanvasNewId',
"nowPanelTrackInfo", 'nowPanelTrackInfo',
"nowPanelJumpInfo", 'nowPanelJumpInfo',
"publicLinkStatus", 'publicLinkStatus',
"previewCanvasScale", 'previewCanvasScale',
"mobileLayoutStatus", 'mobileLayoutStatus',
"panelViewDetailsInfo", 'panelViewDetailsInfo',
"componentViewsData", 'componentViewsData',
"curBatchOptComponents", 'curBatchOptComponents'
]), ])
}, },
watch: { watch: {
innerPadding: { innerPadding: {
handler: function (val1, val2) { handler: function(val1, val2) {
if (val1 !== val2) { if (val1 !== val2) {
this.resizeChart(); this.resizeChart()
} }
}, },
deep: true, deep: true
}, },
cfilters: { cfilters: {
handler: function (val1, val2) { handler: function(val1, val2) {
if (isChange(val1, val2) && !this.isFirstLoad) { if (isChange(val1, val2) && !this.isFirstLoad) {
this.getData(this.element.propValue.viewId); this.getData(this.element.propValue.viewId)
this.getDataLoading = true; this.getDataLoading = true
} }
}, },
deep: true, deep: true
}, },
linkageFilters: { linkageFilters: {
handler(newVal, oldVal) { handler(newVal, oldVal) {
if (isChange(newVal, oldVal)) { if (isChange(newVal, oldVal)) {
this.getData(this.element.propValue.viewId); this.getData(this.element.propValue.viewId)
} }
}, },
deep: true, deep: true
}, },
resultCount: function () { resultCount: function() {
this.getData(this.element.propValue.viewId, false); this.getData(this.element.propValue.viewId, false)
}, },
resultMode: function () { resultMode: function() {
this.getData(this.element.propValue.viewId, false); this.getData(this.element.propValue.viewId, false)
}, },
gap: function () { gap: function() {
this.resizeChart(); this.resizeChart()
}, },
// 监听外部的样式变化 （非实时性要求） // 监听外部的样式变化 （非实时性要求）
hw: { hw: {
handler(newVal, oldVla) { handler(newVal, oldVla) {
if (newVal !== oldVla && this.$refs[this.element.propValue.id]) { if (newVal !== oldVla && this.$refs[this.element.propValue.id]) {
this.resizeChart(); this.resizeChart()
} }
}, },
deep: true, deep: true
}, },
// 监听外部的样式变化 （非实时性要求） // 监听外部的样式变化 （非实时性要求）
outStyle: { outStyle: {
handler(newVal, oldVla) {}, handler(newVal, oldVla) {},
deep: true, deep: true
}, },
// 监听外部计时器变化 // 监听外部计时器变化
searchCount: function (val1) { searchCount: function(val1) {
// 内部计时器启动 忽略外部计时器 // 内部计时器启动 忽略外部计时器
if ( if (
val1 > 0 && val1 > 0 &&
this.requestStatus !== "waiting" && this.requestStatus !== 'waiting' &&
!this.innerRefreshTimer !this.innerRefreshTimer
) { ) {
this.getData(this.element.propValue.viewId); this.getData(this.element.propValue.viewId)
} }
}, },
chartType: function (newVal, oldVal) { chartType: function(newVal, oldVal) {
if ((newVal === "map" || newVal === "buddle-map") && newVal !== oldVal) { if ((newVal === 'map' || newVal === 'buddle-map') && newVal !== oldVal) {
this.initAreas(); this.initAreas()
} }
}, },
// 监控缩放比例 // 监控缩放比例
previewCanvasScale: { previewCanvasScale: {
handler(newVal, oldVal) { handler(newVal, oldVal) {
this.destroyScaleTimeMachine(); this.destroyScaleTimeMachine()
this.changeScaleIndex++; this.changeScaleIndex++
this.chartScale(this.changeScaleIndex); this.chartScale(this.changeScaleIndex)
}, },
deep: true, deep: true
},
"chart.yaxis": function (newVal, oldVal) {
this.$emit("fill-chart-2-parent", this.chart);
}, },
'chart.yaxis': function(newVal, oldVal) {
this.$emit('fill-chart-2-parent', this.chart)
}
}, },
mounted() { mounted() {
bus.$on("tab-canvas-change", this.tabSwitch); bus.$on('tab-canvas-change', this.tabSwitch)
this.bindPluginEvent(); this.bindPluginEvent()
}, },
beforeDestroy() { beforeDestroy() {
console.log(777777);
for (const key in this.chart) { for (const key in this.chart) {
this.$delete(this.chart, key); this.$delete(this.chart, key)
} }
for (const key in this.view) { for (const key in this.view) {
this.$delete(this.view, key); this.$delete(this.view, key)
} }
this.innerRefreshTimer && clearInterval(this.innerRefreshTimer); this.innerRefreshTimer && clearInterval(this.innerRefreshTimer)
bus.$off("plugin-chart-click", this.pluginChartClick); bus.$off('plugin-chart-click', this.pluginChartClick)
bus.$off("plugin-jump-click", this.pluginJumpClick); bus.$off('plugin-jump-click', this.pluginJumpClick)
bus.$off("plugin-add-view-track-filter", this.pluginAddViewTrackFilter); bus.$off('plugin-add-view-track-filter', this.pluginAddViewTrackFilter)
bus.$off("view-in-cache", this.viewInCache); bus.$off('view-in-cache', this.viewInCache)
bus.$off("batch-opt-change", this.batchOptChange); bus.$off('batch-opt-change', this.batchOptChange)
bus.$off("onSubjectChange", this.optFromBatchThemeChange); bus.$off('onSubjectChange', this.optFromBatchThemeChange)
bus.$off("onThemeColorChange", this.optFromBatchThemeChange); bus.$off('onThemeColorChange', this.optFromBatchThemeChange)
bus.$off("onThemeAttrChange", this.optFromBatchSingleProp); bus.$off('onThemeAttrChange', this.optFromBatchSingleProp)
bus.$off("clear_panel_linkage", this.clearPanelLinkage); bus.$off('clear_panel_linkage', this.clearPanelLinkage)
bus.$off("tab-canvas-change", this.tabSwitch); bus.$off('tab-canvas-change', this.tabSwitch)
}, },
created() { created() {
this.refId = uuid.v1; this.refId = uuid.v1
if ( if (
this.element && this.element &&
this.element.propValue && this.element.propValue &&
...@@ -703,7 +706,7 @@ export default { ...@@ -703,7 +706,7 @@ export default {
) { ) {
// 如果watch.filters 已经进行数据初始化时候，此处放弃数据初始化 // 如果watch.filters 已经进行数据初始化时候，此处放弃数据初始化
this.getData(this.element.propValue.viewId, false); this.getData(this.element.propValue.viewId, false)
} }
}, },
methods: { methods: {
...@@ -714,184 +717,184 @@ export default { ...@@ -714,184 +717,184 @@ export default {
tabCanvasId === this.canvasId && tabCanvasId === this.canvasId &&
this.$refs[this.element.propValue.id] this.$refs[this.element.propValue.id]
) { ) {
this.$refs[this.element.propValue.id].chartResize(); this.$refs[this.element.propValue.id].chartResize()
} }
}, },
// 编辑状态下 不启动刷新 // 编辑状态下 不启动刷新
buildInnerRefreshTimer( buildInnerRefreshTimer(
refreshViewEnable = false, refreshViewEnable = false,
refreshUnit = "minute", refreshUnit = 'minute',
refreshTime = 5 refreshTime = 5
) { ) {
if ( if (
this.editMode === "preview" && this.editMode === 'preview' &&
!this.innerRefreshTimer && !this.innerRefreshTimer &&
refreshViewEnable refreshViewEnable
) { ) {
this.innerRefreshTimer && clearInterval(this.innerRefreshTimer); this.innerRefreshTimer && clearInterval(this.innerRefreshTimer)
const timerRefreshTime = const timerRefreshTime =
refreshUnit === "second" ? refreshTime * 1000 : refreshTime * 60000; refreshUnit === 'second' ? refreshTime * 1000 : refreshTime * 60000
this.innerRefreshTimer = setInterval(() => { this.innerRefreshTimer = setInterval(() => {
this.clearViewLinkage(); this.clearViewLinkage()
this.getData(this.element.propValue.viewId); this.getData(this.element.propValue.viewId)
}, timerRefreshTime); }, timerRefreshTime)
} }
}, },
clearViewLinkage() { clearViewLinkage() {
this.$store.commit("clearViewLinkage", this.element.propValue.viewId); this.$store.commit('clearViewLinkage', this.element.propValue.viewId)
}, },
responseResetButton() { responseResetButton() {
if (!this.cfilters?.length) { if (!this.cfilters?.length) {
this.getData(this.element.propValue.viewId, false); this.getData(this.element.propValue.viewId, false)
} }
}, },
exportExcel() { exportExcel() {
this.dialogLoading = true; this.dialogLoading = true
this.$refs["userViewDialog"].exportExcel(() => { this.$refs['userViewDialog'].exportExcel(() => {
this.dialogLoading = false; this.dialogLoading = false
}); })
}, },
exportViewImg() { exportViewImg() {
this.imageDownloading = true; this.imageDownloading = true
this.$refs["userViewDialog"].exportViewImg(() => { this.$refs['userViewDialog'].exportViewImg(() => {
this.imageDownloading = false; this.imageDownloading = false
}); })
}, },
pluginEditHandler(e) { pluginEditHandler(e) {
this.$emit("trigger-plugin-edit", { e, id: this.element.id }); this.$emit('trigger-plugin-edit', { e, id: this.element.id })
}, },
batchOptChange(param) { batchOptChange(param) {
if (this.curBatchOptComponents.includes(this.element.propValue.viewId)) { if (this.curBatchOptComponents.includes(this.element.propValue.viewId)) {
this.optFromBatchSingleProp(param); this.optFromBatchSingleProp(param)
} }
}, },
optFromBatchSingleProp(param) { optFromBatchSingleProp(param) {
this.$store.commit("canvasChange"); this.$store.commit('canvasChange')
const updateParams = { id: this.chart.id }; const updateParams = { id: this.chart.id }
if (param.custom === "customAttr") { if (param.custom === 'customAttr') {
const sourceCustomAttr = JSON.parse(this.sourceCustomAttrStr); const sourceCustomAttr = JSON.parse(this.sourceCustomAttrStr)
if (!sourceCustomAttr[param.property]) { if (!sourceCustomAttr[param.property]) {
this.$set(sourceCustomAttr, param.property, {}); this.$set(sourceCustomAttr, param.property, {})
} }
sourceCustomAttr[param.property][param.value.modifyName] = sourceCustomAttr[param.property][param.value.modifyName] =
param.value[param.value.modifyName]; param.value[param.value.modifyName]
this.sourceCustomAttrStr = JSON.stringify(sourceCustomAttr); this.sourceCustomAttrStr = JSON.stringify(sourceCustomAttr)
this.chart.customAttr = this.sourceCustomAttrStr; this.chart.customAttr = this.sourceCustomAttrStr
this.$store.commit("updateComponentViewsData", { this.$store.commit('updateComponentViewsData', {
viewId: this.chart.id, viewId: this.chart.id,
propertyKey: "customAttr", propertyKey: 'customAttr',
propertyValue: this.sourceCustomAttrStr, propertyValue: this.sourceCustomAttrStr
}); })
updateParams["customAttr"] = this.sourceCustomAttrStr; updateParams['customAttr'] = this.sourceCustomAttrStr
} else if (param.custom === "customStyle") { } else if (param.custom === 'customStyle') {
const sourceCustomStyle = JSON.parse(this.sourceCustomStyleStr); const sourceCustomStyle = JSON.parse(this.sourceCustomStyleStr)
if (param.property === "margin") { if (param.property === 'margin') {
sourceCustomStyle[param.property] = param.value; sourceCustomStyle[param.property] = param.value
} }
sourceCustomStyle[param.property][param.value.modifyName] = sourceCustomStyle[param.property][param.value.modifyName] =
param.value[param.value.modifyName]; param.value[param.value.modifyName]
this.sourceCustomStyleStr = JSON.stringify(sourceCustomStyle); this.sourceCustomStyleStr = JSON.stringify(sourceCustomStyle)
this.chart.customStyle = this.sourceCustomStyleStr; this.chart.customStyle = this.sourceCustomStyleStr
this.$store.commit("updateComponentViewsData", { this.$store.commit('updateComponentViewsData', {
viewId: this.chart.id, viewId: this.chart.id,
propertyKey: "customStyle", propertyKey: 'customStyle',
propertyValue: this.sourceCustomStyleStr, propertyValue: this.sourceCustomStyleStr
}); })
updateParams["customStyle"] = this.sourceCustomStyleStr; updateParams['customStyle'] = this.sourceCustomStyleStr
} }
viewPropsSave(this.panelInfo.id, updateParams).then((rsp) => { viewPropsSave(this.panelInfo.id, updateParams).then((rsp) => {
this.active && bus.$emit("current-component-change"); this.active && bus.$emit('current-component-change')
}); })
this.$store.commit("recordViewEdit", { this.$store.commit('recordViewEdit', {
viewId: this.chart.id, viewId: this.chart.id,
hasEdit: true, hasEdit: true
}); })
this.mergeScale(); this.mergeScale()
}, },
optFromBatchThemeChange() { optFromBatchThemeChange() {
const updateParams = { id: this.chart.id }; const updateParams = { id: this.chart.id }
const sourceCustomAttr = JSON.parse(this.sourceCustomAttrStr); const sourceCustomAttr = JSON.parse(this.sourceCustomAttrStr)
const sourceCustomStyle = JSON.parse(this.sourceCustomStyleStr); const sourceCustomStyle = JSON.parse(this.sourceCustomStyleStr)
adaptCurTheme(sourceCustomStyle, sourceCustomAttr, this.chart.type); adaptCurTheme(sourceCustomStyle, sourceCustomAttr, this.chart.type)
this.sourceCustomAttrStr = JSON.stringify(sourceCustomAttr); this.sourceCustomAttrStr = JSON.stringify(sourceCustomAttr)
this.chart.customAttr = this.sourceCustomAttrStr; this.chart.customAttr = this.sourceCustomAttrStr
updateParams["customAttr"] = this.sourceCustomAttrStr; updateParams['customAttr'] = this.sourceCustomAttrStr
this.sourceCustomStyleStr = JSON.stringify(sourceCustomStyle); this.sourceCustomStyleStr = JSON.stringify(sourceCustomStyle)
this.chart.customStyle = this.sourceCustomStyleStr; this.chart.customStyle = this.sourceCustomStyleStr
updateParams["customStyle"] = this.sourceCustomStyleStr; updateParams['customStyle'] = this.sourceCustomStyleStr
viewPropsSave(this.panelInfo.id, updateParams).then((rsp) => { viewPropsSave(this.panelInfo.id, updateParams).then((rsp) => {
this.active && bus.$emit("current-component-change"); this.active && bus.$emit('current-component-change')
}); })
this.$store.commit("recordViewEdit", { this.$store.commit('recordViewEdit', {
viewId: this.chart.id, viewId: this.chart.id,
hasEdit: true, hasEdit: true
}); })
this.mergeScale(); this.mergeScale()
}, },
resizeChart() { resizeChart() {
if (this.chart.type === "map") { if (this.chart.type === 'map') {
this.destroyTimeMachine(); this.destroyTimeMachine()
this.changeIndex++; this.changeIndex++
this.chartResize(this.changeIndex); this.chartResize(this.changeIndex)
} else if (this.$refs[this.element.propValue.id]) { } else if (this.$refs[this.element.propValue.id]) {
this.chart.isPlugin this.chart.isPlugin
? this.$refs[this.element.propValue.id].callPluginInner({ ? this.$refs[this.element.propValue.id].callPluginInner({
methodName: "chartResize", methodName: 'chartResize'
}) })
: this.$refs[this.element.propValue.id].chartResize(); : this.$refs[this.element.propValue.id].chartResize()
} }
}, },
pluginChartClick(param) { pluginChartClick(param) {
param.viewId && param.viewId &&
param.viewId === this.element.propValue.viewId && param.viewId === this.element.propValue.viewId &&
this.chartClick(param); this.chartClick(param)
}, },
pluginJumpClick(param) { pluginJumpClick(param) {
param.viewId && param.viewId &&
param.viewId === this.element.propValue.viewId && param.viewId === this.element.propValue.viewId &&
this.jumpClick(param); this.jumpClick(param)
}, },
pluginAddViewTrackFilter(param) { pluginAddViewTrackFilter(param) {
param.viewId && param.viewId &&
param.viewId === this.element.propValue.viewId && param.viewId === this.element.propValue.viewId &&
this.addViewTrackFilter(param); this.addViewTrackFilter(param)
}, },
viewInCache(param) { viewInCache(param) {
this.view = param.view; this.view = param.view
if (this.view && this.view.customAttr) { if (this.view && this.view.customAttr) {
this.currentPage.pageSize = parseInt( this.currentPage.pageSize = parseInt(
JSON.parse(this.view.customAttr).size.tablePageSize JSON.parse(this.view.customAttr).size.tablePageSize
); )
} }
param.viewId && param.viewId &&
param.viewId === this.element.propValue.viewId && param.viewId === this.element.propValue.viewId &&
this.getDataEdit(param); this.getDataEdit(param)
}, },
clearPanelLinkage(param) { clearPanelLinkage(param) {
if ( if (
param.viewId === "all" || param.viewId === 'all' ||
param.viewId === this.element.propValue.viewId param.viewId === this.element.propValue.viewId
) { ) {
try { try {
this.$refs[this.element.propValue.id]?.reDrawView(); this.$refs[this.element.propValue.id]?.reDrawView()
} catch (e) { } catch (e) {
console.error("reDrawView-error：", this.element.propValue.id); console.error('reDrawView-error：', this.element.propValue.id)
} }
} }
}, },
bindPluginEvent() { bindPluginEvent() {
bus.$on("plugin-chart-click", this.pluginChartClick); bus.$on('plugin-chart-click', this.pluginChartClick)
bus.$on("plugin-jump-click", this.pluginJumpClick); bus.$on('plugin-jump-click', this.pluginJumpClick)
bus.$on("plugin-add-view-track-filter", this.pluginAddViewTrackFilter); bus.$on('plugin-add-view-track-filter', this.pluginAddViewTrackFilter)
bus.$on("view-in-cache", this.viewInCache); bus.$on('view-in-cache', this.viewInCache)
bus.$on("batch-opt-change", this.batchOptChange); bus.$on('batch-opt-change', this.batchOptChange)
bus.$on("onSubjectChange", this.optFromBatchThemeChange); bus.$on('onSubjectChange', this.optFromBatchThemeChange)
bus.$on("onThemeColorChange", this.optFromBatchThemeChange); bus.$on('onThemeColorChange', this.optFromBatchThemeChange)
bus.$on("onThemeAttrChange", this.optFromBatchSingleProp); bus.$on('onThemeAttrChange', this.optFromBatchSingleProp)
bus.$on("clear_panel_linkage", this.clearPanelLinkage); bus.$on('clear_panel_linkage', this.clearPanelLinkage)
}, },
addViewTrackFilter(linkageParam) { addViewTrackFilter(linkageParam) {
this.$store.commit("addViewTrackFilter", linkageParam); this.$store.commit('addViewTrackFilter', linkageParam)
}, },
// 根据仪表板的缩放比例，修改视图内部参数 // 根据仪表板的缩放比例，修改视图内部参数
mergeScale() { mergeScale() {
...@@ -899,30 +902,30 @@ export default { ...@@ -899,30 +902,30 @@ export default {
Math.min( Math.min(
this.previewCanvasScale.scalePointWidth, this.previewCanvasScale.scalePointWidth,
this.previewCanvasScale.scalePointHeight this.previewCanvasScale.scalePointHeight
) * this.scaleCoefficient; ) * this.scaleCoefficient
const customAttrChart = JSON.parse(this.sourceCustomAttrStr); const customAttrChart = JSON.parse(this.sourceCustomAttrStr)
const customStyleChart = JSON.parse(this.sourceCustomStyleStr); const customStyleChart = JSON.parse(this.sourceCustomStyleStr)
recursionTransObj( recursionTransObj(
customAttrTrans, customAttrTrans,
customAttrChart, customAttrChart,
this.scale, this.scale,
this.scaleCoefficientType this.scaleCoefficientType
); )
recursionTransObj( recursionTransObj(
customStyleTrans, customStyleTrans,
customStyleChart, customStyleChart,
this.scale, this.scale,
this.scaleCoefficientType this.scaleCoefficientType
); )
// 移动端地图标签不显示 // 移动端地图标签不显示
if (this.chart.type === "map" && this.scaleCoefficientType === "mobile") { if (this.chart.type === 'map' && this.scaleCoefficientType === 'mobile') {
customAttrChart.label.show = false; customAttrChart.label.show = false
} }
this.chart = { this.chart = {
...this.chart, ...this.chart,
customAttr: JSON.stringify(customAttrChart), customAttr: JSON.stringify(customAttrChart),
customStyle: JSON.stringify(customStyleChart), customStyle: JSON.stringify(customStyleChart)
}; }
}, },
getData(id, cache = true, dataBroadcast = false) { getData(id, cache = true, dataBroadcast = false) {
if (id) { if (id) {
...@@ -932,253 +935,253 @@ export default { ...@@ -932,253 +935,253 @@ export default {
`/chart/view/getData/${id}/${this.panelInfo.id}` `/chart/view/getData/${id}/${this.panelInfo.id}`
) )
) { ) {
const url = `/chart/view/getData/${id}/${this.panelInfo.id}`; const url = `/chart/view/getData/${id}/${this.panelInfo.id}`
Vue.prototype.$cancelRequest(url); Vue.prototype.$cancelRequest(url)
Vue.prototype.$currentHttpRequestList.delete(url); Vue.prototype.$currentHttpRequestList.delete(url)
this.getDataLoading = false; this.getDataLoading = false
this.getData(id, cache, dataBroadcast); this.getData(id, cache, dataBroadcast)
clearTimeout(this.cancelTime); clearTimeout(this.cancelTime)
this.cancelTime = setTimeout(() => { this.cancelTime = setTimeout(() => {
this.requestStatus = "waiting"; this.requestStatus = 'waiting'
}, 0); }, 0)
return; return
} }
this.requestStatus = "waiting"; this.requestStatus = 'waiting'
this.message = null; this.message = null
// 增加判断 仪表板公共连接中使用viewInfo 正常使用viewData // 增加判断 仪表板公共连接中使用viewInfo 正常使用viewData
let method = viewData; let method = viewData
const token = this.$store.getters.token || getToken(); const token = this.$store.getters.token || getToken()
const linkToken = this.$store.getters.linkToken || getLinkToken(); const linkToken = this.$store.getters.linkToken || getLinkToken()
if (!token && linkToken) { if (!token && linkToken) {
method = viewInfo; method = viewInfo
} }
const requestInfo = { const requestInfo = {
...this.filter, ...this.filter,
cache: cache, cache: cache,
queryFrom: this.isEdit ? "panel_edit" : "panel", queryFrom: this.isEdit ? 'panel_edit' : 'panel'
}; }
if (this.panelInfo.proxy) { if (this.panelInfo.proxy) {
// method = viewInfo // method = viewInfo
requestInfo.proxy = { userId: this.panelInfo.proxy }; requestInfo.proxy = { userId: this.panelInfo.proxy }
} }
// table-info明细表增加分页 // table-info明细表增加分页
if (this.view && this.view.customAttr) { if (this.view && this.view.customAttr) {
const attrSize = JSON.parse(this.view.customAttr).size; const attrSize = JSON.parse(this.view.customAttr).size
if ( if (
this.chart.type === "table-info" && this.chart.type === 'table-info' &&
this.view.datasetMode === 0 && this.view.datasetMode === 0 &&
(!attrSize.tablePageMode || attrSize.tablePageMode === "page") (!attrSize.tablePageMode || attrSize.tablePageMode === 'page')
) { ) {
requestInfo.goPage = this.currentPage.page; requestInfo.goPage = this.currentPage.page
requestInfo.pageSize = requestInfo.pageSize =
this.currentPage.pageSize === parseInt(attrSize.tablePageSize) this.currentPage.pageSize === parseInt(attrSize.tablePageSize)
? this.currentPage.pageSize ? this.currentPage.pageSize
: parseInt(attrSize.tablePageSize); : parseInt(attrSize.tablePageSize)
} }
} }
if (this.isFirstLoad) { if (this.isFirstLoad) {
this.element.filters = this.filters?.length this.element.filters = this.filters?.length
? JSON.parse(JSON.stringify(this.filters)) ? JSON.parse(JSON.stringify(this.filters))
: []; : []
} }
method(id, this.panelInfo.id, requestInfo) method(id, this.panelInfo.id, requestInfo)
.then((response) => { .then((response) => {
// 将视图传入echart组件 // 将视图传入echart组件
if (response.success) { if (response.success) {
this.chart = response.data; this.chart = response.data
this.view = response.data; this.view = response.data
if (this.chart.type.includes("table")) { if (this.chart.type.includes('table')) {
this.$store.commit("setLastViewRequestInfo", { this.$store.commit('setLastViewRequestInfo', {
viewId: id, viewId: id,
requestInfo: requestInfo, requestInfo: requestInfo
}); })
} }
this.buildInnerRefreshTimer( this.buildInnerRefreshTimer(
this.chart.refreshViewEnable, this.chart.refreshViewEnable,
this.chart.refreshUnit, this.chart.refreshUnit,
this.chart.refreshTime this.chart.refreshTime
); )
this.$emit("fill-chart-2-parent", this.chart); this.$emit('fill-chart-2-parent', this.chart)
this.getDataOnly(response.data, dataBroadcast); this.getDataOnly(response.data, dataBroadcast)
this.chart["position"] = this.inTab ? "tab" : "panel"; this.chart['position'] = this.inTab ? 'tab' : 'panel'
// 记录当前数据 // 记录当前数据
this.panelViewDetailsInfo[id] = JSON.stringify(this.chart); this.panelViewDetailsInfo[id] = JSON.stringify(this.chart)
if (this.element.needAdaptor) { if (this.element.needAdaptor) {
const customStyleObj = JSON.parse(this.chart.customStyle); const customStyleObj = JSON.parse(this.chart.customStyle)
const customAttrObj = JSON.parse(this.chart.customAttr); const customAttrObj = JSON.parse(this.chart.customAttr)
adaptCurTheme(customStyleObj, customAttrObj); adaptCurTheme(customStyleObj, customAttrObj)
this.chart.customStyle = JSON.stringify(customStyleObj); this.chart.customStyle = JSON.stringify(customStyleObj)
this.chart.customAttr = JSON.stringify(customAttrObj); this.chart.customAttr = JSON.stringify(customAttrObj)
viewEditSave(this.panelInfo.id, { viewEditSave(this.panelInfo.id, {
id: this.chart.id, id: this.chart.id,
customStyle: this.chart.customStyle, customStyle: this.chart.customStyle,
customAttr: this.chart.customAttr, customAttr: this.chart.customAttr
}); })
this.$store.commit("adaptorStatusDisable", this.element.id); this.$store.commit('adaptorStatusDisable', this.element.id)
} }
this.sourceCustomAttrStr = this.chart.customAttr; this.sourceCustomAttrStr = this.chart.customAttr
this.sourceCustomStyleStr = this.chart.customStyle; this.sourceCustomStyleStr = this.chart.customStyle
this.chart.drillFields = this.chart.drillFields this.chart.drillFields = this.chart.drillFields
? JSON.parse(this.chart.drillFields) ? JSON.parse(this.chart.drillFields)
: []; : []
if (!response.data.drill) { if (!response.data.drill) {
this.drillClickDimensionList.splice( this.drillClickDimensionList.splice(
this.drillClickDimensionList.length - 1, this.drillClickDimensionList.length - 1,
1 1
); )
this.resetDrill(); this.resetDrill()
} }
this.drillFilters = JSON.parse( this.drillFilters = JSON.parse(
JSON.stringify( JSON.stringify(
response.data.drillFilters ? response.data.drillFilters : [] response.data.drillFilters ? response.data.drillFilters : []
) )
); )
this.drillFields = JSON.parse( this.drillFields = JSON.parse(
JSON.stringify(response.data.drillFields) JSON.stringify(response.data.drillFields)
); )
this.requestStatus = "merging"; this.requestStatus = 'merging'
this.mergeScale(); this.mergeScale()
this.initCurFields(this.chart); this.initCurFields(this.chart)
this.requestStatus = "success"; this.requestStatus = 'success'
this.httpRequest.status = true; this.httpRequest.status = true
} else { } else {
console.error("err2-" + JSON.stringify(response)); console.error('err2-' + JSON.stringify(response))
this.requestStatus = "error"; this.requestStatus = 'error'
this.message = response.message; this.message = response.message
} }
this.isFirstLoad = false; this.isFirstLoad = false
return true; return true
}) })
.catch((err) => { .catch((err) => {
console.error("err-" + err); console.error('err-' + err)
this.requestStatus = "error"; this.requestStatus = 'error'
if (err.message && err.message.indexOf("timeout") > -1) { if (err.message && err.message.indexOf('timeout') > -1) {
this.message = this.$t("panel.timeout_refresh"); this.message = this.$t('panel.timeout_refresh')
} else if (!err.response) { } else if (!err.response) {
this.httpRequest.status = false; this.httpRequest.status = false
} else { } else {
if (err.response) { if (err.response) {
this.httpRequest.status = err.response.data.success; this.httpRequest.status = err.response.data.success
this.httpRequest.msg = err.response.data.message; this.httpRequest.msg = err.response.data.message
if (err && err.response && err.response.data) { if (err && err.response && err.response.data) {
this.message = err.response.data.message; this.message = err.response.data.message
} else { } else {
this.message = err; this.message = err
} }
} }
} }
this.isFirstLoad = false; this.isFirstLoad = false
return true; return true
}) })
.finally(() => { .finally(() => {
this.getDataLoading = false; this.getDataLoading = false
}); })
} }
}, },
initCurFields(chartDetails) { initCurFields(chartDetails) {
this.curFields = []; this.curFields = []
this.dataRowSelect = {}; this.dataRowSelect = {}
this.dataRowNameSelect = {}; this.dataRowNameSelect = {}
if (chartDetails.data && chartDetails.data.sourceFields) { if (chartDetails.data && chartDetails.data.sourceFields) {
const checkAllAxisStr = const checkAllAxisStr =
chartDetails.xaxis + chartDetails.xaxis +
chartDetails.xaxisExt + chartDetails.xaxisExt +
chartDetails.yaxis + chartDetails.yaxis +
chartDetails.yaxisExt; chartDetails.yaxisExt
chartDetails.data.sourceFields.forEach((field) => { chartDetails.data.sourceFields.forEach((field) => {
if (checkAllAxisStr.indexOf(field.id) > -1) { if (checkAllAxisStr.indexOf(field.id) > -1) {
this.curFields.push(field); this.curFields.push(field)
} }
}); })
// Get the corresponding relationship between id and value // Get the corresponding relationship between id and value
const nameIdMap = chartDetails.data.fields.reduce((pre, next) => { const nameIdMap = chartDetails.data.fields.reduce((pre, next) => {
pre[next["dataeaseName"]] = next["id"]; pre[next['dataeaseName']] = next['id']
return pre; return pre
}, {}); }, {})
const sourceFieldNameIdMap = chartDetails.data.fields.reduce( const sourceFieldNameIdMap = chartDetails.data.fields.reduce(
(pre, next) => { (pre, next) => {
pre[next["dataeaseName"]] = next["name"]; pre[next['dataeaseName']] = next['name']
return pre; return pre
}, },
{} {}
); )
const rowData = chartDetails.data.tableRow[0]; const rowData = chartDetails.data.tableRow[0]
if (chartDetails.type === "richTextView") { if (chartDetails.type === 'richTextView') {
let yAxis = []; let yAxis = []
try { try {
yAxis = JSON.parse(chartDetails.yaxis); yAxis = JSON.parse(chartDetails.yaxis)
} catch (err) { } catch (err) {
yAxis = JSON.parse(JSON.stringify(chartDetails.yaxis)); yAxis = JSON.parse(JSON.stringify(chartDetails.yaxis))
} }
const yDataeaseNames = []; const yDataeaseNames = []
const yDataeaseNamesCfg = []; const yDataeaseNamesCfg = []
yAxis.forEach((yItem) => { yAxis.forEach((yItem) => {
yDataeaseNames.push(yItem.dataeaseName); yDataeaseNames.push(yItem.dataeaseName)
yDataeaseNamesCfg[yItem.dataeaseName] = yItem.formatterCfg; yDataeaseNamesCfg[yItem.dataeaseName] = yItem.formatterCfg
}); })
this.rowDataFormat(rowData, yDataeaseNames, yDataeaseNamesCfg); this.rowDataFormat(rowData, yDataeaseNames, yDataeaseNamesCfg)
} }
for (const key in rowData) { for (const key in rowData) {
this.dataRowSelect[nameIdMap[key]] = rowData[key]; this.dataRowSelect[nameIdMap[key]] = rowData[key]
this.dataRowNameSelect[sourceFieldNameIdMap[key]] = rowData[key]; this.dataRowNameSelect[sourceFieldNameIdMap[key]] = rowData[key]
} }
} }
Vue.set(this.element.propValue, "innerType", chartDetails.type); Vue.set(this.element.propValue, 'innerType', chartDetails.type)
Vue.set(this.element.propValue, "render", chartDetails.render); Vue.set(this.element.propValue, 'render', chartDetails.render)
if (chartDetails.type === "richTextView") { if (chartDetails.type === 'richTextView') {
this.$nextTick(() => { this.$nextTick(() => {
bus.$emit("initCurFields-" + this.element.id); bus.$emit('initCurFields-' + this.element.id)
}); })
} }
}, },
rowDataFormat(rowData, yDataeaseNames, yDataeaseNamesCfg) { rowDataFormat(rowData, yDataeaseNames, yDataeaseNamesCfg) {
for (const key in rowData) { for (const key in rowData) {
if (yDataeaseNames.includes(key)) { if (yDataeaseNames.includes(key)) {
const formatterCfg = yDataeaseNamesCfg[key]; const formatterCfg = yDataeaseNamesCfg[key]
const value = rowData[key]; const value = rowData[key]
if (value === null || value === undefined) { if (value === null || value === undefined) {
rowData[key] = "-"; rowData[key] = '-'
} }
if (formatterCfg) { if (formatterCfg) {
const v = valueFormatter(value, formatterCfg); const v = valueFormatter(value, formatterCfg)
rowData[key] = v && v.includes("NaN") ? value : v; rowData[key] = v && v.includes('NaN') ? value : v
} else { } else {
const v = valueFormatter(value, formatterItem); const v = valueFormatter(value, formatterItem)
rowData[key] = v && v.includes("NaN") ? value : v; rowData[key] = v && v.includes('NaN') ? value : v
} }
} }
} }
}, },
viewIdMatch(viewIds, viewId) { viewIdMatch(viewIds, viewId) {
return !viewIds || viewIds.length === 0 || viewIds.includes(viewId); return !viewIds || viewIds.length === 0 || viewIds.includes(viewId)
}, },
openChartDetailsDialog(params) { openChartDetailsDialog(params) {
const tableChart = deepCopy(this.chart); const tableChart = deepCopy(this.chart)
tableChart.customAttr = JSON.parse(this.chart.customAttr); tableChart.customAttr = JSON.parse(this.chart.customAttr)
tableChart.customStyle = JSON.parse(this.chart.customStyle); tableChart.customStyle = JSON.parse(this.chart.customStyle)
tableChart.customAttr.color.tableHeaderBgColor = "#f8f8f9"; tableChart.customAttr.color.tableHeaderBgColor = '#f8f8f9'
tableChart.customAttr.color.tableItemBgColor = "#ffffff"; tableChart.customAttr.color.tableItemBgColor = '#ffffff'
tableChart.customAttr.color.tableHeaderFontColor = "#7c7e81"; tableChart.customAttr.color.tableHeaderFontColor = '#7c7e81'
tableChart.customAttr.color.tableFontColor = "#7c7e81"; tableChart.customAttr.color.tableFontColor = '#7c7e81'
tableChart.customAttr.color.tableStripe = true; tableChart.customAttr.color.tableStripe = true
tableChart.customAttr.size.tablePageMode = "pull"; tableChart.customAttr.size.tablePageMode = 'pull'
tableChart.customStyle.text.show = false; tableChart.customStyle.text.show = false
tableChart.customAttr = JSON.stringify(tableChart.customAttr); tableChart.customAttr = JSON.stringify(tableChart.customAttr)
tableChart.customStyle = JSON.stringify(tableChart.customStyle); tableChart.customStyle = JSON.stringify(tableChart.customStyle)
this.showChartInfo = this.chart; this.showChartInfo = this.chart
this.showChartTableInfo = tableChart; this.showChartTableInfo = tableChart
this.showChartInfoType = params.openType; this.showChartInfoType = params.openType
if (!this.inScreen) { if (!this.inScreen) {
bus.$emit("pcChartDetailsDialog", { bus.$emit('pcChartDetailsDialog', {
showChartInfo: this.showChartInfo, showChartInfo: this.showChartInfo,
showChartTableInfo: this.showChartTableInfo, showChartTableInfo: this.showChartTableInfo,
showChartInfoType: this.showChartInfoType, showChartInfoType: this.showChartInfoType
}); })
} else if (this.terminal === "pc") { } else if (this.terminal === 'pc') {
this.chartDetailsVisible = true; this.chartDetailsVisible = true
} else { } else {
this.mobileChartDetailsVisible = true; this.mobileChartDetailsVisible = true
} }
}, },
chartClick(param) { chartClick(param) {
...@@ -1186,23 +1189,23 @@ export default { ...@@ -1186,23 +1189,23 @@ export default {
this.drillClickDimensionList.length < this.drillClickDimensionList.length <
this.chart.drillFields.length - 1 this.chart.drillFields.length - 1
) { ) {
(this.chart.type === "map" || this.chart.type === "buddle-map") && (this.chart.type === 'map' || this.chart.type === 'buddle-map') &&
this.sendToChildren(param); this.sendToChildren(param)
this.drillClickDimensionList.push({ this.drillClickDimensionList.push({
dimensionList: param.data.dimensionList, dimensionList: param.data.dimensionList
}); })
this.getData(this.element.propValue.viewId); this.getData(this.element.propValue.viewId)
} else if (this.chart.drillFields.length > 0) { } else if (this.chart.drillFields.length > 0) {
this.$message({ this.$message({
type: "error", type: 'error',
message: this.$t("chart.last_layer"), message: this.$t('chart.last_layer'),
showClose: true, showClose: true
}); })
} }
}, },
jumpClick(param) { jumpClick(param) {
let dimension, jumpInfo, sourceInfo; let dimension, jumpInfo, sourceInfo
// 如果有名称name 获取和name匹配的dimension 否则倒序取最后一个能匹配的 // 如果有名称name 获取和name匹配的dimension 否则倒序取最后一个能匹配的
if (param.name) { if (param.name) {
param.dimensionList.forEach((dimensionItem) => { param.dimensionList.forEach((dimensionItem) => {
...@@ -1210,277 +1213,275 @@ export default { ...@@ -1210,277 +1213,275 @@ export default {
dimensionItem.id === param.name || dimensionItem.id === param.name ||
dimensionItem.value === param.name dimensionItem.value === param.name
) { ) {
dimension = dimensionItem; dimension = dimensionItem
sourceInfo = param.viewId + "#" + dimension.id; sourceInfo = param.viewId + '#' + dimension.id
jumpInfo = this.nowPanelJumpInfo[sourceInfo]; jumpInfo = this.nowPanelJumpInfo[sourceInfo]
} }
}); })
} else { } else {
for (let i = param.dimensionList.length - 1; i >= 0; i--) { for (let i = param.dimensionList.length - 1; i >= 0; i--) {
dimension = param.dimensionList[i]; dimension = param.dimensionList[i]
sourceInfo = param.viewId + "#" + dimension.id; sourceInfo = param.viewId + '#' + dimension.id
jumpInfo = this.nowPanelJumpInfo[sourceInfo]; jumpInfo = this.nowPanelJumpInfo[sourceInfo]
if (jumpInfo) { if (jumpInfo) {
break; break
} }
} }
} }
if (jumpInfo) { if (jumpInfo) {
param.sourcePanelId = this.panelInfo.id; param.sourcePanelId = this.panelInfo.id
param.sourceViewId = param.viewId; param.sourceViewId = param.viewId
param.sourceFieldId = dimension.id; param.sourceFieldId = dimension.id
// 内部仪表板跳转 // 内部仪表板跳转
if (jumpInfo.linkType === "inner") { if (jumpInfo.linkType === 'inner') {
if (jumpInfo.targetPanelId) { if (jumpInfo.targetPanelId) {
localStorage.setItem("jumpInfoParam", JSON.stringify(param)); localStorage.setItem('jumpInfoParam', JSON.stringify(param))
if (this.publicLinkStatus) { if (this.publicLinkStatus) {
// 判断是否有公共链接ID // 判断是否有公共链接ID
if (jumpInfo.publicJumpId) { if (jumpInfo.publicJumpId) {
const url = "/link/" + jumpInfo.publicJumpId; const url = '/link/' + jumpInfo.publicJumpId
const currentUrl = window.location.href; const currentUrl = window.location.href
localStorage.setItem("beforeJumpUrl", currentUrl); localStorage.setItem('beforeJumpUrl', currentUrl)
this.windowsJump(url, jumpInfo.jumpType); this.windowsJump(url, jumpInfo.jumpType)
} else { } else {
this.$message({ this.$message({
type: "warn", type: 'warn',
message: this.$t("panel.public_link_tips"), message: this.$t('panel.public_link_tips'),
showClose: true, showClose: true
}); })
} }
} else { } else {
const url = "#/preview/" + jumpInfo.targetPanelId; const url = '#/preview/' + jumpInfo.targetPanelId
this.windowsJump(url, jumpInfo.jumpType); this.windowsJump(url, jumpInfo.jumpType)
} }
} else { } else {
this.$message({ this.$message({
type: "warn", type: 'warn',
message: "未指定跳转仪表板", message: '未指定跳转仪表板',
showClose: true, showClose: true
}); })
} }
} else { } else {
const colList = [...param.dimensionList, ...param.quotaList]; const colList = [...param.dimensionList, ...param.quotaList]
let url = this.setIdValueTrans( let url = this.setIdValueTrans(
"id", 'id',
"value", 'value',
jumpInfo.content, jumpInfo.content,
colList colList
); )
url = checkAddHttp(url); url = checkAddHttp(url)
this.windowsJump(url, jumpInfo.jumpType); this.windowsJump(url, jumpInfo.jumpType)
} }
} else { } else {
if (this.chart.type.indexOf("table") === -1) { if (this.chart.type.indexOf('table') === -1) {
this.$message({ this.$message({
type: "warn", type: 'warn',
message: "未获取跳转信息", message: '未获取跳转信息',
showClose: true, showClose: true
}); })
} }
} }
}, },
setIdValueTrans(from, to, content, colList) { setIdValueTrans(from, to, content, colList) {
if (!content) { if (!content) {
return content; return content
} }
let name2Id = content; let name2Id = content
const nameIdMap = colList.reduce((pre, next) => { const nameIdMap = colList.reduce((pre, next) => {
pre[next[from]] = next[to]; pre[next[from]] = next[to]
return pre; return pre
}, {}); }, {})
const on = content.match(/\[(.+?)\]/g); const on = content.match(/\[(.+?)\]/g)
if (on) { if (on) {
on.forEach((itm) => { on.forEach((itm) => {
const ele = itm.slice(1, -1); const ele = itm.slice(1, -1)
name2Id = name2Id.replace(itm, nameIdMap[ele]); name2Id = name2Id.replace(itm, nameIdMap[ele])
}); })
} }
return name2Id; return name2Id
}, },
windowsJump(url, jumpType) { windowsJump(url, jumpType) {
try { try {
window.open(url, jumpType); window.open(url, jumpType)
} catch (e) { } catch (e) {
this.$message({ this.$message({
message: this.$t("panel.url_check_error") + ":" + url, message: this.$t('panel.url_check_error') + ':' + url,
type: "error", type: 'error',
showClose: true, showClose: true
}); })
} }
}, },
resetDrill() { resetDrill() {
const length = this.drillClickDimensionList.length; const length = this.drillClickDimensionList.length
this.drillClickDimensionList = []; this.drillClickDimensionList = []
if (this.chart.type === "map" || this.chart.type === "buddle-map") { if (this.chart.type === 'map' || this.chart.type === 'buddle-map') {
this.backToParent(0, length); this.backToParent(0, length)
const current = this.$refs[this.element.propValue.id]; const current = this.$refs[this.element.propValue.id]
if (this.chart.isPlugin) { if (this.chart.isPlugin) {
current && current &&
current.callPluginInner && current.callPluginInner &&
this.setDetailMapCode(null) && this.setDetailMapCode(null) &&
current.callPluginInner({ current.callPluginInner({
methodName: "registerDynamicMap", methodName: 'registerDynamicMap',
methodParam: null, methodParam: null
}); })
} else { } else {
current && current &&
current.registerDynamicMap && current.registerDynamicMap &&
this.setDetailMapCode(null) && this.setDetailMapCode(null) &&
current.registerDynamicMap(null); current.registerDynamicMap(null)
} }
} }
}, },
drillJump(index) { drillJump(index) {
const length = this.drillClickDimensionList.length; const length = this.drillClickDimensionList.length
this.drillClickDimensionList = this.drillClickDimensionList.slice( this.drillClickDimensionList = this.drillClickDimensionList.slice(
0, 0,
index index
); )
if (this.chart.type === "map" || this.chart.type === "buddle-map") { if (this.chart.type === 'map' || this.chart.type === 'buddle-map') {
this.backToParent(index, length); this.backToParent(index, length)
} }
this.getData(this.element.propValue.viewId); this.getData(this.element.propValue.viewId)
}, },
// 回到父级地图 // 回到父级地图
backToParent(index, length) { backToParent(index, length) {
if (length <= 0) return; if (length <= 0) return
const times = length - 1 - index; const times = length - 1 - index
let temp = times; let temp = times
let tempNode = this.currentAcreaNode; let tempNode = this.currentAcreaNode
while (temp >= 0) { while (temp >= 0) {
tempNode = this.findEntityByCode(tempNode.pcode, this.places); tempNode = this.findEntityByCode(tempNode.pcode, this.places)
temp--; temp--
} }
this.currentAcreaNode = tempNode; this.currentAcreaNode = tempNode
const current = this.$refs[this.element.propValue.id]; const current = this.$refs[this.element.propValue.id]
if (this.chart.isPlugin) { if (this.chart.isPlugin) {
current && current &&
current.callPluginInner && current.callPluginInner &&
this.setDetailMapCode(this.currentAcreaNode.code) && this.setDetailMapCode(this.currentAcreaNode.code) &&
current.callPluginInner({ current.callPluginInner({
methodName: "registerDynamicMap", methodName: 'registerDynamicMap',
methodParam: this.currentAcreaNode.code, methodParam: this.currentAcreaNode.code
}); })
} else { } else {
current && current &&
current.registerDynamicMap && current.registerDynamicMap &&
this.setDetailMapCode(this.currentAcreaNode.code) && this.setDetailMapCode(this.currentAcreaNode.code) &&
current.registerDynamicMap(this.currentAcreaNode.code); current.registerDynamicMap(this.currentAcreaNode.code)
} }
}, },
setDetailMapCode(code) { setDetailMapCode(code) {
this.element.DetailAreaCode = code; this.element.DetailAreaCode = code
bus.$emit("set-dynamic-area-code", code); bus.$emit('set-dynamic-area-code', code)
return true; return true
}, },
// 切换下一级地图 // 切换下一级地图
sendToChildren(param) { sendToChildren(param) {
const length = param.data.dimensionList.length; const length = param.data.dimensionList.length
const name = param.data.dimensionList[length - 1].value; const name = param.data.dimensionList[length - 1].value
let aCode = null; let aCode = null
if (this.currentAcreaNode) { if (this.currentAcreaNode) {
aCode = this.currentAcreaNode.code; aCode = this.currentAcreaNode.code
} }
const customAttr = JSON.parse(this.chart.customAttr); const customAttr = JSON.parse(this.chart.customAttr)
const currentNode = this.findEntityByCode( const currentNode = this.findEntityByCode(
aCode || customAttr.areaCode, aCode || customAttr.areaCode,
this.places this.places
); )
if ( if (
currentNode && currentNode &&
currentNode.children && currentNode.children &&
currentNode.children.length > 0 currentNode.children.length > 0
) { ) {
const nextNode = currentNode.children.find( const nextNode = currentNode.children.find((item) => item.name === name)
(item) => item.name === name this.currentAcreaNode = nextNode
); const current = this.$refs[this.element.propValue.id]
this.currentAcreaNode = nextNode;
const current = this.$refs[this.element.propValue.id];
if (this.chart.isPlugin) { if (this.chart.isPlugin) {
nextNode && nextNode &&
current && current &&
current.callPluginInner && current.callPluginInner &&
this.setDetailMapCode(nextNode.code) && this.setDetailMapCode(nextNode.code) &&
current.callPluginInner({ current.callPluginInner({
methodName: "registerDynamicMap", methodName: 'registerDynamicMap',
methodParam: nextNode.code, methodParam: nextNode.code
}); })
} else { } else {
nextNode && nextNode &&
current && current &&
current.registerDynamicMap && current.registerDynamicMap &&
this.setDetailMapCode(nextNode.code) && this.setDetailMapCode(nextNode.code) &&
current.registerDynamicMap(nextNode.code); current.registerDynamicMap(nextNode.code)
} }
} }
}, },
findEntityByCode(code, array) { findEntityByCode(code, array) {
if (array === null || array.length === 0) array = this.places; if (array === null || array.length === 0) array = this.places
for (let index = 0; index < array.length; index++) { for (let index = 0; index < array.length; index++) {
const node = array[index]; const node = array[index]
if (node.code === code) return node; if (node.code === code) return node
if (node.children && node.children.length > 0) { if (node.children && node.children.length > 0) {
const temp = this.findEntityByCode(code, node.children); const temp = this.findEntityByCode(code, node.children)
if (temp) return temp; if (temp) return temp
} }
} }
}, },
initAreas() { initAreas() {
Object.keys(this.places).length === 0 && Object.keys(this.places).length === 0 &&
areaMapping().then((res) => { areaMapping().then((res) => {
this.places = res.data; this.places = res.data
}); })
}, },
doMapLink(linkFilters) { doMapLink(linkFilters) {
if (!linkFilters && linkFilters.length === 0) return; if (!linkFilters && linkFilters.length === 0) return
const value = linkFilters[0].value; const value = linkFilters[0].value
if (!value && value.length === 0) return; if (!value && value.length === 0) return
const name = value[0]; const name = value[0]
if (!name) return; if (!name) return
const areaNode = this.findEntityByname(name, []); const areaNode = this.findEntityByname(name, [])
if (!areaNode) return; if (!areaNode) return
const current = this.$refs[this.element.propValue.id]; const current = this.$refs[this.element.propValue.id]
if (this.chart.isPlugin) { if (this.chart.isPlugin) {
current && current &&
current.callPluginInner && current.callPluginInner &&
current.callPluginInner({ current.callPluginInner({
methodName: "registerDynamicMap", methodName: 'registerDynamicMap',
methodParam: areaNode.code, methodParam: areaNode.code
}); })
} else { } else {
current && current &&
current.registerDynamicMap && current.registerDynamicMap &&
current.registerDynamicMap(areaNode.code); current.registerDynamicMap(areaNode.code)
} }
}, },
// 根据地名获取areaCode // 根据地名获取areaCode
findEntityByname(name, array) { findEntityByname(name, array) {
if (array === null || array.length === 0) array = this.places; if (array === null || array.length === 0) array = this.places
for (let index = 0; index < array.length; index++) { for (let index = 0; index < array.length; index++) {
const node = array[index]; const node = array[index]
if (node.name === name) return node; if (node.name === name) return node
if (node.children && node.children.length > 0) { if (node.children && node.children.length > 0) {
const temp = this.findEntityByname(name, node.children); const temp = this.findEntityByname(name, node.children)
if (temp) return temp; if (temp) return temp
} }
} }
}, },
destroyTimeMachine() { destroyTimeMachine() {
this.timeMachine && clearTimeout(this.timeMachine); this.timeMachine && clearTimeout(this.timeMachine)
this.timeMachine = null; this.timeMachine = null
}, },
destroyScaleTimeMachine() { destroyScaleTimeMachine() {
this.scaleTimeMachine && clearTimeout(this.scaleTimeMachine); this.scaleTimeMachine && clearTimeout(this.scaleTimeMachine)
this.scaleTimeMachine = null; this.scaleTimeMachine = null
}, },
// 边框变化 // 边框变化
...@@ -1490,12 +1491,12 @@ export default { ...@@ -1490,12 +1491,12 @@ export default {
if (index === this.changeIndex) { if (index === this.changeIndex) {
this.chart.isPlugin this.chart.isPlugin
? this.$refs[this.element.propValue.id].callPluginInner({ ? this.$refs[this.element.propValue.id].callPluginInner({
methodName: "chartResize", methodName: 'chartResize'
}) })
: this.$refs[this.element.propValue.id].chartResize(); : this.$refs[this.element.propValue.id].chartResize()
} }
this.destroyTimeMachine(); this.destroyTimeMachine()
}, 50); }, 50)
} }
}, },
...@@ -1504,36 +1505,36 @@ export default { ...@@ -1504,36 +1505,36 @@ export default {
if (this.$refs[this.element.propValue.id]) { if (this.$refs[this.element.propValue.id]) {
this.scaleTimeMachine = setTimeout(() => { this.scaleTimeMachine = setTimeout(() => {
if (index === this.changeScaleIndex) { if (index === this.changeScaleIndex) {
this.mergeScale(); this.mergeScale()
} }
this.destroyScaleTimeMachine(); this.destroyScaleTimeMachine()
}, 100); }, 100)
} }
}, },
renderComponent() { renderComponent() {
return this.chart.render; return this.chart.render
}, },
getDataEdit(param) { getDataEdit(param) {
this.$store.commit("canvasChange"); this.$store.commit('canvasChange')
if (param.type === "propChange") { if (param.type === 'propChange') {
this.getData(param.viewId, false, true); this.getData(param.viewId, false, true)
} else if (param.type === "styleChange") { } else if (param.type === 'styleChange') {
this.chart.customAttr = param.viewInfo.customAttr; this.chart.customAttr = param.viewInfo.customAttr
this.chart.customStyle = param.viewInfo.customStyle; this.chart.customStyle = param.viewInfo.customStyle
this.chart.senior = param.viewInfo.senior; this.chart.senior = param.viewInfo.senior
this.chart.title = param.viewInfo.title; this.chart.title = param.viewInfo.title
this.chart.stylePriority = param.viewInfo.stylePriority; this.chart.stylePriority = param.viewInfo.stylePriority
this.sourceCustomAttrStr = this.chart.customAttr; this.sourceCustomAttrStr = this.chart.customAttr
this.sourceCustomStyleStr = this.chart.customStyle; this.sourceCustomStyleStr = this.chart.customStyle
if (this.componentViewsData[this.chart.id]) { if (this.componentViewsData[this.chart.id]) {
this.componentViewsData[this.chart.id]["title"] = this.chart.title; this.componentViewsData[this.chart.id]['title'] = this.chart.title
if (param.refreshProp) { if (param.refreshProp) {
this.componentViewsData[this.chart.id][param.refreshProp] = this.componentViewsData[this.chart.id][param.refreshProp] =
this.chart[param.refreshProp]; this.chart[param.refreshProp]
} }
} }
this.mergeScale(); this.mergeScale()
} }
}, },
getDataOnly(sourceResponseData, dataBroadcast) { getDataOnly(sourceResponseData, dataBroadcast) {
...@@ -1545,43 +1546,43 @@ export default { ...@@ -1545,43 +1546,43 @@ export default {
const requestInfo = { const requestInfo = {
filter: [], filter: [],
drill: [], drill: [],
queryFrom: "panel", queryFrom: 'panel'
}; }
// table-info明细表增加分页 // table-info明细表增加分页
if (this.view && this.view.customAttr) { if (this.view && this.view.customAttr) {
const attrSize = JSON.parse(this.view.customAttr).size; const attrSize = JSON.parse(this.view.customAttr).size
if ( if (
this.chart.type === "table-info" && this.chart.type === 'table-info' &&
this.view.datasetMode === 0 && this.view.datasetMode === 0 &&
(!attrSize.tablePageMode || attrSize.tablePageMode === "page") (!attrSize.tablePageMode || attrSize.tablePageMode === 'page')
) { ) {
requestInfo.goPage = this.currentPage.page; requestInfo.goPage = this.currentPage.page
requestInfo.pageSize = this.currentPage.pageSize; requestInfo.pageSize = this.currentPage.pageSize
} }
} }
viewData(this.chart.id, this.panelInfo.id, requestInfo).then( viewData(this.chart.id, this.panelInfo.id, requestInfo).then(
(response) => { (response) => {
this.componentViewsData[this.chart.id] = response.data; this.componentViewsData[this.chart.id] = response.data
this.view = response.data; this.view = response.data
if (dataBroadcast) { if (dataBroadcast) {
bus.$emit("prop-change-data"); bus.$emit('prop-change-data')
} }
} }
); )
} else { } else {
this.componentViewsData[this.chart.id] = sourceResponseData; this.componentViewsData[this.chart.id] = sourceResponseData
if (dataBroadcast) { if (dataBroadcast) {
bus.$emit("prop-change-data"); bus.$emit('prop-change-data')
} }
} }
} }
}, },
pageClick(page) { pageClick(page) {
this.currentPage = page; this.currentPage = page
this.getData(this.element.propValue.viewId, false); this.getData(this.element.propValue.viewId, false)
}, }
}, }
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
src/components/canvas/customComponent/UserViewDialog.vue
<template> <template>
<de-container <de-container
v-loading="$store.getters.loadingMap[$store.getters.currentPath] || linkLoading" v-loading="
$store.getters.loadingMap[$store.getters.currentPath] || linkLoading
"
:class="isAbsoluteContainer ? 'abs-container' : ''" :class="isAbsoluteContainer ? 'abs-container' : ''"
> >
<de-main-container <de-main-container
...@@ -19,25 +21,37 @@ ...@@ -19,25 +21,37 @@
<plugin-com <plugin-com
v-if="chart.isPlugin" v-if="chart.isPlugin"
:component-name="chart.type + '-view'" :component-name="chart.type + '-view'"
:obj="{chart: mapChart || chart}" :obj="{ chart: mapChart || chart }"
:chart="mapChart || chart" :chart="mapChart || chart"
:theme-style="element.commonBackground" :theme-style="element.commonBackground"
:canvas-style-data="canvasStyleData" :canvas-style-data="canvasStyleData"
class="chart-class" class="chart-class"
/> />
<chart-component <chart-component
v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'echarts'" v-else-if="
!chart.type.includes('text') &&
chart.type !== 'label' &&
!chart.type.includes('table') &&
renderComponent() === 'echarts'
"
:theme-style="element.commonBackground" :theme-style="element.commonBackground"
class="chart-class" class="chart-class"
:chart="mapChart || chart" :chart="mapChart || chart"
/> />
<chart-component-g2 <chart-component-g2
v-else-if="!chart.type.includes('text') && chart.type !== 'label' && !chart.type.includes('table') && renderComponent() === 'antv'" v-else-if="
!chart.type.includes('text') &&
chart.type !== 'label' &&
!chart.type.includes('table') &&
renderComponent() === 'antv'
"
class="chart-class" class="chart-class"
:chart="chart" :chart="chart"
/> />
<chart-component-s2 <chart-component-s2
v-else-if="chart.type.includes('table') && renderComponent() === 'antv'" v-else-if="
chart.type.includes('table') && renderComponent() === 'antv'
"
class="chart-class" class="chart-class"
:chart="chart" :chart="chart"
/> />
...@@ -52,10 +66,17 @@ ...@@ -52,10 +66,17 @@
class="table-class" class="table-class"
/> />
<table-normal <table-normal
v-else-if="chart.type.includes('table') && renderComponent() === 'echarts'" v-else-if="
chart.type.includes('table') && renderComponent() === 'echarts'
"
:chart="chart" :chart="chart"
class="table-class" class="table-class"
/> />
<a-map
v-else-if="chart.type === 'amap'"
class="amap-class"
:chart="chart"
/>
</div> </div>
</div> </div>
</de-main-container> </de-main-container>
...@@ -71,7 +92,6 @@ ...@@ -71,7 +92,6 @@
</template> </template>
<script> <script>
import ChartComponent from '@/views/chart/components/ChartComponent.vue' import ChartComponent from '@/views/chart/components/ChartComponent.vue'
import TableNormal from '@/views/chart/components/table/TableNormal' import TableNormal from '@/views/chart/components/table/TableNormal'
import LabelNormal from '@/views/chart/components/normal/LabelNormal' import LabelNormal from '@/views/chart/components/normal/LabelNormal'
...@@ -83,8 +103,14 @@ import PluginCom from '@/views/system/plugin/PluginCom' ...@@ -83,8 +103,14 @@ import PluginCom from '@/views/system/plugin/PluginCom'
import ChartComponentS2 from '@/views/chart/components/ChartComponentS2' import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
import LabelNormalText from '@/views/chart/components/normal/LabelNormalText' import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
import html2canvas from 'html2canvasde' import html2canvas from 'html2canvasde'
import AMap from '@/views/chart/components/AMap'
import { hexColorToRGBA } from '@/views/chart/chart/util' import { hexColorToRGBA } from '@/views/chart/chart/util'
import { deepCopy, exportExcelDownload, exportImg, imgUrlTrans } from '@/components/canvas/utils/utils' import {
deepCopy,
exportExcelDownload,
exportImg,
imgUrlTrans
} from '@/components/canvas/utils/utils'
export default { export default {
name: 'UserViewDialog', name: 'UserViewDialog',
...@@ -97,7 +123,8 @@ export default { ...@@ -97,7 +123,8 @@ export default {
ChartComponent, ChartComponent,
TableNormal, TableNormal,
LabelNormal, LabelNormal,
PluginCom PluginCom,
AMap
}, },
props: { props: {
chart: { chart: {
...@@ -112,7 +139,6 @@ export default { ...@@ -112,7 +139,6 @@ export default {
type: String, type: String,
default: 'details' default: 'details'
} }
}, },
data() { data() {
return { return {
...@@ -133,18 +159,30 @@ export default { ...@@ -133,18 +159,30 @@ export default {
return this.openType === 'enlarge' return this.openType === 'enlarge'
}, },
isOnlyDetails() { isOnlyDetails() {
return this.chart.type === 'table-normal' || this.chart.type === 'table-info' return (
this.chart.type === 'table-normal' || this.chart.type === 'table-info'
)
}, },
customStyle() { customStyle() {
let style = {} let style = {}
if (this.canvasStyleData.openCommonStyle) { if (this.canvasStyleData.openCommonStyle) {
if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) { if (
this.canvasStyleData.panel.backgroundType === 'image' &&
this.canvasStyleData.panel.imageUrl
) {
style = { style = {
background: `url(${imgUrlTrans(this.canvasStyleData.panel.imageUrl)}) no-repeat`, background: `url(${imgUrlTrans(
this.canvasStyleData.panel.imageUrl
)}) no-repeat`,
...style ...style
} }
} else if (this.canvasStyleData.panel.backgroundType === 'color') { } else if (this.canvasStyleData.panel.backgroundType === 'color') {
const colorRGBA = hexColorToRGBA(this.canvasStyleData.panel.color, this.canvasStyleData.panel.alpha === undefined ? 100 : this.canvasStyleData.panel.alpha) const colorRGBA = hexColorToRGBA(
this.canvasStyleData.panel.color,
this.canvasStyleData.panel.alpha === undefined
? 100
: this.canvasStyleData.panel.alpha
)
style = { style = {
background: colorRGBA, background: colorRGBA,
...style ...style
...@@ -158,11 +196,18 @@ export default { ...@@ -158,11 +196,18 @@ export default {
}, },
svgInnerEnable() { svgInnerEnable() {
return !this.screenShot && this.element.commonBackground.enable && this.element.commonBackground.backgroundType === 'innerImage' && typeof this.element.commonBackground.innerImage === 'string' return (
!this.screenShot &&
this.element.commonBackground.enable &&
this.element.commonBackground.backgroundType === 'innerImage' &&
typeof this.element.commonBackground.innerImage === 'string'
)
}, },
mainSlotSvgInner() { mainSlotSvgInner() {
if (this.svgInnerEnable) { if (this.svgInnerEnable) {
return this.element.commonBackground.innerImage.replace('board/', '').replace('.svg', '') return this.element.commonBackground.innerImage
.replace('board/', '')
.replace('.svg', '')
} else { } else {
return null return null
} }
...@@ -173,18 +218,37 @@ export default { ...@@ -173,18 +218,37 @@ export default {
height: '100%' height: '100%'
} }
if (this.element.commonBackground) { if (this.element.commonBackground) {
style['padding'] = (this.element.commonBackground.innerPadding || 0) + 'px' style['padding'] =
style['border-radius'] = (this.element.commonBackground.borderRadius || 0) + 'px' (this.element.commonBackground.innerPadding || 0) + 'px'
style['border-radius'] =
(this.element.commonBackground.borderRadius || 0) + 'px'
let colorRGBA = '' let colorRGBA = ''
if (this.element.commonBackground.backgroundColorSelect) { if (this.element.commonBackground.backgroundColorSelect) {
colorRGBA = hexColorToRGBA(this.element.commonBackground.color, this.element.commonBackground.alpha) colorRGBA = hexColorToRGBA(
this.element.commonBackground.color,
this.element.commonBackground.alpha
)
} }
if (this.element.commonBackground.enable) { if (this.element.commonBackground.enable) {
if (this.screenShot && this.element.commonBackground.backgroundType === 'innerImage' && typeof this.element.commonBackground.innerImage === 'string') { if (
const innerImage = this.element.commonBackground.innerImage.replace('svg', 'png') this.screenShot &&
style['background'] = `url(${imgUrlTrans(innerImage)}) no-repeat ${colorRGBA}` this.element.commonBackground.backgroundType === 'innerImage' &&
} else if (this.element.commonBackground.backgroundType === 'outerImage' && typeof this.element.commonBackground.outerImage === 'string') { typeof this.element.commonBackground.innerImage === 'string'
style['background'] = `url(${imgUrlTrans(this.element.commonBackground.outerImage)}) no-repeat ${colorRGBA}` ) {
const innerImage = this.element.commonBackground.innerImage.replace(
'svg',
'png'
)
style['background'] = `url(${imgUrlTrans(
innerImage
)}) no-repeat ${colorRGBA}`
} else if (
this.element.commonBackground.backgroundType === 'outerImage' &&
typeof this.element.commonBackground.outerImage === 'string'
) {
style['background'] = `url(${imgUrlTrans(
this.element.commonBackground.outerImage
)}) no-repeat ${colorRGBA}`
} else { } else {
style['background-color'] = colorRGBA style['background-color'] = colorRGBA
} }
...@@ -203,24 +267,40 @@ export default { ...@@ -203,24 +267,40 @@ export default {
'lastViewRequestInfo' 'lastViewRequestInfo'
]), ]),
mapChart() { mapChart() {
if (this.chart.type && (this.chart.type === 'map' || this.chart.type === 'buddle-map')) { if (
this.chart.type &&
(this.chart.type === 'map' || this.chart.type === 'buddle-map')
) {
const temp = JSON.parse(JSON.stringify(this.chart)) const temp = JSON.parse(JSON.stringify(this.chart))
let DetailAreaCode = null let DetailAreaCode = null
if (this.curComponent && this.curComponent.DetailAreaCode && this.curComponent.DetailAreaCode.length) { if (
this.curComponent &&
this.curComponent.DetailAreaCode &&
this.curComponent.DetailAreaCode.length
) {
DetailAreaCode = this.curComponent.DetailAreaCode DetailAreaCode = this.curComponent.DetailAreaCode
} }
if (!this.curComponent && this.lastMapChart) { if (!this.curComponent && this.lastMapChart) {
return this.lastMapChart return this.lastMapChart
} }
if (this.curComponent && this.curComponent.options && this.curComponent.options.tabList && this.curComponent.options.tabList.length) { if (
const tabList = JSON.parse(JSON.stringify(this.curComponent.options.tabList)) this.curComponent &&
tabList.forEach(tab => { this.curComponent.options &&
if (tab.content && this.curComponent.options.tabList &&
this.curComponent.options.tabList.length
) {
const tabList = JSON.parse(
JSON.stringify(this.curComponent.options.tabList)
)
tabList.forEach((tab) => {
if (
tab.content &&
tab.content.propValue && tab.content.propValue &&
tab.content.propValue.viewId && tab.content.propValue.viewId &&
tab.content.propValue.viewId === this.chart.id && tab.content.propValue.viewId === this.chart.id &&
tab.content.DetailAreaCode && tab.content.DetailAreaCode &&
tab.content.DetailAreaCode.length) { tab.content.DetailAreaCode.length
) {
DetailAreaCode = tab.content.DetailAreaCode DetailAreaCode = tab.content.DetailAreaCode
} }
}) })
...@@ -236,8 +316,7 @@ export default { ...@@ -236,8 +316,7 @@ export default {
created() { created() {
this.element = deepCopy(this.curComponent) this.element = deepCopy(this.curComponent)
}, },
mounted() { mounted() {},
},
methods: { methods: {
exportExcel(callBack) { exportExcel(callBack) {
const _this = this const _this = this
...@@ -245,9 +324,14 @@ export default { ...@@ -245,9 +324,14 @@ export default {
_this.exportExcelDownload(null, null, null, callBack) _this.exportExcelDownload(null, null, null, callBack)
} else { } else {
if (this.showChartCanvas) { if (this.showChartCanvas) {
html2canvas(document.getElementById('chartCanvas')).then(canvas => { html2canvas(document.getElementById('chartCanvas')).then((canvas) => {
const snapshot = canvas.toDataURL('image/jpeg', 1) const snapshot = canvas.toDataURL('image/jpeg', 1)
_this.exportExcelDownload(snapshot, canvas.width, canvas.height, callBack) _this.exportExcelDownload(
snapshot,
canvas.width,
canvas.height,
callBack
)
}) })
} else { } else {
_this.exportExcelDownload(null, null, null, callBack) _this.exportExcelDownload(null, null, null, callBack)
...@@ -262,7 +346,14 @@ export default { ...@@ -262,7 +346,14 @@ export default {
}, },
exportExcelDownload(snapshot, width, height, callBack) { exportExcelDownload(snapshot, width, height, callBack) {
const loadingWrapper = { val: this.linkLoading } const loadingWrapper = { val: this.linkLoading }
exportExcelDownload(this.chart, snapshot, width, height, loadingWrapper, callBack) exportExcelDownload(
this.chart,
snapshot,
width,
height,
loadingWrapper,
callBack
)
}, },
renderComponent() { renderComponent() {
...@@ -282,7 +373,7 @@ export default { ...@@ -282,7 +373,7 @@ export default {
.ms-main-container { .ms-main-container {
height: 70vh; height: 70vh;
border: 1px solid #E6E6E6; border: 1px solid #e6e6e6;
} }
.chart-class { .chart-class {
...@@ -318,5 +409,4 @@ export default { ...@@ -318,5 +409,4 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
</style> </style>
src/lang/en.js
This source diff could not be displayed because it is too large. You can view the blob instead.
src/lang/tw.js
This source diff could not be displayed because it is too large. You can view the blob instead.
src/lang/zh.js
...@@ -405,17 +405,22 @@ export default { ...@@ -405,17 +405,22 @@ export default {
cancel: '取消' cancel: '取消'
}, },
guide: { guide: {
description: '引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。本 Demo 是基于', description:
'引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。本 Demo 是基于',
button: '打开引导' button: '打开引导'
}, },
components: { components: {
documentation: '文档', documentation: '文档',
tinymceTips: '富文本是管理后台一个核心的功能，但同时又是一个有很多坑的地方。在选择富文本的过程中我也走了不少的弯路，市面上常见的富文本都基本用过了，最终权衡了一下选择了Tinymce。更详细的富文本比较和介绍见', tinymceTips:
dropzoneTips: '由于我司业务有特殊需求，而且要传七牛 所以没用第三方，选择了自己封装。代码非常的简单，具体代码你可以在这里看到 @/components/Dropzone', '富文本是管理后台一个核心的功能，但同时又是一个有很多坑的地方。在选择富文本的过程中我也走了不少的弯路，市面上常见的富文本都基本用过了，最终权衡了一下选择了Tinymce。更详细的富文本比较和介绍见',
dropzoneTips:
'由于我司业务有特殊需求，而且要传七牛 所以没用第三方，选择了自己封装。代码非常的简单，具体代码你可以在这里看到 @/components/Dropzone',
stickyTips: '当页面滚动到预设的位置会吸附在顶部', stickyTips: '当页面滚动到预设的位置会吸附在顶部',
backToTopTips1: '页面滚动到指定位置会在右下角出现返回顶部按钮', backToTopTips1: '页面滚动到指定位置会在右下角出现返回顶部按钮',
backToTopTips2: '可自定义按钮的样式、show/hide、出现的高度、返回的位置 如需文字提示，可在外部使用Element的el-tooltip元素', backToTopTips2:
imageUploadTips: '由于我在使用时它只有vue@1版本，而且和mockjs不兼容，所以自己改造了一下，如果大家要使用的话，优先还是使用官方版本。', '可自定义按钮的样式、show/hide、出现的高度、返回的位置 如需文字提示，可在外部使用Element的el-tooltip元素',
imageUploadTips:
'由于我在使用时它只有vue@1版本，而且和mockjs不兼容，所以自己改造了一下，如果大家要使用的话，优先还是使用官方版本。',
run_once: '运行一次', run_once: '运行一次',
continue: '继续', continue: '继续',
hour: '小时', hour: '小时',
...@@ -526,7 +531,8 @@ export default { ...@@ -526,7 +531,8 @@ export default {
create_dashboard: '创建仪表板', create_dashboard: '创建仪表板',
cannot_be_empty: 'SQL不能为空', cannot_be_empty: 'SQL不能为空',
data_reference: '数据参考', data_reference: '数据参考',
want_to_replace: '替换可能会影响自定义数据集、关联数据集、仪表板等，是否替换？', want_to_replace:
'替换可能会影响自定义数据集、关联数据集、仪表板等，是否替换？',
replace_the_data: '确定替换数据吗？', replace_the_data: '确定替换数据吗？',
append_successfully: '追加成功', append_successfully: '追加成功',
already_exists: '数据集名称已存在', already_exists: '数据集名称已存在',
...@@ -536,7 +542,8 @@ export default { ...@@ -536,7 +542,8 @@ export default {
left_to_edit: '选中左侧的数据表可进行编辑', left_to_edit: '选中左侧的数据表可进行编辑',
cannot_be_duplicate: '数据集名称不允许重复', cannot_be_duplicate: '数据集名称不允许重复',
set_saved_successfully: '数据集保存成功', set_saved_successfully: '数据集保存成功',
to_start_using: '浏览您的数据库，表和列的内容。 选择一个数据库即可开始使用。', to_start_using:
'浏览您的数据库，表和列的内容。 选择一个数据库即可开始使用。',
to_run_query: '点击运行查询', to_run_query: '点击运行查询',
the_running_results: '即可查看运行结果', the_running_results: '即可查看运行结果',
item: '项', item: '项',
...@@ -553,11 +560,13 @@ export default { ...@@ -553,11 +560,13 @@ export default {
head_position: '头部位置' head_position: '头部位置'
}, },
example: { example: {
warning: '创建和编辑页面是不能被 keep-alive 缓存的，因为keep-alive 的 include 目前不支持根据路由来缓存，所以目前都是基于 component name 来进行缓存的。如果你想类似的实现缓存效果，可以使用 localStorage 等浏览器缓存方案。或者不要使用 keep-alive 的 include，直接缓存所有页面。详情见' warning:
'创建和编辑页面是不能被 keep-alive 缓存的，因为keep-alive 的 include 目前不支持根据路由来缓存，所以目前都是基于 component name 来进行缓存的。如果你想类似的实现缓存效果，可以使用 localStorage 等浏览器缓存方案。或者不要使用 keep-alive 的 include，直接缓存所有页面。详情见'
}, },
errorLog: { errorLog: {
tips: '请点击右上角bug小图标', tips: '请点击右上角bug小图标',
description: '现在的管理后台基本都是spa的形式了，它增强了用户体验，但同时也会增加页面出问题的可能性，可能一个小小的疏忽就导致整个页面的死锁。好在 Vue 官网提供了一个方法来捕获处理异常，你可以在其中进行错误处理或者异常上报。', description:
'现在的管理后台基本都是spa的形式了，它增强了用户体验，但同时也会增加页面出问题的可能性，可能一个小小的疏忽就导致整个页面的死锁。好在 Vue 官网提供了一个方法来捕获处理异常，你可以在其中进行错误处理或者异常上报。',
documentation: '文档介绍' documentation: '文档介绍'
}, },
excel: { excel: {
...@@ -626,7 +635,8 @@ export default { ...@@ -626,7 +635,8 @@ export default {
valid: '有效', valid: '有效',
invalid: '无效', invalid: '无效',
expired: '已过期', expired: '已过期',
expired_msg: 'License已过期，过期时间：{0}，为了不影响企业版功能的使用，建议您更新License' expired_msg:
'License已过期，过期时间：{0}，为了不影响企业版功能的使用，建议您更新License'
}, },
member: { member: {
create: '添加成员', create: '添加成员',
...@@ -642,13 +652,15 @@ export default { ...@@ -642,13 +652,15 @@ export default {
special_characters_are_not_supported: '不支持特殊字符', special_characters_are_not_supported: '不支持特殊字符',
mobile_number_format_is_incorrect: '手机号码格式不正确', mobile_number_format_is_incorrect: '手机号码格式不正确',
email_format_is_incorrect: '邮箱格式不正确', email_format_is_incorrect: '邮箱格式不正确',
password_format_is_incorrect: '有效密码：8-30位，英文大小写字母+数字+特殊字符（可选）', password_format_is_incorrect:
'有效密码：8-30位，英文大小写字母+数字+特殊字符（可选）',
old_password: '旧密码', old_password: '旧密码',
new_password: '新密码', new_password: '新密码',
repeat_password: '确认密码', repeat_password: '确认密码',
inconsistent_passwords: '两次输入的密码不一致', inconsistent_passwords: '两次输入的密码不一致',
remove_member: '确定要移除该成员吗', remove_member: '确定要移除该成员吗',
org_remove_member: '将该用户从组织中移除，将同时移除该组织下所有工作空间的权限，确定要移除该成员吗？', org_remove_member:
'将该用户从组织中移除，将同时移除该组织下所有工作空间的权限，确定要移除该成员吗？',
input_id_or_email: '请输入用户 ID, 或者 用户邮箱', input_id_or_email: '请输入用户 ID, 或者 用户邮箱',
no_such_user: '无此用户信息, 请输入正确的用户 ID 或者 用户邮箱！' no_such_user: '无此用户信息, 请输入正确的用户 ID 或者 用户邮箱！'
}, },
...@@ -717,8 +729,10 @@ export default { ...@@ -717,8 +729,10 @@ export default {
input_username: '请输入用户名', input_username: '请输入用户名',
input_url_placeholder: '请输入LDAP地址 (如 ldap://localhost:389)', input_url_placeholder: '请输入LDAP地址 (如 ldap://localhost:389)',
input_ou_placeholder: '输入用户OU (使用|分隔各OU)', input_ou_placeholder: '输入用户OU (使用|分隔各OU)',
input_filter_placeholder: '输入过滤器 [可能的选项是cn或uid或sAMAccountName={0}, 如：(uid={0})]', input_filter_placeholder:
input_mapping_placeholder: '如：{"userName":"uid","nickName":"cn","email":"mail"}, username映射的选项可能是cn或uid或sAMAccountName', '输入过滤器 [可能的选项是cn或uid或sAMAccountName={0}, 如：(uid={0})]',
input_mapping_placeholder:
'如：{"userName":"uid","nickName":"cn","email":"mail"}, username映射的选项可能是cn或uid或sAMAccountName',
test_connect: '测试连接', test_connect: '测试连接',
test_login: '测试登录', test_login: '测试登录',
edit: '编辑', edit: '编辑',
...@@ -762,8 +776,10 @@ export default { ...@@ -762,8 +776,10 @@ export default {
role_exist: '添加失败，该角色已存在', role_exist: '添加失败，该角色已存在',
add_api_role: '添加API角色', add_api_role: '添加API角色',
can_not_move: '不可移除，至少保留一位管理员', can_not_move: '不可移除，至少保留一位管理员',
manage_can_not_move: '管理员是系统预置角色，默认拥有系统管理全部权限，无法删除', manage_can_not_move:
manage_can_not_update: '管理员是系统预置角色，默认拥有系统管理全部权限，无法编辑', '管理员是系统预置角色，默认拥有系统管理全部权限，无法删除',
manage_can_not_update:
'管理员是系统预置角色，默认拥有系统管理全部权限，无法编辑',
role_description: '角色描述', role_description: '角色描述',
editer_role: '编辑角色', editer_role: '编辑角色',
add_role: '添加角色', add_role: '添加角色',
...@@ -801,7 +817,8 @@ export default { ...@@ -801,7 +817,8 @@ export default {
input_name: '请输入组织名称', input_name: '请输入组织名称',
select_organization: '请选择组织', select_organization: '请选择组织',
search_by_name: '根据名称搜索', search_by_name: '根据名称搜索',
special_characters_are_not_supported: '格式错误(不支持特殊字符，且不能以\'-\'开头结尾)', special_characters_are_not_supported:
"格式错误(不支持特殊字符，且不能以'-'开头结尾)",
select: '选择组织', select: '选择组织',
member: '成员', member: '成员',
organization: '组织', organization: '组织',
...@@ -891,13 +908,15 @@ export default { ...@@ -891,13 +908,15 @@ export default {
to_enable_tsl: '如果SMTP端口是587，通常需要启用TSL', to_enable_tsl: '如果SMTP端口是587，通常需要启用TSL',
to_enable_ssl: '如果SMTP端口是465，通常需要启用SSL', to_enable_ssl: '如果SMTP端口是465，通常需要启用SSL',
added_successfully: '添加成功', added_successfully: '添加成功',
text_link_etc: '适用场景：行动号召、选中态、信息高亮、常规提示信息、文字链接等', text_link_etc:
'适用场景：行动号召、选中态、信息高亮、常规提示信息、文字链接等',
prompt_and_icon: '适用场景：成功状态提示及图标', prompt_and_icon: '适用场景：成功状态提示及图标',
prompt_and_icon_danger: '适用场景：警示状态提示及图标', prompt_and_icon_danger: '适用场景：警示状态提示及图标',
icon_danger_button: '适用场景：错误状态提示及图标、危险按钮', icon_danger_button: '适用场景：错误状态提示及图标、危险按钮',
first_level_icon: '适用场景：一级标题、一级正文、重要信息展示、一级图标', first_level_icon: '适用场景：一级标题、一级正文、重要信息展示、一级图标',
copy_secondary_icon: '适用场景：二级标题、二级文案、二级图标', copy_secondary_icon: '适用场景：二级标题、二级文案、二级图标',
radio_checkbox_unchecked: '适用场景：输入框引导语、辅助文案、提示文案、三级图标、radio、checkbox未选中态', radio_checkbox_unchecked:
'适用场景：输入框引导语、辅助文案、提示文案、三级图标、radio、checkbox未选中态',
button_background_color: '适用场景：禁用文案、禁用图标、禁用按钮背景色', button_background_color: '适用场景：禁用文案、禁用图标、禁用按钮背景色',
scenario_component_stroking: '适用场景：组件描边', scenario_component_stroking: '适用场景：组件描边',
background_header_background: '适用场景：页面背景、表头背景', background_header_background: '适用场景：页面背景、表头背景',
...@@ -1376,7 +1395,8 @@ export default { ...@@ -1376,7 +1395,8 @@ export default {
chart_building: '点击建筑', chart_building: '点击建筑',
chart_3d_column_chart_map: '3D柱图', chart_3d_column_chart_map: '3D柱图',
table_pivot_row: '数据行', table_pivot_row: '数据行',
field_error_tips: '该字段所对应的数据集原始字段发生变更（包括维度、指标，字段类型，字段被删除等），建议重新编辑', field_error_tips:
'该字段所对应的数据集原始字段发生变更（包括维度、指标，字段类型，字段被删除等），建议重新编辑',
mark_field_error: '数据集变更，当前字段不存在，请重新选择', mark_field_error: '数据集变更，当前字段不存在，请重新选择',
table_border_color: '边框颜色', table_border_color: '边框颜色',
table_header_align: '表头对齐方式', table_header_align: '表头对齐方式',
...@@ -1504,15 +1524,20 @@ export default { ...@@ -1504,15 +1524,20 @@ export default {
break_line: '保持为空', break_line: '保持为空',
set_zero: '置为0', set_zero: '置为0',
ignore_data: '隐藏空值', ignore_data: '隐藏空值',
sub_dimension_tip: '该字段为必填项，且不应使用类别轴中的字段，若无需该字段，请选择基础图表进行展示，否则展示效果不理想。', sub_dimension_tip:
'该字段为必填项，且不应使用类别轴中的字段，若无需该字段，请选择基础图表进行展示，否则展示效果不理想。',
drill_dimension_tip: '钻取字段仅支持数据集中的字段', drill_dimension_tip: '钻取字段仅支持数据集中的字段',
table_scroll_tip: '明细表仅在分页模式为"下拉"时生效。', table_scroll_tip: '明细表仅在分页模式为"下拉"时生效。',
table_threshold_tip: '提示：请勿重复选择字段，若同一字段重复配置，则只有最后的字段配置生效', table_threshold_tip:
table_column_width_tip: '列宽并非任何时候都能生效。<br/>容器宽度优先级高于列宽，即(表格容器宽度 / 列数 > 指定列宽)，则列宽优先取(容器宽度 / 列数)。', '提示：请勿重复选择字段，若同一字段重复配置，则只有最后的字段配置生效',
reference_field_tip: '引用字段以 "[" 开始， "]" 结束。<br/>请勿修改引用内容，否则将引用失败。<br/>若输入与引用字段相同格式的内容，将被当作引用字段处理。', table_column_width_tip:
'列宽并非任何时候都能生效。<br/>容器宽度优先级高于列宽，即(表格容器宽度 / 列数 > 指定列宽)，则列宽优先取(容器宽度 / 列数)。',
reference_field_tip:
'引用字段以 "[" 开始， "]" 结束。<br/>请勿修改引用内容，否则将引用失败。<br/>若输入与引用字段相同格式的内容，将被当作引用字段处理。',
scatter_tip: '该指标生效时，样式大小中的气泡大小属性将失效', scatter_tip: '该指标生效时，样式大小中的气泡大小属性将失效',
place_name_mapping: '地名映射', place_name_mapping: '地名映射',
axis_tip: '最小值、最大值、间隔均为数值类型；若不填，则该项视为自动。<br/>请确保填写数值能正确计算，否则将无法正常显示轴值。', axis_tip:
'最小值、最大值、间隔均为数值类型；若不填，则该项视为自动。<br/>请确保填写数值能正确计算，否则将无法正常显示轴值。',
format_tip: `模板变量有 {a}, {b}，{c}，{d}，分别表示系列名，数据名，数据值等。<br> format_tip: `模板变量有 {a}, {b}，{c}，{d}，分别表示系列名，数据名，数据值等。<br>
在 触发位置 为 '坐标轴' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。<br> 在 触发位置 为 '坐标轴' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。<br>
不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：<br><br> 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：<br><br>
...@@ -1580,10 +1605,12 @@ export default { ...@@ -1580,10 +1605,12 @@ export default {
sql_result: '运行结果', sql_result: '运行结果',
parse_filed: '解析字段', parse_filed: '解析字段',
field_rename: '字段重命名', field_rename: '字段重命名',
params_work: '仅编辑时生效：参数值仅在数据集编辑时生效；全局生效：在数据集查看、预览、以及用到数据集的视图中均生效。', params_work:
'仅编辑时生效：参数值仅在数据集编辑时生效；全局生效：在数据集查看、预览、以及用到数据集的视图中均生效。',
select_year: '选择年', select_year: '选择年',
sql_variable_limit_1: '1、SQL 变量只能在 WHERE 条件中使用', sql_variable_limit_1: '1、SQL 变量只能在 WHERE 条件中使用',
sql_variable_limit_2: '2、示例：select * from table_name where column_name1=\'${param_name1}\' and column_name2 in ${param_name2}', sql_variable_limit_2:
"2、示例：select * from table_name where column_name1='${param_name1}' and column_name2 in ${param_name2}",
select_month: '选择月', select_month: '选择月',
select_date: '选择日期', select_date: '选择日期',
select_time: '选择时间', select_time: '选择时间',
...@@ -1604,7 +1631,8 @@ export default { ...@@ -1604,7 +1631,8 @@ export default {
rename: '重命名', rename: '重命名',
tips: '提示', tips: '提示',
confirm_delete: '确认删除', confirm_delete: '确认删除',
confirm_delete_msg: '数据集删除，会影响与其相关的自定义数据集、关联数据集、仪表板，确认删除？', confirm_delete_msg:
'数据集删除，会影响与其相关的自定义数据集、关联数据集、仪表板，确认删除？',
delete_success: '删除成功', delete_success: '删除成功',
confirm: '确认', confirm: '确认',
cancel: '取消', cancel: '取消',
...@@ -1709,7 +1737,8 @@ export default { ...@@ -1709,7 +1737,8 @@ export default {
edit_field: '编辑字段', edit_field: '编辑字段',
preview_100_data: '显示前100行数据', preview_100_data: '显示前100行数据',
invalid_table_check: '非直连数据集请先完成数据同步', invalid_table_check: '非直连数据集请先完成数据同步',
parse_error: 'Excel解析失败，请检查格式、字段等信息。具体参考：https://dataease.io/docs/user_manual/dataset_configuration/dataset_Excel', parse_error:
'Excel解析失败，请检查格式、字段等信息。具体参考：https://dataease.io/docs/user_manual/dataset_configuration/dataset_Excel',
origin_field_type: '字段原始类型', origin_field_type: '字段原始类型',
edit_excel_table: '编辑Excel数据集', edit_excel_table: '编辑Excel数据集',
edit_excel: '编辑Excel', edit_excel: '编辑Excel',
...@@ -1739,7 +1768,8 @@ export default { ...@@ -1739,7 +1768,8 @@ export default {
pending: '暂停', pending: '暂停',
confirm_exec: '手动触发执行？', confirm_exec: '手动触发执行？',
change_success: '状态切换成功', change_success: '状态切换成功',
excel_replace_msg: '可能会影响自定义数据集、关联数据集、仪表板等，确认替换？', excel_replace_msg:
'可能会影响自定义数据集、关联数据集、仪表板等，确认替换？',
effect_ext_field: '会影响计算字段' effect_ext_field: '会影响计算字段'
}, },
field_group_type: '分类', field_group_type: '分类',
...@@ -1863,7 +1893,8 @@ export default { ...@@ -1863,7 +1893,8 @@ export default {
data_source_table: '数据源表', data_source_table: '数据源表',
auth_method: '认证方式', auth_method: '认证方式',
passwd: '用户名密码', passwd: '用户名密码',
kerbers_info: '请确保 krb5.Conf、Keytab Key，已经添加到路径：/opt/dataease/conf', kerbers_info:
'请确保 krb5.Conf、Keytab Key，已经添加到路径：/opt/dataease/conf',
client_principal: 'Client Principal', client_principal: 'Client Principal',
keytab_Key_path: 'Keytab Key Path', keytab_Key_path: 'Keytab Key Path',
datasource: '数据源', datasource: '数据源',
...@@ -1882,7 +1913,8 @@ export default { ...@@ -1882,7 +1913,8 @@ export default {
http_port: 'Http Port', http_port: 'Http Port',
port: '端口', port: '端口',
datasource_url: '地址', datasource_url: '地址',
please_input_datasource_url: '请输入 Elasticsearch 地址，如: http://es_host:es_port', please_input_datasource_url:
'请输入 Elasticsearch 地址，如: http://es_host:es_port',
please_input_data_base: '请输入数据库名称', please_input_data_base: '请输入数据库名称',
please_select_oracle_type: '选择连接类型', please_select_oracle_type: '选择连接类型',
please_input_user_name: '请输入用户名', please_input_user_name: '请输入用户名',
...@@ -1910,7 +1942,8 @@ export default { ...@@ -1910,7 +1942,8 @@ export default {
please_choose_schema: '请选择数据库 Schema', please_choose_schema: '请选择数据库 Schema',
please_choose_charset: '请选择数据库字符集', please_choose_charset: '请选择数据库字符集',
please_choose_targetCharset: '请选择目标字符集', please_choose_targetCharset: '请选择目标字符集',
edit_datasource_msg: '修改数据源信息，可能会导致该数据源下的数据集不可用，确认修改？', edit_datasource_msg:
'修改数据源信息，可能会导致该数据源下的数据集不可用，确认修改？',
repeat_datasource_msg: '已经存在相同配置的数据源信息, ', repeat_datasource_msg: '已经存在相同配置的数据源信息, ',
confirm_save: '确认保存?', confirm_save: '确认保存?',
in_valid: '无效数据源', in_valid: '无效数据源',
...@@ -2004,8 +2037,10 @@ export default { ...@@ -2004,8 +2037,10 @@ export default {
other: '其他', other: '其他',
this_data_source: '确定删除该数据源吗？', this_data_source: '确定删除该数据源吗？',
delete_this_dataset: '确定删除该数据集吗？', delete_this_dataset: '确定删除该数据集吗？',
cannot_be_deleted_dataset: '该数据集存在如下血缘关系，删除会造成相关仪表板的视图失效，确定删除？', cannot_be_deleted_dataset:
cannot_be_deleted_datasource: '该数据源存在如下血缘关系，删除会造成相关仪表板的视图失效，确定删除？', '该数据集存在如下血缘关系，删除会造成相关仪表板的视图失效，确定删除？',
cannot_be_deleted_datasource:
'该数据源存在如下血缘关系，删除会造成相关仪表板的视图失效，确定删除？',
edit_folder: '编辑文件夹', edit_folder: '编辑文件夹',
click_to_check: '点击去查看血缘关系', click_to_check: '点击去查看血缘关系',
please_select: '请选择', please_select: '请选择',
...@@ -2060,12 +2095,15 @@ export default { ...@@ -2060,12 +2095,15 @@ export default {
image_size_tips: '图片请不要大于15M', image_size_tips: '图片请不要大于15M',
image_add_tips: '只能插入图片', image_add_tips: '只能插入图片',
watermark: '水印', watermark: '水印',
panel_get_data_error: '获取仪表板信息失败，仪表板可能已经被删除，请检查仪表板状态', panel_get_data_error:
'获取仪表板信息失败，仪表板可能已经被删除，请检查仪表板状态',
panel_no_save_tips: '存在未保存的仪表板', panel_no_save_tips: '存在未保存的仪表板',
panel_cache_use_tips: '检查到上次有仪表板未能正常保存，是否使用上次未保存的仪表板？', panel_cache_use_tips:
'检查到上次有仪表板未能正常保存，是否使用上次未保存的仪表板？',
template_name_tips: '仪表板名称必填', template_name_tips: '仪表板名称必填',
panel_background_item: '自定义仪表板背景', panel_background_item: '自定义仪表板背景',
panel_background_image_tips: '当前支持.jpeg,.jpg,.png,.gif文件,大小不要超过15M', panel_background_image_tips:
'当前支持.jpeg,.jpg,.png,.gif文件,大小不要超过15M',
reUpload: '重新上传', reUpload: '重新上传',
create_by: '创建人', create_by: '创建人',
create_time: '创建时间', create_time: '创建时间',
...@@ -2078,7 +2116,8 @@ export default { ...@@ -2078,7 +2116,8 @@ export default {
template_preview: '预览模板', template_preview: '预览模板',
apply: '应用', apply: '应用',
apply_this_template: '应用此模板', apply_this_template: '应用此模板',
market_network_tips: '查看模板市场模板需要服务器与模板市场(https://dataease.io/templates)连通，请检查网络...', market_network_tips:
'查看模板市场模板需要服务器与模板市场(https://dataease.io/templates)连通，请检查网络...',
enter_name_tips: '请输入仪表板名称', enter_name_tips: '请输入仪表板名称',
name: '名称', name: '名称',
apply_template: '应用模板', apply_template: '应用模板',
...@@ -2095,7 +2134,8 @@ export default { ...@@ -2095,7 +2134,8 @@ export default {
data_format: '日期格式', data_format: '日期格式',
border_color: '边框颜色', border_color: '边框颜色',
theme_change_warn: '主题更换', theme_change_warn: '主题更换',
theme_change_tips: '更换主题将会覆盖视图相关主题属性建议提前备份,是否继续更换？', theme_change_tips:
'更换主题将会覆盖视图相关主题属性建议提前备份,是否继续更换？',
theme_color_change_warn: '主题色更换', theme_color_change_warn: '主题色更换',
theme_color_change_tips: '主题色变更将会覆盖原有视图属性', theme_color_change_tips: '主题色变更将会覆盖原有视图属性',
theme_color: '主题色', theme_color: '主题色',
...@@ -2358,7 +2398,8 @@ export default { ...@@ -2358,7 +2398,8 @@ export default {
link_add_tips_pre: '请点击上方', link_add_tips_pre: '请点击上方',
web_add_tips_suf: '添加网页信息...', web_add_tips_suf: '添加网页信息...',
panel_view_result_show: '视图结果', panel_view_result_show: '视图结果',
panel_view_result_tips: '选择仪表板会覆盖视图的结果展示数量，取值范围1~10000', panel_view_result_tips:
'选择仪表板会覆盖视图的结果展示数量，取值范围1~10000',
timeout_refresh: '请求超时，稍后刷新...', timeout_refresh: '请求超时，稍后刷新...',
mobile_layout: '移动端布局', mobile_layout: '移动端布局',
component_hidden: '隐藏的组件', component_hidden: '隐藏的组件',
...@@ -2490,7 +2531,8 @@ export default { ...@@ -2490,7 +2531,8 @@ export default {
select_all: '全 选', select_all: '全 选',
added: '已添加', added: '已添加',
manual_input: '手工输入', manual_input: '手工输入',
please_fill: '请一行填一个，最多添加500个,识别录入时会自动过滤重复的选项和已经添加过的选项', please_fill:
'请一行填一个，最多添加500个,识别录入时会自动过滤重复的选项和已经添加过的选项',
close: '关 闭', close: '关 闭',
add: '添 加', add: '添 加',
sure: '确 定' sure: '确 定'
...@@ -2680,7 +2722,6 @@ export default { ...@@ -2680,7 +2722,6 @@ export default {
select_openMode: '请选择展示风格', select_openMode: '请选择展示风格',
select_time_format: '请选择时间格式', select_time_format: '请选择时间格式',
select_date_format: '请选择日期格式' select_date_format: '请选择日期格式'
}, },
xpacktask: { xpacktask: {
add: '新增任务', add: '新增任务',
...@@ -2707,7 +2748,6 @@ export default { ...@@ -2707,7 +2748,6 @@ export default {
sure_batch_delete: '确定批量删除任务吗？', sure_batch_delete: '确定批量删除任务吗？',
pixel_error: '分辨率支持{800 - 10000} * {500 - 6250}', pixel_error: '分辨率支持{800 - 10000} * {500 - 6250}',
next_exec_time: '下次执行时间' next_exec_time: '下次执行时间'
}, },
emailtask: { emailtask: {
week_mon: '周一', week_mon: '周一',
...@@ -2805,7 +2845,8 @@ export default { ...@@ -2805,7 +2845,8 @@ export default {
enterprise_edition: '企业版', enterprise_edition: '企业版',
contact_us: '联系我们', contact_us: '联系我们',
demo_video_hint: '如何3分钟制作一个DataEase数据看板、并分享给他人', demo_video_hint: '如何3分钟制作一个DataEase数据看板、并分享给他人',
online_document_hint: '涵盖DataEase的安装步骤、用户手册、使用教程、常见问题的解决方案、以及二次开发等', online_document_hint:
'涵盖DataEase的安装步骤、用户手册、使用教程、常见问题的解决方案、以及二次开发等',
teaching_video_bottom_hint: '更多视频资料', teaching_video_bottom_hint: '更多视频资料',
enterprise_edition_hint1: '提供企业级应用场景X-Pack增强包', enterprise_edition_hint1: '提供企业级应用场景X-Pack增强包',
enterprise_edition_hint2: '提供高等级原厂服务支持', enterprise_edition_hint2: '提供高等级原厂服务支持',
...@@ -2862,7 +2903,8 @@ export default { ...@@ -2862,7 +2903,8 @@ export default {
fileplaceholder: '请上传json格式坐标文件', fileplaceholder: '请上传json格式坐标文件',
delete_confirm: '及子节点都会被删除，确认执行？', delete_confirm: '及子节点都会被删除，确认执行？',
cur_node: '当前节点', cur_node: '当前节点',
prohibit_prompts: '000、156分别是地球村和中华人民共和国区域代码前缀，禁止移除，请使用其他代码前缀！' prohibit_prompts:
'000、156分别是地球村和中华人民共和国区域代码前缀，禁止移除，请使用其他代码前缀！'
}, },
map_mapping: { map_mapping: {
map: '图形', map: '图形',
...@@ -2870,8 +2912,8 @@ export default { ...@@ -2870,8 +2912,8 @@ export default {
empty: '无数据', empty: '无数据',
please_select_map: '请先选择地图范围' please_select_map: '请先选择地图范围'
}, },
'I18N_USER_TEMPLATE_ERROR': '模版错误', I18N_USER_TEMPLATE_ERROR: '模版错误',
'i18n_max_user_import_size': '文件最大不能超过10M', i18n_max_user_import_size: '文件最大不能超过10M',
app_template: { app_template: {
move: '移动', move: '移动',
move_item: '移动应用', move_item: '移动应用',
...@@ -2899,7 +2941,8 @@ export default { ...@@ -2899,7 +2941,8 @@ export default {
panel: '仪表板', panel: '仪表板',
log_delete_tips: '确定删除该条应用记录吗？', log_delete_tips: '确定删除该条应用记录吗？',
log_resource_delete_tips: '删除相关资源（删除后不可恢复）', log_resource_delete_tips: '删除相关资源（删除后不可恢复）',
file_error_tips: '未找到相关数据文件，当前文件可能不是DataEase应用文件，或者文件已经损坏', file_error_tips:
'未找到相关数据文件，当前文件可能不是DataEase应用文件，或者文件已经损坏',
app_export: '应用导出', app_export: '应用导出',
app_version: '应用版本', app_version: '应用版本',
program_version: 'DataEase最低版本', program_version: 'DataEase最低版本',
...@@ -2939,7 +2982,15 @@ export default { ...@@ -2939,7 +2982,15 @@ export default {
confirm: '是否强行登录？', confirm: '是否强行登录？',
forced_offline: '`当前账号在客户端【${ip}】登录，您已被挤下线！`' forced_offline: '`当前账号在客户端【${ip}】登录，您已被挤下线！`'
}, },
map: { amap: {
layer: '区块地图' layer: '区块地图',
layer_type: '类型',
layer_path: '路径',
layer_name: '名称',
theme: '主题',
light: '浅色',
dark: '深色',
hazardLevel: '等级',
center: '中心点'
} }
} }
src/main.js
import Vue from 'vue' import Vue from "vue";
import Cookies from 'js-cookie' import Cookies from "js-cookie";
import '@/styles/index.scss' // global css import "@/styles/index.scss"; // global css
import ElementUI from 'element-ui' import ElementUI from "element-ui";
import Vuetify from 'vuetify' import Vuetify from "vuetify";
import Fit2CloudUI from 'fit2cloud-ui' import Fit2CloudUI from "fit2cloud-ui";
import i18n from './lang' // internationalization import i18n from "./lang"; // internationalization
import App from './App' import App from "./App";
import store from './store' import store from "./store";
import router from './router' import router from "./router";
import message from './utils/message' import message from "./utils/message";
import '@/icons' // icon import "@/icons"; // icon
import '@/permission' // permission control import "@/permission"; // permission control
import api from '@/api/index.js' import api from "@/api/index.js";
import filter from '@/filter/filter' import filter from "@/filter/filter";
import directives from './directive' import directives from "./directive";
import VueClipboard from 'vue-clipboard2' import VueClipboard from "vue-clipboard2";
import widgets from '@/components/widget' import widgets from "@/components/widget";
import Treeselect from '@riophae/vue-treeselect' import Treeselect from "@riophae/vue-treeselect";
import '@riophae/vue-treeselect/dist/vue-treeselect.css' import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import './utils/dialog' import "./utils/dialog";
import DeComplexInput from '@/components/business/conditionTable/DeComplexInput' import DeComplexInput from "@/components/business/conditionTable/DeComplexInput";
import DeComplexSelect from '@/components/business/conditionTable/DeComplexSelect' import DeComplexSelect from "@/components/business/conditionTable/DeComplexSelect";
import DeViewSelect from '@/components/deViewSelect' import DeViewSelect from "@/components/deViewSelect";
import RemarkEditor from '@/views/chart/components/componentStyle/dialog/RemarkEditor' import RemarkEditor from "@/views/chart/components/componentStyle/dialog/RemarkEditor";
import TitleRemark from '@/views/chart/view/TitleRemark' import TitleRemark from "@/views/chart/view/TitleRemark";
import '@/components/canvas/customComponent' // 注册自定义组件 import "@/components/canvas/customComponent"; // 注册自定义组件
import deBtn from '@/components/deCustomCm/DeBtn.vue' import deBtn from "@/components/deCustomCm/DeBtn.vue";
import '@/utils/DateUtil' import "@/utils/DateUtil";
import draggable from 'vuedraggable' import draggable from "vuedraggable";
import deWebsocket from '@/websocket' import deWebsocket from "@/websocket";
import { GaodeMap } from '@antv/l7-maps' import { GaodeMap } from "@antv/l7-maps";
import * as echarts from 'echarts' import * as echarts from "echarts";
import UmyUi from 'umy-ui' import UmyUi from "umy-ui";
// 全屏插件 // 全屏插件
import fullscreen from 'vue-fullscreen' import fullscreen from "vue-fullscreen";
import VueFriendlyIframe from 'vue-friendly-iframe' import VueFriendlyIframe from "vue-friendly-iframe";
import vueToPdf from 'vue-to-pdf' import vueToPdf from "vue-to-pdf";
import VueVideoPlayer from 'vue-video-player' import VueVideoPlayer from "vue-video-player";
import 'video.js/dist/video-js.css' import "video.js/dist/video-js.css";
import '@antv/s2/dist/style.min.css' import "@antv/s2/dist/style.min.css";
import VueAMap from "vue-amap";
// 控制标签宽高成比例的指令 // 控制标签宽高成比例的指令
import proportion from 'vue-proportion-directive' import proportion from "vue-proportion-directive";
import xss from 'xss' import xss from "xss";
// 定义全局XSS解决方法 // 定义全局XSS解决方法
Object.defineProperty(Vue.prototype, '$xss', { Object.defineProperty(Vue.prototype, "$xss", {
value: xss value: xss,
}) });
window._AMapSecurityConfig = {
Vue.config.productionTip = false securityJsCode: "1b336198f587a2a6e3a723f72db8358f",
Vue.use(VueClipboard) };
Vue.use(widgets) Vue.config.productionTip = false;
Vue.component('Draggable', draggable) Vue.use(VueClipboard);
Vue.prototype.$api = api Vue.use(widgets);
Vue.component("Draggable", draggable);
Vue.prototype.$echarts = echarts Vue.prototype.$api = api;
Vue.prototype.$gaodeMap = GaodeMap
Vue.prototype.$echarts = echarts;
Vue.use(UmyUi) Vue.prototype.$gaodeMap = GaodeMap;
Vue.use(fullscreen) Vue.use(UmyUi);
Vue.use(VueFriendlyIframe) Vue.use(fullscreen);
Vue.use(Vuetify)
Vue.use(VueFriendlyIframe);
Vue.use(Vuetify);
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: "9e49146176f7e9153ffe8a982638fae6",
plugin: [
"AMap.Scale",
"AMap.OverView",
"AMap.ToolBar",
"AMap.MapType",
"AMap.PlaceSearch",
"AMap.Geolocation",
"AMap.Geocoder",
"AMap.DistrictSearch",
"AMap.Polygon",
],
v: "2.0",
});
// import TEditor from '@/components/Tinymce/index.vue' // import TEditor from '@/components/Tinymce/index.vue'
// Vue.component('TEditor', TEditor) // Vue.component('TEditor', TEditor)
...@@ -76,80 +97,83 @@ Vue.use(Vuetify) ...@@ -76,80 +97,83 @@ Vue.use(Vuetify)
* Currently MockJs will be used in the production environment, * Currently MockJs will be used in the production environment,
* please remove it before going online ! ! ! * please remove it before going online ! ! !
*/ */
if (process.env.NODE_ENV === 'production') { if (process.env.NODE_ENV === "production") {
// const { mockXHR } = require('../mock') // const { mockXHR } = require('../mock')
// mockXHR() // mockXHR()
} }
// set ElementUI lang to EN // set ElementUI lang to EN
// Vue.use(ElementUI, { locale }) // Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明 // 如果想要中文版 element-ui，按如下方式声明
ElementUI.Dialog.props.closeOnClickModal.default = false ElementUI.Dialog.props.closeOnClickModal.default = false;
ElementUI.Dialog.props.closeOnPressEscape.default = false ElementUI.Dialog.props.closeOnPressEscape.default = false;
Vue.use(ElementUI, { Vue.use(ElementUI, {
size: Cookies.get('size') || 'medium', // set element-ui default size size: Cookies.get("size") || "medium", // set element-ui default size
i18n: (key, value) => i18n.t(key, value) i18n: (key, value) => i18n.t(key, value),
}) });
Vue.use(Fit2CloudUI, { Vue.use(Fit2CloudUI, {
i18n: (key, value) => i18n.t(key, value) i18n: (key, value) => i18n.t(key, value),
}) });
// Vue.use(VueAxios, axios) // Vue.use(VueAxios, axios)
Vue.use(filter) Vue.use(filter);
Vue.use(directives) Vue.use(directives);
Vue.use(message) Vue.use(message);
Vue.component('Treeselect', Treeselect) Vue.component("Treeselect", Treeselect);
Vue.component('DeComplexInput', DeComplexInput) Vue.component("DeComplexInput", DeComplexInput);
Vue.component('DeComplexSelect', DeComplexSelect) Vue.component("DeComplexSelect", DeComplexSelect);
Vue.component('DeViewSelect', DeViewSelect) Vue.component("DeViewSelect", DeViewSelect);
Vue.component('RemarkEditor', RemarkEditor) Vue.component("RemarkEditor", RemarkEditor);
Vue.component('TitleRemark', TitleRemark) Vue.component("TitleRemark", TitleRemark);
Vue.component('DeBtn', deBtn) Vue.component("DeBtn", deBtn);
Vue.config.productionTip = false Vue.config.productionTip = false;
Vue.use(vueToPdf) Vue.use(vueToPdf);
Vue.use(VueVideoPlayer) Vue.use(VueVideoPlayer);
Vue.use(proportion) Vue.use(proportion);
Vue.prototype.hasDataPermission = function(pTarget, pSource) { Vue.prototype.hasDataPermission = function (pTarget, pSource) {
if (this.$store.state.user.user.isAdmin || pSource === 'ignore') { if (this.$store.state.user.user.isAdmin || pSource === "ignore") {
return true return true;
} }
if (pSource && pTarget) { if (pSource && pTarget) {
return pSource.indexOf(pTarget) > -1 return pSource.indexOf(pTarget) > -1;
} }
return false return false;
} };
Vue.prototype.checkPermission = function(pers) { Vue.prototype.checkPermission = function (pers) {
const permissions = store.getters.permissions const permissions = store.getters.permissions;
const hasPermission = pers.every(needP => { const hasPermission = pers.every((needP) => {
const result = permissions.includes(needP) const result = permissions.includes(needP);
return result return result;
}) });
return hasPermission return hasPermission;
} };
Vue.use(deWebsocket) Vue.use(deWebsocket);
Vue.prototype.$currentHttpRequestList = new Map() Vue.prototype.$currentHttpRequestList = new Map();
Vue.prototype.$cancelRequest = function(cancelkey) { Vue.prototype.$cancelRequest = function (cancelkey) {
if (cancelkey) { if (cancelkey) {
if (cancelkey.indexOf('/**') > -1) { if (cancelkey.indexOf("/**") > -1) {
Vue.prototype.$currentHttpRequestList.forEach((item, key) => { Vue.prototype.$currentHttpRequestList.forEach((item, key) => {
key.indexOf(cancelkey.split('/**')[0]) > -1 && item('Operation canceled by the user.') key.indexOf(cancelkey.split("/**")[0]) > -1 &&
}) item("Operation canceled by the user.");
});
} else { } else {
Vue.prototype.$currentHttpRequestList.get(cancelkey) && Vue.prototype.$currentHttpRequestList.get(cancelkey)('Operation canceled by the user.') Vue.prototype.$currentHttpRequestList.get(cancelkey) &&
Vue.prototype.$currentHttpRequestList.get(cancelkey)(
"Operation canceled by the user."
);
} }
} }
} };
new Vue({ new Vue({
router, router,
store, store,
i18n, i18n,
render: h => h(App) render: (h) => h(App),
}).$mount('#app') }).$mount("#app");
src/views/chart/chart/util.js
...@@ -3111,25 +3111,19 @@ export const TYPE_CONFIGS = [ ...@@ -3111,25 +3111,19 @@ export const TYPE_CONFIGS = [
{ {
render: "aMap", render: "aMap",
category: "chart.chart_type_space", category: "chart.chart_type_space",
value: "map", value: "amap",
title: "map.layer", title: "amap.layer",
icon: "map_mini", icon: "map_mini",
properties: [ properties: [
"color-selector", "color-selector",
"label-selector", // "label-selector",
"tooltip-selector", // "tooltip-selector",
"title-selector", "title-selector",
"suspension-selector", // "suspension-selector",
"condition-style-selector", "condition-style-selector",
], ],
propertyInner: { propertyInner: {
"color-selector": [ "color-selector": ["theme"],
"value",
"custom",
"alpha",
"area-border-color",
"gradient-color",
],
"label-selector": [ "label-selector": [
"show", "show",
"fontSize", "fontSize",
......
src/views/chart/components/AMap.vue
<template> <template>
<div>{{ mapData }}</div> <el-amap
:vid="mapId"
default-cursor="default"
/>
</template> </template>
<script> <script>
import { lazyAMapApiLoaderInstance } from 'vue-amap'
import { uuid } from 'vue-uuid'
import { baseAMapData, hazardLevel } from './aMap/aMap'
export default { export default {
props: { props: {
mapData: { chart: {
type: Object, type: Object,
required: true required: true
} }
}, },
data() { data() {
return {} return {
map: {},
AMap: {},
layers: [],
allParkList: [],
center: [116.400586, 39.903475],
mapStyle: 'amap://styles/6ee1c8252c951da095d5e4eaf9c65a1f',
zoom: 14,
mapId: uuid.v1()
}
}, },
watch: { watch: {
mapData: { chart: {
handler(newVal, oldVal) { handler(newVal, oldVal) {
console.log(newVal, oldVal) // this.drawLayer()
this.initMap()
}, },
deep: true deep: true
} }
}, },
destroyed() { mounted() {
console.log(66666) this.initMap()
},
destroyed() {},
methods: {
initMap() {
const _this = this
lazyAMapApiLoaderInstance.load().then(() => {
const colorAttr = JSON.parse(this.chart.customAttr)
this.map = new AMap.Map(_this.mapId, {
center: this.center, // 地图中心点的经纬度位置配置
zoom: this.zoom, // 地图缩放比例配置
mapStyle: colorAttr?.color?.theme === 'dark' ? this.mapStyle : ''
})
this.drawLayer()
})
},
renderMarker(color) {
return `<div style='width: 30px;height: 30px;overflow: hidden;'>
<img style='width: 30px;filter: drop-shadow(${color} 100px 0); transform: translateX(-100px);' src='/static/svg/marker.svg'></img>
</div>`
},
drawLayer() {
const data = baseAMapData(this.chart)
this.allParkList = JSON.parse(JSON.stringify(data))
this.layers = []
data.map((item) => {
const color = hazardLevel[item.hazardLevel]?.color
let layer = null
if (item.areaType === '1') {
layer = new AMap.Marker({
position: new AMap.LngLat(item.longitude, item.latitude),
content: this.renderMarker(color),
offset: new AMap.Pixel(-15, -30),
zIndex: 53,
extData: {
...item
}
})
} else if (item.areaType === '2') {
layer = new AMap.Polygon({
path: JSON.parse(item.path),
fillColor: color,
strokeColor: 'transparent',
fillOpacity: 0.6,
zIndex: 51,
extData: {
...item
}
})
} else if (item.areaType === '3') {
layer = new AMap.Polyline({
path: JSON.parse(item.path),
borderWeight: 3,
strokeColor: color,
strokeOpacity: 1,
strokeStyle: 'solid',
zIndex: 52,
extData: {
...item
}
})
}
if (layer) {
this.layers.push(layer)
const extData = layer.getExtData()
layer.on('click', (obj) => {
this.parkClick(extData)
})
}
})
this.map.add(this.layers)
this.map.setFitView()
},
parkClick(item) {
const id = item.id
const highLightColor = '#AF24FF'
const allPolyline = this.layers
this.allParkList.forEach((it, index) => {
if (allPolyline[index]) {
const color = hazardLevel[it.hazardLevel]?.color
if (it.areaType === '1') {
allPolyline[index].setContent(this.renderMarker(color))
if (it.id === id) {
this.map.setCenter([item.longitude, item.latitude])
this.map.setZoom(15)
allPolyline[index].setContent(this.renderMarker(highLightColor))
}
} else {
allPolyline[index].setOptions({
[it.areaType === '3' ? 'strokeColor' : 'fillColor']: color
})
if (it.id === id) {
if (item.path && typeof item.path === 'string') {
const path = JSON.parse(item.path)
if (path[0]) {
this.map.setCenter([path[0][0], path[0][1]])
this.map.setZoom(15)
}
}
allPolyline[index].setOptions({
[it.areaType === '3' ? 'strokeColor' : 'fillColor']:
highLightColor
})
}
}
}
})
// const currentDom = document.querySelector(`#${id}`)
// currentDom?.scrollIntoView({ behavior: 'smooth' })
}
} }
} }
</script> </script>
<style></style> <style>
#container {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
</style>
src/views/chart/components/aMap/AMapEditor.vue 0 → 100644
<template>
<div>
<!-- <el-row class="padding-lr">
<span class="data-area-label">
<span>{{ $t('amap.center') }}</span>
<i
class="el-icon-arrow-down el-icon-delete data-area-clear"
@click="clearData('center')"
/>
</span>
<el-input
v-model="busiFieldMap.center"
placeholder="请输入中心点坐标"
size="mini"
@change="(e) => addItem(e, 'center')"
/>
</el-row> -->
<el-row class="padding-lr">
<span class="data-area-label">
<span>{{ $t('amap.layer_name') }}</span>
<span> / </span>
<span> {{ $t('chart.dimension') }}</span>
<i
class="el-icon-arrow-down el-icon-delete data-area-clear"
@click="clearData('name')"
/>
</span>
<draggable
v-model="busiFieldMap.name"
group="drag"
animation="300"
:move="onMove"
class="drag-block-style"
@add="(e) => addItem(e, 'name')"
@update="calcData(true)"
>
<transition-group class="draggable-group">
<detail-item
v-for="(item, index) in busiFieldMap.name"
:key="item.id"
:param="param"
:index="index"
:item="item"
:dimension-data="dimensionData"
:quota-data="quotaData"
@onDetailItemRemove="(e) => removeItem(e, 'name')"
/>
</transition-group>
</draggable>
<div
v-if="!busiFieldMap.name || busiFieldMap.name.length === 0"
class="drag-placeholder-style"
>
<span class="drag-placeholder-style-span">{{
$t('chart.placeholder_field')
}}</span>
</div>
</el-row>
<el-row class="padding-lr">
<span class="data-area-label">
<span>{{ $t('chart.longitude') }}</span>
<span> / </span>
<span> {{ $t('chart.dimension') }}</span>
<i
class="el-icon-arrow-down el-icon-delete data-area-clear"
@click="clearData('lng')"
/>
</span>
<draggable
v-model="busiFieldMap.lng"
group="drag"
animation="300"
:move="onMove"
class="drag-block-style"
@add="(e) => addItem(e, 'lng')"
@update="calcData(true)"
>
<transition-group class="draggable-group">
<detail-item
v-for="(item, index) in busiFieldMap.lng"
:key="item.id"
:param="param"
:index="index"
:item="item"
:dimension-data="dimensionData"
:quota-data="quotaData"
@onDetailItemRemove="(e) => removeItem(e, 'lng')"
/>
</transition-group>
</draggable>
<div
v-if="!busiFieldMap.lng || busiFieldMap.lng.length === 0"
class="drag-placeholder-style"
>
<span class="drag-placeholder-style-span">{{
$t('chart.placeholder_field')
}}</span>
</div>
</el-row>
<el-row class="padding-lr">
<span class="data-area-label">
<span>{{ $t('chart.latitude') }} / {{ $t('chart.dimension') }}</span>
<i
class="el-icon-arrow-down el-icon-delete data-area-clear"
@click="clearData('lat')"
/>
</span>
<draggable
v-model="busiFieldMap.lat"
group="drag"
animation="300"
:move="onMove"
class="drag-block-style"
@add="(e) => addItem(e, 'lat')"
@update="calcData(true)"
>
<transition-group class="draggable-group">
<detail-item
v-for="(item, index) in busiFieldMap.lat"
:key="item.id"
:param="param"
:index="index"
:item="item"
:dimension-data="dimensionData"
:quota-data="quotaData"
@onDetailItemRemove="(e) => removeItem(e, 'lat')"
/>
</transition-group>
</draggable>
<div
v-if="!busiFieldMap.lat || busiFieldMap.lat.length === 0"
class="drag-placeholder-style"
>
<span class="drag-placeholder-style-span">{{
$t('chart.placeholder_field')
}}</span>
</div>
</el-row>
<el-row class="padding-lr">
<span class="data-area-label">
<span>{{ $t('amap.layer_type') }} / {{ $t('chart.dimension') }}</span>
<i
class="el-icon-arrow-down el-icon-delete data-area-clear"
@click="clearData('areaType')"
/>
</span>
<draggable
v-model="busiFieldMap.areaType"
group="drag"
animation="300"
:move="onMove"
class="drag-block-style"
@add="(e) => addItem(e, 'areaType')"
@update="calcData(true)"
>
<transition-group class="draggable-group">
<detail-item
v-for="(item, index) in busiFieldMap.areaType"
:key="item.id"
:param="param"
:index="index"
:item="item"
:dimension-data="dimensionData"
:quota-data="quotaData"
@onDetailItemRemove="(e) => removeItem(e, 'areaType')"
/>
</transition-group>
</draggable>
<div
v-if="!busiFieldMap.areaType || busiFieldMap.areaType.length === 0"
class="drag-placeholder-style"
>
<span class="drag-placeholder-style-span">{{
$t('chart.placeholder_field')
}}</span>
</div>
</el-row>
<el-row class="padding-lr">
<span class="data-area-label">
<span>{{ $t('amap.layer_path') }} / {{ $t('chart.dimension') }}</span>
<i
class="el-icon-arrow-down el-icon-delete data-area-clear"
@click="clearData('path')"
/>
</span>
<draggable
v-model="busiFieldMap.path"
group="drag"
animation="300"
:move="onMove"
class="drag-block-style"
@add="(e) => addItem(e, 'path')"
@update="calcData(true)"
>
<transition-group class="draggable-group">
<detail-item
v-for="(item, index) in busiFieldMap.path"
:key="item.id"
:param="param"
:index="index"
:item="item"
:dimension-data="dimensionData"
:quota-data="quotaData"
@onDetailItemRemove="(e) => removeItem(e, 'path')"
/>
</transition-group>
</draggable>
<div
v-if="!busiFieldMap.path || busiFieldMap.path.length === 0"
class="drag-placeholder-style"
>
<span class="drag-placeholder-style-span">{{
$t('chart.placeholder_field')
}}</span>
</div>
</el-row>
<el-row class="padding-lr">
<span class="data-area-label">
<span>{{ $t('amap.hazardLevel') }} / {{ $t('chart.dimension') }}</span>
<i
class="el-icon-arrow-down el-icon-delete data-area-clear"
@click="clearData('hazardLevel')"
/>
</span>
<draggable
v-model="busiFieldMap.hazardLevel"
group="drag"
animation="300"
:move="onMove"
class="drag-block-style"
@add="(e) => addItem(e, 'path')"
@update="calcData(true)"
>
<transition-group class="draggable-group">
<detail-item
v-for="(item, index) in busiFieldMap.hazardLevel"
:key="item.id"
:param="param"
:index="index"
:item="item"
:dimension-data="dimensionData"
:quota-data="quotaData"
@onDetailItemRemove="(e) => removeItem(e, 'hazardLevel')"
/>
</transition-group>
</draggable>
<div
v-if="!busiFieldMap.path || busiFieldMap.path.length === 0"
class="drag-placeholder-style"
>
<span class="drag-placeholder-style-span">{{
$t('chart.placeholder_field')
}}</span>
</div>
</el-row>
</div>
</template>
<script>
import DetailItem from '@/views/chart/components/dragItem/DetailItem'
export default {
name: 'MarkMapDataEditor',
components: { DetailItem },
props: {
view: {
type: Object,
require: true
},
param: {
type: Object,
required: true
},
dimensionData: {
type: Array,
required: true
},
quotaData: {
type: Array,
required: true
}
},
data() {
return {
busiFieldMap: {
name: [],
lng: [],
lat: [],
areaType: [],
path: [],
hazardLevel: []
}
}
},
created() {
this.releaseViewFields()
},
methods: {
fillViewFields() {
const result = []
for (const key in this.busiFieldMap) {
if (Object.hasOwnProperty.call(this.busiFieldMap, key)) {
const element = JSON.parse(JSON.stringify(this.busiFieldMap[key]))
element.forEach((item) => {
item.busiType = key
result.push(item)
})
}
}
this.view.viewFields = result
this.view.xaxis = result
},
releaseViewFields() {
this.view.viewFields.forEach((item) => {
const busiType = item.busiType
if (this.busiFieldMap?.[busiType]) {
this.busiFieldMap[busiType].push(item)
}
})
},
clearData(type) {
this.busiFieldMap[type] = []
this.calcData(true)
},
onMove(e, originalEvent) {
this.moveId = e.draggedContext.element.id
return true
},
dragCheckType(list, type) {
if (list && list.length > 0) {
for (let i = 0; i < list.length; i++) {
if (list[i].groupType !== type) {
list.splice(i, 1)
}
}
}
},
dragMoveDuplicate(list, e) {
const that = this
const dup = list.filter(function(m) {
return m.id === that.moveId
})
if (dup && dup.length > 1) {
list.splice(e.newDraggableIndex, 1)
}
},
addItem(item, label) {
this.dragCheckType(this.busiFieldMap[label], 'd')
this.dragMoveDuplicate(this.busiFieldMap[label], item)
if (this.busiFieldMap[label]?.length) {
this.busiFieldMap[label] = [this.busiFieldMap[label][0]]
}
this.calcData(true)
},
removeItem(item, label) {
this.busiFieldMap[label].splice(item.index, 1)
this.calcData(true)
},
locationYItemRemove(item) {
this.busiFieldMap.locationYaxis.splice(item.index, 1)
this.calcData(true)
},
detailItemRemove(item) {
this.busiFieldMap.daxis.splice(item.index, 1)
this.calcData(true)
},
calcData(cache) {
this.fillViewFields()
console.log('cache', cache)
this.$emit('calc-data', cache)
}
}
}
</script>
<style lang="scss" scoped>
.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;
}
.view-panel-row {
display: flex;
background-color: #f7f8fa;
overflow-y: auto;
overflow-x: hidden;
height: calc(100vh - 96px);
}
.view-panel-Mask {
display: flex;
height: calc(100vh - 80px);
background-color: rgba(92, 94, 97, 0.7);
position: absolute;
top: 0px;
left: 0px;
width: 350px;
z-index: 2;
cursor: not-allowed;
display: flex;
align-items: center;
justify-content: center;
}
.view-panel {
display: flex;
height: 100%;
background-color: #f7f8fa;
}
.blackTheme .view-panel {
background-color: var(--MainBG);
}
.drag-list {
height: calc(100% - 26px);
overflow: auto;
padding: 2px 0;
}
.item-dimension {
padding: 2px 10px;
margin: 2px 2px 0 2px;
border: solid 1px #eee;
text-align: left;
color: #606266;
/*background-color: rgba(35,46,64,.05);*/
background-color: white;
display: block;
word-break: break-all;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: relative;
}
.blackTheme .item-dimension {
border: solid 1px;
border-color: var(--TableBorderColor);
color: var(--TextPrimary);
background-color: var(--MainBG);
}
.item-dimension + .item-dimension {
margin-top: 2px;
}
.item-dimension:hover {
color: #1890ff;
background: #e8f4ff;
border-color: #a3d3ff;
cursor: pointer;
}
.blackTheme .item-dimension:hover {
color: var(--Main);
background: var(--ContentBG);
cursor: pointer;
}
.item-quota {
padding: 2px 10px;
margin: 2px 2px 0 2px;
border: solid 1px #eee;
text-align: left;
color: #606266;
background-color: white;
display: block;
word-break: break-all;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: relative;
}
.blackTheme .item-quota {
border: solid 1px;
border-color: var(--TableBorderColor);
color: var(--TextPrimary);
background-color: var(--MainBG);
}
.item-quota + .item-quota {
margin-top: 2px;
}
.item-quota:hover {
color: #67c23a;
background: #f0f9eb;
border-color: #b2d3a3;
cursor: pointer;
}
.blackTheme .item-quota:hover {
background: var(--ContentBG);
}
.el-form-item {
margin-bottom: 0;
}
span {
font-size: 12px;
}
.tab-header ::v-deep .el-tabs__header {
border-top: solid 1px #eee;
border-right: solid 1px #eee;
}
.tab-header ::v-deep .el-tabs__item {
font-size: 12px;
padding: 0 20px !important;
}
.blackTheme .tab-header ::v-deep .el-tabs__item {
background-color: var(--MainBG);
}
.tab-header ::v-deep .el-tabs__nav-scroll {
padding-left: 0 !important;
}
.tab-header ::v-deep .el-tabs__header {
margin: 0 !important;
}
.tab-header ::v-deep .el-tabs__content {
height: calc(100% - 40px);
}
.draggable-group {
display: block;
width: 100%;
height: calc(100% - 6px);
}
.chart-icon {
width: 20px !important;
height: 20px !important;
}
.el-radio {
margin: 5px;
}
.el-radio ::v-deep .el-radio__label {
padding-left: 0;
}
.attr-style {
height: calc(100vh - 76px - 60px - 40px - 40px);
}
.blackTheme .attr-style {
color: var(--TextPrimary);
}
.attr-selector {
width: 100%;
height: 100%;
margin: 6px 0;
padding: 0 4px;
display: flex;
align-items: center;
background-color: white;
}
.blackTheme .attr-selector {
background-color: var(--MainBG);
}
.disabled-none-cursor {
cursor: not-allowed;
pointer-events: none;
}
.chart-class {
height: 100%;
padding: 10px;
}
.table-class {
height: calc(100% - 20px);
}
.dialog-css ::v-deep .el-dialog__title {
font-size: 14px;
}
.dialog-css ::v-deep .el-dialog__header {
padding: 20px 20px 0;
}
.dialog-css ::v-deep .el-dialog__body {
padding: 10px 20px 20px;
}
.filter-btn-class {
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.chart-error-class {
text-align: center;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #ece7e7;
}
.blackTheme .chart-error-class {
background-color: var(--MainBG);
}
.field-height {
height: 100%;
border-top: 1px solid #e6e6e6;
}
.blackTheme .field-height {
border-top: 1px solid;
border-color: var(--TableBorderColor) !important;
}
.padding-tab {
padding: 0;
height: 100%;
}
.tree-select-span {
::v-deep div.vue-treeselect__control {
height: 32px !important;
font-weight: normal !important;
}
}
.drag-block-style {
padding: 2px 0 0 0;
width: 100%;
min-height: 32px;
border-radius: 4px;
border: 1px solid #dcdfe6;
overflow-x: hidden;
display: flex;
align-items: center;
background-color: white;
}
.blackTheme .drag-block-style {
border: 1px solid;
border-color: var(--TableBorderColor);
background-color: var(--ContentBG);
}
.drag-placeholder-style {
position: absolute;
top: calc(50% - 2px);
left: 0;
width: 100%;
color: #cccccc;
}
.blackTheme .drag-placeholder-style {
color: var(--TextPrimary);
}
.drag-placeholder-style-span {
padding-left: 16px;
}
.blackTheme .theme-border-class {
color: var(--TextPrimary) !important;
background-color: var(--ContentBG);
}
.blackTheme .padding-lr {
border-color: var(--TableBorderColor) !important;
}
.blackTheme .theme-item-class {
background-color: var(--MainBG) !important;
border-color: var(--TableBorderColor) !important;
}
.icon-class {
color: #6c6c6c;
}
.blackTheme .icon-class {
color: #cccccc;
}
.result-count {
width: 50px;
}
.result-count ::v-deep input {
padding: 0 4px;
}
.radio-span ::v-deep .el-radio__label {
margin-left: 4px;
}
.view-title-name {
display: -moz-inline-box;
display: inline-block;
width: 130px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
margin-left: 45px;
}
::v-deep .item-axis {
width: 168px !important;
}
::v-deep .el-slider__input {
width: 80px !important;
}
::v-deep .el-input-number--mini {
width: 100px !important;
}
::v-deep .el-slider__runway.show-input {
width: 80px !important;
}
.no-senior {
width: 100%;
text-align: center;
font-size: 12px;
padding-top: 40px;
overflow: auto;
border-right: 1px solid #e6e6e6;
height: 100%;
}
.form-item-slider::v-deep.el-form-item__label {
font-size: 12px;
line-height: 38px;
}
.form-item::v-deep.el-form-item__label {
font-size: 12px;
}
.field-name {
display: inline-block;
width: 90px;
word-break: break-all;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: absolute;
top: 2px;
}
.field-setting {
position: absolute;
right: 8px;
}
.father .child {
visibility: hidden;
}
.father:hover .child {
visibility: visible;
}
.field-split {
height: calc(100% - 40px);
}
.field-split ::v-deep .fu-split-pane__left {
padding-right: 0 !important;
}
.field-split ::v-deep .fu-split-pane__right {
padding-left: 0 !important;
}
.view-panel-row ::v-deep .el-collapse-item__header {
height: 34px !important;
line-height: 34px !important;
padding: 0 0 0 6px !important;
font-size: 12px !important;
font-weight: 400 !important;
}
.data-area-label {
text-align: left;
position: relative;
width: 100%;
display: inline-block;
}
.data-area-clear {
position: absolute;
top: 4px;
right: 6px;
color: rgb(135, 141, 159);
cursor: pointer;
z-index: 1;
}
</style>
src/views/chart/components/aMap/aMap.js 0 → 100644
export function baseAMapData(chart) {
const data = chart.data.tableRow;
const fields = chart.data.fields;
let layerData = [];
layerData = data.map((a, index) => {
const obj = {
id: index + 1,
};
fields.map((b) => {
for (const key in a) {
if (b.dataeaseName === key) {
obj[b.originName] = a[key];
}
}
});
return obj;
});
return layerData;
}
export const hazardLevel = {
0: {
text: "非重大危险源",
color: "#52c41a",
},
1: {
text: "一级危险源",
color: "#FF4D4F",
},
2: {
text: "二级危险源",
color: "#FF7A45",
},
3: {
text: "三级危险源",
color: "#FAAD14",
},
4: {
text: "四级危险源",
color: "#1890FF",
},
};
src/views/chart/components/shapeAttr/AMapSelector.vue 0 → 100644
<template>
<div style="width: 100%">
<el-col>
<el-form
ref="colorForm"
:model="colorForm"
label-width="80px"
size="mini"
>
<div>
<el-form-item
v-show="showProperty('value') && showProperty('gradient-color')"
:label="$t('chart.color_case')"
class="form-item"
>
<gradient-color-selector
:color-dto="colorForm"
@color-change="gradientColorChange"
/>
</el-form-item>
<el-form-item
v-show="showProperty('value') && !showProperty('gradient-color')"
:label="$t('chart.color_case')"
class="form-item"
>
<el-popover
placement="bottom"
width="400"
trigger="click"
>
<div style="padding: 6px 10px;">
<div>
<span class="color-label">{{ $t('chart.system_case') }}</span>
<el-select
v-model="colorForm.value"
:placeholder="$t('chart.pls_slc_color_case')"
size="mini"
@change="changeColorOption('value')"
>
<el-option
v-for="option in colorCases"
:key="option.value"
:label="option.name"
:value="option.value"
style="display: flex;align-items: center;"
>
<div style="float: left">
<span
v-for="(c,index) in option.colors"
:key="index"
:style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}"
/>
</div>
<span style="margin-left: 4px;">{{ option.name }}</span>
</el-option>
</el-select>
<el-button
size="mini"
type="text"
style="margin-left: 2px;"
@click="resetCustomColor"
>{{ $t('commons.reset') }}
</el-button>
</div>
<!--自定义配色方案-->
<div
v-show="showProperty('custom')"
>
<div style="display: flex;align-items: center;margin-top: 10px;">
<span class="color-label">{{ $t('chart.custom_case') }}</span>
<span>
<el-radio-group
v-model="customColor"
class="color-type"
>
<el-radio
v-for="(c,index) in colorForm.colors"
:key="index"
:label="c"
style="padding: 2px;"
@change="switchColor(index)"
>
<span :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" />
</el-radio>
</el-radio-group>
</span>
</div>
<div style="display: flex;align-items: center;margin-top: 10px;">
<span class="color-label" />
<span>
<el-color-picker
v-model="customColor"
class="color-picker-style"
:predefine="predefineColors"
@change="switchColorCase"
/>
</span>
</div>
</div>
<!--自定义系列或维度枚举值颜色-->
<div
v-show="showProperty('colorPanel')"
style="display: flex;align-items: center;margin-top: 10px;"
>
<span class="color-label" />
<span>
<span
v-for="(c,index) in colorForm.colors"
:key="index"
style="padding: 2px;"
>
<span :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" />
</span>
</span>
</div>
</div>
<div
v-if="!batchOptStatus"
v-show="showProperty('customColor')"
class="custom-color-style"
>
<div
v-for="(item,index) in colorForm.seriesColors"
:key="index"
style="display: flex;align-items: center;margin: 2px 0;"
>
<el-color-picker
v-model="item.color"
class="color-picker-style"
:predefine="predefineColors"
@change="switchCustomColor(index)"
/>
<span
class="span-label"
:title="item.name"
>{{ item.name }}</span>
</div>
</div>
<div
slot="reference"
style="cursor: pointer;margin-top: 2px;width: 180px;"
>
<span
v-for="(c,index) in colorForm.colors"
:key="index"
:style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}"
/>
</div>
</el-popover>
</el-form-item>
<el-form-item
v-show="showProperty('gradient')"
:label="$t('chart.gradient')"
class="form-item"
>
<el-checkbox
v-model="colorForm.gradient"
@change="changeColorCase('gradient')"
/>
</el-form-item>
<el-form-item
v-show="showProperty('quotaColor')"
:label="$t('chart.quota_color')"
class="form-item"
>
<el-color-picker
v-model="colorForm.quotaColor"
class="color-picker-style"
:predefine="predefineColors"
@change="changeColorCase('quotaColor')"
/>
</el-form-item>
<el-form-item
v-show="showProperty('dimensionColor')"
:label="$t('chart.dimension_color')"
class="form-item"
>
<el-color-picker
v-model="colorForm.dimensionColor"
class="color-picker-style"
:predefine="predefineColors"
@change="changeColorCase('dimensionColor')"
/>
</el-form-item>
</div>
<div>
<el-form-item
v-show="showProperty('tableHeaderBgColor')"
:label="$t('chart.table_header_bg')"
class="form-item"
>
<el-color-picker
v-model="colorForm.tableHeaderBgColor"
class="color-picker-style"
:predefine="predefineColors"
@change="changeColorCase('tableHeaderBgColor')"
/>
</el-form-item>
<el-form-item
v-show="showProperty('tableItemBgColor')"
:label="$t('chart.table_item_bg')"
class="form-item"
>
<el-color-picker
v-model="colorForm.tableItemBgColor"
class="color-picker-style"
:predefine="predefineColors"
@change="changeColorCase('tableItemBgColor')"
/>
</el-form-item>
<el-form-item
v-show="showProperty('tableHeaderFontColor')"
:label="$t('chart.table_header_font_color')"
class="form-item"
>
<el-color-picker
v-model="colorForm.tableHeaderFontColor"
class="color-picker-style"
:predefine="predefineColors"
@change="changeColorCase('tableHeaderFontColor')"
/>
</el-form-item>
<el-form-item
v-show="showProperty('tableFontColor')"
:label="$t('chart.table_item_font_color')"
class="form-item"
>
<el-color-picker
v-model="colorForm.tableFontColor"
class="color-picker-style"
:predefine="predefineColors"
@change="changeColorCase('tableFontColor')"
/>
</el-form-item>
<el-form-item
v-show="showProperty('tableBorderColor')"
:label="$t('chart.table_border_color')"
class="form-item"
>
<el-color-picker
v-model="colorForm.tableBorderColor"
class="color-picker-style"
:predefine="predefineColors"
@change="changeColorCase('tableBorderColor')"
/>
</el-form-item>
<el-form-item
v-show="showProperty('tableScrollBarColor')"
:label="$t('chart.table_scroll_bar_color')"
class="form-item"
>
<el-color-picker
v-model="colorForm.tableScrollBarColor"
class="color-picker-style"
:predefine="predefineColors"
color-format="rgb"
show-alpha
@change="changeColorCase('tableScrollBarColor')"
/>
</el-form-item>
</div>
<el-form-item
v-show="showProperty('mapStyle')"
:label="$t('chart.map_style')"
class="form-item"
>
<el-select
v-model="colorForm.mapStyle"
@change="changeColorCase('mapStyle')"
>
<el-option
v-for="item in mapStyleOptions"
:key="item.name"
:label="item.name"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item
v-show="showProperty('alpha')"
:label="$t('chart.not_alpha')"
class="form-item form-item-slider"
>
<el-slider
v-model="colorForm.alpha"
show-input
:show-input-controls="false"
input-size="mini"
@change="changeColorCase('alpha')"
/>
</el-form-item>
<el-form-item
v-show="showProperty('mapLineGradient')"
:label="$t('chart.gradient')"
class="form-item"
>
<el-checkbox
v-model="colorForm.mapLineGradient"
:disabled="checkMapLineGradient"
@change="changeColorCase('mapLineGradient')"
/>
</el-form-item>
<el-form-item
v-show="showProperty('mapLineSourceColor')"
:label="colorForm.mapLineGradient ? $t('chart.map_line_color_source_color') : $t('chart.color')"
class="form-item"
>
<el-color-picker
v-model="colorForm.mapLineSourceColor"
@change="changeColorCase('mapLineSourceColor')"
/>
</el-form-item>
<el-form-item
v-show="showProperty('mapLineTargetColor')"
v-if="colorForm.mapLineGradient"
:label="$t('chart.map_line_color_target_color')"
class="form-item"
>
<el-color-picker
v-model="colorForm.mapLineTargetColor"
@change="changeColorCase('mapLineTargetColor')"
/>
</el-form-item>
<el-form-item
v-show="showProperty('area-border-color') "
:label="$t('chart.area_border_color')"
class="form-item"
>
<el-color-picker
v-model="colorForm.areaBorderColor"
class="color-picker-style"
:predefine="predefineColors"
@change="changeColorCase('areaBorderColor')"
/>
</el-form-item>
</el-form>
</el-col>
</div>
</template>
<script>
import { COLOR_PANEL, DEFAULT_COLOR_CASE } from '../../chart/chart'
import { getColors } from '@/views/chart/chart/util'
import { mapState } from 'vuex'
import GradientColorSelector from '@/components/gradientColorSelector'
import bus from '@/utils/bus'
import { equalsAny } from '@/utils/StringUtils'
export default {
name: 'ColorSelector',
components: { GradientColorSelector },
props: {
param: {
type: Object,
required: false
},
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
},
sourceType: {
type: String,
default: 'view',
required: false
}
},
data() {
return {
colorCases: [
{
name: this.$t('chart.color_default'),
value: 'default',
colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
},
{
name: this.$t('chart.color_retro'),
value: 'retro',
colors: ['#0780cf', '#765005', '#fa6d1d', '#0e2c82', '#b6b51f', '#da1f18', '#701866', '#f47a75', '#009db2']
},
{
name: this.$t('chart.color_elegant'),
value: 'elegant',
colors: ['#95a2ff', '#fa8080', '#ffc076', '#fae768', '#87e885', '#3cb9fc', '#73abf5', '#cb9bff', '#434348']
},
{
name: this.$t('chart.color_future'),
value: 'future',
colors: ['#63b2ee', '#76da91', '#f8cb7f', '#f89588', '#7cd6cf', '#9192ab', '#7898e1', '#efa666', '#eddd86']
},
{
name: this.$t('chart.color_gradual'),
value: 'gradual',
colors: ['#71ae46', '#96b744', '#c4cc38', '#ebe12a', '#eab026', '#e3852b', '#d85d2a', '#ce2626', '#ac2026']
},
{
name: this.$t('chart.color_simple'),
value: 'simple',
colors: ['#929fff', '#9de0ff', '#ffa897', '#af87fe', '#7dc3fe', '#bb60b2', '#433e7c', '#f47a75', '#009db2']
},
{
name: this.$t('chart.color_business'),
value: 'business',
colors: ['#194f97', '#555555', '#bd6b08', '#00686b', '#c82d31', '#625ba1', '#898989', '#9c9800', '#007f54']
},
{
name: this.$t('chart.color_gentle'),
value: 'gentle',
colors: ['#5b9bd5', '#ed7d31', '#70ad47', '#ffc000', '#4472c4', '#91d024', '#b235e6', '#02ae75', '#5b9bd5']
},
{
name: this.$t('chart.color_technology'),
value: 'technology',
colors: ['#05f8d6', '#0082fc', '#fdd845', '#22ed7c', '#09b0d3', '#1d27c9', '#f9e264', '#f47a75', '#009db2']
},
{
name: this.$t('chart.color_light'),
value: 'light',
colors: ['#884898', '#808080', '#82ae46', '#00a3af', '#ef8b07', '#007bbb', '#9d775f', '#fae800', '#5f9b3c']
},
{
name: this.$t('chart.color_classical'),
value: 'classical',
colors: ['#007bbb', '#ffdb4f', '#dd4b4b', '#2ca9e1', '#ef8b07', '#4a488e', '#82ae46', '#dd4b4b', '#bb9581']
},
{
name: this.$t('chart.color_fresh'),
value: 'fresh',
colors: ['#5f9b3c', '#75c24b', '#83d65f', '#aacf53', '#c7dc68', '#d8e698', '#e0ebaf', '#bbc8e6', '#e5e5e5']
},
{
name: this.$t('chart.color_energy'),
value: 'energy',
colors: ['#ef8b07', '#2a83a2', '#f07474', '#c55784', '#274a78', '#7058a3', '#0095d9', '#75c24b', '#808080']
},
{
name: this.$t('chart.color_red'),
value: 'red',
colors: ['#ff0000', '#ef8b07', '#4c6cb3', '#f8e944', '#69821b', '#9c5ec3', '#00ccdf', '#f07474', '#bb9581']
},
{
name: this.$t('chart.color_fast'),
value: 'fast',
colors: ['#fae800', '#00c039', '#0482dc', '#bb9581', '#ff7701', '#9c5ec3', '#00ccdf', '#00c039', '#ff7701']
},
{
name: this.$t('chart.color_spiritual'),
value: 'spiritual',
colors: ['#00a3af', '#4da798', '#57baaa', '#62d0bd', '#6ee4d0', '#86e7d6', '#aeede1', '#bde1e6', '#e5e5e5']
}
],
colorForm: JSON.parse(JSON.stringify(DEFAULT_COLOR_CASE)),
customColor: null,
colorIndex: 0,
predefineColors: COLOR_PANEL,
mapStyleOptions: [
{ name: this.$t('chart.map_style_normal'), value: 'normal' },
{ name: this.$t('chart.map_style_darkblue'), value: 'darkblue' },
{ name: this.$t('chart.map_style_light'), value: 'light' },
{ name: this.$t('chart.map_style_dark'), value: 'dark' },
{ name: this.$t('chart.map_style_whitesmoke'), value: 'whitesmoke' },
{ name: this.$t('chart.map_style_fresh'), value: 'fresh' },
{ name: this.$t('chart.map_style_grey'), value: 'grey' },
{ name: this.$t('chart.map_style_graffiti'), value: 'graffiti' },
{ name: this.$t('chart.map_style_macaron'), value: 'macaron' },
{ name: this.$t('chart.map_style_blue'), value: 'blue' },
{ name: this.$t('chart.map_style_wine'), value: 'wine' }
]
}
},
computed: {
checkMapLineGradient() {
const chart = this.chart
if (chart.type === 'flow-map') {
let customAttr = null
if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
customAttr = JSON.parse(JSON.stringify(chart.customAttr))
} else {
customAttr = JSON.parse(chart.customAttr)
}
return customAttr.size.mapLineAnimate && equalsAny(customAttr.size.mapLineType, 'line', 'arc')
}
return false
},
...mapState([
'batchOptStatus',
'componentViewsData'
])
},
watch: {
'chart.id': {
handler: function() {
this.customColor = null
this.colorIndex = 0
}
},
'chart': {
handler: function() {
this.init()
}
}
},
mounted() {
this.init()
bus.$on('prop-change-data', this.initCustomColor)
},
beforeDestroy() {
bus.$off('prop-change-data', this.initCustomColor)
},
methods: {
gradientColorChange(colorDto) {
const modifyNames = ['value', 'colors', 'seriesColors']
modifyNames.forEach(item => {
this.colorForm['modifyName'] = item
this.$emit('onColorChange', this.colorForm)
})
},
changeColorOption(modifyName = 'value') {
const that = this
const items = this.colorCases.filter(ele => {
return ele.value === that.colorForm.value
})
this.colorForm.colors = JSON.parse(JSON.stringify(items[0].colors))
this.customColor = this.colorForm.colors[0]
this.colorIndex = 0
// reset custom color
this.colorForm.seriesColors = []
this.initCustomColor(true)
this.changeColorCase(modifyName)
},
changeColorCase(modifyName) {
this.colorForm['modifyName'] = modifyName
this.$emit('onColorChange', this.colorForm)
this.colorForm['modifyName'] = 'colors'
this.$emit('onColorChange', this.colorForm)
},
init() {
const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customAttr) {
let customAttr = null
if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
customAttr = JSON.parse(JSON.stringify(chart.customAttr))
} else {
customAttr = JSON.parse(chart.customAttr)
}
if (customAttr.color) {
this.colorForm = customAttr.color
if (!this.customColor) {
this.customColor = this.colorForm.colors[0]
this.colorIndex = 0
}
this.colorForm.tableBorderColor = this.colorForm.tableBorderColor ? this.colorForm.tableBorderColor : DEFAULT_COLOR_CASE.tableBorderColor
this.colorForm.tableHeaderFontColor = this.colorForm.tableHeaderFontColor ? this.colorForm.tableHeaderFontColor : this.colorForm.tableFontColor
this.$set(this.colorForm, 'gradient', this.colorForm.gradient || false)
this.colorForm.tableScrollBarColor = this.colorForm.tableScrollBarColor ? this.colorForm.tableScrollBarColor : DEFAULT_COLOR_CASE.tableScrollBarColor
this.colorForm.mapStyle = this.colorForm.mapStyle ? this.colorForm.mapStyle : DEFAULT_COLOR_CASE.mapStyle
this.colorForm.mapLineGradient = this.colorForm.mapLineGradient ? this.colorForm.mapLineGradient : DEFAULT_COLOR_CASE.mapLineGradient
this.colorForm.mapLineSourceColor = this.colorForm.mapLineSourceColor ? this.colorForm.mapLineSourceColor : DEFAULT_COLOR_CASE.mapLineSourceColor
this.colorForm.mapLineTargetColor = this.colorForm.mapLineTargetColor ? this.colorForm.mapLineTargetColor : DEFAULT_COLOR_CASE.mapLineTargetColor
this.initCustomColor()
}
}
},
switchColor(index) {
this.colorIndex = index
},
switchColorCase() {
this.colorForm.colors[this.colorIndex] = this.customColor
this.colorForm['modifyName'] = 'value'
this.$emit('onColorChange', this.colorForm)
this.colorForm['modifyName'] = 'colors'
this.$emit('onColorChange', this.colorForm)
this.colorForm['modifyName'] = 'seriesColors'
this.$emit('onColorChange', this.colorForm)
},
resetCustomColor() {
this.changeColorOption()
},
showProperty(property) {
return this.propertyInner.includes(property)
},
switchCustomColor(index) {
this.colorForm.seriesColors[index].isCustom = true
this.switchColorCase()
},
initCustomColor(reset) {
if (!this.batchOptStatus && this.chart.render && this.chart.render === 'antv' &&
(this.chart.type.includes('bar') ||
this.chart.type.includes('line') ||
this.chart.type.includes('area') ||
this.chart.type.includes('pie') ||
this.chart.type === 'funnel' ||
this.chart.type === 'radar' ||
this.chart.type === 'scatter')) {
if (this.componentViewsData[this.chart.id]) {
const chart = JSON.parse(JSON.stringify(this.componentViewsData[this.chart.id]))
this.colorForm.seriesColors = getColors(chart, this.colorForm.colors, reset)
}
}
}
}
}
</script>
<style scoped>
.shape-item {
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center
}
.form-item-slider ::v-deep .el-form-item__label {
font-size: 12px;
line-height: 38px;
}
.form-item ::v-deep .el-form-item__label {
font-size: 12px;
}
.el-select-dropdown__item {
padding: 0 20px;
}
span {
font-size: 12px
}
.el-form-item {
margin-bottom: 6px;
}
.color-picker-style {
cursor: pointer;
z-index: 1003;
}
.color-label {
display: inline-block;
width: 60px;
}
.color-type ::v-deep .el-radio__input {
display: none;
}
.el-radio {
margin: 0 2px 0 0 !important;
border: 1px solid transparent;
}
.el-radio ::v-deep .el-radio__label {
padding-left: 0;
}
.el-radio.is-checked {
border: 1px solid #0a7be0;
}
.span-label {
width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
padding: 0 8px;
}
.custom-color-style {
height: 300px;
overflow-y: auto;
padding: 4px 12px;
border: 1px solid #e6e6e6;
}
</style>
src/views/chart/components/shapeAttr/ColorSelector.vue
...@@ -19,6 +19,25 @@ ...@@ -19,6 +19,25 @@
/> />
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-show="showProperty('theme')"
:label="$t('amap.theme')"
class="form-item"
>
<el-radio-group
v-model="colorForm.theme"
class="color-type"
@change="changeColorCase('theme')"
>
<el-radio-button
v-for="(c, index) in themeList"
:key="index"
:label="c.value"
style="padding: 2px"
>{{ c.label }}
</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item
v-show="showProperty('value') && !showProperty('gradient-color')" v-show="showProperty('value') && !showProperty('gradient-color')"
:label="$t('chart.color_case')" :label="$t('chart.color_case')"
class="form-item" class="form-item"
...@@ -28,7 +47,7 @@ ...@@ -28,7 +47,7 @@
width="400" width="400"
trigger="click" trigger="click"
> >
<div style="padding: 6px 10px;"> <div style="padding: 6px 10px">
<div> <div>
<span class="color-label">{{ $t('chart.system_case') }}</span> <span class="color-label">{{ $t('chart.system_case') }}</span>
<el-select <el-select
...@@ -42,50 +61,65 @@ ...@@ -42,50 +61,65 @@
:key="option.value" :key="option.value"
:label="option.name" :label="option.name"
:value="option.value" :value="option.value"
style="display: flex;align-items: center;" style="display: flex; align-items: center"
> >
<div style="float: left"> <div style="float: left">
<span <span
v-for="(c,index) in option.colors" v-for="(c, index) in option.colors"
:key="index" :key="index"
:style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}" :style="{
width: '20px',
height: '20px',
float: 'left',
backgroundColor: c
}"
/> />
</div> </div>
<span style="margin-left: 4px;">{{ option.name }}</span> <span style="margin-left: 4px">{{ option.name }}</span>
</el-option> </el-option>
</el-select> </el-select>
<el-button <el-button
size="mini" size="mini"
type="text" type="text"
style="margin-left: 2px;" style="margin-left: 2px"
@click="resetCustomColor" @click="resetCustomColor"
>{{ $t('commons.reset') }} >{{ $t('commons.reset') }}
</el-button> </el-button>
</div> </div>
<!--自定义配色方案--> <!--自定义配色方案-->
<div <div v-show="showProperty('custom')">
v-show="showProperty('custom')" <div
> style="display: flex; align-items: center; margin-top: 10px"
<div style="display: flex;align-items: center;margin-top: 10px;"> >
<span class="color-label">{{ $t('chart.custom_case') }}</span> <span class="color-label">{{
$t('chart.custom_case')
}}</span>
<span> <span>
<el-radio-group <el-radio-group
v-model="customColor" v-model="customColor"
class="color-type" class="color-type"
> >
<el-radio <el-radio
v-for="(c,index) in colorForm.colors" v-for="(c, index) in colorForm.colors"
:key="index" :key="index"
:label="c" :label="c"
style="padding: 2px;" style="padding: 2px"
@change="switchColor(index)"
> >
<span :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" /> <span
:style="{
width: '20px',
height: '20px',
display: 'inline-block',
backgroundColor: c
}"
/>
</el-radio> </el-radio>
</el-radio-group> </el-radio-group>
</span> </span>
</div> </div>
<div style="display: flex;align-items: center;margin-top: 10px;"> <div
style="display: flex; align-items: center; margin-top: 10px"
>
<span class="color-label" /> <span class="color-label" />
<span> <span>
<el-color-picker <el-color-picker
...@@ -100,16 +134,23 @@ ...@@ -100,16 +134,23 @@
<!--自定义系列或维度枚举值颜色--> <!--自定义系列或维度枚举值颜色-->
<div <div
v-show="showProperty('colorPanel')" v-show="showProperty('colorPanel')"
style="display: flex;align-items: center;margin-top: 10px;" style="display: flex; align-items: center; margin-top: 10px"
> >
<span class="color-label" /> <span class="color-label" />
<span> <span>
<span <span
v-for="(c,index) in colorForm.colors" v-for="(c, index) in colorForm.colors"
:key="index" :key="index"
style="padding: 2px;" style="padding: 2px"
> >
<span :style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" /> <span
:style="{
width: '20px',
height: '20px',
display: 'inline-block',
backgroundColor: c
}"
/>
</span> </span>
</span> </span>
</div> </div>
...@@ -121,9 +162,9 @@ ...@@ -121,9 +162,9 @@
class="custom-color-style" class="custom-color-style"
> >
<div <div
v-for="(item,index) in colorForm.seriesColors" v-for="(item, index) in colorForm.seriesColors"
:key="index" :key="index"
style="display: flex;align-items: center;margin: 2px 0;" style="display: flex; align-items: center; margin: 2px 0"
> >
<el-color-picker <el-color-picker
v-model="item.color" v-model="item.color"
...@@ -134,18 +175,25 @@ ...@@ -134,18 +175,25 @@
<span <span
class="span-label" class="span-label"
:title="item.name" :title="item.name"
>{{ item.name }}</span> >{{
item.name
}}</span>
</div> </div>
</div> </div>
<div <div
slot="reference" slot="reference"
style="cursor: pointer;margin-top: 2px;width: 180px;" style="cursor: pointer; margin-top: 2px; width: 180px"
> >
<span <span
v-for="(c,index) in colorForm.colors" v-for="(c, index) in colorForm.colors"
:key="index" :key="index"
:style="{width: '20px',height: '20px',display:'inline-block',backgroundColor: c}" :style="{
width: '20px',
height: '20px',
display: 'inline-block',
backgroundColor: c
}"
/> />
</div> </div>
</el-popover> </el-popover>
...@@ -306,7 +354,11 @@ ...@@ -306,7 +354,11 @@
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-show="showProperty('mapLineSourceColor')" v-show="showProperty('mapLineSourceColor')"
:label="colorForm.mapLineGradient ? $t('chart.map_line_color_source_color') : $t('chart.color')" :label="
colorForm.mapLineGradient
? $t('chart.map_line_color_source_color')
: $t('chart.color')
"
class="form-item" class="form-item"
> >
<el-color-picker <el-color-picker
...@@ -326,7 +378,7 @@ ...@@ -326,7 +378,7 @@
/> />
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-show="showProperty('area-border-color') " v-show="showProperty('area-border-color')"
:label="$t('chart.area_border_color')" :label="$t('chart.area_border_color')"
class="form-item" class="form-item"
> >
...@@ -381,82 +433,242 @@ export default { ...@@ -381,82 +433,242 @@ export default {
{ {
name: this.$t('chart.color_default'), name: this.$t('chart.color_default'),
value: 'default', value: 'default',
colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'] colors: [
'#5470c6',
'#91cc75',
'#fac858',
'#ee6666',
'#73c0de',
'#3ba272',
'#fc8452',
'#9a60b4',
'#ea7ccc'
]
}, },
{ {
name: this.$t('chart.color_retro'), name: this.$t('chart.color_retro'),
value: 'retro', value: 'retro',
colors: ['#0780cf', '#765005', '#fa6d1d', '#0e2c82', '#b6b51f', '#da1f18', '#701866', '#f47a75', '#009db2'] colors: [
'#0780cf',
'#765005',
'#fa6d1d',
'#0e2c82',
'#b6b51f',
'#da1f18',
'#701866',
'#f47a75',
'#009db2'
]
}, },
{ {
name: this.$t('chart.color_elegant'), name: this.$t('chart.color_elegant'),
value: 'elegant', value: 'elegant',
colors: ['#95a2ff', '#fa8080', '#ffc076', '#fae768', '#87e885', '#3cb9fc', '#73abf5', '#cb9bff', '#434348'] colors: [
'#95a2ff',
'#fa8080',
'#ffc076',
'#fae768',
'#87e885',
'#3cb9fc',
'#73abf5',
'#cb9bff',
'#434348'
]
}, },
{ {
name: this.$t('chart.color_future'), name: this.$t('chart.color_future'),
value: 'future', value: 'future',
colors: ['#63b2ee', '#76da91', '#f8cb7f', '#f89588', '#7cd6cf', '#9192ab', '#7898e1', '#efa666', '#eddd86'] colors: [
'#63b2ee',
'#76da91',
'#f8cb7f',
'#f89588',
'#7cd6cf',
'#9192ab',
'#7898e1',
'#efa666',
'#eddd86'
]
}, },
{ {
name: this.$t('chart.color_gradual'), name: this.$t('chart.color_gradual'),
value: 'gradual', value: 'gradual',
colors: ['#71ae46', '#96b744', '#c4cc38', '#ebe12a', '#eab026', '#e3852b', '#d85d2a', '#ce2626', '#ac2026'] colors: [
'#71ae46',
'#96b744',
'#c4cc38',
'#ebe12a',
'#eab026',
'#e3852b',
'#d85d2a',
'#ce2626',
'#ac2026'
]
}, },
{ {
name: this.$t('chart.color_simple'), name: this.$t('chart.color_simple'),
value: 'simple', value: 'simple',
colors: ['#929fff', '#9de0ff', '#ffa897', '#af87fe', '#7dc3fe', '#bb60b2', '#433e7c', '#f47a75', '#009db2'] colors: [
'#929fff',
'#9de0ff',
'#ffa897',
'#af87fe',
'#7dc3fe',
'#bb60b2',
'#433e7c',
'#f47a75',
'#009db2'
]
}, },
{ {
name: this.$t('chart.color_business'), name: this.$t('chart.color_business'),
value: 'business', value: 'business',
colors: ['#194f97', '#555555', '#bd6b08', '#00686b', '#c82d31', '#625ba1', '#898989', '#9c9800', '#007f54'] colors: [
'#194f97',
'#555555',
'#bd6b08',
'#00686b',
'#c82d31',
'#625ba1',
'#898989',
'#9c9800',
'#007f54'
]
}, },
{ {
name: this.$t('chart.color_gentle'), name: this.$t('chart.color_gentle'),
value: 'gentle', value: 'gentle',
colors: ['#5b9bd5', '#ed7d31', '#70ad47', '#ffc000', '#4472c4', '#91d024', '#b235e6', '#02ae75', '#5b9bd5'] colors: [
'#5b9bd5',
'#ed7d31',
'#70ad47',
'#ffc000',
'#4472c4',
'#91d024',
'#b235e6',
'#02ae75',
'#5b9bd5'
]
}, },
{ {
name: this.$t('chart.color_technology'), name: this.$t('chart.color_technology'),
value: 'technology', value: 'technology',
colors: ['#05f8d6', '#0082fc', '#fdd845', '#22ed7c', '#09b0d3', '#1d27c9', '#f9e264', '#f47a75', '#009db2'] colors: [
'#05f8d6',
'#0082fc',
'#fdd845',
'#22ed7c',
'#09b0d3',
'#1d27c9',
'#f9e264',
'#f47a75',
'#009db2'
]
}, },
{ {
name: this.$t('chart.color_light'), name: this.$t('chart.color_light'),
value: 'light', value: 'light',
colors: ['#884898', '#808080', '#82ae46', '#00a3af', '#ef8b07', '#007bbb', '#9d775f', '#fae800', '#5f9b3c'] colors: [
'#884898',
'#808080',
'#82ae46',
'#00a3af',
'#ef8b07',
'#007bbb',
'#9d775f',
'#fae800',
'#5f9b3c'
]
}, },
{ {
name: this.$t('chart.color_classical'), name: this.$t('chart.color_classical'),
value: 'classical', value: 'classical',
colors: ['#007bbb', '#ffdb4f', '#dd4b4b', '#2ca9e1', '#ef8b07', '#4a488e', '#82ae46', '#dd4b4b', '#bb9581'] colors: [
'#007bbb',
'#ffdb4f',
'#dd4b4b',
'#2ca9e1',
'#ef8b07',
'#4a488e',
'#82ae46',
'#dd4b4b',
'#bb9581'
]
}, },
{ {
name: this.$t('chart.color_fresh'), name: this.$t('chart.color_fresh'),
value: 'fresh', value: 'fresh',
colors: ['#5f9b3c', '#75c24b', '#83d65f', '#aacf53', '#c7dc68', '#d8e698', '#e0ebaf', '#bbc8e6', '#e5e5e5'] colors: [
'#5f9b3c',
'#75c24b',
'#83d65f',
'#aacf53',
'#c7dc68',
'#d8e698',
'#e0ebaf',
'#bbc8e6',
'#e5e5e5'
]
}, },
{ {
name: this.$t('chart.color_energy'), name: this.$t('chart.color_energy'),
value: 'energy', value: 'energy',
colors: ['#ef8b07', '#2a83a2', '#f07474', '#c55784', '#274a78', '#7058a3', '#0095d9', '#75c24b', '#808080'] colors: [
'#ef8b07',
'#2a83a2',
'#f07474',
'#c55784',
'#274a78',
'#7058a3',
'#0095d9',
'#75c24b',
'#808080'
]
}, },
{ {
name: this.$t('chart.color_red'), name: this.$t('chart.color_red'),
value: 'red', value: 'red',
colors: ['#ff0000', '#ef8b07', '#4c6cb3', '#f8e944', '#69821b', '#9c5ec3', '#00ccdf', '#f07474', '#bb9581'] colors: [
'#ff0000',
'#ef8b07',
'#4c6cb3',
'#f8e944',
'#69821b',
'#9c5ec3',
'#00ccdf',
'#f07474',
'#bb9581'
]
}, },
{ {
name: this.$t('chart.color_fast'), name: this.$t('chart.color_fast'),
value: 'fast', value: 'fast',
colors: ['#fae800', '#00c039', '#0482dc', '#bb9581', '#ff7701', '#9c5ec3', '#00ccdf', '#00c039', '#ff7701'] colors: [
'#fae800',
'#00c039',
'#0482dc',
'#bb9581',
'#ff7701',
'#9c5ec3',
'#00ccdf',
'#00c039',
'#ff7701'
]
}, },
{ {
name: this.$t('chart.color_spiritual'), name: this.$t('chart.color_spiritual'),
value: 'spiritual', value: 'spiritual',
colors: ['#00a3af', '#4da798', '#57baaa', '#62d0bd', '#6ee4d0', '#86e7d6', '#aeede1', '#bde1e6', '#e5e5e5'] colors: [
'#00a3af',
'#4da798',
'#57baaa',
'#62d0bd',
'#6ee4d0',
'#86e7d6',
'#aeede1',
'#bde1e6',
'#e5e5e5'
]
} }
], ],
colorForm: JSON.parse(JSON.stringify(DEFAULT_COLOR_CASE)), colorForm: JSON.parse(JSON.stringify(DEFAULT_COLOR_CASE)),
...@@ -475,6 +687,17 @@ export default { ...@@ -475,6 +687,17 @@ export default {
{ name: this.$t('chart.map_style_macaron'), value: 'macaron' }, { name: this.$t('chart.map_style_macaron'), value: 'macaron' },
{ name: this.$t('chart.map_style_blue'), value: 'blue' }, { name: this.$t('chart.map_style_blue'), value: 'blue' },
{ name: this.$t('chart.map_style_wine'), value: 'wine' } { name: this.$t('chart.map_style_wine'), value: 'wine' }
],
theme: null,
themeList: [
{
label: this.$t('amap.light'),
value: 'light'
},
{
label: this.$t('amap.dark'),
value: 'dark'
}
] ]
} }
}, },
...@@ -483,19 +706,21 @@ export default { ...@@ -483,19 +706,21 @@ export default {
const chart = this.chart const chart = this.chart
if (chart.type === 'flow-map') { if (chart.type === 'flow-map') {
let customAttr = null let customAttr = null
if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') { if (
Object.prototype.toString.call(chart.customAttr) === '[object Object]'
) {
customAttr = JSON.parse(JSON.stringify(chart.customAttr)) customAttr = JSON.parse(JSON.stringify(chart.customAttr))
} else { } else {
customAttr = JSON.parse(chart.customAttr) customAttr = JSON.parse(chart.customAttr)
} }
return customAttr.size.mapLineAnimate && equalsAny(customAttr.size.mapLineType, 'line', 'arc') return (
customAttr.size.mapLineAnimate &&
equalsAny(customAttr.size.mapLineType, 'line', 'arc')
)
} }
return false return false
}, },
...mapState([ ...mapState(['batchOptStatus', 'componentViewsData'])
'batchOptStatus',
'componentViewsData'
])
}, },
watch: { watch: {
'chart.id': { 'chart.id': {
...@@ -504,7 +729,7 @@ export default { ...@@ -504,7 +729,7 @@ export default {
this.colorIndex = 0 this.colorIndex = 0
} }
}, },
'chart': { chart: {
handler: function() { handler: function() {
this.init() this.init()
} }
...@@ -520,14 +745,14 @@ export default { ...@@ -520,14 +745,14 @@ export default {
methods: { methods: {
gradientColorChange(colorDto) { gradientColorChange(colorDto) {
const modifyNames = ['value', 'colors', 'seriesColors'] const modifyNames = ['value', 'colors', 'seriesColors']
modifyNames.forEach(item => { modifyNames.forEach((item) => {
this.colorForm['modifyName'] = item this.colorForm['modifyName'] = item
this.$emit('onColorChange', this.colorForm) this.$emit('onColorChange', this.colorForm)
}) })
}, },
changeColorOption(modifyName = 'value') { changeColorOption(modifyName = 'value') {
const that = this const that = this
const items = this.colorCases.filter(ele => { const items = this.colorCases.filter((ele) => {
return ele.value === that.colorForm.value return ele.value === that.colorForm.value
}) })
this.colorForm.colors = JSON.parse(JSON.stringify(items[0].colors)) this.colorForm.colors = JSON.parse(JSON.stringify(items[0].colors))
...@@ -542,6 +767,7 @@ export default { ...@@ -542,6 +767,7 @@ export default {
this.changeColorCase(modifyName) this.changeColorCase(modifyName)
}, },
changeColorCase(modifyName) { changeColorCase(modifyName) {
console.log(6666666)
this.colorForm['modifyName'] = modifyName this.colorForm['modifyName'] = modifyName
this.$emit('onColorChange', this.colorForm) this.$emit('onColorChange', this.colorForm)
this.colorForm['modifyName'] = 'colors' this.colorForm['modifyName'] = 'colors'
...@@ -551,7 +777,9 @@ export default { ...@@ -551,7 +777,9 @@ export default {
const chart = JSON.parse(JSON.stringify(this.chart)) const chart = JSON.parse(JSON.stringify(this.chart))
if (chart.customAttr) { if (chart.customAttr) {
let customAttr = null let customAttr = null
if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') { if (
Object.prototype.toString.call(chart.customAttr) === '[object Object]'
) {
customAttr = JSON.parse(JSON.stringify(chart.customAttr)) customAttr = JSON.parse(JSON.stringify(chart.customAttr))
} else { } else {
customAttr = JSON.parse(chart.customAttr) customAttr = JSON.parse(chart.customAttr)
...@@ -563,15 +791,35 @@ export default { ...@@ -563,15 +791,35 @@ export default {
this.colorIndex = 0 this.colorIndex = 0
} }
this.colorForm.tableBorderColor = this.colorForm.tableBorderColor ? this.colorForm.tableBorderColor : DEFAULT_COLOR_CASE.tableBorderColor this.colorForm.tableBorderColor = this.colorForm.tableBorderColor
this.colorForm.tableHeaderFontColor = this.colorForm.tableHeaderFontColor ? this.colorForm.tableHeaderFontColor : this.colorForm.tableFontColor ? this.colorForm.tableBorderColor
this.$set(this.colorForm, 'gradient', this.colorForm.gradient || false) : DEFAULT_COLOR_CASE.tableBorderColor
this.colorForm.tableScrollBarColor = this.colorForm.tableScrollBarColor ? this.colorForm.tableScrollBarColor : DEFAULT_COLOR_CASE.tableScrollBarColor this.colorForm.tableHeaderFontColor = this.colorForm
.tableHeaderFontColor
? this.colorForm.tableHeaderFontColor
: this.colorForm.tableFontColor
this.$set(
this.colorForm,
'gradient',
this.colorForm.gradient || false
)
this.colorForm.tableScrollBarColor = this.colorForm
.tableScrollBarColor
? this.colorForm.tableScrollBarColor
: DEFAULT_COLOR_CASE.tableScrollBarColor
this.colorForm.mapStyle = this.colorForm.mapStyle ? this.colorForm.mapStyle : DEFAULT_COLOR_CASE.mapStyle this.colorForm.mapStyle = this.colorForm.mapStyle
this.colorForm.mapLineGradient = this.colorForm.mapLineGradient ? this.colorForm.mapLineGradient : DEFAULT_COLOR_CASE.mapLineGradient ? this.colorForm.mapStyle
this.colorForm.mapLineSourceColor = this.colorForm.mapLineSourceColor ? this.colorForm.mapLineSourceColor : DEFAULT_COLOR_CASE.mapLineSourceColor : DEFAULT_COLOR_CASE.mapStyle
this.colorForm.mapLineTargetColor = this.colorForm.mapLineTargetColor ? this.colorForm.mapLineTargetColor : DEFAULT_COLOR_CASE.mapLineTargetColor this.colorForm.mapLineGradient = this.colorForm.mapLineGradient
? this.colorForm.mapLineGradient
: DEFAULT_COLOR_CASE.mapLineGradient
this.colorForm.mapLineSourceColor = this.colorForm.mapLineSourceColor
? this.colorForm.mapLineSourceColor
: DEFAULT_COLOR_CASE.mapLineSourceColor
this.colorForm.mapLineTargetColor = this.colorForm.mapLineTargetColor
? this.colorForm.mapLineTargetColor
: DEFAULT_COLOR_CASE.mapLineTargetColor
this.initCustomColor() this.initCustomColor()
} }
...@@ -603,17 +851,27 @@ export default { ...@@ -603,17 +851,27 @@ export default {
}, },
initCustomColor(reset) { initCustomColor(reset) {
if (!this.batchOptStatus && this.chart.render && this.chart.render === 'antv' && if (
!this.batchOptStatus &&
this.chart.render &&
this.chart.render === 'antv' &&
(this.chart.type.includes('bar') || (this.chart.type.includes('bar') ||
this.chart.type.includes('line') || this.chart.type.includes('line') ||
this.chart.type.includes('area') || this.chart.type.includes('area') ||
this.chart.type.includes('pie') || this.chart.type.includes('pie') ||
this.chart.type === 'funnel' || this.chart.type === 'funnel' ||
this.chart.type === 'radar' || this.chart.type === 'radar' ||
this.chart.type === 'scatter')) { this.chart.type === 'scatter')
) {
if (this.componentViewsData[this.chart.id]) { if (this.componentViewsData[this.chart.id]) {
const chart = JSON.parse(JSON.stringify(this.componentViewsData[this.chart.id])) const chart = JSON.parse(
this.colorForm.seriesColors = getColors(chart, this.colorForm.colors, reset) JSON.stringify(this.componentViewsData[this.chart.id])
)
this.colorForm.seriesColors = getColors(
chart,
this.colorForm.colors,
reset
)
} }
} }
} }
...@@ -628,7 +886,7 @@ export default { ...@@ -628,7 +886,7 @@ export default {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center align-items: center;
} }
.form-item-slider ::v-deep .el-form-item__label { .form-item-slider ::v-deep .el-form-item__label {
...@@ -645,7 +903,7 @@ export default { ...@@ -645,7 +903,7 @@ export default {
} }
span { span {
font-size: 12px font-size: 12px;
} }
.el-form-item { .el-form-item {
......
src/views/chart/view/ChartEdit.vue
This source diff could not be displayed because it is too large. You can view the blob instead.
static/svg/marker.svg 0 → 100644
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16">
<defs>
<clipPath id="master_svg0_29_08980">
<rect x="0" y="0" width="16" height="16" rx="0"/>
</clipPath>
</defs>
<g clip-path="url(#master_svg0_29_08980)">
<g>
<path d="M8.06745609375,1.02983903885C5.11671609375,1.04304715625,2.72670529375,3.45439515625,2.73980069165,6.40546515625C2.75210569375,9.17445515625,7.16127609375,14.16478515625,7.66409609375,14.72448515625C7.91233609375,15.00178515625,8.347036093749999,14.99988515625,8.592846093750001,14.72038515625C9.090696093750001,14.15618515625,13.45534609375,9.12681515625,13.44304609375,6.35771515625C13.42994609375,3.40675515625,11.01841609375,1.01674315625,8.06745609375,1.02983903885ZM8.101766093750001,8.73079515625C6.90670609375,8.73609515625,5.92975609375,7.76805515625,5.924446093749999,6.57288515625C5.919146093749999,5.37771515625,6.88740609375,4.40098515625,8.08235609375,4.39578515625C9.27786609375,4.390365156250001,10.25459609375,5.35840515625,10.25990609375,6.55346515625C10.265206093749999,7.74875515625,9.29716609375,8.72537515625,8.101766093750001,8.73079515625Z" fill="#1890FF" fill-opacity="1"/>
</g>
</g>
</svg>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论