445 lines
14 KiB
Vue
445 lines
14 KiB
Vue
<template>
|
||
<!-- 这个页面已废弃、没有使用 -->
|
||
<div class="main">
|
||
<div class="topBtn">
|
||
<el-page-header @back="jumpTowerCraneList" content="新增页面">
|
||
</el-page-header>
|
||
</div>
|
||
<div class="driverInfo">
|
||
<div class="top">
|
||
<div class="module_title">司机信息</div>
|
||
<!-- <el-button
|
||
plain
|
||
type="primary"
|
||
style="padding:10px 20px margin-top:-10px"
|
||
@click="jumpTowerCraneList"
|
||
>返回</el-button
|
||
> -->
|
||
</div>
|
||
<div class="content">
|
||
<img :src="fileUrl + driverCurrent.fieldAcquisitionUrl" alt="" />
|
||
<div class="right">
|
||
<div class="item">
|
||
<div class="name">
|
||
姓名：{{ driverCurrent.workerName }}
|
||
<div class="selectDriver">
|
||
<el-dropdown @command="changeDrive">
|
||
<div>
|
||
<img src="@/assets/images/gjcl_num.png" alt="" />
|
||
<span class="blue">司机信息</span>
|
||
</div>
|
||
<el-dropdown-menu class="project-dropdown" slot="dropdown">
|
||
<el-dropdown-item
|
||
v-for="(item, index) in driverList"
|
||
:key="index"
|
||
:command="index"
|
||
>{{ item.workerName }}</el-dropdown-item
|
||
>
|
||
</el-dropdown-menu>
|
||
</el-dropdown>
|
||
</div>
|
||
</div>
|
||
<div class="ID">身份证号：{{ driverCurrent.idCard }}</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="gender">性别：{{ driverCurrent.sex }}</div>
|
||
<!-- <div class="term">工作年限：</div> -->
|
||
</div>
|
||
<div class="item">
|
||
<!-- <div class="gender">年龄：</div> -->
|
||
<div class="term">
|
||
特种资格证书编号：{{ driverCurrent.specialCertificateNumber }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="facilityInfo">
|
||
<div class="module_title">设备信息</div>
|
||
<el-form
|
||
label-width="120px"
|
||
class="demo-ruleForm"
|
||
:model="facilityInfo"
|
||
ref="facilityInfo"
|
||
:rules="rules"
|
||
>
|
||
<el-form-item label="设备名称" prop="name">
|
||
<el-input v-model="facilityInfo.name"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="检测合格日期" prop="qualified">
|
||
<!-- <el-input>></el-input> -->
|
||
<el-date-picker
|
||
v-model="facilityInfo.qualified"
|
||
type="date"
|
||
placeholder="选择日期时间"
|
||
style="width: 100%"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="设备编号" prop="number">
|
||
<el-input v-model="facilityInfo.number"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="使用登记日期" prop="register">
|
||
<!-- <el-input>></el-input> -->
|
||
<el-date-picker
|
||
v-model="facilityInfo.register"
|
||
type="date"
|
||
placeholder="选择日期时间"
|
||
style="width: 100%"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="设备型号" prop="model">
|
||
<el-input v-model="facilityInfo.model"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="前臂长" prop="forearmLength">
|
||
<el-input v-model="facilityInfo.forearmLength"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="产权单位" prop="propertyRight">
|
||
<el-input v-model="facilityInfo.propertyRight"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="后臂长" prop="rearLength">
|
||
<el-input v-model="facilityInfo.rearLength"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="安装单位" prop="install">
|
||
<el-input v-model="facilityInfo.install"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="塔臂高" prop="TowerArmHeight">
|
||
<el-input v-model="facilityInfo.TowerArmHeight"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="制造单位" prop="manufacture">
|
||
<el-input v-model="facilityInfo.manufacture"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="最大起重力矩" prop="maximumLiftingMoment">
|
||
<el-input v-model="facilityInfo.maximumLiftingMoment"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="最大起重量" prop="maximumLiftingLoad">
|
||
<el-input v-model="facilityInfo.maximumLiftingLoad"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="检测机构" prop="testingOrganization">
|
||
<el-input v-model="facilityInfo.testingOrganization"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="塔吊视频">
|
||
<el-select
|
||
v-model="facilityInfo.TowerCraneVideo"
|
||
multiple
|
||
collapse-tags
|
||
style="margin-left: 20px,width:100%"
|
||
placeholder="请选择"
|
||
>
|
||
<el-option
|
||
v-for="item in videoList"
|
||
:key="item.videoId"
|
||
:label="item.videoName"
|
||
:value="item.videoId"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-form>
|
||
<el-button class="saveBtn" type="primary" @click="getSave">
|
||
<img src="@/assets/images/confirm.png" style="vertical-align: middle" />
|
||
保存
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
addTowerInfoApi,
|
||
getWorkerInfoListApi,
|
||
getVideoItemListApi,
|
||
} from "@/assets/js/api/towerCrane";
|
||
import { Row } from "element-ui";
|
||
export default {
|
||
data() {
|
||
return {
|
||
// driverInfo: [],
|
||
facilityInfo: {
|
||
name: "", //设备名称
|
||
qualified: "", //检测合格日期
|
||
number: "", //设备编号
|
||
register: "", //使用登记日期
|
||
model: "", //设备型号
|
||
forearmLength: "", //前臂长
|
||
propertyRight: "", // 产权单位
|
||
rearLength: "", //后臂长
|
||
install: "", //安装单位
|
||
TowerArmHeight: "", //塔臂高
|
||
manufacture: "", //制造单位
|
||
maximumLiftingMoment: "", //最大起重力矩
|
||
maximumLiftingLoad: "", // 最大起重量
|
||
testingOrganization: "", //检测机构
|
||
TowerCraneVideo: [], //选择的视频
|
||
},
|
||
isInfo: true, //验证表单是否填完整
|
||
rules: {
|
||
name: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
|
||
qualified: [
|
||
{ required: true, message: "请选择检测合格日期", trigger: "blur" },
|
||
],
|
||
number: [
|
||
{ required: true, message: "请输入设备编号", trigger: "blur" },
|
||
],
|
||
register: [
|
||
{ required: true, message: "请选择使用登记日期", trigger: "blur" },
|
||
],
|
||
model: [{ required: true, message: "请输入设备型号", trigger: "blur" }],
|
||
forearmLength: [
|
||
{ required: true, message: "请输入前臂长", trigger: "blur" },
|
||
],
|
||
propertyRight: [
|
||
{ required: true, message: "请输入产权单位", trigger: "blur" },
|
||
],
|
||
rearLength: [
|
||
{ required: true, message: "请输入后臂长", trigger: "blur" },
|
||
],
|
||
install: [
|
||
{ required: true, message: "请输入安装单位", trigger: "blur" },
|
||
],
|
||
TowerArmHeight: [
|
||
{ required: true, message: "请输入塔臂高", trigger: "blur" },
|
||
],
|
||
manufacture: [
|
||
{ required: true, message: "请输入制造单位", trigger: "blur" },
|
||
],
|
||
maximumLiftingMoment: [
|
||
{ required: true, message: "请输入最大起重力矩", trigger: "blur" },
|
||
],
|
||
maximumLiftingLoad: [
|
||
{ required: true, message: "请输入最大起重量", trigger: "blur" },
|
||
],
|
||
testingOrganization: [
|
||
{ required: true, message: "请输入检测机构", trigger: "blur" },
|
||
],
|
||
},
|
||
driverList: [], //司机列表信息
|
||
driverCurrent: {}, //当前选择司机信息-处理过的
|
||
driverInfo: {}, //当前选择司机信息-未处理过的
|
||
videoList: [], //视频列表
|
||
};
|
||
},
|
||
created() {
|
||
this.fileUrl = this.$store.state.FILEURL;
|
||
},
|
||
mounted() {
|
||
this.getWorkerInfoList();
|
||
this.getVideoList();
|
||
},
|
||
methods: {
|
||
// 获取司机列表
|
||
getWorkerInfoList() {
|
||
getWorkerInfoListApi({ projectSn: this.$store.state.projectSn }).then(
|
||
(res) => {
|
||
this.driverList = res.result;
|
||
this.driverCurrent = this.driverList[0];
|
||
this.driverInfo = this.driverList[0];
|
||
if (this.driverCurrent.sex == 1) {
|
||
this.driverCurrent.sex = "男";
|
||
} else if (this.driverCurrent.sex == 2) {
|
||
this.driverCurrent.sex = "女";
|
||
}
|
||
console.log("司机列表", res.result);
|
||
}
|
||
);
|
||
},
|
||
// 选择司机列表
|
||
changeDrive(command) {
|
||
// this.driverInfo.fieldAcquisitionUrl =''
|
||
this.driverCurrent = this.driverList[command];
|
||
this.driverInfo = this.driverList[command];
|
||
console.log(this.driverInfo.fieldAcquisitionUrl);
|
||
if (this.driverCurrent.sex == 1) {
|
||
this.driverCurrent.sex = "男";
|
||
} else if (this.driverCurrent.sex == 2) {
|
||
this.driverCurrent.sex = "女";
|
||
}
|
||
},
|
||
// 保存新增塔吊信息
|
||
getSave() {
|
||
this.isInfo = true;
|
||
Object.keys(this.facilityInfo).forEach((key) => {
|
||
if (this.facilityInfo[key] == "") {
|
||
if (this.facilityInfo.TowerCraneVideo == "") {
|
||
return (this.isInfo = true);
|
||
}
|
||
return (this.isInfo = false);
|
||
}
|
||
return;
|
||
});
|
||
if (this.isInfo == false) {
|
||
this.$message({
|
||
message: "请填写完整信息",
|
||
type: "success",
|
||
});
|
||
} else {
|
||
let parm = {
|
||
// 塔吊信息
|
||
devName: this.facilityInfo.name,
|
||
testQualifiedTime: this.facilityInfo.qualified,
|
||
devSn: this.facilityInfo.number,
|
||
useRegistrationTime: this.facilityInfo.register,
|
||
devModel: this.facilityInfo.model,
|
||
posteriorArmLength: this.facilityInfo.forearmLength,
|
||
propertyUnit: this.facilityInfo.propertyRight,
|
||
forearmLength: this.facilityInfo.rearLength,
|
||
installationUnit: this.facilityInfo.install,
|
||
towerHeight: this.facilityInfo.TowerArmHeight,
|
||
factoryName: this.facilityInfo.manufacture,
|
||
maxLiftingMoment: this.facilityInfo.maximumLiftingMoment,
|
||
maxLiftingCapacity: this.facilityInfo.maximumLiftingLoad,
|
||
testingOrganization: this.facilityInfo.testingOrganization,
|
||
projectSn: this.$store.state.projectSn,
|
||
driverName: this.driverInfo.workerName,
|
||
driverIdCard: this.driverInfo.idCard,
|
||
videoList: [],
|
||
// 司机信息
|
||
driverList: [
|
||
{
|
||
id: this.driverCurrent.id,
|
||
},
|
||
],
|
||
};
|
||
Object.keys(this.facilityInfo.TowerCraneVideo).forEach((key) => {
|
||
let obj = { id: this.facilityInfo.TowerCraneVideo[key] };
|
||
parm.videoList.push(obj);
|
||
});
|
||
console.log("videoList", parm.videoList);
|
||
addTowerInfoApi(parm).then((res) => {
|
||
console.log("塔吊新增", res);
|
||
});
|
||
this.jumpTowerCraneList();
|
||
}
|
||
},
|
||
// 跳转塔吊列表
|
||
jumpTowerCraneList() {
|
||
this.$router.push({ path: "towerCraneList" });
|
||
},
|
||
// 获取视频列表
|
||
getVideoList() {
|
||
getVideoItemListApi({ projectSn: this.$store.state.projectSn }).then(
|
||
(res) => {
|
||
this.videoList = res.result.list;
|
||
console.log("视频列表", this.videoList);
|
||
}
|
||
);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.el-select {
|
||
width: 100%;
|
||
}
|
||
.el-dropdown-link {
|
||
cursor: pointer;
|
||
color: #409eff;
|
||
}
|
||
.el-icon-arrow-down {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.project-dropdown {
|
||
//设置高度才能显示出滚动条 !important
|
||
height: 300px;
|
||
// overflow: auto;
|
||
overflow-y: auto;
|
||
}
|
||
.project-dropdown::-webkit-scrollbar {
|
||
width: 5px;
|
||
height: 5px;
|
||
background-color: #f5f5f5;
|
||
}
|
||
.project-dropdown::-webkit-scrollbar-track {
|
||
//-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||
border-radius: 10px;
|
||
background-color: #f5f5f5;
|
||
}
|
||
.main {
|
||
width: 100%;
|
||
background-color: #fff;
|
||
box-sizing: border-box;
|
||
padding: 30px;
|
||
.module_title {
|
||
margin-left: -10px;
|
||
border-left: 2px solid #4a8bff;
|
||
padding-left: 8px;
|
||
margin-bottom: 20px;
|
||
color: rgba(5, 23, 55, 100);
|
||
font-size: 16px;
|
||
}
|
||
.driverInfo {
|
||
border: 1px solid rgba(243, 245, 253, 1);
|
||
padding: 20px;
|
||
.top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
// align-items: center;
|
||
}
|
||
.content {
|
||
height: 110px;
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: #f0f6ff;
|
||
box-sizing: border-box;
|
||
padding: 0 30px;
|
||
img {
|
||
width: 65px;
|
||
height: 76px;
|
||
}
|
||
.right {
|
||
width: 80%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-left: 50px;
|
||
// align-items: center;
|
||
.item {
|
||
.name {
|
||
display: flex;
|
||
align-items: center;
|
||
.selectDriver {
|
||
display: flex;
|
||
align-items: center;
|
||
.blue {
|
||
color: #4a8bff;
|
||
}
|
||
}
|
||
img {
|
||
width: 20px;
|
||
height: 20px;
|
||
vertical-align: middle;
|
||
margin-left: 30px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
div:nth-child(2) {
|
||
margin-top: 30px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.facilityInfo {
|
||
border: 1px solid rgba(243, 245, 253, 1);
|
||
padding: 20px;
|
||
.demo-ruleForm {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.el-form-item {
|
||
width: 25%;
|
||
}
|
||
}
|
||
.saveBtn {
|
||
width: 78px;
|
||
height: 34px;
|
||
border-radius: 3px;
|
||
margin: 20px auto 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
}
|
||
}
|
||
}
|
||
</style> |