|
|
@@ -1,5 +1,409 @@
|
|
|
<template>
|
|
|
- <div ref="dashboardRef" class="dashboard-container column-page-wrap">
|
|
|
- <div style="margin: 100px">待完善 ... </div>
|
|
|
- </div>
|
|
|
+ <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">4月12日更新： 周年庆特惠，新老用户限时折扣： 购买即送全新数据大屏模板、 门户模板， 点我购买！</div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card class="box-card">
|
|
|
+ <template #header>
|
|
|
+ <div class="common_title">
|
|
|
+ <span>快捷方式</span>
|
|
|
+ </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>
|
|
|
+ </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">
|
|
|
+ <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--type3">
|
|
|
+ <template #header>
|
|
|
+ <div class="common_title">
|
|
|
+ <span>授权数</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <LeChart
|
|
|
+ style="background-color: var(--el-color-error-light-9)"
|
|
|
+ :loading="chartLoading2"
|
|
|
+ is-init-option
|
|
|
+ :option="chartOption2"
|
|
|
+ :height="height"
|
|
|
+ />
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-scrollbar>
|
|
|
</template>
|
|
|
+
|
|
|
+<script setup name="dashboard" lang="ts">
|
|
|
+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: '260px',
|
|
|
+ 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 = [
|
|
|
+ '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'
|
|
|
+]
|
|
|
+</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;
|
|
|
+}
|
|
|
+.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;
|
|
|
+ &:hover {
|
|
|
+ cursor: pointer;
|
|
|
+ color: var(--el-color-primary);
|
|
|
+ }
|
|
|
+ .icon {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 50px;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
lanceJiang
