aizuda-web-vue3/src/views/dashboard/index.vue

<template>
	<el-scrollbar ref="dashboardRef" class="dashboard-container column-page-wrap">
		<el-card class="info-wrap">
			<img class="logo" src="@/assets/images/logo.png" />
			<div class="desc-wrap">
				<div class="header">早安，Admin， 开始您一天的工作吧</div>
				<div class="tip">今日阴转大雨，15℃ - 25℃，出门记得带伞哦.</div>
			</div>
			<div class="extra-items">
				<div class="item">
					<div class="label">项目数</div>
					<div class="value">16</div>
				</div>
				<div class="item">
					<div class="label">代办</div>
					<div class="value">3/15</div>
				</div>
				<div class="item">
					<div class="label">消息</div>
					<div class="value">36</div>
				</div>
			</div>
		</el-card>
		<el-row :gutter="12">
			<el-col :span="16">
				<el-card class="box-card">
					<template #header>
						<div class="common_title">
							<span>快捷方式</span>
						</div>
					</template>
					<el-row :gutter="10">
						<el-col v-for="(v, i) of flowList" :key="i" :span="6">
							<div class="link-item">
								<svg-icon :icon-class="v.icon" class-name="icon" />
								<div class="desc">
									<div class="text-overflow_ellipsis">{{ v.label }}</div>
									<div class="tip text-overflow_ellipsis">{{ v.label }}快捷入口</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</el-card>
			</el-col>
			<el-col :span="8">
        <el-carousel style="margin-top: 12px;border-radius: 8px;" height="288px">
          <el-carousel-item>
            <img class="banner-img" src="@/assets/images/banner_01.webp" alt=""/>
          </el-carousel-item>
          <el-carousel-item>
            <img class="banner-img" src="@/assets/images/banner_02.webp" alt=""/>
          </el-carousel-item>
        </el-carousel>
			</el-col>
		</el-row>
		<el-row :gutter="12">
			<el-col :span="16">
				<el-card class="box-card">
					<template #header>
						<div class="common_title">
							<span>代办任务</span>
						</div>
					</template>
					<LeTable class="local_table" v-bind="tableOpts"></LeTable>
				</el-card>
			</el-col>
			<el-col :span="8">
        <!-- Echarts 图表 -->
        <el-row :gutter="12">
          <el-col :span="24" class="card-panel__col">
            <el-card class="box-card box-card--type2">
              <template #header>
                <div class="common_title">
                  <span>流量概况</span>
                </div>
              </template>
              <LeChart
                  ref="chartRef"
                  style="background-color: var(--el-color-primary-light-9)"
                  class="local_chartWrap"
                  :loading="chartLoading"
                  :show-chart="showChart"
                  :option="chartOption"
                  :height="height"
              />
            </el-card>
          </el-col>
<!--          <el-col :sm="24" :lg="12" class="card-panel__col">
            <el-card class="box-card box-card&#45;&#45;type3">
              <template #header>
                <div class="common_title">
                  <span>授权数</span>
                </div>
              </template>
              <LeChart
                  style="background-color: var(&#45;&#45;el-color-error-light-9)"
                  :loading="chartLoading2"
                  is-init-option
                  :option="chartOption2"
                  :height="height"
              />
            </el-card>
          </el-col>-->
        </el-row>
      </el-col>
		</el-row>
	</el-scrollbar>
</template>

