legend.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358
  1. /**
  2. *@author:Guoxiaohuan zhulizhen
  3. *@date:2020.05.27
  4. *@info:图例
  5. */
  6. <template>
  7. <div>
  8. <div class='legend-container'>
  9. <div class='legend' @click='showTl'>图例</div>
  10. <el-collapse-transition>
  11. <div class='legend-tab' v-if='show'>
  12. <div class='legend-table'>
  13. <lengend-view
  14. v-if='viewTable.length>=0'
  15. :loading='loading'
  16. :viewTable='viewTable'
  17. @changeSwitch='handleSwich'
  18. :remarksText='remarksText'
  19. ref='viewLengend'
  20. ></lengend-view>
  21. </div>
  22. </div>
  23. </el-collapse-transition>
  24. <el-collapse-transition @isShow2='isShow2'>
  25. <div v-if='show2'>
  26. <lengend-edit
  27. @handleSwich2='handleSwich2'
  28. v-if='editTable.length>=0'
  29. :loading='loading1'
  30. ref='editLen'
  31. :editTable='editTable'
  32. @saveNum='saveNum'
  33. @cance='cance'
  34. :remarksText='remarksText'
  35. ></lengend-edit>
  36. </div>
  37. </el-collapse-transition>
  38. </div>
  39. <div class='edit_map' v-if='systemName != "土建系统"'>
  40. <div class='hover-div'>
  41. <!-- 备注编辑器 -->
  42. <span @click='legendClik'>
  43. <img src='@/assets/imgs/bjbg.png' alt />
  44. </span>
  45. <!-- 编辑图例 -->
  46. <el-tooltip class='item' effect='dark' content='编辑图例' placement='left'>
  47. <span @click='editTl'>
  48. <img src='@/assets/imgs/bjtl.png' alt />
  49. </span>
  50. </el-tooltip>
  51. </div>
  52. <!-- 编辑平面图 -->
  53. <el-tooltip @click='goToEditer' v-if='editPmt' class='item' effect='dark' content='编辑平面图' placement='left'>
  54. <span class='edit-icon'>
  55. <a-icon type='edit' style='color:#fff' />
  56. </span>
  57. </el-tooltip>
  58. <span v-else @click='goToEditer' class='edit-icon2'>
  59. <a-icon type='edit' style='color:#fff' />
  60. </span>
  61. <legend-remarks @queryMarks='queryMarks' ref='EditdMarks'></legend-remarks>
  62. </div>
  63. </div>
  64. </template>
  65. <script>
  66. import lengendView from '@/components/viewLengend'
  67. import legendRemarks from '@/components/legendremarks'
  68. import lengendEdit from '@/components/editLengend'
  69. import { mapGetters } from 'vuex'
  70. import { queryStatis, updateStatis, queryRead } from '@/api/public.js'
  71. export default {
  72. name: 'Legend',
  73. data() {
  74. return {
  75. remarksText: '', //查询出来的备注
  76. text1:
  77. '<p>1.主要设备房包括:冷源机房,热源机房,开闭站,配变电所(室),发电机房,消防水泵房,消防高位水箱间,生活水泵房,慧云机房,垃圾房。</p>',
  78. text2: '<p>2.图例后×的数字,代表此位置的数量。</p>',
  79. show: false,
  80. show2: false,
  81. loading: true,
  82. loading1: true,
  83. viewTable: [],
  84. editTable: [],
  85. tbData1: [],
  86. tbData2: [],
  87. tbData3: [],
  88. multipleSelection: [],
  89. editText: '',
  90. editSwitch: false,
  91. editPmt: false
  92. }
  93. },
  94. computed: {
  95. ...mapGetters(['plazaId'])
  96. },
  97. props: ['systemName'],
  98. components: { lengendView, legendRemarks, lengendEdit },
  99. methods: {
  100. testClick(data) {},
  101. // 编辑备注
  102. legendClik() {
  103. this.$refs.EditdMarks.showModal(this.remarksText)
  104. },
  105. // 查询备注
  106. queryMarks() {
  107. let params = {
  108. postParams: {
  109. categoryId: 'NTXT',
  110. projectId: '1'
  111. }
  112. }
  113. queryRead(params).then(res => {
  114. console.log('备注', res.data.Data[0].Note)
  115. if (res.data.Data[0].Note) {
  116. let note = res.data.Data[0].Note
  117. if (note.search(this.text1) != -1 && note.search(this.text2) != -1) {
  118. this.remarksText = `${note}`
  119. } else if (note.search(this.text1) != -1) {
  120. this.remarksText = `${this.text2}${note}`
  121. } else if (note.search(this.text2) != -1) {
  122. this.remarksText = `${this.text1}${note}`
  123. } else {
  124. this.remarksText = `${this.text1}${this.text2}${note}`
  125. }
  126. // if (note.search(this.text2) != -1) {
  127. // this.remarksText = `${note}`
  128. // } else {
  129. // this.remarksText = `${this.text2}${note}`
  130. // }
  131. } else {
  132. this.remarksText = `${this.text1}${this.text2}`
  133. }
  134. console.log(this.remarksText)
  135. })
  136. },
  137. dump() {},
  138. editChange(val) {
  139. this.editText = val
  140. },
  141. // 点击展示图例框
  142. showTl() {
  143. this.show = !this.show
  144. if (this.show) {
  145. this.show2 = false
  146. }
  147. this.queryView(false)
  148. },
  149. cance() {
  150. this.show2 = false
  151. },
  152. editTl() {
  153. this.show = false
  154. this.show2 = true
  155. this.queryEditNum(true)
  156. },
  157. /**
  158. * @name goToEditer
  159. * @description t跳转editer编辑器
  160. */
  161. goToEditer() {
  162. let FloorID = this.$cookie.get('floorMapId') || 'f1'
  163. let categoryId = this.$cookie.get('categoryId') || 'LCGN'
  164. const { conf } = window.__systemConf,
  165. { editerUrl } = conf
  166. let data = `categoryId=${categoryId}&projectId=${this.plazaId}&BuildingID=1&FloorID=${FloorID}'`
  167. let url = editerUrl + 'editer?' + encodeURIComponent(data)
  168. window.open(url, true)
  169. },
  170. isShow2() {
  171. console.log(this.isShow2)
  172. this.show2 = !this.show2
  173. },
  174. handleSwich(val) {
  175. this.queryView(!val)
  176. },
  177. handleSwich2(val) {
  178. this.editSwitch = val
  179. this.queryEditNum(!this.editSwitch)
  180. },
  181. // 查询图例
  182. queryView(flag) {
  183. let postParams = {}
  184. let data = {
  185. graphId: '1',
  186. projectId: '1',
  187. flag: flag
  188. }
  189. queryStatis({ data, postParams }).then(res => {
  190. this.loading = false
  191. console.log('图例', res)
  192. this.viewTable = res.data.Data ? res.data.Data : []
  193. this.$nextTick(() => {
  194. if (this.$refs.viewLengend) {
  195. this.$refs.viewLengend.setSelected()
  196. }
  197. })
  198. })
  199. this.queryMarks()
  200. },
  201. // 查询编辑状态图例
  202. queryEditNum(flag) {
  203. let postParams = {}
  204. let data = {
  205. graphId: '1',
  206. projectId: '1',
  207. flag: flag
  208. }
  209. queryStatis({ data, postParams }).then(res => {
  210. console.log('编辑图例数', res)
  211. this.loading1 = false
  212. this.editTable = res.data.Data ? res.data.Data : []
  213. })
  214. },
  215. // 编辑数量
  216. queryEdit(val) {
  217. let params = {
  218. postParams: {
  219. Content: val
  220. }
  221. }
  222. updateStatis(params).then(res => {
  223. if (res.Result == 'success') {
  224. console.log('更新图例', res)
  225. this.$message({
  226. message: '编辑图例成功',
  227. type: 'success'
  228. })
  229. this.queryEditNum(this.editSwitch)
  230. } else {
  231. this.$message({
  232. message: '编辑图例失败',
  233. type: 'error'
  234. })
  235. }
  236. })
  237. },
  238. saveNum(val) {
  239. if (val) {
  240. this.queryEdit(val)
  241. this.isShow2()
  242. } else {
  243. this.isShow2()
  244. }
  245. }
  246. },
  247. mounted() {
  248. // this.queryMarks()
  249. }
  250. }
  251. </script>
  252. <style lang="less" scoped>
  253. .legend-container {
  254. position: relative;
  255. top: -13px;
  256. .legend {
  257. text-align: center;
  258. line-height: 44px;
  259. width: 44px;
  260. height: 44px;
  261. font-size: 14px;
  262. font-family: MicrosoftYaHei;
  263. color: rgba(2, 91, 170, 1);
  264. background: rgba(255, 255, 255, 1);
  265. box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
  266. border-radius: 2px;
  267. cursor: pointer;
  268. line-height: 44px;
  269. text-align: center;
  270. }
  271. .legend-tab {
  272. position: absolute;
  273. top: 0;
  274. right: 44px;
  275. .legend-table {
  276. padding: 16px;
  277. height: 546px;
  278. width: 420px;
  279. overflow: auto;
  280. overflow: hidden;
  281. overflow-y: auto;
  282. position: relative;
  283. background: rgba(255, 255, 255, 1);
  284. box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
  285. border-radius: 2px;
  286. border: 1px solid rgba(228, 229, 231, 1);
  287. &::-webkit-scrollbar {
  288. display: none;
  289. }
  290. }
  291. }
  292. }
  293. .edit_map {
  294. position: fixed;
  295. bottom: 28px;
  296. z-index: 1;
  297. .edit-icon,
  298. .edit-icon2 {
  299. width: 48px;
  300. height: 48px;
  301. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  302. box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.2);
  303. border-radius: 50%;
  304. text-align: center;
  305. line-height: 48px;
  306. display: inline-block;
  307. }
  308. .edit-icon {
  309. cursor: pointer;
  310. }
  311. .hover-div {
  312. position: absolute;
  313. bottom: 58px;
  314. .icon1 {
  315. width: 40px;
  316. height: 40px;
  317. background: rgba(255, 255, 255, 1);
  318. box-shadow: 0px 2px 4px 0px rgba(31, 36, 41, 0.06);
  319. border: 1px solid rgba(31, 36, 41, 0.2);
  320. font-size: 16px;
  321. display: inline-block;
  322. color: #646c73;
  323. border-radius: 50%;
  324. text-align: center;
  325. line-height: 40px;
  326. cursor: pointer;
  327. }
  328. .icon2 {
  329. width: 40px;
  330. height: 40px;
  331. background: rgba(255, 255, 255, 1);
  332. box-shadow: 0px 2px 4px 0px rgba(31, 36, 41, 0.06);
  333. border: 1px solid rgba(31, 36, 41, 0.2);
  334. font-size: 16px;
  335. display: inline-block;
  336. color: #646c73;
  337. border-radius: 50%;
  338. text-align: center;
  339. line-height: 40px;
  340. margin-top: 15px;
  341. cursor: pointer;
  342. }
  343. }
  344. }
  345. </style>
  346. <style lang="less">
  347. .legend-container {
  348. .el-table thead {
  349. background: rgba(2, 91, 170, 0.1);
  350. }
  351. .el-table td,
  352. .el-table th {
  353. padding: 6px 0;
  354. }
  355. }
  356. </style>