536 lines
16 KiB
Vue
536 lines
16 KiB
Vue
<template>
|
|
<!-- 基本信息 -->
|
|
<div class="fullHeight">
|
|
<div class="searchBox whiteBlock">
|
|
<el-form
|
|
:inline="true"
|
|
size="medium"
|
|
:model="formInline"
|
|
class="demo-form-inline"
|
|
>
|
|
<!-- <el-form-item :label="$t('message.lifter.devName')">
|
|
<el-select
|
|
v-model="formInline.alarmPushWorkerId"
|
|
multiple
|
|
:placeholder="$t('message.alarmValueSet.placeholder_select')"
|
|
size="medium"
|
|
style="margin-right: 20px"
|
|
>
|
|
<el-option
|
|
v-for="item in options"
|
|
:key="item.id"
|
|
:label="item.workerName"
|
|
:value="item.id"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="设备编号">
|
|
<el-select
|
|
v-model="formInline.alarmPushWorkerId"
|
|
multiple
|
|
:placeholder="$t('message.alarmValueSet.placeholder_select')"
|
|
size="medium"
|
|
style="margin-right: 20px"
|
|
>
|
|
<el-option
|
|
v-for="item in options"
|
|
:key="item.id"
|
|
:label="item.workerName"
|
|
:value="item.id"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item> -->
|
|
<el-form-item>
|
|
<!-- <el-button type="primary" plain>{{
|
|
$t("message.lifter.demand")
|
|
}}</el-button> -->
|
|
<el-button type="warning" plain @click="refresh">{{
|
|
$t("message.alarmValueSet.refresh")
|
|
}}</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div class="table_wrap whiteBlock">
|
|
<el-table class="tables" :data="List">
|
|
<!-- 序号 -->
|
|
<el-table-column
|
|
width="50"
|
|
type="index"
|
|
:label="$t('message.energyManage.material.serialNo')"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="ammeterName"
|
|
align="center"
|
|
:label="$t('message.alarmValueSet.deviceName')"
|
|
></el-table-column>
|
|
|
|
<el-table-column
|
|
prop="ammeterNo"
|
|
: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">{{
|
|
$t("message.deviceManage.isClosedArr")[scope.row.isClosed - 1]
|
|
}}</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column
|
|
prop="realTime"
|
|
width="200"
|
|
:label="$t('message.alarmValueSet.createTime')"
|
|
align="center"
|
|
></el-table-column> -->
|
|
<!-- 设备状态 -->
|
|
<el-table-column
|
|
prop="online"
|
|
label="设备状态"
|
|
align="center"
|
|
>
|
|
<template slot-scope="scope">
|
|
{{ scope.row.online==0?'离线':'在线' }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="deviceStatus"
|
|
label="设备激活状态"
|
|
align="center"
|
|
>
|
|
<template slot-scope="scope">
|
|
{{ scope.row.deviceStatus==0?'已注册':scope.row.deviceStatus==1?'已激活':'已注销' }}
|
|
</template>
|
|
</el-table-column>
|
|
<!-- 阀值状态 -->
|
|
<el-table-column
|
|
prop="gateStatus"
|
|
label="阀门状态"
|
|
align="center"
|
|
>
|
|
<template slot-scope="scope">
|
|
{{ scope.row.gateStatus==1?'开':'关' }}
|
|
</template>
|
|
</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)" class="operationText">
|
|
<img src="@/assets/images/yu.png" alt="" />{{
|
|
$t("message.alarmValueSet.yjz")
|
|
}}
|
|
</div>
|
|
<div @click="bao(scope.row)" class="operationText">
|
|
<img src="@/assets/images/bao.png" alt="" />{{
|
|
$t("message.alarmValueSet.bjz")
|
|
}}
|
|
</div> -->
|
|
<el-button type="text" @click="threshold(scope.row)" class="operationText">
|
|
{{$t('message.energyManage.valveControlSet')}}
|
|
<!-- 阀值设置 -->
|
|
</el-button>
|
|
<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>
|
|
|
|
<!-- <el-pagination
|
|
class="pagerBox"
|
|
@size-change="SizeChange"
|
|
@current-change="CurrentChange"
|
|
:current-page="pagInfo.pageNo"
|
|
:page-sizes="$store.state.PAGESIZRS"
|
|
:page-size="pagInfo.pageSize"
|
|
layout="total, sizes, prev, pager, next"
|
|
:total="pagInfo.total"
|
|
background
|
|
></el-pagination> -->
|
|
</div>
|
|
|
|
<el-dialog
|
|
:title="$t('message.alarmValueSet.Popup_title')[Popup.type]"
|
|
:visible.sync="Popup.show"
|
|
width="667px"
|
|
:modal-append-to-body="false"
|
|
>
|
|
<div class="dialog_content">
|
|
<el-form
|
|
:modal-append-to-body="false"
|
|
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="ammeterNo"
|
|
>
|
|
<el-input
|
|
v-model="addEditForm.ammeterNo"
|
|
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="选择日期">
|
|
<!–value-format="yyyy-MM-dd hh:mm:ss"–>
|
|
</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="ammeterName"
|
|
>
|
|
<el-input
|
|
v-model="addEditForm.ammeterName"
|
|
:placeholder="$t('message.alarmValueSet.placeholder')"
|
|
></el-input>
|
|
</el-form-item>
|
|
<!-- 安装位置 -->
|
|
<el-form-item :label="$t('message.energyManage.installLocation')">
|
|
<el-input
|
|
v-model="addEditForm.ammeterPosition"
|
|
: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" disabled >
|
|
<template slot="append">
|
|
<el-link type="primary" @click="toGetLocalFn">{{
|
|
$t(
|
|
"message.companyDiagram.dialog_ProjectPop_up.coordinatePicking"
|
|
)
|
|
}}</el-link>
|
|
</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('message.alarmValueSet.dialog_edit.lat')">
|
|
<el-input
|
|
v-model="addEditForm.lat" disabled ></el-input>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('message.alarmValueSet.dialog_edit.pusher')">
|
|
<el-select
|
|
v-model="addEditForm.alarmPushWorkerId"
|
|
multiple
|
|
: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 === 'threshold'"
|
|
size="medium"
|
|
ref="warningForm"
|
|
label-width="140px"
|
|
class="dialogFormBox yj-dialogFormBox"
|
|
>
|
|
<!-- 月用电量 -->
|
|
<el-form-item v-for="(item,index) in thresholdArr" :key="index"
|
|
:label="item.monthNum+$t('message.energyManage.monthUseElectricity')"
|
|
prop="pm25Warning"
|
|
>
|
|
<el-input
|
|
v-model="item.thresholdValue"
|
|
:placeholder="$t('message.alarmValueSet.placeholder')"
|
|
></el-input>
|
|
</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>
|
|
<!--高德地图-->
|
|
<gd-map v-if="showMap" @closeMap="closeMap" @save="getLngLat"></gd-map>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {
|
|
editwaterMeterApi,
|
|
getwaterMeterListApi,
|
|
addOrUpdateWaterMeterThresholdApi,
|
|
selelctWaterMeterThresholdApi
|
|
} from '@/assets/js/api/electricDevManage'
|
|
import {
|
|
getProjectChilderSystemUserListApi
|
|
} from "@/assets/js/api/configManage";
|
|
import gdMap from '@/components/map/gd-map'
|
|
|
|
export default {
|
|
mounted() {
|
|
this.getList();
|
|
this.getLaborManagementList();
|
|
},
|
|
components:{
|
|
gdMap
|
|
},
|
|
data() {
|
|
return {
|
|
showMap: false,
|
|
props: {
|
|
multiple: true,
|
|
},
|
|
formInline:{
|
|
|
|
},
|
|
addEditRules: {
|
|
ammeterName: [
|
|
{
|
|
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,
|
|
},
|
|
pagInfo: {
|
|
pageNo: 1, //页数
|
|
pageSize: 10, //条数
|
|
total: 0, //总条数
|
|
},
|
|
thresholdArr:[]
|
|
};
|
|
},
|
|
methods: {
|
|
//获取阈值
|
|
selelctWaterMeterThreshold(ammeterNo){
|
|
selelctWaterMeterThresholdApi({ammeterNo:ammeterNo,projectSn:this.$store.state.projectSn}).then(res=>{
|
|
if(res.result&&res.result.length>0){
|
|
this.thresholdArr=res.result
|
|
}else{
|
|
this.thresholdArr=[]
|
|
for (let index = 1; index <= 12; index++) {
|
|
this.thresholdArr.push({
|
|
thresholdValue:'',ammeterNo:ammeterNo,projectSn:this.$store.state.projectSn,monthNum:index
|
|
})
|
|
|
|
}
|
|
}
|
|
|
|
})
|
|
},
|
|
//获取经纬度
|
|
toGetLocalFn() {
|
|
this.showMap = true;
|
|
// window.open("https://lbs.amap.com/console/show/picker");
|
|
},
|
|
closeMap(val) {
|
|
this.showMap = val;
|
|
},
|
|
getLngLat(v) {
|
|
this.showMap = false;
|
|
this.addEditForm.lng = v.lng;
|
|
this.addEditForm.lat = v.lat;
|
|
console.log('查看经纬度',v);
|
|
},
|
|
SizeChange(val) {
|
|
this.pagInfo.pageSize = val;
|
|
this.getList();
|
|
},
|
|
CurrentChange(val) {
|
|
this.pagInfo.pageNo = val;
|
|
this.getList();
|
|
},
|
|
|
|
handle(type, show) {
|
|
//打开弹窗前的统一处理
|
|
this.Popup = {
|
|
type: type,
|
|
show: show,
|
|
};
|
|
},
|
|
|
|
setWarningType(warningType) {
|
|
addOrUpdateWaterMeterThresholdApi(this.thresholdArr).then((result) => {
|
|
if (result.success) {
|
|
this.$message.success(result.message);
|
|
console.log("预警值/报警值设置成功", result);
|
|
}
|
|
});
|
|
},
|
|
submit() {
|
|
if (this.Popup.type === "threshold") {
|
|
this.setWarningType(1);
|
|
this.Popup.show = false;
|
|
} else if (this.Popup.type === "edit") {
|
|
this.$refs.addEditForm.validate((valid) => {
|
|
if (valid) {
|
|
let params = this.addEditForm;
|
|
params.alarmPushWorkerId = this.addEditForm.alarmPushWorkerId.join(",");
|
|
params.projectSn = this.$store.state.projectSn;
|
|
console.log("编辑信息", this.addEditForm);
|
|
editwaterMeterApi(params).then((result) => {
|
|
if (result.success) {
|
|
// console.log('信息编辑成功', result);
|
|
this.$message.success(result.message);
|
|
this.getList();
|
|
this.Popup.show = false;
|
|
}
|
|
});
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
}
|
|
},
|
|
Change() {},
|
|
threshold(obj) {
|
|
console.log("阀值", obj);
|
|
this.handle("threshold", true);
|
|
// obj.warningType = 1;
|
|
this.selelctWaterMeterThreshold(obj.ammeterNo)
|
|
// 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() {
|
|
getwaterMeterListApi({ 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,
|
|
workerName: "",
|
|
}).then((result) => {
|
|
if (result.success) {
|
|
console.log("劳务人员", result);
|
|
this.options = result.result;
|
|
}
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less">
|
|
.tableBtns {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.yj-dialogFormBox {
|
|
width: 462px;
|
|
}
|
|
</style>
|