GuoYuFu123 6 years ago
parent
commit
8f4974a8d9
5 changed files with 456 additions and 425 deletions
  1. 44 0
      src/framework/style/layout.scss
  2. 74 71
      src/test/fugy/Step3.vue
  3. 1 1
      src/test/fugy/Tab3.vue
  4. 1 1
      src/test/fugy/index.vue
  5. 336 352
      src/test/zhulz/index.vue

+ 44 - 0
src/framework/style/layout.scss

@@ -52,6 +52,9 @@ body {
         .page-content-wrapper {
             flex-grow: 1;
             flex-shrink: 1;
+            .page-content {
+                padding:  10px;
+            }
         }
     }
 
@@ -175,6 +178,7 @@ body {
         flex-grow: 1;
         flex-shrink: 1;
         overflow-y: auto;
+        padding: 10px;
     }
 }
 
@@ -332,3 +336,43 @@ body {
         }
     }
 }
+
+
+#page-main #page-container #page-content-wrapper .box {
+    display: flex;
+    flex-direction: column;
+
+    .el-tabs {
+        flex-grow: 1;
+        flex-shrink: 1;
+
+        display: flex;
+        flex-direction: column;
+
+        .el-tabs__header {
+            flex-grow: 0;
+            flex-shrink: 0;
+        }
+        .el-tabs__content {
+            flex-grow: 1;
+            flex-shrink: 1;
+
+            display: flex;
+            flex-direction: column;
+
+            .el-tab-pane {
+                height: 100%;
+                // flex-grow: 1;
+                // flex-shrink: 1;
+
+                display: flex;
+                flex-direction: column;
+
+                // // > div {
+                // //     flex-grow: 1;
+                // //     flex-shrink: 1;
+                // // }
+            }
+        }
+    }
+}

+ 74 - 71
src/test/fugy/Step3.vue

@@ -1,45 +1,39 @@
 <template>
-    <div class='box1'>
-        <div class='con-box'>
-            <el-button type='primary'>根据关键内容批量标准化设备标识</el-button>
-            <el-button type='primary' @click='someDictHandle'>根据关键内容批量对应数据字典</el-button>
-            <el-checkbox class='checkbox' v-model='checked'>只显示未标准化的原始点位</el-checkbox>
-        </div>
-        <div class='table-box'>
-            <el-table :data='tableData' style='width: 100%' border size="medium">
-                <el-table-column header-align='center' align='center' prop='a' label='原始点位描述' width='180'></el-table-column>
-                <el-table-column sortable header-align='center' align='center' prop='b' label='位置标签' width='180'>
-                    <template slot-scope='scope'>
-                        <el-tag style="margin-left: 5px;" v-for='(item,index) in scope.row.b' :key='index'>{{item}}</el-tag>
-                    </template>
-                </el-table-column>
-                <el-table-column header-align='center' align='center' prop='c' label='设备类型'></el-table-column>、
-                <el-table-column header-align='center' align='center' prop='d' label='设备参数'></el-table-column>
-                <el-table-column header-align='center' align='center' prop='f' label='设备标识'></el-table-column>
-                <el-table-column header-align='center' align='center' prop='g' label='数据字典设备类'></el-table-column>
-                <el-table-column header-align='center' align='center' prop='h' label='值处理方式'></el-table-column>
-                <el-table-column header-align='center' align='center' prop='i' label='备注'></el-table-column>
-                <el-table-column header-align='center' align='center' label='操作' width='80'>
-                    <template>
-                        <el-button type='text'>编辑</el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-        </div>
-        <div class='page-box'>
-            <el-pagination
-                @size-change='handleSizeChange'
-                @current-change='handleCurrentChange'
-                :current-page='currentPage4'
-                :page-sizes='[10, 30, 50, 100]'
-                :page-size='100'
-                layout='total, sizes, prev, pager, next, jumper'
-                :total='400'
-            ></el-pagination>
-        </div>
-        <!-- component -->
+    <div class='box1' style='display: flex;flex-direction: column;flex-grow: 1;flex-shrink: 1;'>
+        <table-page-template>
+            <div class='con-box' slot='form'>
+                <el-button type='primary'>根据关键内容批量标准化设备标识</el-button>
+                <el-button type='primary' @click='someDictHandle'>根据关键内容批量对应数据字典</el-button>
+                <el-checkbox class='checkbox' v-model='checked'>只显示未标准化的原始点位</el-checkbox>
+            </div>
+            <!-- <div class='table-box' > -->
+                <el-table :data='tableData' style='width: 100%' border slot='table' class='data-table'>
+                    <el-table-column header-align='center' align='center' prop='a' label='原始点位描述' width='180'></el-table-column>
+                    <el-table-column sortable header-align='center' align='center' prop='b' label='位置标签' width='180'>
+                        <template slot-scope='scope'>
+                            <el-tag style='margin-left: 5px;' v-for='(item,index) in scope.row.b' :key='index' size='mini'>{{item}}</el-tag>
+                        </template>
+                    </el-table-column>
+                    <el-table-column header-align='center' align='center' prop='c' label='设备类型'></el-table-column>、
+                    <el-table-column header-align='center' align='center' prop='d' label='设备参数'></el-table-column>
+                    <el-table-column header-align='center' align='center' prop='f' label='设备标识'></el-table-column>
+                    <el-table-column header-align='center' align='center' prop='g' label='数据字典设备类'></el-table-column>
+                    <el-table-column header-align='center' align='center' prop='h' label='值处理方式'></el-table-column>
+                    <el-table-column header-align='center' align='center' prop='i' label='备注'></el-table-column>
+                    <el-table-column header-align='center' align='center' label='操作' width='80' class-name='ttt'>
+                        <template>
+                            <el-button type='text' size='mini'>编辑</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            <!-- </div> -->
+            <base-pagination :total='456' @pageChanged='pageChanged' slot='pagination'></base-pagination>
+            
+        </table-page-template>
         <sg-dialog ref='some-dialog'></sg-dialog>
