Explorar el Código

图片预览、设备设施style

guoxiaohuan hace 4 años
padre
commit
b817efb726

+ 4 - 0
README.md

@@ -35,3 +35,7 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
 ### 轮播组件
 
 #### <rotation :rotationImg='rotationImg'></rotation> rotationImg 为轮播数组
+
+### 机房区域-图片预览
+
+#### <pic-large :imgUrl='imgUrl'></pic-large> imgUrl 图片数组

+ 8 - 4
src/assets/css/rotation.css

@@ -25,6 +25,7 @@
   height: 24px;
   font-size: 16px;
   font-family: MicrosoftYaHeiSemibold;
+  font-weight: bold;
   color: #1f2429;
   line-height: 21px;
 }
@@ -40,6 +41,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  cursor: pointer;
 }
 .overview .view-title .view-button img {
   display: inline-block;
@@ -66,7 +68,7 @@
   position: relative;
 }
 .overview .view-box .view-left .lb-left .lb-icon {
-  z-index: 99999;
+  z-index: 99;
   position: absolute;
   top: 0;
   right: 2px;
@@ -76,7 +78,7 @@
   border-radius: 0px 4px 0px 4px;
 }
 .overview .view-box .view-left .lb-left .lb-img {
-  z-index: 999999;
+  z-index: 101;
   width: 16px;
   height: 16px;
   position: absolute;
@@ -108,6 +110,7 @@
   height: 22px;
   font-size: 14px;
   font-family: MicrosoftYaHeiSemibold;
+  font-weight: bold;
   color: #025baa;
   line-height: 19px;
 }
@@ -182,7 +185,7 @@
   position: relative;
 }
 .overview .view-box .view-right .view-right-box .lb-right .lb-icon {
-  z-index: 99999;
+  z-index: 99;
   position: absolute;
   top: 0;
   right: 2px;
@@ -192,7 +195,7 @@
   border-radius: 0px 4px 0px 4px;
 }
 .overview .view-box .view-right .view-right-box .lb-right .lb-img {
-  z-index: 999999;
+  z-index: 101;
   width: 16px;
   height: 16px;
   position: absolute;
@@ -224,6 +227,7 @@
   height: 22px;
   font-size: 14px;
   font-family: MicrosoftYaHeiSemibold;
+  font-weight: bold;
   color: #025baa;
   line-height: 19px;
 }

+ 8 - 4
src/assets/css/rotation.less

@@ -22,6 +22,7 @@
                 height: 24px;
                 font-size: 16px;
                 font-family: MicrosoftYaHeiSemibold;
+                font-weight: bold;
                 color: #1f2429;
                 line-height: 21px;
             }
@@ -38,6 +39,7 @@
             display: flex;
             align-items: center;
             justify-content: center;
