报警通知

src/framework/style/layout.scss

@@ -164,8 +164,8 @@ body {
         flex-shrink: 0;
         height: 30px;
         padding: 0 20px;
-        margin-bottom: 10px;
-        border-bottom: 1px solid #333;
+        // margin-bottom: 10px;
+        border-bottom: 1px solid #c2cedb;
         .el-breadcrumb {
             font-size: 14px;
             line-height: 30px;

src/test/zhulz/alarmCode.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="alarm-code">
+    <div class="alarm-item-box">
+        <div class="radio-box">
+            <el-radio-group v-model="radioValue" @change="radioChange">
+                <el-radio-button label="fixed">固定条目</el-radio-button>
+                <el-radio-button label="customed">自定义条目</el-radio-button>                
+            </el-radio-group>
+        </div>
+        <div class="table-box">
+            <el-table
+            size="medium"
+            ref="multipleTable"
+            :loading="loading"
+            :data="data"
+            tooltip-effect="dark"
+            style="width: 100%"
+            border
+            @selection-change="handleSelectionChange">                
+                <el-table-column
+                prop="code"
+                align="center"
+                label="报警条目编码">                
+                </el-table-column>
+                <el-table-column
+                header-align="center"
+                prop="name"
+                label="报警条目名称">
+                </el-table-column>
+                <el-table-column
+                type="selection"
+                width="55">
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>   
+  </div>
+</template>
+
+<script>
+export default {
+  components: {
+
+  },
+
+  mixins: [],
+
+  props: {
+
+  },
+
+  data () {
+    return {
+      data:[
+        {name:'集水坑超高液位报警',code:2003},
+        {name:'集水坑超低液位污水泵未停止报警',code:2004},
+        {name:'冷冻水泵电源电压过高',code:1024},
+        {name:'新风机组测试报警',code:100001},
+        {name:'潜污泵断电报警',code:2001},
+        {name:'集水坑超高液位潜污泵未启动报警',code:2002},
+      ],
+       radioValue: 'fixed', //默认固定
+    }
+  },
+
+  computed: {
+
+  },
+
+  mounted() {
+
+  },
+
+  methods: {
+     // radio改变事件
+        radioChange(val) {
+            this.multipleSelection = [];
+            this.alarmItemArr = [];
+            this.getAlarmItem();
+        },
+         handleSelectionChange(val,index) {
+            this.multipleSelection = val;
+        },
+  },
+
+}
+</script>
+
+<style scoped lang="less" >
+.alarm-code{
+  .radio-box{
+      text-align: center;
+  }
+  .table-box{
+      height: 500px;
+      overflow-y: auto;
+      margin-top: 30px;
+  }
+}
+</style>

src/test/zhulz/index.vue

@@ -1,15 +1,424 @@
 <template>
-    <div>
-        3
+    <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>
+             <el-button type="primary" size="small" style="width:200px" @click="alarmDialogVisible = true">报警条目</el-button>
+        </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"
+                border
+                tooltip-effect="dark"
+                style="width: 100%"
+                size="medium"
+                @selection-change="handleSelectionChange">
+                <el-table-column
+                type="selection"
+                align="center"
+                width="55">
+                </el-table-column>
+                <el-table-column
+                prop="type"
+                label="报警分类"
+                align="center"
+                width="120">
+                <template slot-scope="scope">{{ scope.row.date }}</template>
+                </el-table-column>
+                <el-table-column
+                prop="name"
+                header-align="center"
+                label="适用对象实例"
+                width="120">
+                </el-table-column>
+                <el-table-column
+                prop="alarm"
+                header-align="center"
+                label="报警条目名称"
+                >
+                </el-table-column>
+                <el-table-column
+                prop="code"
+                label="报警条目编码"
+                align="center"
+                >
+                </el-table-column>
+                <el-table-column
+                prop="level"
+                label="严重程度"
+                align="center"
+               >
+                </el-table-column>
+                <el-table-column label="通知人员"  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>      
+            </div>
+            <div v-else style="text-align:center;min-height:100px;">暂无人员</div>
+            <p>
+                <el-button type="text" 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>
+        </el-dialog>
+        <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>
+            </span>
+        </el-dialog>
     </div>
 </template>
 
 <script>
+import manageNote from './manageNote'
+import alarmCode from './alarmCode'
 export default {
-
+    data(){
+        return {
+            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: '北京中海地产广场'
+                }],
+            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'
+                }],
+            level: '',
+            staffs: [{
+                value: '0',
+                label: '人员全部'
+                }],
+            staff: '',
+            types: [{
+                value: '0',
+                label: '环境报警'
+                }, {
+                value: '1',
+                label: '安全报警'
+                }],
+            type: '', 
+            notes: "alarm",
+            checked: false,
+            tableData: [{
+                type: '',
+                name: '1#冷冻水泵 - HJWK-6号楼-B2-KT-ZYZL-LDSB-001',
+                alarm: '冷冻水泵电源电压过高',
+                code:'1024',
+                level:'A'
+                }, {
+                type: '',
+                name: '2#冷冻水泵 - HJWK-6号楼-B2-KT-ZYZL-LDSB-002',
+                alarm: '冷冻水泵电源电压过高',
+                code:'1024',
+                level:'A'
+                }, {
+                type: '',
+                name: '3#冷冻水泵 - HJWK-6号楼-B2-KT-ZYZL-LDSB-003',
+                alarm: '冷冻水泵电源电压过高',
+                code:'1024',
+                level:'A'
+                }, {
+                type: '',
+                name: 'B1F-5#变压器房 - B1-BDS-7',
+                alarm: '室温过高',
+                code:'1055',
+                level:'B'
+                }, {
+                type: '',
+                name: 'B2F-8#排风机房 - B2-PFJF-8',
+                alarm: '室温过高',
+                code:'1055',
+                level:'B'
+                }, {
+                type: '',
+                name: 'B2F-5#排风机房 - B2-PFJF-5',
+                alarm: '室温过高',
+                code:'1055',
+                level:'B'
+                }, {
+                type: '',
+                name: 'B2F-7#排风机房 - B2-PFJF-7',
+                alarm: '室温过高',
+                code:'1055',
+                level:'B'
+            }],
+            multipleSelection: [],
+            currentPage:10,
+            userData: [],
+            selectBoxIdArr: [], //表格多选的alarm的id数组      
+        }
+    },
+    components:{
+        manageNote,
+        alarmCode
+    },
+    methods:{
+        handleChange(value) {
+            console.log(value);
+        },
+        handleSelectionChange(arr) {
+            this.selectBoxIdArr = arr;
+        },
+        handleSizeChange(val) {
+        console.log(`每页 ${val} 条`);
+        },
+        handleCurrentChange(val) {
+            console.log(`当前页: ${val}`);
+        },
+        manageUser() {
+            this.dialogVisible = false;
+            this.manageDialogVisible = !this.manageDialogVisible
+        },
+        setUser() {
+            if (this.selectBoxIdArr.length) {
+               this.dialogVisible = true
+            } else {
+                this.$message({
+                    message: '请选择报警',
+                    type: 'warning'
+                })
+            }
+        },
+      
+    }
 }
 </script>
 
