jiangyinzhi
675 lines
22 KiB
Vue
675 lines
22 KiB
Vue
<template>
|
||
<div>
|
||
<!-- 头部 -->
|
||
<!-- <Header :title="title" @onClickLeft="onClickLeft" /> -->
|
||
<div class="container">
|
||
<div>
|
||
<!-- <div class="title" style="margin-top: 20px;margin-left: 5px;">通用能源系统</div> -->
|
||
<div class="partTwo-box">
|
||
<div class="partTwo-content">
|
||
<!-- 单台电机额定功率≥20kW 电网让改大于5 -->
|
||
<div class="title">泵机系统基本信息<span style="font-size: 14px; color: #bbbbbb;"> 单台电机额定功率≥5kW</span>
|
||
</div>
|
||
<van-swipe-cell :right-width="65" v-for="(item, index) in list" :key="index">
|
||
<div class="msg-card" @click="bengjisystemaddedit(item.id)">
|
||
<div>
|
||
<div style="text-align: center;margin-top: 3px;"><van-icon name="credit-pay"
|
||
color="#fff" size="22px" /></div>
|
||
<div>x {{ item.systemNum }} 台</div>
|
||
</div>
|
||
<div>
|
||
<div class="space-between">
|
||
<span>泵机 {{ item.systemModel }} / 电机 {{ item.motorModel }} </span><span><van-icon
|
||
name="arrow" color="#fff" /></span>
|
||
</div>
|
||
<div class="space-between" style="margin-top: 10px;font-size: 12px;">
|
||
<span>单台额定功率：{{ item.ratedPowerValue }} kVA</span><span>变频占比: {{
|
||
item.frequencyPerValue }} %</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--TODO 把slot改一下 -->
|
||
<span slot="right" @click="remove(item.id)">删除</span>
|
||
</van-swipe-cell>
|
||
<div class="add-box" @click="bengjisystemaddedit('')">
|
||
+ 新增
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="title" style="margin-top: 20px;margin-left: 5px;margin-bottom: 15px;">能效问卷</div>
|
||
<div class="partThree-question" v-for="(item, index) in askList" :key="index">
|
||
<div>{{ index + 1 }} 、 {{ item.enquireTitle }}</div>
|
||
<div class="btn2">
|
||
<div class="btn-click2" @click="buttonClick(item, index)">
|
||
<div :class="item.color ? 'round-out yes-out' : 'round-out no-out'">
|
||
<div :class="item.color ? 'round-in yes-in' : 'round-in no-in'"></div>
|
||
</div>
|
||
<span>是</span>
|
||
</div>
|
||
<div class="btn-click2" @click="buttonNoClick(item, index)">
|
||
<div :class="item.color ? 'round-out no-out' : 'round-out yes-out'">
|
||
<div :class="item.color ? 'round-in no-in' : 'round-in yes-in'"></div>
|
||
</div>
|
||
<span>否</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="upload-group">
|
||
<van-cell class="title" title="设备外观" :required="$store.getters.cityType"/>
|
||
<Uploader type="text1" :value="text1"
|
||
@afterRead="afterRead"
|
||
@delImg="delImg"
|
||
@onUpload="onUpload" />
|
||
<div class="tips tipImage" v-if="$store.getters.cityType&&text1.length<1">请上传设备外观照片</div>
|
||
<!-- <div class="picStyle borderBot">
|
||
<div class="title">设备外观</div>
|
||
<div class="pic">
|
||
<Uploader
|
||
type="text1"
|
||
:value="text1"
|
||
@afterRead="afterRead"
|
||
@delImg="delImg"
|
||
@onUpload="onUpload"
|
||
/>
|
||
</div>
|
||
</div> -->
|
||
<div class="picStyle borderBot">
|
||
<van-cell class="title" title="设备铭牌" :required="$store.getters.cityType"/>
|
||
<div class="pic">
|
||
<Uploader
|
||
type="text2"
|
||
:value="text2"
|
||
@afterRead="afterRead"
|
||
@delImg="delImg"
|
||
@onUpload="onUpload"
|
||
/>
|
||
</div>
|
||
<div class="tips tipImage" v-if="$store.getters.cityType&&text2.length<1">请上传设备铭牌</div>
|
||
</div>
|
||
<div class="picStyle">
|
||
<van-cell class="title" title="设备能效标识" :required="$store.getters.cityType"/>
|
||
<div class="pic">
|
||
<Uploader
|
||
type="text3"
|
||
:value="text3"
|
||
@afterRead="afterRead"
|
||
@delImg="delImg"
|
||
@onUpload="onUpload"
|
||
/>
|
||
</div>
|
||
<div class="tips tipImage" v-if="$store.getters.cityType&&text3.length<1">请上传设备能效标识</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer-btn" @click="handleClick">
|
||
<div>保存</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<van-overlay :show="show">
|
||
<div class="wrapper" @click.stop>
|
||
<div class="block">
|
||
<van-loading size="24px" color="#34baae" vertical>加载中...</van-loading>
|
||
</div>
|
||
</div>
|
||
</van-overlay>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
buildAsk,
|
||
} from '@/api/api.js'
|
||
import { pumpList, pumpRemove, enterprisGetInfo, enterprisEdit, enterprisAdd } from "@/api/universalEnergy.js";
|
||
import { Notify } from "vant";
|
||
|
||
import Uploader from '@/views/facilityManage/common-vue/uploader.vue'
|
||
import { downloadUrl } from '@/settings'
|
||
|
||
// import Header from "@/components/headerNew";
|
||
import {debounce} from '@/utils/common.js'
|
||
export default {
|
||
components: {
|
||
// Header,
|
||
Uploader
|
||
},
|
||
data() {
|
||
return {
|
||
newAnswer: [], // 问答题存
|
||
title: '泵机系统',
|
||
userMsg: {}, // 任务列表单条数据
|
||
list: [], // 列表
|
||
item: {
|
||
type: Object,
|
||
default: () => { },
|
||
},
|
||
aarr: [],
|
||
aarr1: [],
|
||
pumpEnquireIds: '',
|
||
id: '',
|
||
customerId: '',
|
||
askList: [], // 问询列表
|
||
show: false,
|
||
getid: '',
|
||
enterpriseSystemId: '',
|
||
tidCid: null,
|
||
|
||
text1:[],
|
||
text2:[],
|
||
text3:[],
|
||
|
||
img1:'0,0,0',
|
||
img3:'0,0,0',
|
||
img4:'0,0,0',
|
||
doDebounce: null,
|
||
}
|
||
},
|
||
created() {
|
||
this.tidCid = JSON.parse(sessionStorage.getItem('tidCid'))
|
||
this.getAsk()
|
||
this.enterpriseSystemId = sessionStorage.getItem('enterpriseSystemId');
|
||
let msg2 = JSON.parse(localStorage.getItem('customerItem'));
|
||
if(msg2) {
|
||
this.getid = msg2.id
|
||
}
|
||
this.getList();
|
||
this.doDebounce = debounce(function () {
|
||
this.save()
|
||
}, 5000, true)
|
||
},
|
||
activated() {
|
||
|
||
},
|
||
computed: {
|
||
showForm() {
|
||
if(this.tidCid.taskId) {
|
||
return false
|
||
}
|
||
return true
|
||
},
|
||
},
|
||
methods: {
|
||
/**
|
||
* 图片方法
|
||
*/
|
||
//浏览器 ios 会走这个方法
|
||
afterRead(data, type) {
|
||
this[type] = [data.attach_id]
|
||
data.type = type
|
||
},
|
||
//安卓会调用的方法
|
||
onUpload(data, type) {
|
||
this[type] = [data[0].url]
|
||
},
|
||
|
||
delImg(file, detail, type) {
|
||
if(type == 'text1') {
|
||
this.delIsObj(this.text1)
|
||
this.text1 = []
|
||
}
|
||
if(type == 'text2') {
|
||
this.delIsObj(this.text2)
|
||
this.text2 = []
|
||
}
|
||
if(type == 'text3') {
|
||
this.delIsObj(this.text3)
|
||
this.text3 = []
|
||
}
|
||
},
|
||
|
||
//判断删除的list中是否为对象格式
|
||
delIsObj(delList) {
|
||
const list = delList.map((ele) => {
|
||
if(ele instanceof Object) {
|
||
return ele.url
|
||
}
|
||
return ele
|
||
})
|
||
return list
|
||
},
|
||
|
||
// 图片格式化
|
||
fomattPic() {
|
||
if(this.text1.length == 0) {
|
||
this.text1 = ['0']
|
||
}
|
||
if(this.text2.length == 0) {
|
||
this.text2 = ['0']
|
||
}
|
||
if(this.text3.length == 0) {
|
||
this.text3 = ['0']
|
||
}
|
||
|
||
if(this.text1.length > 0 && this.text1[0] instanceof Object) {
|
||
this.text1 = [this.text1[0].url.split('download/')[1]]
|
||
} else if(this.text1.length > 0 && this.text1[0].split('download/').length > 1) {
|
||
this.text1 = [this.text1[0].split('download/')[1]]
|
||
}
|
||
|
||
if(this.text2.length > 0 && this.text2[0] instanceof Object) {
|
||
this.text2 = [this.text2[0].url.split('download/')[1]]
|
||
} else if(this.text2.length > 0 && this.text2[0].split('download/').length > 1) {
|
||
this.text2 = [this.text2[0].split('download/')[1]]
|
||
}
|
||
|
||
if(this.text3.length > 0 && this.text3[0] instanceof Object) {
|
||
this.text3 = [this.text3[0].url.split('download/')[1]]
|
||
} else if(this.text3.length > 0 && this.text3[0].split('download/').length > 1) {
|
||
this.text3 = [this.text3[0].split('download/')[1]]
|
||
}
|
||
|
||
const text = this.text1.concat(this.text2, this.text3)
|
||
return text
|
||
},
|
||
|
||
//判断是否为对象格式
|
||
ifObj(imgList) {
|
||
console.log(imgList,'imgList');
|
||
imgList.forEach((v) => {
|
||
if(v instanceof Object && v.url.split('download/').length > 1) {
|
||
v.url = v.url.split('download/')[1]
|
||
}
|
||
})
|
||
const list = imgList.map((ele)=>{
|
||
if(ele instanceof Object) {
|
||
return ele.url
|
||
}
|
||
return ele
|
||
})
|
||
return list
|
||
},
|
||
|
||
// 获取问询信息
|
||
getAsk() {
|
||
buildAsk({ enquireMode: 'gybjwx' }).then((res) => {
|
||
if (res.code == 0) {
|
||
res.data.forEach((v) => {
|
||
if(v.enquireId == 61) {
|
||
v.color = false
|
||
} else {
|
||
v.color = true
|
||
}
|
||
})
|
||
this.askList = res.data
|
||
this.newAnswer = res.data.map((item) => {
|
||
if(item.enquireId == 61) {
|
||
return 0
|
||
}
|
||
return item.enquireId
|
||
})
|
||
this.getEnterprisGetInfo()
|
||
}
|
||
})
|
||
},
|
||
// 获取内容信息
|
||
async getEnterprisGetInfo() {
|
||
this.show = true
|
||
let tidCid = JSON.parse(sessionStorage.getItem('tidCid'))
|
||
let customerId = tidCid.customerId;
|
||
let taskId = tidCid.taskId;
|
||
const res = await enterprisGetInfo({customerId, taskId});
|
||
if (res.code == 0) {
|
||
this.show = false
|
||
this.pumpEnquireIds = res.data.pumpEnquireIds;
|
||
this.customerId = res.data.customerId;
|
||
this.id = res.data.id;
|
||
if(res.data.pumpEnquireIds) {
|
||
this.newAnswer = res.data.pumpEnquireIds.split(',')
|
||
}
|
||
if(this.askList && this.askList.length > 0) {
|
||
const list = this.newAnswer.filter((ele) => ele != 0)
|
||
this.askList.forEach((v)=>{
|
||
v.color = false
|
||
list.forEach((ev)=>{
|
||
if(v.enquireId == ev) {
|
||
v.color = true
|
||
}
|
||
})
|
||
})
|
||
}
|
||
if(res.data.text2) {
|
||
if(res.data.text2.split(',')[0] != 0) {
|
||
this.text1.push({
|
||
url:`${downloadUrl}${res.data.text2.split(',')[0]}`
|
||
})
|
||
}
|
||
|
||
if(res.data.text2.split(',')[1] != 0) {
|
||
this.text2.push({
|
||
url:`${downloadUrl}${res.data.text2.split(',')[1]}`
|
||
})
|
||
}
|
||
|
||
if(res.data.text2.split(',')[2] != 0) {
|
||
this.text3.push({
|
||
url:`${downloadUrl}${res.data.text2.split(',')[2]}`
|
||
})
|
||
}
|
||
|
||
if(res.data.text1) {
|
||
this.img1 = res.data.text1
|
||
}
|
||
if(res.data.text3) {
|
||
this.img3 = res.data.text3
|
||
}
|
||
if(res.data.text4) {
|
||
this.img4 = res.data.text4
|
||
}
|
||
}
|
||
} else {
|
||
this.show = false
|
||
}
|
||
},
|
||
buttonClick(item, index) {
|
||
if(this.showForm) {
|
||
return
|
||
}
|
||
this.newAnswer[index] = item.enquireId
|
||
if (!item.color) {
|
||
item.color = true
|
||
this.aarr.push(item.enquireId)
|
||
this.aarr = [...new Set(this.aarr)]
|
||
|
||
if(item.enquireId == 60 || item.enquireId == 61) {
|
||
this.changeId(item, [60, 61])
|
||
}
|
||
}
|
||
},
|
||
buttonNoClick(item, index) {
|
||
if(this.showForm) {
|
||
return
|
||
}
|
||
this.newAnswer[index] = 0
|
||
item.color = false
|
||
this.aarr.splice(this.aarr.indexOf(item.enquireId), 1)
|
||
const i = this.aarr1.findIndex((ele) => ele == item.enquireId)
|
||
this.aarr1.splice(i, 1)
|
||
},
|
||
|
||
changeId(item, numList) {
|
||
const num = numList.find((ele)=> ele != item.enquireId)
|
||
const enqIndex = this.newAnswer.findIndex((ele)=> ele == num)
|
||
if(enqIndex > -1) {
|
||
this.newAnswer.splice(enqIndex, 1, 0)
|
||
}
|
||
this.askList.forEach((v)=> {
|
||
if(v.enquireId == num) {
|
||
v.color = false
|
||
}
|
||
})
|
||
},
|
||
|
||
handleClick() {
|
||
this.doDebounce()
|
||
},
|
||
|
||
save() {
|
||
if(!(this.list&&this.list.length>0)){
|
||
this.$toast('请输入泵机系统信息')
|
||
return
|
||
}
|
||
if(this.showForm||(this.$store.getters.cityType&&(this.text1.length<1||this.text2.length<1||this.text3.length<1))) {
|
||
return
|
||
}
|
||
const text2 = this.fomattPic()
|
||
let enterpriseId = sessionStorage.getItem('enId')
|
||
let formIds = this.newAnswer.toString();
|
||
if (enterpriseId) {
|
||
let params = {
|
||
customerId: this.customerId,
|
||
id: this.enterpriseSystemId,
|
||
taskId: this.tidCid.taskId,
|
||
enterpriseId: enterpriseId,
|
||
pumpEnquireIds: formIds,
|
||
systemTypes: this.$route.query.item,
|
||
text2: this.ifObj(text2).join(','),
|
||
text1: this.img1,
|
||
text3: this.img3,
|
||
text4: this.img4
|
||
}
|
||
enterprisEdit(params).then((res) => {
|
||
if (res.code == 0) {
|
||
Notify({ type: "success", background: '#34baae', message: "保存成功" });
|
||
} else {
|
||
this.$toast(res.msg)
|
||
}
|
||
})
|
||
} else {
|
||
let params = {
|
||
customerId: this.customerId,
|
||
id: this.tidCid.taskId,
|
||
enterpriseId: enterpriseId,
|
||
pumpEnquireIds: formIds,
|
||
systemTypes: this.$route.query.item,
|
||
text2: this.ifObj(text2).join(','),
|
||
text1: this.img1,
|
||
text3: this.img3,
|
||
text4: this.img4
|
||
}
|
||
enterprisAdd(params).then((res) => {
|
||
if (res.code == 0) {
|
||
Notify({ type: "success", background: '#34baae', message: "保存成功" });
|
||
} else {
|
||
this.$toast(res.msg)
|
||
}
|
||
})
|
||
}
|
||
this.$router.push('./acquisition')
|
||
},
|
||
// 跳转
|
||
bengjisystemaddedit(id) {
|
||
if(this.showForm) {
|
||
return
|
||
}
|
||
this.$router.push({ path: './bengjisystemaddedit', query: { id: id } })
|
||
},
|
||
// 列表
|
||
async getList() {
|
||
const params = {
|
||
customerId: this.userMsg.customerId,
|
||
systemId: this.enterpriseSystemId ? this.enterpriseSystemId : this.getid
|
||
}
|
||
const res = await pumpList(params);
|
||
if (res.code == 0) {
|
||
this.list = res.data
|
||
}
|
||
},
|
||
// 删除
|
||
remove(ids) {
|
||
if(this.showForm) {
|
||
return
|
||
}
|
||
pumpRemove(ids).then((res) => {
|
||
if (res.code == 0) {
|
||
this.getList();
|
||
Notify({ type: 'success', background: '#34baae', message: '删除成功' })
|
||
} else {
|
||
Notify({ type: 'error', background: 'red', message: res.msg })
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.container {
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.title {
|
||
font-size: 15px;
|
||
color: #000;
|
||
}
|
||
|
||
.partTwo-box {
|
||
width: 100%;
|
||
border-radius: 8px;
|
||
padding: 0 15px 10px;
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
overflow: hidden;
|
||
margin-top: 15px;
|
||
|
||
.partTwo-content {
|
||
margin-top: 10px;
|
||
|
||
.add-box {
|
||
width: 100%;
|
||
padding: 10px 0;
|
||
box-sizing: border-box;
|
||
border-radius: 5px;
|
||
border: 1px solid #63cbb6;
|
||
background-color: #e0f5f0;
|
||
color: #63cbb6;
|
||
text-align: center;
|
||
margin-top: 15px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.msg-card {
|
||
margin-top: 10px;
|
||
background: #63cbb6;
|
||
padding: 15px;
|
||
border-radius: 6px;
|
||
color: #fff;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.space-between {
|
||
width: 230px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
::v-deep .van-swipe-cell__right {
|
||
right: -20px;
|
||
-webkit-transform: translate3d(100%, 0, 0);
|
||
transform: translate3d(100%, 0, 0);
|
||
display: flex;
|
||
align-items: center;
|
||
color: red;
|
||
}
|
||
|
||
.partThree-question {
|
||
width: 100%;
|
||
background-color: #fff;
|
||
border-radius: 8px;
|
||
padding: 20px 10px;
|
||
box-sizing: border-box;
|
||
font-size: 14px;
|
||
color: #000;
|
||
|
||
.btn2 {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
}
|
||
|
||
.btn2 {
|
||
margin-top: 20px;
|
||
display: flex;
|
||
|
||
.btn-click2 {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
span {
|
||
color: #9d9d9d;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
.round-out {
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
margin: 0 7px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
overflow: hidden;
|
||
|
||
.round-in {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
.yes-out {
|
||
border: 2.5px solid #34baae;
|
||
|
||
.yes-in {
|
||
background: #34baae;
|
||
}
|
||
}
|
||
|
||
.no-out {
|
||
border: 2px solid #b3b3b3;
|
||
}
|
||
}
|
||
|
||
.footer-btn {
|
||
margin-top: 180px;
|
||
height: 35px;
|
||
|
||
// padding: 0 0.4rem;
|
||
>div {
|
||
position: fixed;
|
||
bottom: 0.533333rem;
|
||
width: 90%;
|
||
background: #34baae;
|
||
border-radius: 0.266667rem;
|
||
line-height: 0.933333rem;
|
||
text-align: center;
|
||
color: #fff;
|
||
z-index: 99999;
|
||
|
||
}
|
||
}
|
||
.wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100%;
|
||
}
|
||
|
||
.upload-group {
|
||
background: #fff;
|
||
margin-top: 0.2rem;
|
||
padding: 0.2rem;
|
||
border-radius: 0.2rem;
|
||
}
|
||
|
||
|
||
.borderBot {
|
||
position: relative;
|
||
&::after {
|
||
position: absolute;
|
||
box-sizing: border-box;
|
||
content: ' ';
|
||
pointer-events: none;
|
||
right: 0.426667rem;
|
||
bottom: 0;
|
||
left: 0.426667rem;
|
||
border-bottom: 0.026667rem solid #ebedf0;
|
||
-webkit-transform: scaleY(0.5);
|
||
transform: scaleY(0.5);
|
||
}
|
||
}
|
||
.tips {
|
||
padding: 0 16px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
color: #ee0a24;
|
||
font-size: 12px;
|
||
}
|
||
.tipImage{
|
||
justify-content: flex-start
|
||
}
|
||
</style>
|
||
|