legendremarks.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294
  1. /**
  2. *@author:Guoxiaohuan
  3. *@date:2020.05.27
  4. *@info:楼层功能-编辑图例备注
  5. */
  6. <template>
  7. <div class='editModel' v-if='visible'>
  8. <a-modal v-model='visible' :title='title' :closable='false' :maskClosable='false' :width='648' :footer='null'>
  9. <div class='edit-x' @click='handlCancel'>X</div>
  10. <div class='edit_container' style='width:600px;height:156px'>
  11. <quill-editor
  12. v-model='remarksTexts'
  13. :options='editorOption'
  14. @blur='onEditorBlur($event)'
  15. @focus='onEditorFocus($event)'
  16. @change='onEditorChange($event)'
  17. @ready='onEditorReady($event)'
  18. ></quill-editor>
  19. <p class='p1'>{{valLen||remarksText.length}}/200</p>
  20. </div>
  21. <div class='edit-foot'>
  22. <span @click='handlCancel'>取消</span>
  23. <span @click='handleOk'>保存</span>
  24. </div>
  25. </a-modal>
  26. </div>
  27. </template>
  28. <script>
  29. import { updateRead } from '@/api/public.js'
  30. import { mapGetters } from 'vuex'
  31. import { queryRead } from '@/api/public.js'
  32. export default {
  33. name: 'EditdMarks',
  34. data() {
  35. return {
  36. valLen: 0, //输入字数限制
  37. remarksTexts: '', //展示的备注
  38. text1: '主要设备房包括:冷源机房,热源机房,开闭站,配变电所(室),发电机房,消防水泵房,消防高位水箱间,生活水泵房,慧云机房,垃圾房',
  39. text2: '图例后×的数字,代表此位置的数量',
  40. editorOption: {
  41. modules: {
  42. toolbar: [['bold', 'underline'], [{ color: [] }], [{ list: 'ordered' }]]
  43. },
  44. theme: 'snow',
  45. placeholder: '请输入内容...'
  46. },
  47. title: '编辑图例备注',
  48. visible: false
  49. }
  50. },
  51. computed: {
  52. ...mapGetters(['remarksText', 'typeNum', 'planNum'])
  53. },
  54. methods: {
  55. // 点击取消
  56. handlCancel() {
  57. if (this.remarksTexts != this.remarksText) {
  58. this.$confirm('是否保存编辑后的备注?', '提示', {
  59. confirmButtonText: '保存',
  60. cancelButtonText: '取消',
  61. type: 'warning'
  62. })
  63. .then(() => {
  64. this.handleOk()
  65. })
  66. .catch(() => {
  67. this.$message({
  68. type: 'info',
  69. message: '已取消保存'
  70. })
  71. this.visible = false
  72. })
  73. } else {
  74. this.visible = false
  75. }
  76. },
  77. // val为传过来的备注
  78. showModal() {
  79. // this.$emit('queryMarks')
  80. // this.$emit('')
  81. // return
  82. this.query()
  83. this.visible = true
  84. // this.remarksTexts = this.remarksText
  85. },
  86. query() {
  87. if (this.remarksText) {
  88. if (this.planNum && this.typeNum) {
  89. if (this.remarksText.search(`${this.text1}`) != -1) {
  90. // console.log(5555555555555)
  91. // console.log(this.remarksText.search(this.text1) != -1)
  92. } else {
  93. console.log(333333333)
  94. console.log(this.remarksText.search(this.text1) != -1)
  95. }
  96. this.remarksTexts = `<ol style="padding-left: 1.5em;"><li>${this.text1}</li><li>${this.text2}</li></ol>`
  97. } else if (this.planNum) {
  98. this.remarksTexts = `<ol style="padding-left: 1.5em;"><li>${this.text1}</li></ol>`
  99. } else if (this.typeNum) {
  100. this.remarksTexts = `<ol style="padding-left: 1.5em;" ><li>${this.text2}</li></ol>`
  101. } else {
  102. this.remarksTexts = ''
  103. }
  104. if (this.remarksText.search(`${this.text1}`) != -1) {
  105. this.remarksTexts = this.remarksText
  106. } else {
  107. if (this.planNum) {
  108. this.remarksTexts = `${this.remarksText}<ol style="padding-left: 1.5em;"><li>${this.text1}</li></ol>`
  109. } else {
  110. this.remarksTexts = this.remarksText
  111. }
  112. }
  113. if (this.remarksText.search(`${this.text2}`) != -1) {
  114. this.remarksTexts = this.remarksText
  115. } else {
  116. if (this.planNum) {
  117. this.remarksTexts = `${this.remarksText}<ol style="padding-left: 1.5em;"><li>${this.text2}</li></ol>`
  118. } else {
  119. this.remarksTexts = this.remarksText
  120. }
  121. }
  122. } else {
  123. if (this.planNum && this.typeNum) {
  124. this.remarksTexts = `<ol style="padding-left: 1.5em;"><li>${this.text1}</li><li>${this.text2}</li></ol>`
  125. } else if (this.planNum) {
  126. this.remarksTexts = `<ol style="padding-left: 1.5em;"><li>${this.text1}</li></ol>`
  127. } else if (this.typeNum) {
  128. this.remarksTexts = `<ol style="padding-left: 1.5em;" ><li>${this.text2}</li></ol>`
  129. } else {
  130. this.remarksTexts = ''
  131. }
  132. }
  133. // let postParams = {
  134. // categoryId: this.$cookie.get('categoryId'),
  135. // projectId: this.$store.state.plazaId,
  136. // BuildingID: '1',
  137. // Pub: true,
  138. // FloorID: this.$cookie.get('floorNow')
  139. // }
  140. // let data = {}
  141. // queryRead({ data, postParams }).then(res => {
  142. // if (res.data.Data && res.data.Data[0].Note) {
  143. // let Res = res.data ? res.data.Data[0].Note : ''
  144. // if (Res) {
  145. // // this.$store.commit('SETREMARKSTEXT', Res)
  146. // // console.log()
  147. // // 返回有备注
  148. // // this.remarksText = Res
  149. // // let defaultCom = ''
  150. // // if (this.planNum && this.typeNum) {
  151. // // defaultCom = `${Res}<ol style="padding-left: 1.5em;"><li>${this.text1}</li><li>${this.text2}</li></ol>`
  152. // // } else if (this.planNum) {
  153. // // defaultCom = `${Res}<ol style="padding-left: 1.5em;"><li>${this.text1}</li></ol>`
  154. // // } else if (this.typeNum) {
  155. // // defaultCom = `${Res}<ol style="padding-left: 1.5em;" ><li>${this.text2}</li></ol>`
  156. // // } else {
  157. // // defaultCom = Res
  158. // // }
  159. // // this.$store.commit('SETDEFAULTCOMMENT', defaultCom)
  160. // } else {
  161. // let marks = ''
  162. // if (this.planNum && this.typeNum) {
  163. // marks = `<ol style="padding-left: 1.5em;"><li>${this.text1}</li><li>${this.text2}</li></ol>`
  164. // } else if (this.planNum) {
  165. // marks = `<ol style="padding-left: 1.5em;"><li>${this.text1}</li></ol>`
  166. // } else if (this.typeNum) {
  167. // marks = `<ol style="padding-left: 1.5em;" ><li>${this.text2}</li></ol>`
  168. // } else {
  169. // marks = ''
  170. // }
  171. // this.$store.commit('SETREMARKSTEXT', marks)
  172. // }
  173. // // this.$store.commit('SETREMARKSTEXT', this.remarksText)
  174. // }
  175. // })
  176. },
  177. // 更新底图备注
  178. markUpdate(val) {
  179. let params = {
  180. postParams: {
  181. graphId: this.$cookie.get('graphId'),
  182. projectId: this.$store.state.plazaId,
  183. Note: val
  184. }
  185. }
  186. updateRead(params).then(res => {
  187. // console.log('更新备注', res)
  188. this.$message({
  189. showClose: true,
  190. message: '更新成功',
  191. type: 'success'
  192. })
  193. this.$emit('queryMarks')
  194. this.visible = false
  195. })
  196. },
  197. // 点击保存
  198. handleOk() {
  199. this.markUpdate(this.remarksTexts)
  200. },
  201. onEditorReady(editor) {},
  202. onEditorBlur(val) {},
  203. onEditorFocus(val) {},
  204. onEditorChange(val) {
  205. val.quill.deleteText(200, 6)
  206. if (this.remarksTexts === '') {
  207. this.valLen = 0
  208. } else {
  209. this.valLen = val.quill.getLength() - 1
  210. }
  211. if (val.html) {
  212. this.remarksTexts = val.html
  213. }
  214. }
  215. },
  216. mounted() {}
  217. }
  218. </script>
  219. <style lang="less" >
  220. .editModel {
  221. .ant-modal-body {
  222. padding: 0 24px 35px !important;
  223. }
  224. .edit_container {
  225. .ql-editor {
  226. padding: 12px 15px 4px;
  227. }
  228. .ql-toolbar.ql-snow .ql-formats {
  229. margin-right: 0px;
  230. }
  231. }
  232. }
  233. </style>
  234. <style lang="less" scoped>
  235. .editModel {
  236. }
  237. .edit-x {
  238. position: absolute;
  239. width: 9px;
  240. height: 10px;
  241. color: #000000;
  242. right: 20px;
  243. top: 20px;
  244. cursor: pointer;
  245. }
  246. .edit_container {
  247. margin: 0px;
  248. .p1 {
  249. position: absolute;
  250. bottom: 65px;
  251. right: 30px;
  252. margin-bottom: 0;
  253. }
  254. }
  255. .edit-foot {
  256. height: 30px;
  257. width: 100%;
  258. margin-top: 20px;
  259. display: flex;
  260. justify-content: flex-end;
  261. padding-top: 10px;
  262. span {
  263. height: 32px;
  264. line-height: 32px;
  265. border-radius: 2px;
  266. width: 65px;
  267. text-align: center;
  268. font-size: 14px;
  269. font-family: PingFangSC-Regular, PingFang SC;
  270. font-weight: 400;
  271. cursor: pointer;
  272. }
  273. span:nth-of-type(1) {
  274. background: rgba(255, 255, 255, 1);
  275. border: 1px solid rgba(0, 0, 0, 0.15);
  276. margin-right: 8px;
  277. color: rgba(0, 0, 0, 0.65);
  278. }
  279. span:nth-of-type(2) {
  280. color: rgba(255, 255, 255, 1);
  281. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  282. }
  283. }
  284. .quill-editor {
  285. height: 130px;
  286. }
  287. // 修改保存按钮背景色
  288. /deep/ .ant-btn-primary {
  289. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  290. }
  291. </style>