+            cursor: pointer;
             img {
                 display: inline-block;
                 height: 16px;
@@ -62,7 +64,7 @@
                 margin-bottom: 10px;
                 position: relative;
                 .lb-icon {
-                    z-index: 99999;
+                    z-index: 99;
                     position: absolute;
                     top: 0;
                     right: 2px;
@@ -72,7 +74,7 @@
                     border-radius: 0px 4px 0px 4px;
                 }
                 .lb-img {
-                    z-index: 999999;
+                    z-index: 101;
                     width: 16px;
                     height: 16px;
                     position: absolute;
@@ -103,6 +105,7 @@
                         height: 22px;
                         font-size: 14px;
                         font-family: MicrosoftYaHeiSemibold;
+                        font-weight: bold;
                         color: #025baa;
                         line-height: 19px;
                     }
@@ -177,7 +180,7 @@
                     margin-bottom: 10px;
                     position: relative;
                     .lb-icon {
-                        z-index: 99999;
+                        z-index: 99;
                         position: absolute;
                         top: 0;
                         right: 2px;
@@ -187,7 +190,7 @@
                         border-radius: 0px 4px 0px 4px;
                     }
                     .lb-img {
-                        z-index: 999999;
+                        z-index: 101;
                         width: 16px;
                         height: 16px;
                         position: absolute;
@@ -218,6 +221,7 @@
                             height: 22px;
                             font-size: 14px;
                             font-family: MicrosoftYaHeiSemibold;
+                            font-weight: bold;
                             color: #025baa;
                             line-height: 19px;
                         }

+ 5 - 0
src/components/PicLarge/index.js

@@ -0,0 +1,5 @@
+import PicLarge from './src/picLarge.vue'
+PicLarge.install = function(Vue) {
+    Vue.component(PicLarge.name, PicLarge)
+}
+export default PicLarge

+ 103 - 0
src/components/PicLarge/src/picLarge.vue

@@ -0,0 +1,103 @@
+<template>
+    <el-dialog title='图片预览' width='1080px' :visible.sync='dialogVisible' :close-on-click-modal='false'>
+        <div class='pic-list'>
+            <div class='pic-left'>
+                <ul v-for='(item,index) in imgUrl' :key='index'>
+                    <li @click='getIndex(item.url)'>
+                        <img :src='item.url' />
+                    </li>
+                    <span>{{item.name}}</span>
+                </ul>
+            </div>
+            <div class='pic-right'>
+                <div class='pic-right-img'>
+                    <img :src='ImgUrl' />
+                </div>
+            </div>
+        </div>
+    </el-dialog>
+</template>
+<script>
+export default {
+    name: 'PicLarge',
+    props: ['imgUrl'],
+    data() {
+        return {
+            dialogVisible: false,
+            ImgUrl: require('../../../assets/images/matter_pop3.png')
+        }
+    },
+    methods: {
+        open() {
+            this.dialogVisible = true
+        },
+        getIndex(imgUrl) {
+            this.ImgUrl = imgUrl
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.pic-list {
+    width: 100%;
+    height: 600px;
+    display: flex;
+    justify-content: space-between;
+    .pic-left {
+        width: 230px;
+        background: #ffffff;
+        overflow: auto;
+        margin-top: 20px;
+        margin-bottom: 20px;
+        ul {
+            margin-bottom: 0;
+            width: 180px;
+            margin: 0 auto;
+
+            li {
+                width: 180px;
+                height: 135px;
+                border-radius: 4px;
+                border: 4px solid rgba(245, 246, 247, 1);
+                img {
+                    width: 100%;
+                    height: 100%;
+                    border-radius: 4px;
+                }
+            }
+            span {
+                height: 16px;
+                font-size: 12px;
+                font-family: MicrosoftYaHei;
+                color: rgba(31, 36, 41, 1);
+                line-height: 16px;
+                display: flex;
+                justify-content: center;
+                margin-top: 12px;
+                margin-bottom: 20px;
+            }
+        }
+    }
+    .pic-right {
+        flex: 1;
+        background: rgba(245, 246, 247, 1);
+        border-radius: 0px 0px 4px 0px;
+
+        padding: 20px 50px;
+        margin: auto auto;
+        .pic-right-img {
+            width: 720px;
+            height: 540px;
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+}
+</style>
+<style lang="less">
+.el-dialog__body {
+    padding: 0;
+}
+</style>

+ 3 - 1
src/main.js

@@ -22,9 +22,11 @@ import WdEditor from '@/components/Editor'
 Vue.use(WdEditor)
 
 import Rotation from '@/components/Rotation'
-console.log(Rotation)
 Vue.use(Rotation)
 
+import PicLarge from '@/components/PicLarge'
+Vue.use(PicLarge)
+
 new Vue({
     router,
     store,

+ 571 - 0
src/utils/plugins/components.js

@@ -1 +1,572 @@
+var system = [
+        {
+            name: '供电系统',
+            id: 1,
+            children: [
+                {
+                    label: '系统原理图',
+                    children: [],
+                },
+                {
+                    label: '变配电室内部设备清单',
+                    children: [],
+                },
+                {
+                    label: '楼层电井(间)控制商铺范围清单',
+                    children: [
+                        {
+                            label: 'BA楼宇智能化',
+                            id: 'GDQD1',
+                        },
+                        {
+                            label: '门禁管理(科松)',
+                            id: 'GDQD2',
+                        },
+                        {
+                            label: '视频监控',
+                            id: 'GDQD3',
+                        },
+                    ],
+                },
+                {
+                    label: '维保事项',
+                    children: [
+                        {
+                            label: '配电室内',
+                            id: 'GDWB1',
+                        },
+                        {
+                            label: '配电室外',
+                            id: 'GDWB2',
+                        },
+                    ],
+                },
+                {
+                    label: '维修事项',
+                    children: [
+                        {
+                            label: '配电室内',
+                            id: 'GDWX1',
+                        },
+                        {
+                            label: '配电室外',
+                            id: 'GDWX2',
+                        },
+                    ],
+                },
+                {
+                    label: '专维及其他事项',
+                    children: [
+                        {
+                            label: '专项维修',
+                            id: 'GDZW1',
+                        },
+                        {
+                            label: '其他事项',
+                            id: 'GDZW2',
+                        },
+                    ],
+                },
+                {
+                    label: '查看图纸',
+                    children: [],
+                },
+            ],
+        },
+        {
+            name: '暖通系统',
+            id: 2,
+            children: [
+                {
+                    label: '系统原理图',
+                    children: [
+                        {
+                            label: '空调系统原理图',
+                            id: 'NTYL1',
+                        },
+                        {
+                            label: '超市空调系统原理图',
+                            id: 'NTYL2',
+                        },
+                        {
+                            label: '分水器支路分布明细',
+                            id: 'NTYL3',
+                        },
+                        {
+                            label: '分水器支路分布图',
+                            id: 'NTYL4',
+                        },
+                    ],
+                },
+                {
+                    label: '主要设备清单',
+                    children: [
+                        {
+                            label: '冷热源机房内',
+                            id: 'NTQD1',
+                        },
+                        {
+                            label: '楼层末端',
+                            id: 'NTQD2',
+                        },
+                    ],
+                },
+                {
+                    label: '维保事项',
+                    children: [
+                        {
+                            label: '冷源机房内',
+                            id: 'NTWB1',
+                        },
+                        {
+                            label: '冷源机房外',
+                            id: 'NTWB2',
+                        },
+                    ],
+                },
+                {
+                    label: '维修事项',
+                    children: [
+                        {
+                            label: '冷源机房内',
+                            id: 'NTWX1',
+                        },
+                        {
+                            label: '冷源机房外',
+                            id: 'NTWX2',
+                        },
+                    ],
+                },
+                {
+                    label: '专维及其他事项',
+                    children: [
+                        {
+                            label: '专项维修',
+                            id: 'NTZW1',
+                        },
+                        {
+                            label: '其他事项',
+                            id: 'NTZW2',
+                        },
+                    ],
+                },
+                {
+                    label: '查看图纸',
+                    children: [],
+                },
+            ],
+        },
+        {
+            name: '消防系统',
+            id: 3,
+            children: [
+                {
+                    label: '系统原理图',
+                    children: [
+                        {
+                            label: '消防电系统原理示意图',
+                            id: 'XFYL1',
+                        },
+                        {
+                            label: '消防喷淋系统示意图',
+                            id: 'XFYL2',
+                        },
+                        {
+                            label: '消防窗喷系统示意图',
+                            id: 'XFYL3',
+                        },
+                        {
+                            label: '消防栓系统示意图',
+                            id: 'XFYL4',
+                        },
+                        {
+                            label: '消防泵房引出管路分布图',
+                            id: 'XFYL5',
+                        },
+                    ],
+                },
+                {
+                    label: '主要设备清单',
+                    children: [],
+                },
+                {
+                    label: '维保事项',
+                    children: [
+                        {
+                            label: '中控室/消防泵房内',
+                            id: 'XFWB1',
+                        },
+                        {
+                            label: '中控室/消防泵房外',
+                            id: 'XFWB2',
+                        },
+                    ],
+                },
+                {
+                    label: '维修事项',
+                    children: [
+                        {
+                            label: '中控室/消防泵房内',
+                            id: 'XFWX1',
+                        },
+                        {
+                            label: '中控室/消防泵房外',
+                            id: 'XFWX2',
+                        },
+                    ],
+                },
+                {
+                    label: '专维及其他事项',
+                    children: [
+                        {
+                            label: '专项维修',
+                            id: 'XFZW1',
+                        },
+                        {
+                            label: '其他事项',
+                            id: 'XFZW2',
+                        },
+                    ],
+                },
+                {
+                    label: '查看图纸',
+                    children: [],
+                },
+            ],
+        },
+        {
+            name: '弱电系统',
+            id: 4,
+            children: [
+                {
+                    label: '系统原理图',
+                    children: [
+                        {
+                            label: '视频监控系统原理图',
+                            id: 'RDYL1',
+                        },
+                        {
+                            label: '门禁管理系统原理图',
+                            id: 'RDYL2',
+                        },
+                        {
+                            label: 'BA楼宇智能化系统原理图',
+                            id: 'RDYL3',
+                        },
+                    ],
+                },
+                {
+                    label: '主要设备清单',
+                    children: [
+                        {
+                            label: 'BA楼宇智能化',
+                            id: 'RDQD1',
+                        },
+                        {
+                            label: '门禁管理',
+                            id: 'RDQD2',
+                        },
+                        {
+                            label: '视频监控',
+                            id: 'RDQD3',
+                        },
+                    ],
+                },
+                {
+                    label: '维保事项',
+                    children: [
+                        {
+                            label: '慧云机房内',
+                            id: 'RDWB1',
+                        },
+                        {
+                            label: '慧云机房外',
+                            id: 'RDWB2',
+                        },
+                    ],
+                },
+                {
+                    label: '维修事项',
+                    children: [
+                        {
+                            label: '慧云机房内',
+                            id: 'RDWX1',
+                        },
+                        {
+                            label: '慧云机房外',
+                            id: 'RDWX2',
+                        },
+                    ],
+                },
+                {
+                    label: '专维及其他事项',
+                    children: [
+                        {
+                            label: '专项维修',
+                            id: 'RDZW1',
+                        },
+                        {
+                            label: '其他事项',
+                            id: 'RDZW2',
+                        },
+                    ],
+                },
+                {
+                    label: '查看图纸',
+                    children: [],
+                },
+            ],
+        },
+        {
+            name: '给排水系统',
+            id: 5,
+            children: [
+                {
+                    label: '系统原理图',
+                    children: [
+                        {
+                            label: '给水系统原理示意图',
+                            id: 'GSYL1',
+                        },
+                        {
+                            label: '排水系统原理示意图',
+                            id: 'GSYL2',
+                        },
+                    ],
+                },
+                {
+                    label: '主要设备清单',
+                    children: [],
+                },
+                {
+                    label: '维保事项',
+                    children: [
+                        {
+                            label: '给水系统',
+                            id: 'GSQD1',
+                        },
+                        {
+                            label: '排水系统',
+                            id: 'GSQD2',
+                        },
+                    ],
+                },
+                {
+                    label: '维修事项',
+                    children: [
+                        {
+                            label: '给水系统',
+                            id: 'GSWX1',
+                        },
+                        {
+                            label: '排水系统',
+                            id: 'GSWX2',
+                        },
+                    ],
+                },
+                {
+                    label: '专维及其他事项',
+                    children: [
+                        {
+                            label: '给水系统专项维修',
+                            id: 'GSZW1',
+                        },
+                        {
+                            label: '排水系统专项维修',
+                            id: 'GSZW2',
+                        },
+                        {
+                            label: '其他事项',
+                            id: 'GSZW3',
+                        },
+                    ],
+                },
+                {
+                    label: '查看图纸',
+                    children: [],
+                },
+            ],
+        },
+        {
+            name: '电梯系统',
+            id: 6,
+            children: [
+                {
+                    label: '系统原理图',
+                    children: [
+                        {
+                            label: '扶梯原理图',
+                            id: 'DTYL1',
+                        },
+                        {
+                            label: '直梯原理图',
+                            id: 'DTYL2',
+                        },
+                    ],
+                },
+                {
+                    label: '主要设备清单',
+                    children: [],
+                },
+                {
+                    label: '维修及维保事项',
+                    children: [
+                        {
+                            label: '维保事项',
+                            id: 'DTWX1',
+                        },
+                        {
+                            label: '维修事项',
+                            id: 'DTWX2',
+                        },
+                    ],
+                },
+                {
+                    label: '专维及其他事项',
+                    children: [
+                        {
+                            label: '专项维修',
+                            id: 'DTZW1',
+                        },
+                        {
+                            label: '其他事项',
+                            id: 'DTZW2',
+                        },
+                    ],
+                },
+                {
+                    label: '查看图纸',
+                    children: [],
+                },
+            ],
+        },
+        {
+            name: '燃气系统',
+            id: 7,
+            children: [
+                {
+                    label: '系统原理图',
+                    children: [],
+                },
+                {
+                    label: '主要设备清单',
+                    children: [],
+                },
+                {
+                    label: '维修及维保事项',
+                    children: [
+                        {
+                            label: '维保事项',
+                            id: 'RQWX1',
+                        },
+                        {
+                            label: '维修事项',
+                            id: 'RQWX2',
+                        },
+                    ],
+                },
+                {
+                    label: '专维及其他事项',
+                    children: [
+                        {
+                            label: '专项维修',
+                            id: 'RQZW1',
+                        },
+                        {
+                            label: '其他事项',
+                            id: 'RQZW2',
+                        },
+                    ],
+                },
+                {
+                    label: '查看图纸',
+                    children: [],
+                },
+            ],
+        },
+        {
+            name: '土建系统',
+            id: 8,
+            children: [
+                {
+                    label: '建筑立面图',
+                    children: [
+                        {
+                            label: '西面外立面',
+                        },
+                        {
+                            label: '南面外立面',
+                        },
+                        {
+                            label: '东面外立面',
+                        },
+                        {
+                            label: '北面外立面',
+                        },
+                    ],
+                },
+                {
+                    label: '主要材料清单',
+                    children: [],
+                },
+                {
+                    label: '维修及维保事项',
+                    children: [
+                        {
+                            label: '维保事项',
+                            id: 'TJWB1',
+                        },
+                        {
+                            label: '维修事项',
+                            id: 'TJWB2',
+                        },
+                    ],
+                },
+                {
+                    label: '专维及其他事项',
+                    children: [
+                        {
+                            label: '专项维修',
+                            id: 'TJZW1',
+                        },
+                        {
+                            label: '其他事项',
+                            id: 'TJZW2',
+                        },
+                    ],
+                },
+                {
+                    label: '查看图纸',
+                    children: [],
+                },
+            ],
+        },
+    ],
+    floors = [
+        {
+            floorName: 'F4',
+            id: 'f4',
+        },
+        {
+            floorName: 'F3',
+            id: 'f3',
+        },
+        {
+            floorName: 'F2',
+            id: 'f2',
+        },
+        {
+            floorName: 'F1',
+            id: 'f1',
+        },
+        {
+            floorName: 'B1',
+            id: 'b1',
+        },
+        {
+            floorName: 'B2',
+            id: 'b2',
+        },
+    ]
 
+export { system, floors }

+ 65 - 47
src/views/equipment/eqDialog.vue

@@ -1,70 +1,88 @@
 <template>
-    <a-modal
-        class='modal'
-        v-model='visible'
-        :footer='null'
-        :title='`${systemName}-${dialogInfo.label}`'
-        @ok='handleOk'
-        :maskClosable='false'
-        width='100%'
-    >
-        <a-tabs
-            v-if='Object.keys(dialogInfo).length>0 && dialogInfo.children.length>0'
-            :default-active-key='dialogInfo.children[0].id'
-            size='small'
-            @change='fn'
-        >
-            <a-tab-pane v-for='(value,index) in dialogInfo.children' :key='"u"+index' :tab='`${value.label}`'>
-                <img v-if='value.id.slice(2,4)=="YL"' src='@/assets/imgs/eq.jpg' />
-                <tableList v-else></tableList>
-            </a-tab-pane>
-        </a-tabs>
-    </a-modal>
+    <div class='dialog-container'>
+        <el-dialog :title='`${systemName}-${dialogInfo.label}`' :visible.sync='visible' :fullscreen='true'>
+            <div class='top'></div>
+            <el-tabs v-model='activeName' @tab-click='handleClick' v-if='Object.keys(dialogInfo).length>0 && dialogInfo.children.length>0'>
+                <el-tab-pane v-for='(value,index) in dialogInfo.children' :key='"u"+index' :label='`${value.label}`' :name='`${value.id}`'>
+                    <div v-if='value.id.slice(2,4)=="YL"' style='width:100%;height:600px;overflow:hidden'>
+                        <rotation :rotationImg='rotationImg'></rotation>
+                    </div>
+                    <tableList v-else></tableList>
+                </el-tab-pane>
+            </el-tabs>
+        </el-dialog>
+    </div>
 </template>
-
 <script>
 import tableList from './table/eqListTable'
+
 export default {
+    props: ['systemName'],
     data() {
         return {
+            activeName: '',
             visible: false,
-            mode: 'top'
+            dialogInfo: {},
+            rotationImg: [require('@/assets/imgs/eq.jpg'), require('@/assets/imgs/survey_pop2.png'), require('@/assets/imgs/survey_pop1.png')]
         }
     },
-    props: ['dialogInfo', 'systemName'],
+    mounted() {},
     components: { tableList },
     methods: {
-        showModal() {
+        showModal(item) {
             this.visible = true
+            this.dialogInfo = item
+            if (Object.keys(this.dialogInfo).length > 0) {
+                this.activeName = this.dialogInfo.children[0].id
+                console.log(this.activeName)
+            }
         },
-        handleOk(e) {
-            console.log(e)
-            this.visible = false
-        },
-        fn(key) {
-            console.log(key)
+        handleClick(tab, event) {
+            console.log(tab, event)
         }
     }
 }
 </script>
-
-<style lang='less'>
-.modal {
-    .ant-tabs-bar {
-        border: none;
+<style lang="less" scoped>
+.top {
+    width: 1366px;
+    height: 1px;
+    background: rgba(0, 0, 0, 0.06);
+    margin-bottom: 20px;
+}
+</style>
+<style lang="less">
+.dialog-container {
+    .el-dialog__title {
+        font-size: 16px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: rgba(0, 0, 0, 0.85);
+        line-height: 24px;
     }
-    .ant-tabs-tab {
-        text-align: center;
-        background: rgba(255, 255, 255, 1);
-        border-radius: 0px 4px 4px 0px;
-        border: 1px solid rgba(217, 217, 217, 1);
-        font-size: 14px;
-        color: #1f2429;
-        margin: 0;
-        padding: 5px 15px !important;
+    .el-dialog__body {
+        padding: 0 24px;
+    }
+    .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
+    .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
+    .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
+    .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
+        padding-left: 16px;
     }
-    .ant-select {
-        margin-right: 12px;
+    .el-tabs--bottom .el-tabs__item.is-bottom:last-child,
+    .el-tabs--bottom .el-tabs__item.is-top:last-child,
+    .el-tabs--top .el-tabs__item.is-bottom:last-child,
+    .el-tabs--top .el-tabs__item.is-top:last-child {
+        padding-right: 16px;
+    }
+    .el-tabs__item {
+        padding: 5px 16px;
+        height: 30px;
+        line-height: 22px;
+        font-size: 14px;
+        font-family: MicrosoftYaHei;
+        color: rgba(31, 36, 41, 1);
+        border: 1px solid rgba(195, 199, 203, 1);
     }
 }
 </style>

+ 6 - 573
src/views/equipment/index.vue

@@ -32,7 +32,7 @@
             </div>
             <editList></editList>
         </div>
-        <eq-dialog ref='dialog' :systemName='systemName' :dialogInfo='dialogInfo'></eq-dialog>
+        <eq-dialog ref='dialog' :systemName='systemName'></eq-dialog>
     </div>
 </template>
 
@@ -42,580 +42,13 @@ 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'
 export default {
     data() {
         return {
-            system: [
-                {
-                    name: '供电系统',
-                    id: 1,
-                    children: [
-                        {
-                            label: '系统原理图',
-                            children: []
-                        },
-                        {
-                            label: '变配电室内部设备清单',
-                            children: []
-                        },
-                        {
-                            label: '楼层电井(间)控制商铺范围清单',
-                            children: [
-                                {
-                                    label: 'BA楼宇智能化',
-                                    id: 'GDQD1'
-                                },
-                                {
-                                    label: '门禁管理(科松)',
-                                    id: 'GDQD2'
-                                },
-                                {
-                                    label: '视频监控',
-                                    id: 'GDQD3'
-                                }
-                            ]
-                        },
-                        {
-                            label: '维保事项',
-                            children: [
-                                {
-                                    label: '配电室内',
-                                    id: 'GDWB1'
-                                },
-                                {
-                                    label: '配电室外',
-                                    id: 'GDWB2'
-                                }
-                            ]
-                        },
-                        {
-                            label: '维修事项',
-                            children: [
-                                {
-                                    label: '配电室内',
-                                    id: 'GDWX1'
-                                },
-                                {
-                                    label: '配电室外',
-                                    id: 'GDWX2'
-                                }
-                            ]
-                        },
-                        {
-                            label: '专维及其他事项',
-                            children: [
-                                {
-                                    label: '专项维修',
-                                    id: 'GDZW1'
-                                },
-                                {
-                                    label: '其他事项',
-                                    id: 'GDZW2'
-                                }
-                            ]
-                        },
-                        {
-                            label: '查看图纸',
-                            children: []
-                        }
-                    ]
-                },
-                {
-                    name: '暖通系统',
-                    id: 2,
-                    children: [
-                        {
-                            label: '系统原理图',
-                            children: [
-                                {
-                                    label: '空调系统原理图',
-                                    id: 'NTYL1'
-                                },
-                                {
-                                    label: '超市空调系统原理图',
-                                    id: 'NTYL2'
-                                },
-                                {
-                                    label: '分水器支路分布明细',
-                                    id: 'NTYL3'
-                                },
-                                {
-                                    label: '分水器支路分布图',
-                                    id: 'NTYL4'
-                                }
-                            ]
-                        },
-                        {
-                            label: '主要设备清单',
-                            children: [
-                                {
-                                    label: '冷热源机房内',
-                                    id: 'NTQD1'
-                                },
-                                {
-                                    label: '楼层末端',
-                                    id: 'NTQD2'
-                                }
-                            ]
-                        },
-                        {
-                            label: '维保事项',
-                            children: [
-                                {
-                                    label: '冷源机房内',
-                                    id: 'NTWB1'
-                                },
-                                {
-                                    label: '冷源机房外',
-                                    id: 'NTWB2'
-                                }
-                            ]
-                        },
-                        {
-                            label: '维修事项',
-                            children: [
-                                {
-                                    label: '冷源机房内',
-                                    id: 'NTWX1'
-                                },
-                                {
-                                    label: '冷源机房外',
-                                    id: 'NTWX2'
-                                }
-                            ]
-                        },
-                        {
-                            label: '专维及其他事项',
-                            children: [
-                                {
-                                    label: '专项维修',
-                                    id: 'NTZW1'
-                                },
-                                {
-                                    label: '其他事项',
-                                    id: 'NTZW2'
-                                }
-                            ]
-                        },
-                        {
-                            label: '查看图纸',
-                            children: []
-                        }
-                    ]
-                },
-                {
-                    name: '消防系统',
-                    id: 3,
-                    children: [
-                        {
-                            label: '系统原理图',
-                            children: [
-                                {
-                                    label: '消防电系统原理示意图',
-                                    id: 'XFYL1'
-                                },
-                                {
-                                    label: '消防喷淋系统示意图',
-                                    id: 'XFYL2'
-                                },
-                                {
-                                    label: '消防窗喷系统示意图',
-                                    id: 'XFYL3'
-                                },
-                                {
-                                    label: '消防栓系统示意图',
-                                    id: 'XFYL4'
-                                },
-                                {
-                                    label: '消防泵房引出管路分布图',
-                                    id: 'XFYL5'
-                                }
-                            ]
-                        },
-                        {
-                            label: '主要设备清单',
-                            children: []
-                        },
-                        {
-                            label: '维保事项',
-                            children: [
-                                {
-                                    label: '中控室/消防泵房内',
-                                    id: 'XFWB1'
-                                },
-                                {
-                                    label: '中控室/消防泵房外',
-                                    id: 'XFWB2'
-                                }
-                            ]
-                        },
-                        {
-                            label: '维修事项',
-                            children: [
-                                {
-                                    label: '中控室/消防泵房内',
-                                    id: 'XFWX1'
-                                },
-                                {
-                                    label: '中控室/消防泵房外',
-                                    id: 'XFWX2'
-                                }
-                            ]
-                        },
-                        {
-                            label: '专维及其他事项',
-                            children: [
-                                {
-                                    label: '专项维修',
-                                    id: 'XFZW1'
-                                },
-                                {
-                                    label: '其他事项',
-                                    id: 'XFZW2'
-                                }
-                            ]
-                        },
-                        {
-                            label: '查看图纸',
-                            children: []
-                        }
-                    ]
-                },
-                {
-                    name: '弱电系统',
-                    id: 4,
-                    children: [
-                        {
-                            label: '系统原理图',
-                            children: [
-                                {
-                                    label: '视频监控系统原理图',
-                                    id: 'RDYL1'
-                                },
-                                {
-                                    label: '门禁管理系统原理图',
-                                    id: 'RDYL2'
-                                },
-                                {
-                                    label: 'BA楼宇智能化系统原理图',
-                                    id: 'RDYL3'
-                                }
-                            ]
-                        },
-                        {
-                            label: '主要设备清单',
-                            children: [
-                                {
-                                    label: 'BA楼宇智能化',
-                                    id: 'RDQD1'
-                                },
-                                {
-                                    label: '门禁管理',
-                                    id: 'RDQD2'
-                                },
-                                {
-                                    label: '视频监控',
-                                    id: 'RDQD3'
-                                }
-                            ]
-                        },
-                        {
-                            label: '维保事项',
-                            children: [
-                                {
-                                    label: '慧云机房内',
-                                    id: 'RDWB1'
-                                },
-                                {
-                                    label: '慧云机房外',
-                                    id: 'RDWB2'
-                                }
-                            ]
-                        },
-                        {
-                            label: '维修事项',
-                            children: [
-                                {
-                                    label: '慧云机房内',
-                                    id: 'RDWX1'
-                                },
-                                {
-                                    label: '慧云机房外',
-                                    id: 'RDWX2'
-                                }
-                            ]
-                        },
-                        {
-                            label: '专维及其他事项',
-                            children: [
-                                {
-                                    label: '专项维修',
-                                    id: 'RDZW1'
-                                },
-                                {
-                                    label: '其他事项',
-                                    id: 'RDZW2'
-                                }
-                            ]
-                        },
-                        {
-                            label: '查看图纸',
-                            children: []
-                        }
-                    ]
-                },
-                {
-                    name: '给排水系统',
-                    id: 5,
-                    children: [
-                        {
-                            label: '系统原理图',
-                            children: [
-                                {
-                                    label: '给水系统原理示意图',
-                                    id: 'GSYL1'
-                                },
-                                {
-                                    label: '排水系统原理示意图',
-                                    id: 'GSYL2'
-                                }
-                            ]
-                        },
-                        {
-                            label: '主要设备清单',
-                            children: []
-                        },
-                        {
-                            label: '维保事项',
-                            children: [
-                                {
-                                    label: '给水系统',
-                                    id: 'GSQD1'
-                                },
-                                {
-                                    label: '排水系统',
-                                    id: 'GSQD2'
-                                }
-                            ]
-                        },
-                        {
-                            label: '维修事项',
-                            children: [
-                                {
-                                    label: '给水系统',
-                                    id: 'GSWX1'
-                                },
-                                {
-                                    label: '排水系统',
-                                    id: 'GSWX2'
-                                }
-                            ]
-                        },
-                        {
-                            label: '专维及其他事项',
-                            children: [
-                                {
-                                    label: '给水系统专项维修',
-                                    id: 'GSZW1'
-                                },
-                                {
-                                    label: '排水系统专项维修',
-                                    id: 'GSZW2'
-                                },
-                                {
-                                    label: '其他事项',
-                                    id: 'GSZW3'
-                                }
-                            ]
-                        },
-                        {
-                            label: '查看图纸',
-                            children: []
-                        }
-                    ]
-                },
-                {
-                    name: '电梯系统',
-                    id: 6,
-                    children: [
-                        {
-                            label: '系统原理图',
-                            children: [
-                                {
-                                    label: '扶梯原理图',
-                                    id: 'DTYL1'
-                                },
-                                {
-                                    label: '直梯原理图',
-                                    id: 'DTYL2'
-                                }
-                            ]
-                        },
-                        {
-                            label: '主要设备清单',
-                            children: []
-                        },
-                        {
-                            label: '维修及维保事项',
-                            children: [
-                                {
-                                    label: '维保事项',
-                                    id: 'DTWX1'
-                                },
-                                {
-                                    label: '维修事项',
-                                    id: 'DTWX2'
-                                }
-                            ]
-                        },
-                        {
-                            label: '专维及其他事项',
-                            children: [
-                                {
-                                    label: '专项维修',
-                                    id: 'DTZW1'
-                                },
-                                {
-                                    label: '其他事项',
-                                    id: 'DTZW2'
-                                }
-                            ]
-                        },
-                        {
-                            label: '查看图纸',
-                            children: []
-                        }
-                    ]
-                },
-                {
-                    name: '燃气系统',
-                    id: 7,
-                    children: [
-                        {
-                            label: '系统原理图',
-                            children: []
-                        },
-                        {
-                            label: '主要设备清单',
-                            children: []
-                        },
-                        {
-                            label: '维修及维保事项',
-                            children: [
-                                {
-                                    label: '维保事项',
-                                    id: 'RQWX1'
-                                },
-                                {
-                                    label: '维修事项',
-                                    id: 'RQWX2'
-                                }
-                            ]
-                        },
-                        {
-                            label: '专维及其他事项',
-                            children: [
-                                {
-                                    label: '专项维修',
-                                    id: 'RQZW1'
-                                },
-                                {
-                                    label: '其他事项',
-                                    id: 'RQZW2'
-                                }
-                            ]
-                        },
-                        {
-                            label: '查看图纸',
-                            children: []
-                        }
-                    ]
-                },
-                {
-                    name: '土建系统',
-                    id: 8,
-                    children: [
-                        {
-                            label: '建筑立面图',
-                            children: [
-                                {
-                                    label: '西面外立面'
-                                },
-                                {
-                                    label: '南面外立面'
-                                },
-                                {
-                                    label: '东面外立面'
-                                },
-                                {
-                                    label: '北面外立面'
-                                }
-                            ]
-                        },
-                        {
-                            label: '主要材料清单',
-                            children: []
-                        },
-                        {
-                            label: '维修及维保事项',
-                            children: [
-                                {
-                                    label: '维保事项',
-                                    id: 'TJWB1'
-                                },
-                                {
-                                    label: '维修事项',
-                                    id: 'TJWB2'
-                                }
-                            ]
-                        },
-                        {
-                            label: '专维及其他事项',
-                            children: [
-                                {
-                                    label: '专项维修',
-                                    id: 'TJZW1'
-                                },
-                                {
-                                    label: '其他事项',
-                                    id: 'TJZW2'
-                                }
-                            ]
-                        },
-                        {
-                            label: '查看图纸',
-                            children: []
-                        }
-                    ]
-                }
-            ],
+            system,
+            floors,
             everySystem: [],
-            floors: [
-                {
-                    floorName: 'F4',
-                    id: 'f4'
-                },
-                {
-                    floorName: 'F3',
-                    id: 'f3'
-                },
-                {
-                    floorName: 'F2',
-                    id: 'f2'
-                },
-                {
-                    floorName: 'F1',
-                    id: 'f1'
-                },
-                {
-                    floorName: 'B1',
-                    id: 'b1'
-                },
-                {
-                    floorName: 'B2',
-                    id: 'b2'
-                }
-            ],
             systemId: 1,
             systemName: '供电系统',
             floorInfo: {
@@ -635,8 +68,8 @@ export default {
             this.floorInfo = item
         },
         dialogVisible(eve) {
-            this.dialogInfo = eve
-            this.$refs.dialog.showModal()
+            this.$refs.dialog.showModal(eve)
+            // this.dialogInfo = eve
         }
     },
     mounted() {

+ 59 - 0
src/views/equipment/wbsxDialog.vue

@@ -0,0 +1,59 @@
+<template>
+    <el-dialog :title='`${systemName}-${dialogInfo.label}`' :visible.sync='visible' :fullscreen='true'>
+        <div class='top'></div>
+        <a-tabs
+            v-if='Object.keys(dialogInfo).length>0 && dialogInfo.children.length>0'
+            :default-active-key='dialogInfo.children[0].id'
+            size='small'
+            @change='fn'
+        >
+            <a-tab-pane v-for='(value,index) in dialogInfo.children' :key='"u"+index' :tab='`${value.label}`'>
+                <img v-if='value.id.slice(2,4)=="YL"' src='@/assets/imgs/eq.jpg' />
+                <tableList v-else></tableList>
+            </a-tab-pane>
+        </a-tabs>
+    </el-dialog>
+</template>
+<script>
+import tableList from './table/eqListTable'
+
+export default {
+    props: ['dialogInfo', 'systemName'],
+    data() {
+        return {
+            visible: false
+        }
+    },
+    components: { tableList },
+    methods: {
+        showModal() {
+            this.visible = true
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.top {
+    width: 1366px;
+    height: 1px;
+    background: rgba(0, 0, 0, 0.06);
+}
+</style>
+<style lang="less">
+.ant-tabs-bar {
+    border: none;
+}
+.ant-tabs-tab {
+    text-align: center;
+    background: rgba(255, 255, 255, 1);
+    border-radius: 0px 4px 4px 0px;
+    border: 1px solid rgba(217, 217, 217, 1);
+    font-size: 14px;
+    color: #1f2429;
+    margin: 0;
+    padding: 5px 15px !important;
+}
+.ant-select {
+    margin-right: 12px;
+}
+</style>

+ 20 - 8
src/views/floorFunc/index.vue

@@ -3,14 +3,16 @@
         <div class='eq-title'>
             <span>{{floorInfo.floorName}}</span>
         </div>
-        <floorMap></floorMap>
-        <floor-list :floors='floors' @emitFloor='emitFloor'></floor-list>
-        <bottomLayer></bottomLayer>
-        <div class='floorFunc'>
-            <!-- <floorMap></floorMap>楼层功能 -->
-            <a-button type='primary' @click='legendClik'>点击出现编辑图例备注弹框</a-button>
-            <legend-remarks ref='EditdMarks'></legend-remarks>
-        </div>
+        <!-- <floorMap></floorMap> -->
+        <!-- <floor-list :floors='floors' @emitFloor='emitFloor'></floor-list> -->
+        <!-- <bottomLayer></bottomLayer> -->
+        <!-- <floorMap></floorMap>楼层功能 -->
+        <a-button type='primary' @click='legendClik'>点击出现编辑图例备注弹框</a-button>
+        <br />
+        <a-button type='primary' @click='picClik'>点击出现图片预览</a-button>
+
+        <legend-remarks ref='EditdMarks'></legend-remarks>
+        <pic-large :imgUrl='imgUrl' ref='pic'></pic-large>
     </div>
 </template>
 <script>
@@ -23,6 +25,13 @@ export default {
     components: { floorMap, floorList, bottomLayer, LegendRemarks },
     data() {
         return {
+            imgUrl: [
+                { url: require('@/assets/images/matter_pop3.png'), name: '图片名称1.png' },
+                { url: require('@/assets/images/survey_map.png'), name: '图片名称1.png' },
+                { url: require('@/assets/images/matter_pop3.png'), name: '图片名称1.png' },
+                { url: require('@/assets/images/survey_overlook.png'), name: '图片名称1.png' },
+                { url: require('@/assets/images/survey_project_btn.png'), name: '图片名称1.png' }
+            ],
             floors: [
                 {
                     floorName: 'F3',
@@ -57,6 +66,9 @@ export default {
         },
         emitFloor(item) {
             this.floorInfo = item
+        },
+        picClik() {
+            this.$refs.pic.open()
         }
     },
     mounted() {}

+ 12 - 6
src/views/overview/index.vue

@@ -19,8 +19,8 @@
             <div class='view-left'>
                 <div class='lb-left'>
                     <rotation :rotationImg='rotationImg'></rotation>
-                    <div class='lb-icon'></div>
-                    <img class='lb-img' src='../../assets/imgs/open1.svg' alt />
+                    <div class='lb-icon' @click='picClick'></div>
+                    <img class='lb-img' @click='picClick' src='../../assets/imgs/open1.svg' alt />
                 </div>
                 <div class='lb-bottom'>
                     <nav>
@@ -67,8 +67,8 @@
                 <div class='view-right-box'>
                     <div class='lb-right'>
                         <rotation :rotationImg='rotationImg'></rotation>
-                        <div class='lb-icon'></div>
-                        <img class='lb-img' src='../../assets/imgs/open1.svg' alt />
+                        <div class='lb-icon' @click='picClick'></div>
+                        <img class='lb-img' @click='picClick' src='../../assets/imgs/open1.svg' alt />
                     </div>
                     <div class='lb-right-bottom'>
                         <nav>
@@ -86,6 +86,7 @@
                 </div>
             </div>
         </div>
+        <PicModal ref='picModal'></PicModal>
     </div>
     <!-- <div class='view-right-bottom' v-for='(item,index) in rightA' :key='index'>
                             <div class='view-right-bottom-l'>{{item.type}}</div>
@@ -157,6 +158,7 @@
     </div>-->
 </template>
 <script>
+import PicModal from './picModal'
 export default {
     data() {
         return {
@@ -183,9 +185,13 @@ export default {
             ]
         }
     },
-    methods: {},
+    methods: {
+        picClick() {
+            this.$refs.picModal.showModal()
+        }
+    },
     components: {
-        // Rotation
+        PicModal
     }
 }
 </script>

+ 55 - 0
src/views/overview/picModal.vue

@@ -0,0 +1,55 @@
+<template>
+    <el-dialog :visible.sync='dialogVisible' width='90%' :close-on-click-modal='false' :show-close='false'>
+        <rotation :rotationImg='rotationImg' style='height:600px;'></rotation>
+        <span class='close' @click='close'>X</span>
+    </el-dialog>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            dialogVisible: false,
+            mode: 'top',
+            rotationImg: [
+                require('@/assets/imgs/survey_pop1.png'),
+                require('@/assets/imgs/survey_pop2.png'),
+                require('@/assets/imgs/survey_pop1.png')
+            ]
+        }
+    },
+    methods: {
+        showModal() {
+            this.dialogVisible = true
+        },
+        close() {
+            this.dialogVisible = false
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.close {
+    display: block;
+    position: absolute;
+    right: -50px;
+    font-size: 20px;
+    color: #fff;
+    top: -120px;
+    z-index: 10;
+    cursor: pointer;
+}
+</style>
+<style lang='less'>
+.el-dialog {
+    height: 600px;
+    position: relative;
+    .el-dialog__header {
+        padding: 0;
+    }
+    .el-dialog__body {
+        padding: 0;
+    }
+}
+</style>