index.vue 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
  1. <template>
  2. <div class="relationship" v-loading="loading">
  3. <template v-for="item in content">
  4. <p class="title">架构从属关系</p>
  5. <section v-for="(child,childIndex) in item.childGraphicTypeList" :key="childIndex">
  6. <p class="ship-title">{{ child.graphTypeName }}
  7. <i class="iconfont icon-xiangmuguanli"></i>
  8. </p>
  9. <el-row :gutter="20">
  10. <el-col :span="8" v-for="(relation,relIndex) in child.relationTypeProjectList" :key="relIndex"
  11. class="card">
  12. <el-card shadow="hover">
  13. <article class="ship-card-title">
  14. <el-tooltip
  15. :content="relation.relationTypeName"
  16. placement="top">
  17. <span>{{ relation.relationTypeName }}</span>
  18. </el-tooltip>
  19. <el-tooltip
  20. :content="relation.relationTypeCode"
  21. placement="top">
  22. <span>{{ relation.relationTypeCode }}</span>
  23. </el-tooltip>
  24. </article>
  25. <el-row class="ship-card-content">
  26. <el-col :span="12">
  27. <article class="ship-card-object">
  28. <p>主要连接对象</p>
  29. <el-tooltip
  30. :content="relation.conneObject"
  31. placement="top"
  32. >
  33. <p>{{ relation.conneObject }}</p>
  34. </el-tooltip>
  35. </article>
  36. </el-col>
  37. <el-col :span="1">
  38. <div class="border"></div>
  39. </el-col>
  40. <el-col :span="11" class="ship-card-object">
  41. <article>
  42. <p>连接数量</p>
  43. <p>{{ relation.count }}</p>
  44. </article>
  45. </el-col>
  46. </el-row>
  47. <article class="ship-card-time">
  48. <span v-if="relation.computationalState === 3">关系计算中...</span>
  49. <span v-else-if="relation.computationalState === 5">计算失败</span>
  50. <span v-else-if="relation.computationalState !== 3 && relation.computingTime">最后一次计算时间 {{ relation.computingTime }}</span>
  51. <span v-else-if="relation.times">最后一次计算时间 {{ relation.times }}</span>
  52. <span style="float: right">
  53. <!-- todo 启动计算 :disabled="relation.manual === 1" 解决演示使用 -->
  54. <el-tooltip
  55. content="启动计算"
  56. placement="top">
  57. <el-badge
  58. style="margin-bottom: 4px;"
  59. :is-dot="relation.computationalState === 2 || relation.computationalState === 5">
  60. <el-button
  61. :disabled="relation.manual === 1"
  62. @click="computed(relation)"
  63. circle
  64. type=""
  65. plain
  66. icon="iconfont icon-yizhixingjianchagongju"
  67. class="sm-button">
  68. </el-button>
  69. </el-badge>
  70. </el-tooltip>
  71. <el-tooltip
  72. content="手动编辑"
  73. placement="top">
  74. <el-button
  75. :disabled="relation.manual === 1"
  76. :style="{ 'border': ( relation.manual=== 1? '1px solid #DCDFE6' :'') } "
  77. @click="manual(relation)"
  78. circle
  79. class="sm-button"
  80. type=""
  81. plain
  82. icon="iconfont icon-bianji">
  83. </el-button>
  84. </el-tooltip>
  85. </span>
  86. </article>
  87. </el-card>
  88. </el-col>
  89. </el-row>
  90. </section>
  91. </template>
  92. </div>
  93. </template>
  94. <script lang="ts">
  95. import { Component, Vue } from "vue-property-decorator";
  96. import { relationCalc, relationshipCount, relationshipOverview, updateCalcTime } from "@/api/datacenter"
  97. import moment from "moment";
  98. @Component({
  99. name: "relationShip"
  100. })
  101. export default class extends Vue {
  102. loading = false
  103. content = []
  104. created() {
  105. this.init()
  106. }
  107. init() {
  108. this.loading = true
  109. let promise = new Promise(resolve => {
  110. relationshipOverview({}).then(res => {
  111. resolve(res)
  112. })
  113. })
  114. let promise1 = new Promise(resolve => {
  115. relationshipCount({}).then(res => {
  116. resolve(res)
  117. })
  118. })
  119. Promise.all([promise, promise1]).then(res => {
  120. this.loading = false;
  121. let content = []
  122. content = res[0].content
  123. this.transform(content, res[1].content);
  124. this.content = content;
  125. })
  126. }
  127. transform(list1, list2) {
  128. let countInfo = {}; // { graphTypeName: { Id: count } }
  129. list2.forEach(item => {
  130. countInfo[item.graphTypeName] = countInfo[item.graphTypeName] || {};
  131. let rList = item.relationTypeProjectList;
  132. rList.forEach(r => {
  133. countInfo[item.graphTypeName][r.id] = r.count;
  134. });
  135. });
  136. let changeList = [];
  137. list1.forEach(item => {
  138. // 这里保存的是引用
  139. if (item.childGraphicTypeList) {
  140. changeList.push(...item.childGraphicTypeList);
  141. }
  142. });
  143. changeList.length > 0 &&
  144. changeList.forEach(item => {
  145. let name = item.graphTypeName;
  146. let rList = item.relationTypeProjectList;
  147. rList && rList.forEach(r => {
  148. r.count = countInfo[name][r.id];
  149. });
  150. });
  151. }
  152. computed(relation: object) {
  153. this.$set(relation, 'times', moment(Date.now()).format("YYYY-MM-DD HH:mm:ss"))
  154. if (relation.enableCalc == 0) { // 0 不可计算
  155. let param = {
  156. graphCode: relation.graphicType,
  157. relType: relation.relationType,
  158. computingTime: moment(Date.now()).format("YYYY-MM-DD HH:mm:ss")
  159. }
  160. updateCalcTime(param).then(res => {
  161. this.init()
  162. })
  163. } else {
  164. let param = {
  165. relType: relation.relationType,
  166. objectTypes: relation.zoneType,
  167. requestUrl: relation.requestUrl,
  168. graphCode: relation.graphicType
  169. }
  170. relationCalc(param).then(res => {
  171. })
  172. this.init()
  173. }
  174. }
  175. manual(relation) {
  176. console.log(relation.relationTypeName)
  177. this.$router.push({ path: 'relation', query: relation })
  178. }
  179. }
  180. </script>
  181. <style scoped lang="scss">
  182. .relationship {
  183. height: 100%;
  184. overflow: auto;
  185. .title {
  186. text-indent: 10px;
  187. color: #646C73;
  188. margin: 12px 0;
  189. padding-bottom: 10px;
  190. border-bottom: 1px solid #E1E7EA;
  191. }
  192. section {
  193. margin: 12px;
  194. .card {
  195. margin: 10px 0;
  196. }
  197. .ship-title {
  198. border-left: 7px solid #555555;
  199. margin-bottom: 10px;
  200. text-indent: 10px;
  201. font-weight: 500;
  202. color: #646C73;
  203. i {
  204. margin-left: 10px;
  205. }
  206. }
  207. .ship-card-title {
  208. span {
  209. font-size: 18px;
  210. color: #1F2429;
  211. font-weight: 600;
  212. }
  213. span:last-child {
  214. float: right;
  215. color: #8D9399;
  216. font-size: 14px;
  217. }
  218. }
  219. }
  220. .ship-card-content {
  221. margin: 35px 0;
  222. .ship-card-object {
  223. p {
  224. color: #C3C7CB;
  225. margin-bottom: 7px;
  226. &:last-child {
  227. color: #1F2429;
  228. font-size: 16px;
  229. font-weight: 600;
  230. }
  231. }
  232. ;
  233. }
  234. .border {
  235. width: 1px;
  236. height: 45px;
  237. background: #D8D8D8;
  238. }
  239. }
  240. .ship-card-time {
  241. overflow: hidden;
  242. span {
  243. font-size: 12px;
  244. color: #C3C7CB;
  245. line-height: 3;
  246. }
  247. .sm-button {
  248. margin-right: 5px;
  249. }
  250. i {
  251. float: right;
  252. color: #8D9399;
  253. font-size: 14px;
  254. margin: 0 5px;
  255. cursor: pointer;
  256. }
  257. }
  258. }
  259. </style>