|
|
@@ -0,0 +1,605 @@
|
|
|
+<template>
|
|
|
+ <div style="position:relative;width:100%;height:100%">
|
|
|
+ <div v-if="reloadGetDataFlag" class="over-map-loading"></div>
|
|
|
+ <div style="width:100%;height:100%" id="relationGraph"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import pagination from "@/components/Pagination.vue";
|
|
|
+import { uploadedGroupList } from "@/service/createmodel/apiLogin";
|
|
|
+import * as echarts from "echarts";
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ pagination
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ beforePayload: {
|
|
|
+ page: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ generated: "false"
|
|
|
+ },
|
|
|
+ activeName: "first",
|
|
|
+ isAliPay: true,
|
|
|
+ // 要展开的行，数值的元素是row的key值
|
|
|
+ expands: [],
|
|
|
+ myChartGroupInner: null,
|
|
|
+ selectPointNode: {},
|
|
|
+ myChartGroupInnerOptionData: null,
|
|
|
+ groupAnalysisDataUse: {},
|
|
|
+ switchGroupColorList: ['#bee4a8', '#dfe9f6', '#ea3323', '#eec8b0', '#ffff54', '#72d169', '#a5daf5', '#dba1d9', '#b25168'],
|
|
|
+ selectPointNodeList:[],
|
|
|
+ reloadGetDataFlag: true,
|
|
|
+ loading: null
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ let offsetHeight = 42;
|
|
|
+ // let locationhref = window.location.href;
|
|
|
+ // if(locationhref.indexOf('alipay') !== -1){
|
|
|
+ // this.isAliPay = true
|
|
|
+ // offsetHeight = 42
|
|
|
+ // }
|
|
|
+ console.log('进入 echarts 图形化页面')
|
|
|
+ this.tableHeight = this.getTableHeight(183 + offsetHeight);
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleClick(tab) {
|
|
|
+ let payload = {
|
|
|
+ page: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ generated: "false"
|
|
|
+ };
|
|
|
+ if (this.activeName === "first") {
|
|
|
+ payload.generated = "false";
|
|
|
+ } else {
|
|
|
+ payload.generated = "true";
|
|
|
+ }
|
|
|
+ this.$store.commit("set_file_active_name", payload.generated);
|
|
|
+ this.loadFLTable(payload);
|
|
|
+ },
|
|
|
+ filterTag(value, row) {
|
|
|
+ return row.tag === value;
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ let payload = {
|
|
|
+ page: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ generated: "true"
|
|
|
+ };
|
|
|
+ // uploadedGroupList (this.setModelId(payload)).then(res=> {
|
|
|
+ // debugger
|
|
|
+ // })
|
|
|
+ // this.loadFLTable(payload);
|
|
|
+ this.loadRelationData()
|
|
|
+ },
|
|
|
+ loadRelationData(){
|
|
|
+ // let payload = {
|
|
|
+ // fileId: id
|
|
|
+ // };
|
|
|
+ this.loading = this.$loading({
|
|
|
+ lock: true,
|
|
|
+ text: "请耐心等待，正在加载数据...",
|
|
|
+ spinner: "el-icon-loading",
|
|
|
+ background: "rgba(0, 0, 0, 0.7)"
|
|
|
+ });
|
|
|
+ this.$store
|
|
|
+ .dispatch("view_relation_static_model_map", this.setModelId({}))
|
|
|
+ .then(data => {
|
|
|
+ if (data.code == 200) {
|
|
|
+ this.groupAnalysisDataUse = data.result
|
|
|
+ this.creatRelationMap()
|
|
|
+ } else {
|
|
|
+ let msg = data.message ? data.message : "加载失败";
|
|
|
+ this.$message({ type: "warning", message: data.message ? data.message : "加载失败" });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ stateFormatMoney(cellValue) {
|
|
|
+ cellValue += '';
|
|
|
+ if (!cellValue.includes('.')) {
|
|
|
+ cellValue += '.00'
|
|
|
+ } else if (cellValue.split('.')[1].length == 1) {
|
|
|
+ cellValue += '0'
|
|
|
+ };
|
|
|
+ return cellValue.replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {
|
|
|
+ return $1 + ',';
|
|
|
+ }).replace(/\.$/, '');
|
|
|
+ },
|
|
|
+ creatRelationMap(type,indata){
|
|
|
+
|
|
|
+ let pointsList
|
|
|
+ let data = [], links = [], categories = [], option = {}
|
|
|
+ if (!this.groupAnalysisDataUse.partyData) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.groupAnalysisDataUse.partyData.forEach(item => {
|
|
|
+ if (!data.find(element => element.id === item.id)) {
|
|
|
+ if (!this.selectPointNodeList.includes(item.id)) {
|
|
|
+ let pointPosition = null
|
|
|
+ if (this.myChartGroupInnerOptionData) {
|
|
|
+ pointPosition = this.myChartGroupInnerOptionData.series[0].data.find(itemPosition => itemPosition.id == (item.id+item.name))
|
|
|
+ }
|
|
|
+ if (type == 'highLight' && indata.includes(item.id)) {
|
|
|
+ if (pointPosition) {
|
|
|
+ data.push({
|
|
|
+ draggable: true,
|
|
|
+ id: item.id+item.name,
|
|
|
+ name: item.name + '(' + item.relationPersons.length+ ')',
|
|
|
+ realName: item.name,
|
|
|
+ symbolSize: 40,
|
|
|
+ x: pointPosition.x,
|
|
|
+ y: pointPosition.y,
|
|
|
+ value: 100,
|
|
|
+ category: 100,
|
|
|
+ data: item,
|
|
|
+ symbol: item.type == '从' ? 'image://../../../../static/invoice/professor.svg' : item.partyType == '主' ? 'image://../../../../static/invoice/company.svg' : '',
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ data.push({
|
|
|
+ draggable: true,
|
|
|
+ id: item.id+item.name,
|
|
|
+ name: item.name + '(' + item.relationPersons.length+ ')',
|
|
|
+ realName: item.name,
|
|
|
+ symbolSize: 40,
|
|
|
+ // x: -266.82776,
|
|
|
+ // y: 299.6904,
|
|
|
+ value: 100,
|
|
|
+ category: 100,
|
|
|
+ data: item,
|
|
|
+ symbol: item.type == '从' ? 'image://../../../../static/invoice/professor.svg' : item.type == '主' ? 'image://../../../../static/invoice/company.svg' : '',
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ } else {
|
|
|
+ if (pointPosition) {
|
|
|
+ data.push({
|
|
|
+ draggable: true,
|
|
|
+ id: item.id+item.name,
|
|
|
+ name: item.name + '(' + item.relationPersons.length+ ')',
|
|
|
+ realName: item.name,
|
|
|
+ symbolSize: 20,
|
|
|
+ x: pointPosition.x,
|
|
|
+ y: pointPosition.y,
|
|
|
+ value: 100,
|
|
|
+ category: 100,
|
|
|
+ data: item,
|
|
|
+ symbol: item.type == '从' ? 'image://../../../../static/invoice/professor.svg' : item.type == '主' ? 'image://../../../../static/invoice/company.svg' : '',
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ data.push({
|
|
|
+ draggable: true,
|
|
|
+ id: item.id+item.name,
|
|
|
+ name: item.name + '(' + item.relationPersons.length+ ')',
|
|
|
+ realName: item.name,
|
|
|
+ symbolSize: 20,
|
|
|
+ // x: -266.82776,
|
|
|
+ // y: 299.6904,
|
|
|
+ value: 100,
|
|
|
+ category: 100,
|
|
|
+ data: item,
|
|
|
+ symbol: item.type == '从' ? 'image://../../../../static/invoice/professor.svg' : item.type == '主' ? 'image://../../../../static/invoice/company.svg' : '',
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ } else {
|
|
|
+ console.log('item.party1.name-=-=', item.name)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.groupAnalysisDataUse.relationshipGraph.forEach(item => {
|
|
|
+ // console.log(item.party1.id,item.party2.id,this.switchGroupColorList[0])
|
|
|
+ links.push({
|
|
|
+ source: item.party1.id+item.party1.name,
|
|
|
+ target: item.party2.id+item.party2.name,
|
|
|
+ lineStyle: {
|
|
|
+ color: this.switchGroupColorList[0],
|
|
|
+ curveness: 0,
|
|
|
+ width: 2,
|
|
|
+ },
|
|
|
+ lineData: item,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ formatter: function (params) {
|
|
|
+ // console.log('params-=-=-=',params)
|
|
|
+ return '资金 ' + that.stateFormatMoney(params.data.lineData.relationData.jeTotal || 0.00) + '/' + params.data.lineData.relationData.sum + ' 笔'
|
|
|
+ },
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: '10'
|
|
|
+ },
|
|
|
+ symbol: ['arrow', 'arrow'], // 可以是 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
|
|
|
+ symbolSize: [15, 15],
|
|
|
+ })
|
|
|
+ });
|
|
|
+ var chartDom = document.getElementById('relationGraph');
|
|
|
+ if (!chartDom) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getData()
|
|
|
+ }, 100);
|
|
|
+ return
|
|
|
+ }
|
|
|
+ echarts.dispose(chartDom)
|
|
|
+ this.myChartGroupInner = echarts.init(chartDom);
|
|
|
+ let that = this
|
|
|
+ this.myChartGroupInner.off('click');
|
|
|
+ this.myChartGroupInner.off('mouseup');
|
|
|
+ this.myChartGroupInner.off('finished');
|
|
|
+ this.myChartGroupInner.on('click', function (params) {
|
|
|
+ var nodeName = params.name; // 获取节点名称
|
|
|
+ var nodeData = params.data; // 获取节点属性值
|
|
|
+ var option = that.myChartGroupInner.getOption();
|
|
|
+ // 重新渲染图表
|
|
|
+ // myChart.setOption(option);
|
|
|
+ // console.log("click-=-=selectPointNode", that.selectPointNode);
|
|
|
+ // console.log("click-=-=option", option);
|
|
|
+ console.log("click-=-=节点：", params);
|
|
|
+ // console.log("click-=-=节点名称：" + nodeName);
|
|
|
+ // console.log("click-=-=节点属性值：", nodeData);
|
|
|
+ if (params.dataType == "node") {
|
|
|
+ that.selectPointNode = { ...params.data }
|
|
|
+ } else if (params.dataType == "edge") {
|
|
|
+ // 点击线弹出交易明细 发票明细
|
|
|
+ if (params.data.transactionType == 'FINANCIAL_TRANSACTION') {
|
|
|
+ let ids = []
|
|
|
+ ids = nodeData.flowInIds.concat(nodeData.flowOutIds)
|
|
|
+ if (!ids || ids.length < 1) {
|
|
|
+ that.$message({
|
|
|
+ type: "warning",
|
|
|
+ message: `${nodeData.lineData.party1.name ||''}与${nodeData.lineData.party2.name ||''}暂无资金交易明细`
|
|
|
+ });
|
|
|
+ return
|
|
|
+ }
|
|
|
+ that.viewDetailsBill({ billIds: ids.join(',') }, 'billIds')
|
|
|
+ } else if (params.data.transactionType == 'INVOICE_RELATIONSHIP') {
|
|
|
+ let ids = []
|
|
|
+ ids = nodeData.flowInIds.concat(nodeData.flowOutIds)
|
|
|
+ if (!ids || ids.length < 1) {
|
|
|
+ that.$message({
|
|
|
+ type: "warning",
|
|
|
+ message: `${nodeData.lineData.party1.name ||''}与${nodeData.lineData.party2.name ||''}暂无发票交易明细`
|
|
|
+ });
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // 查看明细
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.myChartGroupInner.on('finished', function () {
|
|
|
+ let optionData = that.myChartGroupInner.getOption()
|
|
|
+ optionData.series[0].layout = 'none'
|
|
|
+ let pointsLayout = []
|
|
|
+ pointsLayout = that.myChartGroupInner.getModel().getSeriesByIndex(0).preservedPoints
|
|
|
+ if (pointsLayout) {
|
|
|
+ for (var i = 0; i < optionData.series[0].data.length; i++) {
|
|
|
+ optionData.series[0].data[i].x = pointsLayout[optionData.series[0].data[i].id][0]
|
|
|
+ optionData.series[0].data[i].y = pointsLayout[optionData.series[0].data[i].id][1]
|
|
|
+ that.myChartGroupInnerOptionData = optionData
|
|
|
+ }
|
|
|
+ that.myChartGroupInner.dispose()
|
|
|
+ } else {
|
|
|
+ that.myChartGroupInnerOptionData = that.myChartGroupInner.getModel().getSeriesByIndex(0).parentModel.option
|
|
|
+ }
|
|
|
+ if (that.reloadGetDataFlag) {
|
|
|
+ that.reloadGetDataFlag = false
|
|
|
+ that.creatRelationMap()
|
|
|
+ that.loading.close()
|
|
|
+ }
|
|
|
+
|
|
|
+ });
|
|
|
+ this.myChartGroupInner.on('mouseup', function (event) {
|
|
|
+ console.log('event-=-=', event)
|
|
|
+ console.log('event-=-=that.myChartGroupInnerOptionData', that.myChartGroupInnerOptionData)
|
|
|
+ if (event.dataType == 'node') {
|
|
|
+ that.myChartGroupInnerOptionData.series[0].data.forEach(item => {
|
|
|
+ if (item.id == event.data.id) {
|
|
|
+ item.x = event.event.offsetX
|
|
|
+ item.y = event.event.offsetY
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+ option = {
|
|
|
+ tooltip: {
|
|
|
+ position: 'bottom',
|
|
|
+ show: true,
|
|
|
+ formatter: function (params) {
|
|
|
+ // params 是一个包含当前节点数据的对象
|
|
|
+ if (params.dataType == 'node') {
|
|
|
+ let returnStr = ''
|
|
|
+ if (!params.data.data.relationPersons) {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ params.data.data.relationPersons.forEach((item, index) => {
|
|
|
+ let str = item.账户名称 + ' ' + (item.证件号 || '无证件号') + ' ' + (item.账号 || '无账号') + '<br/>'
|
|
|
+ if (item.sfzkh == 1) {
|
|
|
+ returnStr = str + returnStr
|
|
|
+ } else {
|
|
|
+ returnStr += str
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ returnStr = params.data.realName + ' ' + '<br/>' + returnStr
|
|
|
+ return '<div style="text-align: left;">' + returnStr + '</div>';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // trigger: 'item', // 触发类型，'item' 表示数据项图形触发，适用于散点图、折线图、散点图等
|
|
|
+ // formatter: '{b}: {c}' // 提示框文本格式器，此处 '{b}' 会被对应的数据点名称替换，'{c}' 会被数据值替换
|
|
|
+ },
|
|
|
+ backgroundColor: '#0e274e',
|
|
|
+ legend: [
|
|
|
+
|
|
|
+ ],
|
|
|
+ // edgeSymbol: ['circle', 'circle'],
|
|
|
+ // edgeSymbolSize: [1, 1],
|
|
|
+
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 18,
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ textBorderWidth: 0,
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 18,
|
|
|
+ show: true,
|
|
|
+ position: 'inside',
|
|
|
+ // formatter: function (params) {
|
|
|
+ // console.log('params-=-=-=-',params)
|
|
|
+ // // params 是一个包含当前节点数据的对象
|
|
|
+ // return '自定义显示内容: ' + params.data.bankCards[0].kh;
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ animationDuration: 1500,
|
|
|
+ animationEasingUpdate: 'quinticInOut',
|
|
|
+ // 同步第一个图配置
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ type: 'graph',
|
|
|
+ legendHoverLink: false,
|
|
|
+ layout: this.myChartGroupInnerOptionData ? 'none' : 'force',
|
|
|
+ roam: true,
|
|
|
+ // layout: 'circular',
|
|
|
+ force: {
|
|
|
+ edgeLength: 600,
|
|
|
+ repulsion: 1800,
|
|
|
+ initLayout: 'circular',
|
|
|
+ linkDistance: 100,
|
|
|
+ initLayout: 'random',
|
|
|
+ randomSeed: 0.1,
|
|
|
+ // friction: 0.1,
|
|
|
+ layoutAnimation: false,
|
|
|
+ },
|
|
|
+ draggable: true,
|
|
|
+ // roam: 'scale',
|
|
|
+ scaleLimit: {
|
|
|
+ min: 0.5,
|
|
|
+ max: 10
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ // 高亮时 节点放大倍数
|
|
|
+ focus: 'adjacency',
|
|
|
+ lineStyle: {
|
|
|
+ width: 10
|
|
|
+ },
|
|
|
+ scale: 2,
|
|
|
+ itemStyle: {
|
|
|
+ // 高亮时节点的样式
|
|
|
+ borderColor: '#fff', // 高亮时节点边框的颜色
|
|
|
+ borderWidth: 50, // 高亮时节点边框的大小
|
|
|
+ shadowBlur: 0, // 高亮时节点阴影的模糊大小
|
|
|
+ shadowColor: '#fff', // 高亮时节点阴影的颜色
|
|
|
+ symbolSize: 100,
|
|
|
+ // 可以设置节点的颜色等其他样式
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: data,
|
|
|
+ links: links,
|
|
|
+ categories: categories,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'bottom',
|
|
|
+ formatter: '{b}'
|
|
|
+ },
|
|
|
+ // edgeSymbol: ['arrow', 'circle'], // 可以是 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
|
|
|
+ // edgeSymbolSize: [ 15,5],
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ this.myChartGroupInner.setOption(option);
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ loadFLTable(payload) {
|
|
|
+ const loading = this.$loading({
|
|
|
+ lock: true,
|
|
|
+ text: "请耐心等待，正在加载数据。。",
|
|
|
+ spinner: "el-icon-loading",
|
|
|
+ background: "rgba(0, 0, 0, 0.7)"
|
|
|
+ });
|
|
|
+ this.beforePayload = payload;
|
|
|
+ this.$store
|
|
|
+ .dispatch("view_uploaded_group_list", this.setModelId(payload))
|
|
|
+ .then(data => {
|
|
|
+ loading.close();
|
|
|
+ if (data.code == 200) {
|
|
|
+ this.$store.commit("set_files_list", data);
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ type: "error",
|
|
|
+ message: data.message ? data.message : "加载失败"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ loadTableHeader(row, column, e) {
|
|
|
+ if (row.children && row.children.length > 0) {
|
|
|
+ if (
|
|
|
+ e.currentTarget.firstElementChild.firstElementChild
|
|
|
+ .firstElementChild.tagName == "DIV"
|
|
|
+ ) {
|
|
|
+ e.currentTarget.firstElementChild.firstElementChild.firstElementChild.click();
|
|
|
+ } else {
|
|
|
+ e.currentTarget.firstElementChild.firstElementChild.firstElementChild.nextElementSibling.click();
|
|
|
+ }
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.$store.commit("set_current_fileobj", row);
|
|
|
+ let payload = {
|
|
|
+ page: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ fileId: row.id
|
|
|
+ };
|
|
|
+ this.$store.commit("set_current_temp_pagesize", 20);
|
|
|
+ this.$store.commit("set_up_search_sort_params", payload); // 保存文件基础信心
|
|
|
+ this.loadSearchSortData(payload); // 加载文件内容
|
|
|
+ this.loadTableHeaderDataById(payload); // 加载文件headers
|
|
|
+ },
|
|
|
+ // 搜索排序加载文件
|
|
|
+ loadSearchSortData(payload) {
|
|
|
+ const loading = this.$loading({
|
|
|
+ lock: true,
|
|
|
+ text: "请耐心等待，正在加载数据。。",
|
|
|
+ spinner: "el-icon-loading",
|
|
|
+ background: "rgba(0, 0, 0, 0.7)"
|
|
|
+ });
|
|
|
+
|
|
|
+ let upSearchSortParams = this.$store.getters.getUpSearchSortParams;
|
|
|
+ let currentFile = this.$store.getters.getCurrentFile;
|
|
|
+
|
|
|
+ payload.fileId = currentFile.id;
|
|
|
+ payload.orders = upSearchSortParams.orders;
|
|
|
+ payload.values = upSearchSortParams.values;
|
|
|
+ payload.mode = upSearchSortParams.mode;
|
|
|
+
|
|
|
+ this.beforePayload = payload;
|
|
|
+ this.$store
|
|
|
+ .dispatch("view_data_by_query", this.setModelId(payload))
|
|
|
+ .then(data => {
|
|
|
+ loading.close();
|
|
|
+ if (data.code == 200) {
|
|
|
+ this.$store.commit("set_file_content_by_id", data);
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ type: "error",
|
|
|
+ message: data.message ? data.message : "加载失败"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ loadTableHeaderDataById(payload) {
|
|
|
+ const loading = this.$loading({
|
|
|
+ lock: true,
|
|
|
+ text: "请耐心等待。。",
|
|
|
+ spinner: "el-icon-loading",
|
|
|
+ background: "rgba(0, 0, 0, 0.7)"
|
|
|
+ });
|
|
|
+ let params = { fileId: payload.fileId };
|
|
|
+ this.$store.commit("set_table_header", {});
|
|
|
+ this.$store
|
|
|
+ .dispatch("get_headers_by_id", this.setModelId(params))
|
|
|
+ .then(data => {
|
|
|
+ loading.close();
|
|
|
+ if (data.code == 200) {
|
|
|
+ this.$store.commit("set_table_header", data.result);
|
|
|
+ this.loadDetailHeaders(payload.fileId);
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ type: "error",
|
|
|
+ message: data.message ? data.message : "失败"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ loadDetailHeaders(id) {
|
|
|
+ let payload = {
|
|
|
+ fileId: id
|
|
|
+ };
|
|
|
+ this.$store
|
|
|
+ .dispatch("view_detail_ali_headers", this.setModelId(payload))
|
|
|
+ .then(data => {
|
|
|
+ if (data.code == 200) {
|
|
|
+ let headResult = data.result;
|
|
|
+ let finalHeaders = {};
|
|
|
+ for (let v in headResult.fields) {
|
|
|
+ finalHeaders[v] = {
|
|
|
+ label: headResult.fields[v],
|
|
|
+ alignment: "left",
|
|
|
+ clickable: "none",
|
|
|
+ valueType: "none"
|
|
|
+ };
|
|
|
+ for (let k in headResult.mainProps) {
|
|
|
+ if (v == k) {
|
|
|
+ finalHeaders[v] = {
|
|
|
+ label: headResult.fields[v],
|
|
|
+ alignment:
|
|
|
+ headResult.mainProps[v].alignment,
|
|
|
+ clickable:
|
|
|
+ headResult.mainProps[v].clickable,
|
|
|
+ valueType:
|
|
|
+ headResult.mainProps[v].valueType
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ this.$store.commit(
|
|
|
+ "set_current_ali_headers",
|
|
|
+ finalHeaders
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ let msg = data.message ? data.message : "加载失败";
|
|
|
+ console.log(msg);
|
|
|
+ //this.$message({ type: "error", message: data.message ? data.message : "加载失败" });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.excel-btns {
|
|
|
+ border-top: 2px outset wheat;
|
|
|
+ border-bottom: 2px outset wheat;
|
|
|
+ padding: 5px 10px;
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+
|
|
|
+.left-files {
|
|
|
+ height: 100%;
|
|
|
+ padding-top: 0px;
|
|
|
+ height: calc(100vh - 110px);
|
|
|
+ border-right: none;
|
|
|
+ background: #032d58;
|
|
|
+ min-height: 700px;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style>
|
|
|
+.multidimensional-table .el-table__row--level-1 .cell {
|
|
|
+ padding-left: 25px;
|
|
|
+}
|
|
|
+.multidimensional-table [class*="el-table__row--level"] .el-table__expand-icon {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.over-map-loading{
|
|
|
+ position:absolute;
|
|
|
+ top:0;
|
|
|
+ left:0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 100;
|
|
|
+ background: #104072;
|
|
|
+}
|
|
|
+</style>
|
17602115550
