CardList.vue 14 KB

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