wt_project_web_bak/src/views/invest/index.vue

<template>
  <div class="flex flex-center full-width">
    <div class="full-width flex mt-10">
      <el-col :span="6" v-if="hasChildrenDept">
        <el-card shadow="hover" style="bottom: 0">
          <left :has-children="hasChildrenDept" @change="changeDept" />
        </el-card>
      </el-col>
      <el-col class="ml-10" :span="hasChildrenDept ? 18 : 24">
        <el-card shadow="hover">
          <div class="flex flex-align-start">
            <el-select
              v-model="year"
              clearable
              style="width: 15%"
              @change="yearSelect"
            >
              <el-option
                v-for="item in years"
                :key="item.value"
                :label="item.value"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="mt-20">
            <years :dept-id="dept" :year="year" @change="change" />
          </div>
        </el-card>
        <el-card shadow="hover" class="mt-10">
          <div class="flex query-screen">
            <div
              class="flex-child-average full-width flex flex-col flex-justify-start"
            >
              <div class="flex flex-center flex-justify-between">
                <div class="flex flex-center">
                  <span class="font-16 bold full-width text-left"
                    >投资数据统计 单位（亿元）</span
                  >
                  <el-tooltip
                    effect="dark"
                    content="平均值：年度责任目标/ 11 ，注：（1，2月合并）</br>投资统计：每月项目实际投资总和"
                    placement="bottom"
                    raw-content
                  >
                  </el-tooltip>
                </div>
                <div
                  class="flex flex-center"
                  :class="isAverage ? 'green' : 'red'"
                >
                  <el-icon>
                    <Warning />
                  </el-icon>
                  <span
                    class="full-width text-right ml-5 nowrap mr-20"
                    v-if="isAverage"
                    >上月已完成平均投资指标</span
                  >
                  <span class="full-width text-right ml-5 nowrap mr-20" v-else
                    >上月未完成平均投资指标</span
                  >
                </div>
              </div>
              <div class="full-width mt-10" style="background-color: #f7fafd">
                <chart
                  :dept-id="dept"
                  :quarter="yearType.value === 0 ? '' : yearType"
                  :year="year"
                />
              </div>
              <div class="mt-20 full-width flex flex-center flex-justify-start">
                <span class="font-16 bold text-left"
                  >项目入库统计 单位（个）</span
                >
                <el-tooltip
                  effect="dark"
                  content="当月实际入库和计划入库项目数量"
                  placement="bottom"
                  raw-content
                >
                  <el-icon size="16">
                    <Warning />
                  </el-icon>
                </el-tooltip>
              </div>
              <div class="full-width mt-10" style="background-color: #f7fafd">
                <chart2
                  :dept-id="dept"
                  :quarter="
                    yearType.value === 0 || yearType === '0' ? '' : yearType
                  "
                  :year="year"
                />
              </div>
            </div>
            <div class="white-bg padding"></div>
            <div class="flex-child-average">
              <amount
                v-if="user.info.viewStage === 1 && dept === null"
                :type="yearType"
                :deptId="dept"
                :year="year"
              />
              <complete v-else :type="yearType" :deptId="dept" :year="year" />
            </div>
          </div>
        </el-card>
      </el-col>
    </div>
  </div>
</template>

<route>
{
path: '/statistics',
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',
  // eslint-disable-next-line vue/no-unused-components
  components: { BasicContainer, left, years, amount, chart, chart2, complete },
  setup() {
    const user = useStore()
    return { user }
  },
  data() {
    return {
      yearType: {
        value: 0
      },
      dept: null,
      year: '',
      hasChildrenDept: false,
      years: [
        {
          value: 2023
        },
        {
          value: 2022
        },
        {
          value: 2021
        },
        {
          value: 2020
        },
        {
          value: 2019
        },
        {
          value: 2018
        },
        {
          value: 2017
        }
      ],
      isAverage: false
    }
  },
  created() {
    this.year = new Date().getFullYear()
    this.deptDetail()
    this.getAvg()
  },
  methods: {
    deptDetail() {
      this.$api.system
        .getDeptDetail({ id: this.user.info.deptId })
        .then(res => {
          if (res.code === 200) {
            this.hasChildrenDept = res.data.hasChildren
            this.dept = res.data.id
          }
        })
    },
    changeDept(res) {
      if (res === null) {
        this.dept = null
        this.getAvg()
        return
      }
      this.dept = res.id
      this.getAvg()
    },
    getAvg() {
      this.$api.invest
        .belowAverage({ deptId: this.dept ? this.dept : '' })
        .then(res => {
          if (res.code === 200) {
            this.isAverage = res.data
          }
        })
    },
    change(index) {
      this.yearType = index
    },
    yearSelect(res) {
      this.year = res
    }
  }
}
</script>

<style scoped>
.query-screen {
  flex-direction: column;
}
</style>