浏览代码

水电告警问题

Shannon_mu 3 年之前
父节点
当前提交
121d051991

+ 118 - 0
operationSupport/src/views/alarmManagement/hydropowerAlarmDetails/index.vue

@@ -0,0 +1,118 @@
+<template>
+    <div class="main">
+        <div class="search">
+            <el-input placeholder="输入告警名称/房间地址" class="search-input" clearable v-model="mixins_query.name"></el-input>
+            <el-date-picker
+                v-model="times"
+                value-format="yyyy-MM-dd"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                :picker-options="pickerOptions"
+                @change="effectiveDateToggle"
+                :editable="false"
+            ></el-date-picker>
+            <el-button type="primary" placeholder="状态" class="search-btn" @click="mixins_search" icon="el-icon-search">查询 </el-button>
+        </div>
+        <div class="roles-wrap">
+            <zz-table
+                :cols="cols"
+                :settings="{ showIndex: true, stripe: true }"
+                :loading="mixins_onQuery"
+                :data="mixins_list"
+                :pageset="mixins_pageset"
+                @page-change="pageChange"
+            >
+                <template slot="operate" slot-scope="scope">
+                    <span v-if="scope.row.type == 1">日用水</span>
+                    <span v-else-if="scope.row.type == 2">月用水</span>
+                    <span v-else-if="scope.row.type == 3">日用电</span>
+                    <span v-else-if="scope.row.type == 4">月用电</span>
+                    {{ scope.row.operate }} {{ scope.row.value }}
+                </template>
+            </zz-table>
+        </div>
+    </div>
+</template>
+
+<script>
+import list from '@utils/list.js';
+export default {
+    mixins: [list],
+    name: 'deviceManagement',
+    data() {
+        return {
+            times: [],
+            cols: [
+                {
+                    label: '告警时间',
+                    prop: 'warningDate'
+                },
+                {
+                    label: '告警名称',
+                    prop: 'name'
+                },
+                {
+                    label: '设备编号',
+                    prop: 'deviceNo'
+                },
+                {
+                    label: '设备类型',
+                    prop: 'categoryId',
+                    format(val) {
+                        if (val == 1) {
+                            return '水表';
+                        } else if (val == 2) {
+                            return '电表';
+                        }
+                    }
+                },
+                {
+                    label: '地址',
+                    prop: 'address'
+                },
+                {
+                    label: '告警规则',
+                    prop: 'ruleDesc'
+                    // slot: 'operate'
+                },
+                {
+                    label: '告警详情',
+                    prop: 'detail'
+                }
+            ],
+            mixins_post: 'post'
+        };
+    },
+    created() {
+        this.mixins_dataUrl = '/sc-community/alarmHydropower/getWarningDetails';
+        this.mixins_query = {};
+        this.mixins_search();
+    },
+    mounted() {},
+    methods: {
+        effectiveDateToggle(e) {
+            let start = '00:00:00',
+                end = '23:59:59';
+            if (!!e) {
+                this.mixins_query.startDate = `${e[0]} ${start}`;
+                this.mixins_query.endDate = `${e[1]} ${end}`;
+            } else {
+                this.mixins_query.startDate = ``;
+                this.mixins_query.endDate = ``;
+            }
+        }
+    }
+};
+</script>
+<style scoped lang='scss'>
+.QRImg > div {
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    text-align: center;
+    left: 50%;
+    transform: translateX(-50%);
+}
+</style>

+ 199 - 0
operationSupport/src/views/alarmManagement/hydropowerAlarmSetting/index.vue

