123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160 |
- <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>
- {{item.label}}
- </li>
- </ul>
- </div>
- <!-- 楼层 -->
- <div class='other-right' v-if='matterId!=1'>
- <floor-list :floors='floors' @emitFloor='emitFloor'></floor-list>
- </div>
- <!-- 图例 -->
- <div class='legend-box' v-if='matterId!=1'>
- <Legend></Legend>
- </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'>
- <img src='../../assets/imgs/matter_floorB2.png' alt />
- </div>
- <gcfz-dialog ref='gcfzDialog' :systemName='systemName'></gcfz-dialog>
- </div>
- </template>
- <script>
- import floorList from '@/components/floorList.vue'
- import OtherDialog from './otherDialog'
- import { matter, floors } from '@/utils/plugins/components.js'
- import ZhsxOther from './zhsxOther'
- import GcfzDialog from './gcfzDialog'
- import { queryPic } from '@/api/public.js'
- import { queryGlams, querygcfzyfhz, queryfzyfchange } from '@/api/other.js'
- export default {
- data() {
- return {
- matter,
- floors,
- everySystem: [],
- matterId: 1,
- systemName: '供电系统',
- floorInfo: {
- floorName: 'F1',
- floorId: 'f1'
- },
- dialogInfo: {}
- }
- },
- components: { floorList, OtherDialog, ZhsxOther, GcfzDialog },
- methods: {
- tabSyatem(item) {
- this.matterId = item.id
- this.everySystem = item.children
- console.log(this.everySystem)
- this.systemName = item.name
- },
- emitFloor(item) {
- this.floorInfo = item
- },
- dialogVisible(item) {
- console.log(item)
- this.$refs.gcfzDialog.showModal(item)
- },
- queryPicter() {
- let getParams = {
- data: { tyepcode: 2, floor: '4F', plazaId: '1001145' },
- params: {}
- }
- queryPic(getParams).then(res => {
- console.log('resres', res)
- })
- }
- },
- mounted() {
- this.everySystem = this.matter[0].children
- this.queryPicter()
- console.log(this.everySystem)
- }
- }
- </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;
- }
- }
- .other-bottom {
- display: flex;
- .other-left {
- position: fixed;
- z-index: 2;
- padding-top: 100px;
- color: #646c73;
- font-size: 14px;
- }
- .li-style {
- padding: 0 0 18px 35px;
- cursor: pointer;
- .circle {
- width: 6px;
- height: 6px;
- // background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
- border-radius: 50%;
- display: inline-block;
- margin-right: 10px;
- }
- }
- .other-right {
- margin-top: 24px;
- flex: 1;
- }
- .legend-box {
- position: fixed;
- right: 32px;
- top: 155px;
- }
- }
- .qtfugl {
- img {
- width: 100%;
- height: 100%;
- margin: 0 auto;
- }
- }
- }
- </style>
|