adm/src/views/relation/overview/index.vue

<template>
  <div style="overflow-x: hidden" v-loading="loading">
    <cardList
      :content="content"
      :source="source"
      :TableVisibleMoreLoading="TableVisibleMoreLoading"
      @calcSpecial="calcSpecial"
      @openComputed="openComputed"
      @RelationType="RelationType"
    />
  </div>
</template>

<script>
import CardList from "@/components/relation/Overview/CardList";
import {
  blockQuery,
  blockSource,
  businessSpaceAll,
  calcSpecial,
  graphic,
  graphicNumber,
  sysDirection
} from "../../../api/relation/api";
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      content: [
        // {
        //     GraphTypeId: '3535436',//大分类id
        //     graphTypeName: '架构从属关系',//大分类名称
        //     GraphTypeCode: '',//大分类编码
        //     Note: '',//说明
        //     ParentId: '',//父id
        //     childGraphicTypeList: [
        //         {
        //             GraphTypeId: '234534543',//图类型id
        //             graphTypeName: '建筑从属关系',//图类型名称
        //             GraphTypeCode: 'ksaajdk',//图类型编码
        //             Note: '显示数字字典excel中的xxx',//说明
        //             ParentId: '3535436',//父id，GraphTypeId
        //             relationTypeProjectList: [
        //                 {
        //                     Id: '23445433534',
        //                     RelationTypeName: '项目下的建筑体',//关系类型名称
        //                     RelationTypeCode: 'Pj2Bd',//关系类型编码
        //                     GraphicId: 'ksaajdk',//图类型编码
        //                     Note: '边类型说明（待补充）',//说明
        //                     ConneObject: '项目→建筑体',//连接对象
        //                     source: true,//是否需要配置源末端
        //                     automatic: true,//是否自动计算类型
        //                     Manual: 2,//123选一个手动计算类型1禁用2提示引导3手动维护
        //                     Prompting: '【设备台账】,【系统台账】',//提示信息
        //                     ProjectId: 'Pj1245',//项目id
        //                     ComputingTime: '2019.12.12 12:00',//null不显示，最后一次自动计算时间
        //                     ComputationalState: 1,//计算状态
        //                 },
        //             ]
        //         },
        //     ]
        // },
      ],
      countNumber: [
        //     {
        //     "GraphTypeId": "3243215",
        //     "graphTypeName": "从属关系",
        //     "GraphTypeCode": "ksaajdk",
        //     "relationTypeProjectList": [
        //         {
        //             "Id": "f3bed766a5ba45868d3a744fb8aaa0c8",
        //             "RelationTypeName": "项目下的建筑体",
        //             "RelationTypeCode": "关系类型编码",
        //             "GraphicCode": "图类型code",
        //             "ProjectId": "Pj5432532",
        //             "count": "123"
        //         },
        //     ]
        // }
      ],
      loading: false,
      source: [], //源端数据
      currentRelationTypeName: "", //当前点击卡片的RelationTypeName
      TableVisibleMoreLoading: false
    };
  },
  created() {
    this.init();
  },
  watch: {
    projectId() {
      this.init();
    }
  },
  computed: {
    ...mapGetters("layout", ["projectId"])
  },
  mounted() {
  },
  components: { CardList },
  methods: {
    init() {
      this.loading = true;
      // let data = {
      //     "Cascade": [{
      //         "Cascade": [{
      //             "Filters": `projectId = '${this.projectId}'`,
      //             "Name": "relationTypeProjectList"
      //         }],
      //         "Filters": " not parentId isnull",
      //         "Name": "childGraphicTypeList"
      //     }],
      //     "Filters": " parentId isnull ",
      //     "PageNumber": 1,
      //     "PageSize": 1000
      // }
      let dataNumber = {
        projectId: this.projectId
      };
      graphic(dataNumber, res => {
        graphicNumber(dataNumber, resCount => {
          this.countNumber = resCount.content;
          this.loading = false;
          this.transform(res.content, this.countNumber);
          this.content = res.content;
        });
      });
    },
    transform(list1, list2) {
      let countInfo = {}; // { graphTypeName: { Id: count } }
      list2.forEach(item => {
        countInfo[item.graphTypeName] = countInfo[item.graphTypeName] || {};
        let rList = item.relationTypeProjectList;
        rList.forEach(r => {
          countInfo[item.graphTypeName][r.id] = r.count;
        });
      });
      let changeList = [];
      list1.forEach(item => {
        // 这里保存的是引用
        if (item.childGraphicTypeList) {
          changeList.push(...item.childGraphicTypeList);
        }
      });
      changeList.length &&
      changeList.forEach(item => {
        let name = item.graphTypeName;
        let rList = item.relationTypeProjectList;
        rList.forEach(r => {
          r.count = countInfo[name][r.id];
          // this.$set(r, 'cardDisabled', false)
        });
      });
    },
    RelationType(relation_type, zone_type) {
      let param = {
        relation_type,
        zone_type,
        proId: {
          projectId: this.projectId
        }
      };
      businessSpaceAll(param).then(res => {
        if (res.data.result === "failure") {
          this.$message({
            message: "计算失败",
            type: "error"
          });
        }
        this.init();
      });
      this.init();
    },
    calcSpecial(relation) {
      this.currentRelationTypeName = relation.RelationTypeName;
      if (relation.source) {
        //配置云末端
        // this.TableVisibleMoreLoading = true//会很慢，加loading
        // let param = {
        //   BuildingId: '',
        //   Domain: 'DomainPiping',
        //   ProjectId: this.projectId,
        //   SystemName: relation.RelationTypeName
        // }
        // calcSpecial(param, res => {
        //   let data = {
        //     projectId: this.projectId,
        //   }
        //   blockQuery(data, res => {
        //     //    获取源端数据
        //     this.TableVisibleMoreLoading = false
        //     this.source = res.content
        //   })
        // })
      }
    },

    openComputed(result) {
      let param = {
        // BuildingId: '',
        domain: "DomainPiping",
        mepSystemType: "冷冻水供水管",
        projectId: this.projectId,
        sourceList: result
      };
      blockSource(param, res => {
        //覆盖源端数据
        //确定流向
        result.forEach(i => {
          let { blockId, buildingId, domain, source } = i;
          this.DataSorting(blockId, buildingId, domain, source);
        });
      });
    },
    DataSorting(BlockId, BuildingId, Domain, source) {
      let param = {
        blockId: BlockId,
        domain: Domain,
        source,
        buildingId: BuildingId,
        systemName: this.currentRelationTypeName
      };
      sysDirection(param, res => {
        this.init();
      });
    }
  }
};
</script>
<style lang="less" scoped>
</style>