关联设备联调3

pull/17/head
lukeyan 1 year ago
parent 86408b3571
commit 211caa844c

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.0 KiB

@ -46,13 +46,20 @@
</el-form-item>
</el-form>
<el-upload
ref="upload"
class="avatar-uploader"
action="https://jsonplaceholder.typicode.com/posts/"
accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG"
:action="upUrl"
:headers="upheaders"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<img
v-if="imageUrl"
:src="imageUrl"
class="avatar"
@error="setDefaultImage"
/>
<div v-else class="avatar-uploader-icon">
<div>点击上传企业封面图片</div>
</div>
@ -183,15 +190,15 @@
</el-option>
</el-select>
</el-form-item>
<el-form-item label="企业地址">
<el-input v-model="form.companyAddress"></el-input>
</el-form-item>
<el-form-item label="经度">
<el-input v-model="form.longitude"></el-input>
</el-form-item>
<el-form-item label="纬度">
<el-input v-model="form.latitude"></el-input>
</el-form-item>
<el-form-item label="企业地址">
<el-input v-model="form.companyAddress"></el-input>
</el-form-item>
</el-form>
</div>
<!-- 管辖区信息表单 -->
@ -238,6 +245,7 @@ import {
postCompanyList,
putCompanyList,
} from "@/api/systemManagement";
import defaultImage from "@/assets/companyFile/defaultimage.png";
export default {
name: "CompanyDataDialog",
data() {
@ -283,6 +291,10 @@ export default {
belongingArea: "",
},
imageUrl: "",
upUrl:`http://172.18.113.50:8080/zhapi/safety/system/enterpriseList`, //
upheaders: {
Authorization: localStorage.getItem('AuthorizationToken')
}
};
},
created() {
@ -300,6 +312,7 @@ export default {
} else if (num === 3) {
this.dialogTitle = "编辑";
console.log("item", item);
this.imageUrl = item.picUrl;
this.form = Object.assign(this.form, item);
}
},
@ -397,9 +410,19 @@ export default {
}
this.$emit("back");
},
handleAvatarSuccess(res, file) {
console.log('resimg',res);
console.log('fileimg',file);
// this.imageUrl = URL.createObjectURL(file.raw);
this.$message.success('上传成功')
},
closeForm() {
this.visible = false;
}
},
setDefaultImage(e) {
//
e.target.src = defaultImage;
},
},
};
</script>
@ -463,7 +486,7 @@ export default {
/* 表单内容浮动布局,多行多列表单 */
width: 900px !important;
display: flex;
justify-content: space-between;
justify-content: flex-start;
flex-wrap: wrap;
.el-form-item {
/* 表单域名跟input浮动布局 */
@ -502,6 +525,10 @@ export default {
display: flex;
.avatar-uploader {
margin-left: 8%;
img {
width: 220px;
height: 220px;
}
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
@ -534,7 +561,7 @@ export default {
display: block;
}
.el-form.commerceMessage_form {
/* 表单内容浮动布局,多行多列表单 */
/* 表单内容flex布局,多行多列表单 */
width: 600px !important;
}
}
@ -586,18 +613,25 @@ export default {
}
.el-form.company_position_form {
.el-form-item {
width: 30%;
width: 31%;
margin-left: 15px;
.el-form-item__content {
.el-input__inner {
width: 170px;
}
}
}
}
.el-form.jurisdiction_form {
margin-left: 15px;
.el-form-item {
width: 30%;
width: 33%;
.el-form-item__label {
width: 70%;
width: 50%;
}
.el-form-item__content {
.el-input__inner {
width: 150px;
width: 170px;
}
}
}

@ -13,7 +13,6 @@
<!-- 顶部搜索区域 -->
<div class="top">
<div class="top_search">
<span>关键词:</span>
<el-input
class="top_search_input"
placeholder="输入企业名称搜索"
@ -32,24 +31,30 @@
<div class="center">
<ul>
<li v-for="item in company_data" :key="item.id">
<img :src="item.picUrl" alt="" />
<img :src="item.picUrl" alt="" @error="setDefaultImage" />
<span class="company_name"> {{ item.companyName }} </span>
<div class="company_label">
<div
class="company_label_data"
:class="{
shewei: val == '剧毒' || val == '易制毒',
zhongdian: val == '消防重点' || val == '所管消防',
zhibao: val == '放射源' || val == '易制爆',
zhian: val == '治安重点' || val == '创安单位',
}"
v-for="(val, index) in item.companyTypes"
:key="index"
>
{{ val }}
</div>
</div>
<span class="company_unit"> {{ item.companyAddress }}</span>
<span class="company_unit"
><i class="el-icon-location"></i>
{{ item.companyAddress }}</span
>
<!-- 遮罩层 -->
<div class="image_mask">
<div class="btn">
<button class="check" @click="jump()">
查看档案
</button>
<button class="check" @click="jump()"></button>
<button class="change" @click="openDialog(3, item)">
编辑
</button>
@ -86,6 +91,7 @@ import CompanyDataDialog from "./components/companyDataDialog";
import ClearDialog from "./components/clearDialog";
import { getCompanyList } from "@/api/systemManagement";
import { debounce } from "@/utils/publicMethod_lxy/debounce.js";
import defaultImage from "@/assets/companyFile/defaultimage.png";
export default {
name: "companyList",
components: {
@ -160,8 +166,12 @@ export default {
this.getData();
},
jump() {
this.$router.push('/home/archives')
}
this.$router.push("/home/archives");
},
setDefaultImage(e) {
//
e.target.src = defaultImage;
},
},
};
</script>
@ -197,18 +207,13 @@ export default {
display: flex;
justify-content: space-between;
.top_search {
margin-left: 2vw;
display: flex;
width: 40%;
height: 40px;
span {
width: 15%;
line-height: 40px;
text-align: center;
color: #fff;
}
.top_search_input ::v-deep {
/* 查询框 */
width: 75%;
width: 60%;
.el-input__inner {
border-radius: 4px 0px 0px 4px;
background: #3c4b4a;
@ -268,22 +273,18 @@ export default {
flex-wrap: wrap;
padding-left: 0px;
li {
display: flex;
justify-content: center;
align-items: center;
margin-left: 2.5%;
position: relative;
list-style: none;
width: 30%;
height: 47%;
width: 25.6vw;
height: 31vh;
background: #1b3736;
border: 1px solid #fff;
box-sizing: border-box;
img {
margin-left: 0.5%;
margin-top: 0.6%;
width: 99%;
height: 98%;
margin-left: 0.3vw;
margin-top: 0.5vh;
width: 25vw;
height: 30vh;
}
/* 公司图片相关信息区域 */
.company_name {
@ -301,15 +302,63 @@ export default {
z-index: 2;
left: 10px;
bottom: 35px;
.company_label_data {
text-align: center;
line-height: 30px;
padding: 0px 5px 0px 5px;
height: 30px;
color: #34e1b3;
background: url("~@/assets/companyFile/btn04.png") no-repeat !important;
background-size: 100% 100% !important;
margin-right: 5px;
.shewei {
height: 26px;
line-height: 26px;
width: auto;
background: url("~@/assets/companyFile/编组 11991.png") no-repeat;
padding: 0 5px;
font-size: 14px;
color: #b5ebff;
letter-spacing: 0.44px;
font-weight: 400;
background-size: 100% 100%;
margin-right: 10px;
}
.zhongdian {
height: 26px;
line-height: 26px;
width: auto;
background: url("~@/assets/companyFile/编组 11222221.png")
no-repeat;
padding: 0 5px;
font-size: 14px;
color: #e3deff;
letter-spacing: 0.44px;
font-weight: 400;
background-size: 100% 100%;
margin-right: 10px;
}
.zhibao {
height: 26px;
line-height: 26px;
width: auto;
background: url("~@/assets/companyFile/编组 11991备份 10.png")
no-repeat;
padding: 0 5px;
font-size: 14px;
color: #e3deff;
letter-spacing: 0.44px;
font-weight: 400;
background-size: 100% 100%;
margin-right: 10px;
}
.zhian {
height: 26px;
line-height: 26px;
width: auto;
background: url("~@/assets/companyFile/编组 11991备份 21.png")
no-repeat;
padding: 0 5px;
font-size: 14px;
color: #e3deff;
letter-spacing: 0.44px;
font-weight: 400;
background-size: 100% 100%;
margin-right: 10px;
}
}
.company_unit {
@ -377,7 +426,16 @@ export default {
opacity: 1;
cursor: default;
}
li:hover .company_label_data {
li:hover .shewei {
opacity: 0;
}
li:hover .zhongdian {
opacity: 0;
}
li:hover .zhibao {
opacity: 0;
}
li:hover .zhian {
opacity: 0;
}
li:hover span {

@ -18,7 +18,7 @@
:disabled="disabled"
>
<el-form-item label="企业名称" prop="companyName">
<el-select v-model="form.companyName" placeholder="请选择企业">
<el-select ref="companySelect" v-model="form.companyName" placeholder="请选择企业">
<el-option
v-for="item in form.company"
:key="item.id"
@ -34,9 +34,9 @@
<el-form-item label="设备IP" prop="deviceIp">
<el-input v-model="form.deviceIp"></el-input>
</el-form-item>
<el-form-item label="设备大类" prop="deviceParentType">
<el-form-item label="设备大类" prop="deviceVideoParentType">
<el-select
v-model="form.deviceParentType"
v-model="form.deviceVideoParentType"
placeholder="请选择设备大类"
>
<el-option
@ -102,11 +102,11 @@
:rules="rules"
:disabled="disabled"
>
<el-form-item label="设备经度">
<el-input v-model="form.longitude" prop="longitude"></el-input>
<el-form-item label="设备经度" prop="longitude">
<el-input v-model="form.longitude" ></el-input>
</el-form-item>
<el-form-item label="设备纬度">
<el-input v-model="form.latitude" prop="latitude"></el-input>
<el-form-item label="设备纬度" prop="latitude">
<el-input v-model="form.latitude"></el-input>
</el-form-item>
<el-form-item label="U3D经度">
<el-input v-model="form.u3dLongitude"></el-input>
@ -162,7 +162,12 @@
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="saveFormData('equipmentForm','videoForm','addressForm','otherForm')"> </el-button>
<el-button
@click="
saveFormData('equipmentForm', 'videoForm', 'addressForm', 'otherForm')
"
> </el-button
>
<el-button> </el-button>
</div>
</el-dialog>
@ -230,7 +235,7 @@ export default {
deviceIp: [
{ required: true, message: "请填写设备ip", trigger: "blur" },
],
deviceParentType: [
deviceVideoParentType: [
{ required: true, message: "请选择设备大类", trigger: "change" },
],
deviceVideoSubType: [
@ -288,50 +293,48 @@ export default {
} else if (num === "5") {
this.dialogTitle = "详情";
this.form = row;
this.disabled = true
this.disabled = true;
}
},
saveFormData: debounce(function (formName1,formName2,formName3) {
saveFormData: debounce(function (formName1, formName2, formName3) {
this.$refs[formName1].validate((valid1) => {
console.log('valid1',valid1);
if (valid1) {
this.$message.warning("请填入必填项");
this.$refs[formName2].validate((valid2) => {
if (valid2) {
this.$refs[formName3].validate((valid3) => {
if (valid3) {
delete this.form.company;
delete this.form.video_type;
delete this.form.perception_type;
delete this.form.orientation_types;
this.form.companyId = this.$refs.companySelect.selected.value // id
const params = this.form;
console.log("this.form", this.form);
if (this.dialogTitle === "新建") {
addVideoList(params)
.then((res) => {
this.visible = false;
this.$message({
message: res.msg,
type: "success",
});
})
.catch((err) => {
console.log(err); //
});
}
} else {
this.$message.warning("请填入必填项");
}
}); //
} else {
this.$message.warning("请填入必填项");
}
}); //
} else {
return false;
}
}); //
this.$refs[formName2].validate((valid2) => {
console.log('valid2',valid2);
if (valid2) {
this.$message.warning("请填入必填项");
} else {
return false;
}
}); //
this.$refs[formName3].validate((valid3) => {
console.log('valid3',valid3);
if (valid3) {
this.$message.warning("请填入必填项");
} else {
return false;
}
}); //
delete this.form.company;
delete this.form.video_type;
delete this.form.perception_type;
delete this.form.orientation_types;
const params = this.form;
console.log("this.form", this.form);
if (this.dialogTitle === "新建") {
addVideoList(params).then((res) => {
console.log("res78", res);
if (res.code === 200) {
this.visible = false;
} else {
this.$message.warning("新建失败");
}
});
}
}); //
}, 300),
},
};

Loading…
Cancel
Save