CardList.vue 15 KB

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