yunxing %!s(int64=4) %!d(string=hai) anos
pai
achega
61f5aa9c8d
Modificáronse 2 ficheiros con 154 adicións e 6 borrados
  1. 13 2
      src/components/systemMenu.vue
  2. 141 4
      src/views/equipmentFacilities/index.vue

+ 13 - 2
src/components/systemMenu.vue

@@ -9,6 +9,7 @@
 <script>
 /**
  * 设备设施左侧菜单
+ * 点击后,传回父组件, text, categoryId, smsxt  三个字段
  */
 export default {
     name: 'systemMenu',
@@ -35,13 +36,14 @@ export default {
         /**
          * 点击系统,进行切换,并传回 父组件选中系统值
          */
-        changeSystem(system) {
+        changeSystem({ text, categoryId, smsxt }) {
             this.systemData.map((item) => {
                 item.active = false
-                if (item.categoryId === system.categoryId) {
+                if (item.categoryId === categoryId) {
                     item.active = true
                 }
             })
+            this.$emit('chooseSystem', { text, categoryId, smsxt })
         },
     },
 }
@@ -54,11 +56,20 @@ export default {
     background-color: #f5f6f7;
     flex-direction: column;
     text-align: center;
+    font-size: 14px;
+    font-weight: 400;
+    color: #666666;
     .system {
         flex: 1;
         display: flex;
         flex-direction: column;
         justify-content: center;
+        i {
+            margin-bottom: 10px;
+        }
+        i:before {
+            font-size: 20px;
+        }
     }
     // 激活的系统图标颜色
     .active {

+ 141 - 4
src/views/equipmentFacilities/index.vue

@@ -1,21 +1,121 @@
 <template>
     <div class='equipment-facilities'>
-        <SystemMenu class='left' />
-        <div class='right'></div>
+        <!-- 左侧菜单 -->
+        <SystemMenu class='left' @chooseSystem='changeSystem' />
+        <div class='right'>
+            <div class='top'>
+                <!-- <van-cell :title='`消防电系统原理示意图`' :border='false' is-link :value='`19条`' @click='handleClick' />
+                <van-cell :title='`消防喷淋系统示意图`' :border='false' is-link value='无' @click='handleClick' />
+                <van-cell :title='`消防窗喷系统示意图`' :border='false' is-link value='无' @click='handleClick' />
+                <van-cell :title='`配电室低压柜及出线明细`' :border='false' is-link value='无' @click='handleClick' />
+                <van-cell :title='`消防泵房引出管路分布图`' :border='false' is-link value='无' @click='handleClick' />
+                <van-cell :title='`楼层分布+其他数据`' :border='false' is-link value='无' @click='handleClick' />-->
+                <van-cell
+                    v-for='({text},index ) in listData[smsxt]'
+                    :key='index'
+                    :title='text'
+                    :border='false'
+                    is-link
+                    value='无'
+                    @click='handleClick'
+                />
+            </div>
+            <!-- 分割线 -->
+            <div class='divider'></div>
+            <!-- 设备卡片 -->
+            <div class='card-container'>
+                <div class='card' v-for='i in 5' :key='i'></div>
+            </div>
+        </div>
     </div>
 </template>
 <script>
+import Vue from 'vue'
+import { Cell } from 'vant'
+Vue.use(Cell)
 import SystemMenu from '@/components/systemMenu'
 export default {
     name: 'EquipmentFacilities',
     props: {},
     data() {
-        return {}
+        return {
+            smsxt: '1001', //系统值,默认供电系统
+            listData: {
+                //上部列表数据
+                1001: [
+                    //供电
+                    { text: '供电系统原理图', id: '' },
+                    { text: '机房平面布置图', id: '' },
+                    { text: '配电室低压柜及出现明细', id: '' },
+                    { text: '楼层分布', id: '' },
+                    { text: '电井控制商铺范围', id: '' },
+                ],
+                1002: [
+                    //暖通
+                    { text: '空调系统原理图', id: '' },
+                    { text: '分水器之路分布图', id: '' },
+                    { text: '机房平面布置图', id: '' },
+                    { text: '楼层分布', id: '' },
+                ],
+                1003: [
+                    //消防
+                    { text: '消防电系统原理示意图', id: '' },
+                    { text: '消防喷淋系统示意图', id: '' },
+                    { text: '消防窗喷系统示意图', id: '' },
+                    { text: '消火栓系统示意图', id: '' },
+                    { text: '消防泵房引出管理分布图', id: '' },
+                    { text: '机房平面布置图', id: '' },
+                    { text: '楼层分布+附加数据', id: '' },
+                ],
+                1004: [
+                    //弱电
+                    { text: '门禁管理系统原理图', id: '' },
+                    { text: 'BA楼宇智能化系统原理图', id: '' },
+                    { text: '机房平面布置图', id: '' },
+                    { text: '楼层分布', id: '' },
+                ],
+                1005: [
+                    //给排水
+                    { text: '给水系统原理示意图', id: '' },
+                    { text: '排水系统原理示意图', id: '' },
+                    { text: '机房平面布置图', id: '' },
+                    { text: '楼层分布', id: '' },
+                ],
+                1006: [
+                    //电梯
+                    { text: '扶梯原理图', id: '' },
+                    { text: '直梯原理图', id: '' },
+                    { text: '楼层分布', id: '' },
+                ],
+                1007: [
+                    // 燃气
+                    { text: '燃气系统原理示意图', id: '' },
+                    { text: '楼层分布', id: '' },
+                ],
+                1008: [
+                    // 土建
+                    { text: '建筑立面图', id: '' },
+                    { text: '石材铺装', id: '' },
+                ],
+            },
+        }
     },
     components: { SystemMenu },
     beforeMount() {},
     mounted() {},
-    methods: {},
+    methods: {
+        /**
+         * 左侧菜单切换事件
+         * @param { String } text 系统名称
+         * @param { String } category 系统拼音简称  NTXT ...
+         * @param { String }  smsxt 系统id? 1001 - 1008
+         */
+        changeSystem({ text, categoryId, smsxt }) {
+            console.log(text, categoryId, smsxt)
+            this.smsxt = smsxt
+        },
+        handleClick() {},
+    },
 }
 </script>
 <style lang='less' scoped>
@@ -31,6 +131,43 @@ export default {
     .right {
         flex: 1;
         height: 100%;
+        padding: 16px 16px 16px 12px;
+        overflow: auto;
+        .top {
+            width: 100%;
+            /deep/ .van-cell {
+                font-size: 14px;
+                font-weight: 400;
+                color: #333333;
+                background: #f8f9fa;
+                border-radius: 4px;
+                margin-bottom: 4px;
+                .van-cell__value {
+                    width: 40px;
+                    flex: none;
+                }
+            }
+        }
+        .divider {
+            border-bottom: 1px solid #e6e6e6;
+            margin: 20px 0;
+        }
+        .card-container {
+            width: 100%;
+            display: flex;
+            flex-wrap: wrap;
+            flex-flow: wrap;
+            .card {
+                flex: 1;
+                width: 48%;
+                margin: 2% 1%;
+                min-width: 48%; // 加入这两个后每个item的宽度就生效了
+                max-width: 48%; // 加入这两个后每个item的宽度就生效了
+                height: 100px;
+                border: 1px solid #2bad88;
+                border-radius: 4px;
+            }
+        }
     }
 }
 </style>