lc_finance/web/src/view/dashboard/index.vue

<template>
  <div class="page">
    <div class="gva-card-box">
      <div class="gva-card">
        <div>
          <el-select
            v-model="project1"
            style="width: 200px;margin-bottom: 20px"
            clearable
            filterable
            value-on-clear=""
            placeholder="请选择项目"
            @change="changeCode"
          >
            <el-option
              v-for="item in projectData"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </div>
        <div
          id="main"
          style="width: 100%; height: 300px;"
          @click="handleChartClick"
        />
      </div>
    </div>

    <div class="gva-card-box">
      <div class="gva-card">
        <div class="gva-card-title">
          <el-row :gutter="10">
            <el-col
              :xs="24"
              :sm="2"
            >
              <span>数据统计</span>
            </el-col>
            <el-col
              :xs="24"
              :sm="4"
            >
              <el-date-picker
                v-model="monthData"
                type="month"
                placeholder="选择月份"
                value-format="YYYY-MM"
                value-on-clear=""
                @change="choiceMonth"
              />
            </el-col>
            <el-col
              :xs="24"
              :sm="4"
            >
              <el-date-picker
                v-model="yearData"
                type="year"
                placeholder="选择年份"
                value-format="YYYY"
                value-on-clear=""
                @change="choiceYear"
              />
            </el-col>
            <el-col
              :xs="24"
              :sm="4"
            >
              <el-select
                v-model="feeGenre"
                clearable
                filterable
                value-on-clear=""
                placeholder="请选择公司费用类型"
                @change="changeFeeGenre"
              >
                <el-option
                  v-for="item in feeGenreData"
                  :key="item.ID"
                  :label="item.name"
                  :value="item.ID"
                />
              </el-select>
            </el-col>
            <el-col
              :xs="24"
              :sm="6"
            />
          </el-row>
        </div>
        <div class="p-4">
          <el-row :gutter="10">
            <el-col
              :xs="24"
              :sm="11"
            >
              <el-table
                :data="projectMonthFee"
                max-height="400px"
                height="400px"
                show-summary
                table-layout="auto"
              >
                <el-table-column
                  prop="projectFeeGenre.name"
                  label="费用类型"
                  width="200"
                  align="center"
                />
                <el-table-column
                  prop="totalExpenditure"
                  label="支出金额"
                  align="center"
                />
                <el-table-column
                  prop="totalDeposit"
                  label="支入金额"
                  align="center"
                />
              </el-table>
            </el-col>
            <el-col
              :xs="24"
              :sm="2"
            />
            <el-col
              :xs="24"
              :sm="11"
            >
              <el-table
                :data="monthFee"
                max-height="400px"
                height="400px"
                table-layout="auto"
                show-summary
              >
                <el-table-column
                  prop="department.name"
                  label="部门"
                  width="200"
                  align="center"
                />
                <el-table-column
                  prop="totalExpenditure"
                  label="支出金额"
                  align="center"
                />
                <el-table-column
                  prop="totalDeposit"
                  label="支入金额"
                  align="center"
                />
              </el-table>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getAllProject, queryProjectSum } from '@/api/project'
import * as echarts from 'echarts'
import { queryMonthExpenses, queryProjectMonthFee } from '@/api/cost'
import { queryExpensesGenre } from '@/api/finance'

let myChart = null

const initChart = () => {
  const chartDom = document.getElementById('main')
  if (myChart) {
    myChart.dispose() // 销毁图表实例
  }
  myChart = echarts.init(chartDom)
  myChart.setOption({
    title: {
      text: '项目总表'
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      data: ['项目总营业额', '项目已收款', '项目应收款']
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    series: [
      {
        data: xData.value,
        type: 'bar'
      }
    ]
  })
}

// 筛选数据
const monthData = ref('')
const yearData = ref('')
const project1 = ref('')
const feeGenre = ref('')

const projectSum = ref()
const projectMonthFee = ref()
const monthFee = ref()
const projectData = ref()
const feeGenreData = ref()

const xData = ref([])
const queryData = async() => {
  await queryProjectSum(project1.value).then(res => {
    projectSum.value = res.data
    xData.value.length = 0
    for (const key in projectSum.value) {
      xData.value.push(projectSum.value[key])
    }
  })
  await queryProjectMonthFee(monthData.value, yearData.value, project1.value).then(res => {
    projectMonthFee.value = res.data
  })
  await queryMonthExpenses(monthData.value, yearData.value, feeGenre.value).then(res => {
    monthFee.value = res.data
  })
  await getAllProject().then(res => {
    projectData.value = res.data
  })
  await queryExpensesGenre().then(res => {
    feeGenreData.value = res.data
  })
  initChart()
}

const handleChartClick = () => {
  console.log('详情')
}

// 项目费用
const choiceYear = () => {
  monthData.value = ''
  queryData()
}

const changeCode = () => {
  queryData()
}

const changeFeeGenre = () => {
  queryData()
}

const choiceMonth = () => {
  yearData.value = ''
  queryData()
}
onMounted(() => {
  queryData()
})

</script>

<style lang="scss" scoped>
.page {
    @apply p-0;
    .gva-card-box{
      @apply p-4;
      &+.gva-card-box{
        @apply pt-0;
      }
    }
    .gva-card {
      @apply box-border bg-white rounded h-auto px-6 py-8 overflow-hidden shadow-sm;
      .gva-card-title{
        @apply pb-5 border-t-0 border-l-0 border-r-0 border-b border-solid border-gray-100;
      }
    }
    .gva-top-card {
        @apply h-72 flex items-center justify-between text-gray-500;
        &-left {
          @apply h-full flex flex-col w-auto;
            &-title {
              @apply text-3xl text-gray-600;
            }
            &-dot {
              @apply mt-4 text-gray-600 text-lg;
            }
            &-item{
              +.gva-top-card-left-item{
                margin-top: 24px;
              }
              margin-top: 14px;
            }
        }
        &-right {
            height: 600px;
            width: 600px;
            margin-top: 28px;
        }
    }
     ::v-deep(.el-card__header){
          @apply p-0  border-gray-200;
        }
        .card-header{
          @apply pb-5 border-b border-solid border-gray-200 border-t-0 border-l-0 border-r-0;
        }
    .quick-entrance-items {
      @apply flex items-center justify-center text-center text-gray-800;
        .quick-entrance-item {
          @apply px-8 py-6 flex items-center flex-col transition-all duration-100 ease-in-out rounded-lg cursor-pointer;
          &:hover{
            @apply shadow-lg;
          }
            &-icon {
              @apply flex items-center h-16 w-16 rounded-lg justify-center mx-0 my-auto text-2xl;
            }
            p {
                @apply mt-2.5;
            }
        }
    }
}
.dashboard-icon {
  @apply flex items-center text-xl mr-2 text-blue-400;
}

</style>