Skip to content

Y
yqlh-dataEase
Commit dcae35ac by cwx
Options

高德地图插件

parent 621bbde4
正在显示 包含 1067 行增加 和 708 行删除
src/components/canvas/customComponent/UserView.vue
......@@ -3,9 +3,9 @@
v-loading="loadingFlag"
:class="[
{
['active']: active
['active']: active,
},
'rect-shape'
'rect-shape',
]"
>
<EditBarView
......@@ -18,21 +18,24 @@
:view-id="element.propValue.viewId"
@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">
{{ message }},{{ $t('chart.chart_show_error') }}
<br>
{{ $t('chart.chart_error_tips') }}
{{ message }},{{ $t("chart.chart_show_error") }}
<br />
{{ $t("chart.chart_error_tips") }}
</div>
</div>
<plugin-com
v-if="chart.isPlugin"
:ref="element.propValue.id"
:component-name="chart.type + '-view'"
:obj="{active, chart, trackMenu, searchCount, terminalType: scaleCoefficientType}"
:obj="{
active,
chart,
trackMenu,
searchCount,
terminalType: scaleCoefficientType,
}"
:chart="chart"
:track-menu="trackMenu"
:in-screen="inScreen"
......@@ -119,14 +122,19 @@
@onChartClick="chartClick"
@onJumpClick="jumpClick"
/>
<div style="position: absolute;left: 8px;bottom:8px;">
<a-map
v-else-if="aMapShowFlag"
:ref="element.propValue.id"
class="amap-class"
map-data="地图1"
/>
<div style="position: absolute; left: 8px; bottom: 8px">
<drill-path
:drill-filters="drillFilters"
:theme-style="element.commonBackground"
@onDrillJump="drillJump"
/>
</div>
<!--dialog-->
<!--视图详情-->
<el-dialog
......@@ -140,27 +148,37 @@
>
<span
v-if="chartDetailsVisible"
style="position: absolute;right: 70px;top:15px"
style="position: absolute; right: 70px; top: 15px"
>
<el-button
v-if="showChartInfoType==='enlarge' && hasDataPermission('export',panelInfo.privileges)&& showChartInfo && !equalsAny(showChartInfo.type, 'symbol-map', 'flow-map')"
v-if="
showChartInfoType === 'enlarge' &&
hasDataPermission('export', panelInfo.privileges) &&
showChartInfo &&
!equalsAny(showChartInfo.type, 'symbol-map', 'flow-map')
"
class="el-icon-picture-outline"
size="mini"
:disabled="imageDownloading"
@click="exportViewImg"
>
{{ $t('chart.export_img') }}
{{ $t("chart.export_img") }}
</el-button>
<el-button
v-if="showChartInfoType==='details' && hasDataPermission('export',panelInfo.privileges)"
v-if="
showChartInfoType === 'details' &&
hasDataPermission('export', panelInfo.privileges)
"
size="mini"
:disabled="$store.getters.loadingMap[$store.getters.currentPath] || dialogLoading"
:disabled="
$store.getters.loadingMap[$store.getters.currentPath] ||
dialogLoading
"
@click="exportExcel"
>
<svg-icon
icon-class="ds-excel"
class="ds-icon-excel"
/>{{ $t('chart.export') }}Excel
<svg-icon icon-class="ds-excel" class="ds-icon-excel" />{{
$t("chart.export")
}}Excel
</el-button>
</span>
<user-view-dialog
......@@ -192,37 +210,43 @@
</template>
<script>
import { viewData } from '@/api/panel/panel'
import { viewInfo } from '@/api/link'
import ChartComponent from '@/views/chart/components/ChartComponent.vue'
import TableNormal from '@/views/chart/components/table/TableNormal'
import LabelNormal from '../../../views/chart/components/normal/LabelNormal'
import { uuid } from 'vue-uuid'
import bus from '@/utils/bus'
import { mapState } from 'vuex'
import { isChange } from '@/utils/conditionUtil'
import { BASE_CHART_STRING } from '@/views/chart/chart/chart'
import { deepCopy } from '@/components/canvas/utils/utils'
import { getLinkToken, getToken } from '@/utils/auth'
import DrillPath from '@/views/chart/view/DrillPath'
import { areaMapping } from '@/api/map/map'
import ChartComponentG2 from '@/views/chart/components/ChartComponentG2'
import EditBarView from '@/components/canvas/components/editor/EditBarView'
import { adaptCurTheme, customAttrTrans, customStyleTrans, recursionTransObj } from '@/components/canvas/utils/style'
import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
import PluginCom from '@/views/system/plugin/PluginCom'
import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
import { viewEditSave, viewPropsSave } from '@/api/chart/chart'
import { checkAddHttp } from '@/utils/urlUtils'
import DeRichTextView from '@/components/canvas/customComponent/DeRichTextView'
import Vue from 'vue'
import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
import UserViewDialog from '@/components/canvas/customComponent/UserViewDialog'
import UserViewMobileDialog from '@/components/canvas/customComponent/UserViewMobileDialog'
import { equalsAny } from '@/utils/StringUtils'
import { viewData } from "@/api/panel/panel";
import { viewInfo } from "@/api/link";
import ChartComponent from "@/views/chart/components/ChartComponent.vue";
import TableNormal from "@/views/chart/components/table/TableNormal";
import LabelNormal from "../../../views/chart/components/normal/LabelNormal";
import { uuid } from "vue-uuid";
import bus from "@/utils/bus";
import { mapState } from "vuex";
import { isChange } from "@/utils/conditionUtil";
import { BASE_CHART_STRING } from "@/views/chart/chart/chart";
import { deepCopy } from "@/components/canvas/utils/utils";
import { getLinkToken, getToken } from "@/utils/auth";
import DrillPath from "@/views/chart/view/DrillPath";
import { areaMapping } from "@/api/map/map";
import ChartComponentG2 from "@/views/chart/components/ChartComponentG2";
import AMap from "@/views/chart/components/AMap";
import EditBarView from "@/components/canvas/components/editor/EditBarView";
import {
adaptCurTheme,
customAttrTrans,
customStyleTrans,
recursionTransObj,
} from "@/components/canvas/utils/style";
import ChartComponentS2 from "@/views/chart/components/ChartComponentS2";
import PluginCom from "@/views/system/plugin/PluginCom";
import LabelNormalText from "@/views/chart/components/normal/LabelNormalText";
import { viewEditSave, viewPropsSave } from "@/api/chart/chart";
import { checkAddHttp } from "@/utils/urlUtils";
import DeRichTextView from "@/components/canvas/customComponent/DeRichTextView";
import Vue from "vue";
import { formatterItem, valueFormatter } from "@/views/chart/chart/formatter";
import UserViewDialog from "@/components/canvas/customComponent/UserViewDialog";
import UserViewMobileDialog from "@/components/canvas/customComponent/UserViewMobileDialog";
import { equalsAny } from "@/utils/StringUtils";
export default {
name: 'UserView',
name: "UserView",
components: {
UserViewMobileDialog,
UserViewDialog,
......@@ -235,78 +259,79 @@ export default {
TableNormal,
LabelNormal,
DrillPath,
ChartComponentG2
ChartComponentG2,
AMap,
},
props: {
inScreen: {
type: Boolean,
required: false,
default: true
default: true,
},
canvasId: {
type: String,
required: true
required: true,
},
element: {
type: Object,
default: null
default: null,
},
outStyle: {
type: Object,
required: false,
default: function() {
return {}
}
default: function () {
return {};
},
},
searchCount: {
type: Number,
required: false,
default: 0
default: 0,
},
active: {
type: Boolean,
required: false,
default: false
default: false,
},
componentIndex: {
type: Number,
required: false
required: false,
},
inTab: {
type: Boolean,
required: false,
default: false
default: false,
},
isEdit: {
type: Boolean,
require: false,
default: true
default: true,
},
terminal: {
type: String,
default: 'pc'
default: "pc",
},
filters: {
type: Array,
default: () => []
default: () => [],
},
canvasStyleData: {
type: Object,
required: false,
default: function() {
return {}
}
default: function () {
return {};
},
},
showPosition: {
type: String,
required: false,
default: 'NotProvided'
default: "NotProvided",
},
editMode: {
type: String,
require: false,
default: 'preview'
}
default: "preview",
},
},
data() {
return {
......@@ -317,7 +342,7 @@ export default {
chartDetailsVisible: false,
showChartInfo: {},
showChartTableInfo: {},
showChartInfoType: 'details',
showChartInfoType: "details",
dataRowNameSelect: {},
dataRowSelect: {},
curFields: [],
......@@ -325,7 +350,7 @@ export default {
refId: null,
getDataLoading: false,
chart: BASE_CHART_STRING,
requestStatus: 'success',
requestStatus: "success",
message: null,
drillClickDimensionList: [],
drillFilters: [],
......@@ -333,7 +358,7 @@ export default {
places: [],
httpRequest: {
status: true,
msg: ''
msg: "",
},
timeMachine: null,
scaleTimeMachine: null,
......@@ -352,886 +377,1110 @@ export default {
currentPage: {
page: 1,
pageSize: 20,
show: 0
show: 0,
},
view: {},
cancelTime: null
}
cancelTime: null,
};
},
computed: {
// 首次加载且非编辑状态新复制的视图，使用外部filter
initLoad() {
return !(this.isEdit && this.currentCanvasNewId.includes(this.element.id)) && this.isFirstLoad
return (
!(this.isEdit && this.currentCanvasNewId.includes(this.element.id)) &&
this.isFirstLoad
);
},
scaleCoefficient() {
if (this.terminal === 'pc' && !this.mobileLayoutStatus) {
return 1.1
if (this.terminal === "pc" && !this.mobileLayoutStatus) {
return 1.1;
} else {
return 4.5
return 4.5;
}
},
scaleCoefficientType() {
if (this.terminal === 'pc' && !this.mobileLayoutStatus) {
return 'pc'
if (this.terminal === "pc" && !this.mobileLayoutStatus) {
return "pc";
} else {
return 'mobile'
return "mobile";
}
},
editBarViewShowFlag() {
return (this.active && this.inTab && !this.mobileLayoutStatus) && !this.showPosition.includes('multiplexing') || this.showPosition.includes('email-task')
return (
(this.active &&
this.inTab &&
!this.mobileLayoutStatus &&
!this.showPosition.includes("multiplexing")) ||
this.showPosition.includes("email-task")
);
},
richTextViewShowFlag() {
return this.httpRequest.status && this.chart.type && this.chart.type === 'richTextView'
return (
this.httpRequest.status &&
this.chart.type &&
this.chart.type === "richTextView"
);
},
charViewShowFlag() {
return this.httpRequest.status && this.chart.type && !this.chart.type.includes('table') && !this.chart.type.includes('text') && this.chart.type !== 'label' && this.renderComponent() === 'echarts'
return (
this.httpRequest.status &&
this.chart.type &&
!this.chart.type.includes("table") &&
!this.chart.type.includes("text") &&
this.chart.type !== "label" &&
this.renderComponent() === "echarts"
);
},
charViewG2ShowFlag() {
return this.httpRequest.status && this.chart.type && !this.chart.type.includes('table') && !this.chart.type.includes('text') && this.chart.type !== 'label' && this.renderComponent() === 'antv'
console.log("g2", this);
return (
this.httpRequest.status &&
this.chart.type &&
!this.chart.type.includes("table") &&
!this.chart.type.includes("text") &&
this.chart.type !== "label" &&
this.renderComponent() === "antv"
);
},
aMapShowFlag() {
console.log("map", this);
return this.chart.type === "map";
},
charViewS2ShowFlag() {
return this.httpRequest.status && this.chart.type && this.chart.type.includes('table') && !this.chart.type.includes('text') && this.chart.type !== 'label' && this.renderComponent() === 'antv'
return (
this.httpRequest.status &&
this.chart.type &&
this.chart.type.includes("table") &&
!this.chart.type.includes("text") &&
this.chart.type !== "label" &&
this.renderComponent() === "antv"
);
},
tableShowFlag() {
return this.httpRequest.status && this.chart.type && this.chart.type.includes('table') && this.renderComponent() === 'echarts'
return (
this.httpRequest.status &&
this.chart.type &&
this.chart.type.includes("table") &&
this.renderComponent() === "echarts"
);
},
labelShowFlag() {
return this.httpRequest.status && this.chart.type && this.chart.type.includes('text')
return (
this.httpRequest.status &&
this.chart.type &&
this.chart.type.includes("text")
);
},
labelTextShowFlag() {
return this.httpRequest.status && this.chart.type && this.chart.type === 'label'
return (
this.httpRequest.status &&
this.chart.type &&
this.chart.type === "label"
);
},
loadingFlag() {
return (this.canvasStyleData.refreshViewLoading || (!this.innerRefreshTimer && this.searchCount === 0)) && this.requestStatus === 'waiting'
return (
(this.canvasStyleData.refreshViewLoading ||
(!this.innerRefreshTimer && this.searchCount === 0)) &&
this.requestStatus === "waiting"
);
},
panelInfo() {
return this.$store.state.panel.panelInfo
return this.$store.state.panel.panelInfo;
},
filter() {
const filter = {}
filter.filter = this.initLoad ? this.filters : this.cfilters
filter.linkageFilters = this.element.linkageFilters
filter.outerParamsFilters = this.element.outerParamsFilters
filter.drill = this.drillClickDimensionList
filter.resultCount = this.resultCount
filter.resultMode = this.resultMode
filter.queryFrom = 'panel'
return filter
const filter = {};
filter.filter = this.initLoad ? this.filters : this.cfilters;
filter.linkageFilters = this.element.linkageFilters;
filter.outerParamsFilters = this.element.outerParamsFilters;
filter.drill = this.drillClickDimensionList;
filter.resultCount = this.resultCount;
filter.resultMode = this.resultMode;
filter.queryFrom = "panel";
return filter;
},
cfilters() {
// 必要 勿删勿该 watch数组，哪怕发生变化 oldValue等于newValue ，深拷贝解决
if (!this.element.filters) return []
return JSON.parse(JSON.stringify(this.element.filters))
if (!this.element.filters) return [];
return JSON.parse(JSON.stringify(this.element.filters));
},
linkageFilters() {
// 必要 勿删勿该 watch数组，哪怕发生变化 oldValue等于newValue ，深拷贝解决
if (!this.element.linkageFilters) return []
return JSON.parse(JSON.stringify(this.element.linkageFilters))
if (!this.element.linkageFilters) return [];
return JSON.parse(JSON.stringify(this.element.linkageFilters));
},
trackMenu() {
const trackMenuInfo = []
let linkageCount = 0
let jumpCount = 0
if (this.drillFilters.length && !this.chart.type.includes('table')) {
const checkItem = this.drillFields[this.drillFilters.length]
const sourceInfo = this.chart.id + '#' + checkItem.id
const trackMenuInfo = [];
let linkageCount = 0;
let jumpCount = 0;
if (this.drillFilters.length && !this.chart.type.includes("table")) {
const checkItem = this.drillFields[this.drillFilters.length];
const sourceInfo = this.chart.id + "#" + checkItem.id;
if (this.nowPanelTrackInfo[sourceInfo]) {
linkageCount++
linkageCount++;
}
if (this.nowPanelJumpInfo[sourceInfo]) {
jumpCount++
jumpCount++;
}
} else {
this.chart.data && this.chart.data.fields && this.chart.data.fields.forEach(item => {
const sourceInfo = this.chart.id + '#' + item.id
this.chart.data &&
this.chart.data.fields &&
this.chart.data.fields.forEach((item) => {
const sourceInfo = this.chart.id + "#" + item.id;
if (this.nowPanelTrackInfo[sourceInfo]) {
linkageCount++
linkageCount++;
}
})
this.chart.data && this.chart.data.fields && this.chart.data.fields.forEach(item => {
const sourceInfo = this.chart.id + '#' + item.id
});
this.chart.data &&
this.chart.data.fields &&
this.chart.data.fields.forEach((item) => {
const sourceInfo = this.chart.id + "#" + item.id;
if (this.nowPanelJumpInfo[sourceInfo]) {
jumpCount++
jumpCount++;
}
})
});
}
jumpCount && trackMenuInfo.push('jump')
linkageCount && trackMenuInfo.push('linkage')
this.drillFields.length && trackMenuInfo.push('drill')
return trackMenuInfo
jumpCount && trackMenuInfo.push("jump");
linkageCount && trackMenuInfo.push("linkage");
this.drillFields.length && trackMenuInfo.push("drill");
return trackMenuInfo;
},
chartType() {
return this.chart.type
return this.chart.type;
},
hw() {
return this.outStyle.width * this.outStyle.height
return this.outStyle.width * this.outStyle.height;
},
resultMode() {
return this.canvasStyleData.panel && this.canvasStyleData.panel.resultMode || null
return (
(this.canvasStyleData.panel && this.canvasStyleData.panel.resultMode) ||
null
);
},
resultCount() {
return this.canvasStyleData.panel && this.canvasStyleData.panel.resultCount || null
return (
(this.canvasStyleData.panel &&
this.canvasStyleData.panel.resultCount) ||
null
);
},
gap() {
return this.canvasStyleData.panel && this.canvasStyleData.panel.gap || null
return (
(this.canvasStyleData.panel && this.canvasStyleData.panel.gap) || null
);
},
innerPadding() {
return this.element.commonBackground && this.element.commonBackground.innerPadding || 0
return (
(this.element.commonBackground &&
this.element.commonBackground.innerPadding) ||
0
);
},
...mapState([
'currentCanvasNewId',
'nowPanelTrackInfo',
'nowPanelJumpInfo',
'publicLinkStatus',
'previewCanvasScale',
'mobileLayoutStatus',
'panelViewDetailsInfo',
'componentViewsData',
'curBatchOptComponents'
])
"currentCanvasNewId",
"nowPanelTrackInfo",
"nowPanelJumpInfo",
"publicLinkStatus",
"previewCanvasScale",
"mobileLayoutStatus",
"panelViewDetailsInfo",
"componentViewsData",
"curBatchOptComponents",
]),
},
watch: {
'innerPadding': {
handler: function(val1, val2) {
innerPadding: {
handler: function (val1, val2) {
if (val1 !== val2) {
this.resizeChart()
this.resizeChart();
}
},
deep: true
deep: true,
},
'cfilters': {
handler: function(val1, val2) {
cfilters: {
handler: function (val1, val2) {
if (isChange(val1, val2) && !this.isFirstLoad) {
this.getData(this.element.propValue.viewId)
this.getDataLoading = true
this.getData(this.element.propValue.viewId);
this.getDataLoading = true;
}
},
deep: true
deep: true,
},
linkageFilters: {
handler(newVal, oldVal) {
if (isChange(newVal, oldVal)) {
this.getData(this.element.propValue.viewId)
this.getData(this.element.propValue.viewId);
}
},
deep: true
deep: true,
},
resultCount: function() {
this.getData(this.element.propValue.viewId, false)
resultCount: function () {
this.getData(this.element.propValue.viewId, false);
},
resultMode: function() {
this.getData(this.element.propValue.viewId, false)
resultMode: function () {
this.getData(this.element.propValue.viewId, false);
},
gap: function() {
this.resizeChart()
gap: function () {
this.resizeChart();
},
// 监听外部的样式变化 （非实时性要求）
'hw': {
hw: {
handler(newVal, oldVla) {
if (newVal !== oldVla && this.$refs[this.element.propValue.id]) {
this.resizeChart()
this.resizeChart();
}
},
deep: true
deep: true,
},
// 监听外部的样式变化 （非实时性要求）
outStyle: {
handler(newVal, oldVla) {
},
deep: true
handler(newVal, oldVla) {},
deep: true,
},
// 监听外部计时器变化
searchCount: function(val1) {
searchCount: function (val1) {
// 内部计时器启动 忽略外部计时器
if (val1 > 0 && this.requestStatus !== 'waiting' && !this.innerRefreshTimer) {
this.getData(this.element.propValue.viewId)
if (
val1 > 0 &&
this.requestStatus !== "waiting" &&
!this.innerRefreshTimer
) {
this.getData(this.element.propValue.viewId);
}
},
'chartType': function(newVal, oldVal) {
if ((newVal === 'map' || newVal === 'buddle-map') && newVal !== oldVal) {
this.initAreas()
chartType: function (newVal, oldVal) {
if ((newVal === "map" || newVal === "buddle-map") && newVal !== oldVal) {
this.initAreas();
}
},
// 监控缩放比例
previewCanvasScale: {
handler(newVal, oldVal) {
this.destroyScaleTimeMachine()
this.changeScaleIndex++
this.chartScale(this.changeScaleIndex)
this.destroyScaleTimeMachine();
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() {
bus.$on('tab-canvas-change', this.tabSwitch)
this.bindPluginEvent()
bus.$on("tab-canvas-change", this.tabSwitch);
this.bindPluginEvent();
},
beforeDestroy() {
console.log(777777);
for (const key in this.chart) {
this.$delete(this.chart, key)
this.$delete(this.chart, key);
}
for (const key in this.view) {
this.$delete(this.view, key)
}
this.innerRefreshTimer && clearInterval(this.innerRefreshTimer)
bus.$off('plugin-chart-click', this.pluginChartClick)
bus.$off('plugin-jump-click', this.pluginJumpClick)
bus.$off('plugin-add-view-track-filter', this.pluginAddViewTrackFilter)
bus.$off('view-in-cache', this.viewInCache)
bus.$off('batch-opt-change', this.batchOptChange)
bus.$off('onSubjectChange', this.optFromBatchThemeChange)
bus.$off('onThemeColorChange', this.optFromBatchThemeChange)
bus.$off('onThemeAttrChange', this.optFromBatchSingleProp)
bus.$off('clear_panel_linkage', this.clearPanelLinkage)
bus.$off('tab-canvas-change', this.tabSwitch)
this.$delete(this.view, key);
}
this.innerRefreshTimer && clearInterval(this.innerRefreshTimer);
bus.$off("plugin-chart-click", this.pluginChartClick);
bus.$off("plugin-jump-click", this.pluginJumpClick);
bus.$off("plugin-add-view-track-filter", this.pluginAddViewTrackFilter);
bus.$off("view-in-cache", this.viewInCache);
bus.$off("batch-opt-change", this.batchOptChange);
bus.$off("onSubjectChange", this.optFromBatchThemeChange);
bus.$off("onThemeColorChange", this.optFromBatchThemeChange);
bus.$off("onThemeAttrChange", this.optFromBatchSingleProp);
bus.$off("clear_panel_linkage", this.clearPanelLinkage);
bus.$off("tab-canvas-change", this.tabSwitch);
},
created() {
this.refId = uuid.v1
if (this.element && this.element.propValue && this.element.propValue.viewId) {
this.refId = uuid.v1;
if (
this.element &&
this.element.propValue &&
this.element.propValue.viewId
) {
// 如果watch.filters 已经进行数据初始化时候，此处放弃数据初始化
this.getData(this.element.propValue.viewId, false)
this.getData(this.element.propValue.viewId, false);
}
},
methods: {
equalsAny,
tabSwitch(tabCanvasId) {
if (this.charViewS2ShowFlag && tabCanvasId === this.canvasId && this.$refs[this.element.propValue.id]) {
this.$refs[this.element.propValue.id].chartResize()
if (
this.charViewS2ShowFlag &&
tabCanvasId === this.canvasId &&
this.$refs[this.element.propValue.id]
) {
this.$refs[this.element.propValue.id].chartResize();
}
},
// 编辑状态下 不启动刷新
buildInnerRefreshTimer(refreshViewEnable = false, refreshUnit = 'minute', refreshTime = 5) {
if (this.editMode === 'preview' && !this.innerRefreshTimer && refreshViewEnable) {
this.innerRefreshTimer && clearInterval(this.innerRefreshTimer)
const timerRefreshTime = refreshUnit === 'second' ? refreshTime * 1000 : refreshTime * 60000
buildInnerRefreshTimer(
refreshViewEnable = false,
refreshUnit = "minute",
refreshTime = 5
) {
if (
this.editMode === "preview" &&
!this.innerRefreshTimer &&
refreshViewEnable
) {
this.innerRefreshTimer && clearInterval(this.innerRefreshTimer);
const timerRefreshTime =
refreshUnit === "second" ? refreshTime * 1000 : refreshTime * 60000;
this.innerRefreshTimer = setInterval(() => {
this.clearViewLinkage()
this.getData(this.element.propValue.viewId)
}, timerRefreshTime)
this.clearViewLinkage();
this.getData(this.element.propValue.viewId);
}, timerRefreshTime);
}
},
clearViewLinkage() {
this.$store.commit('clearViewLinkage', this.element.propValue.viewId)
this.$store.commit("clearViewLinkage", this.element.propValue.viewId);
},
responseResetButton() {
if (!this.cfilters?.length) {
this.getData(this.element.propValue.viewId, false)
this.getData(this.element.propValue.viewId, false);
}
},
exportExcel() {
this.dialogLoading = true
this.$refs['userViewDialog'].exportExcel(() => {
this.dialogLoading = false
})
this.dialogLoading = true;
this.$refs["userViewDialog"].exportExcel(() => {
this.dialogLoading = false;
});
},
exportViewImg() {
this.imageDownloading = true
this.$refs['userViewDialog'].exportViewImg(() => {
this.imageDownloading = false
})
this.imageDownloading = true;
this.$refs["userViewDialog"].exportViewImg(() => {
this.imageDownloading = false;
});
},
pluginEditHandler(e) {
this.$emit('trigger-plugin-edit', { e, id: this.element.id })
this.$emit("trigger-plugin-edit", { e, id: this.element.id });
},
batchOptChange(param) {
if (this.curBatchOptComponents.includes(this.element.propValue.viewId)) {
this.optFromBatchSingleProp(param)
this.optFromBatchSingleProp(param);
}
},
optFromBatchSingleProp(param) {
this.$store.commit('canvasChange')
const updateParams = { 'id': this.chart.id }
if (param.custom === 'customAttr') {
const sourceCustomAttr = JSON.parse(this.sourceCustomAttrStr)
this.$store.commit("canvasChange");
const updateParams = { id: this.chart.id };
if (param.custom === "customAttr") {
const sourceCustomAttr = JSON.parse(this.sourceCustomAttrStr);
if (!sourceCustomAttr[param.property]) {
this.$set(sourceCustomAttr, param.property, {})
this.$set(sourceCustomAttr, param.property, {});
}
sourceCustomAttr[param.property][param.value.modifyName] = param.value[param.value.modifyName]
this.sourceCustomAttrStr = JSON.stringify(sourceCustomAttr)
this.chart.customAttr = this.sourceCustomAttrStr
this.$store.commit('updateComponentViewsData', {
sourceCustomAttr[param.property][param.value.modifyName] =
param.value[param.value.modifyName];
this.sourceCustomAttrStr = JSON.stringify(sourceCustomAttr);
this.chart.customAttr = this.sourceCustomAttrStr;
this.$store.commit("updateComponentViewsData", {
viewId: this.chart.id,
propertyKey: 'customAttr',
propertyValue: this.sourceCustomAttrStr
})
updateParams['customAttr'] = this.sourceCustomAttrStr
} else if (param.custom === 'customStyle') {
const sourceCustomStyle = JSON.parse(this.sourceCustomStyleStr)
if (param.property === 'margin') {
sourceCustomStyle[param.property] = param.value
}
sourceCustomStyle[param.property][param.value.modifyName] = param.value[param.value.modifyName]
this.sourceCustomStyleStr = JSON.stringify(sourceCustomStyle)
this.chart.customStyle = this.sourceCustomStyleStr
this.$store.commit('updateComponentViewsData', {
propertyKey: "customAttr",
propertyValue: this.sourceCustomAttrStr,
});
updateParams["customAttr"] = this.sourceCustomAttrStr;
} else if (param.custom === "customStyle") {
const sourceCustomStyle = JSON.parse(this.sourceCustomStyleStr);
if (param.property === "margin") {
sourceCustomStyle[param.property] = param.value;
}
sourceCustomStyle[param.property][param.value.modifyName] =
param.value[param.value.modifyName];
this.sourceCustomStyleStr = JSON.stringify(sourceCustomStyle);
this.chart.customStyle = this.sourceCustomStyleStr;
this.$store.commit("updateComponentViewsData", {
viewId: this.chart.id,
propertyKey: 'customStyle',
propertyValue: this.sourceCustomStyleStr
})
updateParams['customStyle'] = this.sourceCustomStyleStr
}
viewPropsSave(this.panelInfo.id, updateParams).then(rsp => {
this.active && bus.$emit('current-component-change')
})
this.$store.commit('recordViewEdit', { viewId: this.chart.id, hasEdit: true })
this.mergeScale()
propertyKey: "customStyle",
propertyValue: this.sourceCustomStyleStr,
});
updateParams["customStyle"] = this.sourceCustomStyleStr;
}
viewPropsSave(this.panelInfo.id, updateParams).then((rsp) => {
this.active && bus.$emit("current-component-change");
});
this.$store.commit("recordViewEdit", {
viewId: this.chart.id,
hasEdit: true,
});
this.mergeScale();
},
optFromBatchThemeChange() {
const updateParams = { 'id': this.chart.id }
const sourceCustomAttr = JSON.parse(this.sourceCustomAttrStr)
const sourceCustomStyle = JSON.parse(this.sourceCustomStyleStr)
adaptCurTheme(sourceCustomStyle, sourceCustomAttr, this.chart.type)
this.sourceCustomAttrStr = JSON.stringify(sourceCustomAttr)
this.chart.customAttr = this.sourceCustomAttrStr
updateParams['customAttr'] = this.sourceCustomAttrStr
this.sourceCustomStyleStr = JSON.stringify(sourceCustomStyle)
this.chart.customStyle = this.sourceCustomStyleStr
updateParams['customStyle'] = this.sourceCustomStyleStr
viewPropsSave(this.panelInfo.id, updateParams).then(rsp => {
this.active && bus.$emit('current-component-change')
})
this.$store.commit('recordViewEdit', { viewId: this.chart.id, hasEdit: true })
this.mergeScale()
const updateParams = { id: this.chart.id };
const sourceCustomAttr = JSON.parse(this.sourceCustomAttrStr);
const sourceCustomStyle = JSON.parse(this.sourceCustomStyleStr);
adaptCurTheme(sourceCustomStyle, sourceCustomAttr, this.chart.type);
this.sourceCustomAttrStr = JSON.stringify(sourceCustomAttr);
this.chart.customAttr = this.sourceCustomAttrStr;
updateParams["customAttr"] = this.sourceCustomAttrStr;
this.sourceCustomStyleStr = JSON.stringify(sourceCustomStyle);
this.chart.customStyle = this.sourceCustomStyleStr;
updateParams["customStyle"] = this.sourceCustomStyleStr;
viewPropsSave(this.panelInfo.id, updateParams).then((rsp) => {
this.active && bus.$emit("current-component-change");
});
this.$store.commit("recordViewEdit", {
viewId: this.chart.id,
hasEdit: true,
});
this.mergeScale();
},
resizeChart() {
if (this.chart.type === 'map') {
this.destroyTimeMachine()
this.changeIndex++
this.chartResize(this.changeIndex)
if (this.chart.type === "map") {
this.destroyTimeMachine();
this.changeIndex++;
this.chartResize(this.changeIndex);
} else if (this.$refs[this.element.propValue.id]) {
this.chart.isPlugin
? this.$refs[this.element.propValue.id].callPluginInner({ methodName: 'chartResize' })
: this.$refs[this.element.propValue.id].chartResize()
? this.$refs[this.element.propValue.id].callPluginInner({
methodName: "chartResize",
})
: this.$refs[this.element.propValue.id].chartResize();
}
},
pluginChartClick(param) {
param.viewId && param.viewId === this.element.propValue.viewId && this.chartClick(param)
param.viewId &&
param.viewId === this.element.propValue.viewId &&
this.chartClick(param);
},
pluginJumpClick(param) {
param.viewId && param.viewId === this.element.propValue.viewId && this.jumpClick(param)
param.viewId &&
param.viewId === this.element.propValue.viewId &&
this.jumpClick(param);
},
pluginAddViewTrackFilter(param) {
param.viewId && param.viewId === this.element.propValue.viewId && this.addViewTrackFilter(param)
param.viewId &&
param.viewId === this.element.propValue.viewId &&
this.addViewTrackFilter(param);
},
viewInCache(param) {
this.view = param.view
this.view = param.view;
if (this.view && this.view.customAttr) {
this.currentPage.pageSize = parseInt(JSON.parse(this.view.customAttr).size.tablePageSize)
this.currentPage.pageSize = parseInt(
JSON.parse(this.view.customAttr).size.tablePageSize
);
}
param.viewId && param.viewId === this.element.propValue.viewId && this.getDataEdit(param)
param.viewId &&
param.viewId === this.element.propValue.viewId &&
this.getDataEdit(param);
},
clearPanelLinkage(param) {
if (param.viewId === 'all' || param.viewId === this.element.propValue.viewId) {
if (
param.viewId === "all" ||
param.viewId === this.element.propValue.viewId
) {
try {
this.$refs[this.element.propValue.id]?.reDrawView()
this.$refs[this.element.propValue.id]?.reDrawView();
} catch (e) {
console.error('reDrawView-error：', this.element.propValue.id)
console.error("reDrawView-error：", this.element.propValue.id);
}
}
},
bindPluginEvent() {
bus.$on('plugin-chart-click', this.pluginChartClick)
bus.$on('plugin-jump-click', this.pluginJumpClick)
bus.$on('plugin-add-view-track-filter', this.pluginAddViewTrackFilter)
bus.$on('view-in-cache', this.viewInCache)
bus.$on('batch-opt-change', this.batchOptChange)
bus.$on('onSubjectChange', this.optFromBatchThemeChange)
bus.$on('onThemeColorChange', this.optFromBatchThemeChange)
bus.$on('onThemeAttrChange', this.optFromBatchSingleProp)
bus.$on('clear_panel_linkage', this.clearPanelLinkage)
bus.$on("plugin-chart-click", this.pluginChartClick);
bus.$on("plugin-jump-click", this.pluginJumpClick);
bus.$on("plugin-add-view-track-filter", this.pluginAddViewTrackFilter);
bus.$on("view-in-cache", this.viewInCache);
bus.$on("batch-opt-change", this.batchOptChange);
bus.$on("onSubjectChange", this.optFromBatchThemeChange);
bus.$on("onThemeColorChange", this.optFromBatchThemeChange);
bus.$on("onThemeAttrChange", this.optFromBatchSingleProp);
bus.$on("clear_panel_linkage", this.clearPanelLinkage);
},
addViewTrackFilter(linkageParam) {
this.$store.commit('addViewTrackFilter', linkageParam)
this.$store.commit("addViewTrackFilter", linkageParam);
},
// 根据仪表板的缩放比例，修改视图内部参数
mergeScale() {
this.scale = Math.min(this.previewCanvasScale.scalePointWidth, this.previewCanvasScale.scalePointHeight) * this.scaleCoefficient
const customAttrChart = JSON.parse(this.sourceCustomAttrStr)
const customStyleChart = JSON.parse(this.sourceCustomStyleStr)
recursionTransObj(customAttrTrans, customAttrChart, this.scale, this.scaleCoefficientType)
recursionTransObj(customStyleTrans, customStyleChart, this.scale, this.scaleCoefficientType)
this.scale =
Math.min(
this.previewCanvasScale.scalePointWidth,
this.previewCanvasScale.scalePointHeight
) * this.scaleCoefficient;
const customAttrChart = JSON.parse(this.sourceCustomAttrStr);
const customStyleChart = JSON.parse(this.sourceCustomStyleStr);
recursionTransObj(
customAttrTrans,
customAttrChart,
this.scale,
this.scaleCoefficientType
);
recursionTransObj(
customStyleTrans,
customStyleChart,
this.scale,
this.scaleCoefficientType
);
// 移动端地图标签不显示
if (this.chart.type === 'map' && this.scaleCoefficientType === 'mobile') {
customAttrChart.label.show = false
if (this.chart.type === "map" && this.scaleCoefficientType === "mobile") {
customAttrChart.label.show = false;
}
this.chart = {
...this.chart,
customAttr: JSON.stringify(customAttrChart),
customStyle: JSON.stringify(customStyleChart)
}
customStyle: JSON.stringify(customStyleChart),
};
},
getData(id, cache = true, dataBroadcast = false) {
if (id) {
if (this.getDataLoading || Vue.prototype.$currentHttpRequestList.get(`/chart/view/getData/${id}/${this.panelInfo.id}`)) {
const url = `/chart/view/getData/${id}/${this.panelInfo.id}`
Vue.prototype.$cancelRequest(url)
Vue.prototype.$currentHttpRequestList.delete(url)
this.getDataLoading = false
this.getData(id, cache, dataBroadcast)
clearTimeout(this.cancelTime)
if (
this.getDataLoading ||
Vue.prototype.$currentHttpRequestList.get(
`/chart/view/getData/${id}/${this.panelInfo.id}`
)
) {
const url = `/chart/view/getData/${id}/${this.panelInfo.id}`;
Vue.prototype.$cancelRequest(url);
Vue.prototype.$currentHttpRequestList.delete(url);
this.getDataLoading = false;
this.getData(id, cache, dataBroadcast);
clearTimeout(this.cancelTime);
this.cancelTime = setTimeout(() => {
this.requestStatus = 'waiting'
}, 0)
return
this.requestStatus = "waiting";
}, 0);
return;
}
this.requestStatus = 'waiting'
this.message = null
this.requestStatus = "waiting";
this.message = null;
// 增加判断 仪表板公共连接中使用viewInfo 正常使用viewData
let method = viewData
const token = this.$store.getters.token || getToken()
const linkToken = this.$store.getters.linkToken || getLinkToken()
let method = viewData;
const token = this.$store.getters.token || getToken();
const linkToken = this.$store.getters.linkToken || getLinkToken();
if (!token && linkToken) {
method = viewInfo
method = viewInfo;
}
const requestInfo = {
...this.filter,
cache: cache,
queryFrom: this.isEdit ? 'panel_edit' : 'panel'
}
queryFrom: this.isEdit ? "panel_edit" : "panel",
};
if (this.panelInfo.proxy) {
// method = viewInfo
requestInfo.proxy = { userId: this.panelInfo.proxy }
requestInfo.proxy = { userId: this.panelInfo.proxy };
}
// table-info明细表增加分页
if (this.view && this.view.customAttr) {
const attrSize = JSON.parse(this.view.customAttr).size
if (this.chart.type === 'table-info' && this.view.datasetMode === 0 && (!attrSize.tablePageMode || attrSize.tablePageMode === 'page')) {
requestInfo.goPage = this.currentPage.page
requestInfo.pageSize = this.currentPage.pageSize === parseInt(attrSize.tablePageSize) ? this.currentPage.pageSize : parseInt(attrSize.tablePageSize)
const attrSize = JSON.parse(this.view.customAttr).size;
if (
this.chart.type === "table-info" &&
this.view.datasetMode === 0 &&
(!attrSize.tablePageMode || attrSize.tablePageMode === "page")
) {
requestInfo.goPage = this.currentPage.page;
requestInfo.pageSize =
this.currentPage.pageSize === parseInt(attrSize.tablePageSize)
? this.currentPage.pageSize
: parseInt(attrSize.tablePageSize);
}
}
if (this.isFirstLoad) {
this.element.filters = this.filters?.length ? JSON.parse(JSON.stringify(this.filters)) : []
this.element.filters = this.filters?.length
? JSON.parse(JSON.stringify(this.filters))
: [];
}
method(id, this.panelInfo.id, requestInfo).then(response => {
method(id, this.panelInfo.id, requestInfo)
.then((response) => {
// 将视图传入echart组件
if (response.success) {
this.chart = response.data
this.view = response.data
if (this.chart.type.includes('table')) {
this.$store.commit('setLastViewRequestInfo', { viewId: id, requestInfo: requestInfo })
}
this.buildInnerRefreshTimer(this.chart.refreshViewEnable, this.chart.refreshUnit, this.chart.refreshTime)
this.$emit('fill-chart-2-parent', this.chart)
this.getDataOnly(response.data, dataBroadcast)
this.chart['position'] = this.inTab ? 'tab' : 'panel'
this.chart = response.data;
this.view = response.data;
if (this.chart.type.includes("table")) {
this.$store.commit("setLastViewRequestInfo", {
viewId: id,
requestInfo: requestInfo,
});
}
this.buildInnerRefreshTimer(
this.chart.refreshViewEnable,
this.chart.refreshUnit,
this.chart.refreshTime
);
this.$emit("fill-chart-2-parent", this.chart);
this.getDataOnly(response.data, dataBroadcast);
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) {
const customStyleObj = JSON.parse(this.chart.customStyle)
const customAttrObj = JSON.parse(this.chart.customAttr)
adaptCurTheme(customStyleObj, customAttrObj)
this.chart.customStyle = JSON.stringify(customStyleObj)
this.chart.customAttr = JSON.stringify(customAttrObj)
const customStyleObj = JSON.parse(this.chart.customStyle);
const customAttrObj = JSON.parse(this.chart.customAttr);
adaptCurTheme(customStyleObj, customAttrObj);
this.chart.customStyle = JSON.stringify(customStyleObj);
this.chart.customAttr = JSON.stringify(customAttrObj);
viewEditSave(this.panelInfo.id, {
id: this.chart.id,
customStyle: this.chart.customStyle,
customAttr: this.chart.customAttr
})
this.$store.commit('adaptorStatusDisable', this.element.id)
}
this.sourceCustomAttrStr = this.chart.customAttr
this.sourceCustomStyleStr = this.chart.customStyle
this.chart.drillFields = this.chart.drillFields ? JSON.parse(this.chart.drillFields) : []
customAttr: this.chart.customAttr,
});
this.$store.commit("adaptorStatusDisable", this.element.id);
}
this.sourceCustomAttrStr = this.chart.customAttr;
this.sourceCustomStyleStr = this.chart.customStyle;
this.chart.drillFields = this.chart.drillFields
? JSON.parse(this.chart.drillFields)
: [];
if (!response.data.drill) {
this.drillClickDimensionList.splice(this.drillClickDimensionList.length - 1, 1)
this.resetDrill()
}
this.drillFilters = JSON.parse(JSON.stringify(response.data.drillFilters ? response.data.drillFilters : []))
this.drillFields = JSON.parse(JSON.stringify(response.data.drillFields))
this.requestStatus = 'merging'
this.mergeScale()
this.initCurFields(this.chart)
this.requestStatus = 'success'
this.httpRequest.status = true
this.drillClickDimensionList.splice(
this.drillClickDimensionList.length - 1,
1
);
this.resetDrill();
}
this.drillFilters = JSON.parse(
JSON.stringify(
response.data.drillFilters ? response.data.drillFilters : []
)
);
this.drillFields = JSON.parse(
JSON.stringify(response.data.drillFields)
);
this.requestStatus = "merging";
this.mergeScale();
this.initCurFields(this.chart);
this.requestStatus = "success";
this.httpRequest.status = true;
} else {
console.error('err2-' + JSON.stringify(response))
this.requestStatus = 'error'
this.message = response.message
}
this.isFirstLoad = false
return true
}).catch(err => {
console.error('err-' + err)
this.requestStatus = 'error'
if (err.message && err.message.indexOf('timeout') > -1) {
this.message = this.$t('panel.timeout_refresh')
console.error("err2-" + JSON.stringify(response));
this.requestStatus = "error";
this.message = response.message;
}
this.isFirstLoad = false;
return true;
})
.catch((err) => {
console.error("err-" + err);
this.requestStatus = "error";
if (err.message && err.message.indexOf("timeout") > -1) {
this.message = this.$t("panel.timeout_refresh");
} else if (!err.response) {
this.httpRequest.status = false
this.httpRequest.status = false;
} else {
if (err.response) {
this.httpRequest.status = err.response.data.success
this.httpRequest.msg = err.response.data.message
this.httpRequest.status = err.response.data.success;
this.httpRequest.msg = err.response.data.message;
if (err && err.response && err.response.data) {
this.message = err.response.data.message
this.message = err.response.data.message;
} else {
this.message = err
this.message = err;
}
}
}
this.isFirstLoad = false
return true
}).finally(() => {
this.getDataLoading = false
this.isFirstLoad = false;
return true;
})
.finally(() => {
this.getDataLoading = false;
});
}
},
initCurFields(chartDetails) {
this.curFields = []
this.dataRowSelect = {}
this.dataRowNameSelect = {}
this.curFields = [];
this.dataRowSelect = {};
this.dataRowNameSelect = {};
if (chartDetails.data && chartDetails.data.sourceFields) {
const checkAllAxisStr = chartDetails.xaxis + chartDetails.xaxisExt + chartDetails.yaxis + chartDetails.yaxisExt
chartDetails.data.sourceFields.forEach(field => {
const checkAllAxisStr =
chartDetails.xaxis +
chartDetails.xaxisExt +
chartDetails.yaxis +
chartDetails.yaxisExt;
chartDetails.data.sourceFields.forEach((field) => {
if (checkAllAxisStr.indexOf(field.id) > -1) {
this.curFields.push(field)
this.curFields.push(field);
}
})
});
// Get the corresponding relationship between id and value
const nameIdMap = chartDetails.data.fields.reduce((pre, next) => {
pre[next['dataeaseName']] = next['id']
return pre
}, {})
const sourceFieldNameIdMap = chartDetails.data.fields.reduce((pre, next) => {
pre[next['dataeaseName']] = next['name']
return pre
}, {})
const rowData = chartDetails.data.tableRow[0]
if (chartDetails.type === 'richTextView') {
let yAxis = []
pre[next["dataeaseName"]] = next["id"];
return pre;
}, {});
const sourceFieldNameIdMap = chartDetails.data.fields.reduce(
(pre, next) => {
pre[next["dataeaseName"]] = next["name"];
return pre;
},
{}
);
const rowData = chartDetails.data.tableRow[0];
if (chartDetails.type === "richTextView") {
let yAxis = [];
try {
yAxis = JSON.parse(chartDetails.yaxis)
yAxis = JSON.parse(chartDetails.yaxis);
} catch (err) {
yAxis = JSON.parse(JSON.stringify(chartDetails.yaxis))
yAxis = JSON.parse(JSON.stringify(chartDetails.yaxis));
}
const yDataeaseNames = []
const yDataeaseNamesCfg = []
yAxis.forEach(yItem => {
yDataeaseNames.push(yItem.dataeaseName)
yDataeaseNamesCfg[yItem.dataeaseName] = yItem.formatterCfg
})
this.rowDataFormat(rowData, yDataeaseNames, yDataeaseNamesCfg)
const yDataeaseNames = [];
const yDataeaseNamesCfg = [];
yAxis.forEach((yItem) => {
yDataeaseNames.push(yItem.dataeaseName);
yDataeaseNamesCfg[yItem.dataeaseName] = yItem.formatterCfg;
});
this.rowDataFormat(rowData, yDataeaseNames, yDataeaseNamesCfg);
}
for (const key in rowData) {
this.dataRowSelect[nameIdMap[key]] = rowData[key]
this.dataRowNameSelect[sourceFieldNameIdMap[key]] = rowData[key]
this.dataRowSelect[nameIdMap[key]] = rowData[key];
this.dataRowNameSelect[sourceFieldNameIdMap[key]] = rowData[key];
}
}
Vue.set(this.element.propValue, 'innerType', chartDetails.type)
Vue.set(this.element.propValue, 'render', chartDetails.render)
if (chartDetails.type === 'richTextView') {
Vue.set(this.element.propValue, "innerType", chartDetails.type);
Vue.set(this.element.propValue, "render", chartDetails.render);
if (chartDetails.type === "richTextView") {
this.$nextTick(() => {
bus.$emit('initCurFields-' + this.element.id)
})
bus.$emit("initCurFields-" + this.element.id);
});
}
},
rowDataFormat(rowData, yDataeaseNames, yDataeaseNamesCfg) {
for (const key in rowData) {
if (yDataeaseNames.includes(key)) {
const formatterCfg = yDataeaseNamesCfg[key]
const value = rowData[key]
const formatterCfg = yDataeaseNamesCfg[key];
const value = rowData[key];
if (value === null || value === undefined) {
rowData[key] = '-'
rowData[key] = "-";
}
if (formatterCfg) {
const v = valueFormatter(value, formatterCfg)
rowData[key] = v && v.includes('NaN') ? value : v
const v = valueFormatter(value, formatterCfg);
rowData[key] = v && v.includes("NaN") ? value : v;
} else {
const v = valueFormatter(value, formatterItem)
rowData[key] = v && v.includes('NaN') ? value : v
const v = valueFormatter(value, formatterItem);
rowData[key] = v && v.includes("NaN") ? value : v;
}
}
}
},
viewIdMatch(viewIds, viewId) {
return !viewIds || viewIds.length === 0 || viewIds.includes(viewId)
return !viewIds || viewIds.length === 0 || viewIds.includes(viewId);
},
openChartDetailsDialog(params) {
const tableChart = deepCopy(this.chart)
tableChart.customAttr = JSON.parse(this.chart.customAttr)
tableChart.customStyle = JSON.parse(this.chart.customStyle)
tableChart.customAttr.color.tableHeaderBgColor = '#f8f8f9'
tableChart.customAttr.color.tableItemBgColor = '#ffffff'
tableChart.customAttr.color.tableHeaderFontColor = '#7c7e81'
tableChart.customAttr.color.tableFontColor = '#7c7e81'
tableChart.customAttr.color.tableStripe = true
tableChart.customAttr.size.tablePageMode = 'pull'
tableChart.customStyle.text.show = false
tableChart.customAttr = JSON.stringify(tableChart.customAttr)
tableChart.customStyle = JSON.stringify(tableChart.customStyle)
const tableChart = deepCopy(this.chart);
tableChart.customAttr = JSON.parse(this.chart.customAttr);
tableChart.customStyle = JSON.parse(this.chart.customStyle);
tableChart.customAttr.color.tableHeaderBgColor = "#f8f8f9";
tableChart.customAttr.color.tableItemBgColor = "#ffffff";
tableChart.customAttr.color.tableHeaderFontColor = "#7c7e81";
tableChart.customAttr.color.tableFontColor = "#7c7e81";
tableChart.customAttr.color.tableStripe = true;
tableChart.customAttr.size.tablePageMode = "pull";
tableChart.customStyle.text.show = false;
tableChart.customAttr = JSON.stringify(tableChart.customAttr);
tableChart.customStyle = JSON.stringify(tableChart.customStyle);
this.showChartInfo = this.chart
this.showChartTableInfo = tableChart
this.showChartInfoType = params.openType
this.showChartInfo = this.chart;
this.showChartTableInfo = tableChart;
this.showChartInfoType = params.openType;
if (!this.inScreen) {
bus.$emit('pcChartDetailsDialog', {
bus.$emit("pcChartDetailsDialog", {
showChartInfo: this.showChartInfo,
showChartTableInfo: this.showChartTableInfo,
showChartInfoType: this.showChartInfoType
})
} else if (this.terminal === 'pc') {
this.chartDetailsVisible = true
showChartInfoType: this.showChartInfoType,
});
} else if (this.terminal === "pc") {
this.chartDetailsVisible = true;
} else {
this.mobileChartDetailsVisible = true
this.mobileChartDetailsVisible = true;
}
},
chartClick(param) {
if (this.drillClickDimensionList.length < this.chart.drillFields.length - 1) {
(this.chart.type === 'map' || this.chart.type === 'buddle-map') && this.sendToChildren(param)
this.drillClickDimensionList.push({ dimensionList: param.data.dimensionList })
this.getData(this.element.propValue.viewId)
if (
this.drillClickDimensionList.length <
this.chart.drillFields.length - 1
) {
(this.chart.type === "map" || this.chart.type === "buddle-map") &&
this.sendToChildren(param);
this.drillClickDimensionList.push({
dimensionList: param.data.dimensionList,
});
this.getData(this.element.propValue.viewId);
} else if (this.chart.drillFields.length > 0) {
this.$message({
type: 'error',
message: this.$t('chart.last_layer'),
showClose: true
})
type: "error",
message: this.$t("chart.last_layer"),
showClose: true,
});
}
},
jumpClick(param) {
let dimension, jumpInfo, sourceInfo
let dimension, jumpInfo, sourceInfo;
// 如果有名称name 获取和name匹配的dimension 否则倒序取最后一个能匹配的
if (param.name) {
param.dimensionList.forEach(dimensionItem => {
if (dimensionItem.id === param.name || dimensionItem.value === param.name) {
dimension = dimensionItem
sourceInfo = param.viewId + '#' + dimension.id
jumpInfo = this.nowPanelJumpInfo[sourceInfo]
}
})
param.dimensionList.forEach((dimensionItem) => {
if (
dimensionItem.id === param.name ||
dimensionItem.value === param.name
) {
dimension = dimensionItem;
sourceInfo = param.viewId + "#" + dimension.id;
jumpInfo = this.nowPanelJumpInfo[sourceInfo];
}
});
} else {
for (let i = param.dimensionList.length - 1; i >= 0; i--) {
dimension = param.dimensionList[i]
sourceInfo = param.viewId + '#' + dimension.id
jumpInfo = this.nowPanelJumpInfo[sourceInfo]
dimension = param.dimensionList[i];
sourceInfo = param.viewId + "#" + dimension.id;
jumpInfo = this.nowPanelJumpInfo[sourceInfo];
if (jumpInfo) {
break
break;
}
}
}
if (jumpInfo) {
param.sourcePanelId = this.panelInfo.id
param.sourceViewId = param.viewId
param.sourceFieldId = dimension.id
param.sourcePanelId = this.panelInfo.id;
param.sourceViewId = param.viewId;
param.sourceFieldId = dimension.id;
// 内部仪表板跳转
if (jumpInfo.linkType === 'inner') {
if (jumpInfo.linkType === "inner") {
if (jumpInfo.targetPanelId) {
localStorage.setItem('jumpInfoParam', JSON.stringify(param))
localStorage.setItem("jumpInfoParam", JSON.stringify(param));
if (this.publicLinkStatus) {
// 判断是否有公共链接ID
if (jumpInfo.publicJumpId) {
const url = '/link/' + jumpInfo.publicJumpId
const currentUrl = window.location.href
localStorage.setItem('beforeJumpUrl', currentUrl)
this.windowsJump(url, jumpInfo.jumpType)
const url = "/link/" + jumpInfo.publicJumpId;
const currentUrl = window.location.href;
localStorage.setItem("beforeJumpUrl", currentUrl);
this.windowsJump(url, jumpInfo.jumpType);
} else {
this.$message({
type: 'warn',
message: this.$t('panel.public_link_tips'),
showClose: true
})
type: "warn",
message: this.$t("panel.public_link_tips"),
showClose: true,
});
}
} else {
const url = '#/preview/' + jumpInfo.targetPanelId
this.windowsJump(url, jumpInfo.jumpType)
const url = "#/preview/" + jumpInfo.targetPanelId;
this.windowsJump(url, jumpInfo.jumpType);
}
} else {
this.$message({
type: 'warn',
message: '未指定跳转仪表板',
showClose: true
})
type: "warn",
message: "未指定跳转仪表板",
showClose: true,
});
}
} else {
const colList = [...param.dimensionList, ...param.quotaList]
let url = this.setIdValueTrans('id', 'value', jumpInfo.content, colList)
url = checkAddHttp(url)
this.windowsJump(url, jumpInfo.jumpType)
const colList = [...param.dimensionList, ...param.quotaList];
let url = this.setIdValueTrans(
"id",
"value",
jumpInfo.content,
colList
);
url = checkAddHttp(url);
this.windowsJump(url, jumpInfo.jumpType);
}
} else {
if (this.chart.type.indexOf('table') === -1) {
if (this.chart.type.indexOf("table") === -1) {
this.$message({
type: 'warn',
message: '未获取跳转信息',
showClose: true
})
type: "warn",
message: "未获取跳转信息",
showClose: true,
});
}
}
},
setIdValueTrans(from, to, content, colList) {
if (!content) {
return content
return content;
}
let name2Id = content
let name2Id = content;
const nameIdMap = colList.reduce((pre, next) => {
pre[next[from]] = next[to]
return pre
}, {})
const on = content.match(/\[(.+?)\]/g)
pre[next[from]] = next[to];
return pre;
}, {});
const on = content.match(/\[(.+?)\]/g);
if (on) {
on.forEach(itm => {
const ele = itm.slice(1, -1)
name2Id = name2Id.replace(itm, nameIdMap[ele])
})
on.forEach((itm) => {
const ele = itm.slice(1, -1);
name2Id = name2Id.replace(itm, nameIdMap[ele]);
});
}
return name2Id
return name2Id;
},
windowsJump(url, jumpType) {
try {
window.open(url, jumpType)
window.open(url, jumpType);
} catch (e) {
this.$message({
message: this.$t('panel.url_check_error') + ':' + url,
type: 'error',
showClose: true
})
message: this.$t("panel.url_check_error") + ":" + url,
type: "error",
showClose: true,
});
}
},
resetDrill() {
const length = this.drillClickDimensionList.length
this.drillClickDimensionList = []
if (this.chart.type === 'map' || this.chart.type === 'buddle-map') {
this.backToParent(0, length)
const current = this.$refs[this.element.propValue.id]
const length = this.drillClickDimensionList.length;
this.drillClickDimensionList = [];
if (this.chart.type === "map" || this.chart.type === "buddle-map") {
this.backToParent(0, length);
const current = this.$refs[this.element.propValue.id];
if (this.chart.isPlugin) {
current && current.callPluginInner && this.setDetailMapCode(null) && current.callPluginInner({
methodName: 'registerDynamicMap',
methodParam: null
})
current &&
current.callPluginInner &&
this.setDetailMapCode(null) &&
current.callPluginInner({
methodName: "registerDynamicMap",
methodParam: null,
});
} else {
current && current.registerDynamicMap && this.setDetailMapCode(null) && current.registerDynamicMap(null)
current &&
current.registerDynamicMap &&
this.setDetailMapCode(null) &&
current.registerDynamicMap(null);
}
}
},
drillJump(index) {
const length = this.drillClickDimensionList.length
this.drillClickDimensionList = this.drillClickDimensionList.slice(0, index)
if (this.chart.type === 'map' || this.chart.type === 'buddle-map') {
this.backToParent(index, length)
const length = this.drillClickDimensionList.length;
this.drillClickDimensionList = this.drillClickDimensionList.slice(
0,
index
);
if (this.chart.type === "map" || this.chart.type === "buddle-map") {
this.backToParent(index, length);
}
this.getData(this.element.propValue.viewId)
this.getData(this.element.propValue.viewId);
},
// 回到父级地图
backToParent(index, length) {
if (length <= 0) return
const times = length - 1 - index
if (length <= 0) return;
const times = length - 1 - index;
let temp = times
let tempNode = this.currentAcreaNode
let temp = times;
let tempNode = this.currentAcreaNode;
while (temp >= 0) {
tempNode = this.findEntityByCode(tempNode.pcode, this.places)
temp--
tempNode = this.findEntityByCode(tempNode.pcode, this.places);
temp--;
}
this.currentAcreaNode = tempNode
const current = this.$refs[this.element.propValue.id]
this.currentAcreaNode = tempNode;
const current = this.$refs[this.element.propValue.id];
if (this.chart.isPlugin) {
current && current.callPluginInner && this.setDetailMapCode(this.currentAcreaNode.code) && current.callPluginInner({
methodName: 'registerDynamicMap',
methodParam: this.currentAcreaNode.code
})
current &&
current.callPluginInner &&
this.setDetailMapCode(this.currentAcreaNode.code) &&
current.callPluginInner({
methodName: "registerDynamicMap",
methodParam: this.currentAcreaNode.code,
});
} else {
current && current.registerDynamicMap && this.setDetailMapCode(this.currentAcreaNode.code) && current.registerDynamicMap(this.currentAcreaNode.code)
current &&
current.registerDynamicMap &&
this.setDetailMapCode(this.currentAcreaNode.code) &&
current.registerDynamicMap(this.currentAcreaNode.code);
}
},
setDetailMapCode(code) {
this.element.DetailAreaCode = code
bus.$emit('set-dynamic-area-code', code)
return true
this.element.DetailAreaCode = code;
bus.$emit("set-dynamic-area-code", code);
return true;
},
// 切换下一级地图
sendToChildren(param) {
const length = param.data.dimensionList.length
const name = param.data.dimensionList[length - 1].value
let aCode = null
const length = param.data.dimensionList.length;
const name = param.data.dimensionList[length - 1].value;
let aCode = null;
if (this.currentAcreaNode) {
aCode = this.currentAcreaNode.code
}
const customAttr = JSON.parse(this.chart.customAttr)
const currentNode = this.findEntityByCode(aCode || customAttr.areaCode, this.places)
if (currentNode && currentNode.children && currentNode.children.length > 0) {
const nextNode = currentNode.children.find(item => item.name === name)
this.currentAcreaNode = nextNode
const current = this.$refs[this.element.propValue.id]
aCode = this.currentAcreaNode.code;
}
const customAttr = JSON.parse(this.chart.customAttr);
const currentNode = this.findEntityByCode(
aCode || customAttr.areaCode,
this.places
);
if (
currentNode &&
currentNode.children &&
currentNode.children.length > 0
) {
const nextNode = currentNode.children.find(
(item) => item.name === name
);
this.currentAcreaNode = nextNode;
const current = this.$refs[this.element.propValue.id];
if (this.chart.isPlugin) {
nextNode && current && current.callPluginInner && this.setDetailMapCode(nextNode.code) && current.callPluginInner({
methodName: 'registerDynamicMap',
methodParam: nextNode.code
})
nextNode &&
current &&
current.callPluginInner &&
this.setDetailMapCode(nextNode.code) &&
current.callPluginInner({
methodName: "registerDynamicMap",
methodParam: nextNode.code,
});
} else {
nextNode && current && current.registerDynamicMap && this.setDetailMapCode(nextNode.code) && current.registerDynamicMap(nextNode.code)
nextNode &&
current &&
current.registerDynamicMap &&
this.setDetailMapCode(nextNode.code) &&
current.registerDynamicMap(nextNode.code);
}
}
},
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++) {
const node = array[index]
if (node.code === code) return node
const node = array[index];
if (node.code === code) return node;
if (node.children && node.children.length > 0) {
const temp = this.findEntityByCode(code, node.children)
if (temp) return temp
const temp = this.findEntityByCode(code, node.children);
if (temp) return temp;
}
}
},
initAreas() {
Object.keys(this.places).length === 0 && areaMapping().then(res => {
this.places = res.data
})
Object.keys(this.places).length === 0 &&
areaMapping().then((res) => {
this.places = res.data;
});
},
doMapLink(linkFilters) {
if (!linkFilters && linkFilters.length === 0) return
const value = linkFilters[0].value
if (!value && value.length === 0) return
const name = value[0]
if (!name) return
const areaNode = this.findEntityByname(name, [])
if (!areaNode) return
const current = this.$refs[this.element.propValue.id]
if (!linkFilters && linkFilters.length === 0) return;
const value = linkFilters[0].value;
if (!value && value.length === 0) return;
const name = value[0];
if (!name) return;
const areaNode = this.findEntityByname(name, []);
if (!areaNode) return;
const current = this.$refs[this.element.propValue.id];
if (this.chart.isPlugin) {
current && current.callPluginInner && current.callPluginInner({
methodName: 'registerDynamicMap',
methodParam: areaNode.code
})
current &&
current.callPluginInner &&
current.callPluginInner({
methodName: "registerDynamicMap",
methodParam: areaNode.code,
});
} else {
current && current.registerDynamicMap && current.registerDynamicMap(areaNode.code)
current &&
current.registerDynamicMap &&
current.registerDynamicMap(areaNode.code);
}
},
// 根据地名获取areaCode
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++) {
const node = array[index]
if (node.name === name) return node
const node = array[index];
if (node.name === name) return node;
if (node.children && node.children.length > 0) {
const temp = this.findEntityByname(name, node.children)
if (temp) return temp
const temp = this.findEntityByname(name, node.children);
if (temp) return temp;
}
}
},
destroyTimeMachine() {
this.timeMachine && clearTimeout(this.timeMachine)
this.timeMachine = null
this.timeMachine && clearTimeout(this.timeMachine);
this.timeMachine = null;
},
destroyScaleTimeMachine() {
this.scaleTimeMachine && clearTimeout(this.scaleTimeMachine)
this.scaleTimeMachine = null
this.scaleTimeMachine && clearTimeout(this.scaleTimeMachine);
this.scaleTimeMachine = null;
},
// 边框变化
......@@ -1240,11 +1489,13 @@ export default {
this.timeMachine = setTimeout(() => {
if (index === this.changeIndex) {
this.chart.isPlugin
? this.$refs[this.element.propValue.id].callPluginInner({ methodName: 'chartResize' })
: this.$refs[this.element.propValue.id].chartResize()
? this.$refs[this.element.propValue.id].callPluginInner({
methodName: "chartResize",
})
: this.$refs[this.element.propValue.id].chartResize();
}
this.destroyTimeMachine()
}, 50)
this.destroyTimeMachine();
}, 50);
}
},
......@@ -1253,74 +1504,84 @@ export default {
if (this.$refs[this.element.propValue.id]) {
this.scaleTimeMachine = setTimeout(() => {
if (index === this.changeScaleIndex) {
this.mergeScale()
this.mergeScale();
}
this.destroyScaleTimeMachine()
}, 100)
this.destroyScaleTimeMachine();
}, 100);
}
},
renderComponent() {
return this.chart.render
return this.chart.render;
},
getDataEdit(param) {
this.$store.commit('canvasChange')
if (param.type === 'propChange') {
this.getData(param.viewId, false, true)
} else if (param.type === 'styleChange') {
this.chart.customAttr = param.viewInfo.customAttr
this.chart.customStyle = param.viewInfo.customStyle
this.chart.senior = param.viewInfo.senior
this.chart.title = param.viewInfo.title
this.chart.stylePriority = param.viewInfo.stylePriority
this.sourceCustomAttrStr = this.chart.customAttr
this.sourceCustomStyleStr = this.chart.customStyle
this.$store.commit("canvasChange");
if (param.type === "propChange") {
this.getData(param.viewId, false, true);
} else if (param.type === "styleChange") {
this.chart.customAttr = param.viewInfo.customAttr;
this.chart.customStyle = param.viewInfo.customStyle;
this.chart.senior = param.viewInfo.senior;
this.chart.title = param.viewInfo.title;
this.chart.stylePriority = param.viewInfo.stylePriority;
this.sourceCustomAttrStr = this.chart.customAttr;
this.sourceCustomStyleStr = this.chart.customStyle;
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) {
this.componentViewsData[this.chart.id][param.refreshProp] = this.chart[param.refreshProp]
this.componentViewsData[this.chart.id][param.refreshProp] =
this.chart[param.refreshProp];
}
}
this.mergeScale()
this.mergeScale();
}
},
getDataOnly(sourceResponseData, dataBroadcast) {
if (this.isEdit) {
if ((this.filter.filter && this.filter.filter.length) || (this.filter.linkageFilters && this.filter.linkageFilters.length)) {
if (
(this.filter.filter && this.filter.filter.length) ||
(this.filter.linkageFilters && this.filter.linkageFilters.length)
) {
const requestInfo = {
filter: [],
drill: [],
queryFrom: 'panel'
}
queryFrom: "panel",
};
// table-info明细表增加分页
if (this.view && this.view.customAttr) {
const attrSize = JSON.parse(this.view.customAttr).size
if (this.chart.type === 'table-info' && this.view.datasetMode === 0 && (!attrSize.tablePageMode || attrSize.tablePageMode === 'page')) {
requestInfo.goPage = this.currentPage.page
requestInfo.pageSize = this.currentPage.pageSize
}
}
viewData(this.chart.id, this.panelInfo.id, requestInfo).then(response => {
this.componentViewsData[this.chart.id] = response.data
this.view = response.data
const attrSize = JSON.parse(this.view.customAttr).size;
if (
this.chart.type === "table-info" &&
this.view.datasetMode === 0 &&
(!attrSize.tablePageMode || attrSize.tablePageMode === "page")
) {
requestInfo.goPage = this.currentPage.page;
requestInfo.pageSize = this.currentPage.pageSize;
}
}
viewData(this.chart.id, this.panelInfo.id, requestInfo).then(
(response) => {
this.componentViewsData[this.chart.id] = response.data;
this.view = response.data;
if (dataBroadcast) {
bus.$emit('prop-change-data')
bus.$emit("prop-change-data");
}
})
}
);
} else {
this.componentViewsData[this.chart.id] = sourceResponseData
this.componentViewsData[this.chart.id] = sourceResponseData;
if (dataBroadcast) {
bus.$emit('prop-change-data')
bus.$emit("prop-change-data");
}
}
}
},
pageClick(page) {
this.currentPage = page
this.getData(this.element.propValue.viewId, false)
}
}
}
this.currentPage = page;
this.getData(this.element.propValue.viewId, false);
},
},
};
</script>
<style lang="scss" scoped>
......@@ -1359,7 +1620,6 @@ export default {
}
.active {
}
.active ::v-deep .icon-fangda {
......@@ -1368,7 +1628,7 @@ export default {
}
.mobile-dialog-css ::v-deep .el-dialog__headerbtn {
top: 7px
top: 7px;
}
.mobile-dialog-css ::v-deep .el-dialog__body {
......
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
......@@ -2938,5 +2938,8 @@ export default {
confirm_title: '强行登录会导致其他客户端掉线',
confirm: '是否强行登录？',
forced_offline: '`当前账号在客户端【${ip}】登录，您已被挤下线！`'
},
map: {
layer: '区块地图'
}
}
src/views/chart/chart/util.js
This source diff could not be displayed because it is too large. You can view the blob instead.
src/views/chart/components/AMap.vue 0 → 100644
<template>
<div>{{ mapData }}</div>
</template>
<script>
export default {
props: {
mapData: {
type: Object,
required: true
}
},
data() {
return {}
},
watch: {
mapData: {
handler(newVal, oldVal) {
console.log(newVal, oldVal)
},
deep: true
}
},
destroyed() {
console.log(66666)
}
}
</script>
<style></style>
src/views/chart/group/Group.vue
......@@ -9,7 +9,7 @@
icon="el-icon-plus"
type="text"
size="mini"
style="float: right;"
style="float: right"
@click="add('group')"
/>
</el-row>
......@@ -31,10 +31,13 @@
size="mini"
type="primary"
>
{{ searchMap[searchType] }}<i class="el-icon-arrow-down el-icon--right" />
{{ searchMap[searchType]
}}<i class="el-icon-arrow-down el-icon--right" />
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="searchTypeClick('all')">{{ $t('commons.all') }}</el-dropdown-item>
<el-dropdown-item @click.native="searchTypeClick('all')">{{
$t('commons.all')
}}</el-dropdown-item>
<el-dropdown-item @click.native="searchTypeClick('folder')">{{ $t('commons.folder') }}
</el-dropdown-item>
</el-dropdown-menu>
......@@ -57,25 +60,30 @@
@node-collapse="nodeCollapse"
>
<span
v-if="data.modelInnerType ==='group'"
v-if="data.modelInnerType === 'group'"
slot-scope="{ node, data }"
class="custom-tree-node father"
>
<span style="display: flex;flex: 1;width: 0;">
<span style="display: flex; flex: 1; width: 0">
<span>
<i class="el-icon-folder" />
</span>
<span
style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
style="
margin-left: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
:title="data.name"
>{{ data.name }}</span>
</span>
<span
v-if="hasDataPermission('manage',data.privileges)"
v-if="hasDataPermission('manage', data.privileges)"
class="child"
>
<span
v-if="data.modelInnerType ==='group'"
v-if="data.modelInnerType === 'group'"
@click.stop
>
<el-dropdown
......@@ -93,13 +101,13 @@
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
icon="el-icon-folder-add"
:command="beforeClickAdd('group',data,node)"
:command="beforeClickAdd('group', data, node)"
>
{{ $t('chart.group') }}
</el-dropdown-item>
<el-dropdown-item
icon="el-icon-circle-plus"
:command="beforeClickAdd('chart',data,node)"
:command="beforeClickAdd('chart', data, node)"
>
{{ $t('chart.add_chart') }}
</el-dropdown-item>
......@@ -107,7 +115,7 @@
</el-dropdown>
</span>
<span
style="margin-left: 12px;"
style="margin-left: 12px"
@click.stop
>
<el-dropdown
......@@ -125,19 +133,19 @@
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
icon="el-icon-edit-outline"
:command="beforeClickMore('rename',data,node)"
:command="beforeClickMore('rename', data, node)"
>
{{ $t('chart.rename') }}
</el-dropdown-item>
<el-dropdown-item
icon="el-icon-right"
:command="beforeClickMore('move',data,node)"
:command="beforeClickMore('move', data, node)"
>
{{ $t('dataset.move_to') }}
</el-dropdown-item>
<el-dropdown-item
icon="el-icon-delete"
:command="beforeClickMore('delete',data,node)"
:command="beforeClickMore('delete', data, node)"
>
{{ $t('chart.delete') }}
</el-dropdown-item>
......@@ -151,19 +159,24 @@
slot-scope="{ node, data }"
class="custom-tree-node-list father"
>
<span style="display: flex;flex: 1;width: 0;">
<span style="display: flex; flex: 1; width: 0">
<span><svg-icon :icon-class="data.modelInnerType" /></span>
<span
style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
style="
margin-left: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
"
:title="data.name"
>{{ data.name }}</span>
</span>
<span
v-if="hasDataPermission('manage',data.privileges)"
v-if="hasDataPermission('manage', data.privileges)"
class="child"
>
<span
style="margin-left: 12px;"
style="margin-left: 12px"
@click.stop
>
<el-dropdown
......@@ -181,19 +194,19 @@
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
icon="el-icon-edit-outline"
:command="beforeClickMore('renameChart',data,node)"
:command="beforeClickMore('renameChart', data, node)"
>
{{ $t('chart.rename') }}
</el-dropdown-item>
<el-dropdown-item
icon="el-icon-right"
:command="beforeClickMore('moveDs',data,node)"
:command="beforeClickMore('moveDs', data, node)"
>
{{ $t('dataset.move_to') }}
</el-dropdown-item>
<el-dropdown-item
icon="el-icon-delete"
:command="beforeClickMore('deleteChart',data,node)"
:command="beforeClickMore('deleteChart', data, node)"
>
{{ $t('chart.delete') }}
</el-dropdown-item>
......@@ -297,7 +310,7 @@
width="1000px"
class="dialog-css"
>
<el-row style="width: 800px;">
<el-row style="width: 800px">
<el-form
ref="form"
:model="table"
......@@ -332,15 +345,17 @@
/>
<el-row
v-show="createActive === 2"
style="padding: 0 20px;"
style="padding: 0 20px"
>
<el-row class="chart-box">
<span>
<span
class="theme-border-class"
style="font-size: 12px"
>{{ $t('chart.chart_type') }}</span>
<span style="float: right;">
>{{
$t('chart.chart_type')
}}</span>
<span style="float: right">
<el-select
v-model="view.render"
class="render-select"
......@@ -365,7 +380,7 @@
<chart-type
ref="cu-chart-type"
:chart="view"
style="height: 350px;"
style="height: 350px"
/>
</el-radio-group>
</div>
......@@ -373,10 +388,14 @@
</el-row>
<el-row
class="chart-box"
style="text-align: center;"
style="text-align: center"
>
<svg-icon
:icon-class="view.isPlugin && view.type && view.type !== 'buddle-map' ? ('/api/pluginCommon/staticInfo/' + view.type + '/svg') : view.type"
:icon-class="
view.isPlugin && view.type && view.type !== 'buddle-map'
? '/api/pluginCommon/staticInfo/' + view.type + '/svg'
: view.type
"
class="chart-icon"
/>
</el-row>
......@@ -396,9 +415,7 @@
type="primary"
size="mini"
@click="createPreview"
>{{
$t('chart.preview')
}}
>{{ $t('chart.preview') }}
</el-button>
<el-button
v-if="createActive === 1"
......@@ -446,9 +463,7 @@
type="primary"
size="mini"
@click="saveMoveGroup(tGroup)"
>{{
$t('dataset.confirm')
}}
>{{ $t('dataset.confirm') }}
</el-button>
</div>
</el-dialog>
......@@ -480,9 +495,7 @@
type="primary"
size="mini"
@click="saveMoveDs(tDs)"
>{{
$t('dataset.confirm')
}}
>{{ $t('dataset.confirm') }}
</el-button>
</div>
</el-dialog>
......@@ -516,7 +529,12 @@ import { adaptCurTheme } from '@/components/canvas/utils/style'
export default {
name: 'Group',
components: { ChartType, TableSelector, GroupMoveSelector, ChartMoveSelector },
components: {
ChartType,
TableSelector,
GroupMoveSelector,
ChartMoveSelector
},
props: {
saveStatus: {
type: Object,
......@@ -565,14 +583,30 @@ export default {
},
groupFormRules: {
name: [
{ required: true, message: this.$t('commons.input_content'), trigger: 'change' },
{ max: 50, message: this.$t('commons.char_can_not_more_50'), trigger: 'change' }
{
required: true,
message: this.$t('commons.input_content'),
trigger: 'change'
},
{
max: 50,
message: this.$t('commons.char_can_not_more_50'),
trigger: 'change'
}
]
},
tableFormRules: {
name: [
{ required: true, message: this.$t('commons.input_content'), trigger: 'change' },
{ max: 50, message: this.$t('commons.char_can_not_more_50'), trigger: 'change' }
{
required: true,
message: this.$t('commons.input_content'),
trigger: 'change'
},
{
max: 50,
message: this.$t('commons.char_can_not_more_50'),
trigger: 'change'
}
]
},
selectTableFlag: false,
......@@ -610,7 +644,8 @@ export default {
},
renderOptions: [
{ name: 'AntV', value: 'antv' },
{ name: 'ECharts', value: 'echarts' }
{ name: 'ECharts', value: 'echarts' },
{ name: '地图', value: 'aMap' }
],
searchPids: [], // 查询命中的pid
filterText: '',
......@@ -637,8 +672,7 @@ export default {
}
},
watch: {
saveStatus() {
},
saveStatus() {},
adviceGroupId() {
// 仪表板新建视图建议的存放路径
if (this.optFrom === 'panel') {
......@@ -660,20 +694,25 @@ export default {
if (newVal.type === oldVal.type && newVal.render === oldVal.render) {
return
}
this.view.isPlugin = this.$refs['cu-chart-type'] && this.$refs['cu-chart-type'].currentIsPlugin(newVal.type, newVal.render)
this.view.isPlugin =
this.$refs['cu-chart-type'] &&
this.$refs['cu-chart-type'].currentIsPlugin(newVal.type, newVal.render)
}
},
created() {
const plugins = localStorage.getItem('plugin-views') && JSON.parse(localStorage.getItem('plugin-views'))
const plugins =
localStorage.getItem('plugin-views') &&
JSON.parse(localStorage.getItem('plugin-views'))
if (plugins) {
this.loadPluginType()
} else {
pluginTypes().then(res => {
pluginTypes()
.then((res) => {
const plugins = res.data
localStorage.setItem('plugin-views', JSON.stringify(plugins))
this.loadPluginType()
}).catch(e => {
})
.catch((e) => {
localStorage.setItem('plugin-views', null)
this.loadPluginType()
})
......@@ -688,8 +727,16 @@ export default {
},
methods: {
loadPluginType() {
const plugins = localStorage.getItem('plugin-views') && JSON.parse(localStorage.getItem('plugin-views')) || []
const pluginOptions = plugins.filter(plugin => !this.renderOptions.some(option => option.value === plugin.render)).map(plugin => {
const plugins =
(localStorage.getItem('plugin-views') &&
JSON.parse(localStorage.getItem('plugin-views'))) ||
[]
const pluginOptions = plugins
.filter(
(plugin) =>
!this.renderOptions.some((option) => option.value === plugin.render)
)
.map((plugin) => {
return { name: plugin.render, value: plugin.render }
})
this.pluginRenderOptions = [...this.renderOptions, ...pluginOptions]
......@@ -707,9 +754,9 @@ export default {
beforeClickAdd(type, data, node) {
return {
'type': type,
'data': data,
'node': node
type: type,
data: data,
node: node
}
},
......@@ -742,9 +789,9 @@ export default {
beforeClickMore(type, data, node) {
return {
'type': type,
'data': data,
'node': node
type: type,
data: data,
node: node
}
},
......@@ -764,7 +811,7 @@ export default {
saveGroup(group) {
this.$refs['groupForm'].validate((valid) => {
if (valid) {
post('/chart/group/save', group).then(response => {
post('/chart/group/save', group).then((response) => {
this.close()
this.$message({
message: this.$t('dataset.save_success'),
......@@ -784,7 +831,8 @@ export default {
if (valid) {
view.title = view.name
view.sceneId = view.pid
post('/chart/view/save/' + this.panelInfo.id, view).then(response => {
post('/chart/view/save/' + this.panelInfo.id, view).then(
(response) => {
this.closeTable()
this.$message({
message: this.$t('dataset.save_success'),
......@@ -793,7 +841,8 @@ export default {
})
this.treeNode()
this.$emit('switchComponent', { name: '' })
})
}
)
} else {
// this.$message({
// message: this.$t('commons.input_content'),
......@@ -810,8 +859,9 @@ export default {
confirmButtonText: this.$t('chart.confirm'),
cancelButtonText: this.$t('chart.cancel'),
type: 'warning'
}).then(() => {
post('/chart/group/delete/' + data.id, null).then(response => {
})
.then(() => {
post('/chart/group/delete/' + data.id, null).then((response) => {
this.$message({
type: 'success',
message: this.$t('chart.delete_success'),
......@@ -820,8 +870,8 @@ export default {
this.treeNode()
this.$emit('switchComponent', { name: '' })
})
}).catch(() => {
})
.catch(() => {})
},
deleteChart(data) {
......@@ -829,8 +879,9 @@ export default {
confirmButtonText: this.$t('chart.confirm'),
cancelButtonText: this.$t('chart.cancel'),
type: 'warning'
}).then(() => {
post('/chart/view/delete/' + data.id, null).then(response => {
})
.then(() => {
post('/chart/view/delete/' + data.id, null).then((response) => {
this.$message({
type: 'success',
message: this.$t('chart.delete_success'),
......@@ -840,8 +891,8 @@ export default {
this.$emit('switchComponent', { name: '' })
this.$store.dispatch('chart/setTable', null)
})
}).catch(() => {
})
.catch(() => {})
},
close() {
......@@ -865,7 +916,7 @@ export default {
},
groupTree(group) {
post('/chart/group/tree', group).then(response => {
post('/chart/group/tree', group).then((response) => {
this.tData = response.data
})
},
......@@ -882,12 +933,12 @@ export default {
},
treeNode(cache = false) {
const modelInfo = localStorage.getItem('chart-tree')
const userCache = (modelInfo && cache)
const userCache = modelInfo && cache
if (userCache) {
this.tData = JSON.parse(modelInfo)
this.initCurrentNode()
}
queryAuthModel({ modelType: 'chart' }, !userCache).then(res => {
queryAuthModel({ modelType: 'chart' }, !userCache).then((res) => {
localStorage.setItem('chart-tree', JSON.stringify(res.data))
if (!userCache) {
this.tData = res.data
......@@ -906,7 +957,7 @@ export default {
post('/chart/view/list', {
sort: 'create_time desc,name asc',
sceneId: this.currGroup.id
}).then(response => {
}).then((response) => {
this.tables = response.data
this.chartData = JSON.parse(JSON.stringify(this.tables))
})
......@@ -927,7 +978,7 @@ export default {
beforeClickAddData(type) {
return {
'type': type
type: type
}
},
sceneClick(data, node) {
......@@ -1037,18 +1088,24 @@ export default {
this.setChartDefaultOptions(view)
const _this = this
post('/chart/view/newOne/' + this.panelInfo.id, view, true).then(response => {
console.log(view)
post('/chart/view/newOne/' + this.panelInfo.id, view, true).then(
(response) => {
this.closeCreateChart()
this.$store.dispatch('chart/setTableId', null)
this.$store.dispatch('chart/setTableId', this.table.id)
if (this.optFrom === 'panel') {
this.$emit('newViewInfo', { 'id': response.data.id, 'type': response.data.type })
this.$emit('newViewInfo', {
id: response.data.id,
type: response.data.type
})
} else {
_this.expandedArray.push(response.data.sceneId)
_this.currentKey = response.data.id
_this.treeNode()
}
})
}
)
},
setChartDefaultOptions(view) {
......@@ -1095,7 +1152,7 @@ export default {
if (path === '/chart/chart-edit') {
this.sceneMode = true
const sceneId = this.$store.state.chart.sceneId
post('/chart/group/getScene/' + sceneId, null).then(response => {
post('/chart/group/getScene/' + sceneId, null).then((response) => {
this.currGroup = response.data
})
}
......@@ -1121,7 +1178,7 @@ export default {
post('/chart/view/listAndGroup', {
sort: 'name asc,create_time desc',
sceneId: node.data.id
}).then(response => {
}).then((response) => {
this.tables = response.data
this.chartData = JSON.parse(JSON.stringify(this.tables))
resolve(this.chartData)
......@@ -1135,7 +1192,10 @@ export default {
moveTo(data) {
this.moveGroup = true
this.moveDialogTitle = this.$t('dataset.m1') + (data.name.length > 10 ? (data.name.substr(0, 10) + '...') : data.name) + this.$t('dataset.m2')
this.moveDialogTitle =
this.$t('dataset.m1') +
(data.name.length > 10 ? data.name.substr(0, 10) + '...' : data.name) +
this.$t('dataset.m2')
},
closeMoveGroup() {
this.moveGroup = false
......@@ -1150,7 +1210,7 @@ export default {
},
saveMoveGroup() {
this.groupForm.pid = this.tGroup.id
post('/chart/group/save', this.groupForm).then(res => {
post('/chart/group/save', this.groupForm).then((res) => {
this.closeMoveGroup()
this.treeNode()
})
......@@ -1162,7 +1222,10 @@ export default {
moveToDs(data) {
this.moveDs = true
this.moveDialogTitle = this.$t('dataset.m1') + (data.name.length > 10 ? (data.name.substr(0, 10) + '...') : data.name) + this.$t('dataset.m2')
this.moveDialogTitle =
this.$t('dataset.m1') +
(data.name.length > 10 ? data.name.substr(0, 10) + '...' : data.name) +
this.$t('dataset.m2')
},
closeMoveDs() {
this.moveDs = false
......@@ -1178,7 +1241,7 @@ export default {
saveMoveDs() {
const newSceneId = this.tDs.id
this.dsForm.sceneId = newSceneId
post('/chart/view/save/' + this.panelInfo.id, this.dsForm).then(res => {
post('/chart/view/save/' + this.panelInfo.id, this.dsForm).then((res) => {
this.closeMoveDs()
this.expandedArray.push(newSceneId)
this.treeNode()
......@@ -1194,7 +1257,7 @@ export default {
},
getChartGroupTree() {
chartGroupTree({}).then(res => {
chartGroupTree({}).then((res) => {
this.chartGroupTreeAvailable = res.data
})
},
......@@ -1218,7 +1281,10 @@ export default {
filterNode(value, data) {
if (!value) return true
if (this.searchType === 'folder') {
if (data.modelInnerType === 'group' && data.label.indexOf(value) !== -1) {
if (
data.modelInnerType === 'group' &&
data.label.indexOf(value) !== -1
) {
this.searchPids.push(data.id)
return true
}
......@@ -1247,7 +1313,7 @@ export default {
<style scoped>
.el-divider--horizontal {
margin: 12px 0
margin: 12px 0;
}
.search-input {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论