<script setup name="dashboard" lang="tsx">
import { colorBase1 } from '@/components/Chart.vue'
import { reactive, ref, toRefs } from 'vue'
import * as echarts from 'echarts'
const dashboardRef = ref()
// window.dashboardRef = dashboardRef
const getChartData = () => ({
	/*title: {
		show: true,
		text: '业绩总览',
		x: 'center',
		padding: 15,
		textStyle: {
			fontSize: 18,
			fontStyle: 'normal',
			fontWeight: 'bold',
			color: '#337ecc'
		}
	},*/
	// backgroundColor: '',
	grid: {
		top: '5%',
		left: '2%',
		right: '4%',
		bottom: '0%',
		containLabel: true
	},
	tooltip: {
		// show: true,
		trigger: 'axis',
		axisPointer: {
			type: 'cross',
			crossStyle: {
				color: '#999'
			}
		}
	},
	legend: {
		show: false
		/*x: 'center',
		y: 'bottom',
		data: ['收入', '毛利润', '收入增长率', '利润增长率']*/
	},
	xAxis: [
		{
			type: 'category',
			data: ['2024/03/09', '2024/03/19', '2024/03/29', '2024/04/09', '2024/04/13'],
			axisPointer: {
				type: 'shadow'
			}
		}
	],
	yAxis: [
		{
			type: 'value',
			min: 0,
			// max: 10000,
			// interval: 2000,
			axisLabel: {
				formatter: '{value} '
			}
		}
	],
	series: [
		{
			name: '浏览量',
			type: 'line',
			smooth: true,
			yAxisIndex: 0,
			data: [250, 660, 1080, 960, 2100, 2530, 3680, 2909, 3071],
			itemStyle: {
				color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
					{
						// offset: 0,
						// color: colorBase1[0]
						offset: 0,
						color: '#5B8FF9'
					},
					{
						// offset: 1,
						// color: colorBase1[1]
						offset: 1,
						color: 'rgba(91,143,249,0.3)'
					}
				])
			},
			//区域填充样式
			areaStyle: {
				normal: {
					//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
					color: new echarts.graphic.LinearGradient(
						0,
						0,
						0,
						1,
						[
							{
								offset: 0,
								color: '#5B8FF9' // colorBase1[0]
							},
							// {
							// 	offset: 0.5,
							// 	color: colorBase1[2]
							// },
							{
								offset: 1,
								color: 'rgba(91,143,249,0.3)'
							}
						],
						false
					)
					// shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
					// shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
				}
			}
		}
	]
})
const getChartData2 = () => {
	// const backgroundColor = dashboardRef.value
	// const backgroundColor = (dashboardRef.value && window.getComputedStyle(dashboardRef.value, null)?.getPropertyValue('background-color')) || '#409eff'
	return {
		// backgroundColor: '#f69cd8',
		// backgroundColor,

		/*title: {
			show: true,
			text: '产品分类总览',
			x: 'center',
			padding: 15,
			textStyle: {
				fontSize: 18,
				fontStyle: 'normal',
				fontWeight: 'bold',
				color: '#337ecc'
			}
		},*/
		grid: {
			top: '5%',
			left: '2%',
			right: '4%',
			bottom: '0%',
			containLabel: true
		},
		xAxis: {
			type: 'category',
			// data: ['0时', '4时', '8时', '12时', '16时', '20时', '24时'],
			data: ['2024/03/09', '2024/03/19', '2024/03/29', '2024/04/09', '2024/04/13'],
			axisTick: {
				alignWithLabel: true
			}
		},
		yAxis: {
			type: 'value'
		},
		legend: {
			show: false
			// top: 'bottom',
			// data: data.map(v => ({ name: v.name }))
		},
		series: [
			{
				name: '授权数',
				type: 'bar',
				data: [370, 480, 430, 523, 450, 420, 490, 580],
				barWidth: 20,
				itemStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: '#f56c6c' /*colorBase1[2]*/ },
						{ offset: 1, color: 'rgba(245,108,108,0.5)' /*colorBase1[3]*/ }
					])
				}
			}
		]
	}
}
const chartRef = ref()
// window.chartRef = chartRef
const state = reactive({
	chartLoading: false,
	chartOption: {},
	showChart: true,
	width: '100%',
	height: '218px',
	chartLoading2: false,
	chartOption2: getChartData2()
	/*chartOption: getChartData()*/
})
const { chartLoading, chartOption, width, height, showChart, chartLoading2, chartOption2 } = toRefs(state)
window.test_showChart = () => (showChart.value = !showChart.value)
window.test_localStyle = (width_ = '100%', height_ = '600px') => {
	width.value = width_
	height.value = height_
}
// lineChart
new Promise(resolve => {
	state.chartLoading = true
	setTimeout(() => {
		resolve(getChartData())
	}, 1000)
}).then((res: any) => {
	console.error(res, 'res////////')
	state.chartOption = res
	state.chartLoading = false
	// setTimeout(() => {
	//   state.chartLoading = false
	// }, 50)
})

// pieChart
new Promise(resolve => {
	state.chartLoading2 = true
	setTimeout(() => {
		resolve(getChartData2())
	}, 500)
}).then((res: any) => {
	console.error(res, 'pieChart res////////')
	state.chartOption2 = res
	state.chartLoading2 = false
})
const flowList = [
  {
    icon: 'flow-car',
    label: '组织管理'
  },
  {
    icon: 'flow-cart',
    label: '用户管理'
  },
  {
    icon: 'flow-checklist',
    label: '职位管理'
  },
  {
    icon: 'flow-bank-card',
    label: '角色管理'
  },
  {
    icon: 'flow-approval',
    label: '模块管理'
  },
  {
    icon: 'flow-bell',
    label: '菜单管理'
  },
  {
    icon: 'flow-calendar',
    label: '三方管理'
  },
  {
    icon: 'flow-clock',
    label: '数据字典'
  },
  {
    icon: 'flow-coin',
    label: '系统管理'
  },
  {
    icon: 'flow-contract',
    label: '会话管理'
  },
  {
    icon: 'flow-dimission',
    label: '访问日志'
  },
  {
    icon: 'flow-exchange',
    label: '操作日志'
  }
]
const tableOpts = ref({
	list: [
		{
			title: '支付页面增加分期选择',
			module: '支付',
			users: ['01', '02', '03'],
			tests: ['09', '10', '06'],
			status: '1'
		},
		{
			title: '新增banner轮播图广告',
			module: '广告',
			users: ['02', '03'],
			tests: ['09', '10', '06'],
			status: '2'
		},
		{
			title: '支付页支持支付宝支付',
			module: '支付',
			users: ['02'],
			tests: ['05'],
			status: '2'
		},
		{
			title: '开发微信小程序',
			module: '营销',
			users: ['01', '02', '03'],
			tests: ['09', '10', '06'],
			status: '1'
		}
	],
	columns: [
		{
			label: '任务说明',
			prop: 'title',
			minWidth: '220px'
		},
		{
			label: '模块',
			prop: 'module'
			// minWidth: '220px',
		},
		{
			label: '协作者',
			prop: 'users',
      showOverflowTooltip: false,
      slots: {
        default: ({ row }) => {
          return <div>
            {
              row.users.map(id => {
                return <SvgIcon class="avatar-icon" icon-class={`avatar-${id}`}></SvgIcon>
              })
            }
          </div>
        }
      }
      // minWidth: '220px',
		},
		{
			label: '测试者',
			prop: 'tests',
      showOverflowTooltip: false,
      slots: {
        default: ({ row }) => {
          return <div>
            {
              row.tests.map(id => {
                return <SvgIcon class="avatar-icon" icon-class={`avatar-${id}`}></SvgIcon>
              })
            }
          </div>
        }
      }
			// minWidth: '220px',
		},
		{
			label: '完成度',
			prop: 'status',
      slots: {
        default: ({ row }) => {
          const config = ({ 1: { type: 'success', text: '完成' }, 2: { type: 'danger', text: '未完成' } })[row.status]
          return <el-tag type={config.type}>{config.text}</el-tag>
        }
      }
			// minWidth: '220px',
		}
	],
	options: {
		showPagination: false
	}
})
</script>

