feat: 首页界面 变更

src/views/dashboard/index.vue

@@ -3,70 +3,111 @@
 		<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">4月12日更新： 周年庆特惠，新老用户限时折扣： 购买即送全新数据大屏模板、 门户模板， 点我购买！</div>
+				<div class="header">早安，Admin， 开始您一天的工作吧</div>
+				<div class="tip">今日阴转大雨，15℃ - 25℃，出门记得带伞哦.</div>
 			</div>
-		</el-card>
-
-		<el-card class="box-card">
-			<template #header>
-				<div class="common_title">
-					<span>快捷方式</span>
+			<div class="extra-items">
+				<div class="item">
+					<div class="label">项目数</div>
+					<div class="value">16</div>
 				</div>
-			</template>
-			<el-row :gutter="10">
-				<el-col v-for="icon of flowList" :key="icon" :lg="6" :md="8" :xs="24">
-					<div class="link-item">
-						<svg-icon :icon-class="icon" class-name="icon" />
-						<div class="desc">
-							发起审批
-							<div class="tip">发起审批快捷入口</div>
-						</div>
-					</div>
-				</el-col>
-			</el-row>
+				<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>
-		<!-- Echarts 图表 -->
 		<el-row :gutter="12">
-			<el-col :sm="24" :lg="12" class="card-panel__col">
-				<el-card class="box-card box-card--type2">
+			<el-col :span="16">
+				<el-card class="box-card">
 					<template #header>
 						<div class="common_title">
-							<span>流量概况</span>
+							<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-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 :sm="24" :lg="12" class="card-panel__col">
-				<el-card class="box-card box-card--type3">
+			<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>
+							<span>代办任务</span>
 						</div>
 					</template>
-					<LeChart
-						style="background-color: var(--el-color-error-light-9)"
-						:loading="chartLoading2"
-						is-init-option
-						:option="chartOption2"
-						:height="height"
-					/>
+					<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="ts">
+<script setup name="dashboard" lang="tsx">
 import { colorBase1 } from '@/components/Chart.vue'
 import { reactive, ref, toRefs } from 'vue'
 import * as echarts from 'echarts'
@@ -249,7 +290,7 @@ const state = reactive({
 	chartOption: {},
 	showChart: true,
 	width: '100%',
-	height: '260px',
+	height: '218px',
 	chartLoading2: false,
 	chartOption2: getChartData2()
 	/*chartOption: getChartData()*/
@@ -287,19 +328,147 @@ new Promise(resolve => {
 	state.chartLoading2 = false
 })
 const flowList = [
-	'flow-car',
-	'flow-cart',
-	'flow-checklist',
-	'flow-bank-card',
-	'flow-approval',
-	'flow-bell',
-	'flow-calendar',
-	'flow-clock',
-	'flow-coin',
-	'flow-contract',
-	'flow-dimission',
-	'flow-exchange'
+  {
+    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>
@@ -314,7 +483,7 @@ const flowList = [
 	//background: var(--el-bg-color-page);
 	position: relative;
 
-	&:deep(.el-scrollbar__view) {
+	:deep(.el-scrollbar__view) {
 		padding: 12px;
 		//background: #000;
 		.el-scrollbar__wrap {
@@ -352,6 +521,24 @@ const flowList = [
 	min-width: 300px;
 	font-size: 14px;
 }
+.extra-items {
+	display: flex;
+	align-items: center;
+	.item {
+		width: 160px;
+		color: var(--el-text-color-primary);
+		text-align: right;
+		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;
@@ -366,6 +553,7 @@ const flowList = [
 	display: flex;
 	align-items: center;
 	margin-bottom: 16px;
+  overflow: hidden;
 	&:hover {
 		cursor: pointer;
 		color: var(--el-color-primary);
@@ -373,6 +561,7 @@ const flowList = [
 	.icon {
 		color: #fff;
 		font-size: 50px;
+    flex-shrink: 0;
 	}
 	.desc {
 		//padding-top: 10px;
@@ -393,7 +582,7 @@ const flowList = [
 		margin: -16px -12px;
 	}
 	.el-card__header {
-		background: linear-gradient(to left, var(--el-color-warning-light-8), var(--el-color-white)) no-repeat;
+		//background: linear-gradient(to left, var(--el-color-warning-light-8), var(--el-color-white)) no-repeat;
 	}
 	&.box-card--type2 {
 		.el-card__header {
@@ -406,4 +595,26 @@ const flowList = [
 		}
 	}
 }
+: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>