|
|
@@ -1,53 +1,302 @@
|
|
|
<route lang="yaml">
|
|
|
-name: home
|
|
|
+name: dashboard
|
|
|
meta: ''
|
|
|
-title: 主页
|
|
|
+title: dashboard
|
|
|
icon: ant-design:home-twotone
|
|
|
</route>
|
|
|
|
|
|
-<script lang="ts" setup>
|
|
|
-function open(url: string) {
|
|
|
- window.open(url, '_blank')
|
|
|
-}
|
|
|
+<script lang="ts" setup name="dashboard">
|
|
|
+import * as Echarts from 'echarts'
|
|
|
|
|
|
-const fantasticTemplateInfo = ref({
|
|
|
- feature: [
|
|
|
- '支持 TypeScript',
|
|
|
- '默认集成 vue-router 和 pinia',
|
|
|
- '全局 SCSS 资源引入',
|
|
|
- '全局组件自动注册',
|
|
|
- '支持 SVG 图标，CSS 精灵图自动合成',
|
|
|
- '支持 mock 数据，可摆脱后端束缚独立开发',
|
|
|
- '支持 gzip / brotli 优化项目体积，提高加载速度',
|
|
|
- '结合 IDE 插件、ESlint 、stylelint 、Git 钩子，轻松实现团队代码规范',
|
|
|
- ],
|
|
|
-})
|
|
|
+const chart1Ref = ref()
|
|
|
+const chart2Ref = ref()
|
|
|
+const chart3Ref = ref()
|
|
|
+const chart4Ref = ref()
|
|
|
+let chart1: any
|
|
|
+let chart2: any
|
|
|
+let chart3: any
|
|
|
+let chart4: any
|
|
|
|
|
|
-const fantasticAdminInfo = ref({
|
|
|
- imageVisible: false,
|
|
|
- index: 0,
|
|
|
- data: [
|
|
|
- 'https://hooray.gitee.io/fantastic-admin/preview1.png',
|
|
|
- 'https://hooray.gitee.io/fantastic-admin/preview2.png',
|
|
|
- 'https://hooray.gitee.io/fantastic-admin/preview3.png',
|
|
|
- 'https://hooray.gitee.io/fantastic-admin/preview4.png',
|
|
|
- 'https://hooray.gitee.io/fantastic-admin/preview5.png',
|
|
|
- 'https://hooray.gitee.io/fantastic-admin/preview6.png',
|
|
|
- ],
|
|
|
+onMounted(() => {
|
|
|
+ initChart1()
|
|
|
+ initChart2()
|
|
|
+ initChart3()
|
|
|
+ initChart4()
|
|
|
+ window.addEventListener('resize', () => {
|
|
|
+ chart1.resize()
|
|
|
+ chart2.resize()
|
|
|
+ chart3.resize()
|
|
|
+ chart4.resize()
|
|
|
+ })
|
|
|
})
|
|
|
|
|
|
-const oneStepAdminInfo = ref({
|
|
|
- imageVisible: false,
|
|
|
- index: 0,
|
|
|
- data: [
|
|
|
- 'https://hooray.gitee.io/one-step-admin/preview1.png',
|
|
|
- 'https://hooray.gitee.io/one-step-admin/preview2.png',
|
|
|
- 'https://hooray.gitee.io/one-step-admin/preview3.png',
|
|
|
- 'https://hooray.gitee.io/one-step-admin/preview4.png',
|
|
|
- 'https://hooray.gitee.io/one-step-admin/preview5.png',
|
|
|
- 'https://hooray.gitee.io/one-step-admin/preview6.png',
|
|
|
- ],
|
|
|
-})
|
|
|
+function initChart1() {
|
|
|
+ chart1 = Echarts.init(chart1Ref.value)
|
|
|
+ // 配置数据
|
|
|
+ const option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
|
+ type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他'],
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '直接访问',
|
|
|
+ type: 'bar',
|
|
|
+ data: [320, 332, 301, 334, 390, 330, 320],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '邮件营销',
|
|
|
+ type: 'bar',
|
|
|
+ stack: '广告',
|
|
|
+ data: [120, 132, 101, 134, 90, 230, 210],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '联盟广告',
|
|
|
+ type: 'bar',
|
|
|
+ stack: '广告',
|
|
|
+ data: [220, 182, 191, 234, 290, 330, 310],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '视频广告',
|
|
|
+ type: 'bar',
|
|
|
+ stack: '广告',
|
|
|
+ data: [150, 232, 201, 154, 190, 330, 410],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '搜索引擎',
|
|
|
+ type: 'bar',
|
|
|
+ data: [862, 1018, 964, 1026, 1679, 1600, 1570],
|
|
|
+ markLine: {
|
|
|
+ lineStyle: {
|
|
|
+ type: 'dashed',
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ [{ type: 'min' }, { type: 'max' }],
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '百度',
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: 5,
|
|
|
+ stack: '搜索引擎',
|
|
|
+ data: [620, 732, 701, 734, 1090, 1130, 1120],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '谷歌',
|
|
|
+ type: 'bar',
|
|
|
+ stack: '搜索引擎',
|
|
|
+ data: [120, 132, 101, 134, 290, 230, 220],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '必应',
|
|
|
+ type: 'bar',
|
|
|
+ stack: '搜索引擎',
|
|
|
+ data: [60, 72, 71, 74, 190, 130, 110],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '其他',
|
|
|
+ type: 'bar',
|
|
|
+ stack: '搜索引擎',
|
|
|
+ data: [62, 82, 91, 84, 109, 110, 120],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ // 传入数据
|
|
|
+ chart1.setOption(option)
|
|
|
+}
|
|
|
+function initChart2() {
|
|
|
+ chart2 = Echarts.init(chart2Ref.value)
|
|
|
+ // 配置数据
|
|
|
+ const option = {
|
|
|
+ title: {
|
|
|
+ text: '堆叠区域图',
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'cross',
|
|
|
+ label: {
|
|
|
+ backgroundColor: '#6a7985',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {
|
|
|
+ saveAsImage: {},
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '邮件营销',
|
|
|
+ type: 'line',
|
|
|
+ stack: '总量',
|
|
|
+ areaStyle: {},
|
|
|
+ data: [120, 132, 101, 134, 90, 230, 210],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '联盟广告',
|
|
|
+ type: 'line',
|
|
|
+ stack: '总量',
|
|
|
+ areaStyle: {},
|
|
|
+ data: [220, 182, 191, 234, 290, 330, 310],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '视频广告',
|
|
|
+ type: 'line',
|
|
|
+ stack: '总量',
|
|
|
+ areaStyle: {},
|
|
|
+ data: [150, 232, 201, 154, 190, 330, 410],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '直接访问',
|
|
|
+ type: 'line',
|
|
|
+ stack: '总量',
|
|
|
+ areaStyle: {},
|
|
|
+ data: [320, 332, 301, 334, 390, 330, 320],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '搜索引擎',
|
|
|
+ type: 'line',
|
|
|
+ stack: '总量',
|
|
|
+ areaStyle: {},
|
|
|
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ // 传入数据
|
|
|
+ chart2.setOption(option)
|
|
|
+}
|
|
|
+function initChart3() {
|
|
|
+ chart3 = Echarts.init(chart3Ref.value)
|
|
|
+ // 配置数据
|
|
|
+ const option = {
|
|
|
+ title: {
|
|
|
+ text: '某站点用户访问来源',
|
|
|
+ subtext: '纯属虚构',
|
|
|
+ left: 'center',
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: '{a} <br/>{b} : {c} ({d}%)',
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: 'vertical',
|
|
|
+ left: 'left',
|
|
|
+ data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '访问来源',
|
|
|
+ type: 'pie',
|
|
|
+ radius: '55%',
|
|
|
+ center: ['50%', '60%'],
|
|
|
+ data: [
|
|
|
+ { value: 335, name: '直接访问' },
|
|
|
+ { value: 310, name: '邮件营销' },
|
|
|
+ { value: 234, name: '联盟广告' },
|
|
|
+ { value: 135, name: '视频广告' },
|
|
|
+ { value: 1548, name: '搜索引擎' },
|
|
|
+ ],
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.5)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ // 传入数据
|
|
|
+ chart3.setOption(option)
|
|
|
+}
|
|
|
+function initChart4() {
|
|
|
+ chart4 = Echarts.init(chart4Ref.value)
|
|
|
+ // 配置数据
|
|
|
+ const option = {
|
|
|
+ title: {
|
|
|
+ text: '基础雷达图',
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）'],
|
|
|
+ },
|
|
|
+ radar: {
|
|
|
+ // shape: 'circle',
|
|
|
+ indicator: [
|
|
|
+ { name: '销售（sales）', max: 6500 },
|
|
|
+ { name: '管理（Administration）', max: 16000 },
|
|
|
+ { name: '信息技术（Information Techology）', max: 30000 },
|
|
|
+ { name: '客服（Customer Support）', max: 38000 },
|
|
|
+ { name: '研发（Development）', max: 52000 },
|
|
|
+ { name: '市场（Marketing）', max: 25000 },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: '预算 vs 开销（Budget vs spending）',
|
|
|
+ type: 'radar',
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: [4200, 3000, 20000, 35000, 50000, 18000],
|
|
|
+ name: '预算分配（Allocated Budget）',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: [5000, 14000, 28000, 26000, 42000, 21000],
|
|
|
+ name: '实际开销（Actual Spending）',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }],
|
|
|
+ }
|
|
|
+ // 传入数据
|
|
|
+ chart4.setOption(option)
|
|
|
+}
|
|
|
+
|
|
|
+function open(url: string) {
|
|
|
+ window.open(url, '_blank')
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
@@ -56,9 +305,8 @@ const oneStepAdminInfo = ref({
|
|
|
<template #content>
|
|
|
<div>
|
|
|
<div style="margin-bottom: 5px;">
|
|
|
- 这是一款<b class="text-emphasis">开箱即用</b>的中后台框架，同时它也经历过数十个真实项目的技术沉淀，确保框架在开发中可落地、可使用、可维护
|
|
|
+ <span>打破数据孤岛, 盘活数据资产价值</span>
|
|
|
</div>
|
|
|
- <div>注：在作者就职过的公司，本框架已在电商、直播、OA、ERP等多个不同领域的中后台系统中应用并稳定运行</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<el-button-group>
|
|
|
@@ -96,81 +344,53 @@ const oneStepAdminInfo = ref({
|
|
|
</el-button-group>
|
|
|
</page-header>
|
|
|
|
|
|
- <el-row :gutter="20" style="margin: 0 10px;">
|
|
|
- <el-col :lg="8">
|
|
|
- <page-main style="margin: 0;">
|
|
|
- <div class="ecology vue">
|
|
|
- <div class="main">
|
|
|
- <h1>数据中心</h1>
|
|
|
- <h2>集中式管理数据资产</h2>
|
|
|
- </div>
|
|
|
- <el-divider border-style="dashed" />
|
|
|
- <ul>
|
|
|
- <li v-for="item in fantasticTemplateInfo.feature" :key="item">
|
|
|
- {{ item }}
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
+ <page-main>
|
|
|
+ <el-row :gutter="5">
|
|
|
+ <el-col :md="4">
|
|
|
+ <ColorfulCard header="数据模型" :num="123" />
|
|
|
+ </el-col>
|
|
|
+ <el-col :md="4">
|
|
|
+ <ColorfulCard header="业务模型" :num="12323" />
|
|
|
+ </el-col>
|
|
|
+ <el-col :md="4">
|
|
|
+ <ColorfulCard header="API数目" :num="123" />
|
|
|
+ </el-col>
|
|
|
+ <el-col :md="4">
|
|
|
+ <ColorfulCard header="业务应用" :num="123" />
|
|
|
+ </el-col>
|
|
|
+ <el-col :md="4">
|
|
|
+ <ColorfulCard header="客户量" :num="123" />
|
|
|
+ </el-col>
|
|
|
+ <el-col :md="4">
|
|
|
+ <ColorfulCard header="访问量" :num="123" />
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </page-main>
|
|
|
+
|
|
|
+ <el-row :gutter="20" style="margin: -10px 10px;">
|
|
|
+ <el-col :md="12">
|
|
|
+ <page-main title="柱状图" style="margin: 10px 0;">
|
|
|
+ <div ref="chart1Ref" style="width: 100%; height: 400px;" />
|
|
|
</page-main>
|
|
|
</el-col>
|
|
|
- <el-col :lg="8">
|
|
|
- <page-main style="margin: 0;">
|
|
|
- <div class="ecology fa">
|
|
|
- <div class="main">
|
|
|
- <h1>业务中心</h1>
|
|
|
- <h2>集中式管理业务中心数据</h2>
|
|
|
- </div>
|
|
|
- <el-divider border-style="dashed" />
|
|
|
- <el-carousel trigger="click" indicator-position="none" :interval="5000" height="250px">
|
|
|
- <el-carousel-item v-for="(item, index) in fantasticAdminInfo.data" :key="item">
|
|
|
- <el-image :src="item" fit="cover" style="cursor: pointer; width: 100%; height: 250px; margin: auto;" @click="fantasticAdminInfo.imageVisible = true; fantasticAdminInfo.index = index" />
|
|
|
- </el-carousel-item>
|
|
|
- </el-carousel>
|
|
|
- <el-image-viewer v-if="fantasticAdminInfo.imageVisible" :url-list="fantasticAdminInfo.data" :initial-index="fantasticAdminInfo.index" @close="fantasticAdminInfo.imageVisible = false" />
|
|
|
- </div>
|
|
|
+ <el-col :md="12">
|
|
|
+ <page-main title="折线图" style="margin: 10px 0;">
|
|
|
+ <div ref="chart2Ref" style="width: 100%; height: 400px;" />
|
|
|
</page-main>
|
|
|
</el-col>
|
|
|
-
|
|
|
- <el-col :lg="8">
|
|
|
- <page-main style="margin: 0;">
|
|
|
- <div class="ecology osa">
|
|
|
- <div class="main">
|
|
|
- <h1>应用中心</h1>
|
|
|
- <h2>集中心管理应用系统</h2>
|
|
|
- </div>
|
|
|
- <el-divider border-style="dashed" />
|
|
|
- <el-carousel trigger="click" indicator-position="none" :interval="5000" height="250px">
|
|
|
- <el-carousel-item v-for="(item, index) in oneStepAdminInfo.data" :key="item">
|
|
|
- <el-image :src="item" fit="cover" style="cursor: pointer; width: 100%; height: 250px; margin: auto;" @click="oneStepAdminInfo.imageVisible = true; oneStepAdminInfo.index = index" />
|
|
|
- </el-carousel-item>
|
|
|
- </el-carousel>
|
|
|
- <el-image-viewer v-if="oneStepAdminInfo.imageVisible" :url-list="oneStepAdminInfo.data" :initial-index="oneStepAdminInfo.index" @close="oneStepAdminInfo.imageVisible = false" />
|
|
|
- </div>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20" style="margin: 0 10px;">
|
|
|
+ <el-col :md="12">
|
|
|
+ <page-main title="饼图" style="margin: 10px 0;">
|
|
|
+ <div ref="chart3Ref" style="width: 100%; height: 400px;" />
|
|
|
+ </page-main>
|
|
|
+ </el-col>
|
|
|
+ <el-col :md="12">
|
|
|
+ <page-main title="雷达图" style="margin: 10px 0;">
|
|
|
+ <div ref="chart4Ref" style="width: 100%; height: 400px;" />
|
|
|
</page-main>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
- <page-main title="应用场景">
|
|
|
- <div class="question">
|
|
|
- <ol class="answer">
|
|
|
- <li><span>没有前端开发人员的小型公司。</span>据了解，有些小型公司没有前端开发人员，而这些公司在开发中后台系统的时候，直接要求后端开发人员来进行开发工作。所以借助 Vue 的易学习易上手特性，再加上本框架的加持，可以让后端开发人员能在短时间内转型成为全栈开发。</li>
|
|
|
- <li><span>前端开发人员不足的中小型公司。</span>根据招聘网站统计，几乎所有公司都缺前端，其中有很大一部分中小型公司标配只有1-2名前端开发人员，而这些公司在开发中后台系统的时候，如果能有一套现成的中后台框架系统，不仅能提高项目开发效率，同时还大大减轻前端开发人员工作压力。</li>
|
|
|
- <li><span>项目型公司。</span>特点为项目多，周期短，甲方对页面布局和主题风格有绝对话语权，而通过专业版提供的布局和主题风格，可应对绝大部分甲方需求，并且可自定义扩展主题风格的样式，实现高度定制化。</li>
|
|
|
- <li><span>产品型公司。</span>产品型公司最担心的就是产品开发中代码不可控的因素，本框架除了提供完善的开发文档和代码注释外，作者还提供一对一的技术支持，确保开发人员尽可能理解整套框架源码的方方面面，为产品保驾护航。</li>
|
|
|
- <li><span>个人开发者。</span>手里有一套可高度定制化的中后台框架，什么项目都不用担心啦~</li>
|
|
|
- </ol>
|
|
|
- </div>
|
|
|
- </page-main>
|
|
|
- <page-main title="优势">
|
|
|
- <div class="question">
|
|
|
- <ol class="answer">
|
|
|
- <li><span>作者拥有10年+的前后端开发经验。</span>部分框架的作者由于缺少后端开发经验，可能会在设计框架的时候，很少或者没有考虑后端的实现逻辑，导致框架在实际使用中，业务场景无法落地，开发人员得通过修改源码自行实现业务。</li>
|
|
|
- <li><span>经历过数十个真实项目的打磨。</span>没用在真实业务场景中使用过的框架都是纸飞机，哪怕它提供的演示功能特别华丽。而本框架在作者就职的公司，已经稳定应用在电商、直播、OA、CRM、ERP等多个不同领域的中后台系统中。</li>
|
|
|
- <li><span>丰富的组件库。</span>除了支持 ElementUI / Element Plus 自带的组件外，框架还扩充了部分业务组件，以及第三方插件。借助以往的项目经验，提供最佳实践方案，方便开发人员直接使用。</li>
|
|
|
- <li><span>持续更新的业务应用静态页面。</span>通过项目积累，沉淀出数十个业务应用的静态页面，做到开发人员拿来即可使用，极大提升开发效率的同时，还省去了产品和设计人员的工作。</li>
|
|
|
- <li><span>长期维护。</span>无论是免费的基础版，还是付费的专业版，均提供长期维护。区别在于基础版侧重于稳定性维护，主要在修复 bug ，不定期增加新特性；专业版侧重于新特性开发，在确保稳定的基础上，会长期深挖中后台系统框架，持续产出可落地的特性或开发规范。</li>
|
|
|
- </ol>
|
|
|
- </div>
|
|
|
- </page-main>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
houyaf