CardList.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509
  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(relation)"
  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. preservation:'保存',
  182. promptly: '立即计算',
  183. placeholder: '请选择',
  184. download: '下载模板(含数据)',
  185. done: '完成',
  186. underDesign: '高级配置页面正在设计中。。。',
  187. autoComputed: '根据现有数据自动计算',
  188. existComputed: '根据现有数据自动计算',
  189. existTitle: '计算方向使用的源端和末端如下:',
  190. originEquipment: '源端设备类:',
  191. endEquipment: '末端设备类:',
  192. device: '', //提示引导内容
  193. tips: '', //请前往以下功能页面维护
  194. optionTips: '', //请下载最新最新 xxxx 数据进行手动维护
  195. currentNum: '当前关系数量:',
  196. lastTime: '', //最后更新时间为
  197. uploadTxt: '将Excel文件拖到此处,或<em>单击上传Excel文件<em>',
  198. uploadTips: '上传的Excel数据将完全覆盖当前关系表(关系表先前数据不会保留)',
  199. inHand: '数据文件处理中...',
  200. dataFailed: '数据文件验证失败',
  201. allUpdateSuccess: 'xxxx全部更新成功',
  202. portionUpdateSuccess: ' xxxx关系部分更新成功',
  203. downloadFile: ' 下载报告文件',
  204. equipmentSetting:''
  205. },
  206. isComputed: {}, // 当前要计算的对象
  207. ManualMaintenance: {},//手动编辑对象
  208. }
  209. },
  210. computed: {},
  211. methods: {
  212. explain() {
  213. // alert('explain click')
  214. },
  215. RelationType() {
  216. this.$emit('RelationType', this.isComputed.RelationType, this.isComputed.ZoneType)
  217. },
  218. computed(relation) {
  219. this.isComputed = relation // 当前要计算的对象
  220. if(relation.RelationType) {
  221. this.$emit('calcSpecial', relation)
  222. if (relation.IsSource) {
  223. this.values.existComputed = `根据现有数据自动计算 <${relation.RelationTypeName}>`
  224. this.$refs.maintain.dialogTableVisibleMore = true
  225. this.$refs.maintain.showCascader()
  226. } else {
  227. this.values.autoComputed = `根据现有数据自动计算 <${relation.RelationTypeName}>`
  228. this.$refs.maintain.dialogTableVisible = true
  229. }
  230. } else {
  231. this.$message.warning("设计中")
  232. return false
  233. }
  234. },
  235. equipment(relation) { //配置源端末端
  236. this.values.equipmentSetting=`${relation.RelationTypeName} 源末端关系设置`
  237. this.$refs.maintain.dialogEquipment = true
  238. },
  239. manual(relation) {
  240. let {Manual, Prompting, RelationTypeName, ComputingTime} = relation;
  241. let device = Prompting && Prompting.split(','),
  242. tips = `请前往以下功能页面维护 <${RelationTypeName}>`,
  243. optionTips = `请下载当前最新 <${RelationTypeName}> 数据进行手动维护`,
  244. lastTime = `最后更新时间为 ${ComputingTime ? ComputingTime : ''}`
  245. if (Manual === 2) {
  246. this.values = {...this.values, device, tips}
  247. this.$refs.maintain.dialogManualTip = true
  248. }
  249. if (Manual === 3) {
  250. // if (relation.RelManualType) {
  251. if (relation.RelationType) {
  252. this.values = {...this.values, optionTips, lastTime}
  253. // this.$refs.maintain.dialogManualOption = true //导出excel 弹窗
  254. this.$router.push({
  255. path:"relationShip"
  256. })
  257. console.log(relation,'relation')
  258. localStorage.setItem('RelManualType',relation.RelManualType)
  259. localStorage.setItem('RelationTypeName',relation.RelationTypeName)
  260. localStorage.setItem('RelationType',relation.RelationType)
  261. localStorage.setItem('ZoneType',relation.ZoneType)
  262. localStorage.setItem('MainObject',relation.MainObject)
  263. localStorage.setItem('FromObject',relation.FromObject)
  264. } else {
  265. this.$message.warning("设计中")
  266. return false
  267. }
  268. }
  269. this.ManualMaintenance = relation
  270. },
  271. openComputed(result) {
  272. this.$emit('openComputed', result)
  273. },
  274. //空间连接关系详情
  275. toDetail(detail){
  276. return
  277. this.$router.push({
  278. name: 'relationDetail',
  279. query: {
  280. type: detail.GraphTypeCode,
  281. RelationTypeProjectList: detail.RelationTypeProjectList
  282. }
  283. })
  284. }
  285. },
  286. components: {RelationMaintain}
  287. }
  288. </script>
  289. <style lang="less" scoped>
  290. @color-text: #333;
  291. @font-big: 600;
  292. @font-small: 12px;
  293. @font-code: #AAAAAA;
  294. @pos-relative: relative;
  295. @pos-absolute: absolute;
  296. @pos-zero: 0;
  297. @5px: 5px;
  298. .slave-relation-title {
  299. color: @font-code;
  300. font-weight: 600;
  301. border-bottom: 1px dashed @font-code;
  302. padding-bottom: @5px;
  303. }
  304. .container {
  305. @media (max-width: 1500px) {
  306. .relation-title {
  307. max-width: 160px;
  308. }
  309. .group {
  310. white-space: normal !important;
  311. }
  312. .asc {
  313. max-width: 108px;
  314. }
  315. .thread {
  316. margin-left: 5px !important;
  317. }
  318. /deep/ .el-card__body {
  319. padding: 18px !important;
  320. }
  321. .sm-button {
  322. height: 30px;
  323. width: 30px;
  324. text-align: center;
  325. padding: 0;
  326. }
  327. }
  328. .el-row {
  329. margin-bottom: 20px;
  330. &:last-child {
  331. margin-bottom: 0;
  332. }
  333. }
  334. .el-col {
  335. border-radius: 4px;
  336. }
  337. .grid-content {
  338. border-radius: 4px;
  339. min-height: 36px;
  340. .thread {
  341. border-left: 1px solid @font-code;
  342. margin-left: 10px;
  343. min-height: 36px;
  344. margin-top: 6px;
  345. }
  346. }
  347. .row-bg {
  348. padding: 10px 0;
  349. background-color: #f9fafc;
  350. }
  351. .reset-title {
  352. overflow: hidden;
  353. white-space: nowrap;
  354. text-overflow: ellipsis;
  355. }
  356. .reset-test {
  357. float: left;
  358. text-align: center;
  359. height: 40px;
  360. line-height: 40px;
  361. }
  362. .fr {
  363. float: right;
  364. }
  365. .el-card {
  366. margin: 10px 0;
  367. }
  368. .relation-text {
  369. overflow: hidden;
  370. margin-top: 10px;
  371. color: @color-text;
  372. border-left: 8px solid @color-text;
  373. text-indent: 10px;
  374. font-weight: @font-big;
  375. .pic-code {
  376. font-size: @font-small;
  377. color: @font-code;
  378. margin-left: @5px;
  379. font-weight: 400;
  380. }
  381. }
  382. .card {
  383. position: @pos-relative;
  384. .mask {
  385. background: rgba(255, 255, 255, .6);
  386. position: @pos-absolute;
  387. top: @pos-zero;
  388. left: @pos-zero;
  389. right: @pos-zero;
  390. bottom: @pos-zero;
  391. user-select: none;
  392. z-index: 2
  393. }
  394. }
  395. .relation-title {
  396. font-size: 20px;
  397. font-weight: @font-big;
  398. margin-right: 10px;
  399. .icon {
  400. display: block;
  401. float: right;
  402. color: #555;
  403. font-size: 18px;
  404. }
  405. }
  406. .relation-title-icon {
  407. font-size: 20px;
  408. font-weight: @font-big;
  409. overflow: hidden;
  410. .icon {
  411. display: block;
  412. float: right;
  413. color: #555;
  414. font-size: 18px;
  415. }
  416. }
  417. .asc {
  418. font-size: @font-small;
  419. color: @font-code;
  420. }
  421. .object {
  422. font-size: @font-small;
  423. color: @font-code;
  424. font-weight: @font-big;
  425. }
  426. .group {
  427. color: @color-text;
  428. font-weight: @font-big;
  429. }
  430. .line-number {
  431. font-size: @font-small;
  432. color: @font-code;
  433. font-weight: @font-big;
  434. }
  435. .line-number-show {
  436. color: @color-text;
  437. font-weight: @font-big;
  438. }
  439. .line-number-hide {
  440. color: @font-code;
  441. font-weight: @font-big;
  442. }
  443. article {
  444. overflow: hidden;
  445. }
  446. .last-computed {
  447. overflow: hidden;
  448. color: @font-code;
  449. .float-right {
  450. float: right;
  451. margin-left: @5px;
  452. }
  453. /deep/ .is-dot {
  454. margin-top: 7px;
  455. margin-right: @5px;
  456. }
  457. }
  458. }
  459. </style>