wt_project_web_bak/src/views/invest/index.vue

<template>
  <div class='flex flex-center full-width'>
    <div class='ml-10 mr-10 mt-10 flex flex-align-start full-width'>
      <basic-container style='flex: 1;padding: 0' v-if='user.info.viewStage === 1' >
        <left @change='changeDept'/>
      </basic-container>
      <div class='full-width ml-5' style='flex:4;'>
        <basic-container class='full-width'>
          <div>
            <years :dept-id='dept' @change='change'/>
          </div>
        </basic-container>
        <basic-container>
          <div class='flex '>
            <div class='flex-child-average full-width flex flex-col flex-justify-start'>
              <span class='font-16 bold full-width text-left '>投资数据统计 单位（万元）</span>
              <div class='full-width mt-10' style='background-color: #F7FAFD'>
                <chart :dept-id='dept' :quarter='yearType.value === 0 ? "":yearType '/>
              </div>

              <span class='font-16 bold full-width text-left mt-20'>项目入库统计  单位（个）</span>
              <div class='full-width mt-10' style='background-color: #F7FAFD'>
                <chart2 :dept-id='dept' :quarter='yearType.value === 0 || yearType === "0" ? "":yearType '/>
              </div>
            </div>
            <div class='white-bg padding'></div>
            <div class='flex-child-average'>
              <amount v-if='dept===null' :type='yearType' :deptId='dept'/>
              <complete v-else :type='yearType' :deptId='dept'/>
            </div>
          </div>
        </basic-container>
      </div>
    </div>
  </div>
</template>

<route>
{
path: '/',
name: '年度投资管理',
}
</route>

<script>
import BasicContainer from '@/components/basic-container/main.vue'
import left from './components/left.vue'
import years from '@/views/invest/components/years.vue'
import amount from '@/views/invest/components/amount.vue'
import chart from '@/views/invest/components/chart.vue'
import chart2 from '@/views/invest/components/chart2.vue'
import complete from '@/views/invest/components/complete.vue'
import { useStore } from '@/store/user.js'

export default {
  name: 'index',
  components: { BasicContainer, left, years, amount, chart, chart2, complete },
  setup () {
    const user = useStore()
    return { user }
  },
  data () {
    return {
      yearType: {
        value: 0
      },
      dept: null
    }
  },
  methods: {
    changeDept (res) {
      if (res === null) {
        this.dept = null
        return
      }
      this.dept = res.id
    },
    change (index) {
      this.yearType = index
    }
  }
}
</script>

<style scoped>

</style>