From 1ef38f7b420900816f27bdea509017cab11a96d2 Mon Sep 17 00:00:00 2001
From: qushaowei <qushaowei@163.com>
Date: 星期日, 29 十月 2023 23:34:48 +0800
Subject: [PATCH] 主页面
---
src/views/dashboard/IndexChart.vue | 578 ++++++++++++++++++++++++++++++++++++---------------------
1 files changed, 360 insertions(+), 218 deletions(-)
diff --git a/src/views/dashboard/IndexChart.vue b/src/views/dashboard/IndexChart.vue
index 60406f6..eccd692 100644
--- a/src/views/dashboard/IndexChart.vue
+++ b/src/views/dashboard/IndexChart.vue
@@ -1,134 +1,276 @@
<template>
<div class="page-header-index-wide">
- <!--<a-row :gutter="24">-->
- <!--<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">-->
- <!--<chart-card :loading="loading" title="鎬婚攢鍞" total="锟�126,560">-->
- <!--<a-tooltip title="鎸囨爣璇存槑" slot="action">-->
- <!--<a-icon type="info-circle-o" />-->
- <!--</a-tooltip>-->
- <!--<div>-->
- <!--<trend flag="up" style="margin-right: 16px;">-->
- <!--<span slot="term">鍛ㄥ悓姣�</span>-->
- <!--12%-->
- <!--</trend>-->
- <!--<trend flag="down">-->
- <!--<span slot="term">鏃ュ悓姣�</span>-->
- <!--11%-->
- <!--</trend>-->
- <!--</div>-->
- <!--<template slot="footer">鏃ュ潎閿�鍞<span>锟� 234.56</span></template>-->
- <!--</chart-card>-->
- <!--</a-col>-->
- <!--<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">-->
- <!--<chart-card :loading="loading" title="璁㈠崟閲�" :total="8846 | NumberFormat">-->
- <!--<a-tooltip title="鎸囨爣璇存槑" slot="action">-->
- <!--<a-icon type="info-circle-o" />-->
- <!--</a-tooltip>-->
- <!--<div>-->
- <!--<mini-area />-->
- <!--</div>-->
- <!--<template slot="footer">鏃ヨ鍗曢噺<span> {{ '1234' | NumberFormat }}</span></template>-->
- <!--</chart-card>-->
- <!--</a-col>-->
- <!--<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">-->
- <!--<chart-card :loading="loading" title="鏀粯绗旀暟" :total="6560 | NumberFormat">-->
- <!--<a-tooltip title="鎸囨爣璇存槑" slot="action">-->
- <!--<a-icon type="info-circle-o" />-->
- <!--</a-tooltip>-->
- <!--<div>-->
- <!--<mini-bar :height="40" />-->
- <!--</div>-->
- <!--<template slot="footer">杞寲鐜� <span>60%</span></template>-->
- <!--</chart-card>-->
- <!--</a-col>-->
- <!--<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">-->
- <!--<chart-card :loading="loading" title="杩愯惀娲诲姩鏁堟灉" total="78%">-->
- <!--<a-tooltip title="鎸囨爣璇存槑" slot="action">-->
- <!--<a-icon type="info-circle-o" />-->
- <!--</a-tooltip>-->
- <!--<div>-->
- <!--<mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" :height="8" />-->
- <!--</div>-->
- <!--<template slot="footer">-->
- <!--<trend flag="down" style="margin-right: 16px;">-->
- <!--<span slot="term">鍚屽懆姣�</span>-->
- <!--12%-->
- <!--</trend>-->
- <!--<trend flag="up">-->
- <!--<span slot="term">鏃ョ幆姣�</span>-->
- <!--80%-->
- <!--</trend>-->
- <!--</template>-->
- <!--</chart-card>-->
- <!--</a-col>-->
- <!--</a-row>-->
+ <a-row :gutter="24">
+ <a-col
+ :sm="24"
+ :md="12"
+ :xl="6"
+ :style="{ marginBottom: '24px' }"
+ >
+ <chart-card
+ :loading="loading"
+ title="鎬婚攢鍞"
+ total="锟�126,560"
+ >
+ <a-tooltip
+ title="鎸囨爣璇存槑"
+ slot="action"
+ >
+ <a-icon type="info-circle-o" />
+ </a-tooltip>
+ <div>
+ <trend
+ flag="up"
+ style="margin-right: 16px;"
+ >
+ <span slot="term">鍛ㄥ悓姣�</span>
+ 12%
+ </trend>
+ <trend flag="down">
+ <span slot="term">鏃ュ悓姣�</span>
+ 11%
+ </trend>
+ </div>
+ <template slot="footer">鏃ュ潎閿�鍞<span>锟� 234.56</span></template>
+ </chart-card>
+ </a-col>
+ <a-col
+ :sm="24"
+ :md="12"
+ :xl="6"
+ :style="{ marginBottom: '24px' }"
+ >
+ <chart-card
+ :loading="loading"
+ title="璁㈠崟閲�"
+ :total="8846 | NumberFormat"
+ >
+ <a-tooltip
+ title="鎸囨爣璇存槑"
+ slot="action"
+ >
+ <a-icon type="info-circle-o" />
+ </a-tooltip>
+ <div>
+ <mini-area />
+ </div>
+ <template slot="footer">鏃ヨ鍗曢噺<span> {{ '1234' | NumberFormat }}</span></template>
+ </chart-card>
+ </a-col>
+ <a-col
+ :sm="24"
+ :md="12"
+ :xl="6"
+ :style="{ marginBottom: '24px' }"
+ >
+ <chart-card
+ :loading="loading"
+ title="鏀粯绗旀暟"
+ :total="6560 | NumberFormat"
+ >
+ <a-tooltip
+ title="鎸囨爣璇存槑"
+ slot="action"
+ >
+ <a-icon type="info-circle-o" />
+ </a-tooltip>
+ <div>
+ <mini-bar :height="40" />
+ </div>
+ <template slot="footer">杞寲鐜� <span>60%</span></template>
+ </chart-card>
+ </a-col>
+ <a-col
+ :sm="24"
+ :md="12"
+ :xl="6"
+ :style="{ marginBottom: '24px' }"
+ >
+ <chart-card
+ :loading="loading"
+ title="杩愯惀娲诲姩鏁堟灉"
+ total="78%"
+ >
+ <a-tooltip
+ title="鎸囨爣璇存槑"
+ slot="action"
+ >
+ <a-icon type="info-circle-o" />
+ </a-tooltip>
+ <div>
+ <mini-progress
+ color="rgb(19, 194, 194)"
+ :target="80"
+ :percentage="78"
+ :height="8"
+ />
+ </div>
+ <template slot="footer">
+ <trend
+ flag="down"
+ style="margin-right: 16px;"
+ >
+ <span slot="term">鍚屽懆姣�</span>
+ 12%
+ </trend>
+ <trend flag="up">
+ <span slot="term">鏃ョ幆姣�</span>
+ 80%
+ </trend>
+ </template>
+ </chart-card>
+ </a-col>
+ </a-row>
- <!--<a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">-->
- <!--<div class="salesCard">-->
- <!--<a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">-->
- <!--<div class="extra-wrapper" slot="tabBarExtraContent">-->
- <!--<div class="extra-item">-->
- <!--<a>浠婃棩</a>-->
- <!--<a>鏈懆</a>-->
- <!--<a>鏈湀</a>-->
- <!--<a>鏈勾</a>-->
- <!--</div>-->
- <!--<a-range-picker :style="{width: '256px'}" />-->
- <!--</div>-->
- <!--<a-tab-pane loading="true" tab="閿�鍞" key="1">-->
- <!--<a-row>-->
- <!--<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">-->
- <!--<bar title="閿�鍞鎺掕" :dataSource="barData"/>-->
- <!--</a-col>-->
- <!--<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">-->
- <!--<rank-list title="闂ㄥ簵閿�鍞帓琛屾" :list="rankList"/>-->
- <!--</a-col>-->
- <!--</a-row>-->
- <!--</a-tab-pane>-->
- <!--<a-tab-pane tab="閿�鍞秼鍔�" key="2">-->
- <!--<a-row>-->
- <!--<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">-->
- <!--<bar title="閿�鍞瓒嬪娍" :dataSource="barData"/>-->
- <!--</a-col>-->
- <!--<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">-->
- <!--<rank-list title="闂ㄥ簵閿�鍞帓琛屾" :list="rankList"/>-->
- <!--</a-col>-->
- <!--</a-row>-->
- <!--</a-tab-pane>-->
- <!--</a-tabs>-->
- <!--</div>-->
- <!--</a-card>-->
+ <a-card
+ :loading="loading"
+ :bordered="false"
+ :body-style="{padding: '0'}"
+ >
+ <div class="salesCard">
+ <a-tabs
+ default-active-key="1"
+ size="large"
+ :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}"
+ >
+ <div
+ class="extra-wrapper"
+ slot="tabBarExtraContent"
+ >
+ <div class="extra-item">
+ <a>浠婃棩</a>
+ <a>鏈懆</a>
+ <a>鏈湀</a>
+ <a>鏈勾</a>
+ </div>
+ <a-range-picker :style="{width: '256px'}" />
+ </div>
+ <a-tab-pane
+ loading="true"
+ tab="閿�鍞"
+ key="1"
+ >
+ <a-row>
+ <a-col
+ :xl="16"
+ :lg="12"
+ :md="12"
+ :sm="24"
+ :xs="24"
+ >
+ <bar
+ title="閿�鍞鎺掕"
+ :dataSource="barData"
+ />
+ </a-col>
+ <a-col
+ :xl="8"
+ :lg="12"
+ :md="12"
+ :sm="24"
+ :xs="24"
+ >
+ <rank-list
+ title="闂ㄥ簵閿�鍞帓琛屾"
+ :list="rankList"
+ />
+ </a-col>
+ </a-row>
+ </a-tab-pane>
+ <a-tab-pane
+ tab="閿�鍞秼鍔�"
+ key="2"
+ >
+ <a-row>
+ <a-col
+ :xl="16"
+ :lg="12"
+ :md="12"
+ :sm="24"
+ :xs="24"
+ >
+ <bar
+ title="閿�鍞瓒嬪娍"
+ :dataSource="barData"
+ />
+ </a-col>
+ <a-col
+ :xl="8"
+ :lg="12"
+ :md="12"
+ :sm="24"
+ :xs="24"
+ >
+ <rank-list
+ title="闂ㄥ簵閿�鍞帓琛屾"
+ :list="rankList"
+ />
+ </a-col>
+ </a-row>
+ </a-tab-pane>
+ </a-tabs>
+ </div>
+ </a-card>
<a-row>
<a-col :span="24">
- <a-card :loading="loading" :bordered="false" title="鏈�杩戜竴鍛ㄨ闂噺缁熻" :style="{ marginTop: '24px' }">
+ <a-card
+ :loading="loading"
+ :bordered="false"
+ title="鏈�杩戜竴鍛ㄨ闂噺缁熻"
+ :style="{ marginTop: '24px' }"
+ >
<a-row>
<a-col :span="6">
- <head-info title="浠婃棩IP" :content="loginfo.todayIp"></head-info>
+ <head-info
+ title="浠婃棩IP"
+ :content="loginfo.todayIp"
+ ></head-info>
</a-col>
<a-col :span="2">
<a-spin class='circle-cust'>
- <a-icon slot="indicator" type="environment" style="font-size: 24px" />
+ <a-icon
+ slot="indicator"
+ type="environment"
+ style="font-size: 24px"
+ />
</a-spin>
</a-col>
<a-col :span="6">
- <head-info title="浠婃棩璁块棶" :content="loginfo.todayVisitCount"></head-info>
+ <head-info
+ title="浠婃棩璁块棶"
+ :content="loginfo.todayVisitCount"
+ ></head-info>
</a-col>
<a-col :span="2">
<a-spin class='circle-cust'>
- <a-icon slot="indicator" type="team" style="font-size: 24px" />
+ <a-icon
+ slot="indicator"
+ type="team"
+ style="font-size: 24px"
+ />
</a-spin>
</a-col>
<a-col :span="6">
- <head-info title="鎬昏闂噺" :content="loginfo.totalVisitCount"></head-info>
+ <head-info
+ title="鎬昏闂噺"
+ :content="loginfo.totalVisitCount"
+ ></head-info>
</a-col>
<a-col :span="2">
<a-spin class='circle-cust'>
- <a-icon slot="indicator" type="rise" style="font-size: 24px" />
+ <a-icon
+ slot="indicator"
+ type="rise"
+ style="font-size: 24px"
+ />
</a-spin>
</a-col>
</a-row>
- <line-chart-multid :fields="visitFields" :dataSource="visitInfo"></line-chart-multid>
+ <line-chart-multid
+ :fields="visitFields"
+ :dataSource="visitInfo"
+ ></line-chart-multid>
</a-card>
</a-col>
</a-row>
@@ -136,133 +278,133 @@
</template>
<script>
- import ChartCard from '@/components/ChartCard'
- import ACol from "ant-design-vue/es/grid/Col"
- import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
- import MiniArea from '@/components/chart/MiniArea'
- import MiniBar from '@/components/chart/MiniBar'
- import MiniProgress from '@/components/chart/MiniProgress'
- import RankList from '@/components/chart/RankList'
- import Bar from '@/components/chart/Bar'
- import LineChartMultid from '@/components/chart/LineChartMultid'
- import HeadInfo from '@/components/tools/HeadInfo.vue'
+import ChartCard from '@/components/ChartCard'
+import ACol from "ant-design-vue/es/grid/Col"
+import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
+import MiniArea from '@/components/chart/MiniArea'
+import MiniBar from '@/components/chart/MiniBar'
+import MiniProgress from '@/components/chart/MiniProgress'
+import RankList from '@/components/chart/RankList'
+import Bar from '@/components/chart/Bar'
+import LineChartMultid from '@/components/chart/LineChartMultid'
+import HeadInfo from '@/components/tools/HeadInfo.vue'
- import Trend from '@/components/Trend'
- import { getLoginfo,getVisitInfo } from '@/api/api'
+import Trend from '@/components/Trend'
+import { getLoginfo, getVisitInfo } from '@/api/api'
- const rankList = []
- for (let i = 0; i < 7; i++) {
- rankList.push({
- name: '鐧介弓宀� ' + (i+1) + ' 鍙峰簵',
- total: 1234.56 - i * 100
- })
- }
- const barData = []
- for (let i = 0; i < 12; i += 1) {
- barData.push({
- x: `${i + 1}鏈坄,
- y: Math.floor(Math.random() * 1000) + 200
- })
- }
- export default {
- name: "IndexChart",
- components: {
- ATooltip,
- ACol,
- ChartCard,
- MiniArea,
- MiniBar,
- MiniProgress,
- RankList,
- Bar,
- Trend,
- LineChartMultid,
- HeadInfo
- },
- data() {
- return {
- loading: true,
- center: null,
- rankList,
- barData,
- loginfo:{},
- visitFields:['ip','visit'],
- visitInfo:[],
- indicator: <a-icon type="loading" style="font-size: 24px" spin />
- }
- },
- created() {
- setTimeout(() => {
- this.loading = !this.loading
- }, 1000)
- this.initLogInfo();
- },
- methods: {
- initLogInfo () {
- getLoginfo(null).then((res)=>{
- if(res.success){
- Object.keys(res.result).forEach(key=>{
- res.result[key] =res.result[key]+""
- })
- this.loginfo = res.result;
- }
- })
- getVisitInfo().then(res=>{
- if(res.success){
- this.visitInfo = res.result;
- }
- })
- },
+const rankList = []
+for (let i = 0; i < 7; i++) {
+ rankList.push({
+ name: '鐧介弓宀� ' + (i + 1) + ' 鍙峰簵',
+ total: 1234.56 - i * 100
+ })
+}
+const barData = []
+for (let i = 0; i < 12; i += 1) {
+ barData.push({
+ x: `${i + 1}鏈坄,
+ y: Math.floor(Math.random() * 1000) + 200
+ })
+}
+export default {
+ name: "IndexChart",
+ components: {
+ ATooltip,
+ ACol,
+ ChartCard,
+ MiniArea,
+ MiniBar,
+ MiniProgress,
+ RankList,
+ Bar,
+ Trend,
+ LineChartMultid,
+ HeadInfo
+ },
+ data() {
+ return {
+ loading: true,
+ center: null,
+ rankList,
+ barData,
+ loginfo: {},
+ visitFields: ['ip', 'visit'],
+ visitInfo: [],
+ indicator: <a-icon type="loading" style="font-size: 24px" spin />
}
+ },
+ created() {
+ setTimeout(() => {
+ this.loading = !this.loading
+ }, 1000)
+ this.initLogInfo();
+ },
+ methods: {
+ initLogInfo() {
+ getLoginfo(null).then((res) => {
+ if (res.success) {
+ Object.keys(res.result).forEach(key => {
+ res.result[key] = res.result[key] + ""
+ })
+ this.loginfo = res.result;
+ }
+ })
+ getVisitInfo().then(res => {
+ if (res.success) {
+ this.visitInfo = res.result;
+ }
+ })
+ },
}
+}
</script>
<style lang="less" scoped>
- .circle-cust{
- position: relative;
- top: 28px;
- left: -100%;
- }
- .extra-wrapper {
- line-height: 55px;
- padding-right: 24px;
+.circle-cust {
+ position: relative;
+ top: 28px;
+ left: -100%;
+}
+.extra-wrapper {
+ line-height: 55px;
+ padding-right: 24px;
- .extra-item {
- display: inline-block;
- margin-right: 24px;
+ .extra-item {
+ display: inline-block;
+ margin-right: 24px;
- a {
- margin-left: 24px;
- }
+ a {
+ margin-left: 24px;
}
}
+}
- /* 棣栭〉璁块棶閲忕粺璁� */
- .head-info {
- position: relative;
- text-align: left;
- padding: 0 32px 0 0;
- min-width: 125px;
+/* 棣栭〉璁块棶閲忕粺璁� */
+.head-info {
+ position: relative;
+ text-align: left;
+ padding: 0 32px 0 0;
+ min-width: 125px;
- &.center {
- text-align: center;
- padding: 0 32px;
- }
+ &.center {
+ text-align: center;
+ padding: 0 32px;
+ }
- span {
- color: rgba(0, 0, 0, .45);
- display: inline-block;
- font-size: .95rem;
- line-height: 42px;
- margin-bottom: 4px;
- }
- p {
- line-height: 42px;
- margin: 0;
- a {
- font-weight: 600;
- font-size: 1rem;
- }
+ span {
+ color: rgba(0, 0, 0, 0.45);
+ display: inline-block;
+ font-size: 0.95rem;
+ line-height: 42px;
+ margin-bottom: 4px;
+ }
+ p {
+ line-height: 42px;
+ margin: 0;
+ a {
+ font-weight: 600;
+ font-size: 1rem;
}
}
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.3