ezhizao_dms_supplier_vue/src/views/index.vue

<template>
	<div class="page-container column-container">
		<el-row :gutter="24">
			<el-col :span="8">
				<!-- <div class="dashboard-total-item">
          <img :src="totalIcon2" />
          <div class="dashboard-total-item-label">
            <span>员工总数</span>
            <span>
              <span>本月新入职</span>
              <span>{{ monthTotalCompanies }} 人</span>
            </span>
          </div>
          <div class="number-label">{{ totalCompanies }} 人</div>
        </div> -->
			</el-col>
			<el-col :span="8">
				<!-- <div class="dashboard-total-item">
          <img :src="totalIcon3" />
          <div class="dashboard-total-item-label">
            <span>设备总数</span>
            <span>
              <span>本月新购量</span>
              <span>{{ identityMonthTotal }} 台</span>
            </span>
          </div>
          <div class="number-label">{{ identityTotal }} 台</div>
        </div> -->
			</el-col>
		</el-row>
		<div class="statistic-container">
			<el-row :gutter="16">
				<el-col :span="12">
					<div class="item-statistic-container" id="information-statistic"></div>
				</el-col>
				<el-col :span="12">
					<div class="item-statistic-container" id="appointment-statistic"></div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>
<script setup>
import totalIcon2 from '@/assets/images/dashboard-total-icon-2.png'
import totalIcon3 from '@/assets/images/dashboard-total-icon-3.png'
import { parseTime } from '@/utils/tools.js'

let totalCompanies = ref(0)
let monthTotalCompanies = ref(0)
let identityTotal = ref(0)
let identityMonthTotal = ref(0)

let currentMonth = ref('')
let statisticDom, statistic

onMounted(() => {
	currentMonth.value = parseTime(new Date(), '{y}-{m}')
	//statisticDom = document.getElementById('information-statistic')
	//statistic = echarts.init(statisticDom)
	//getCurrentMonthDayArr()
})

const getCurrentMonthDayArr = (dateStr) => {
	// 获取当前日期
	var currentDate = dateStr ? new Date(dateStr) : new Date()
	// 获取当前月份
	var currentMonth = currentDate.getMonth()
	// 获取下个月的第一天
	var nextMonth = new Date(currentDate.getFullYear(), currentMonth + 1, 1)
	// 设置日期为当前月份的最后一天
	nextMonth.setDate(nextMonth.getDate() - 1)
	// 根据当前月最后一天的日期，判断每个月有多少天
	var days = nextMonth.getDate()

	// 创建一个空数组来存储日期
	const dateArray = []
	// 循环遍历天数
	for (var day = 1; day <= days; ++day) {
		// 使用padStart函数将日期补齐到两位数，不足的地方用0填充
		var formattedDay = String(day).padStart(2, '0')
		// 将格式化后的日期添加到数组中
		dateArray.push(formattedDay)
	}
	statisticOption.xAxis.data = dateArray
	totalCompanies.value = 523
	monthTotalCompanies.value = 276
	identityTotal.value = 5133
	identityMonthTotal.value = 3015

	statisticOption && statistic.setOption(statisticOption)
}
const handleChangeMonth = (val) => {
	getCurrentMonthDayArr(val)
}
</script>

<style scoped>
.dashboard-total-item {
	display: flex;
	align-items: center;
	padding: 0 24px;
	height: 152px;
	background-color: #fff;
	font-size: 16px;
	justify-content: space-between;
}
.dashboard-total-item > .dashboard-total-item-label {
	flex: 1;
	display: flex;
	flex-direction: column;
	line-height: 32px;
	padding: 0 16px;
}
.dashboard-total-item > .dashboard-total-item-label > span:first-child {
	font-weight: bold;
	font-size: 18px;
}
.dashboard-total-item > .dashboard-total-item-label > span:last-child {
	color: #6b6b6b;
}
.dashboard-total-item > .dashboard-total-item-label > span:last-child > span:first-child {
	margin-right: 8px;
}
.dashboard-total-item > .dashboard-total-item-label > span:last-child > span:last-child {
	color: #4367df;
}
.dashboard-total-item > .number-label {
	font-size: 40px;
	margin-left: 16px;
	font-weight: bold;
	color: #5a6ac3;
}
.statistic-container {
	position: relative;
	margin-top: 24px;
	background-color: #fff;
	padding-top: 16px;
	padding-right: 12px;
	padding-bottom: 8px;
	padding-left: 4px;
}
.statistic-container > .month-picker {
	position: absolute;
	top: 16px;
	left: 240px;
	line-height: 24px;
}
.item-statistic-container {
	height: 560px;
}
</style>