<style lang="scss" scoped>
.dashboard-container {
	overflow-y: auto;
	//padding: 12px;
	//overflow-x: hidden;
	//background-color: rgb(240, 242, 245);
	background: var(--el-bg-color);
	//background: #f1f1fd;
	//background: var(--el-color-primary-light-9);
	//background: var(--el-bg-color-page);
	position: relative;

	:deep(.el-scrollbar__view) {
		padding: 12px;
		//background: #000;
		.el-scrollbar__wrap {
			overflow-x: hidden;
		}
		.el-scrollbar__bar.is-horizontal {
			//.el-scrollbar__thumb {
			display: none;
			//}
		}
	}
}
:deep(.info-wrap) {
	.el-card__body {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	min-height: 120px;
	background: var(--el-color-white) linear-gradient(120deg, var(--el-color-primary-light-9) 10%, var(--el-color-white)) no-repeat;
	.header {
		//font-size: var(--el-font-size-bigger);
		font-size: 18px;
		font-weight: 700;
		line-height: 30px;
	}
	.tip {
		min-height: 25px;
		line-height: 25px;
	}
}
.desc-wrap {
	flex: auto;
	width: calc(100% - 200px);
	min-width: 300px;
	font-size: 14px;
}
.extra-items {
	display: flex;
	align-items: center;
	.item {
		width: 160px;
		color: var(--el-text-color-primary);
		font-size: 14px;
		.value {
			margin-top: 6px;
			font-size: 20px;
			color: var(--el-text-color-regular);
		}
		& + .item {
			margin-left: 12px;
		}
	}
}
.logo {
	width: 80px;
	height: 80px;
	/*padding: var(--el-padding);
	margin-right: var(--el-margin);*/
	padding: 16px;
	margin-right: 16px;
	border-radius: 6px;
	background-color: var(--el-color-primary-light-8);
}
.link-item {
	display: flex;
	align-items: center;
	margin-bottom: 16px;
  overflow: hidden;
	&:hover {
		cursor: pointer;
		color: var(--el-color-primary);
	}
	.icon {
		color: #fff;
		font-size: 50px;
    flex-shrink: 0;
	}
	.desc {
		//padding-top: 10px;
		margin-left: 10px;
		font-size: 14px;
		font-weight: 600;
		.tip {
			margin-top: 5px;
			color: var(--el-text-color-regular);
			font-size: 12px;
			font-weight: normal;
		}
	}
}
:deep(.box-card) {
	margin-top: 12px;
	.common_title {
		margin: -16px -12px;
	}
	.el-card__header {
		//background: linear-gradient(to left, var(--el-color-warning-light-8), var(--el-color-white)) no-repeat;
	}
	&.box-card--type2 {
		.el-card__header {
			background: linear-gradient(to left, var(--el-color-primary-light-8), var(--el-color-white)) no-repeat;
		}
	}
	&.box-card--type3 {
		.el-card__header {
			background: linear-gradient(to left, var(--el-color-error-light-8), var(--el-color-white)) no-repeat;
		}
	}
}
:deep(.local_table) {
	padding: 0;
	.toolBarWrap {
		display: none;
	}
	.el-table__body-wrapper {
		.el-scrollbar {
			.el-scrollbar__view {
				padding: 0;
			}
		}
	}
  .avatar-icon {
    font-size: 24px;
    & + .avatar-icon {
      margin-left: 4px;
    }
  }
}
.banner-img {
  height: 100%;
}
</style>