zhgdyun/src/views/projectFront/environmentalMonitor/alarmValueSet.vue

<template>
    <div class="fullHeight">
        <div class="searchBox whiteBlock">
            <el-button type="warning" plain size="medium" @click="refresh">{{$t('message.alarmValueSet.refresh')}}</el-button>
        </div>
        <div class="table_wrap whiteBlock">
        <el-table class="tables" :data="List">
            <el-table-column width="200" prop="deviceName" align="center"
                             :label="$t('message.alarmValueSet.deviceName')"
            ></el-table-column>

            <el-table-column prop="deviceId" :label="$t('message.alarmValueSet.deviceId')"
                             align="center"></el-table-column>
            <el-table-column prop="isClosed" :label="$t('message.alarmValueSet.isClosed')" align="center">
                <template slot-scope="scope">{{scope.row.isClosed ==1?'在线':'离线'}}</template>
            </el-table-column>
            <el-table-column prop="address" width="100" :label="$t('message.alarmValueSet.address')"
                             align="center"></el-table-column>
            <el-table-column prop="realTime" width="200"
                             :label="$t('message.alarmValueSet.createTime')"
                             align="center"></el-table-column>
            <el-table-column
                    :label="$t('message.alarmValueSet.operation')" align="center">
                <template slot-scope="scope">
                    <div class="tableBtns">
                        <div @click="yu(scope.row,2)" class="operationText"><img src="@/assets/images/yu.png" alt="">{{$t('message.alarmValueSet.yjz')}}
                        </div>
                        <div @click="bao(scope.row,1)" class="operationText"><img src="@/assets/images/bao.png" alt="">{{$t('message.alarmValueSet.bjz')}}
                        </div>
                        <div @click="edit(scope.row)" class="operationText">
                            <img src="@/assets/images/icon-edit.png" width="15px" height="15px"/>
                            <span>{{$t('message.alarmValueSet.edit')}}</span>
                        </div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        </div>
        <el-dialog
                :modal-append-to-body="false"
                :title="$t('message.alarmValueSet.Popup_title')[Popup.type]"
                :visible.sync="Popup.show"
                width="667px">
            <div class="dialog_content">
                <el-form v-show="Popup.type === 'edit'" size="medium"
                         ref="addEditForm" :model="addEditForm" :rules="addEditRules"
                         label-width="120px" class="dialogFormBox">
                    <!--<el-form-item :label="$t('message.alarmValueSet.dialog_edit.contactNumber')" >
                        <el-input v-model="addEditForm.devName"
                                  :placeholder="$t('message.alarmValueSet.placeholder')"></el-input>
                    </el-form-item>-->
                    <el-form-item :label="$t('message.alarmValueSet.dialog_edit.deviceId')" prop="deviceId">
                        <el-input v-model="addEditForm.deviceId" disabled
                                  :placeholder="$t('message.alarmValueSet.placeholder')"></el-input>
                    </el-form-item>
                    <!--<el-form-item label="接收时间" prop="realTime">
                        <el-date-picker
                                v-model="addEditForm.realTime"
                                type="datetime"
                                value-format="yyyy-MM-dd hh:mm:ss"
                                placeholder="选择日期">
                            &lt;!&ndash;value-format="yyyy-MM-dd hh:mm:ss"&ndash;&gt;
                        </el-date-picker>
                    </el-form-item>-->
                    <el-form-item :label="$t('message.alarmValueSet.dialog_edit.isEnable')" prop="isEnable">
                        <el-radio-group v-model="addEditForm.isEnable">
                            <el-radio :label="0">{{$t('message.alarmValueSet.dialog_edit.isEnableArr')[0]}}</el-radio>
                            <el-radio :label="1">{{$t('message.alarmValueSet.dialog_edit.isEnableArr')[1]}}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item :label="$t('message.alarmValueSet.dialog_edit.name')" prop="deviceName">
                        <el-input v-model="addEditForm.deviceName"
                                  :placeholder="$t('message.alarmValueSet.placeholder')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.alarmValueSet.dialog_edit.address')">
                        <el-input v-model="addEditForm.address"
                                  :placeholder="$t('message.alarmValueSet.placeholder')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.alarmValueSet.dialog_edit.lng')">
                        <el-input v-model="addEditForm.lng"
                                  :placeholder="$t('message.alarmValueSet.placeholder')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.alarmValueSet.dialog_edit.lat')">
                        <el-input v-model="addEditForm.lat"
                                  :placeholder="$t('message.alarmValueSet.placeholder')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.alarmValueSet.dialog_edit.pusher')">
                        <el-select v-model="addEditForm.alarmPushWorkerId" multiple
                                   filterable
                                   :placeholder="$t('message.alarmValueSet.placeholder_select')">
                            <el-option
                            v-for="item in options"
                            :key="item.workerId"
                            :label="item.workerName"
                            :value="item.workerId"
                        >
                        </el-option>
                        </el-select>
                    </el-form-item>
                    <div class="dialog-footer">
                        <el-button
                                class="cancleBtn"
                                @click="Popup.show = false"
                                icon="el-icon-circle-close"
                                size="medium"
                        >{{$t('message.alarmValueSet.cancel')}}
                        </el-button>
                        <el-button
                                type="primary"
                                icon="el-icon-circle-check"
                                @click="submit"
                                size="medium"
                        >{{$t('message.alarmValueSet.save')}}
                        </el-button>
                    </div>
                </el-form>
                <el-form v-if="Popup.type === 'ybj'||Popup.type === 'bjz'" size="medium" ref="warningForm"
                         label-width="140px" class="dialogFormBox yj-dialogFormBox">
                    <el-form-item :label="$t('message.alarmValueSet.early.pm25')" prop="pm25Warning">
                        <el-input v-model="warningInfo.pm25Warning"
                                  :placeholder="$t('message.alarmValueSet.placeholder')"
                                  type="number"
                                  oninput="if(value.length>20)value=value.slice(0,20)"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.alarmValueSet.early.pm10')" prop="pm10Warning">
                        <el-input v-model="warningInfo.pm10Warning"
                                  :placeholder="$t('message.alarmValueSet.placeholder')"
                                  type="number"
                                  oninput="if(value.length>20)value=value.slice(0,20)"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.alarmValueSet.early.tis')" prop="realTimeTsp">
                        <el-input v-model="warningInfo.realTimeTsp"
                                  :placeholder="$t('message.alarmValueSet.placeholder')"
                                  type="number"
                                  oninput="if(value.length>20)value=value.slice(0,20)"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.alarmValueSet.early.windSpeed')" prop="windSpeed">
                        <el-input v-model="warningInfo.windSpeed"
                                  :placeholder="$t('message.alarmValueSet.placeholder')"
                                  type="number"
                                  oninput="if(value.length>20)value=value.slice(0,20)"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.alarmValueSet.early.noise')" prop="noiseWarning">
                        <el-input v-model="warningInfo.noiseWarning"
                                  :placeholder="$t('message.alarmValueSet.placeholder')"
                                  type="number"
                                  oninput="if(value.length>20)value=value.slice(0,20)"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.alarmValueSet.early.humidity')" prop="realTimeHumidity">
                        <el-input v-model="warningInfo.realTimeHumidity"
                                  :placeholder="$t('message.alarmValueSet.placeholder')"
                                  type="number"
                                  oninput="if(value.length>20)value=value.slice(0,20)"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.alarmValueSet.early.MinTemperature')" prop="minTemperature">
                        <el-input v-model="warningInfo.minTemperature"
                                  :placeholder="$t('message.alarmValueSet.placeholder')"
                                  type="number"
                                  oninput="if(value.length>20)value=value.slice(0,20)"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('message.alarmValueSet.early.maxTemperature')" prop="maxTemperature">
                        <el-input v-model="warningInfo.maxTemperature"
                                  :placeholder="$t('message.alarmValueSet.placeholder')"
                                  type="number"
                                  oninput="if(value.length>20)value=value.slice(0,20)">
                        </el-input>
                    </el-form-item>
                    <!-- pm2.5预警是否推送   pm2.5报警是否推送-->
                    <el-form-item :label="type == 2? $t('message.projectInfo.PM25warning'):$t('message.projectInfo.PM25alarm')">
                        <el-radio-group v-model="warningInfo.isNotPush">
                            <el-radio :label="1">{{$t('message.alarmValueSet.early.isNotPushArr')[0]}}</el-radio>
                            <el-radio :label="2">{{$t('message.alarmValueSet.early.isNotPushArr')[1]}}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <div class="dialog-footer">
                        <el-button
                                class="cancleBtn"
                                @click="Popup.show = false"
                                icon="el-icon-circle-close"
                                size="medium"
                        >{{$t('message.alarmValueSet.cancel')}}
                        </el-button>
                        <el-button
                                type="primary"
                                icon="el-icon-circle-check"
                                @click="submit"
                                size="medium"
                        >{{$t('message.alarmValueSet.save')}}
                        </el-button>
                    </div>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {
        environmentDevEdit,
        environmentDevList,
        environmentWarningEdit,
        getEnvironmentWarningInfo
    } from "../../../assets/js/api/environmentManage";
  import {
  getProjectChilderSystemUserListApi
} from "@/assets/js/api/configManage";
    export default {
        mounted() {
            this.getList();
            this.getLaborManagementList();
        },
        data() {
            return {
                props: {
                    multiple: true
                },
                addEditRules: {
                    deviceName: [
                        {required: true, message: this.$t('message.deviceManage.rules.devName'), trigger: "blur"},
                        {required: true, message: this.$t('message.deviceManage.rules.devName'), trigger: "change"}
                    ]
                },
                options: [
                    /*{realName: "曾祥万", value: 1},
                    {realName: "李先生", value: 2},*/
                ],
                warningInfo: {},
                addEditForm: {},
                List: [],
                Popup: {
                    type: 'edit',
                    show: false
                },
                type:''
            }
        },
        methods: {
            handle(type, show) {//打开弹窗前的统一处理
                this.Popup = {
                    type: type,
                    show: show
                }
            },
            setWarningType(warningType) {
                this.warningInfo.warningType = warningType;
                environmentWarningEdit(this.warningInfo).then(result => {
                    if (result.success) {
                        this.$message.success(result.message);
                        console.log('预警值/报警值设置成功', result);
                    }
                })
            },
            submit() {
                if (this.Popup.type === 'ybj') {
                    console.log('打印预警设置', this.warningInfo)
                    this.setWarningType(2);
                    this.Popup.show = false;
                } else if (this.Popup.type === 'bjz') {
                    this.setWarningType(1);
                    this.Popup.show = false;
                } else if (this.Popup.type === 'edit') {
                    this.$refs.addEditForm.validate((valid) => {
                        if (valid) {
                            let params = this.addEditForm;
                            if(this.addEditForm.alarmPushWorkerId){
                                params.alarmPushWorkerId = this.addEditForm.alarmPushWorkerId.join(',');
                            }

                            params.projectSn = this.$store.state.projectSn;
                            console.log('编辑信息', this.addEditForm)
                            environmentDevEdit(params).then(result => {
                                if (result.success) {
                                    // console.log('信息编辑成功', result);
                                    this.$message.success(result.message);
                                    this.getList();
                                    this.Popup.show = false;
                                }
                            })
                        } else {
                            return false;
                        }
                    });
                }
            },
            Change() {
            },
            yu(obj,type) {
                console.log('预警', obj);
                this.handle('ybj', true);
                obj.warningType = 2;
                this.type = type
                this.getWarningInfo(obj);
                // this.warningInfo.id = obj.id;
                // this.warningInfo.deviceId = obj.deviceId;
                // this.warningInfo.projectSn = obj.projectSn;

            },
            bao(obj,type) {
                this.type = type
                console.log('报警', obj);
                // this.warningInfo.id = obj.id;
                /*this.warningInfo.deviceId = obj.deviceId;
                this.warningInfo.projectSn = obj.projectSn;*/
                this.handle('bjz', true);
                obj.warningType = 1;
                this.getWarningInfo(obj);
            },
            edit(obj) {
                console.log('编辑', obj);
                this.addEditForm = JSON.parse(JSON.stringify(obj));
                if (typeof obj.alarmPushWorkerId === 'string'&& obj.alarmPushWorkerId != '') {
                    this.addEditForm.alarmPushWorkerId = obj.alarmPushWorkerId.split(',')
                }
                this.handle('edit', true);
            },
            getList() {
                environmentDevList({projectSn: this.$store.state.projectSn}).then(result => {
                    if (result.success) {
                        this.List = result.result;
                        console.log('列表', result);
                    }
                })
            },
            refresh() {
                this.getList();
            },
            getWarningInfo(obj) {
                let {deviceId, projectSn, warningType} = obj;
                getEnvironmentWarningInfo({
                    deviceId: deviceId,
                    projectSn: projectSn,
                    warningType: warningType
                }).then(result => {
                    if (result.success) {
                        this.warningInfo = result.result;
                        console.log('预警信息', result);
                    }
                })
            },
            getLaborManagementList() {
                getProjectChilderSystemUserListApi({projectSn: this.$store.state.projectSn}).then(result => {
                    this.options = result.result;
                })
            }
        }
    }
</script>
<style lang="less">
    .tableBtns {
        display: flex;
        justify-content: center;
    }

    .yj-dialogFormBox {
        width: 462px;
    }
</style>