|
@@ -1,57 +1,81 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div>
|
|
<div>
|
|
|
- <div class="white-bg top full-height flex flex-col hide-scrollbar" style='overflow-y: auto;'>
|
|
|
|
|
|
|
+ <div
|
|
|
|
|
+ class="white-bg top full-height flex flex-col hide-scrollbar"
|
|
|
|
|
+ style="overflow-y: auto"
|
|
|
|
|
+ >
|
|
|
<div class="flex flex-col flex-center mt-15 padding">
|
|
<div class="flex flex-col flex-center mt-15 padding">
|
|
|
- <span class='font-15 bold mb-10'>{{ data.name }}</span>
|
|
|
|
|
- <span class="font-15 bold mt-5" style="color:#787C90;">项目总投资额</span>
|
|
|
|
|
- <span class="mt-5 font-15 bold main-color">{{
|
|
|
|
|
|
|
+ <span class="font-15 bold mb-10">{{ data.name }}</span>
|
|
|
|
|
+ <span class="font-15 bold mt-5" style="color: #787c90"
|
|
|
|
|
+ >项目总投资额</span
|
|
|
|
|
+ >
|
|
|
|
|
+ <span class="mt-5 font-15 bold main-color"
|
|
|
|
|
+ >{{
|
|
|
data.total_amount ? data.total_amount.toLocaleString() : '0'
|
|
data.total_amount ? data.total_amount.toLocaleString() : '0'
|
|
|
- }}万元</span>
|
|
|
|
|
|
|
+ }}万元</span
|
|
|
|
|
+ >
|
|
|
<div class="flex flex-center mt-10">
|
|
<div class="flex flex-center mt-10">
|
|
|
<!-- <span class="bold mr-15" style="color:#787C90;">{{ currentSituation.dictValue }}</span>-->
|
|
<!-- <span class="bold mr-15" style="color:#787C90;">{{ currentSituation.dictValue }}</span>-->
|
|
|
<el-select
|
|
<el-select
|
|
|
- v-model="keyWords"
|
|
|
|
|
- class='bold'
|
|
|
|
|
- :placeholder="currentSituation.dictValue"
|
|
|
|
|
- size="small"
|
|
|
|
|
- @change="result"
|
|
|
|
|
|
|
+ v-model="keyWords"
|
|
|
|
|
+ class="bold"
|
|
|
|
|
+ :placeholder="currentSituation.dictValue"
|
|
|
|
|
+ size="small"
|
|
|
|
|
+ @change="result"
|
|
|
>
|
|
>
|
|
|
<el-option
|
|
<el-option
|
|
|
- v-for="item in dicList"
|
|
|
|
|
- :key="item.dictKey"
|
|
|
|
|
- :label="item.dictValue"
|
|
|
|
|
- :value="item.dictKey">
|
|
|
|
|
|
|
+ v-for="item in dicList"
|
|
|
|
|
+ :key="item.dictKey"
|
|
|
|
|
+ :label="item.dictValue"
|
|
|
|
|
+ :value="item.dictKey"
|
|
|
|
|
+ >
|
|
|
</el-option>
|
|
</el-option>
|
|
|
</el-select>
|
|
</el-select>
|
|
|
</div>
|
|
</div>
|
|
|
<el-divider></el-divider>
|
|
<el-divider></el-divider>
|
|
|
<div class="flex flex-center full-width">
|
|
<div class="flex flex-center full-width">
|
|
|
- <span class="title pointer" @click="showRelation = !showRelation">已关联子项目<span
|
|
|
|
|
- class="bold blue font-16">{{ data.lot }}</span>个</span>
|
|
|
|
|
|
|
+ <span class="title pointer" @click="showRelation = !showRelation"
|
|
|
|
|
+ >已关联子项目<span class="bold blue font-16">{{ data.lot }}</span
|
|
|
|
|
+ >个</span
|
|
|
|
|
+ >
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="flex flex-center flex-justify-between flex-col mt-15 hide-scrollbar"
|
|
|
|
|
- style="height: 50vh;overflow-x: auto;">
|
|
|
|
|
- <div class="flex flex-center grey-9 font-15 bold pointer"
|
|
|
|
|
- :class="active === index ? 'box-s' : 'box'"
|
|
|
|
|
- v-for="(item,index) in dicList1" :key="item.id" @click="change(index)">{{
|
|
|
|
|
- item.dictValue
|
|
|
|
|
- }}
|
|
|
|
|
|
|
+ <div
|
|
|
|
|
+ class="flex flex-center flex-justify-between flex-col mt-15 hide-scrollbar"
|
|
|
|
|
+ style="height: 50vh; overflow-x: auto"
|
|
|
|
|
+ >
|
|
|
|
|
+ <div v-if="dicList1 && dicList1.length > 0">
|
|
|
|
|
+ <div
|
|
|
|
|
+ class="flex flex-center grey-9 font-15 bold pointer"
|
|
|
|
|
+ :class="active === index ? 'box-s' : 'box'"
|
|
|
|
|
+ v-for="(item, index) in dicList1"
|
|
|
|
|
+ :key="item.id"
|
|
|
|
|
+ @click="change(index)"
|
|
|
|
|
+ >
|
|
|
|
|
+ {{ item.dictValue }}
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div>
|
|
|
|
|
|
|
+ <div v-else>
|
|
|
|
|
+ <month />
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <pro-relation :showRelation="showRelation" :projectId="data.id" @close="showRelation = false" @success='updateLot'/>
|
|
|
|
|
|
|
+ <pro-relation
|
|
|
|
|
+ :showRelation="showRelation"
|
|
|
|
|
+ :projectId="data.id"
|
|
|
|
|
+ @close="showRelation = false"
|
|
|
|
|
+ @success="updateLot"
|
|
|
|
|
+ />
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
import proRelation from '@/views/home/component/pro_relation.vue'
|
|
import proRelation from '@/views/home/component/pro_relation.vue'
|
|
|
|
|
+import month from '@/views/home/component/month.vue'
|
|
|
|
|
|
|
|
export default {
|
|
export default {
|
|
|
name: 'pro_left',
|
|
name: 'pro_left',
|
|
|
- components: { proRelation },
|
|
|
|
|
|
|
+ components: { proRelation, month },
|
|
|
props: {
|
|
props: {
|
|
|
data: Object,
|
|
data: Object,
|
|
|
code: {
|
|
code: {
|
|
@@ -61,7 +85,7 @@ export default {
|
|
|
},
|
|
},
|
|
|
watch: {
|
|
watch: {
|
|
|
data: {
|
|
data: {
|
|
|
- handler (val) {
|
|
|
|
|
|
|
+ handler(val) {
|
|
|
if (val) {
|
|
if (val) {
|
|
|
this.getDic('project-situation')
|
|
this.getDic('project-situation')
|
|
|
}
|
|
}
|
|
@@ -69,7 +93,7 @@ export default {
|
|
|
immediate: false
|
|
immediate: false
|
|
|
},
|
|
},
|
|
|
code: {
|
|
code: {
|
|
|
- handler (val) {
|
|
|
|
|
|
|
+ handler(val) {
|
|
|
if (val) {
|
|
if (val) {
|
|
|
this.getDic(val)
|
|
this.getDic(val)
|
|
|
}
|
|
}
|
|
@@ -77,7 +101,7 @@ export default {
|
|
|
immediate: false
|
|
immediate: false
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
- data () {
|
|
|
|
|
|
|
+ data() {
|
|
|
return {
|
|
return {
|
|
|
height: 0,
|
|
height: 0,
|
|
|
dicList: [],
|
|
dicList: [],
|
|
@@ -90,28 +114,32 @@ export default {
|
|
|
projectStage: ''
|
|
projectStage: ''
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
- created () {
|
|
|
|
|
|
|
+ created() {
|
|
|
this.projectStage = this.$route.query.projectStage
|
|
this.projectStage = this.$route.query.projectStage
|
|
|
this.getDic(this.code)
|
|
this.getDic(this.code)
|
|
|
this.onScroll()
|
|
this.onScroll()
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
- onScroll (event) {
|
|
|
|
|
- this.$bus.on('scorll', (e) => {
|
|
|
|
|
|
|
+ onScroll(event) {
|
|
|
|
|
+ this.$bus.on('scorll', e => {
|
|
|
const scrollTop = e.target.scrollTop
|
|
const scrollTop = e.target.scrollTop
|
|
|
- const index = this.scorllTopList.findIndex(e => scrollTop >= e.start && scrollTop < e.end)
|
|
|
|
|
|
|
+ const index = this.scorllTopList.findIndex(
|
|
|
|
|
+ e => scrollTop >= e.start && scrollTop < e.end
|
|
|
|
|
+ )
|
|
|
this.active = index
|
|
this.active = index
|
|
|
if (e.target.scrollTop === 0) {
|
|
if (e.target.scrollTop === 0) {
|
|
|
this.active = 0
|
|
this.active = 0
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
},
|
|
},
|
|
|
- getDic (code) {
|
|
|
|
|
|
|
+ getDic(code) {
|
|
|
this.$api.common.dicList({ code }).then(res => {
|
|
this.$api.common.dicList({ code }).then(res => {
|
|
|
if (res.code === 200) {
|
|
if (res.code === 200) {
|
|
|
if (code === 'project-situation') {
|
|
if (code === 'project-situation') {
|
|
|
this.dicList = res.data
|
|
this.dicList = res.data
|
|
|
- const local = this.dicList.filter(e => e.dictKey === this.projectStage)
|
|
|
|
|
|
|
+ const local = this.dicList.filter(
|
|
|
|
|
+ e => e.dictKey === this.projectStage
|
|
|
|
|
+ )
|
|
|
if (local.length > 0) {
|
|
if (local.length > 0) {
|
|
|
this.currentSituation = local[0]
|
|
this.currentSituation = local[0]
|
|
|
}
|
|
}
|
|
@@ -122,10 +150,15 @@ export default {
|
|
|
this.scorllTopList = []
|
|
this.scorllTopList = []
|
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
|
for (let i = 0; i < this.resultList.length; i++) {
|
|
for (let i = 0; i < this.resultList.length; i++) {
|
|
|
- const start = i === 0 ? 0 : document.getElementById('header' + i).offsetTop
|
|
|
|
|
- const end = document.getElementById('header' + (i + 1)).offsetTop
|
|
|
|
|
|
|
+ const start =
|
|
|
|
|
+ i === 0 ? 0 : document.getElementById('header' + i).offsetTop
|
|
|
|
|
+ const end = document.getElementById(
|
|
|
|
|
+ 'header' + (i + 1)
|
|
|
|
|
+ ).offsetTop
|
|
|
const data = {
|
|
const data = {
|
|
|
- index: i, start, end
|
|
|
|
|
|
|
+ index: i,
|
|
|
|
|
+ start,
|
|
|
|
|
+ end
|
|
|
}
|
|
}
|
|
|
this.scorllTopList.push(data)
|
|
this.scorllTopList.push(data)
|
|
|
}
|
|
}
|
|
@@ -134,13 +167,13 @@ export default {
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
},
|
|
},
|
|
|
- proInfo () {
|
|
|
|
|
|
|
+ proInfo() {
|
|
|
this.$emit('typeChange')
|
|
this.$emit('typeChange')
|
|
|
},
|
|
},
|
|
|
- record () {
|
|
|
|
|
|
|
+ record() {
|
|
|
this.$emit('typeChange1')
|
|
this.$emit('typeChange1')
|
|
|
},
|
|
},
|
|
|
- result (item) {
|
|
|
|
|
|
|
+ result(item) {
|
|
|
const data = { id: this.data.id, project_stage: Number.parseInt(item) }
|
|
const data = { id: this.data.id, project_stage: Number.parseInt(item) }
|
|
|
this.$api.project.proUpdate(data).then(res => {
|
|
this.$api.project.proUpdate(data).then(res => {
|
|
|
if (res.code === 200) {
|
|
if (res.code === 200) {
|
|
@@ -152,10 +185,10 @@ export default {
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
},
|
|
},
|
|
|
- updateLot (count) {
|
|
|
|
|
|
|
+ updateLot(count) {
|
|
|
this.data.lot = count
|
|
this.data.lot = count
|
|
|
},
|
|
},
|
|
|
- change (index) {
|
|
|
|
|
|
|
+ change(index) {
|
|
|
this.active = index
|
|
this.active = index
|
|
|
this.$emit('change', index)
|
|
this.$emit('change', index)
|
|
|
}
|
|
}
|
|
@@ -167,7 +200,7 @@ export default {
|
|
|
.top {
|
|
.top {
|
|
|
width: 300px;
|
|
width: 300px;
|
|
|
position: fixed;
|
|
position: fixed;
|
|
|
- background-color: #FAF9FA
|
|
|
|
|
|
|
+ background-color: #faf9fa;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.down {
|
|
.down {
|
|
@@ -175,14 +208,14 @@ export default {
|
|
|
position: fixed;
|
|
position: fixed;
|
|
|
bottom: 0;
|
|
bottom: 0;
|
|
|
padding-bottom: 20px;
|
|
padding-bottom: 20px;
|
|
|
- background-color: #FAF9FA
|
|
|
|
|
|
|
+ background-color: #faf9fa;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.tip {
|
|
.tip {
|
|
|
border-radius: 10px;
|
|
border-radius: 10px;
|
|
|
- background-color: #F4F4F1;
|
|
|
|
|
|
|
+ background-color: #f4f4f1;
|
|
|
height: 75px;
|
|
height: 75px;
|
|
|
- width: 240px
|
|
|
|
|
|
|
+ width: 240px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.middle {
|
|
.middle {
|
|
@@ -191,28 +224,28 @@ export default {
|
|
|
bottom: 175px;
|
|
bottom: 175px;
|
|
|
top: 280px;
|
|
top: 280px;
|
|
|
padding-left: 30px;
|
|
padding-left: 30px;
|
|
|
- background-color: #FAF9FA
|
|
|
|
|
|
|
+ background-color: #faf9fa;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.title {
|
|
.title {
|
|
|
- color: #ECAB56;
|
|
|
|
|
|
|
+ color: #ecab56;
|
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.box {
|
|
.box {
|
|
|
- border-bottom: 1px dashed #AFAFAF;
|
|
|
|
|
|
|
+ border-bottom: 1px dashed #afafaf;
|
|
|
width: 180px;
|
|
width: 180px;
|
|
|
padding-top: 32px;
|
|
padding-top: 32px;
|
|
|
padding-bottom: 32px;
|
|
padding-bottom: 32px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.box-s {
|
|
.box-s {
|
|
|
- background-image: url("../../../assets/svg/box.svg");
|
|
|
|
|
|
|
+ background-image: url('../../../assets/svg/box.svg');
|
|
|
background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
|
width: 180px;
|
|
width: 180px;
|
|
|
color: white;
|
|
color: white;
|
|
|
padding-top: 32px;
|
|
padding-top: 32px;
|
|
|
- padding-bottom: 32px
|
|
|
|
|
|
|
+ padding-bottom: 32px;
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|