Pārlūkot izejas kodu

配电室低压柜 页面布局

yunxing 4 gadi atpakaļ
vecāks
revīzija
7b35dddf4d
2 mainītis faili ar 403 papildinājumiem un 5 dzēšanām
  1. 1 1
      public/index.html
  2. 402 4
      src/views/equipmentFacilities/LowVoltageCabinet.vue

+ 1 - 1
public/index.html

@@ -11,7 +11,7 @@
         <meta http-equiv="Cache" content="no-cache" />
         <!-- <meta name="viewport" content="target-densitydpi=device-dpi,width=750,user-scalable=0" /> -->
         <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
-        <link rel="stylesheet" href="//at.alicdn.com/t/font_2072883_7onlk4odzkb.css" />
+        <link rel="stylesheet" href="//at.alicdn.com/t/font_2072883_4p4goyb4c3s.css" />
         <title><%= htmlWebpackPlugin.options.title %></title>
     </head>
     <body>

+ 402 - 4
src/views/equipmentFacilities/LowVoltageCabinet.vue

@@ -1,25 +1,423 @@
 <template>
-    <div class='low-voltage-cabinet'>配电室低压柜及出线明细</div>
+    <div class='low-voltage-cabinet'>
+        <!-- 顶部条 -->
+        <van-nav-bar :title='title' left-arrow @click-left='backPage' @click-right='handleRightClick'>
+            <template #right>
+                <i class='iconfont wanda-scan'></i>
+            </template>
+        </van-nav-bar>
+        <!-- 搜索框 -->
+        <div class='equipment-search-container'>
+            <van-search class='equipment-search' v-model='keyword' placeholder='请输入编号' @search='onSearch'></van-search>
+        </div>
+        <!-- 配电室 -->
+        <div class='switch-room-container' v-if='1'>
+            <div class='switch-room' v-for='ii in 3' :key='ii'>
+                <div class='title'>商业楼/B1层/配电室/3#</div>
+                <!-- 一个低压柜信息 -->
+                <div class='info-container'>
+                    <div class='info' v-for='i in mock' :key='i'>
+                        <div class='name'>1AAAA1</div>
+                        <div class='specification'>
+                            <div class='label'>出线规格:</div>
+                            <div class='value'>1250A密集母线槽</div>
+                        </div>
+                        <div class='loop'>
+                            <div class='label'>控制回路:</div>
+                            <div class='value'>步行街公共空调用电2AP1d</div>
+                        </div>
+                        <div class='floor'>
+                            <div class='label'>
+                                <i class='iconfont wanda-dingwei1' style='color:#C3C7CB;'></i>
+                                <span>楼层:</span>
+                            </div>
+                            <div class='value'>1F~3F</div>
+                        </div>
+                        <div class='divider'></div>
+                    </div>
+                    <!-- 加载更多 -->
+                    <div class='load-more' @click='mock=5'>加载更多</div>
+                </div>
+            </div>
+        </div>
+        <!-- 点击头部筛选,出现的右侧弹窗 -->
+        <van-popup class='m-popup-container' v-model='showPopup' position='right'>
+            <div class='m-popup'>
+                <!-- 系统 -->
+                <div class='system'>
+                    <h1 class='title'>配电室</h1>
+                    <div class='system-btn-container'>
+                        <div class='system-btn' v-for='(item,index) in systemList' :key='index'>
+                            <van-button class='m-btn' :class='item.active' @click='changeSwitchRoom(item)'>{{item.text}}</van-button>
+                        </div>
+                    </div>
+                </div>
+                <div class='footer'>
+                    <van-button size='large' color='#025BAA' plain type='info' @click='reset'>重置</van-button>
+                    <van-button size='large' color='#025BAA' type='info' @click='confirm'>确定</van-button>
+                </div>
+            </div>
+        </van-popup>
+        <!-- 无数据 -->
+        <van-empty class='m-empty' v-if='finished &&!list.length' description='暂无数据'>
+            <template #image>
+                <img class='no-data' src='../../assets/images/search_null.png' alt />
+            </template>
+        </van-empty>
+    </div>
 </template>
 <script>
 /**
  * 配电室低压柜及出线明细
  */
