|
@@ -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>
|
|
|
+
|