legend.vue 11 KB

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