580 lines
15 KiB
Vue
580 lines
15 KiB
Vue
<template>
|
||
<div>
|
||
<!-- <van-nav-bar title="数据采集" @click-left="onClickLeft" left-arrow /> -->
|
||
|
||
<div id="dadaAcquisition">
|
||
<div class="header">
|
||
<div class="header-name">
|
||
<img src="@/assets/TaskFilling1.png" alt="" /> {{ info.customerName|| info.consName }}
|
||
</div>
|
||
|
||
<div class="header-address">
|
||
<img src="@/assets/TaskFilling2.png" alt="" />
|
||
|
||
<div class="address-warp">地址: {{ info.detailAddress|| info.elecAddr }}</div>
|
||
</div>
|
||
|
||
<div class="header-title">{{ typeName }}</div>
|
||
</div>
|
||
|
||
<div class="main1">
|
||
<div class="main1-name">
|
||
<div class="line"></div>
|
||
|
||
能源管理
|
||
</div>
|
||
|
||
<div class="main1-content" @click="EnergyManagement">
|
||
<img src="@/assets/gyqy/one.png" alt="" />
|
||
|
||
<div class="main1-content-text">能源管理</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="main1">
|
||
<div class="main1-name">
|
||
<div class="line"></div>
|
||
|
||
企业用能
|
||
</div>
|
||
|
||
<div class="main1-content" @click="enterpriseenergy">
|
||
<img src="@/assets/gyqy/two.png" alt="" />
|
||
|
||
<div class="main1-content-text">企业用能</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="main2">
|
||
<div class="main2-name">
|
||
<div class="line"></div>
|
||
|
||
企业通用能源
|
||
</div>
|
||
|
||
<div class="main2-flex">
|
||
<div
|
||
class="main2-content"
|
||
v-for="(item, index) in showList"
|
||
:key="index"
|
||
>
|
||
<img :src="item.icon" alt="" @click="toGeneral(item.url)" />
|
||
|
||
<div class="main2-content-text" @click="toGeneral(item.url)">
|
||
{{ item.name }}
|
||
</div>
|
||
|
||
<div class="img-del" @click="iconDelete(item)">
|
||
<img src="@/assets/数据采集-减号.png" alt="" />
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
class="main2-content"
|
||
@click="energyadd"
|
||
v-if="showList.length < 4"
|
||
>
|
||
<img src="@/assets/数据采集-新增.png" alt="" />
|
||
|
||
<div class="main2-content-text">新增</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="btn">
|
||
<van-button
|
||
size="large"
|
||
class="faqi"
|
||
v-if="taskType < 3"
|
||
@click="saveAllInfo"
|
||
>提交</van-button
|
||
>
|
||
</div>
|
||
<!-- <div class="footer" @click="saveAllInfo">提交</div> -->
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getInfoByEnterpris, systemInfoRemove, enterprisAdd} from '@/api/universalEnergy.js'
|
||
import { getCurrentPersonInfoAPI } from '@/api/customerIformation.js'
|
||
import { getSingleTaskInfo } from '@/api/customer.js'
|
||
import { getCode } from '@/api/common.js'
|
||
import { changeSubStateType, taskList } from '@/api/api'
|
||
|
||
// import img1 from '@/assets/gyqy/three.png'
|
||
// import EnergyManagement from './energyManagement.vue'
|
||
export default {
|
||
data() {
|
||
return {
|
||
nyList: [
|
||
{
|
||
id: '01',
|
||
name: '配电系统',
|
||
icon: require('@/assets/gyqy/three.png'),
|
||
url: './generalEnergy',
|
||
},
|
||
{
|
||
id: '02',
|
||
name: '泵机系统',
|
||
icon: require('@/assets/gyqy/four.png'),
|
||
url: './bengjisystem',
|
||
},
|
||
{
|
||
id: '03',
|
||
name: '风机系统',
|
||
icon: require('@/assets/gyqy/five.png'),
|
||
url: './fengjisystem',
|
||
},
|
||
{
|
||
id: '04',
|
||
name: '空压机系统',
|
||
icon: require('@/assets/gyqy/six.png'),
|
||
url: './kongyajisystem',
|
||
},
|
||
],
|
||
showList: [], // 显示列表
|
||
systemTypes: '', // 通用能源图标列表值
|
||
systemId: '', // 通用能源图标编辑时传
|
||
info: {}, //页面信息
|
||
enterpriseId: '', //新增过有enterpriseId
|
||
typeList: [], //类型列表
|
||
taskId: '',
|
||
taskType: '1',
|
||
records: [],
|
||
tidCid: null,
|
||
enterpriseSystemId: null,
|
||
|
||
}
|
||
},
|
||
created() {
|
||
this.tidCid = JSON.parse(sessionStorage.getItem('tidCid'))
|
||
this.enterpriseSystemId = sessionStorage.getItem('enterpriseSystemId')
|
||
this.getInfo()
|
||
this.getEnergyList()
|
||
this.getCustomerType()
|
||
this.getSingleTaskInfo()
|
||
},
|
||
mounted() {
|
||
// alert(this.$route.params.enterpriseId)
|
||
this.enterpriseId = this.$route.params.enterpriseId? this.$route.params.enterpriseId: sessionStorage.getItem('enterpriseId')
|
||
if (this.enterpriseId) {
|
||
sessionStorage.setItem('enterpriseId', this.enterpriseId)
|
||
sessionStorage.setItem('enId', this.enterpriseId)
|
||
} else if (this.$route.params.creditCode) {
|
||
sessionStorage.setItem('creditCode', this.$route.params.creditCode)
|
||
}
|
||
let data = JSON.parse(sessionStorage.getItem('tidCid'))
|
||
if(data.taskId) {
|
||
this.taskId = data.taskId
|
||
this.taskType = data.taskType
|
||
}
|
||
},
|
||
computed: {
|
||
showForm() {
|
||
if(this.tidCid.taskId) {
|
||
return false
|
||
}
|
||
return true
|
||
},
|
||
id() {
|
||
return this.$route.params.customerId
|
||
},
|
||
// 类型
|
||
typeName() {
|
||
this.typeList.forEach((v) => {
|
||
v.child.forEach((ev) => {
|
||
if (this.info.customerType === ev.code) {
|
||
this.info.customerTypeName = v.name + '/' + ev.name
|
||
}
|
||
})
|
||
})
|
||
return this.info.customerTypeName
|
||
},
|
||
},
|
||
methods: {
|
||
async getSingleTaskInfo () {
|
||
const data = JSON.parse(sessionStorage.getItem('tidCid'))
|
||
const id = data.taskId
|
||
if(id) {
|
||
const res = await getSingleTaskInfo(id)
|
||
if(res.code == 0) {
|
||
this.taskType = res.data.taskType
|
||
if(data) {
|
||
data.taskType = res.data.taskType
|
||
sessionStorage.setItem('tidCid', JSON.stringify(data))
|
||
}
|
||
|
||
}
|
||
} else {
|
||
this.taskType = 4
|
||
}
|
||
|
||
},
|
||
// 获取通用能源选项列表
|
||
getEnergyList() {
|
||
if(!this.enterpriseSystemId||this.enterpriseSystemId=='null') return
|
||
getInfoByEnterpris({id: this.enterpriseSystemId}).then((res) => {
|
||
localStorage.setItem('customerItem', JSON.stringify(res.data))
|
||
if (res.code == 0) {
|
||
this.systemId = res.data.id
|
||
this.systemTypes = res.data.systemTypes
|
||
let str = res.data.systemTypes
|
||
let arr = this.nyList.filter(function (item) {
|
||
if(str){
|
||
return str.indexOf(item.id) != -1
|
||
}
|
||
})
|
||
this.showList = arr
|
||
|
||
} else {
|
||
(this.showList = []), (this.systemTypes = ''), (this.systemId = '')
|
||
}
|
||
})
|
||
},
|
||
EnergyManagement() {
|
||
if (this.enterpriseId ) {
|
||
this.$router.push({
|
||
name: 'energyManagement',
|
||
params: { enterpriseId: this.enterpriseId, item:this.info },
|
||
})
|
||
} else {
|
||
this.$router.push({
|
||
name: 'energyManagement',
|
||
params: { creditCode: this.$route.params.creditCode, item:this.info },
|
||
})
|
||
}
|
||
},
|
||
enterpriseenergy() {
|
||
this.$router.push('./enterpriseenergy')
|
||
},
|
||
// 返回
|
||
onClickLeft() {
|
||
this.$router.push('./customer')
|
||
},
|
||
// 删除项
|
||
deleteItem() {
|
||
// console.log(123);
|
||
},
|
||
toGeneral(url) {
|
||
this.$router.push(url)
|
||
},
|
||
energyadd() {
|
||
if(this.showList.length === 0){
|
||
this.addSystem()
|
||
}
|
||
if(this.showForm) {
|
||
return
|
||
}
|
||
this.$router.push({
|
||
path: './energyAdd',
|
||
query: { systemTypes: this.systemTypes, systemId: this.systemId },
|
||
})
|
||
},
|
||
// 图标右上角减号删除
|
||
iconDelete(item) {
|
||
if(this.showForm) {
|
||
return
|
||
}
|
||
let data = {
|
||
energyType: item.id,
|
||
id: this.systemId,
|
||
}
|
||
systemInfoRemove(data).then((res) => {
|
||
if(res.code == 0) {
|
||
this.$toast('删除成功')
|
||
this.getEnergyList()
|
||
} else {
|
||
this.$toast(res.msg)
|
||
}
|
||
})
|
||
},
|
||
// 获取当前页面信息
|
||
async getInfo() {
|
||
const res = await getCurrentPersonInfoAPI(JSON.parse(sessionStorage.getItem('tidCid')).customerId)
|
||
if (res.code === 0) {
|
||
this.info = res.data
|
||
// const data = {
|
||
// customerId: JSON.parse(sessionStorage.getItem('tidCid')).customerId,
|
||
// taskId: JSON.parse(sessionStorage.getItem('tidCid')).taskId,
|
||
// taskType: JSON.parse(sessionStorage.getItem('tidCid')).taskType,
|
||
// enterpriseSystemId: JSON.parse(sessionStorage.getItem('tidCid')).enterpriseSystemId,
|
||
// item: res.data
|
||
// }
|
||
// sessionStorage.setItem('tidCid', JSON.stringify(data))
|
||
}else{
|
||
this.info = JSON.parse(sessionStorage.getItem('tidCid')).item
|
||
}
|
||
},
|
||
//查询客户类型
|
||
async getCustomerType() {
|
||
const data = {
|
||
codeSortId: '80000001004',
|
||
codeType: 'khlx',
|
||
}
|
||
const ref = await getCode(data)
|
||
if (ref.code === 0) {
|
||
this.typeList = ref.data
|
||
}
|
||
},
|
||
saveAllInfo() {
|
||
taskList({ consName: this.info.customerName }).then((res) => {
|
||
this.records = res.data.list[0]
|
||
|
||
if (!this.records.enterpriseId) {
|
||
this.$notify({
|
||
message: '请填写能源管理信息',
|
||
duration: 1000,
|
||
// background: '#34baae',
|
||
type: 'danger'
|
||
})
|
||
return false
|
||
}
|
||
if (!this.records.enterpriseEnergyId) {
|
||
this.$notify({
|
||
message: '请填写企业用能信息',
|
||
duration: 1000,
|
||
// background: '#34baae',
|
||
type: 'danger'
|
||
})
|
||
return false
|
||
}
|
||
if (!this.records.enterpriseSystemId) {
|
||
this.$notify({
|
||
message: '请填写企业通用能源信息',
|
||
duration: 1000,
|
||
// background: '#34baae',
|
||
type: 'danger'
|
||
})
|
||
return false
|
||
}
|
||
changeSubStateType({ taskId: this.taskId }).then((res) => {
|
||
if (res.code == 0) {
|
||
this.$notify({
|
||
message: '保存成功',
|
||
duration: 1000,
|
||
background: '#34baae',
|
||
})
|
||
this.$router.push('/taskManage')
|
||
}else if(res.code == 1){
|
||
this.$notify({
|
||
message: res.msg,
|
||
duration: 1000,
|
||
// background: '#34baae',
|
||
type: 'danger'
|
||
})
|
||
}
|
||
})
|
||
})
|
||
},
|
||
addSystem(){
|
||
let params = {
|
||
"airEnquireIds": "",
|
||
"creditCode": this.tidCid.item.creditCode,
|
||
"customerId": this.tidCid.customerId,
|
||
"distributeEnquireIds": "",
|
||
"id": this.tidCid.taskId,
|
||
"fanEnquireIds": "", "pumpEnquireIds": "", "systemTypes": ""
|
||
}
|
||
enterprisAdd(params).then(res=> {
|
||
this.enterpriseSystemId = res.data
|
||
sessionStorage.setItem('enterpriseSystemId', res.data)
|
||
})
|
||
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
::v-deep .van-icon-arrow-left {
|
||
font-size: 15px;
|
||
color: #000000;
|
||
}
|
||
|
||
#dadaAcquisition {
|
||
background-color: #f4f4f4;
|
||
padding: 0 10px;
|
||
box-sizing: border-box;
|
||
.header {
|
||
margin-top: 10px;
|
||
background-color: #ffffff;
|
||
padding: 10px;
|
||
box-sizing: border-box;
|
||
border-radius: 5px;
|
||
position: relative;
|
||
.header-name {
|
||
display: flex;
|
||
padding-bottom: 10px;
|
||
box-sizing: border-box;
|
||
font-size: 17px;
|
||
font-weight: 700;
|
||
opacity: 0.9;
|
||
width: 66%;
|
||
img {
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 10px;
|
||
margin-top: 2px;
|
||
}
|
||
}
|
||
.header-address {
|
||
display: flex;
|
||
border-top: 1px dashed;
|
||
padding: 6px 0;
|
||
box-sizing: border-box;
|
||
color: #8d8d8d;
|
||
line-height: 25px;
|
||
img {
|
||
width: 20px; // height: 20px;
|
||
margin-right: 10px;
|
||
}
|
||
.address-warp {
|
||
white-space: nowrap; //规定段落中的文本不进行换行
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
.header-title {
|
||
position: absolute;
|
||
top: 4px;
|
||
right: 4px;
|
||
color: #0fabd9;
|
||
border: 1px solid #42d9ff;
|
||
border-radius: 5px;
|
||
padding: 3px 10px;
|
||
box-sizing: border-box;
|
||
background-color: #cbf5ff;
|
||
}
|
||
}
|
||
.main1 {
|
||
background-color: #fff;
|
||
border-radius: 5px;
|
||
padding: 10px;
|
||
box-sizing: border-box;
|
||
margin-top: 10px;
|
||
.main1-name {
|
||
font-weight: 700;
|
||
color: #10968a;
|
||
font-size: 17px;
|
||
margin-bottom: 10px;
|
||
border-bottom: 1px dashed #eaeaea;
|
||
padding-bottom: 8px;
|
||
}
|
||
.main1-content {
|
||
font-size: 13px;
|
||
text-align: center;
|
||
width: 25%;
|
||
img {
|
||
margin: 0 auto 10px;
|
||
width: 50px;
|
||
height: 50px;
|
||
}
|
||
.main1-content-text {
|
||
color: #808080;
|
||
}
|
||
}
|
||
}
|
||
.main2 {
|
||
background-color: #fff;
|
||
border-radius: 5px;
|
||
padding: 10px;
|
||
box-sizing: border-box;
|
||
margin-top: 10px;
|
||
.main2-name {
|
||
font-weight: 700;
|
||
color: #10968a;
|
||
font-size: 17px;
|
||
margin-bottom: 10px;
|
||
border-bottom: 1px dashed #eaeaea;
|
||
padding-bottom: 8px;
|
||
}
|
||
.main2-flex {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.main2-content {
|
||
font-size: 13px;
|
||
margin-top: 10px;
|
||
text-align: center;
|
||
width: 25%;
|
||
position: relative;
|
||
img {
|
||
margin: 0 auto 10px;
|
||
width: 50px;
|
||
height: 50px;
|
||
}
|
||
.main2-content-text {
|
||
color: #808080;
|
||
}
|
||
.img-del {
|
||
width: 20px;
|
||
height: 20px;
|
||
position: absolute;
|
||
top: -9px;
|
||
right: 12px;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.main3 {
|
||
background-color: #fff;
|
||
border-radius: 5px;
|
||
padding: 10px;
|
||
box-sizing: border-box;
|
||
margin-top: 10px;
|
||
.main3-name {
|
||
font-weight: 700;
|
||
color: #34baae;
|
||
font-size: 17px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.main3-content {
|
||
text-align: center;
|
||
width: 25%;
|
||
font-size: 13px;
|
||
img {
|
||
margin: 0 auto 10px;
|
||
width: 40px;
|
||
height: 40px;
|
||
}
|
||
.main3-content-text {
|
||
color: #808080;
|
||
}
|
||
}
|
||
}
|
||
.footer {
|
||
color: #fff;
|
||
background-color: #34baae;
|
||
border-radius: 5px;
|
||
text-align: center;
|
||
padding: 10px;
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
|
||
.line {
|
||
display: inline-block;
|
||
width: 5px;
|
||
height: 17px;
|
||
position: relative;
|
||
top: 2px;
|
||
margin-right: 5px;
|
||
border-radius: 3px;
|
||
background: linear-gradient(to bottom, #2da197, #2c827c);
|
||
}
|
||
.btn {
|
||
position: fixed;
|
||
bottom: 20px;
|
||
// padding: 0 10px;
|
||
.faqi {
|
||
width: 355px;
|
||
background-color: #34baaf;
|
||
color: #fff;
|
||
border-radius: 8px;
|
||
}
|
||
}
|
||
</style>
|