-    </div>
+        <!-- component -->
+        
+     </div>
 </template>
 <script>
 import './index.less'
@@ -52,8 +46,8 @@ export default {
             currentPage4: 1,
             tableData: [
                 {
-                    a:'1-14遥控测试',
-                    b:['电梯厅','1F'],
+                    a: '1-14遥控测试',
+                    b: ['电梯厅', '1F'],
                     c: '电器',
                     d: '12313#fs',
                     f: '1、2',
@@ -61,81 +55,89 @@ export default {
                     h: '无需处理',
                     i: '--'
                 },
-            {
-                    a:'1-14遥控测试',
-                    b:['电梯厅','1F'],
+                {
+                    a: '1-14遥控测试',
+                    b: ['电梯厅', '1F'],
                     c: '电器',
                     d: '12313#fs',
                     f: '1、2',
                     g: '变压器-运行状态',
                     h: '无需处理',
                     i: '--'
-                },{
-                    a:'1-14遥控测试',
-                    b:['电梯厅','1F'],
+                },
+                {
+                    a: '1-14遥控测试',
+                    b: ['电梯厅', '1F'],
                     c: '电器',
                     d: '12313#fs',
                     f: '1、2',
                     g: '变压器-运行状态',
                     h: '无需处理',
                     i: '--'
-                },{
-                    a:'1-14遥控测试',
-                    b:['电梯厅','1F'],
+                },
+                {
+                    a: '1-14遥控测试',
+                    b: ['电梯厅', '1F'],
                     c: '电器',
                     d: '12313#fs',
                     f: '1、2',
                     g: '变压器-运行状态',
                     h: '无需处理',
                     i: '--'
-                },{
-                    a:'1-14遥控测试',
-                    b:['电梯厅','1F'],
+                },
+                {
+                    a: '1-14遥控测试',
+                    b: ['电梯厅', '1F'],
                     c: '电器',
                     d: '12313#fs',
                     f: '1、2',
                     g: '变压器-运行状态',
                     h: '无需处理',
                     i: '--'
-                },{
-                    a:'1-14遥控测试',
-                    b:['电梯厅','1F'],
+                },
+                {
+                    a: '1-14遥控测试',
+                    b: ['电梯厅', '1F'],
                     c: '电器',
                     d: '12313#fs',
                     f: '1、2',
                     g: '变压器-运行状态',
                     h: '无需处理',
                     i: '--'
-                },{
-                    a:'1-14遥控测试',
-                    b:['电梯厅','1F'],
+                },
+                {
+                    a: '1-14遥控测试',
+                    b: ['电梯厅', '1F'],
                     c: '电器',
                     d: '12313#fs',
                     f: '1、2',
                     g: '变压器-运行状态',
                     h: '无需处理',
                     i: '--'
-                },{
-                    a:'1-14遥控测试',
-                    b:['电梯厅','1F'],
+                },
+                {
+                    a: '1-14遥控测试',
+                    b: ['电梯厅', '1F'],
                     c: '电器',
                     d: '12313#fs',
                     f: '1、2',
                     g: '变压器-运行状态',
                     h: '无需处理',
                     i: '--'
-                },{
-                    a:'1-14遥控测试',
-                    b:['电梯厅','1F'],
+                },
+                {
+                    a: '1-14遥控测试',
+                    b: ['电梯厅', '1F'],
                     c: '电器',
                     d: '12313#fs',
                     f: '1、2',
                     g: '变压器-运行状态',
                     h: '无需处理',
                     i: '--'
-                },{
-                    a:'1-14遥控测试',
-                    b:['电梯厅','1F'],
+                },
+                {
+                    a: '1-14遥控测试',
+                    b: ['电梯厅', '1F'],
                     c: '电器',
                     d: '12313#fs',
                     f: '1、2',
@@ -153,8 +155,9 @@ export default {
         handleSizeChange() {},
         handleCurrentChange() {},
         someDictHandle() {
-            this.$refs['some-dialog'].show();
-        }
+            this.$refs['some-dialog'].show()
+        },
+        pageChanged(){}
     }
 }
 </script>

+ 1 - 1
src/test/fugy/Tab3.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-table :data='tableData' style='width: 100%' border size='medium' height='400'>
+    <el-table :data='tableData' style='width: 100%' border height='400'>
         <el-table-column header-align='center' align='center' label='设备标识' width='180'>
             <template slot-scope='scope'>
                 <el-tag style='margin-left: 5px;' v-for='(item ,index) in scope.row.b' :key='index'>{{item}}</el-tag>

+ 1 - 1
src/test/fugy/index.vue

@@ -32,6 +32,6 @@ export default {
 </script>
 <style lang="less" scoped>
 .box {
-    padding: 20px;
+    // padding: 20px;
 }
 </style>

+ 336 - 352
src/test/zhulz/index.vue

@@ -1,169 +1,103 @@
 <template>
-    <div class="alarm-notes">
-        <div class="select-list">
-            <el-select v-model="project" class="item" size="small" placeholder="请选择项目">
-                <el-option
-                v-for="item in projects"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value">
-                </el-option>
-            </el-select>
-             <el-cascader
-                class="item"
-                size="small"
-                clearable
-                placeholder="请选择对象位置"
-                :options="positions"
-                v-model="position"
-                @change="handleChange">
-            </el-cascader>
-            <el-select v-model="level" class="item" clearable size="small" placeholder="请选择严重程度">
-                <el-option
-                v-for="item in levels"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value">
-                </el-option>
-            </el-select>
-            <el-select v-model="staff" class="item" clearable size="small" placeholder="请选择人员">
-                <el-option
-                v-for="item in staffs"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value">
-                </el-option>
-            </el-select>
-            <el-select v-model="type" class="item" clearable size="small" placeholder="请选择报警分类">
-                <el-option
-                v-for="item in types"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value">
-                </el-option>
-            </el-select>
-            <div class="btn-al">
-                 <el-button type="primary" size="small" style="width:200px" @click="alarmDialogVisible = true">报警条目</el-button>
+    <div class='alarm-notes'>
+        <table-page-template>
+            <div class='select-list' slot='form'>
+                <el-select v-model='project' class='item' size='small' placeholder='请选择项目'>
+                    <el-option v-for='item in projects' :key='item.value' :label='item.label' :value='item.value'></el-option>
+                </el-select>
+                <el-cascader
+                    class='item'
+                    size='small'
+                    clearable
+                    placeholder='请选择对象位置'
+                    :options='positions'
+                    v-model='position'
+                    @change='handleChange'
+                ></el-cascader>
+                <el-select v-model='level' class='item' clearable size='small' placeholder='请选择严重程度'>
+                    <el-option v-for='item in levels' :key='item.value' :label='item.label' :value='item.value'></el-option>
+                </el-select>
+                <el-select v-model='staff' class='item' clearable size='small' placeholder='请选择人员'>
+                    <el-option v-for='item in staffs' :key='item.value' :label='item.label' :value='item.value'></el-option>
+                </el-select>
+                <el-select v-model='type' class='item' clearable size='small' placeholder='请选择报警分类'>
+                    <el-option v-for='item in types' :key='item.value' :label='item.label' :value='item.value'></el-option>
+                </el-select>
+                <div class='btn-al'>
+                    <el-button type='primary' size='small' style='width:200px' @click='alarmDialogVisible = true'>报警条目</el-button>
+                </div>
+                <el-radio-group v-model='notes' size='small' class='item'>
+                    <el-radio-button label='alarm'>通过报警查看通知人员</el-radio-button>
+                    <el-radio-button label='staff'>通过人员查看报警通知</el-radio-button>
+                </el-radio-group>
+                <el-checkbox v-model='checked' class='check-note'>只看尚未设定人员通知的报警</el-checkbox>
+                <el-button type='primary' size='small' class='btn-alarm' @click='setUser'>为所选报警统一设定通知人员</el-button>
             </div>
-        </div>
-        <div class="sg-table">
-            <el-radio-group v-model="notes" size="small" class="item">
-                <el-radio-button label="alarm">通过报警查看通知人员</el-radio-button>
-                <el-radio-button label="staff">通过人员查看报警通知</el-radio-button>
-            </el-radio-group>
-            <el-checkbox v-model="checked" class="check-note">只看尚未设定人员通知的报警</el-checkbox>
-            <el-button type="primary" size="small" class="btn-alarm" @click='setUser'>为所选报警统一设定通知人员</el-button>
-           <el-table
-                ref="multipleTable"
-                :data="tableData"
+
+            <el-table
+                slot='table'
+                class='data-table'
+                ref='multipleTable'
+                :data='tableData'
                 border
-                tooltip-effect="dark"
-                style="width: 100%"
-                @selection-change="handleSelectionChange">
-                <el-table-column
-                type="selection"
-                align="center"
-                width="55">
-                </el-table-column>
-                <el-table-column
-                align="center"
-                prop="classify"
-                label="报警分类"
-                width="130">
-                </el-table-column>
-                <el-table-column
-                prop="name"
-                header-align="center"
-                label="适用对象实例"
-                >
-                </el-table-column>
-                <el-table-column
-                prop="alarm"
-                header-align="center"
-                label="报警条目名称"
-                >
-                </el-table-column>
-                <el-table-column
-                prop="code"
-                label="报警条目编码"
-                align="center"
-                width="130"
-                >
-                </el-table-column>
-                <el-table-column
-                prop="level"
-                label="严重程度"
-                align="center"
-                width="80"
-               >
-                </el-table-column>
-                <el-table-column label="通知人员" width="80" align="center">
-                    <el-button
-                    size="small"
-                    type="text"
-                    @click="dialogVisible = true">设定
-                    </el-button>
+                tooltip-effect='dark'
+                style='width: 100%'
+                @selection-change='handleSelectionChange'
+            >
+                <el-table-column type='selection' align='center' width='55'></el-table-column>
+                <el-table-column align='center' prop='classify' label='报警分类' width='130'></el-table-column>
+                <el-table-column prop='name' header-align='center' label='适用对象实例'></el-table-column>
+                <el-table-column prop='alarm' header-align='center' label='报警条目名称'></el-table-column>
+                <el-table-column prop='code' label='报警条目编码' align='center' width='130'></el-table-column>
+                <el-table-column prop='level' label='严重程度' align='center' width='80'></el-table-column>
+                <el-table-column label='通知人员' width='80' align='center'>
+                    <el-button size='small' type='text' @click='dialogVisible = true'>设定</el-button>
                 </el-table-column>
             </el-table>
-        </div>
-        <div class="footer-pagination">
-            <el-pagination
-                @size-change="handleSizeChange"
-                @current-change="handleCurrentChange"
-                :current-page="currentPage"
-                :page-sizes="[10, 30, 50]"
-                :page-size="10"
-                layout="total, sizes, prev, pager, next, jumper"
-                :total="100">
-            </el-pagination>
-        </div>
-        <el-dialog
-            title="设定通知人员"
-            :visible.sync="dialogVisible"
-            width="900px" height="500px"
-            >
-             <div class="box" v-if="userData.length">
-            <ul class="ul-box">
-                <li class="tit">
-                <p>人员姓名及通知方式</p>
-                </li>
-                <li v-for="(item, index) in userData" :key="index">
-                    <p>
-                        <span class="name">{{item.name}}</span>
-                        <span class="name">{{item.phone}}</span>
-                        <span class="name">{{item.email}}</span>
-                    </p>         
-                <span>
-                    <v-check-box :sendMessage='item.sendMessage' :sendEmail='item.sendEmail' :sendWechat='item.sendWechat' :define="index" @change="checkBoxChange"></v-check-box>
-                </span>
-                </li>
-            </ul>      
+
+            <base-pagination :total='456' @pageChanged='pageChanged' slot='pagination'></base-pagination>
+        </table-page-template>
+        <el-dialog title='设定通知人员' :visible.sync='dialogVisible' width='900px' height='500px'>
+            <div class='box' v-if='userData.length'>
+                <ul class='ul-box'>
+                    <li class='tit'>
+                        <p>人员姓名及通知方式</p>
+                    </li>
+                    <li v-for='(item, index) in userData' :key='index'>
+                        <p>
+                            <span class='name'>{{item.name}}</span>
+                            <span class='name'>{{item.phone}}</span>
+                            <span class='name'>{{item.email}}</span>
+                        </p>
+                        <span>
+                            <v-check-box
+                                :sendMessage='item.sendMessage'
+                                :sendEmail='item.sendEmail'
+                                :sendWechat='item.sendWechat'
+                                :define='index'
+                                @change='checkBoxChange'
+                            ></v-check-box>
+                        </span>
+                    </li>
+                </ul>
             </div>
-            <div v-else style="text-align:center;min-height:100px;">暂无人员</div>
+            <div v-else style='text-align:center;min-height:100px;'>暂无人员</div>
             <p>
-                <el-button type="primary" style="margin-top:10px" icon="el-icon-setting" @click="manageUser">管理通知人员</el-button>
+                <el-button type='primary' style='margin-top:10px' icon='el-icon-setting' @click='manageUser'>管理通知人员</el-button>
             </p>
-            <span slot="footer" class="dialog-footer">
-                <el-button @click="dialogVisible = false">取 消</el-button>
-                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+            <span slot='footer' class='dialog-footer'>
+                <el-button @click='dialogVisible = false'>取 消</el-button>
+                <el-button type='primary' @click='dialogVisible = false'>确 定</el-button>
             </span>
         </el-dialog>
-        <el-dialog
-            title="管理通知人员"
-            :visible.sync="manageDialogVisible"
-            width="900px" height="500px"
-            >
-           <manage-note></manage-note>
+        <el-dialog title='管理通知人员' :visible.sync='manageDialogVisible' width='900px' height='500px'>
+            <manage-note></manage-note>
         </el-dialog>
-        <el-dialog
-            title="选择报警条目"
-            :visible.sync="alarmDialogVisible"
-            width="900px" height="500px"
-            >
-          <alarm-code></alarm-code>
-           <span slot="footer" class="dialog-footer">
-                <el-button @click="alarmDialogVisible = false">取 消</el-button>
-                <el-button type="primary" @click="alarmDialogVisible = false">确 定</el-button>
+        <el-dialog title='选择报警条目' :visible.sync='alarmDialogVisible' width='900px' height='500px'>
+            <alarm-code></alarm-code>
+            <span slot='footer' class='dialog-footer'>
+                <el-button @click='alarmDialogVisible = false'>取 消</el-button>
+                <el-button type='primary' @click='alarmDialogVisible = false'>确 定</el-button>
             </span>
         </el-dialog>
     </div>
@@ -173,262 +107,312 @@
 import manageNote from './manageNote'
 import alarmCode from './alarmCode'
 export default {
-    data(){
+    data() {
         return {
-            alarmDialogVisible:false,
+            alarmDialogVisible: false,
             dialogVisible: false,
-            manageDialogVisible:false,
-            projects: [{
-                value: 'Pj4419000006',
-                label: '厚街万科城市广场'
-                }, {
-                value: 'Pj4419000003',
-                label: '长安万科广场'
-                }, {
-                value: 'Pj4419000008',
-                label: '松湖万科生活广场'
-                }, {
-                value: 'Pj1101020002',
-                label: '北京中海地产大厦'
-                }, {
-                value: 'Pj1101080002',
-                label: '新华创新大厦'
-                },{
-                value: 'Pj4201050001',
-                label: '武汉亚心总医院'
-                }, {
-                value: 'Pj1101010001',
-                label: '北京中海地产广场'
-                }],
+            manageDialogVisible: false,
+            projects: [
+                {
+                    value: 'Pj4419000006',
+                    label: '厚街万科城市广场'
+                },
+                {
+                    value: 'Pj4419000003',
+                    label: '长安万科广场'
+                },
+                {
+                    value: 'Pj4419000008',
+                    label: '松湖万科生活广场'
+                },
+                {
+                    value: 'Pj1101020002',
+                    label: '北京中海地产大厦'
+                },
+                {
+                    value: 'Pj1101080002',
+                    label: '新华创新大厦'
+                },
+                {
+                    value: 'Pj4201050001',
+                    label: '武汉亚心总医院'
+                },
+                {
+                    value: 'Pj1101010001',
+                    label: '北京中海地产广场'
+                }
+            ],
             project: 'Pj1101080002',
-            positions: [{
-                value: '6',
-                label: '6号楼',
-                children: [{
-                    value: 'f01',
-                    label: '地下一层',
-                    children: [{
-                        value: 'B1F1',
-                        label: 'B1F-5#变压器房'
-                        }, {
-                        value: 'B1F2',
-                        label: 'B1F-1#变压器房'
-                        }, {
-                        value: 'B1F3',
-                        label: 'B1F-2#变压器房'
-                        }, {
-                        value: 'B1F4',
-                        label: 'B1F-2#门内公区'
-                    }],
-                },{
-                    value: 'f02',
-                    label: '地下二层',
-                    children: [{
-                        value: 'B2F1',
-                        label: 'B2F-5#变压器房'
-                        }, {
-                        value: 'B2F2',
-                        label: 'B2F-1#变压器房'
-                        }, {
-                        value: 'B2F3',
-                        label: 'B2F-2#变压器房'
-                        }, {
-                        value: 'B2F4',
-                        label: 'B2F-2#门内公区'
-                    }]
-                },{
-                   value: 'f11',
-                   label: '地上一层',
-                   children: [{
-                        value: '1F1',
-                        label: '1F-公区'
-                        }, {
-                        value: '1F2',
-                        label: '1F-门内公区'
-                        }, {
-                        value: '1F3',
-                        label: '1F-1#门内公区'
-                        }, {
-                        value: '1F4',
-                        label: '1F-6#门内公区'
-                    }],  
-                },{
-                   value: 'f12',
-                   label: '地上二层', 
-                },{
-                    value:'f13',
-                    label: '地上三层',
-                },{
-                    value:'f14',
-                    label: '地上四层',
-                }]
-            }],
-            position:[],
-            levels: [{
-                value: '0',
-                label: 'S'
-                }, {
-                value: '1',
-                label: 'A'
-                }, {
-                value: '2',
-                label: 'B'
-                }, {
-                value: '3',
-                label: 'C'
-                }, {
-                value: '4',
-                label: 'D'
-                }],
+            positions: [
+                {
+                    value: '6',
+                    label: '6号楼',
+                    children: [
+                        {
+                            value: 'f01',
+                            label: '地下一层',
+                            children: [
+                                {
+                                    value: 'B1F1',
+                                    label: 'B1F-5#变压器房'
+                                },
+                                {
+                                    value: 'B1F2',
+                                    label: 'B1F-1#变压器房'
+                                },
+                                {
+                                    value: 'B1F3',
+                                    label: 'B1F-2#变压器房'
+                                },
+                                {
+                                    value: 'B1F4',
+                                    label: 'B1F-2#门内公区'
+                                }
+                            ]
+                        },
+                        {
+                            value: 'f02',
+                            label: '地下二层',
+                            children: [
+                                {
+                                    value: 'B2F1',
+                                    label: 'B2F-5#变压器房'
+                                },
+                                {
+                                    value: 'B2F2',
+                                    label: 'B2F-1#变压器房'
+                                },
+                                {
+                                    value: 'B2F3',
+                                    label: 'B2F-2#变压器房'
+                                },
+                                {
+                                    value: 'B2F4',
+                                    label: 'B2F-2#门内公区'
+                                }
+                            ]
+                        },
+                        {
+                            value: 'f11',
+                            label: '地上一层',
+                            children: [
+                                {
+                                    value: '1F1',
+                                    label: '1F-公区'
+                                },
+                                {
+                                    value: '1F2',
+                                    label: '1F-门内公区'
+                                },
+                                {
+                                    value: '1F3',
+                                    label: '1F-1#门内公区'
+                                },
+                                {
+                                    value: '1F4',
+                                    label: '1F-6#门内公区'
+                                }
+                            ]
+                        },
+                        {
+                            value: 'f12',
+                            label: '地上二层'
+                        },
+                        {
+                            value: 'f13',
+                            label: '地上三层'
+                        },
+                        {
+                            value: 'f14',
+                            label: '地上四层'
+                        }
+                    ]
+                }
+            ],
+            position: [],
+            levels: [
+                {
+                    value: '0',
+                    label: 'S'
+                },
+                {
+                    value: '1',
+                    label: 'A'
+                },
+                {
+                    value: '2',
+                    label: 'B'
+                },
+                {
+                    value: '3',
+                    label: 'C'
+                },
+                {
+                    value: '4',
+                    label: 'D'
+                }
+            ],
             level: '',
-            staffs: [{
-                value: '0',
-                label: '人员全部'
-                }],
+            staffs: [
+                {
+                    value: '0',
+                    label: '人员全部'
+                }
+            ],
             staff: '',
-            types: [{
-                value: '0',
-                label: '环境报警'
-                }, {
-                value: '1',
-                label: '安全报警'
-                }],
-            type: '', 
-            notes: "alarm",
+            types: [
+                {
+                    value: '0',
+                    label: '环境报警'
+                },
+                {
+                    value: '1',
+                    label: '安全报警'
+                }
+            ],
+            type: '',
+            notes: 'alarm',
             checked: false,
-            tableData: [{
-                classify: '--',
-                name: '1#冷冻水泵 - HJWK-6号楼-B2-KT-ZYZL-LDSB-001',
-                alarm: '冷冻水泵电源电压过高',
-                code:'1024',
-                level:'A'
-                }, {
-                classify: '环境报警',
-                name: '2#冷冻水泵 - HJWK-6号楼-B2-KT-ZYZL-LDSB-002',
-                alarm: '冷冻水泵电源电压过高',
-                code:'1024',
-                level:'A'
-                }, {
-                classify: '环境报警',
-                name: '3#冷冻水泵 - HJWK-6号楼-B2-KT-ZYZL-LDSB-003',
-                alarm: '冷冻水泵电源电压过高',
-                code:'1024',
-                level:'A'
-                }, {
-                classify: '环境报警',
-                name: 'B1F-5#变压器房 - B1-BDS-7',
-                alarm: '室温过高',
-                code:'1055',
-                level:'B'
-                }, {
-                classify: '环境报警',
-                name: 'B2F-8#排风机房 - B2-PFJF-8',
-                alarm: '室温过高',
-                code:'1055',
-                level:'B'
-                }, {
-                classify: '--',
-                name: 'B2F-5#排风机房 - B2-PFJF-5',
-                alarm: '室温过高',
-                code:'1055',
-                level:'B'
-                }, {
-                classify: '安全报警',
-                name: 'B2F-7#排风机房 - B2-PFJF-7',
-                alarm: '室温过高',
-                code:'1055',
-                level:'B'
-            }],
+            tableData: [
+                {
+                    classify: '--',
+                    name: '1#冷冻水泵 - HJWK-6号楼-B2-KT-ZYZL-LDSB-001',
+                    alarm: '冷冻水泵电源电压过高',
+                    code: '1024',
+                    level: 'A'
+                },
+                {
+                    classify: '环境报警',
+                    name: '2#冷冻水泵 - HJWK-6号楼-B2-KT-ZYZL-LDSB-002',
+                    alarm: '冷冻水泵电源电压过高',
+                    code: '1024',
+                    level: 'A'
+                },
+                {
+                    classify: '环境报警',
+                    name: '3#冷冻水泵 - HJWK-6号楼-B2-KT-ZYZL-LDSB-003',
+                    alarm: '冷冻水泵电源电压过高',
+                    code: '1024',
+                    level: 'A'
+                },
+                {
+                    classify: '环境报警',
+                    name: 'B1F-5#变压器房 - B1-BDS-7',
+                    alarm: '室温过高',
+                    code: '1055',
+                    level: 'B'
+                },
+                {
+                    classify: '环境报警',
+                    name: 'B2F-8#排风机房 - B2-PFJF-8',
+                    alarm: '室温过高',
+                    code: '1055',
+                    level: 'B'
+                },
+                {
+                    classify: '--',
+                    name: 'B2F-5#排风机房 - B2-PFJF-5',
+                    alarm: '室温过高',
+                    code: '1055',
+                    level: 'B'
+                },
+                {
+                    classify: '安全报警',
+                    name: 'B2F-7#排风机房 - B2-PFJF-7',
+                    alarm: '室温过高',
+                    code: '1055',
+                    level: 'B'
+                }
+            ],
             multipleSelection: [],
-            currentPage:10,
+            currentPage: 10,
             userData: [],
-            selectBoxIdArr: [], //表格多选的alarm的id数组      
+            selectBoxIdArr: [] //表格多选的alarm的id数组
         }
     },
-    components:{
+    components: {
         manageNote,
         alarmCode
     },
-    methods:{
+    methods: {
         handleChange(value) {
-            console.log(value);
+            console.log(value)
         },
         handleSelectionChange(arr) {
-            this.selectBoxIdArr = arr;
+            this.selectBoxIdArr = arr
         },
         handleSizeChange(val) {
-        console.log(`每页 ${val} 条`);
+            console.log(`每页 ${val} 条`)
         },
         handleCurrentChange(val) {
-            console.log(`当前页: ${val}`);
+            console.log(`当前页: ${val}`)
         },
         manageUser() {
-            this.dialogVisible = false;
+            this.dialogVisible = false
             this.manageDialogVisible = !this.manageDialogVisible
         },
         setUser() {
             if (this.selectBoxIdArr.length) {
-               this.dialogVisible = true
+                this.dialogVisible = true
             } else {
                 this.$message({
                     message: '请选择报警',
                     type: 'warning'
                 })
             }
-        },
-      
+        }
     }
 }
 </script>
 
 <style lang="less" scoped>
-.alarm-notes{
-    .select-list{
+.alarm-notes {
+    .select-list {
         padding: 0 10px 10px 10px;
-        border-bottom: 1px solid #c2cedb;
+        // border-bottom: 1px solid #c2cedb;
         background: #fff;
-        .item{
+        .item {
+            margin-top: 10px;
+            margin-right: 5px;
+        }
+        .btn-al {
             margin-top: 10px;
             margin-right: 5px;
+            display: inline-block;
         }
-        .btn-al{
-           margin-top: 10px;
-           margin-right: 5px;
-           display: inline-block; 
-        }  
     }
-    .sg-table{
-        margin:10px 0;
-        padding:10px;
-        background:#fff;
-        .check-note{
+    .sg-table {
+        margin: 10px 0;
+        padding: 10px;
+        background: #fff;
+        .check-note {
             margin-left: 50px;
         }
-        .btn-alarm{
+        .btn-alarm {
             width: 200px;
             float: right;
             margin-bottom: 10px;
         }
-        th{
+        th {
             text-align: center;
         }
     }
-    .footer-pagination{
+    .footer-pagination {
         text-align: center;
     }
-    .ul-box{
+    .ul-box {
         min-height: 300px;
     }
 }
 </style>
 <style lang="less">
-.alarm-notes{
-  .el-dialog__header{
-      text-align: center;
-  }
-  .el-dialog__body{
-      padding-top: 10px;
-  }
+.alarm-notes {
+    .el-dialog__header {
+        text-align: center;
+    }
+    .el-dialog__body {
+        padding-top: 10px;
+    }
 }
 </style>