CardList.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531
  1. <template>
  2. <div>
  3. <div
  4. :key="index"
  5. v-for="(item,index) in content"
  6. >
  7. <p class="slave-relation-title">{{ item.graphTypeName }}
  8. <span>(主要连接对象按照标准字典显示)</span>
  9. </p>
  10. <section
  11. :key="child.graphTypeId"
  12. class="container"
  13. v-for="(child,childIndex) in item.childGraphicTypeList"
  14. >
  15. <p class="relation-text">
  16. <span class="iconfont icon-juxing"></span>
  17. <span @click="toDetail(child)" style="cursor:pointer;">
  18. {{ child.graphTypeName }}
  19. <i class="icon-zuzhiguanxi iconfont"/></span>
  20. <span class="pic-code">图类型编码:{{ child.graphTypeCode }}</span>
  21. <el-tooltip
  22. v-if="child.Note"
  23. :content="child.Note"
  24. placement="top">
  25. <i
  26. @click="explain"
  27. class="icon-shuoming iconfont"
  28. />
  29. </el-tooltip>
  30. </p>
  31. <el-row :gutter="24">
  32. <el-col
  33. :key="relation.Id"
  34. :span="8"
  35. v-for="(relation,relIndex) in child.relationTypeProjectList"
  36. >
  37. <el-card
  38. class="card "
  39. shadow="hover"
  40. style="position: relative;"
  41. >
  42. <!-- border:none-->
  43. <!-- <div v-show="relation.cardDisabled || relation.ComputationalState === 3 " class="mask"></div>-->
  44. <div v-show="relation.computationalState === 3 " class="mask"></div>
  45. <div style="overflow: hidden;">
  46. <el-tooltip
  47. :content="relation.relationTypeName"
  48. placement="top"
  49. >
  50. <p class="relation-title reset-test reset-title">{{ relation.relationTypeName }}</p>
  51. </el-tooltip>
  52. <el-tooltip
  53. :content="relation.relationTypeCode"
  54. placement="top"
  55. >
  56. <p class="asc reset-title reset-test">边类型编码:{{ relation.relationTypeCode }}</p>
  57. </el-tooltip>
  58. <p class="relation-title-icon reset-test fr">
  59. <el-tooltip
  60. v-if="relation.note"
  61. :content="relation.note"
  62. placement="top"
  63. style="z-index: 3;position:relative;"
  64. >
  65. <i class="iconfont icon-warn icon"/>
  66. </el-tooltip>
  67. </p>
  68. </div>
  69. <article>
  70. <el-row>
  71. <el-col :span="13">
  72. <div class="grid-content">
  73. <p class="object">主要连接对象</p>
  74. <el-tooltip
  75. :content="relation.conneObject"
  76. placement="top"
  77. >
  78. <p class="group reset-title">{{ relation.conneObject }}</p>
  79. </el-tooltip>
  80. </div>
  81. </el-col>
  82. <el-col :span="2">
  83. <div class="grid-content">
  84. <p class="thread"></p>
  85. </div>
  86. </el-col>
  87. <el-col :span="9">
  88. <div class="grid-content ">
  89. <p class="line-number">连接数量</p>
  90. <p :class="relation.count > 0? 'line-number-show' :'line-number-hide'">{{ relation.count }}</p>
  91. </div>
  92. </el-col>
  93. </el-row>
  94. <p class="last-computed">
  95. <!-- <span v-show="relation.ComputationalState === 3 || relation.ComputationalState === 4">关系计算中...</span>-->
  96. <!-- <span v-show="relation.cardDisabled || relation.ComputationalState === 3">关系计算中...</span>-->
  97. <span v-show="relation.computationalState === 3">关系计算中...</span>
  98. <span v-show="relation.computationalState === 5">计算失败</span>
  99. <span
  100. v-show="relation.computationalState !== 3 && relation.computingTime">最后一次计算时间 {{ relation.computingTime }}</span>
  101. <el-tooltip
  102. :content="relation.computationalState === 2 ? '关系变更,请重新计算':'启动计算'"
  103. placement="top"
  104. >
  105. <el-badge
  106. class="item float-right"
  107. :is-dot="relation.computationalState === 2 || relation.computationalState === 5"
  108. >
  109. <el-button
  110. @click="computed(relation)"
  111. :disabled="!relation.source && !relation.automatic "
  112. circle
  113. type="primary"
  114. plain
  115. icon="iconfont icon-changyongtubiao-mianxing-"
  116. class="sm-button"
  117. >
  118. <!--style="background: #000;color: #fff"-->
  119. </el-button>
  120. </el-badge>
  121. </el-tooltip>
  122. <el-tooltip
  123. content="手动编辑"
  124. placement="top"
  125. >
  126. <el-button
  127. :disabled="relation.manual === 1"
  128. :style="{'border':(relation.manual=== 1? '1px solid #DCDFE6' :'')}"
  129. @click="manual(relation)"
  130. circle
  131. class="float-right sm-button"
  132. type="primary"
  133. plain
  134. icon="iconfont icon-bianji"
  135. >
  136. </el-button>
  137. </el-tooltip>
  138. <el-tooltip
  139. content="设定设备对象源/末端"
  140. placement="top"
  141. v-if="relation.source"
  142. >
  143. <el-button
  144. @click="equipment(relation)"
  145. type="primary"
  146. plain
  147. circle
  148. class="float-right sm-button"
  149. icon="iconfont icon-23 "
  150. style="transform: rotate(90deg);"
  151. >
  152. </el-button>
  153. </el-tooltip>
  154. </p>
  155. </article>
  156. </el-card>
  157. </el-col>
  158. </el-row>
  159. </section>
  160. </div>
  161. <RelationMaintain
  162. :values="values"
  163. :source="source"
  164. ref="maintain"
  165. :isComputed="isComputed"
  166. :ManualMaintenance="ManualMaintenance"
  167. :TableVisibleMoreLoading="TableVisibleMoreLoading"
  168. @openComputed="openComputed"
  169. @RelationType="RelationType"
  170. @calcSpecialUpdate="calcSpecialUpdate"
  171. />
  172. </div>
  173. </template>
  174. <script>
  175. import RelationMaintain from './Modal/RelationMaintain'
  176. export default {
  177. name: "cardList",
  178. props: {
  179. content: Array,
  180. source: Array,
  181. TableVisibleMoreLoading: Boolean,
  182. // cardDisabled: Boolean
  183. },
  184. data() {
  185. return {
  186. values: {
  187. title: '关系维护',
  188. cancel: '取消',
  189. confirm: '确定',
  190. back: '返回',
  191. preservation: '保存',
  192. promptly: '立即计算',
  193. placeholder: '请选择',
  194. download: '下载模板(含数据)',
  195. done: '完成',
  196. underDesign: '高级配置页面正在设计中。。。',
  197. autoComputed: '根据现有数据自动计算',
  198. existComputed: '根据现有数据自动计算',
  199. existTitle: '计算方向使用的源端和末端如下:',
  200. originEquipment: '源端设备类:',
  201. endEquipment: '末端设备类:',
  202. device: '', //提示引导内容
  203. tips: '', //请前往以下功能页面维护
  204. optionTips: '', //请下载最新最新 xxxx 数据进行手动维护
  205. currentNum: '当前关系数量:',
  206. lastTime: '', //最后更新时间为
  207. uploadTxt: '将Excel文件拖到此处,或<em>单击上传Excel文件<em>',
  208. uploadTips: '上传的Excel数据将完全覆盖当前关系表(关系表先前数据不会保留)',
  209. inHand: '数据文件处理中...',
  210. dataFailed: '数据文件验证失败',
  211. allUpdateSuccess: 'xxxx全部更新成功',
  212. portionUpdateSuccess: ' xxxx关系部分更新成功',
  213. downloadFile: ' 下载报告文件',
  214. equipmentSetting: ''
  215. },
  216. isComputed: {}, // 当前要计算的对象
  217. ManualMaintenance: {},//手动编辑对象
  218. }
  219. },
  220. created() {
  221. },
  222. computed: {},
  223. methods: {
  224. explain() {
  225. // alert('explain click')
  226. },
  227. RelationType() {
  228. // this.cardDisabled = true
  229. this.$emit('RelationType', this.isComputed.relationType, this.isComputed.zoneType, this.isComputed)
  230. },
  231. calcSpecialUpdate(params) {
  232. this.$emit("calcSpecialUpdate", params, this.isComputed);
  233. },
  234. computed(relation) {
  235. this.isComputed = relation // 当前要计算的对象
  236. if (relation.relationType) {
  237. this.$emit('calcSpecial', relation)
  238. if (relation.source) {
  239. this.values.existComputed = `根据现有数据自动计算 <${ relation.relationTypeName }>`
  240. this.$refs.maintain.dialogTableVisibleMore = true
  241. this.$refs.maintain.showCascader(relation)
  242. this.$refs.maintain.handleSourceQuery()
  243. } else {
  244. this.values.autoComputed = `根据现有数据自动计算 <${ relation.relationTypeName }>`
  245. this.$refs.maintain.dialogTableVisible = true
  246. }
  247. } else {
  248. this.$message.warning("设计中")
  249. return false
  250. }
  251. },
  252. equipment(relation) { //配置源端末端
  253. this.values.equipmentSetting = `${ relation.relationTypeName } 源末端关系设置`
  254. this.$refs.maintain.dialogEquipmentOpen(relation)
  255. this.$refs.maintain.handleSourceQuery()
  256. },
  257. manual(relation) {
  258. let { manual, prompting, relationTypeName, computingTime } = relation;
  259. let device = prompting && prompting.split(','),
  260. tips = `请前往以下功能页面维护 <${ relationTypeName }>`,
  261. optionTips = `请下载当前最新 <${ relationTypeName }> 数据进行手动维护`,
  262. lastTime = `最后更新时间为 ${ computingTime ? computingTime : '' }`
  263. if (manual === 2) {
  264. this.values = { ...this.values, device, tips }
  265. this.$refs.maintain.dialogManualTip = true
  266. }
  267. if (manual === 3) {
  268. // if (relation.RelManualType) {
  269. if (relation.relationType) {
  270. this.values = { ...this.values, optionTips, lastTime }
  271. // this.$refs.maintain.dialogManualOption = true //导出excel 弹窗
  272. this.$router.push({
  273. path: "relationShip"
  274. })
  275. console.log(relation, 'relation')
  276. localStorage.setItem('RelManualType', relation.relManualType)
  277. localStorage.setItem('RelationTypeName', relation.relationTypeName)
  278. localStorage.setItem('RelationType', relation.relationType)
  279. localStorage.setItem('ZoneType', relation.zoneType ? relation.zoneType : '')
  280. localStorage.setItem('MainObject', relation.mainObject)
  281. localStorage.setItem('FromObject', relation.fromObject)
  282. localStorage.setItem('count', relation.count)
  283. localStorage.setItem('ComputingTime', relation.computingTime ? relation.computingTime : '')
  284. } else {
  285. this.$message.warning("设计中")
  286. return false
  287. }
  288. }
  289. this.ManualMaintenance = relation
  290. },
  291. openComputed(result) {
  292. this.$emit('openComputed', result)
  293. },
  294. //空间连接关系详情
  295. toDetail(detail) {
  296. return
  297. this.$router.push({
  298. name: 'relationDetail',
  299. query: {
  300. type: detail.graphTypeCode,
  301. RelationTypeProjectList: detail.relationTypeProjectList
  302. }
  303. })
  304. }
  305. },
  306. components: { RelationMaintain }
  307. }
  308. </script>
  309. <style lang="less" scoped>
  310. @color-text: #333;
  311. @font-big: 600;
  312. @font-small: 12px;
  313. @font-code: #AAAAAA;
  314. @pos-relative: relative;
  315. @pos-absolute: absolute;
  316. @pos-zero: 0;
  317. @5px: 5px;
  318. .slave-relation-title {
  319. color: @font-code;
  320. font-weight: 600;
  321. border-bottom: 1px dashed @font-code;
  322. padding-bottom: @5px;
  323. }
  324. .container {
  325. @media (max-width: 1500px) {
  326. .relation-title {
  327. max-width: 160px;
  328. }
  329. .group {
  330. white-space: normal !important;
  331. }
  332. .asc {
  333. max-width: 108px;
  334. }
  335. .thread {
  336. margin-left: 5px !important;
  337. }
  338. /deep/ .el-card__body {
  339. padding: 18px !important;
  340. }
  341. .sm-button {
  342. height: 30px;
  343. width: 30px;
  344. text-align: center;
  345. padding: 0;
  346. }
  347. }
  348. .el-row {
  349. margin-bottom: 20px;
  350. &:last-child {
  351. margin-bottom: 0;
  352. }
  353. }
  354. .el-col {
  355. border-radius: 4px;
  356. }
  357. .grid-content {
  358. border-radius: 4px;
  359. min-height: 36px;
  360. .thread {
  361. border-left: 1px solid @font-code;
  362. margin-left: 10px;
  363. min-height: 36px;
  364. margin-top: 6px;
  365. }
  366. }
  367. .row-bg {
  368. padding: 10px 0;
  369. background-color: #f9fafc;
  370. }
  371. .reset-title {
  372. overflow: hidden;
  373. white-space: nowrap;
  374. text-overflow: ellipsis;
  375. }
  376. .reset-test {
  377. float: left;
  378. text-align: center;
  379. height: 40px;
  380. line-height: 40px;
  381. }
  382. .fr {
  383. float: right;
  384. }
  385. .el-card {
  386. margin: 10px 0;
  387. }
  388. .relation-text {
  389. overflow: hidden;
  390. margin-top: 10px;
  391. /*text-indent: 10px;*/
  392. margin-left: -3px;
  393. font-weight: @font-big;
  394. .pic-code {
  395. font-size: @font-small;
  396. color: @font-code;
  397. margin-left: @5px;
  398. font-weight: 400;
  399. }
  400. }
  401. .card {
  402. position: @pos-relative;
  403. }
  404. .mask {
  405. background: rgba(255, 255, 255, .6);
  406. position: @pos-absolute;
  407. top: @pos-zero;
  408. left: @pos-zero;
  409. right: @pos-zero;
  410. bottom: @pos-zero;
  411. user-select: none;
  412. z-index: 2
  413. }
  414. .relation-title {
  415. font-size: 20px;
  416. font-weight: @font-big;
  417. margin-right: 10px;
  418. .icon {
  419. display: block;
  420. float: right;
  421. color: #555;
  422. font-size: 18px;
  423. }
  424. }
  425. .relation-title-icon {
  426. font-size: 20px;
  427. font-weight: @font-big;
  428. overflow: hidden;
  429. .icon {
  430. display: block;
  431. float: right;
  432. color: #555;
  433. font-size: 18px;
  434. }
  435. }
  436. .asc {
  437. font-size: @font-small;
  438. color: @font-code;
  439. }
  440. .object {
  441. font-size: @font-small;
  442. color: @font-code;
  443. font-weight: @font-big;
  444. }
  445. .group {
  446. color: @color-text;
  447. font-weight: @font-big;
  448. }
  449. .line-number {
  450. font-size: @font-small;
  451. color: @font-code;
  452. font-weight: @font-big;
  453. }
  454. .line-number-show {
  455. color: @color-text;
  456. font-weight: @font-big;
  457. }
  458. .line-number-hide {
  459. color: @font-code;
  460. font-weight: @font-big;
  461. }
  462. article {
  463. overflow: hidden;
  464. }
  465. .last-computed {
  466. overflow: hidden;
  467. color: @font-code;
  468. .float-right {
  469. float: right;
  470. margin-left: @5px;
  471. }
  472. /deep/ .is-dot {
  473. margin-top: 7px;
  474. margin-right: @5px;
  475. }
  476. }
  477. }
  478. </style>