ipms-sjy-ui/src/views/Home/Index.vue

<template>
  <div>
    <el-card shadow="never" class="mb-15px">
      <el-skeleton :loading="loading" animated>
        <el-row :gutter="16" justify="space-between">
          <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
            <div class="flex items-center">
              <el-avatar :src="avatar" :size="70" class="mr-16px">
                <img src="@/assets/imgs/avatar.gif" alt="" />
              </el-avatar>
              <div>
                <div class="text-20px">
                  {{ t('workplace.welcome') }} {{ username }} {{ t('workplace.happyDay') }}
                </div>
                <div class="mt-10px text-14px text-gray-500">
                  {{ t('workplace.toady') }}，20℃ - 32℃！
                </div>
              </div>
            </div>
          </el-col>
          <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
            <div class="h-70px flex items-center justify-end lt-sm:mt-10px">
              <div class="px-8px text-right">
                <div class="mb-16px text-14px text-gray-400">{{ t('workplace.project') }}</div>
                <CountTo
                  class="text-20px"
                  :start-val="0"
                  :end-val="totalSate.project"
                  :duration="2600"
                />
              </div>
              <el-divider direction="vertical" />
              <div class="px-8px text-right">
                <div class="mb-16px text-14px text-gray-400">{{ t('workplace.toDo') }}</div>
                <CountTo
                  class="text-20px"
                  :start-val="0"
                  :end-val="totalSate.todo"
                  :duration="2600"
                />
              </div>
              <el-divider direction="vertical" border-style="dashed" />
              <div class="px-8px text-right">
                <div class="mb-16px text-14px text-gray-400">{{ t('workplace.access') }}</div>
                <CountTo
                  class="text-20px"
                  :start-val="0"
                  :end-val="totalSate.access"
                  :duration="2600"
                />
              </div>
            </div>
          </el-col>
        </el-row>
      </el-skeleton>
    </el-card>
  </div>

  <div>
    <el-card shadow="never" class="mb-15px">
      <el-skeleton :loading="loading" animated>
        <div class="title1">经营总览</div>
        <el-row :gutter="16" justify="space-between">
          <el-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
            <div class="card1">
              <div class="card1-content">
                <div class="title">总合同额</div>
                <CountTo
                  class="text-20px"
                  :start-val="0"
                  :end-val="17521"
                  :duration="2600"
                  :suffix="' 万元'"
                  style="font-size: 24px"
                />
              </div>
              <el-divider direction="vertical" />
              <div class="card1-content">
                <div class="title">本月新增合同</div>
                <CountTo
                  class="text-20px"
                  :start-val="0"
                  :end-val="1355"
                  :duration="2600"
                  :suffix="' 万元'"
                  style="font-size: 24px"
                />
              </div>
            </div>
          </el-col>
          <el-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
            <div class="card1 bg2">
              <div class="card1-content">
                <div class="title">总产值</div>
                <CountTo
                  class="text-20px"
                  :start-val="0"
                  :end-val="269715"
                  :duration="2600"
                  :suffix="' 万元'"
                  style="font-size: 24px"
                />
              </div>
              <el-divider direction="vertical" />
              <div class="card1-content">
                <div class="title">本月新增回款</div>
                <CountTo
                  class="text-20px"
                  :start-val="0"
                  :end-val="973"
                  :duration="2600"
                  :suffix="' 万元'"
                  style="font-size: 24px"
                />
              </div>
            </div>
          </el-col>
          <el-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
            <div class="card1 bg3">
              <div class="card1-content">
                <div class="title">回款总额</div>
                <CountTo
                  class="text-20px"
                  :start-val="0"
                  :end-val="186314"
                  :duration="2600"
                  :suffix="' 万元'"
                  style="font-size: 24px"
                />
              </div>
              <el-divider direction="vertical" />
              <div class="card1-content">
                <div class="title">本月新增汇款额</div>
                <CountTo
                  class="text-20px"
                  :start-val="0"
                  :end-val="633"
                  :duration="2600"
                  :suffix="' 万元'"
                  style="font-size: 24px"
                />
              </div>
            </div>
          </el-col>
        </el-row>
      </el-skeleton>
    </el-card>
  </div>
  <div class="percent">
    <div class="title2">经营占比</div>
    <el-row :gutter="16" justify="space-between">
      <el-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
        <el-card shadow="never" class="mb-15px">
          <div class="card3-content">
            <div class="title">本月新增合同占比</div>
            <div class="chart">
              <Echart :options="chartOptions1" height="100%" />
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
        <el-card shadow="never" class="mb-15px">
          <div class="card3-content">
            <div class="title">本月新增产值占比</div>
            <div class="chart">
              <Echart :options="chartOptions2" height="100%"/>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
        <el-card shadow="never" class="mb-15px">
          <div class="card3-content">
            <div class="title">本月新增回款占比</div>
            <div class="chart">
              <Echart :options="chartOptions3" height="100%" />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { useUserStore } from '@/store/modules/user'
import { useWatermark } from '@/hooks/web/useWatermark'
import type { WorkplaceTotal, Project, Notice, Shortcut } from './types'
import { getPieOptions } from './echarts-data'

defineOptions({ name: 'Home' })

const { t } = useI18n()
const userStore = useUserStore()
const { setWatermark } = useWatermark()
const loading = ref(true)
const avatar = userStore.getUser.avatar
const username = userStore.getUser.nickname

// chart data
const chartOptions1 = getPieOptions([
  {name: '一所', value: 12},
  {name: '二所', value: 55},
  {name: '三所', value: 39},
]);
const chartOptions2 = getPieOptions([
  {name: '一所', value: 34},
  {name: '二所', value: 78},
  {name: '三所', value: 22},
]);
const chartOptions3 = getPieOptions([
  {name: '一所', value: 89},
  {name: '二所', value: 12},
  {name: '三所', value: 30},
]);

// 获取统计数
let totalSate = reactive<WorkplaceTotal>({
  project: 0,
  access: 0,
  todo: 0
})

const getCount = async () => {
  const data = {
    project: 40,
    access: 2340,
    todo: 10
  }
  totalSate = Object.assign(totalSate, data)
}

const getAllApi = async () => {
  await Promise.all([getCount()])
  loading.value = false
}

getAllApi()
</script>

<style scoped lang="scss">
.title1 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
}

.card1 {
  height: calc((100vh - 400px) * 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(0deg, rgba(229, 243, 253, 1) 0%, rgba(241, 249, 254, 1) 100%);

  .card1-content {
    padding-left: 13%;
    width: 49%;
    padding-left: 10%;

    .title {
      font-size: 20px;
      margin-bottom: 10%;
    }
  }

  &.bg2 {
    background: linear-gradient(0deg, rgba(226, 255, 239, 1) 0%, rgba(243, 255, 243, 1) 100%);
  }

  &.bg3 {
    background: linear-gradient(0deg, rgba(237, 235, 254, 1) 0%, rgba(246, 244, 254, 1) 100%);
  }
}

.percent {
  padding: 20px;

  .title2 {
    font-size: 20px;
    font-weight: bolder;
    margin-bottom: 15px;
  }
  
  .card3-content{
    .title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 20px;
    }

    .chart{
      height: calc((100vh - 400px) * 0.58);
    }
  }
}

:deep(.card1 >.el-divider--vertical) {
  height: 8vh;
}
</style>