mirror of
https://gitee.com/hhyykk/ipms-sjy-ui.git
synced 2025-06-19 14:52:00 +08:00
303 lines
8.8 KiB
Vue
303 lines
8.8 KiB
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>
|