-<style>
-
+<style lang="less" scoped>
+.alarm-notes{
+    padding: 0 20px;
+    .select-list{
+        padding-bottom: 20px;
+        border-bottom: 1px solid #c2cedb;
+        .item{
+            margin-top: 20px;
+            margin-right: 5px;
+        }  
+    }
+    .sg-table{
+        padding: 20px 0;
+        .check-note{
+            margin-left: 50px;
+        }
+        .btn-alarm{
+            width: 200px;
+            float: right;
+            margin-bottom: 20px;
+        }
+        th{
+            text-align: center;
+        }
+    }
+    .footer-pagination{
+        text-align: center;
+    }
+    .ul-box{
+        min-height: 300px;
+    }
+}
 </style>
+<style lang="less">
+.alarm-notes{
+  .el-dialog__header{
+      text-align: center;
+    //   background: #409EFF;
+    //   color: #ffffff;
+  }  
+}
+</style>
+

src/test/zhulz/manageNote.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="manage-note">
+    <div class="box" v-if="isrefresh">
+      <el-table :data="tableData" style="width: 100%" border size="medium"> 
+        <el-table-column label="姓名" align="center">
+          <template slot-scope="scope">
+            <el-input v-if="scope.row.edit" v-model.trim="scope.row.name" size="small" placeholder="请输入姓名"/>
+            <span v-else>{{scope.row.name}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="手机号" align="center">
+          <template slot-scope="scope">
+            <el-input v-if="scope.row.edit" v-model.trim="scope.row.phone" size="small" placeholder="请输入手机号码"/>
+            <span v-else>{{scope.row.phone}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="邮箱地址" align="center">
+          <template slot-scope="scope">
+            <el-input v-if="scope.row.edit" v-model.trim="scope.row.email" size="small" placeholder="请输入邮箱地址"/>
+            <span v-else>{{scope.row.email}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center">
+          <template slot-scope="scope">
+            <p v-if="scope.row.edit">
+              <el-button type="text" size="small" @click="save(scope.row)">保存</el-button>
+              <el-button type="text" size="small" class="gray" @click="cancel(scope)">取消</el-button>
+            </p>
+            <p v-else>
+              <el-button type="text" size="small" class="red" @click="del(scope)">删除人员</el-button>
+              <el-button type="text" size="small" @click="edit(scope.row)">编辑个人信息</el-button>
+            </p>
+          </template>
+        </el-table-column>
+      </el-table>
+      <p>
+        <el-button type="text" icon="el-icon-setting" @click="addUser">添加人员</el-button>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {
+
+  },
+
+  mixins: [],
+
+  props: {
+
+  },
+
+  data () {
+    return {
+      tableData: [],
+      isrefresh: true,
+    }
+  },
+
+  computed: {
+
+  },
+
+  mounted() {
+
+  },
+
+  methods: {
+    addUser() {
+        this.tableData.push(this.initUser());        
+    },
+    initUser() {
+        return {name: "", phone: "", email: "", edit: true};
+    },
+    save(){},
+    // 取消 编辑取消or新建取消
+    cancel(scope) {
+        if(scope.row.id) {
+            scope.row.edit = false;
+        } else {
+            this.tableData.splice(scope.$index, 1)
+        }
+    },
+    // 编辑
+    edit(row) {
+        row.edit = true;
+    }
+  },
+
+}
+</script>
+
+<style scoped lang="less" >
+.manage-note{
+
+}
+</style>