123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181 |
- <template>
- <div id='equipment'>
- <div class='eq-top'>
- <span class='eq-system' v-for='(item,index) in system' :class='item.id==systemId?"isActive":""' :key='index' @click='tabSyatem(item)'>
- <img :src='item.id==systemId?item.icon1:item.icon' />
- {{item.name}}
- </span>
- </div>
- <div class='eq-bottom'>
- <div class='eq-left'>
- <ul>
- <li
- class='li-style'
- :class='{"is-active": eve.id}'
- v-for='(eve,index) in everySystem'
- :key='"o"+index'
- @click='dialogVisible(eve)'
- >
- <span class='circle'></span>
- {{eve.label}}
- </li>
- </ul>
- </div>
- <div class='eq-right'>
- <div class='eq-right-bottom'>
- <div class='eq-title'>
- <span>{{floorInfo.floorName}}</span>
- </div>
- <div class='eq-content'>
- <floorMap ref='floorMap'></floorMap>
- <bottomLayer></bottomLayer>
- </div>
- <floor-list :floors='floors' @emitFloor='emitFloor'></floor-list>
- </div>
- </div>
- <editList></editList>
- </div>
- <eq-dialog ref='dialog' :systemName='systemName'></eq-dialog>
- </div>
- </template>
- <script>
- import floorList from '@/components/floorList.vue'
- import floorMap from '@/components/floorMap/index.vue'
- import eqDialog from './eqDialog'
- import bottomLayer from './bottomLayer'
- import editList from '@/components/edit.vue'
- import { system, floors } from '@/utils/plugins/components.js'
- import { getFloorList } from '@/api/public.js'
- export default {
- data() {
- return {
- system,
- floors,
- everySystem: [],
- systemId: 1,
- systemName: '供电系统',
- floorInfo: {
- floorName: 'F1',
- floorId: 'f1'
- },
- dialogInfo: {}
- }
- },
- components: { floorList, eqDialog, floorMap, bottomLayer, editList },
- methods: {
- tabSyatem(item) {
- this.systemId = item.id
- ;(this.everySystem = item.children), (this.systemName = item.name)
- },
- emitFloor(item) {
- this.floorInfo = item
- this.$refs.floorMap.init()
- },
- dialogVisible(eve) {
- console.log(eve)
- this.$refs.dialog.showModal(eve)
- // this.dialogInfo = eve
- }
- },
- mounted() {
- this.everySystem = this.system[0].children
- // this.$refs.floorMap.init()
- getFloorList({ plazaId: '964' }).then(res => {
- console.log('12313', res)
- })
- // this.$refs.dialog.init()
- // this.$refs.floorMap.init()
- }
- }
- </script>
- <style lang="less" scoped>
- #equipment {
- background: rgba(242, 245, 247, 1);
- display: flex;
- flex: 1;
- .eq-top {
- margin-left: 240px;
- padding-top: 24px;
- position: fixed;
- z-index: 3;
- min-width: 1300px;
- .eq-system {
- padding: 12px 23px;
- color: #1f2429;
- background: #fff;
- font-size: 16px;
- cursor: pointer;
- img {
- width: 16px;
- height: 16px;
- margin-right: 4px;
- margin-bottom: 3px;
- }
- }
- .isActive {
- color: #025baa;
- }
- }
- .eq-bottom {
- display: flex;
- flex: 1;
- .eq-left {
- position: fixed;
- z-index: 2;
- // width: 196px;
- padding-top: 100px;
- color: #646c73;
- font-size: 14px;
- height: 100%;
- // background: rgba(242, 245, 247, 1);
- }
- .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;
- }
- }
- .is-active {
- // background: linear-gradient(270deg, rgba(199, 217, 234, 0) 0%, rgba(199, 217, 234, 1) 100%);
- }
- .eq-right {
- flex: 1;
- .eq-right-bottom {
- display: flex;
- flex: 1;
- .eq-title {
- position: fixed;
- z-index: 2;
- top: 146px;
- left: 242px;
- width: 141px;
- height: 32px;
- background: linear-gradient(270deg, rgba(199, 217, 234, 0) 0%, rgba(199, 217, 234, 1) 100%);
- box-shadow: -6px 2px 8px 0px rgba(31, 36, 41, 0.1);
- color: #025baa;
- font-size: 16px;
- &::before {
- width: 2px;
- height: 16px;
- background: rgba(2, 91, 170, 1);
- display: inline-block;
- content: '';
- margin-right: 10px;
- margin-top: 8px;
- }
- }
- .eq-content {
- flex: 1;
- }
- }
- }
- }
- }
- </style>
|