123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358 |
- /**
- *@author:Guoxiaohuan zhulizhen
- *@date:2020.05.27
- *@info:图例
- */
- <template>
- <div>
- <div class='legend-container'>
- <div class='legend' @click='showTl'>图例</div>
- <el-collapse-transition>
- <div class='legend-tab' v-if='show'>
- <div class='legend-table'>
- <lengend-view
- v-if='viewTable.length>=0'
- :loading='loading'
- :viewTable='viewTable'
- @changeSwitch='handleSwich'
- :remarksText='remarksText'
- ref='viewLengend'
- ></lengend-view>
- </div>
- </div>
- </el-collapse-transition>
- <el-collapse-transition @isShow2='isShow2'>
- <div v-if='show2'>
- <lengend-edit
- @handleSwich2='handleSwich2'
- v-if='editTable.length>=0'
- :loading='loading1'
- ref='editLen'
- :editTable='editTable'
- @saveNum='saveNum'
- @cance='cance'
- :remarksText='remarksText'
- ></lengend-edit>
- </div>
- </el-collapse-transition>
- </div>
- <div class='edit_map' v-if='systemName != "土建系统"'>
- <div class='hover-div'>
- <!-- 备注编辑器 -->
- <span @click='legendClik'>
- <img src='@/assets/imgs/bjbg.png' alt />
- </span>
- <!-- 编辑图例 -->
- <el-tooltip class='item' effect='dark' content='编辑图例' placement='left'>
- <span @click='editTl'>
- <img src='@/assets/imgs/bjtl.png' alt />
- </span>
- </el-tooltip>
- </div>
- <!-- 编辑平面图 -->
- <el-tooltip @click='goToEditer' v-if='editPmt' class='item' effect='dark' content='编辑平面图' placement='left'>
- <span class='edit-icon'>
- <a-icon type='edit' style='color:#fff' />
- </span>
- </el-tooltip>
- <span v-else @click='goToEditer' class='edit-icon2'>
- <a-icon type='edit' style='color:#fff' />
- </span>
- <legend-remarks @queryMarks='queryMarks' ref='EditdMarks'></legend-remarks>
- </div>
- </div>
- </template>
- <script>
- import lengendView from '@/components/viewLengend'
- import legendRemarks from '@/components/legendremarks'
- import lengendEdit from '@/components/editLengend'
- import { mapGetters } from 'vuex'
- import { queryStatis, updateStatis, queryRead } from '@/api/public.js'
- export default {
- name: 'Legend',
- data() {
- return {
- remarksText: '', //查询出来的备注
- text1:
- '<p>1.主要设备房包括:冷源机房,热源机房,开闭站,配变电所(室),发电机房,消防水泵房,消防高位水箱间,生活水泵房,慧云机房,垃圾房。</p>',
- text2: '<p>2.图例后×的数字,代表此位置的数量。</p>',
- show: false,
- show2: false,
- loading: true,
- loading1: true,
- viewTable: [],
- editTable: [],
- tbData1: [],
- tbData2: [],
- tbData3: [],
- multipleSelection: [],
- editText: '',
- editSwitch: false,
- editPmt: false
- }
- },
- computed: {
- ...mapGetters(['plazaId'])
- },
- props: ['systemName'],
- components: { lengendView, legendRemarks, lengendEdit },
- methods: {
- testClick(data) {},
- // 编辑备注
- legendClik() {
- this.$refs.EditdMarks.showModal(this.remarksText)
- },
- // 查询备注
- queryMarks() {
- let params = {
- postParams: {
- categoryId: 'NTXT',
- projectId: '1'
- }
- }
- queryRead(params).then(res => {
- console.log('备注', res.data.Data[0].Note)
- if (res.data.Data[0].Note) {
- let note = res.data.Data[0].Note
- if (note.search(this.text1) != -1 && note.search(this.text2) != -1) {
- this.remarksText = `${note}`
- } else if (note.search(this.text1) != -1) {
- this.remarksText = `${this.text2}${note}`
- } else if (note.search(this.text2) != -1) {
- this.remarksText = `${this.text1}${note}`
- } else {
- this.remarksText = `${this.text1}${this.text2}${note}`
- }
- // if (note.search(this.text2) != -1) {
- // this.remarksText = `${note}`
- // } else {
- // this.remarksText = `${this.text2}${note}`
- // }
- } else {
- this.remarksText = `${this.text1}${this.text2}`
- }
- console.log(this.remarksText)
- })
- },
- dump() {},
- editChange(val) {
- this.editText = val
- },
- // 点击展示图例框
- showTl() {
- this.show = !this.show
- if (this.show) {
- this.show2 = false
- }
- this.queryView(false)
- },
- cance() {
- this.show2 = false
- },
- editTl() {
- this.show = false
- this.show2 = true
- this.queryEditNum(true)
- },
- /**
- * @name goToEditer
- * @description t跳转editer编辑器
- */
- goToEditer() {
- let FloorID = this.$cookie.get('floorMapId') || 'f1'
- let categoryId = this.$cookie.get('categoryId') || 'LCGN'
- const { conf } = window.__systemConf,
- { editerUrl } = conf
- let data = `categoryId=${categoryId}&projectId=${this.plazaId}&BuildingID=1&FloorID=${FloorID}'`
- let url = editerUrl + 'editer?' + encodeURIComponent(data)
- window.open(url, true)
- },
- isShow2() {
- console.log(this.isShow2)
- this.show2 = !this.show2
- },
- handleSwich(val) {
- this.queryView(!val)
- },
- handleSwich2(val) {
- this.editSwitch = val
- this.queryEditNum(!this.editSwitch)
- },
- // 查询图例
- queryView(flag) {
- let postParams = {}
- let data = {
- graphId: '1',
- projectId: '1',
- flag: flag
- }
- queryStatis({ data, postParams }).then(res => {
- this.loading = false
- console.log('图例', res)
- this.viewTable = res.data.Data ? res.data.Data : []
- this.$nextTick(() => {
- if (this.$refs.viewLengend) {
- this.$refs.viewLengend.setSelected()
- }
- })
- })
- this.queryMarks()
- },
- // 查询编辑状态图例
- queryEditNum(flag) {
- let postParams = {}
- let data = {
- graphId: '1',
- projectId: '1',
- flag: flag
- }
- queryStatis({ data, postParams }).then(res => {
- console.log('编辑图例数', res)
- this.loading1 = false
- this.editTable = res.data.Data ? res.data.Data : []
- })
- },
- // 编辑数量
- queryEdit(val) {
- let params = {
- postParams: {
- Content: val
- }
- }
- updateStatis(params).then(res => {
- if (res.Result == 'success') {
- console.log('更新图例', res)
- this.$message({
- message: '编辑图例成功',
- type: 'success'
- })
- this.queryEditNum(this.editSwitch)
- } else {
- this.$message({
- message: '编辑图例失败',
- type: 'error'
- })
- }
- })
- },
- saveNum(val) {
- if (val) {
- this.queryEdit(val)
- this.isShow2()
- } else {
- this.isShow2()
- }
- }
- },
- mounted() {
- // this.queryMarks()
- }
- }
- </script>
- <style lang="less" scoped>
- .legend-container {
- position: relative;
- top: -13px;
- .legend {
- text-align: center;
- line-height: 44px;
- width: 44px;
- height: 44px;
- font-size: 14px;
- font-family: MicrosoftYaHei;
- color: rgba(2, 91, 170, 1);
- background: rgba(255, 255, 255, 1);
- box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
- border-radius: 2px;
- cursor: pointer;
- line-height: 44px;
- text-align: center;
- }
- .legend-tab {
- position: absolute;
- top: 0;
- right: 44px;
- .legend-table {
- padding: 16px;
- height: 546px;
- width: 420px;
- overflow: auto;
- overflow: hidden;
- overflow-y: auto;
- position: relative;
- background: rgba(255, 255, 255, 1);
- box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
- border-radius: 2px;
- border: 1px solid rgba(228, 229, 231, 1);
- &::-webkit-scrollbar {
- display: none;
- }
- }
- }
- }
- .edit_map {
- position: fixed;
- bottom: 28px;
- z-index: 1;
- .edit-icon,
- .edit-icon2 {
- width: 48px;
- height: 48px;
- background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
- box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.2);
- border-radius: 50%;
- text-align: center;
- line-height: 48px;
- display: inline-block;
- }
- .edit-icon {
- cursor: pointer;
- }
- .hover-div {
- position: absolute;
- bottom: 58px;
- .icon1 {
- width: 40px;
- height: 40px;
- background: rgba(255, 255, 255, 1);
- box-shadow: 0px 2px 4px 0px rgba(31, 36, 41, 0.06);
- border: 1px solid rgba(31, 36, 41, 0.2);
- font-size: 16px;
- display: inline-block;
- color: #646c73;
- border-radius: 50%;
- text-align: center;
- line-height: 40px;
- cursor: pointer;
- }
- .icon2 {
- width: 40px;
- height: 40px;
- background: rgba(255, 255, 255, 1);
- box-shadow: 0px 2px 4px 0px rgba(31, 36, 41, 0.06);
- border: 1px solid rgba(31, 36, 41, 0.2);
- font-size: 16px;
- display: inline-block;
- color: #646c73;
- border-radius: 50%;
- text-align: center;
- line-height: 40px;
- margin-top: 15px;
- cursor: pointer;
- }
- }
- }
- </style>
- <style lang="less">
- .legend-container {
- .el-table thead {
- background: rgba(2, 91, 170, 0.1);
- }
- .el-table td,
- .el-table th {
- padding: 6px 0;
- }
- }
- </style>
|