Forráskód Böngészése

其他事项首页、二级页面、三级页面、综合事项弹框

guoxiaohuan 4 éve
szülő
commit
04b6e708f6

A különbségek nem kerülnek megjelenítésre, a fájl túl nagy
+ 17 - 0
src/assets/imgs/fzyf.svg


BIN
src/assets/imgs/matter_floorB2.png


A különbségek nem kerülnek megjelenítésre, a fájl túl nagy
+ 16 - 0
src/assets/imgs/zhsx.svg


A különbségek nem kerülnek megjelenítésre, a fájl túl nagy
+ 14 - 0
src/assets/imgs/zy.svg


+ 18 - 1
src/utils/plugins/components.js

@@ -567,6 +567,23 @@ var system = [
             floorName: 'B2',
             id: 'b2',
         },
+    ],
+    // 事项
+    matter = [
+        {
+            icon: require('@/assets/imgs/zhsx.svg'),
+            name: '综合事项管理',
+            id: '1',
+        },
+        {
+            icon: require('@/assets/imgs/fzyf.svg'),
+            name: '辅助用房管理',
+            id: '2',
+            children: [
+                { label: '广场辅助用房汇总统计表', type: 1 },
+                { label: '广场辅助用房调改变更记录', type: 2 },
+            ],
+        },
     ]
 
-export { system, floors }
+export { system, floors, matter }

+ 185 - 0
src/views/other/floorList.vue