@@ -0,0 +1,199 @@
+<template>
+    <div class="main">
+        <div class="search">
+            <el-input placeholder="输入告警名称" class="search-input" clearable v-model="mixins_query.name"></el-input>
+            <el-select v-model="mixins_query.communityId" placeholder="请选择所属社区" clearable>
+                <el-option v-for="(item, index) in communityArr" :key="index" :label="item.communityName" :value="item.id"></el-option>
+            </el-select>
+
+            <el-select placeholder="状态" v-model="mixins_query.enable" clearable>
+                <el-option v-for="(item, index) in status" :key="index" :label="item.label" :value="item.status">{{
+                    item.label
+                }}</el-option>
+            </el-select>
+            <el-button type="primary" placeholder="状态" class="search-btn" @click="mixins_search" icon="el-icon-search">查询 </el-button>
+
+            <div class="search-icon">
+                <el-tooltip class="item" effect="light" placement="bottom" content="添加水电告警设置">
+                    <i class="zoniot_font zoniot-icon-tianjia2" @click="addOrEdit('add')"></i>
+                </el-tooltip>
+            </div>
+        </div>
+        <div class="roles-wrap">
+            <zz-table
+                :cols="cols"
+                :settings="{ showIndex: true, stripe: true }"
+                :loading="mixins_onQuery"
+                :data="mixins_list"
+                :pageset="mixins_pageset"
+                @page-change="pageChange"
+            >
+                <template slot="operate" slot-scope="scope">
+                    <span v-if="scope.row.type == 1">日用水 {{ scope.row.operate }} {{ scope.row.value }}吨</span>
+                    <span v-else-if="scope.row.type == 2">月用水 {{ scope.row.operate }} {{ scope.row.value }}吨</span>
+                    <span v-else-if="scope.row.type == 3">日用电 {{ scope.row.operate }} {{ scope.row.value }}度</span>
+                    <span v-else-if="scope.row.type == 4">月用电 {{ scope.row.operate }} {{ scope.row.value }}度</span>
+                </template>
+                <template slot-scope="scope" slot="opt">
+                    <div class="opt">
+                        <el-tooltip effect="light" placement="bottom" content="编辑">
+                            <i class="zoniot_font zoniot-icon-bianji" @click="addOrEdit('edit', scope.row)"></i>
+                        </el-tooltip>
+                        <el-tooltip effect="light" placement="bottom" content="删除">
+                            <i class="zoniot_font zoniot-icon-shanchu redText" @click="deluserbyidFn(scope.row.id)"></i>
+                        </el-tooltip>
+                        <el-tooltip class="item" effect="light" placement="bottom" :content="scope.row.enable == 1 ? '禁用' : '启用'">
+                            <i v-if="scope.row.enable == 0" class="zoniot_font  zoniot-icon-jinyong1" @click="Scrap(scope.row, 1)"></i>
+                            <i v-else class="zoniot_font zoniot-icon-qiyong1" @click="Scrap(scope.row, 0)"></i>
+                        </el-tooltip>
+                    </div>
+                </template>
+            </zz-table>
+        </div>
+    </div>
+</template>
+
+<script>
+import list from '@utils/list.js';
+export default {
+    mixins: [list],
+    name: 'deviceManagement',
+    data() {
+        let _this = this;
+        return {
+            selectRow: [],
+            // 数据列表
+            status: [
+                {
+                    status: 1,
+                    label: '启用'
+                },
+                {
+                    status: 0,
+                    label: '禁用'
+                }
+            ],
+            cols: [
+                {
+                    label: '告警名称',
+                    prop: 'name'
+                },
+                {
+                    label: '所属社区',
+                    prop: 'communityName'
+                },
+                {
+                    label: '告警规则',
+                    prop: 'operate',
+                    slot: 'operate'
+                },
+                {
+                    label: '状态',
+                    prop: 'enable',
+                    format(val) {
+                        if (val == 1) {
+                            return '启用';
+                        } else if (val == 0) {
+                            return '禁用';
+                        }
+                    }
+                },
+                {
+                    label: '操作',
+                    prop: 'id',
+                    slot: 'opt'
+                }
+            ],
+            mixins_post: 'post',
+            communityArr: []
+        };
+    },
+    created() {
+        this.getorgTree();
+        this.mixins_dataUrl = '/sc-community/alarmHydropower/page';
+        this.mixins_query = {};
+        this.mixins_search();
+    },
+    mounted() {},
+    methods: {
+        productChange(va) {
+            this.mixins_query.productId = _.last(va);
+        },
+        getorgTree() {
+            this.$http
+                .get('/sc-community/assets/community/list')
+                .then((data) => {
+                    this.communityArr = data.data;
+                    this.$store.commit('setAreaSelect', data.data);
+                })
+
+                .catch(function () {});
+        },
+        deluserbyidFn(id) {
+            const h = this.$createElement;
+            this.$msgBox(`删除`, '删除后将无法恢复,请问是否继续?')
+                .then(() => {
+                    this.$http.get('/sc-community/alarmHydropower/delete', { id: id }).then(({ status, data, msg }) => {
+                        if (0 === status) {
+                            this.$message({
+                                type: 'success',
+                                message: '删除成功!'
+                            });
+                            this.mixins_search();
+                        }
+                    });
+                })
+                .catch(() => {});
+        },
+        Scrap(row, status) {
+            this.$msgBox(`确认提示`, `是否${status == 0 ? '确定禁用' : '启用'}告警规则?`)
+                .then(() => {
+                    this.$http
+                        .post('/sc-community/alarmHydropower/updateEnable', { id: row.id, enable: status })
+                        .then(({ status, data, msg }) => {
+                            if (0 === status) {
+                                this.$message({
+                                    type: 'success',
+                                    message: msg
+                                });
+                                this.mixins_search();
+                            }
+                        });
+                })
+                .catch(() => {});
+        },
+        addOrEdit(todo, data = {}) {
+            new Promise((resolve) => {
+                let title = '新增水电告警设置';
+                if (todo !== 'add') {
+                    title = '修改水电告警设置';
+                }
+                this.$store.dispatch('addPopup', {
+                    url: '/alarmManagement/hydropowerAlarmSetting/popups/add.vue',
+                    width: '760px',
+                    height: '450px',
+                    props: {
+                        data,
+                        todo,
+                        communityArr: this.communityArr,
+                        callback: resolve
+                    },
+                    title: title
+                });
+            }).then(() => {
+                this.mixins_search();
+            });
+        }
+    }
+};
+</script>
+<style scoped lang='scss'>
+.QRImg > div {
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    text-align: center;
+    left: 50%;
+    transform: translateX(-50%);
+}
+</style>

