123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287 |
- <template>
- <div class="relationship" v-loading="loading">
- <template v-for="item in content">
- <p class="title">架构从属关系</p>
- <section v-for="(child,childIndex) in item.childGraphicTypeList" :key="childIndex">
- <p class="ship-title">{{ child.graphTypeName }}
- <i class="iconfont icon-xiangmuguanli"></i>
- </p>
- <el-row :gutter="20">
- <el-col :span="8" v-for="(relation,relIndex) in child.relationTypeProjectList" :key="relIndex"
- class="card">
- <el-card shadow="hover">
- <article class="ship-card-title">
- <el-tooltip
- :content="relation.relationTypeName"
- placement="top">
- <span>{{ relation.relationTypeName }}</span>
- </el-tooltip>
- <el-tooltip
- :content="relation.relationTypeCode"
- placement="top">
- <span>{{ relation.relationTypeCode }}</span>
- </el-tooltip>
- </article>
- <el-row class="ship-card-content">
- <el-col :span="12">
- <article class="ship-card-object">
- <p>主要连接对象</p>
- <el-tooltip
- :content="relation.conneObject"
- placement="top"
- >
- <p>{{ relation.conneObject }}</p>
- </el-tooltip>
- </article>
- </el-col>
- <el-col :span="1">
- <div class="border"></div>
- </el-col>
- <el-col :span="11" class="ship-card-object">
- <article>
- <p>连接数量</p>
- <p>{{ relation.count }}</p>
- </article>
- </el-col>
- </el-row>
- <article class="ship-card-time">
- <span v-if="relation.computationalState === 3">关系计算中...</span>
- <span v-else-if="relation.computationalState === 5">计算失败</span>
- <span v-else-if="relation.computationalState !== 3 && relation.computingTime">最后一次计算时间 {{ relation.computingTime }}</span>
- <span v-else-if="relation.times">最后一次计算时间 {{ relation.times }}</span>
- <span style="float: right">
- <!-- todo 启动计算 :disabled="relation.manual === 1" 解决演示使用 -->
- <el-tooltip
- content="启动计算"
- placement="top">
- <el-badge
- style="margin-bottom: 4px;"
- :is-dot="relation.computationalState === 2 || relation.computationalState === 5">
- <el-button
- :disabled="relation.manual === 1"
- @click="computed(relation)"
- circle
- type=""
- plain
- icon="iconfont icon-yizhixingjianchagongju"
- class="sm-button">
- </el-button>
- </el-badge>
- </el-tooltip>
- <el-tooltip
- content="手动编辑"
- placement="top">
- <el-button
- :disabled="relation.manual === 1"
- :style="{ 'border': ( relation.manual=== 1? '1px solid #DCDFE6' :'') } "
- @click="manual(relation)"
- circle
- class="sm-button"
- type=""
- plain
- icon="iconfont icon-bianji">
- </el-button>
- </el-tooltip>
- </span>
- </article>
- </el-card>
- </el-col>
- </el-row>
- </section>
- </template>
- </div>
- </template>
- <script lang="ts">
- import { Component, Vue } from "vue-property-decorator";
- import { relationCalc, relationshipCount, relationshipOverview, updateCalcTime } from "@/api/datacenter"
- import moment from "moment";
- @Component({
- name: "relationShip"
- })
- export default class extends Vue {
- loading = false
- content = []
- created() {
- this.init()
- }
- init() {
- this.loading = true
- let promise = new Promise(resolve => {
- relationshipOverview({}).then(res => {
- resolve(res)
- })
- })
- let promise1 = new Promise(resolve => {
- relationshipCount({}).then(res => {
- resolve(res)
- })
- })
- Promise.all([promise, promise1]).then(res => {
- this.loading = false;
- let content = []
- content = res[0].content
- this.transform(content, res[1].content);
- this.content = 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 > 0 &&
- changeList.forEach(item => {
- let name = item.graphTypeName;
- let rList = item.relationTypeProjectList;
- rList && rList.forEach(r => {
- r.count = countInfo[name][r.id];
- });
- });
- }
- computed(relation: object) {
- this.$set(relation, 'times', moment(Date.now()).format("YYYY-MM-DD HH:mm:ss"))
- if (relation.enableCalc == 0) { // 0 不可计算
- let param = {
- graphCode: relation.graphicType,
- relType: relation.relationType,
- computingTime: moment(Date.now()).format("YYYY-MM-DD HH:mm:ss")
- }
- updateCalcTime(param).then(res => {
- this.init()
- })
- } else {
- let param = {
- relType: relation.relationType,
- objectTypes: relation.zoneType,
- requestUrl: relation.requestUrl,
- graphCode: relation.graphicType
- }
- relationCalc(param).then(res => {
- })
- this.init()
- }
- }
- manual(relation) {
- console.log(relation.relationTypeName)
- this.$router.push({ path: 'relation', query: relation })
- }
- }
- </script>
- <style scoped lang="scss">
- .relationship {
- height: 100%;
- overflow: auto;
- .title {
- text-indent: 10px;
- color: #646C73;
- margin: 12px 0;
- padding-bottom: 10px;
- border-bottom: 1px solid #E1E7EA;
- }
- section {
- margin: 12px;
- .card {
- margin: 10px 0;
- }
- .ship-title {
- border-left: 7px solid #555555;
- margin-bottom: 10px;
- text-indent: 10px;
- font-weight: 500;
- color: #646C73;
- i {
- margin-left: 10px;
- }
- }
- .ship-card-title {
- span {
- font-size: 18px;
- color: #1F2429;
- font-weight: 600;
- }
- span:last-child {
- float: right;
- color: #8D9399;
- font-size: 14px;
- }
- }
- }
- .ship-card-content {
- margin: 35px 0;
- .ship-card-object {
- p {
- color: #C3C7CB;
- margin-bottom: 7px;
- &:last-child {
- color: #1F2429;
- font-size: 16px;
- font-weight: 600;
- }
- }
- ;
- }
- .border {
- width: 1px;
- height: 45px;
- background: #D8D8D8;
- }
- }
- .ship-card-time {
- overflow: hidden;
- span {
- font-size: 12px;
- color: #C3C7CB;
- line-height: 3;
- }
- .sm-button {
- margin-right: 5px;
- }
- i {
- float: right;
- color: #8D9399;
- font-size: 14px;
- margin: 0 5px;
- cursor: pointer;
- }
- }
- }
- </style>
|