@@ -0,0 +1,185 @@
+<template>
+    <div class='floor-box'>
+        <div class='floor-list'>
+            <a-icon class='i-style1' v-if='showTopButton' type='caret-up' @click='removeTop' />
+            <a-icon class='i-style1' v-if='!showTopButton' type='caret-up' style='color:#ccc' />
+            <span class='floors'>
+                <span class='font-group'>
+                    <span
+                        class='eq-floor'
+                        v-for='(item,index) in floors'
+                        :class='item.id==floorId?"isActive":""'
+                        :key='index'
+                        @click='tabFloor(item)'
+                    >{{item.floorName}}</span>
+                </span>
+            </span>
+            <a-icon class='i-style2' v-if='showBottomButton' type='caret-down' @click='removeBottom' />
+            <a-icon class='i-style2' v-if='!showBottomButton' type='caret-down' style='color:#ccc' />
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            floorId: 'f1',
+            floorName: 'F3',
+            showTopButton: true,
+            showBottomButton: true
+        }
+    },
+    props: {
+        floors: {
+            default: []
+        }
+    },
+    methods: {
+        tabFloor(item) {
+            this.showTopButton = true
+            this.showBottomButton = true
+            this.floorId = item.id
+            this.floorName = item.floorName
+            this.$emit('emitFloor', item)
+            let tempFloorIdList = []
+            this.floors.map(el => {
+                tempFloorIdList.push(el.id)
+            })
+            tempFloorIdList.forEach((el, index) => {
+                if (item.id == el) {
+                    if (index == 0) {
+                        this.showTopButton = false
+                    }
+                    if (index == this.floors.length - 1) {
+                        this.showBottomButton = false
+                    }
+                }
+            })
+        },
+        removeTop() {
+            let tempFloorIdList = []
+            let tempFloorIndex = 0
+            let clickCount = 0
+            this.floors.map(el => {
+                tempFloorIdList.push(el.id)
+            })
+            tempFloorIdList.forEach((el, index) => {
+                if (el == this.floorId) {
+                    tempFloorIndex = index
+                    if (tempFloorIndex == 1) {
+                        this.showTopButton = false
+                    }
+                    if (tempFloorIndex != 0) {
+                        tempFloorIndex--
+                        clickCount += 1
+                        let fontGroup = document.querySelector('.font-group')
+                        fontGroup.style.top = 254 - clickCount * 40 + 'px'
+                        this.showBottomButton = true
+                    }
+                    console.log(tempFloorIndex)
+                }
+            })
+            this.floorId = tempFloorIdList[tempFloorIndex]
+        },
+        removeBottom() {
+            let tempFloorIdList = []
+            let tempFloorIndex = 0
+            let clickCount = 0
+            this.floors.map(el => {
+                tempFloorIdList.push(el.id)
+            })
+            console.log(tempFloorIdList)
+            tempFloorIdList.forEach((el, index) => {
+                if (el == this.floorId) {
+                    tempFloorIndex = index
+                    if (tempFloorIndex == tempFloorIdList.length - 2) {
+                        this.showBottomButton = false
+                    }
+                    if (tempFloorIndex != tempFloorIdList.length - 1) {
+                        tempFloorIndex++
+                        clickCount += 1
+                        let fontGroup = document.querySelector('.font-group')
+                        fontGroup.style.top += clickCount * 40 + 'px'
+                        this.showTopButton = true
+                    }
+                }
+            })
+            this.floorId = tempFloorIdList[tempFloorIndex]
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.floor-box {
+    position: fixed;
+    top: 154px;
+    right: 32px;
+
+    .floor-list {
+        position: fixed;
+        right: 32px;
+        top: 208px;
+        width: 40px;
+        background: #ffffff;
+        text-align: center;
+        .floors {
+            position: fixed;
+            right: 32px;
+            top: 234px;
+            width: 40px;
+            height: 140px;
+            background: #ffffff;
+            text-align: center;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            .font-group {
+                position: fixed;
+                right: 36px;
+                top: 234px;
+                width: 36px;
+                background: #ffffff;
+                text-align: center;
+                display: flex;
+                flex-direction: column;
+                .eq-floor {
+                    width: 36px;
+                    height: 28px;
+                    line-height: 28px;
+                    text-align: center;
+                    background: #fff;
+                    display: block;
+                    cursor: pointer;
+                    font-size: 14px;
+                    margin-left: 2px;
+                    border-radius: 4px;
+                }
+                .isActive {
+                    color: #025baa;
+                    background: #e1f2ff;
+                }
+            }
+        }
+        .i-style1 {
+            right: 32px;
+            position: fixed;
+            top: 210px;
+            width: 40px;
+            height: 28px;
+            background: #fff;
+            text-align: center;
+            line-height: 28px;
+        }
+        .i-style2 {
+            right: 32px;
+            position: fixed;
+            top: 374px;
+            width: 40px;
+            height: 28px;
+            background: #fff;
+            text-align: center;
+            line-height: 28px;
+        }
+    }
+}
+</style>

+ 169 - 0
src/views/other/gcfzDialog.vue

@@ -0,0 +1,169 @@
+<template>
+    <!-- 设备设施的三级路由的tabs -->
+    <div class='dialog-container'>
+        <el-dialog :title='`${systemName}-${dialogInfo.label}`' :visible.sync='visible' :fullscreen='true'>
+            <div class='top'></div>
+            <div v-if='dialogInfo.type==1' class='table-1'>
+                <el-table :data='tableData' style='width: 100%'>
+                    <el-table-column label='序号' type='index'></el-table-column>
+                    <el-table-column prop='floor' label='楼层'></el-table-column>
+                    <el-table-column prop='all' label='总间数'></el-table-column>
+                    <el-table-column prop='m' label='面积(㎡)'></el-table-column>
+                    <el-table-column prop='name' label='工程经理(签字)'></el-table-column>
+                    <el-table-column prop='date' label='记录日期'></el-table-column>
+                </el-table>
+                <p class='table1-p'>注:详细位置可在辅助用房管理平面图中查询</p>
+            </div>
+            <div v-if='dialogInfo.type==2' class='table-2'>
+                <div class='table-2-input'>
+                    <el-input placeholder='请搜索' size='mini' prefix-icon='el-icon-search' v-model='input'></el-input>
+                </div>
+                <div class='table-2-table'>
+                    <el-table :data='tableData' style='width: 100%'>
+                        <el-table-column label='序号' type='index' width='50'></el-table-column>
+                        <el-table-column prop='date' label='楼层' width='130'></el-table-column>
+                        <el-table-column prop='address1' label='库存变化' align='center'>
+                            <el-table-column prop='address1' label='新增(间)'></el-table-column>
+                            <el-table-column prop='address1' label='减少(间)'></el-table-column>
+                        </el-table-column>
+                        <el-table-column prop='address1' label='区域(㎡)'></el-table-column>
+                        <el-table-column prop='address2' label='面积(㎡)'></el-table-column>
+                        <el-table-column prop='address2' label='调整后库房总数(间)'></el-table-column>
+                        <el-table-column prop='date' label='工程经理签字' width='130'></el-table-column>
+                        <el-table-column prop='date' label='记录日期' width='130'></el-table-column>
+                    </el-table>
+                </div>
+                <div class='table-2-p'>注:广场辅助用房使用信息变更时,需同步调整对应楼层辅助用房管理平面图</div>
+                <div class='foot'>
+                    <el-pagination background layout='prev, pager, next' :total='100'></el-pagination>
+                </div>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+<script>
+export default {
+    props: ['systemName'],
+    data() {
+        return {
+            visible: false,
+            dialogInfo: {},
+            input: '',
+            tableData: [
+                {
+                    floor: '2AA1',
+                    all: 3,
+                    m: 155.2,
+                    name: '辅导辅',
+                    date: '1212-45-25'
+                },
+                {
+                    floor: '2AA1',
+                    all: 3,
+                    m: 155.2,
+                    name: '辅导辅',
+                    date: '1212-45-25'
+                },
+                {
+                    floor: '2AA1',
+                    all: 3,
+                    m: 155.2,
+                    name: '辅导辅',
+                    date: '1212-45-25'
+                },
+                {
+                    floor: '2AA1',
+                    all: 3,
+                    m: 155.2,
+                    name: '辅导辅',
+                    date: '1212-45-25'
+                },
+                {
+                    floor: '2AA1',
+                    all: 3,
+                    m: 155.2,
+                    name: '辅导辅',
+                    date: '1212-45-25'
+                },
+                {
+                    floor: '2AA1',
+                    all: 3,
+                    m: 155.2,
+                    name: '辅导辅',
+                    date: '1212-45-25'
+                },
+                {
+                    floor: '2AA1',
+                    all: 3,
+                    m: 155.2,
+                    name: '辅导辅',
+                    date: '1212-45-25'
+                },
+                {
+                    floor: '2AA1',
+                    all: 3,
+                    m: 155.2,
+                    name: '辅导辅',
+                    date: '1212-45-25'
+                }
+            ]
+        }
+    },
+    mounted() {},
+    methods: {
+        showModal(item) {
+            this.visible = true
+            console.log(item)
+            this.dialogInfo = item
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.top {
+    width: 1366px;
+    height: 1px;
+    background: rgba(0, 0, 0, 0.06);
+    margin-bottom: 20px;
+}
+.table-1 {
+    padding: 16px 24px 24px 24px;
+    .table1-p {
+        height: 48px;
+        font-size: 14px;
+        font-family: MicrosoftYaHei;
+        color: rgba(31, 36, 41, 1);
+        line-height: 48px;
+        margin-top: 8px;
+    }
+}
+.table-2 {
+    position: relative;
+    padding: 12px 12px 52px 12px;
+    .table-2-input {
+        display: flex;
+        justify-content: space-between;
+    }
+    .table-2-table {
+        margin-top: 10px;
+    }
+    .table-2-p {
+        height: 48px;
+        font-size: 14px;
+        font-family: MicrosoftYaHei;
+        color: rgba(31, 36, 41, 1);
+        line-height: 48px;
+    }
+    .foot {
+        position: absolute;
+        height: 32px;
+        right: 26px;
+        bottom: 20px;
+    }
+}
+</style>
+<style lang="less">
+.el-input {
+    width: 200px;
+}
+</style>

+ 108 - 51
src/views/other/index.vue

@@ -1,78 +1,135 @@
 <template>
-    <div class='other_thing'>
-        <div class='other-tbs'>
-            <div class='other-box' :class='{"is-ictive":item.view}' v-for='(item,index) in tabsList' :key='index' @click='tabsClick(item,index)'>
-                <i :class='item.icon'></i>
-                <span>{{item.name}}</span>
+    <div class='other'>
+        <div class='other-top'>
+            <span class='other-system' v-for='(item,index) in matter' :class='item.id==matterId?"isActive":""' :key='index' @click='tabSyatem(item)'>
+                <img :src='item.icon' alt />
+                {{item.name}}
+            </span>
+        </div>
+        <div class='other-bottom'>
+            <div class='other-left'>
+                <ul>
+                    <li class='li-style' v-for='(item,index) in everySystem' :key='"o"+index' @click='dialogVisible(item)'>
+                        <span class='circle'></span>
+                        {{item.label}}
+                    </li>
+                </ul>
+            </div>
+            <div class='other-right' v-if='matterId!=1'>
+                <floor-list :floors='floors' @emitFloor='emitFloor'></floor-list>
             </div>
         </div>
+        <other-dialog ref='dialog' :systemName='systemName'></other-dialog>
+        <zhsx-other v-if='matterId==1'></zhsx-other>
+        <div class='qtfugl' v-if='matterId==2'>
+            <img src='../../assets/imgs/matter_floorB2.png' alt />
+        </div>
+        <gcfz-dialog ref='gcfzDialog' :systemName='systemName'></gcfz-dialog>
     </div>
 </template>
 
 <script>
+import floorList from './floorList'
+import OtherDialog from './otherDialog'
+import { matter, floors } from '@/utils/plugins/components.js'
+import ZhsxOther from './zhsxOther'
+import GcfzDialog from './gcfzDialog'
 export default {
     data() {
         return {
-            width: '500px',
-            height: '300px',
-            content: '1.导航不放假!2.发大V反馈表',
-            tabsList: [
-                {
-                    name: '综合事项管理',
-                    icon: 'el-icon-menu',
-                    view: false
-                },
-                {
-                    name: '辅助用房管理',
-                    icon: 'el-icon-s-release',
-                    view: false
-                }
-            ]
+            matter,
+            floors,
+            everySystem: [],
+            matterId: 1,
+            systemName: '供电系统',
+            floorInfo: {
+                floorName: 'F1',
+                floorId: 'f1'
+            },
+            dialogInfo: {}
         }
     },
-    components: {},
+    components: { floorList, OtherDialog, ZhsxOther, GcfzDialog },
     methods: {
-        tabsClick(item, index) {
-            this.tabsList.forEach(el => {
-                el.view = false
-            })
-            item.view = true
+        tabSyatem(item) {
+            this.matterId = item.id
+            this.everySystem = item.children
+            this.systemName = item.name
+        },
+        emitFloor(item) {
+            this.floorInfo = item
+        },
+        dialogVisible(item) {
+            this.$refs.gcfzDialog.showModal(item)
         }
+    },
+    mounted() {
+        this.everySystem = this.matter[0].children
     }
 }
 </script>
 <style lang="less" scoped>
-.other_thing {
-    background: #f2f5f7;
+.other {
+    background: rgba(242, 245, 247, 1);
     height: 100%;
-    width: 100%;
     overflow: hidden;
-    .other-tbs {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        .other-box {
-            background: #ffffff;
-            padding: 12px 16px 12px 16px;
-            display: flex;
-            align-items: center;
+    .other-top {
+        margin-top: 24px;
+        position: fixed;
+        text-align: center;
+        width: 100%;
+        z-index: 2;
+        .other-system {
+            padding: 12px 23px;
+            color: #1f2429;
+            background: #fff;
             font-size: 16px;
-            // margin-top: 12px;
-            font-family: MicrosoftYaHei;
-            i {
-                display: inline-block;
-                width: 14px;
-                height: 14px;
-                margin-right: 6px;
+            cursor: pointer;
+            vertical-align: bottom;
+
+            img {
+                width: 16px;
+                height: 16px;
+                margin-right: 4px;
+                margin-bottom: 3px;
             }
-            span {
-                color: rgba(31, 36, 41, 1);
-                line-height: 22px;
+        }
+        .isActive {
+            color: #025baa;
+        }
+    }
+    .other-bottom {
+        display: flex;
+        .other-left {
+            position: fixed;
+            z-index: 2;
+            padding-top: 100px;
+            color: #646c73;
+            font-size: 14px;
+        }
+        .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-ictive {
-            background: linear-gradient(360deg, rgba(2, 91, 170, 1) 0, rgba(2, 91, 170, 0) 0.1);
+        .other-right {
+            margin-top: 24px;
+            flex: 1;
+        }
+    }
+    .qtfugl {
+        img {
+            width: 100%;
+            height: 100%;
+            margin: 0 auto;
         }
     }
 }
-</style>
+</style> 

+ 90 - 0
src/views/other/otherDialog.vue

@@ -0,0 +1,90 @@
+<template>
+    <!-- 设备设施的三级路由的tabs -->
+    <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'
+import tableList from '../equipment/table/eqListTable'
+
+export default {
+    props: ['systemName'],
+    data() {
+        return {
+            activeName: '',
+            visible: false,
+            dialogInfo: {},
+            rotationImg: [require('@/assets/imgs/eq.jpg'), require('@/assets/imgs/survey_pop2.png'), require('@/assets/imgs/survey_pop1.png')]
+        }
+    },
+    mounted() {},
+    components: { tableList },
+    methods: {
+        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)
+            }
+        },
+        handleClick(tab, event) {
+            console.log(tab, event)
+        }
+    }
+}
+</script>
+<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;
+    }
+    .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;
+    }
+    .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>

+ 64 - 0
src/views/other/zhsxDialog.vue

@@ -0,0 +1,64 @@
+<template>
+    <div>
+        <el-dialog title='综合记录事项' :visible.sync='visible'>
+            <div class='top'></div>
+            <div class='bottom'>
+                <p>1.各级政府部门在广场检查中口头及书面提出的工作要求,整改事项</p>
+                <p>2.广场消防安全培训、消防演习</p>
+                <p>3.相关政府强制性检测的按时完成情况及检测中提出的问题</p>
+                <p>4.广场安全质量第三方检测过程中列出的整改事项</p>
+                <div class='bottom-table'>
+                    <el-table :data='tableData' style='width: 100%'>
+                        <el-table-column label='序号' type='index' width='50'></el-table-column>
+                        <el-table-column prop='name' label='检测事项' width='140'></el-table-column>
+                        <el-table-column prop='type' label='主管部门' width='90'></el-table-column>
+                        <el-table-column prop='thing' label='记录事项' :show-overflow-tooltip='true'></el-table-column>
+                    </el-table>
+                </div>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            visible: false,
+            tableData: [
+                { name: '消防检测 电气安', type: '政府', thing: '1)检测结论2)检测主要项目及标准3)不合格项的具体内容及二次复检的安排' },
+                { name: '消防检测 电气安', type: '政府', thing: '1)检测结论2)检测主要项目及标准3)不合格项的具体内容及二次复检的安排' },
+                { name: '消防检测 电气安', type: '政府', thing: '1)检测结论2)检测主要项目及标准3)不合格项的具体内容及二次复检的安排' },
+                { name: '消防检测 电气安', type: '政府', thing: '1)检测结论2)检测主要项目及标准3)不合格项的具体内容及二次复检的安排' },
+                { name: '消防检测 电气安', type: '政府', thing: '1)检测结论2)检测主要项目及标准3)不合格项的具体内容及二次复检的安排' },
+                { name: '消防检测 电气安', type: '政府', thing: '1)检测结论2)检测主要项目及标准3)不合格项的具体内容及二次复检的安排' }
+            ]
+        }
+    },
+    methods: {
+        open() {
+            this.visible = true
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.top {
+    width: 100%;
+    height: 1px;
+    background: rgba(0, 0, 0, 0.06);
+    margin-bottom: 20px;
+}
+.bottom {
+    padding: 0 30px 14px 30px;
+    p {
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: rgba(96, 106, 120, 1);
+        line-height: 22px;
+    }
+    .bottom-table {
+        margin-top: 12px;
+    }
+}
+</style>

+ 171 - 0
src/views/other/zhsxOther.vue

@@ -0,0 +1,171 @@
+<template>
+    <div class='zhsx-box'>
+        <div class='zhsx-top'>
+            <div class='zhsx-top-left'>
+                <span></span>
+                <span>综合事项记录</span>
+                <img src='../../assets/imgs/zy.svg' alt @click='zhsxLog()' />
+            </div>
+            <div class='zhsx-top-right'>
+                <el-input placeholder='请搜索' size='mini' prefix-icon='el-icon-search' v-model='input'></el-input>
+            </div>
+        </div>
+        <div class='zhsx-bottom'>
+            <el-table :data='tableData' style='width: 100%'>
+                <el-table-column label='序号' type='index' width='50'></el-table-column>
+                <el-table-column prop='date' label='日期' width='130'></el-table-column>
+                <el-table-column prop='address1' label='政府部门' :show-overflow-tooltip='true'></el-table-column>
+                <el-table-column prop='address1' label='记录事项' :show-overflow-tooltip='true'></el-table-column>
+                <el-table-column prop='address2' label='工程经理签字'></el-table-column>
+                <el-table-column prop='address2' label='工程物业副总签字'></el-table-column>
+            </el-table>
+            <div class='footer'>
+                <el-pagination background layout='prev, pager, next' :total='100'></el-pagination>
+            </div>
+        </div>
+        <zhsx-dialog ref='Dialog'></zhsx-dialog>
+    </div>
+</template>
+<script>
+import ZhsxDialog from './zhsxDialog'
+export default {
+    data() {
+        return {
+            input: '',
+            tableData: [
+                {
+                    date: '2016-05-01',
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1519 弄',
+                    address1: 'BI超市消防联动测试故障,要求2.5前完,再复查',
+                    address2: '陈卫国'
+                },
+                {
+                    date: '2016-05-03',
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1516 弄',
+                    address1: 'BI超市消防联动测试故障,要求2.5前完,再复查',
+                    address2: '陈卫国'
+                },
+                {
+                    date: '2016-05-02',
+                    name: '王小虎',
+                    address: '应急管理',
+                    address1: 'BI超市消防联动测试故障,要求2.5前完,再复查',
+                    address2: '陈卫国'
+                },
+                {
+                    date: '2016-05-04',
+                    name: '王小虎',
+                    address: '三明市梅列生态环境局',
+                    address1: 'BI超市消防联动测试故障,要求2.5前完,再复查',
+                    address2: '陈卫国'
+                },
+                {
+                    date: '2016-05-01',
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1519 弄',
+                    address1: 'BI超市消防联动测试故障,要求2.5前完,再复查',
+                    address2: '陈卫国'
+                },
+                {
+                    date: '2016-05-03',
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1516 弄',
+                    address1: 'BI超市消防联动测试故障,要求2.5前完,再复查',
+                    address2: '陈卫国'
+                },
+                {
+                    date: '2016-05-02',
+                    name: '王小虎',
+                    address: '应急管理',
+                    address1: 'BI超市消防联动测试故障,要求2.5前完,再复查',
+                    address2: '陈卫国'
+                },
+                {
+                    date: '2016-05-04',
+                    name: '王小虎',
+                    address: '三明市梅列生态环境局',
+                    address1: 'BI超市消防联动测试故障,要求2.5前完,再复查',
+                    address2: '陈卫国'
+                },
+                {
+                    date: '2016-05-01',
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1519 弄',
+                    address1: 'BI超市消防联动测试故障,要求2.5前完,再复查',
+                    address2: '陈卫国'
+                },
+                {
+                    date: '2016-05-03',
+                    name: '王小虎',
+                    address: '上海市普陀区金沙江路 1516 弄',
+                    address1: 'BI超市消防联动测试故障,要求2.5前完,再复查',
+                    address2: '陈卫国'
+                }
+            ]
+        }
+    },
+    components: { ZhsxDialog },
+    methods: {
+        zhsxLog() {
+            this.$refs.Dialog.open()
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.zhsx-box {
+    height: 100%;
+    padding: 66px 50px 38px 50px;
+    .zhsx-top {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .zhsx-top-left {
+            display: flex;
+            align-items: center;
+            padding: 5px 0;
+            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);
+            span:nth-of-type(1) {
+                display: inline-block;
+                width: 2px;
+                height: 16px;
+                background: rgba(2, 91, 170, 1);
+                margin-right: 8px;
+            }
+            span:nth-of-type(2) {
+                display: inline-block;
+                width: 107px;
+                height: 22px;
+                font-size: 16px;
+                font-family: MicrosoftYaHeiSemibold;
+                color: rgba(2, 91, 170, 1);
+                line-height: 21px;
+                font-weight: bold;
+            }
+            img {
+                width: 16px;
+                height: 16px;
+                margin-right: 10px;
+                cursor: pointer;
+            }
+        }
+        .zhsx-top-right {
+        }
+    }
+    .zhsx-bottom {
+        margin-top: 12px;
+        background: #ffffff;
+        position: relative;
+        padding-bottom: 73px;
+        .footer {
+            position: absolute;
+            height: 32px;
+            right: 28px;
+            bottom: 24px;
+        }
+    }
+}
+</style>