CardList.vue 13 KB

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