zhgdyun/src/views/projectFront/towerCrane/wireRopeMonitoring.vue

528 lines
18 KiB
Vue

<template>
<div class="fullHeight whiteBlock">
<div style="padding: 15px 15px 0">
<el-form :inline="true" ref="searchForm" :model="searchForm" size="medium">
<el-form-item label="设备名称">
<el-input v-model="searchForm.devName" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="日期">
<el-date-picker
v-model="timeValue"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd HH:mm:ss"
>
</el-date-picker>
</el-form-item>
<el-button type="primary" size="medium" plain @click="getList">{{
$t("message.energyManage.waybill.query")
}}</el-button>
<el-button type="warning" size="medium" plain @click="refresh">{{
$t("message.deviceManage.refresh")
}}</el-button>
<el-button v-permission="{
key: 'add',
menuPath: '/project/towerCrane/reportForm',
}" type="primary" size="medium" @click="carAdd(1)">新增</el-button>
</el-form>
</div>
<div class="table_wrap whiteBlock">
<el-table class="tables" :data="List" height="600" style="width: 100%">
<el-table-column prop="devName" label="设备信息" align="center"></el-table-column>
<el-table-column prop="damageSeverity" align="center" label="报警信息">
<template slot-scope="scope">
{{
scope.row.damageSeverity == 0
? "轻微"
: scope.row.damageSeverity == 1
? "轻度"
: scope.row.damageSeverity == 2
? "中度"
: scope.row.damageSeverity == 3
? "较重"
: scope.row.damageSeverity == 4
? "严重"
: scope.row.damageSeverity == 5
? "超限"
: ""
}}
</template>
</el-table-column>
<el-table-column
prop="startTime"
align="center"
label="开始时间"
></el-table-column>
<!-- 单位 -->
<el-table-column prop="endTime" align="center" label="结束时间"></el-table-column>
<el-table-column prop="flawCnt" label="损伤点数" align="center">
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<div class="tableBtns">
<div style="cursor: pointer" @click.stop="btnDetai(scope.row)">
<i style="color: #82a5f8; margin-right: 5px" class="el-icon-tickets"></i>
<span>详情</span>
</div>
<!-- <div @click="edit(scope.row)" class="operationText">
<img
src="@/assets/images/icon-edit.png"
width="15px"
height="15px"
/>
<span>{{ $t('message.deviceManage.edit') }}</span>
</div> -->
<!-- <div @click="deleteDev(scope.row)" class="operationText">
<img
src="@/assets/images/icon-delete.png"
width="15px"
height="15px"
/>
<span>{{ $t('message.deviceManage.delete') }}</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="Number(pagInfo.total)"
background
></el-pagination>
</div>
<!-- 详情弹框-->
<el-dialog
:modal-append-to-body="false"
title="详情"
:visible.sync="detaiShow"
width="750px"
>
<el-form :inline="true" size="medium">
<el-button type="primary" size="medium" @click="carAdd(2)">新增</el-button>
</el-form>
<el-table class="tables" style="min-height: auto" :data="detaiData">
<el-table-column
label="损伤绳号(m)"
prop="wireRopeNumber"
align="center"
></el-table-column>
<el-table-column
label="损伤部位(m)"
prop="damageLocation"
align="center"
></el-table-column>
<el-table-column label="受损程度" prop="damageSeverity" align="center">
<template slot-scope="scope">
{{
scope.row.damageSeverity == 0
? "轻微"
: scope.row.damageSeverity == 1
? "轻度"
: scope.row.damageSeverity == 2
? "中度"
: scope.row.damageSeverity == 3
? "较重"
: scope.row.damageSeverity == 4
? "严重"
: scope.row.damageSeverity == 5
? "超限"
: ""
}}
</template>
</el-table-column>
<el-table-column
label="损伤量(%)"
prop="damageValue"
align="center"
></el-table-column>
<el-table-column width="180" label="操作" align="center">
<template slot-scope="scope">
<div class="tableBtns">
<div @click="carAdd(3, scope.row)" class="operationText">
<img
src="@/assets/images/icon-edit.png"
width="15px"
height="15px"
/>
<span>{{ $t('message.deviceManage.edit') }}</span>
</div>
<div @click="deleteDev(scope.row)" class="operationText">
<img
src="@/assets/images/icon-delete.png"
width="15px"
height="15px"
/>
<span>{{ $t('message.deviceManage.delete') }}</span>
</div>
</div>
</template>
</el-table-column>
</el-table>
</el-dialog>
<!-- 新增 -->
<el-dialog :visible.sync="dealShow" width="600px" append-to-body :title="dealTitle">
<el-form
ref="dealForm"
:model="dealForm"
:rules="dealFormRules"
size="medium"
label-width="210px"
class="dealForm"
>
<template v-if="dealFormType == 1">
<el-form-item label="选择设备" prop="towerId">
<el-select
v-model="dealForm.towerId"
placeholder="请选择"
clearable
filterable
>
<el-option
v-for="(item, index) in devList"
:key="item.id"
:label="item.devName"
:value="item.id"
></el-option>
</el-select>
<!-- <el-input v-model="dealForm.carNumber" placeholder="请输入"></el-input> -->
</el-form-item>
<el-form-item label="开始时间" prop="startTime">
<el-date-picker
value-format="yyyy-MM-dd hh:mm:ss"
type="datetime"
placeholder="开始时间"
v-model="dealForm.startTime"
:picker-options="handleTimeChange(dealForm.endTime, 'startTime')"
></el-date-picker>
</el-form-item>
<el-form-item label="结束时间" prop="endTime">
<el-date-picker
value-format="yyyy-MM-dd hh:mm:ss"
type="datetime"
placeholder="开始时间"
v-model="dealForm.endTime"
:picker-options="handleTimeChange(dealForm.startTime, 'endTime')"
></el-date-picker>
</el-form-item>
<el-form-item label="损伤点数" prop="flawCnt">
<el-input-number
:controls="false"
v-model="dealForm.flawCnt"
controls-position="right"
placeholder="请输入"
></el-input-number>
</el-form-item>
</template>
<template v-else-if="dealFormType == 2 || dealFormType == 3">
<el-form-item label="损伤绳号(m)" prop="wireRopeNumber">
<el-input-number
:controls="false"
v-model="dealForm.wireRopeNumber"
controls-position="right"
placeholder="请输入"
></el-input-number>
</el-form-item>
<el-form-item label="损伤部位(m)" prop="damageLocation">
<el-input-number
:controls="false"
v-model="dealForm.damageLocation"
controls-position="right"
placeholder="请输入"
></el-input-number>
</el-form-item>
<el-form-item label="受损程度" prop="damageSeverity">
<el-select v-model="dealForm.damageSeverity" placeholder="请选择">
<el-option label="轻微" :value="0"></el-option>
<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-option label="超限" :value="5"></el-option>
</el-select>
</el-form-item>
<el-form-item label="损伤量(%)" prop="damageValue">
<el-input-number
:controls="false"
v-model="dealForm.damageValue"
controls-position="right"
placeholder="请输入"
></el-input-number>
</el-form-item>
</template>
</el-form>
<div slot="footer" style="text-align: center">
<el-button type="primary" @click="submitDealForm">确认</el-button>
<el-button @click="dealFormCancel">取消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
getTckwWireApi,
getTckwWireListApi,
addTckwWireRopeInspectionDamageRecordApi,
addTckwWireApi,
getTowerListApi,
editTckwWireApi,
editTckwWireRopeInspectionDamageRecordApi,
deleteTckwWireRopeInspectionDamageRecordApi
} from "@/assets/js/api/towerCrane";
import dayjs from "dayjs";
export default {
created() {
this.selectNowDate();
this.getList();
this.queryDev();
},
data() {
return {
detaiData: [],
detaiShow: false,
timeValue: "",
pagInfo: {
pageNo: 1, //页数
pageSize: 10, //条数
total: 0, //总条数
},
List: [],
searchForm: {
devName: "",
queryStartTime: "",
queryEndTime: "",
},
tckwWireInfo: {},
dealShow: false,
dealForm: {
towerId: "",
startTime: "",
endTime: "",
flawCnt: "",
wireRopeNumber: "",
damageLocation: "",
damageSeverity: "",
damageValue: "",
},
dealTitle: "",
dealFormRules: {
towerId: [{ required: true, message: "请选择设备", trigger: "change" }],
flawCnt: [{ required: true, message: "请输入损伤点数", trigger: "blur" }],
startTime: [{ required: true, message: "请选择开始时间", trigger: "change" }],
endTime: [{ required: true, message: "请选择结束时间", trigger: "change" }],
wireRopeNumber: [{ required: true, message: "请输入损伤绳号", trigger: "blur" }],
damageLocation: [{ required: true, message: "请输入损伤部位", trigger: "blur" }],
damageSeverity: [{ required: true, message: "请选择受损程度", trigger: "change" }],
damageValue: [{ required: true, message: "请输入损伤量", trigger: "blur" }],
},
carWashDevList: [],
carInfoList: [],
devList: [],
dealFormType: 1,
};
},
methods: {
initDealForm() {
this.dealForm = {
towerId: "",
startTime: "",
endTime: "",
flawCnt: "",
wireRopeNumber: "",
damageLocation: "",
damageSeverity: "",
damageValue: "",
};
},
// 新增
carAdd(type, row) {
this.dealFormType = type;
if(type == 3) {
this.dealForm = {
...row
};
this.dealTitle = "编辑";
} else {
this.initDealForm();
this.dealTitle = "新增";
}
this.$nextTick(() => {
this.$refs["dealForm"] && this.$refs["dealForm"].clearValidate();
});
this.dealShow = true;
},
submitDealForm() {
this.$refs["dealForm"].validate((valid) => {
if (valid) {
let params = Object.assign({}, this.dealForm);
if (this.dealTitle == "新增" && this.dealFormType == 1) {
const find = this.devList.find((item) => item.id == params.towerId);
addTckwWireApi({
...params,
remoteId: find.tckwWireRopeId,
projectSn: this.$store.state.projectSn,
}).then((result) => {
if (result.success) {
this.$message.success(result.message);
this.getList();
this.dealShow = false;
}
});
} else if (this.dealTitle == "新增" && this.dealFormType == 2) {
addTckwWireRopeInspectionDamageRecordApi({
...params,
tckwWireRopeInspectionRecordId: this.tckwWireInfo.id,
projectSn: this.$store.state.projectSn,
}).then((result) => {
if (result.success) {
this.$message.success(result.message);
this.getTckwWireList();
this.dealShow = false;
}
});
} else if (this.dealTitle == "编辑" && this.dealFormType == 3) {
editTckwWireRopeInspectionDamageRecordApi({
...params,
projectSn: this.$store.state.projectSn,
}).then((result) => {
if (result.success) {
this.$message.success(result.message);
this.getTckwWireList();
this.dealShow = false;
}
});
}
}
});
},
dealFormCancel() {
this.initDealForm();
this.$refs["dealForm"].resetFields();
this.dealShow = false;
},
deleteDev(obj) {
console.log('删除', obj);
this.$confirm(this.$t('message.personnelPosition.beaconManage.table.confirmText') + "?", this.$t('message.personnelPosition.beaconManage.table.Tips'), {
confirmButtonText: this.$t('message.personnelPosition.confirmButtonText'),
cancelButtonText: this.$t('message.personnelPosition.cancelButtonText'),
type: "warning",
}).then(() => {
deleteTckwWireRopeInspectionDamageRecordApi({id: obj.id}).then(result => {
if (result.success) {
this.$message.success(result.message);
this.getTckwWireList();
}
})
})
},
handleTimeChange(diffTime, type) {
return {
disabledDate: (time) => {
// console.log(time, diffTime, type)
const date1 = dayjs(time);
const date2 = dayjs(diffTime);
if (type == "startTime") {
return date1.diff(date2) > 0 ? true : false;
} else if (type == "endTime") {
return date2.diff(date1) > 0 ? true : false;
}
return false;
},
};
},
queryDev() {
getTowerListApi({ projectSn: this.$store.state.projectSn }).then((res) => {
// console.log(res)
if (res.code == 200 && res.result) {
this.devList = res.result;
}
});
},
// 获取当前时间 返回YYYY-MM-DD HH:mm:ss
selectNowDate() {
var date = new Date(),
year = date.getFullYear(),
month = date.getMonth() + 1,
day = date.getDate(),
hours = date.getHours(), //获取当前小时数(0-23)
minutes = date.getMinutes(), //获取当前分钟数(0-59)
seconds = date.getSeconds();
month >= 1 && month <= 9 ? (month = "0" + month) : "";
day >= 0 && day <= 9 ? (day = "0" + day) : "";
hours >= 0 && hours <= 9 ? (hours = "0" + hours) : "";
minutes >= 0 && minutes <= 9 ? (minutes = "0" + minutes) : "";
seconds >= 0 && seconds <= 9 ? (seconds = "0" + seconds) : "";
// var timer = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
let timer = year + "-" + month + "-" + day + " " + "00:00:00";
// var timer = year + '-' + month + '-' + day
let timerOut = year + "-" + month + "-" + day + " " + "23:59:59";
this.timeValue = [timer, timerOut];
console.log(timer);
// return timer;
},
//详情事件
btnDetai(obj) {
this.detaiShow = true;
this.tckwWireInfo = obj;
this.getTckwWireList();
},
getTckwWireList(){
getTckwWireListApi({
tckwWireRopeInspectionRecordId: this.tckwWireInfo.id,
}).then((res) => {
this.detaiData = res.result;
});
},
//查询钢丝绳数据
getList() {
getTckwWireApi({
pageNo: this.pagInfo.pageNo,
pageSize: this.pagInfo.pageSize,
projectSn: this.$store.state.projectSn,
devName: this.searchForm.devName,
queryStartTime: this.timeValue ? this.timeValue[0] : "",
queryEndTime: this.timeValue ? this.timeValue[1] : "",
}).then((result) => {
console.log("result====", result);
if (result.success) {
this.List = result.result.records;
this.pagInfo.total = result.result.total;
}
});
},
SizeChange(val) {
this.pagInfo.pageSize = val;
this.getList();
},
CurrentChange(val) {
this.pagInfo.pageNo = val;
this.getList();
},
refresh() {
this.searchForm = {};
this.timeValue = [];
this.pagInfo.pageNo = 1; //页数
this.pagInfo.pageSize = 10; //条数
this.getList();
},
},
};
</script>
<style lang="less" scoped>
.tables2 {
min-height: auto;
}
.el-input {
width: 220px;
}
</style>