+ 129 - 0
operationSupport/src/views/alarmManagement/hydropowerAlarmSetting/popups/add.vue

@@ -0,0 +1,129 @@
+<template>
+    <div class="formContent">
+        <el-form ref="form" :model="formData" :rules="rules">
+            <div class="formContent-item_title">设置对象</div>
+            <el-form-item label="告警名称" prop="name" label-width="80px">
+                <el-input v-model="formData.name" clearable placeholder="请输入告警名称"></el-input>
+            </el-form-item>
+            <el-form-item label="所属社区" prop="communityId" label-width="80px">
+                <el-select v-model="formData.communityId" placeholder="请选择社区">
+                    <el-option v-for="(item, index) in communityArr" :key="index" :label="item.communityName" :value="item.id"></el-option>
+                </el-select>
+            </el-form-item>
+            <div class="formContent-item_title">告警规则</div>
+            <div class="flex-contetn">
+                <el-form-item label="规则项" prop="type" class="fisrt">
+                    <el-select placeholder="状态" v-model="formData.type" clearable>
+                        <el-option label="日用水" :value="1"></el-option>
+                        <el-option label="月用水" :value="2"></el-option>
+                        <el-option label="日用电" :value="3"></el-option>
+                        <el-option label="月用电" :value="4"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="运算符" prop="operate">
+                    <el-select placeholder="状态" v-model="formData.operate" clearable>
+                        <el-option label="=" value="="></el-option>
+                        <el-option label=">" value=">"></el-option>
+                        <el-option label="≥" value="≥"></el-option>
+                        <el-option label="<" value="<"></el-option>
+                        <el-option label="≤" value="≤"></el-option>
+                        <el-option label="≠" value="≠"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="条件值" prop="value" class="inputs">
+                    <el-input v-model="formData.value" clearable placeholder="请输入数值"></el-input>
+                </el-form-item>
+            </div>
+        </el-form>
+    </div>
+</template>
+<script>
+export default {
+    props: ['params'],
+    data() {
+        return {
+            communityArr: [],
+            formData: {
+                name: '',
+                communityId: '',
+                type: '',
+                operate: '',
+                value: ''
+            },
+            rules: {
+                name: [this.$valid.inputRequired('告警名称')],
+                communityId: [this.$valid.selectRequired('社区')],
+                type: [this.$valid.selectRequired('规则项')],
+                operate: [this.$valid.selectRequired('运算符')],
+                value: [this.$valid.inputRequired('条件值')]
+            }
+        };
+    },
+    methods: {
+        submit() {
+            this.$refs.form.validate((valid) => {
+                if (valid) {
+                    var loading = this.$loading();
+                    let url = '/sc-community/alarmHydropower/add';
+                    if (this.params.todo == 'edit') {
+                        url = '/sc-community/alarmHydropower/update';
+                    }
+                    this.$http
+                        .post(url, this.formData)
+                        .then(({ status, msg }) => {
+                            if (status == 0) {
+                                this.$message.success(msg);
+                                this.params.callback();
+                                this.$emit('close');
+                            } else {
+                                this.$message.error(msg);
+                            }
+                            loading.close();
+                        })
+                        .catch(() => {
+                            loading.close();
+                        });
+                }
+            });
+        }
+    },
+    created() {
+        this.communityArr = this.params.communityArr;
+        if (this.params.todo == 'edit') {
+            this.formData = JSON.parse(JSON.stringify(this.params.data));
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+@import '@assets/css/public-style.scss';
+.flex-contetn {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    border: 1px solid #e0e1e3;
+
+    /deep/ .el-form-item__label {
+        float: initial;
+        display: block;
+        text-align: left;
+        line-height: rem(40);
+        background: #f8fcff;
+        padding-left: rem(20);
+    }
+
+    /deep/ .el-form-item__content {
+        padding: 0 rem(10);
+        margin-top: rem(20);
+    }
+    .inputs {
+        /deep/ .el-form-item__content {
+            padding-right: rem(20);
+        }
+    }
+    .fisrt {
+        /deep/ .el-form-item__content {
+            padding-left: rem(20);
+        }
+    }
+}
+</style>

+ 2 - 2
operationSupport/src/views/performanceManagement/performanceStatistics/components/echartOptions.js

@@ -267,7 +267,7 @@ export const histogramOption = (data = []) => {
                 x: 'center',
                 y: 'center',
                 textStyle: {
-                    color: '#212226',
+                    color: '#424656',
                     fontWeight: 'normal',
                     fontSize: 14
                 }
@@ -346,7 +346,7 @@ export const ringFigureOption = (data = []) => {
             x: 'center',
             y: 'center',
             textStyle: {
-                color: '#212226',
+                color: '#424656',
                 fontWeight: 'normal',
                 fontSize: 14
                }