123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214 |
- <style></style>
- <template>
- <div class="Workbench">
- <a-row class="image-list-heading vm-panel">
- <a-row>
- <div class="panel-heading">{{ title }}</div>
- </a-row>
- </a-row>
- <a-row :gutter="24" style="margin-top:15px">
- <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
- <chart-card :loading="loading" title="未审核数量" :total="dataCount.waitAudit + ''">
- <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">
- <a href="javascript:;" @click="toList('0')">查看详情</a>
- </template>
- </chart-card>
- </a-col>
- <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
- <chart-card :loading="loading" title="审核通过" :total="dataCount.passAudit + ''">
- <a-tooltip title="指标说明" slot="action">
- <a-icon type="info-circle-o" />
- </a-tooltip>
- <!-- <div>
- <mini-area />
- </div> -->
- <template slot="footer">
- <a href="javascript:;" @click="toList('1')">查看详情</a>
- </template>
- </chart-card>
- </a-col>
- <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
- <chart-card :loading="loading" title="待修改" :total="dataCount.refuseAudit + ''">
- <a-tooltip title="指标说明" slot="action">
- <a-icon type="info-circle-o" />
- </a-tooltip>
- <!-- <div>
- <mini-bar :height="40" />
- </div> -->
- <template slot="footer">
- <a href="javascript:;" @click="toList('2')">查看详情</a>
- </template>
- </chart-card>
- </a-col>
- <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
- <chart-card
- :loading="loading"
- title="运营审核通过率"
- :total="((dataCount.passAudit / (dataCount.refuseAudit + dataCount.passAudit)) * 100).toFixed(2) + '%'"
- >
- <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">
- <span> 通过率涨幅</span>
- </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-row>
- <a-col :span="24">
- <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>
- </a-col>
- <a-col :span="2">
- <a-spin class="circle-cust">
- <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>
- </a-col>
- <a-col :span="2">
- <a-spin class="circle-cust">
- <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>
- </a-col>
- <a-col :span="2">
- <a-spin class="circle-cust">
- <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>
- </a-card>
- </a-col>
- </a-row> -->
- </div>
- </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 Trend from '@/components/Trend'
- import { getAction } from '@/api/manage'
- import { mapGetters } from 'vuex'
- 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: 'Workbench',
- components: {
- ATooltip,
- ACol,
- ChartCard,
- MiniArea,
- MiniBar,
- MiniProgress,
- RankList,
- Bar,
- Trend,
- LineChartMultid,
- HeadInfo
- },
- data: function() {
- return {
- title: '工作台',
- loginfo: {},
- barData,
- visitInfo: [],
- visitFields: ['ip', 'visit'],
- loading: false,
- rankList: [],
- dataCount: {},
- a: ''
- }
- },
- methods: {
- ...mapGetters(['nickname', 'avatar', 'userInfo']),
- toList(key) {
- localStorage.setItem('key', key)
- this.$router.replace({ path: '/modules/material/materialList' })
- }
- },
- created() {
- getAction('/ctop/materialInfo/report', { userId: this.userInfo().id }).then(res => {
- this.dataCount = res
- })
- // /ctop/materialInfo/report
- }
- }
- </script>
|