+import Vue from 'vue'
+import { NavBar, Search, List, Cell, Icon, Popup, Button, Empty } from 'vant'
+Vue.use(NavBar).use(Search).use(List).use(Cell).use(Icon).use(Popup).use(Button).use(Empty)
+import { mapGetters } from 'vuex'
+
+import { querySmsLocation } from '@/api/equipmentList'
+import { queryPic } from '@/api/public'
+import ImagePreview from '@/components/ImagePreview'
+import { sleep } from '@/utils/util'
+import { cloneDeep } from 'lodash'
 export default {
     name: 'LowVoltageCabinet',
     props: {},
+    components: { ImagePreview },
     data() {
-        return {}
+        return {
+            mock: 2,
+            title: '配电室低压柜及出线明细',
+            keyword: '',
+            page: 1,
+            size: 20, //TODO: size1500
+            list: [],
+            loading: false,
+            finished: false,
+            showPopup: false,
+            systemList: [
+                { text: '全部', smsxt: '全部', active: 'active' },
+                { text: '供电系统', smsxt: '1001', active: '' },
+                { text: '暖通系统', smsxt: '1002', active: '' },
+                { text: '消防系统', smsxt: '1003', active: '' },
+                { text: '弱电系统', smsxt: '1004', active: '' },
+                { text: '给排水系统', smsxt: '1005', active: '' },
+                { text: '电梯系统', smsxt: '1006', active: '' },
+                { text: '燃气系统', smsxt: '1007', active: '' },
+                { text: '土建系统', smsxt: '1008', active: '' },
+            ],
+        }
     },
-    components: {},
+    computed: {
+        ...mapGetters(['plazaId', 'smsxt', 'categoryId']),
+    },
+    created() {},
     beforeMount() {},
     mounted() {},
-    methods: {},
+    methods: {
+        backPage() {
+            this.$router.go(-1)
+        },
+        /**
+         * 点击右侧筛选
+         */
+        handleRightClick() {
+            this.showPopup = true
+            // 设置选中的专业系统
+        },
+        onSearch() {
+            // 初始化数据,查询列表
+        },
+        /**
+         * popup 更改配电室
+         */
+        changeSwitchRoom(data) {
+            let systemList = this.systemList
+            systemList.map((item) => {
+                item.active = ''
+                if (item.smsxt === data.smsxt) {
+                    item.active = 'active'
+                }
+            })
+            // 弹窗选中的系统
+            // this.$set(this.modalDataBak, 'system', data.smsxt)
+        },
+        /**
+         * 重置
+         */
+        reset() {
+            // this.modalDataBak = {
+            //     system: '',
+            // }
+            // this.modalData = {
+            //     system: '',
+            // }
+            // this.system_code = this.smsxt
+            this.showPopup = false
+            // 初始化数据,查询列表
+            // this.initData()
+            // this.onLoad()
+        },
+        /**
+         * 弹窗确认
+         */
+        confirm() {
+            // this.modalData = cloneDeep(this.modalDataBak)
+            this.showPopup = false
+            // this.system_code = this.modalData.system
+            // 初始化数据,查询列表
+            // this.initData()
+            // this.onLoad()
+        },
+    },
 }
 </script>
 <style lang='less' scoped>
 .low-voltage-cabinet {
     width: 100%;
     height: 100%;
+    background-color: #f5f6f7;
+    // 返回箭头修改
+    /deep/ .van-nav-bar .van-icon {
+        color: #000;
+    }
+    // 搜索
+    .equipment-search-container {
+        width: 100%;
+        height: 55px;
+        // background-color: #fff;
+        text-align: center;
+        .equipment-search {
+            width: 80%;
+            margin: 0 auto;
+            background: none;
+        }
+        .van-search__content {
+            background: #fff;
+            border-radius: 50px;
+        }
+    }
+    // 配电室列表
+    .switch-room-container {
+        width: 100%;
+        // background-color: #fff;
+        min-height: 1px;
+        // TODO:
+        max-height: calc(100% - 100px);
+        overflow: auto;
+        font-size: 14px;
+        font-weight: 400;
+        color: #333333;
+        .switch-room {
+            width: 100%;
+            max-height: 390px;
+            display: flex;
+            flex-direction: column;
+            // 浅蓝色title
+            .title {
+                padding: 0 10px;
+                color: #025baa;
+                height: 45px;
+                background: rgba(2, 91, 170, 0.1);
+                font-size: 16px;
+                font-weight: 500;
+                color: #025baa;
+                line-height: 45px;
+            }
+            // 每个配电室出线明细信息
+            .info-container {
+                width: 100%;
+                flex: 1;
+                overflow: auto;
+                // 每个配电室出线明细
+                .info {
+                    width: 100%;
+                    padding: 15px;
+                    position: relative;
+                    background-color: #fff;
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: #666666;
+                    .name {
+                        font-size: 16px;
+                        height: 20px;
+                        line-height: 20px;
+                        font-weight: 500;
+                        color: #333333;
+                    }
+                    .specification,
+                    .loop,
+                    .floor {
+                        margin-top: 8px;
+                        width: 100%;
+                        display: flex;
+                        height: auto;
+                        .label {
+                            width: 70px;
+                            min-width: 70px;
+                            max-width: 70px;
+                        }
+                        .value {
+                            flex: 1;
+                        }
+                    }
+                    .floor .label > span {
+                        display: inline-block;
+                        margin-left: 5px;
+                    }
+
+                    // 底部1px边框
+                    .divider {
+                        width: calc(100% - 30px);
+                        height: 1px;
+                        left: 15px;
+                        bottom: 0;
+                        position: absolute;
+                        background: #e6e6e6;
+                    }
+                }
+                .load-more {
+                    width: 80px;
+                    height: 25px;
+                    line-height: 25px;
+                    text-align: center;
+                    margin: 10px auto;
+                    color: #025baa;
+                    background: #e5eef6;
+                }
+            }
+        }
+    }
+    // 空状态
+    .m-empty {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        /deep/ .van-empty__image {
+            display: flex;
+            justify-content: center;
+            align-items: flex-end;
+            img {
+                width: auto;
+                height: auto;
+            }
+        }
+    }
+    // 筛选弹窗
+    .m-popup-container {
+        width: 80%;
+        height: 100%;
+        padding: 55px 20px 10px 20px;
+        .m-popup {
+            width: 100%;
+            height: calc(100% - 80px);
+            display: flex;
+            flex-direction: column;
+            .title {
+                font-size: 16px;
+                font-weight: 500;
+                color: #333333;
+                margin-bottom: 15px;
+            }
+            // 配电室
+            .system {
+                width: 100%;
+                height: auto;
+                // 专业系统按钮
+                .system-btn-container {
+                    display: flex;
+                    width: 100%;
+                    flex-wrap: wrap;
+                    flex-flow: wrap;
+                    .system-btn {
+                        width: 100% !important;
+                        min-width: 100% !important;
+                        max-width: 100% !important;
+                        height: 40px;
+                        box-sizing: border-box;
+                        padding: 10px 10px 10px 0;
+                        .m-btn {
+                            width: 100%;
+                            height: 32px !important;
+                            text-align: center;
+                            background: #eff0f1;
+                            border-radius: 2px;
+                        }
+                    }
+                }
+                .active {
+                    background-color: #025baa !important;
+                    color: #fff;
+                }
+            }
+            // 设备设施
+            .sbss {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                overflow: auto;
+                .title {
+                    width: 100%;
+                    height: 25px;
+                }
+                .system-btn-container {
+                    width: 100%;
+                    height: 40px;
+                    flex: 1;
+                    overflow: auto;
+                    .system-btn {
+                        width: 100% !important;
+                        box-sizing: border-box;
+                        background: #eff0f1 !important;
+                        margin: 10px 0 10px 0;
+                        .m-btn {
+                            display: block !important;
+                            width: 100% !important;
+                            height: 32px !important;
+                            text-align: center;
+                            background: #eff0f1;
+                            border-radius: 2px;
+                        }
+                    }
+                }
+                .active {
+                    background-color: #025baa !important;
+                    color: #fff;
+                }
+                .load-more {
+                    width: 80px;
+                    height: 25px;
+                    line-height: 25px;
+                    text-align: center;
+                    margin: 0 auto;
+                    color: #025baa;
+                    background: #e5eef6;
+                }
+            }
+            .divider {
+                border-bottom: 1px solid #e6e6e6;
+                margin: 20px 0;
+            }
+            .footer {
+                position: absolute;
+                bottom: 30px;
+                right: 0;
+                width: 100%;
+                height: 35px;
+                display: flex;
+                justify-content: space-around;
+                .van-button {
+                    width: 40%;
+                    height: 100%;
+                    max-width: 40%;
+                    min-width: 40%;
+                }
+            }
+        }
+    }
 }
 </style>