123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272 |
- <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>
- <span class='hanzi'>{{eve.label}}</span>
- </li>
- </ul>
- </div>
- <div class='eq-right'>
- <div class='eq-right-bottom'>
- <div class='title-box'>
- <!-- <img src='@/assets/imgs/mainIcon.png' /> -->
- <div class='eq-title'>
- <span>{{floorInfo.code}}</span>
- </div>
- </div>
- <div class='eq-content'>
- <div class='legend-boxs'>
- <Legend></Legend>
- </div>
- <floorMap ref='floorMap'></floorMap>
- <div class='additional-box'>
- <div class='additional' @click='additionalColl'>
- <img src='../../assets/imgs/bg.png' alt />
- </div>
- <el-collapse-transition>
- <div v-if='show' class='add-img'>我是放附加数据图片哒。。。</div>
- </el-collapse-transition>
- </div>
- </div>
- <floor-list :floors='floors' @emitFloor='emitFloor'></floor-list>
- </div>
- </div>
- <!-- <editList></editList> -->
- </div>
- <eq-dialog ref='dialog' :systemName='systemName' :smsxt='smsxt'></eq-dialog>
- </div>
- </template>
- <script>
- import floorList from '@/components/floorList.vue'
- import floorMap from '@/components/floorMap/index.vue'
- import eqDialog from './eqDialog'
- import editList from '@/components/edit.vue'
- import { system, floors } from '@/utils/plugins/components.js'
- export default {
- data() {
- return {
- system,
- floors,
- everySystem: [],
- systemId: 1,
- systemName: '供电系统',
- floorInfo: {
- gname: 'f1',
- code: 'F1'
- },
- smsxt: '1001',
- dialogInfo: {},
- brand: [], //品牌
- manufacturer: [],
- show: false
- }
- },
- components: { floorList, eqDialog, floorMap, editList },
- methods: {
- // 查询tab页
- tabSyatem(item) {
- this.systemId = item.id
- this.everySystem = item.children
- this.systemName = item.name
- this.smsxt = item.smsxt
- },
- emitFloor(item) {
- console.log('item', item)
- this.floorInfo = item
- this.$refs.floorMap.init(this.floorInfo.gname)
- },
- dialogVisible(eve) {
- console.log(eve)
- this.$refs.dialog.showModal(eve)
- },
- additionalColl() {
- this.show = !this.show
- }
- },
- mounted() {
- this.everySystem = this.system[0].children
- this.$refs.floorMap.init(this.floorInfo.gname)
- }
- }
- </script>
- <style lang="less" scoped>
- #equipment {
- background: rgba(242, 245, 247, 1);
- display: flex;
- flex: 1;
- .eq-top {
- margin-left: 260px;
- padding-top: 24px;
- position: fixed;
- z-index: 3;
- min-width: 1300px;
- .eq-system {
- padding: 12px 20px;
- background: #fff;
- font-size: 16px;
- cursor: pointer;
- 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%);
- }
- }
- .eq-bottom {
- display: flex;
- flex: 1;
- .eq-left {
- position: fixed;
- z-index: 2;
- width: 260px;
- padding-top: 100px;
- color: #646c73;
- font-size: 14px;
- height: 100%;
- background: rgba(242, 245, 247, 1);
- }
- .li-style {
- margin-left: 28px;
- // padding: 9px 6px;
- 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;
- }
- .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%);
- }
- }
- }
- .eq-right {
- flex: 1;
- .eq-right-bottom {
- display: flex;
- flex: 1;
- .title-box {
- position: fixed;
- z-index: 2;
- top: 146px;
- left: 260px;
- display: flex;
- img {
- margin-top: -5px;
- }
- .eq-title {
- width: 140px;
- 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;
- .legend-boxs {
- position: fixed;
- z-index: 9;
- right: 32px;
- top: 160px;
- }
- .additional-box {
- position: relative;
- .additional {
- width: 44px;
- height: 44px;
- background: rgba(255, 255, 255, 1);
- box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
- border-radius: 2px;
- position: fixed;
- right: 32px;
- top: 420px;
- z-index: 2;
- display: flex;
- justify-content: center;
- align-items: center;
- cursor: pointer;
- img {
- width: 20px;
- height: 20px;
- }
- }
- .add-img {
- width: 560px;
- height: 325px;
- background: #ffffff;
- -webkit-box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
- box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
- border-radius: 2px;
- border: 1px solid #e4e5e7;
- position: absolute;
- right: 77px;
- top: 93px;
- z-index: 2;
- }
- }
- }
- }
- }
- }
- }
- </style>
- <style lang="less">
- .el-table {
- th {
- background: rgba(248, 249, 250, 1);
- font-size: 12px;
- padding: 8px 0;
- color: #646a73;
- }
- td {
- font-size: 14px;
- color: #1f2429;
- padding: 8px 0;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- }
- </style>
|