Skip to content

Y
yqlh-dataEase
Commit dcae35ac by cwx
Options

高德地图插件

parent 621bbde4
正在显示 包含 1119 行增加 和 760 行删除
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,21 +18,24 @@ ...@@ -18,21 +18,24 @@
:view-id="element.propValue.viewId" :view-id="element.propValue.viewId"
@showViewDetails="openChartDetailsDialog" @showViewDetails="openChartDetailsDialog"
/> />
<div <div v-if="requestStatus === 'error'" class="chart-error-class">
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
v-if="chart.isPlugin" v-if="chart.isPlugin"
:ref="element.propValue.id" :ref="element.propValue.id"
:component-name="chart.type + '-view'" :component-name="chart.type + '-view'"
:obj="{active, chart, trackMenu, searchCount, terminalType: scaleCoefficientType}" :obj="{
active,
chart,
trackMenu,
searchCount,
terminalType: scaleCoefficientType,
}"
:chart="chart" :chart="chart"
:track-menu="trackMenu" :track-menu="trackMenu"
:in-screen="inScreen" :in-screen="inScreen"
...@@ -119,14 +122,19 @@ ...@@ -119,14 +122,19 @@
@onChartClick="chartClick" @onChartClick="chartClick"
@onJumpClick="jumpClick" @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-path
:drill-filters="drillFilters" :drill-filters="drillFilters"
:theme-style="element.commonBackground" :theme-style="element.commonBackground"
@onDrillJump="drillJump" @onDrillJump="drillJump"
/> />
</div> </div>
<!--dialog--> <!--dialog-->
<!--视图详情--> <!--视图详情-->
<el-dialog <el-dialog
...@@ -140,27 +148,37 @@ ...@@ -140,27 +148,37 @@
> >
<span <span
v-if="chartDetailsVisible" v-if="chartDetailsVisible"
style="position: absolute;right: 70px;top:15px" style="position: absolute; right: 70px; top: 15px"
> >
<el-button <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" 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="showChartInfoType==='details' && hasDataPermission('export',panelInfo.privileges)" v-if="
showChartInfoType === 'details' &&
hasDataPermission('export', panelInfo.privileges)
"
size="mini" size="mini"
:disabled="$store.getters.loadingMap[$store.getters.currentPath] || dialogLoading" :disabled="
$store.getters.loadingMap[$store.getters.currentPath] ||
dialogLoading
"
@click="exportExcel" @click="exportExcel"
> >
<svg-icon <svg-icon icon-class="ds-excel" class="ds-icon-excel" />{{
icon-class="ds-excel" $t("chart.export")
class="ds-icon-excel" }}Excel
/>{{ $t('chart.export') }}Excel
</el-button> </el-button>
</span> </span>
<user-view-dialog <user-view-dialog
...@@ -192,37 +210,43 @@ ...@@ -192,37 +210,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 EditBarView from '@/components/canvas/components/editor/EditBarView' import AMap from "@/views/chart/components/AMap";
import { adaptCurTheme, customAttrTrans, customStyleTrans, recursionTransObj } from '@/components/canvas/utils/style' import EditBarView from "@/components/canvas/components/editor/EditBarView";
import ChartComponentS2 from '@/views/chart/components/ChartComponentS2' import {
import PluginCom from '@/views/system/plugin/PluginCom' adaptCurTheme,
import LabelNormalText from '@/views/chart/components/normal/LabelNormalText' customAttrTrans,
import { viewEditSave, viewPropsSave } from '@/api/chart/chart' customStyleTrans,
import { checkAddHttp } from '@/utils/urlUtils' recursionTransObj,
import DeRichTextView from '@/components/canvas/customComponent/DeRichTextView' } from "@/components/canvas/utils/style";
import Vue from 'vue' import ChartComponentS2 from "@/views/chart/components/ChartComponentS2";
import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter' import PluginCom from "@/views/system/plugin/PluginCom";
import UserViewDialog from '@/components/canvas/customComponent/UserViewDialog' import LabelNormalText from "@/views/chart/components/normal/LabelNormalText";
import UserViewMobileDialog from '@/components/canvas/customComponent/UserViewMobileDialog' import { viewEditSave, viewPropsSave } from "@/api/chart/chart";
import { equalsAny } from '@/utils/StringUtils' 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 { export default {
name: 'UserView', name: "UserView",
components: { components: {
UserViewMobileDialog, UserViewMobileDialog,
UserViewDialog, UserViewDialog,
...@@ -235,78 +259,79 @@ export default { ...@@ -235,78 +259,79 @@ export default {
TableNormal, TableNormal,
LabelNormal, LabelNormal,
DrillPath, DrillPath,
ChartComponentG2 ChartComponentG2,
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 {
...@@ -317,7 +342,7 @@ export default { ...@@ -317,7 +342,7 @@ export default {
chartDetailsVisible: false, chartDetailsVisible: false,
showChartInfo: {}, showChartInfo: {},
showChartTableInfo: {}, showChartTableInfo: {},
showChartInfoType: 'details', showChartInfoType: "details",
dataRowNameSelect: {}, dataRowNameSelect: {},
dataRowSelect: {}, dataRowSelect: {},
curFields: [], curFields: [],
...@@ -325,7 +350,7 @@ export default { ...@@ -325,7 +350,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: [],
...@@ -333,7 +358,7 @@ export default { ...@@ -333,7 +358,7 @@ export default {
places: [], places: [],
httpRequest: { httpRequest: {
status: true, status: true,
msg: '' msg: "",
}, },
timeMachine: null, timeMachine: null,
scaleTimeMachine: null, scaleTimeMachine: null,
...@@ -352,886 +377,1110 @@ export default { ...@@ -352,886 +377,1110 @@ export default {
currentPage: { currentPage: {
page: 1, page: 1,
pageSize: 20, pageSize: 20,
show: 0 show: 0,
}, },
view: {}, view: {},
cancelTime: null cancelTime: null,
} };
}, },
computed: { computed: {
// 首次加载且非编辑状态新复制的视图，使用外部filter // 首次加载且非编辑状态新复制的视图，使用外部filter
initLoad() { initLoad() {
return !(this.isEdit && this.currentCanvasNewId.includes(this.element.id)) && this.isFirstLoad return (
!(this.isEdit && this.currentCanvasNewId.includes(this.element.id)) &&
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() {
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() { richTextViewShowFlag() {
return this.httpRequest.status && this.chart.type && this.chart.type === 'richTextView' return (
this.httpRequest.status &&
this.chart.type &&
this.chart.type === "richTextView"
);
}, },
charViewShowFlag() { 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() { 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() { 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() { 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() { 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() { labelTextShowFlag() {
return this.httpRequest.status && this.chart.type && this.chart.type === 'label' return (
this.httpRequest.status &&
this.chart.type &&
this.chart.type === "label"
);
}, },
loadingFlag() { 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() { 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.fields && this.chart.data.fields.forEach(item => { this.chart.data &&
const sourceInfo = this.chart.id + '#' + item.id this.chart.data.fields &&
if (this.nowPanelTrackInfo[sourceInfo]) { this.chart.data.fields.forEach((item) => {
linkageCount++ const sourceInfo = this.chart.id + "#" + item.id;
} if (this.nowPanelTrackInfo[sourceInfo]) {
}) linkageCount++;
this.chart.data && this.chart.data.fields && this.chart.data.fields.forEach(item => { }
const sourceInfo = this.chart.id + '#' + item.id });
if (this.nowPanelJumpInfo[sourceInfo]) { this.chart.data &&
jumpCount++ this.chart.data.fields &&
} this.chart.data.fields.forEach((item) => {
}) const sourceInfo = this.chart.id + "#" + item.id;
if (this.nowPanelJumpInfo[sourceInfo]) {
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 this.canvasStyleData.panel && this.canvasStyleData.panel.resultMode || null return (
(this.canvasStyleData.panel && this.canvasStyleData.panel.resultMode) ||
null
);
}, },
resultCount() { resultCount() {
return this.canvasStyleData.panel && this.canvasStyleData.panel.resultCount || null return (
(this.canvasStyleData.panel &&
this.canvasStyleData.panel.resultCount) ||
null
);
}, },
gap() { gap() {
return this.canvasStyleData.panel && this.canvasStyleData.panel.gap || null return (
(this.canvasStyleData.panel && this.canvasStyleData.panel.gap) || null
);
}, },
innerPadding() { innerPadding() {
return this.element.commonBackground && this.element.commonBackground.innerPadding || 0 return (
(this.element.commonBackground &&
this.element.commonBackground.innerPadding) ||
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 (val1 > 0 && this.requestStatus !== 'waiting' && !this.innerRefreshTimer) { if (
this.getData(this.element.propValue.viewId) val1 > 0 &&
this.requestStatus !== "waiting" &&
!this.innerRefreshTimer
) {
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 (this.element && this.element.propValue && this.element.propValue.viewId) { if (
this.element &&
this.element.propValue &&
this.element.propValue.viewId
) {
// 如果watch.filters 已经进行数据初始化时候，此处放弃数据初始化 // 如果watch.filters 已经进行数据初始化时候，此处放弃数据初始化
this.getData(this.element.propValue.viewId, false) this.getData(this.element.propValue.viewId, false);
} }
}, },
methods: { methods: {
equalsAny, equalsAny,
tabSwitch(tabCanvasId) { tabSwitch(tabCanvasId) {
if (this.charViewS2ShowFlag && tabCanvasId === this.canvasId && this.$refs[this.element.propValue.id]) { if (
this.$refs[this.element.propValue.id].chartResize() 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) { buildInnerRefreshTimer(
if (this.editMode === 'preview' && !this.innerRefreshTimer && refreshViewEnable) { refreshViewEnable = false,
this.innerRefreshTimer && clearInterval(this.innerRefreshTimer) refreshUnit = "minute",
const timerRefreshTime = refreshUnit === 'second' ? refreshTime * 1000 : refreshTime * 60000 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.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] = param.value[param.value.modifyName] sourceCustomAttr[param.property][param.value.modifyName] =
this.sourceCustomAttrStr = JSON.stringify(sourceCustomAttr) param.value[param.value.modifyName];
this.chart.customAttr = this.sourceCustomAttrStr this.sourceCustomAttrStr = JSON.stringify(sourceCustomAttr);
this.$store.commit('updateComponentViewsData', { this.chart.customAttr = this.sourceCustomAttrStr;
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] = param.value[param.value.modifyName] sourceCustomStyle[param.property][param.value.modifyName] =
this.sourceCustomStyleStr = JSON.stringify(sourceCustomStyle) param.value[param.value.modifyName];
this.chart.customStyle = this.sourceCustomStyleStr this.sourceCustomStyleStr = JSON.stringify(sourceCustomStyle);
this.$store.commit('updateComponentViewsData', { this.chart.customStyle = this.sourceCustomStyleStr;
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', { viewId: this.chart.id, hasEdit: true }) this.$store.commit("recordViewEdit", {
this.mergeScale() viewId: this.chart.id,
hasEdit: true,
});
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', { viewId: this.chart.id, hasEdit: true }) this.$store.commit("recordViewEdit", {
this.mergeScale() viewId: this.chart.id,
hasEdit: true,
});
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({ methodName: 'chartResize' }) ? this.$refs[this.element.propValue.id].callPluginInner({
: this.$refs[this.element.propValue.id].chartResize() methodName: "chartResize",
})
: this.$refs[this.element.propValue.id].chartResize();
} }
}, },
pluginChartClick(param) { 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) { 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) { 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) { 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(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) { clearPanelLinkage(param) {
if (param.viewId === 'all' || param.viewId === this.element.propValue.viewId) { if (
param.viewId === "all" ||
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() {
this.scale = Math.min(this.previewCanvasScale.scalePointWidth, this.previewCanvasScale.scalePointHeight) * this.scaleCoefficient this.scale =
const customAttrChart = JSON.parse(this.sourceCustomAttrStr) Math.min(
const customStyleChart = JSON.parse(this.sourceCustomStyleStr) this.previewCanvasScale.scalePointWidth,
recursionTransObj(customAttrTrans, customAttrChart, this.scale, this.scaleCoefficientType) this.previewCanvasScale.scalePointHeight
recursionTransObj(customStyleTrans, customStyleChart, this.scale, this.scaleCoefficientType) ) * 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') { 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) {
if (this.getDataLoading || Vue.prototype.$currentHttpRequestList.get(`/chart/view/getData/${id}/${this.panelInfo.id}`)) { if (
const url = `/chart/view/getData/${id}/${this.panelInfo.id}` this.getDataLoading ||
Vue.prototype.$cancelRequest(url) Vue.prototype.$currentHttpRequestList.get(
Vue.prototype.$currentHttpRequestList.delete(url) `/chart/view/getData/${id}/${this.panelInfo.id}`
this.getDataLoading = false )
this.getData(id, cache, dataBroadcast) ) {
clearTimeout(this.cancelTime) 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.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 (this.chart.type === 'table-info' && this.view.datasetMode === 0 && (!attrSize.tablePageMode || attrSize.tablePageMode === 'page')) { if (
requestInfo.goPage = this.currentPage.page this.chart.type === "table-info" &&
requestInfo.pageSize = this.currentPage.pageSize === parseInt(attrSize.tablePageSize) ? this.currentPage.pageSize : parseInt(attrSize.tablePageSize) 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) { 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)
// 将视图传入echart组件 .then((response) => {
if (response.success) { // 将视图传入echart组件
this.chart = response.data if (response.success) {
this.view = response.data this.chart = response.data;
if (this.chart.type.includes('table')) { this.view = response.data;
this.$store.commit('setLastViewRequestInfo', { viewId: id, requestInfo: requestInfo }) if (this.chart.type.includes("table")) {
} this.$store.commit("setLastViewRequestInfo", {
this.buildInnerRefreshTimer(this.chart.refreshViewEnable, this.chart.refreshUnit, this.chart.refreshTime) viewId: id,
this.$emit('fill-chart-2-parent', this.chart) requestInfo: requestInfo,
this.getDataOnly(response.data, dataBroadcast) });
this.chart['position'] = this.inTab ? 'tab' : 'panel' }
// 记录当前数据 this.buildInnerRefreshTimer(
this.panelViewDetailsInfo[id] = JSON.stringify(this.chart) this.chart.refreshViewEnable,
if (this.element.needAdaptor) { this.chart.refreshUnit,
const customStyleObj = JSON.parse(this.chart.customStyle) this.chart.refreshTime
const customAttrObj = JSON.parse(this.chart.customAttr) );
adaptCurTheme(customStyleObj, customAttrObj) this.$emit("fill-chart-2-parent", this.chart);
this.chart.customStyle = JSON.stringify(customStyleObj) this.getDataOnly(response.data, dataBroadcast);
this.chart.customAttr = JSON.stringify(customAttrObj) this.chart["position"] = this.inTab ? "tab" : "panel";
viewEditSave(this.panelInfo.id, { // 记录当前数据
id: this.chart.id, this.panelViewDetailsInfo[id] = JSON.stringify(this.chart);
customStyle: this.chart.customStyle, if (this.element.needAdaptor) {
customAttr: this.chart.customAttr const customStyleObj = JSON.parse(this.chart.customStyle);
}) const customAttrObj = JSON.parse(this.chart.customAttr);
this.$store.commit('adaptorStatusDisable', this.element.id) adaptCurTheme(customStyleObj, customAttrObj);
} this.chart.customStyle = JSON.stringify(customStyleObj);
this.sourceCustomAttrStr = this.chart.customAttr this.chart.customAttr = JSON.stringify(customAttrObj);
this.sourceCustomStyleStr = this.chart.customStyle viewEditSave(this.panelInfo.id, {
this.chart.drillFields = this.chart.drillFields ? JSON.parse(this.chart.drillFields) : [] id: this.chart.id,
if (!response.data.drill) { customStyle: this.chart.customStyle,
this.drillClickDimensionList.splice(this.drillClickDimensionList.length - 1, 1) customAttr: this.chart.customAttr,
this.resetDrill() });
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;
} else {
console.error("err2-" + JSON.stringify(response));
this.requestStatus = "error";
this.message = response.message;
} }
this.drillFilters = JSON.parse(JSON.stringify(response.data.drillFilters ? response.data.drillFilters : [])) this.isFirstLoad = false;
this.drillFields = JSON.parse(JSON.stringify(response.data.drillFields)) return true;
this.requestStatus = 'merging' })
this.mergeScale() .catch((err) => {
this.initCurFields(this.chart) console.error("err-" + err);
this.requestStatus = 'success' this.requestStatus = "error";
this.httpRequest.status = true if (err.message && err.message.indexOf("timeout") > -1) {
} else { this.message = this.$t("panel.timeout_refresh");
console.error('err2-' + JSON.stringify(response)) } else if (!err.response) {
this.requestStatus = 'error' this.httpRequest.status = false;
this.message = response.message } else {
} if (err.response) {
this.isFirstLoad = false this.httpRequest.status = err.response.data.success;
return true this.httpRequest.msg = err.response.data.message;
}).catch(err => { if (err && err.response && err.response.data) {
console.error('err-' + err) this.message = err.response.data.message;
this.requestStatus = 'error' } else {
if (err.message && err.message.indexOf('timeout') > -1) { this.message = err;
this.message = this.$t('panel.timeout_refresh') }
} else if (!err.response) {
this.httpRequest.status = false
} else {
if (err.response) {
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
} else {
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 = chartDetails.xaxis + chartDetails.xaxisExt + chartDetails.yaxis + chartDetails.yaxisExt const checkAllAxisStr =
chartDetails.data.sourceFields.forEach(field => { chartDetails.xaxis +
chartDetails.xaxisExt +
chartDetails.yaxis +
chartDetails.yaxisExt;
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((pre, next) => { const sourceFieldNameIdMap = chartDetails.data.fields.reduce(
pre[next['dataeaseName']] = next['name'] (pre, next) => {
return pre pre[next["dataeaseName"]] = next["name"];
}, {}) return pre;
const rowData = chartDetails.data.tableRow[0] },
if (chartDetails.type === 'richTextView') { {}
let yAxis = [] );
const rowData = chartDetails.data.tableRow[0];
if (chartDetails.type === "richTextView") {
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) {
if (this.drillClickDimensionList.length < this.chart.drillFields.length - 1) { if (
(this.chart.type === 'map' || this.chart.type === 'buddle-map') && this.sendToChildren(param) this.drillClickDimensionList.length <
this.drillClickDimensionList.push({ dimensionList: param.data.dimensionList }) this.chart.drillFields.length - 1
this.getData(this.element.propValue.viewId) ) {
(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) { } 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) => {
if (dimensionItem.id === param.name || dimensionItem.value === param.name) { if (
dimension = dimensionItem dimensionItem.id === param.name ||
sourceInfo = param.viewId + '#' + dimension.id dimensionItem.value === param.name
jumpInfo = this.nowPanelJumpInfo[sourceInfo] ) {
dimension = dimensionItem;
sourceInfo = param.viewId + "#" + dimension.id;
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('id', 'value', jumpInfo.content, colList) let url = this.setIdValueTrans(
url = checkAddHttp(url) "id",
this.windowsJump(url, jumpInfo.jumpType) "value",
jumpInfo.content,
colList
);
url = checkAddHttp(url);
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.callPluginInner && this.setDetailMapCode(null) && current.callPluginInner({ current &&
methodName: 'registerDynamicMap', current.callPluginInner &&
methodParam: null this.setDetailMapCode(null) &&
}) current.callPluginInner({
methodName: "registerDynamicMap",
methodParam: null,
});
} else { } else {
current && current.registerDynamicMap && this.setDetailMapCode(null) && current.registerDynamicMap(null) current &&
current.registerDynamicMap &&
this.setDetailMapCode(null) &&
current.registerDynamicMap(null);
} }
} }
}, },
drillJump(index) { drillJump(index) {
const length = this.drillClickDimensionList.length const length = this.drillClickDimensionList.length;
this.drillClickDimensionList = this.drillClickDimensionList.slice(0, index) this.drillClickDimensionList = this.drillClickDimensionList.slice(
if (this.chart.type === 'map' || this.chart.type === 'buddle-map') { 0,
this.backToParent(index, length) 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) { 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.callPluginInner && this.setDetailMapCode(this.currentAcreaNode.code) && current.callPluginInner({ current &&
methodName: 'registerDynamicMap', current.callPluginInner &&
methodParam: this.currentAcreaNode.code this.setDetailMapCode(this.currentAcreaNode.code) &&
}) current.callPluginInner({
methodName: "registerDynamicMap",
methodParam: this.currentAcreaNode.code,
});
} else { } 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) { 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(aCode || customAttr.areaCode, this.places) const currentNode = this.findEntityByCode(
if (currentNode && currentNode.children && currentNode.children.length > 0) { aCode || customAttr.areaCode,
const nextNode = currentNode.children.find(item => item.name === name) this.places
this.currentAcreaNode = nextNode );
const current = this.$refs[this.element.propValue.id] 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) { if (this.chart.isPlugin) {
nextNode && current && current.callPluginInner && this.setDetailMapCode(nextNode.code) && current.callPluginInner({ nextNode &&
methodName: 'registerDynamicMap', current &&
methodParam: nextNode.code current.callPluginInner &&
}) this.setDetailMapCode(nextNode.code) &&
current.callPluginInner({
methodName: "registerDynamicMap",
methodParam: nextNode.code,
});
} else { } 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) { 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 && areaMapping().then(res => { Object.keys(this.places).length === 0 &&
this.places = res.data areaMapping().then((res) => {
}) 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.callPluginInner && current.callPluginInner({ current &&
methodName: 'registerDynamicMap', current.callPluginInner &&
methodParam: areaNode.code current.callPluginInner({
}) methodName: "registerDynamicMap",
methodParam: areaNode.code,
});
} else { } else {
current && current.registerDynamicMap && current.registerDynamicMap(areaNode.code) current &&
current.registerDynamicMap &&
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;
}, },
// 边框变化 // 边框变化
...@@ -1240,11 +1489,13 @@ export default { ...@@ -1240,11 +1489,13 @@ export default {
this.timeMachine = setTimeout(() => { this.timeMachine = setTimeout(() => {
if (index === this.changeIndex) { if (index === this.changeIndex) {
this.chart.isPlugin this.chart.isPlugin
? this.$refs[this.element.propValue.id].callPluginInner({ methodName: 'chartResize' }) ? this.$refs[this.element.propValue.id].callPluginInner({
: this.$refs[this.element.propValue.id].chartResize() methodName: "chartResize",
})
: this.$refs[this.element.propValue.id].chartResize();
} }
this.destroyTimeMachine() this.destroyTimeMachine();
}, 50) }, 50);
} }
}, },
...@@ -1253,74 +1504,84 @@ export default { ...@@ -1253,74 +1504,84 @@ 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.chart[param.refreshProp] this.componentViewsData[this.chart.id][param.refreshProp] =
this.chart[param.refreshProp];
} }
} }
this.mergeScale() this.mergeScale();
} }
}, },
getDataOnly(sourceResponseData, dataBroadcast) { getDataOnly(sourceResponseData, dataBroadcast) {
if (this.isEdit) { 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 = { 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 (this.chart.type === 'table-info' && this.view.datasetMode === 0 && (!attrSize.tablePageMode || attrSize.tablePageMode === 'page')) { if (
requestInfo.goPage = this.currentPage.page this.chart.type === "table-info" &&
requestInfo.pageSize = this.currentPage.pageSize 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 => { viewData(this.chart.id, this.panelInfo.id, requestInfo).then(
this.componentViewsData[this.chart.id] = response.data (response) => {
this.view = response.data this.componentViewsData[this.chart.id] = response.data;
if (dataBroadcast) { this.view = response.data;
bus.$emit('prop-change-data') if (dataBroadcast) {
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>
...@@ -1359,7 +1620,6 @@ export default { ...@@ -1359,7 +1620,6 @@ export default {
} }
.active { .active {
} }
.active ::v-deep .icon-fangda { .active ::v-deep .icon-fangda {
...@@ -1368,7 +1628,7 @@ export default { ...@@ -1368,7 +1628,7 @@ export default {
} }
.mobile-dialog-css ::v-deep .el-dialog__headerbtn { .mobile-dialog-css ::v-deep .el-dialog__headerbtn {
top: 7px top: 7px;
} }
.mobile-dialog-css ::v-deep .el-dialog__body { .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 { ...@@ -2938,5 +2938,8 @@ export default {
confirm_title: '强行登录会导致其他客户端掉线', confirm_title: '强行登录会导致其他客户端掉线',
confirm: '是否强行登录？', confirm: '是否强行登录？',
forced_offline: '`当前账号在客户端【${ip}】登录，您已被挤下线！`' 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 @@ ...@@ -9,7 +9,7 @@
icon="el-icon-plus" icon="el-icon-plus"
type="text" type="text"
size="mini" size="mini"
style="float: right;" style="float: right"
@click="add('group')" @click="add('group')"
/> />
</el-row> </el-row>
...@@ -31,10 +31,13 @@ ...@@ -31,10 +31,13 @@
size="mini" size="mini"
type="primary" 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-button>
<el-dropdown-menu slot="dropdown"> <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 @click.native="searchTypeClick('folder')">{{ $t('commons.folder') }}
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
...@@ -57,25 +60,30 @@ ...@@ -57,25 +60,30 @@
@node-collapse="nodeCollapse" @node-collapse="nodeCollapse"
> >
<span <span
v-if="data.modelInnerType ==='group'" v-if="data.modelInnerType === 'group'"
slot-scope="{ node, data }" slot-scope="{ node, data }"
class="custom-tree-node father" class="custom-tree-node father"
> >
<span style="display: flex;flex: 1;width: 0;"> <span style="display: flex; flex: 1; width: 0">
<span> <span>
<i class="el-icon-folder" /> <i class="el-icon-folder" />
</span> </span>
<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" :title="data.name"
>{{ data.name }}</span> >{{ data.name }}</span>
</span> </span>
<span <span
v-if="hasDataPermission('manage',data.privileges)" v-if="hasDataPermission('manage', data.privileges)"
class="child" class="child"
> >
<span <span
v-if="data.modelInnerType ==='group'" v-if="data.modelInnerType === 'group'"
@click.stop @click.stop
> >
<el-dropdown <el-dropdown
...@@ -93,13 +101,13 @@ ...@@ -93,13 +101,13 @@
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item <el-dropdown-item
icon="el-icon-folder-add" icon="el-icon-folder-add"
:command="beforeClickAdd('group',data,node)" :command="beforeClickAdd('group', data, node)"
> >
{{ $t('chart.group') }} {{ $t('chart.group') }}
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item <el-dropdown-item
icon="el-icon-circle-plus" icon="el-icon-circle-plus"
:command="beforeClickAdd('chart',data,node)" :command="beforeClickAdd('chart', data, node)"
> >
{{ $t('chart.add_chart') }} {{ $t('chart.add_chart') }}
</el-dropdown-item> </el-dropdown-item>
...@@ -107,7 +115,7 @@ ...@@ -107,7 +115,7 @@
</el-dropdown> </el-dropdown>
</span> </span>
<span <span
style="margin-left: 12px;" style="margin-left: 12px"
@click.stop @click.stop
> >
<el-dropdown <el-dropdown
...@@ -125,19 +133,19 @@ ...@@ -125,19 +133,19 @@
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item <el-dropdown-item
icon="el-icon-edit-outline" icon="el-icon-edit-outline"
:command="beforeClickMore('rename',data,node)" :command="beforeClickMore('rename', data, node)"
> >
{{ $t('chart.rename') }} {{ $t('chart.rename') }}
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item <el-dropdown-item
icon="el-icon-right" icon="el-icon-right"
:command="beforeClickMore('move',data,node)" :command="beforeClickMore('move', data, node)"
> >
{{ $t('dataset.move_to') }} {{ $t('dataset.move_to') }}
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item <el-dropdown-item
icon="el-icon-delete" icon="el-icon-delete"
:command="beforeClickMore('delete',data,node)" :command="beforeClickMore('delete', data, node)"
> >
{{ $t('chart.delete') }} {{ $t('chart.delete') }}
</el-dropdown-item> </el-dropdown-item>
...@@ -151,19 +159,24 @@ ...@@ -151,19 +159,24 @@
slot-scope="{ node, data }" slot-scope="{ node, data }"
class="custom-tree-node-list father" 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><svg-icon :icon-class="data.modelInnerType" /></span>
<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" :title="data.name"
>{{ data.name }}</span> >{{ data.name }}</span>
</span> </span>
<span <span
v-if="hasDataPermission('manage',data.privileges)" v-if="hasDataPermission('manage', data.privileges)"
class="child" class="child"
> >
<span <span
style="margin-left: 12px;" style="margin-left: 12px"
@click.stop @click.stop
> >
<el-dropdown <el-dropdown
...@@ -181,19 +194,19 @@ ...@@ -181,19 +194,19 @@
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item <el-dropdown-item
icon="el-icon-edit-outline" icon="el-icon-edit-outline"
:command="beforeClickMore('renameChart',data,node)" :command="beforeClickMore('renameChart', data, node)"
> >
{{ $t('chart.rename') }} {{ $t('chart.rename') }}
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item <el-dropdown-item
icon="el-icon-right" icon="el-icon-right"
:command="beforeClickMore('moveDs',data,node)" :command="beforeClickMore('moveDs', data, node)"
> >
{{ $t('dataset.move_to') }} {{ $t('dataset.move_to') }}
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item <el-dropdown-item
icon="el-icon-delete" icon="el-icon-delete"
:command="beforeClickMore('deleteChart',data,node)" :command="beforeClickMore('deleteChart', data, node)"
> >
{{ $t('chart.delete') }} {{ $t('chart.delete') }}
</el-dropdown-item> </el-dropdown-item>
...@@ -297,7 +310,7 @@ ...@@ -297,7 +310,7 @@
width="1000px" width="1000px"
class="dialog-css" class="dialog-css"
> >
<el-row style="width: 800px;"> <el-row style="width: 800px">
<el-form <el-form
ref="form" ref="form"
:model="table" :model="table"
...@@ -332,15 +345,17 @@ ...@@ -332,15 +345,17 @@
/> />
<el-row <el-row
v-show="createActive === 2" v-show="createActive === 2"
style="padding: 0 20px;" style="padding: 0 20px"
> >
<el-row class="chart-box"> <el-row class="chart-box">
<span> <span>
<span <span
class="theme-border-class" class="theme-border-class"
style="font-size: 12px" style="font-size: 12px"
>{{ $t('chart.chart_type') }}</span> >{{
<span style="float: right;"> $t('chart.chart_type')
}}</span>
<span style="float: right">
<el-select <el-select
v-model="view.render" v-model="view.render"
class="render-select" class="render-select"
...@@ -365,7 +380,7 @@ ...@@ -365,7 +380,7 @@
<chart-type <chart-type
ref="cu-chart-type" ref="cu-chart-type"
:chart="view" :chart="view"
style="height: 350px;" style="height: 350px"
/> />
</el-radio-group> </el-radio-group>
</div> </div>
...@@ -373,10 +388,14 @@ ...@@ -373,10 +388,14 @@
</el-row> </el-row>
<el-row <el-row
class="chart-box" class="chart-box"
style="text-align: center;" style="text-align: center"
> >
<svg-icon <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" class="chart-icon"
/> />
</el-row> </el-row>
...@@ -396,9 +415,7 @@ ...@@ -396,9 +415,7 @@
type="primary" type="primary"
size="mini" size="mini"
@click="createPreview" @click="createPreview"
>{{ >{{ $t('chart.preview') }}
$t('chart.preview')
}}
</el-button> </el-button>
<el-button <el-button
v-if="createActive === 1" v-if="createActive === 1"
...@@ -446,9 +463,7 @@ ...@@ -446,9 +463,7 @@
type="primary" type="primary"
size="mini" size="mini"
@click="saveMoveGroup(tGroup)" @click="saveMoveGroup(tGroup)"
>{{ >{{ $t('dataset.confirm') }}
$t('dataset.confirm')
}}
</el-button> </el-button>
</div> </div>
</el-dialog> </el-dialog>
...@@ -480,9 +495,7 @@ ...@@ -480,9 +495,7 @@
type="primary" type="primary"
size="mini" size="mini"
@click="saveMoveDs(tDs)" @click="saveMoveDs(tDs)"
>{{ >{{ $t('dataset.confirm') }}
$t('dataset.confirm')
}}
</el-button> </el-button>
</div> </div>
</el-dialog> </el-dialog>
...@@ -516,7 +529,12 @@ import { adaptCurTheme } from '@/components/canvas/utils/style' ...@@ -516,7 +529,12 @@ import { adaptCurTheme } from '@/components/canvas/utils/style'
export default { export default {
name: 'Group', name: 'Group',
components: { ChartType, TableSelector, GroupMoveSelector, ChartMoveSelector }, components: {
ChartType,
TableSelector,
GroupMoveSelector,
ChartMoveSelector
},
props: { props: {
saveStatus: { saveStatus: {
type: Object, type: Object,
...@@ -565,14 +583,30 @@ export default { ...@@ -565,14 +583,30 @@ export default {
}, },
groupFormRules: { groupFormRules: {
name: [ 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: { tableFormRules: {
name: [ 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, selectTableFlag: false,
...@@ -610,7 +644,8 @@ export default { ...@@ -610,7 +644,8 @@ export default {
}, },
renderOptions: [ renderOptions: [
{ name: 'AntV', value: 'antv' }, { name: 'AntV', value: 'antv' },
{ name: 'ECharts', value: 'echarts' } { name: 'ECharts', value: 'echarts' },
{ name: '地图', value: 'aMap' }
], ],
searchPids: [], // 查询命中的pid searchPids: [], // 查询命中的pid
filterText: '', filterText: '',
...@@ -637,8 +672,7 @@ export default { ...@@ -637,8 +672,7 @@ export default {
} }
}, },
watch: { watch: {
saveStatus() { saveStatus() {},
},
adviceGroupId() { adviceGroupId() {
// 仪表板新建视图建议的存放路径 // 仪表板新建视图建议的存放路径
if (this.optFrom === 'panel') { if (this.optFrom === 'panel') {
...@@ -660,23 +694,28 @@ export default { ...@@ -660,23 +694,28 @@ export default {
if (newVal.type === oldVal.type && newVal.render === oldVal.render) { if (newVal.type === oldVal.type && newVal.render === oldVal.render) {
return 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() { 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) { if (plugins) {
this.loadPluginType() this.loadPluginType()
} else { } else {
pluginTypes().then(res => { pluginTypes()
const plugins = res.data .then((res) => {
localStorage.setItem('plugin-views', JSON.stringify(plugins)) const plugins = res.data
this.loadPluginType() localStorage.setItem('plugin-views', JSON.stringify(plugins))
}).catch(e => { this.loadPluginType()
localStorage.setItem('plugin-views', null) })
this.loadPluginType() .catch((e) => {
}) localStorage.setItem('plugin-views', null)
this.loadPluginType()
})
} }
}, },
mounted() { mounted() {
...@@ -688,10 +727,18 @@ export default { ...@@ -688,10 +727,18 @@ export default {
}, },
methods: { methods: {
loadPluginType() { loadPluginType() {
const plugins = localStorage.getItem('plugin-views') && JSON.parse(localStorage.getItem('plugin-views')) || [] const plugins =
const pluginOptions = plugins.filter(plugin => !this.renderOptions.some(option => option.value === plugin.render)).map(plugin => { (localStorage.getItem('plugin-views') &&
return { name: plugin.render, value: plugin.render } 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] this.pluginRenderOptions = [...this.renderOptions, ...pluginOptions]
}, },
clickAdd(param) { clickAdd(param) {
...@@ -707,9 +754,9 @@ export default { ...@@ -707,9 +754,9 @@ export default {
beforeClickAdd(type, data, node) { beforeClickAdd(type, data, node) {
return { return {
'type': type, type: type,
'data': data, data: data,
'node': node node: node
} }
}, },
...@@ -742,9 +789,9 @@ export default { ...@@ -742,9 +789,9 @@ export default {
beforeClickMore(type, data, node) { beforeClickMore(type, data, node) {
return { return {
'type': type, type: type,
'data': data, data: data,
'node': node node: node
} }
}, },
...@@ -764,7 +811,7 @@ export default { ...@@ -764,7 +811,7 @@ export default {
saveGroup(group) { saveGroup(group) {
this.$refs['groupForm'].validate((valid) => { this.$refs['groupForm'].validate((valid) => {
if (valid) { if (valid) {
post('/chart/group/save', group).then(response => { post('/chart/group/save', group).then((response) => {
this.close() this.close()
this.$message({ this.$message({
message: this.$t('dataset.save_success'), message: this.$t('dataset.save_success'),
...@@ -784,16 +831,18 @@ export default { ...@@ -784,16 +831,18 @@ export default {
if (valid) { if (valid) {
view.title = view.name view.title = view.name
view.sceneId = view.pid view.sceneId = view.pid
post('/chart/view/save/' + this.panelInfo.id, view).then(response => { post('/chart/view/save/' + this.panelInfo.id, view).then(
this.closeTable() (response) => {
this.$message({ this.closeTable()
message: this.$t('dataset.save_success'), this.$message({
type: 'success', message: this.$t('dataset.save_success'),
showClose: true type: 'success',
}) showClose: true
this.treeNode() })
this.$emit('switchComponent', { name: '' }) this.treeNode()
}) this.$emit('switchComponent', { name: '' })
}
)
} else { } else {
// this.$message({ // this.$message({
// message: this.$t('commons.input_content'), // message: this.$t('commons.input_content'),
...@@ -810,18 +859,19 @@ export default { ...@@ -810,18 +859,19 @@ export default {
confirmButtonText: this.$t('chart.confirm'), confirmButtonText: this.$t('chart.confirm'),
cancelButtonText: this.$t('chart.cancel'), cancelButtonText: this.$t('chart.cancel'),
type: 'warning' type: 'warning'
}).then(() => { })
post('/chart/group/delete/' + data.id, null).then(response => { .then(() => {
this.$message({ post('/chart/group/delete/' + data.id, null).then((response) => {
type: 'success', this.$message({
message: this.$t('chart.delete_success'), type: 'success',
showClose: true message: this.$t('chart.delete_success'),
showClose: true
})
this.treeNode()
this.$emit('switchComponent', { name: '' })
}) })
this.treeNode()
this.$emit('switchComponent', { name: '' })
}) })
}).catch(() => { .catch(() => {})
})
}, },
deleteChart(data) { deleteChart(data) {
...@@ -829,19 +879,20 @@ export default { ...@@ -829,19 +879,20 @@ export default {
confirmButtonText: this.$t('chart.confirm'), confirmButtonText: this.$t('chart.confirm'),
cancelButtonText: this.$t('chart.cancel'), cancelButtonText: this.$t('chart.cancel'),
type: 'warning' type: 'warning'
}).then(() => { })
post('/chart/view/delete/' + data.id, null).then(response => { .then(() => {
this.$message({ post('/chart/view/delete/' + data.id, null).then((response) => {
type: 'success', this.$message({
message: this.$t('chart.delete_success'), type: 'success',
showClose: true message: this.$t('chart.delete_success'),
showClose: true
})
this.treeNode()
this.$emit('switchComponent', { name: '' })
this.$store.dispatch('chart/setTable', null)
}) })
this.treeNode()
this.$emit('switchComponent', { name: '' })
this.$store.dispatch('chart/setTable', null)
}) })
}).catch(() => { .catch(() => {})
})
}, },
close() { close() {
...@@ -865,7 +916,7 @@ export default { ...@@ -865,7 +916,7 @@ export default {
}, },
groupTree(group) { groupTree(group) {
post('/chart/group/tree', group).then(response => { post('/chart/group/tree', group).then((response) => {
this.tData = response.data this.tData = response.data
}) })
}, },
...@@ -882,12 +933,12 @@ export default { ...@@ -882,12 +933,12 @@ export default {
}, },
treeNode(cache = false) { treeNode(cache = false) {
const modelInfo = localStorage.getItem('chart-tree') const modelInfo = localStorage.getItem('chart-tree')
const userCache = (modelInfo && cache) const userCache = modelInfo && cache
if (userCache) { if (userCache) {
this.tData = JSON.parse(modelInfo) this.tData = JSON.parse(modelInfo)
this.initCurrentNode() this.initCurrentNode()
} }
queryAuthModel({ modelType: 'chart' }, !userCache).then(res => { queryAuthModel({ modelType: 'chart' }, !userCache).then((res) => {
localStorage.setItem('chart-tree', JSON.stringify(res.data)) localStorage.setItem('chart-tree', JSON.stringify(res.data))
if (!userCache) { if (!userCache) {
this.tData = res.data this.tData = res.data
...@@ -906,7 +957,7 @@ export default { ...@@ -906,7 +957,7 @@ export default {
post('/chart/view/list', { post('/chart/view/list', {
sort: 'create_time desc,name asc', sort: 'create_time desc,name asc',
sceneId: this.currGroup.id sceneId: this.currGroup.id
}).then(response => { }).then((response) => {
this.tables = response.data this.tables = response.data
this.chartData = JSON.parse(JSON.stringify(this.tables)) this.chartData = JSON.parse(JSON.stringify(this.tables))
}) })
...@@ -927,7 +978,7 @@ export default { ...@@ -927,7 +978,7 @@ export default {
beforeClickAddData(type) { beforeClickAddData(type) {
return { return {
'type': type type: type
} }
}, },
sceneClick(data, node) { sceneClick(data, node) {
...@@ -1037,18 +1088,24 @@ export default { ...@@ -1037,18 +1088,24 @@ export default {
this.setChartDefaultOptions(view) this.setChartDefaultOptions(view)
const _this = this const _this = this
post('/chart/view/newOne/' + this.panelInfo.id, view, true).then(response => { console.log(view)
this.closeCreateChart() post('/chart/view/newOne/' + this.panelInfo.id, view, true).then(
this.$store.dispatch('chart/setTableId', null) (response) => {
this.$store.dispatch('chart/setTableId', this.table.id) this.closeCreateChart()
if (this.optFrom === 'panel') { this.$store.dispatch('chart/setTableId', null)
this.$emit('newViewInfo', { 'id': response.data.id, 'type': response.data.type }) this.$store.dispatch('chart/setTableId', this.table.id)
} else { if (this.optFrom === 'panel') {
_this.expandedArray.push(response.data.sceneId) this.$emit('newViewInfo', {
_this.currentKey = response.data.id id: response.data.id,
_this.treeNode() type: response.data.type
})
} else {
_this.expandedArray.push(response.data.sceneId)
_this.currentKey = response.data.id
_this.treeNode()
}
} }
}) )
}, },
setChartDefaultOptions(view) { setChartDefaultOptions(view) {
...@@ -1095,7 +1152,7 @@ export default { ...@@ -1095,7 +1152,7 @@ export default {
if (path === '/chart/chart-edit') { if (path === '/chart/chart-edit') {
this.sceneMode = true this.sceneMode = true
const sceneId = this.$store.state.chart.sceneId 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 this.currGroup = response.data
}) })
} }
...@@ -1121,7 +1178,7 @@ export default { ...@@ -1121,7 +1178,7 @@ export default {
post('/chart/view/listAndGroup', { post('/chart/view/listAndGroup', {
sort: 'name asc,create_time desc', sort: 'name asc,create_time desc',
sceneId: node.data.id sceneId: node.data.id
}).then(response => { }).then((response) => {
this.tables = response.data this.tables = response.data
this.chartData = JSON.parse(JSON.stringify(this.tables)) this.chartData = JSON.parse(JSON.stringify(this.tables))
resolve(this.chartData) resolve(this.chartData)
...@@ -1135,7 +1192,10 @@ export default { ...@@ -1135,7 +1192,10 @@ export default {
moveTo(data) { moveTo(data) {
this.moveGroup = true 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() { closeMoveGroup() {
this.moveGroup = false this.moveGroup = false
...@@ -1150,7 +1210,7 @@ export default { ...@@ -1150,7 +1210,7 @@ export default {
}, },
saveMoveGroup() { saveMoveGroup() {
this.groupForm.pid = this.tGroup.id 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.closeMoveGroup()
this.treeNode() this.treeNode()
}) })
...@@ -1162,7 +1222,10 @@ export default { ...@@ -1162,7 +1222,10 @@ export default {
moveToDs(data) { moveToDs(data) {
this.moveDs = true 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() { closeMoveDs() {
this.moveDs = false this.moveDs = false
...@@ -1178,7 +1241,7 @@ export default { ...@@ -1178,7 +1241,7 @@ export default {
saveMoveDs() { saveMoveDs() {
const newSceneId = this.tDs.id const newSceneId = this.tDs.id
this.dsForm.sceneId = newSceneId 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.closeMoveDs()
this.expandedArray.push(newSceneId) this.expandedArray.push(newSceneId)
this.treeNode() this.treeNode()
...@@ -1194,7 +1257,7 @@ export default { ...@@ -1194,7 +1257,7 @@ export default {
}, },
getChartGroupTree() { getChartGroupTree() {
chartGroupTree({}).then(res => { chartGroupTree({}).then((res) => {
this.chartGroupTreeAvailable = res.data this.chartGroupTreeAvailable = res.data
}) })
}, },
...@@ -1218,7 +1281,10 @@ export default { ...@@ -1218,7 +1281,10 @@ export default {
filterNode(value, data) { filterNode(value, data) {
if (!value) return true if (!value) return true
if (this.searchType === 'folder') { 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) this.searchPids.push(data.id)
return true return true
} }
...@@ -1247,7 +1313,7 @@ export default { ...@@ -1247,7 +1313,7 @@ export default {
<style scoped> <style scoped>
.el-divider--horizontal { .el-divider--horizontal {
margin: 12px 0 margin: 12px 0;
} }
.search-input { .search-input {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论