<template>
<a-grid-content>
<a-row :gutter="24">
<a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6" :style="{marginBottom: '24px'}">
<a-chart-card :loading="loading" contentHeight="46px" :total="yuan(158829)" :title="$t('app.analysis.total-sales')">
<a-tooltip placement="top" slot="action">
<span slot="title">
<span v-html="$t('app.analysis.introduce')"></span>
</span>
<a-icon type="info-circle-o" />
</a-tooltip>
<a-field slot="footer" :label="$t('app.analysis.day-sales')" :value="yuan(6093)" />
<a-trend flag="up" :style="{marginRight: '16px'}">
{{$t('app.analysis.week')}}
<span class="trendText">12%</span>
</a-trend>
<a-trend flag="down">
{{$t('app.analysis.day')}}
<span class="trendText">11%</span>
</a-trend>
</a-chart-card>
</a-col>
<a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6" :style="{marginBottom: '24px'}">
<a-chart-card :loading="loading" contentHeight="46px" :total="numeral(36784).format('0,0')" :title="$t('app.analysis.visits')">
<a-tooltip placement="top" slot="action">
<span slot="title">
<span v-html="$t('app.analysis.introduce')"></span>
</span>
<a-icon type="info-circle-o" />
</a-tooltip>
<a-field slot="footer" :label="$t('app.analysis.day-visits')" :value="numeral(6678).format('0,0')" />
<!-- <a-mini-area color="#975FE4" /> -->
<a-trend flag="up" :style="{marginRight: '16px'}">
{{$t('app.analysis.week')}}
<span class="trendText">6%</span>
</a-trend>
<a-trend flag="down">
{{$t('app.analysis.day')}}
<span class="trendText">2%</span>
</a-trend>
</a-chart-card>
</a-col>
<a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6" :style="{marginBottom: '24px'}">
<a-chart-card :loading="loading" contentHeight="46px" :total="numeral(6560).format('0,0')" :title="$t('app.analysis.payments')">
<a-tooltip placement="top" slot="action">
<span slot="title">
<span v-html="$t('app.analysis.introduce')"></span>
</span>
<a-icon type="info-circle-o" />
</a-tooltip>
<!-- <a-mini-bar /> -->
<a-mini-progress :percent="55" :strokeWidth="8" :target="80" color="#975FE4" />
<a-field slot="footer" :label="$t('app.analysis.conversion-rate')" value="30%" />
</a-chart-card>
</a-col>
<a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6" :style="{marginBottom: '24px'}">
<a-chart-card :loading="loading" contentHeight="46px" total="78%" :title="$t('app.analysis.operational-effect')">
<a-tooltip placement="top" slot="action">
<span slot="title">
<span v-html="$t('app.analysis.introduce')"></span>
</span>
<a-icon type="info-circle-o" />
</a-tooltip>
<a-mini-progress :percent="30" :strokeWidth="8" :target="80" color="#13C2C2" />
<div :style="{whiteSpace:'nowrap',overflow:'hidden'}" slot="footer">
<!-- <a-trend flag="up" :style="{marginRight: '16px'}">
{{$t('app.analysis.week')}}<span class="trendText">12%</span>
</a-trend> -->
<a-trend flag="up">
{{$t('app.analysis.day')}}<span class="trendText">28%</span>
</a-trend>
</div>
</a-chart-card>
</a-col>
</a-row>
<a-card :loading="loading" :bordered="false" :bodyStyle="{padding:'0px'}">
<div class="salesCard">
<a-tabs size="large" :tabBarStyle="{marginBottom: '24px',paddingLeft:'16px'}">
<div slot="tabBarExtraContent" class="salesExtraWrap">
<div class="salesExtra">
<a >
{{$t('app.analysis.all-day')}}
</a>
<a class="currentDate">
{{$t('app.analysis.all-week')}}
</a>
<a >
{{$t('app.analysis.all-month')}}
</a>
<a >
{{$t('app.analysis.all-year')}}
</a>
</div>
<a-range-picker style="width:256px;"/>
</div>
<a-tab-pane key="sales" :tab="$t('app.analysis.sales')">
<a-row>
<a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
<div class="salesBar">
<!-- <h4>活动实时交易情况</h4> -->
<a-row>
<a-col :md="6" :sm="12" :xs="24">
<a-number-info
subTitle="今日交易总额"
suffix="万元"
:total="numeral(12233).format('0,0')"
/>
</a-col>
<a-col :md="6" :sm="12" :xs="24">
<a-number-info subTitle="销售目标完成率" total="92%" />
</a-col>
<a-col :md="6" :sm="12" :xs="24">
<!-- <NumberInfo subTitle="活动剩余时间" total={<CountDown target={targetTime} />} /> -->
<a-number-info subTitle="活动剩余时间" total="01:04:53"/>
</a-col>
<a-col :md="6" :sm="12" :xs="24">
<a-number-info subTitle="每秒交易总额"
suffix="元"
:total="numeral(21234).format('0,0')"/>
</a-col>
</a-row>
<div class="mapChart">
<a-tooltip title="等待后期实现">
<img
src="https://gw.alipayobjects.com/zos/rmsportal/HBWnDEUXCnGnGrRfrpKa.png"
alt="map"
/>
</a-tooltip>
</div>
</div>
</a-col>
<a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
<div class="salesRank">
<h4 class="rankingTitle">
{{$t('app.analysis.sales-ranking')}}
</h4>
<ul class="rankingList">
<li v-for="(item,i) in 10" :key="i">
<span class="rankingItemNumber " :class="{'active':i<3}">
{{i + 1}}
</span>
<span class="rankingItemTitle">
中国 🇨🇳 加油 ⛽️ ⛽ ️⛽️
</span>
<span class="rankingItemValue">
0,0
</span>
</li>
</ul>
</div>
</a-col>
</a-row>
</a-tab-pane>
<a-tab-pane key="visits" :tab="$t('app.analysis.visits')">
</a-tab-pane>
</a-tabs>
</div>
</a-card>
<!-- <a-row :gutter="24">8</a-row> -->
</a-grid-content>
</template>
<script>
import {
Card,
Row,
Col,
Tooltip,
Icon,
Tabs,
DatePicker
} from "ant-design-vue";
import GridContent from "@/components/PageHeaderWrapper/GridContent";
import Trend from "@/components/Trend";
import NumberInfo from "@/components/NumberInfo";
import {
ChartCard,
Field,
yuan,
MiniProgress
// MiniBar,
// MiniArea
} from "@/components/Charts";
import numeral from "numeral";
// import moment from 'moment';
// import 'moment/locale/zh-cn';
// moment.locale('zh-cn');
export default {
data: () => ({
loading: false
}),
components: {
AGridContent: GridContent,
ACard: Card,
ARow: Row,
ACol: Col,
AChartCard: ChartCard,
AField: Field,
ATooltip: Tooltip,
AIcon: Icon,
ATrend: Trend,
AMiniProgress: MiniProgress,
// AMiniBar: MiniBar,
// AMiniArea: MiniArea,
ATabs: Tabs,
ATabPane: Tabs.TabPane,
ARangePicker: DatePicker.RangePicker,
ANumberInfo: NumberInfo
},
methods: {
yuan,
numeral
}
};
</script>
<style lang="less">
@import url("./Analysis.less");
</style>