CardList.vue 14 KB

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