123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290 |
- <template>
- <div class='other'>
- <div class='other-top'>
- <span class='other-system' v-for='(item,index) in matter' :class='item.id==matterId?"isActive":""' :key='index' @click='tabSyatem(item)'>
- <img :src='item.id==matterId?item.icon1:item.icon' alt />
- {{item.name}}
- </span>
- </div>
- <div class='other-bottom' v-if='matterId!=1'>
- <div class='other-left'>
- <ul>
- <li class='li-style' v-for='(item,index) in everySystem' :key='"o"+index' @click='dialogVisible(item)'>
- <span class='circle'></span>
- <span class='hanzi'>{{item.label}}</span>
- </li>
- </ul>
- </div>
- <!-- 楼层 -->
- <div class='other-right' v-if='matterId!=1'>
- <floor-list-other v-if='floorData.length>0' :floorsArr='floorData' @emitFloor='emitFloor' :type='2'></floor-list-other>
- </div>
- </div>
- <other-dialog ref='dialog' :systemName='systemName'></other-dialog>
- <!-- 综合事项管理 -->
- <zhsx-other v-if='matterId==1&&everySystem.length>0' :everySystem='everySystem'></zhsx-other>
- <!-- 辅助用房管理 -->
- <div class='qtfugl' v-if='matterId==2'>
- <div v-if='floorData.length==0' class='fzyfwtp'>
- <img src='@/assets/imgs/wtp.png' alt />
- <p class='fjt'>暂无附加数据图片</p>
- </div>
- <div class='fzyfImg' v-else>
- <img :src='picFloorImg' alt />
- </div>
- </div>
- <gcfz-dialog ref='gcfzDialog' :systemName='systemName'></gcfz-dialog>
- </div>
- </template>
- <script>
- import ZhsxOther from './zhsxOther'
- import GcfzDialog from './gcfzDialog'
- import OtherDialog from './otherDialog'
- import { queryPic, queryTab } from '@/api/public.js'
- import floorListOther from '@/components/floorListOther.vue'
- import { matter } from '@/utils/plugins/components.js'
- import { mapGetters } from 'vuex'
- export default {
- data() {
- return {
- matter,
- everySystem: [],
- matterId: 1,
- systemName: '供电系统',
- floorInfo: {
- floorName: 'F1',
- floorId: 'f1'
- },
- picFloor: '',
- picFloorImg: [],
- dialogInfo: {},
- floorData: [],
- module: ''
- }
- },
- components: { floorListOther, OtherDialog, ZhsxOther, GcfzDialog },
- methods: {
- tabSyatem(item) {
- this.matterId = item.id
- this.everySystem = item.children
- this.systemName = item.name
- },
- emitFloor(item) {
- this.queryPicter(item.gname)
- this.floorInfo = item
- this.picFloor = this.floorInfo.gname
- },
- dialogVisible(item) {
- this.$refs.gcfzDialog.showModal(item)
- },
- queryPicter(floor) {
- this.picFloor = this.$cookie.get('floorNow')
- let getParams = {
- module: '1004',
- floor: floor,
- plazaId: this.plazaId
- }
- queryPic({ getParams }).then(res => {
- //console.log('库房管理图', res)
- this.picFloorImg = res.data[0].url ? res.data[0].url : ''
- })
- },
- // 查询哪几个楼层有库房图
- tabSize() {
- let data = { plazaId: this.plazaId }
- let postParams = [
- {
- tableName: 'glsms_proimgup',
- params: { module: '1004', floor: 'f1' }
- },
- {
- tableName: 'glsms_proimgup',
- params: { module: '1004', floor: 'f2' }
- },
- {
- tableName: 'glsms_proimgup',
- params: { module: '1004', floor: 'f3' }
- },
- {
- tableName: 'glsms_proimgup',
- params: { module: '1004', floor: 'f4' }
- },
- {
- tableName: 'glsms_proimgup',
- params: { module: '1004', floor: 'f5' }
- },
- {
- tableName: 'glsms_proimgup',
- params: { module: '1004', floor: 'f6' }
- },
- {
- tableName: 'glsms_proimgup',
- params: { module: '1004', floor: 'b1' }
- },
- {
- tableName: 'glsms_proimgup',
- params: { module: '1004', floor: 'b2' }
- }
- ]
- queryTab({ data, postParams }).then(res => {
- //console.log('查询哪几层楼有图', res)
- this.floorData = []
- let data = res.data.data
- console.log('data', data)
- data.forEach(el => {
- if (el.count > 0) {
- let obj = {
- gname: el.params.floor,
- code: el.params.floor.toUpperCase(),
- gcode: el.params.floor
- .toUpperCase()
- .split('')
- .reverse()
- .join(''),
- seq:
- el.params.floor.substring(1, 2) == 'b'
- ? el.params.floor.substring(1, 2) + '00'
- : -el.params.floor.substring(1, 2) + '00'
- }
- this.floorData.push(obj)
- }
- })
- })
- }
- },
- computed: {
- ...mapGetters(['floorsArr', 'plazaId'])
- },
- mounted() {
- let module = window.location.href.split('=')[1]
- if (module == 'comprehensive ') {
- this.matterId = 1
- }
- this.everySystem = this.matter[0].children
- this.tabSize()
- }
- }
- </script>
- <style lang="less" scoped>
- .other {
- background: rgba(242, 245, 247, 1);
- height: 100%;
- overflow: hidden;
- .other-top {
- margin-top: 24px;
- position: fixed;
- text-align: center;
- width: 100%;
- z-index: 2;
- .other-system {
- padding: 12px 23px;
- color: #1f2429;
- background: #fff;
- font-size: 16px;
- cursor: pointer;
- vertical-align: bottom;
- img {
- width: 16px;
- height: 16px;
- margin-right: 4px;
- margin-bottom: 3px;
- }
- }
- .isActive {
- color: #025baa;
- font-weight: bolder;
- background: linear-gradient(360deg, rgba(2, 91, 170, 0.1) 0%, rgba(2, 91, 170, 0) 100%);
- }
- }
- .other-bottom {
- display: flex;
- .other-left {
- position: fixed;
- z-index: 2;
- padding-top: 100px;
- color: #646c73;
- font-size: 14px;
- }
- .li-style {
- padding: 0 0 8px 35px;
- cursor: pointer;
- display: flex;
- align-items: center;
- .circle {
- width: 6px;
- height: 6px;
- border-radius: 50%;
- display: inline-block;
- margin-right: 10px;
- background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
- }
- .hanzi {
- padding: 10px 2px;
- width: 200px;
- display: inline-block;
- &:hover {
- color: rgba(2, 91, 170, 1);
- background: linear-gradient(270deg, rgba(199, 217, 234, 0) 0%, rgba(199, 217, 234, 1) 100%);
- }
- }
- }
- .other-right {
- margin-top: 24px;
- flex: 1;
- }
- .legend-boxs {
- position: fixed;
- right: 32px;
- top: 155px;
- }
- }
- .qtfugl {
- .fzyfImg {
- width: 1035px;
- height: 544px;
- margin: 0 auto;
- margin-top: 200px;
- img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- // max-width: 100%;
- // max-height: 100%;
- // display: block;
- // margin: 0 auto;
- }
- }
- .fzyfwtp {
- width: 1035px;
- height: 544px;
- margin: 0 auto;
- margin-top: 93px;
- position: relative;
- img {
- width: 126px;
- height: 121px;
- position: absolute;
- top: 50%;
- left: 50%;
- margin-top: -60px;
- margin-left: -63px;
- }
- .fjt {
- margin-top: 7px;
- font-size: 16px;
- font-family: MicrosoftYaHei;
- color: rgba(100, 108, 115, 1);
- line-height: 21px;
- position: absolute;
- top: 50%;
- left: 50%;
- margin-top: 65px;
- margin-left: -60px;
- }
- }
- }
- }
- </style>
|