123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718 |
- /**
- *@author:Guoxiaohuan zhulizhen
- *@date:2020.05.27
- *@info:图例
- */
- <template>
- <div>
- <div class='legend-container'>
- <div :class='showView===1?"legend2":"legend"' @click='showTl' v-if='(type==1 || floors.length>0)&& isMessage && legendTable.length>0 '>图例</div>
- <!-- 图里展示状态组件 -->
- <el-collapse-transition v-if='(type==1 || floors.length>0)&& isMessage && legendTable.length>0 '>
- <div class='legend-tab' v-if='showView===1'>
- <div class='legend-table2' v-if='systemName=="土建系统"'>
- <lengend-view @changeSwitch='handleSwich' :remarksText='remarksText' ref='viewLengend' :systemName='systemName'></lengend-view>
- </div>
- <div class='legend-table' v-else>
- <lengend-view @changeSwitch='handleSwich' :remarksText='remarksText' ref='viewLengend' :systemName='systemName'></lengend-view>
- </div>
- </div>
- </el-collapse-transition>
- <!-- 图例编辑状态组件 -->
- <el-collapse-transition>
- <div v-if='showView===2'>
- <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>
- <!-- 单独展示新增分布图 -->
- <el-tooltip effect='dark' v-if='floors.length==0' content='新增分布图' placement='left'>
- <div class='edit_map1' @click='addFloor'>
- <!-- <p class='tltk' style='margin-left: -5px;'> -->
- <img src='@/assets/imgs/bjj.png' alt />
- <!-- </p> -->
- </div>
- </el-tooltip>
- <div class='edit_map' v-else>
- <!-- 备注编辑器 -->
- <el-tooltip effect='dark' content='编辑备注' placement='left'>
- <span v-if='systemName != "土建系统" && isMessage' class='bjtk' @click='legendClik'>备注</span>
- </el-tooltip>
- <!-- 编辑图例 -->
- <el-tooltip effect='dark' content='编辑图例' placement='left'>
- <p v-if='systemName != "土建系统" && isMessage' @click='editTl' class='tltk'>
- <img src='@/assets/imgs/bjtl.png' alt />
- </p>
- </el-tooltip>
- <!-- 新增分布图 -->
- <el-tooltip effect='dark' content='新增分布图' placement='left' v-if='floorSelect.length!=floors.length && !isMessage && type==0'>
- <p class='tltk' style='margin-left: -5px;' @click='addFloor'>
- <img src='@/assets/imgs/bjj.png' alt />
- </p>
- </el-tooltip>
- <!-- 编辑分布图 -->
- <!-- 有修改权限 -->
- <el-tooltip v-if='editPmt' class='bjpmt' effect='dark' :content='editTips' placement='left'>
- <span class='edit-icon corner-con' @click='goToEditer'>
- <img src='@/assets/imgs/bjs.png' alt />
- <!-- 角标 -->
- <!-- <span v-if='draftNum' class='corner' :style='{lineHeight : draftNum > 99 ?"10px":"18px"}'>{{draftNum > 99 ? '...' : draftNum}}</span> -->
- <span v-if='draftNum' class='corner'></span>
- </span>
- </el-tooltip>
- <!-- 无修改权限 -->
- <span v-else class='edit-icon2 corner-con'>
- <img src='@/assets/imgs/bjs.png' alt />
- <!-- 角标 -->
- <!-- <span v-if='draftNum' class='corner' :style='{lineHeight : draftNum > 99 ?"10px":"18px"}'>{{draftNum > 99 ? '...' : draftNum}}</span> -->
- <span v-if='draftNum' class='corner'></span>
- </span>
- </div>
- <div class='select-floor' v-if='isFloor'>
- <p class='p1'>{{`请选择需要创建"${categoryId=='FZQZL'?'分水器支路分布图':'消防泵房引出管路分布图'}"的楼层`}}</p>
- <p class='p2'>
- <Select width='240' tipPlace='top' v-model='floor' caption='楼层:' size='mini' :selectdata='floorSelectAble' :placeholder='"请选择"'></Select>
- </p>
- <p class='p3'>
- <span @click='cancel'>取消</span>
- <span @click='determine'>确定</span>
- </p>
- </div>
- <legend-remarks @queryMarks='queryMarks' ref='EditdMarks'></legend-remarks>
- </div>
- </template>
- <script>
- import lengendView from '@/components/viewLengend'
- import legendRemarks from '@/components/legendremarks'
- import lengendEdit from '@/components/editLengend'
- import { mapGetters } from 'vuex'
- import bus from '@/utils/bus.js'
- import { queryStatis, updateStatis, queryRead, queryDraftNum } from '@/api/public.js'
- export default {
- name: 'Legend',
- data() {
- return {
- remarksText: '', //查询出来的备注
- text1:
- '<p>主要设备房包括:冷源机房,热源机房,开闭站,配变电所(室),发电机房,消防水泵房,消防高位水箱间,生活水泵房,慧云机房,垃圾房</p>',
- text2: '<p>图例后×的数字,代表此位置的数量</p>',
- text2: '',
- loading: true,
- loading1: true,
- viewTable: [],
- editTable: [],
- tbData1: [],
- tbData2: [],
- tbData3: [],
- multipleSelection: [],
- editText: '',
- editSwitch: false,
- isFloor: false,
- editPmt: true, //是否有跳转道图例库的权限
- floorSelectAble: [],
- floor: '', //传的楼层
- floorName: '',
- planNum: '', //主要设备房
- typeNum: '',
- draftNum: null, //草稿箱数量, 编辑器修改icon右上角显示
- interval: 10 * 60 * 1000, //定时器时长,默认 10分钟
- timer: null //保存定时器
- }
- },
- computed: {
- ...mapGetters(['plazaId', 'fmapID', 'floorSelect', 'isMessage', 'ssoToken', 'showView', 'legendTable'])
- },
- props: {
- floors: {
- default: () => {
- ;[]
- },
- type: Array
- },
- type: {
- default: '1',
- type: String
- },
- systemName: {
- default: '',
- type: String
- },
- categoryId: {
- default: '',
- type: String
- },
- editTips: {
- type: String,
- default: ''
- }
- },
- components: { lengendView, legendRemarks, lengendEdit },
- watch: {
- // 监听 vuex 中currentFloor的变化,切换楼层后,调用接口查询,显示右下角小红点
- '$store.state.currentFloor': {
- handler(newV, oldV) {
- if (newV.gname !== oldV.gname) {
- clearInterval(this.timer)
- this.getDraftNum()
- this.timer = setInterval(() => {
- this.getDraftNum()
- }, this.interval)
- }
- },
- deep: true
- }
- },
- methods: {
- /**
- * @name getDraftNum
- * @description 查询草稿箱数量
- */
- async getDraftNum() {
- let res = null,
- // floorId = this.$cookie.get('floorMapId'),
- floorId = this.$store.state.currentFloor.gname || this.$cookie.get('floorMapId')
- // 增加校验 floorId,防止上传 undefined
- if (!floorId) {
- return true
- }
- let data = {
- Distinct: true,
- Filters: `projectId='${this.plazaId}';isPub=false;floorId='${floorId}'`,
- PageNumber: 1,
- PageSize: 500,
- Projection: ['floorId']
- }
- try {
- // 调用接口
- res = await queryDraftNum(data)
- } catch (error) {
- console.error(error)
- }
- if (!res) {
- this.draftNum = null
- return false
- }
- // 草稿箱总条数使用 res.Total, 不使用 Content数组的长度
- this.draftNum = res.Total || null
- },
- formatFloor() {
- this.floorSelectAble = []
- this.floorSelectAble = this.floorSelect.filter(item => {
- const hit = this.floors.find(i => i.gname == item.id)
- return !hit
- })
- },
- testClick(data) {},
- // 编辑备注
- legendClik() {
- this.$refs.EditdMarks.showModal()
- },
- // 查询备注
- queryMarks() {
- let postParams = {
- categoryId: this.categoryId ? this.categoryId : this.$cookie.get('categoryId'),
- projectId: this.$store.state.plazaId,
- BuildingID: '1',
- Pub: true,
- FloorID: this.$cookie.get('floorNow')
- }
- let data = {}
- queryRead({ data, postParams }).then(res => {
- let remarksText = ''
- if (res.data.Data && res.data.Data[0].Note) {
- let Res = res.data ? res.data.Data[0].Note : ''
- if (Res) {
- // 返回有备注
- remarksText = Res
- } else {
- if (this.planNum > 0 && this.typeNum > 1) {
- remarksText = `${this.text1}${this.text2}${Res}`
- } else if (this.planNum > 0) {
- remarksText = `${this.text1}${Res}`
- } else if (this.typeNum > 1) {
- remarksText = `${this.text2}${Res}`
- } else {
- remarksText = ''
- }
- }
- this.$store.commit('SETREMARKSTEXT', remarksText)
- }
- })
- },
- // 点击展示图例框
- showTl() {
- if (this.showView != 1) {
- this.$store.commit('SETSHOWVIEW', 1)
- } else {
- this.$store.commit('SETSHOWVIEW', 0)
- }
- this.queryView(false)
- },
- cance() {
- // this.show2 = false
- },
- // 编辑图例
- editTl() {
- if (this.showView != 2) {
- this.$store.commit('SETSHOWVIEW', 2)
- } else {
- this.$store.commit('SETSHOWVIEW', 0)
- }
- this.queryEditNum(true)
- },
- /**
- * @name goToEditer
- * @description t跳转editer编辑器
- */
- goToEditer() {
- if (this.floor) {
- this.floorSelect.forEach(el => {
- if (el.id == this.floor) {
- this.floorName = el.name
- }
- })
- }
- let FloorID = this.floor ? this.floor : this.$cookie.get('floorMapId') || 'f1'
- let categoryId = this.categoryId ? this.categoryId : this.$cookie.get('categoryId')
- const { conf } = window.__systemConf,
- { editerUrl } = conf
- let floorName = this.floorName ? this.floorName : this.$cookie.get('floorNow')
- let seq = this.$cookie.get('currentFloorId')
- let data = `categoryId=${categoryId}&projectId=${this.plazaId}&BuildingID=1&FloorID=${FloorID}&FloorName=${floorName}&fmapID=${this.fmapID}&seq=${seq}&token=${this.ssoToken}`
- let url = editerUrl + 'editer?' + encodeURIComponent(data)
- window.open(url, true)
- },
- // 编辑状态取消
- isShow2() {
- // if (this.showView != 2) {
- // this.$store.commit('SETSHOWVIEW', 1)
- // } else {
- // this.$store.commit('SETSHOWVIEW', 0)
- // }
- // this.show2 = !this.show2
- },
- handleSwich(val) {
- this.queryView(!val)
- },
- // 默认隐藏为0的项目
- handleSwich2(val) {
- this.editSwitch = val
- this.queryEditNum(!this.editSwitch)
- },
- queryViewMethods() {},
- // 查询图例
- queryView(flag) {
- let postParams = {}
- let data = {
- categoryId: this.$cookie.get('categoryId'),
- graphId: this.$cookie.get('graphId'),
- projectId: this.$store.state.plazaId,
- flag: flag,
- buildingId: '1',
- floorId: this.$store.state.currentFloor.gname
- }
- queryStatis({ data, postParams }).then(res => {
- this.loading = false
- let viewTable = []
- viewTable = res.data.Data ? res.data.Data : []
- this.$store.commit('SETLEGENDTABLE', viewTable)
- if (viewTable.length > 0) {
- viewTable.forEach(el => {
- if (el.Name == '主要设备房') {
- this.planNum = el.Num
- }
- if (el.type == 'Image') {
- this.typeNum = el.Num
- }
- })
- }
- this.$nextTick(() => {
- if (this.$refs.viewLengend) {
- this.$refs.viewLengend.setSelected()
- }
- })
- })
- },
- // 查询编辑状态图例
- queryEditNum(flag) {
- let postParams = {}
- let data = {
- categoryId: this.$cookie.get('categoryId'),
- graphId: this.$cookie.get('graphId'),
- projectId: this.$store.state.plazaId,
- flag: flag,
- buildingId: '1',
- floorId: this.$store.state.currentFloor.gname
- }
- queryStatis({ data, postParams }).then(res => {
- //console.log('编辑图例数', res)
- this.loading1 = false
- this.editTable = res.data.Data ? res.data.Data : []
- })
- },
- // 编辑数量
- queryEdit(val) {
- let arr = []
- if (val.length > 0) {
- val.forEach(el => {
- let obj = {
- BuildingId: '1',
- FloorId: this.$store.state.currentFloor.gname,
- ProjectId: this.plazaId,
- CategoryId: el.GraphCategoryId,
- GraphId: this.$cookie.get('graphId'),
- GraphElementId: el.GraphElementId,
- Num: el.Num
- }
- arr.push(obj)
- })
- }
- let params = {
- postParams: {
- Content: arr
- }
- }
- updateStatis(params).then(res => {
- if (res.Result == 'success') {
- //console.log('更新图例', res)
- this.$message({
- message: '操作成功',
- type: 'success'
- })
- this.$store.commit('SETSHOWVIEW', 1)
- // this.queryEditNum(this.editSwitch)
- } else {
- this.$message({
- message: '操作失败',
- type: 'error'
- })
- }
- })
- },
- saveNum(val) {
- if (val.length > 0) {
- val.forEach(element => {
- element.Modify = element.IsModify
- })
- this.queryEdit(val)
- // this.isShow2()
- } else {
- // this.show2 = false
- // this.isShow2()
- // this.queryEditNum(true)
- }
- },
- addFloor() {
- this.isFloor = true
- this.formatFloor()
- },
- // 新增楼层取消
- cancel() {
- this.isFloor = false
- },
- // 新增楼层确定
- determine() {
- this.isFloor = false
- this.goToEditer()
- },
- queryRemarksMethods() {},
- init() {
- // 图例
- bus.$on('queryViewMethods', () => {
- this.queryView(false)
- })
- // 备注
- bus.$on('queryRemarksMethods', res => {
- let remarksText = ''
- if (res) {
- // 返回有备注
- remarksText = res
- } else {
- if (this.planNum > 0 && this.typeNum > 1) {
- remarksText = `${this.text1}${this.text2}${res}`
- } else if (this.planNum > 0) {
- remarksText = `${this.text1}${res}`
- } else if (this.typeNum > 1) {
- remarksText = `${this.text2}${res}`
- } else {
- remarksText = ''
- }
- }
- this.$store.commit('SETREMARKSTEXT', remarksText)
- })
- }
- },
- mounted() {
- this.init()
- // 定时查询草稿箱数量
- this.getDraftNum() //首次查询
- this.timer = setInterval(() => {
- this.getDraftNum()
- }, this.interval)
- // 页面销毁前,清除定时器
- this.$once('hook:beforeDestroy', () => {
- clearInterval(this.timer)
- })
- }
- }
- </script>
- <style lang="less" scoped>
- @red: rgb(255, 0, 0); //红色
- .legend-container {
- position: relative;
- top: -15px;
- .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;
- }
- .legend2 {
- text-align: center;
- line-height: 44px;
- cursor: pointer;
- width: 44px;
- height: 44px;
- background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
- border-radius: 2px;
- font-size: 14px;
- font-family: MicrosoftYaHei;
- color: rgba(255, 255, 255, 1);
- }
- .legend-tab {
- position: absolute;
- top: 0;
- right: 47px;
- .legend-table {
- padding: 16px;
- height: 546px;
- width: 385px;
- // 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;
- }
- }
- .legend-table2 {
- padding: 16px;
- height: 356px;
- width: 385px;
- // 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;
- right: 28px;
- .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;
- img {
- line-height: 48px;
- width: 20px;
- height: 20px;
- margin-top: -4px;
- }
- }
- .edit-icon {
- cursor: pointer;
- }
- /** 右下角修改,角标样式 */
- .corner-con {
- position: relative;
- .corner {
- position: absolute;
- // right: -8px;
- // top: 0;
- // display: inline-block;
- // width: 18px;
- // height: 18px;
- right: 3px;
- top: 3px;
- display: inline-block;
- width: 8px;
- height: 8px;
- background: @red;
- border-radius: 90px;
- font-size: 12px;
- text-align: center;
- line-height: 18px;
- color: #fff;
- }
- }
- .bjtk {
- width: 40px;
- height: 40px;
- display: inline-block;
- text-align: center;
- background: rgba(255, 255, 255, 1);
- box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
- border-radius: 90px;
- line-height: 40px;
- font-size: 12px;
- margin: 0 auto;
- cursor: pointer;
- border: 1px solid #ccc;
- margin-left: 4px;
- margin-bottom: 8px;
- margin-top: 10px;
- display: none;
- }
- .tltk {
- margin-bottom: 10px;
- display: none;
- cursor: pointer;
- border: 1px solid #eee;
- }
- }
- .edit_map:hover .tltk {
- display: block;
- }
- .edit_map:hover .bjtk {
- display: block;
- }
- .edit_map1 {
- position: fixed;
- bottom: 28px;
- right: 30px;
- z-index: 1;
- 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: 90px;
- text-align: center;
- img {
- display: block;
- margin-top: 12px;
- margin-left: 12px;
- }
- .select-floor {
- width: 288px;
- height: 220px;
- 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);
- position: relative;
- right: 0;
- }
- }
- .select-floor {
- width: 288px;
- 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);
- position: fixed;
- bottom: 26px;
- right: 84px;
- padding: 24px 24px 20px 24px;
- .p1 {
- font-size: 14px;
- font-family: MicrosoftYaHei;
- color: rgba(31, 36, 41, 1);
- line-height: 19px;
- }
- .p2 {
- margin-top: 8px;
- margin-bottom: 68px;
- }
- .p3 {
- display: flex;
- justify-content: flex-end;
- font-size: 14px;
- font-family: MicrosoftYaHei;
- line-height: 22px;
- text-align: center;
- span:nth-of-type(1) {
- width: 58px;
- height: 24px;
- background: rgba(255, 255, 255, 1);
- border: 1px solid rgba(195, 199, 203, 1);
- margin-right: 12px;
- border-radius: 2px;
- cursor: pointer;
- }
- span:nth-of-type(2) {
- width: 58px;
- height: 24px;
- background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
- border-radius: 2px;
- color: rgba(255, 255, 255, 1);
- border-radius: 2px;
- 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: 3px 0;
- }
- .el-checkbox__input.is-checked .el-checkbox__inner,
- .el-checkbox__input.is-indeterminate .el-checkbox__inner {
- background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
- border-radius: 2px;
- }
- }
- </style>
|