wt_project_web_bak/src/views/home/component/pro_left.vue

<template>
  <div>
    <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">
        <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.totalAmount ? data.totalAmount.toLocaleString() : '0'
          }}万元</span>
        <div class="flex flex-center mt-10">
          <!--          <span class="bold mr-15" style="color:#787C90;">{{ currentSituation.dictValue }}</span>-->
          <el-select
              v-model="keyWords"
              class='bold'
              :placeholder="currentSituation.dictValue"
              size="small"
              @change="result"
          >
            <el-option
                v-for="item in dicList"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey">
            </el-option>
          </el-select>
        </div>
        <el-divider></el-divider>
        <div class="flex flex-center full-width">
          <span class="title pointer" @click="showRelation = !showRelation">已关联子项目<span
              class="bold blue font-16">{{ data.lot }}</span>个</span>
        </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>
        <div>
        </div>
      </div>
    </div>
    <pro-relation :showRelation="showRelation" :projectId="data.id" @close="showRelation = false"/>
  </div>
</template>

<script>
import proRelation from '@/views/home/component/pro_relation.vue'

export default {
  name: 'pro_left',
  components: {proRelation},
  props: {
    data: Object,
    code: {
      type: String,
      default: 'params_type'
    }
  },
  watch: {
    data: {
      handler(val) {
        if (val) {
          this.getDic('project-situation')
        }
      },
      immediate: false
    },
    code: {
      handler(val) {
        if (val) {
          this.getDic(val)
        }
      },
      immediate: false
    }
  },
  data() {
    return {
      height: 0,
      dicList: [],
      dicList1: [],
      currentSituation: '',
      active: 0,
      showRelation: false,
      projectId: '',
      resultList: []
    }
  },
  created() {
    this.getDic(this.code)
    this.onScroll()
  },
  methods: {
    onScroll(event) {
      this.$bus.on('scorll', (e) => {
        const scrollTop = e.target.scrollTop
        const index = this.scorllTopList.findIndex(e => scrollTop >= e.start && scrollTop < e.end)
        this.active = index
        if (e.target.scrollTop === 0) {
          this.active = 0
        }
      })
    },
    getDic(code) {
      this.$api.common.dicList({code}).then(res => {
        if (res.code === 200) {
          if (code === 'project-situation') {
            this.dicList = res.data
            const local = this.dicList.filter(e => e.dictKey === this.data.projectStage + '')
            if (local.length > 0) {
              this.currentSituation = local[0]
            }
          } else {
            this.dicList1 = res.data
            this.resultList = this.dicList1
            this.$emit('success', this.resultList)
            this.scorllTopList = []
            setTimeout(() => {
              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 data = {
                  index: i, start, end
                }
                this.scorllTopList.push(data)
              }
            }, 500)
          }
        }
      })
    },
    proInfo() {
      this.$emit('typeChange')
    },
    record() {
      this.$emit('typeChange1')
    },
    result(item) {
      const data = {id: this.data.id, projectStage: item}
      this.$api.project.proUpdate(data).then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg)
          const local = this.dicList.findIndex(e => e.dictKey === item)
          this.currentSituation = this.dicList[local]
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    change(index) {
      this.active = index
      this.$emit('change', index)
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
  width: 300px;
  position: fixed;
  background-color: #FAF9FA
}

.down {
  width: 300px;
  position: fixed;
  bottom: 0;
  padding-bottom: 20px;
  background-color: #FAF9FA
}

.tip {
  border-radius: 10px;
  background-color: #F4F4F1;
  height: 75px;
  width: 240px
}

.middle {
  width: 270px;
  position: fixed;
  bottom: 175px;
  top: 280px;
  padding-left: 30px;
  background-color: #FAF9FA
}

.title {
  color: #ECAB56;
  font-size: 16px;
  font-weight: 500;
}

.box {
  border-bottom: 1px dashed #AFAFAF;
  width: 180px;
  padding-top: 32px;
  padding-bottom: 32px;
}

.box-s {
  background-image: url("../../../assets/svg/box.svg");
  background-size: 100% 100%;
  width: 180px;
  color: white;
  padding-top: 32px;
  padding-bottom: 32px
}
</style>