234 lines
9.5 KiB
Java
234 lines
9.5 KiB
Java
<template>
|
||
<div class="page-header-index-wide">
|
||
<a-row :gutter="24">
|
||
<a-col :sm="24" :md="12" :xl="4" :style="{ paddingRight: '0px',marginBottom: '12px' }">
|
||
<chart-card :loading="loading" title="今日累计采购" data-step="1" data-title="今日累计采购" data-intro="统计今日采购单据的总金额">
|
||
<a-tooltip title="统计今日采购单据的总金额" slot="action">
|
||
<a-icon type="info-circle-o" />
|
||
</a-tooltip>
|
||
<head-info :content="statistics.todayBuy"></head-info>
|
||
</chart-card>
|
||
</a-col>
|
||
<a-col :sm="24" :md="12" :xl="4" :style="{ paddingRight: '0px',marginBottom: '12px' }">
|
||
<chart-card :loading="loading" title="今日累计销售" data-step="2" data-title="今日累计销售" data-intro="统计今日销售单据的总金额">
|
||
<a-tooltip title="统计今日销售单据的总金额" slot="action">
|
||
<a-icon type="info-circle-o" />
|
||
</a-tooltip>
|
||
<head-info :content="statistics.todaySale"></head-info>
|
||
</chart-card>
|
||
</a-col>
|
||
<a-col :sm="24" :md="12" :xl="4" :style="{ paddingRight: '0px',marginBottom: '12px' }">
|
||
<chart-card :loading="loading" title="今日累计零售" data-step="3" data-title="今日累计零售" data-intro="统计今日零售单据的总金额">
|
||
<a-tooltip title="统计今日零售单据的总金额" slot="action">
|
||
<a-icon type="info-circle-o" />
|
||
</a-tooltip>
|
||
<head-info :content="statistics.todayRetailSale"></head-info>
|
||
</chart-card>
|
||
</a-col>
|
||
<a-col :sm="24" :md="12" :xl="4" :style="{ paddingRight: '0px',marginBottom: '12px' }">
|
||
<chart-card :loading="loading" title="本月累计采购" data-step="4" data-title="本月累计采购" data-intro="统计本月采购单据的总金额">
|
||
<a-tooltip title="统计本月采购单据的总金额" slot="action">
|
||
<a-icon type="info-circle-o" />
|
||
</a-tooltip>
|
||
<head-info :content="statistics.monthBuy"></head-info>
|
||
</chart-card>
|
||
</a-col>
|
||
<a-col :sm="24" :md="12" :xl="4" :style="{ paddingRight: '0px',marginBottom: '12px' }">
|
||
<chart-card :loading="loading" title="本月累计销售" data-step="5" data-title="本月累计销售" data-intro="统计本月销售单据的总金额">
|
||
<a-tooltip title="统计本月销售单据的总金额" slot="action">
|
||
<a-icon type="info-circle-o" />
|
||
</a-tooltip>
|
||
<head-info :content="statistics.monthSale"></head-info>
|
||
</chart-card>
|
||
</a-col>
|
||
<a-col :sm="24" :md="12" :xl="4" :style="{ paddingRight: '0px',marginBottom: '12px' }">
|
||
<chart-card :loading="loading" title="本月累计零售" data-step="6" data-title="本月累计零售" data-intro="统计本月零售单据的总金额">
|
||
<a-tooltip placement="left" title="统计本月零售单据的总金额" slot="action">
|
||
<a-icon type="info-circle-o" />
|
||
</a-tooltip>
|
||
<head-info :content="statistics.monthRetailSale"></head-info>
|
||
</chart-card>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row :gutter="24">
|
||
<a-col :sm="24" :md="12" :xl="8" :style="{ paddingRight: '0px',marginBottom: '12px' }">
|
||
<a-card :loading="loading" :bordered="false" :body-style="{paddingRight: '5'}" data-step="7" data-title="采购统计"
|
||
data-intro="统计往前6个月每月采购的总金额">
|
||
<bar title="采购统计" :height="barHeight" :yaxisText="yaxisText" :dataSource="buyPriceData"/>
|
||
</a-card>
|
||
</a-col>
|
||
<a-col :sm="24" :md="12" :xl="8" :style="{ paddingRight: '0px',marginBottom: '12px' }">
|
||
<a-card :loading="loading" :bordered="false" :body-style="{paddingRight: '5'}" data-step="8" data-title="销售统计"
|
||
data-intro="统计往前6个月每月销售的总金额">
|
||
<bar title="销售统计" :height="barHeight" :yaxisText="yaxisText" :dataSource="salePriceData"/>
|
||
</a-card>
|
||
</a-col>
|
||
<a-col :sm="24" :md="12" :xl="8" :style="{ paddingRight: '0px',marginBottom: '12px' }">
|
||
<a-card :loading="loading" :bordered="false" :body-style="{paddingRight: '5'}" data-step="9" data-title="零售统计"
|
||
data-intro="统计往前6个月每月零售的总金额">
|
||
<bar title="零售统计" :height="barHeight" :yaxisText="yaxisText" :dataSource="retailPriceData"/>
|
||
</a-card>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row :gutter="24">
|
||
<a-col :sm="24" :md="24" :xl="24" :style="{ paddingRight: '0px',marginBottom: '6px' }">
|
||
<a-card :bordered="false" :body-style="{padding: '5'}" data-step="10" data-title="服务和版权"
|
||
data-intro="展示服务到期时间（快到期时会出现续费链接，请注意及时续费）、
|
||
用户数量（是指最多可以录入的用户数量）、版权信息">
|
||
<div class="hidden-xs" style="float:right;">© 2015-2030 {{systemTitle}} V3.0</div>
|
||
<a-tag v-if="tenant.type==0" color="blue">试用到期：{{tenant.expireTime}}</a-tag>
|
||
<a-tag v-if="tenant.type==0" color="blue">试用用户：{{tenant.userCurrentNum}}/{{tenant.userNumLimit}}</a-tag>
|
||
<a-tag v-if="tenant.type==1" color="blue">服务到期：{{tenant.expireTime}}</a-tag>
|
||
<a-tag v-if="tenant.type==1" color="blue">授权用户：{{tenant.userCurrentNum}}/{{tenant.userNumLimit}}</a-tag>
|
||
<a v-if="hasExpire" style="color: red;" :href="payFeeUrl" target="_blank">立即续费</a>
|
||
</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 Bar from '@/components/chart/Bar'
|
||
import LineChartMultid from '@/components/chart/LineChartMultid'
|
||
import HeadInfo from '@/components/tools/HeadInfo.vue'
|
||
import Trend from '@/components/Trend'
|
||
import { getBuyAndSaleStatistics, buyOrSalePrice, getPlatformConfigByKey } from '@/api/api'
|
||
import { handleIntroJs } from "@/utils/util"
|
||
import { getAction } from '../../api/manage'
|
||
|
||
export default {
|
||
name: "IndexChart",
|
||
components: {
|
||
ATooltip,
|
||
ACol,
|
||
ChartCard,
|
||
MiniArea,
|
||
MiniBar,
|
||
MiniProgress,
|
||
Bar,
|
||
Trend,
|
||
LineChartMultid,
|
||
HeadInfo
|
||
},
|
||
data() {
|
||
return {
|
||
systemTitle: window.SYS_TITLE,
|
||
systemUrl: window.SYS_URL,
|
||
loading: true,
|
||
center: null,
|
||
statistics: {},
|
||
barHeight: document.documentElement.clientHeight-465,
|
||
yaxisText: '金额',
|
||
buyPriceData: [],
|
||
salePriceData: [],
|
||
retailPriceData: [],
|
||
visitFields:['ip','visit'],
|
||
visitInfo:[],
|
||
hasExpire: false,
|
||
payFeeUrl: '',
|
||
tenant: {
|
||
type: '',
|
||
expireTime: '',
|
||
userCurrentNum: '',
|
||
userNumLimit: ''
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
setTimeout(() => {
|
||
this.loading = !this.loading
|
||
}, 1000)
|
||
this.initInfo()
|
||
this.initWithTenant()
|
||
},
|
||
mounted() {
|
||
handleIntroJs('indexChart', 1)
|
||
},
|
||
methods: {
|
||
initInfo () {
|
||
getBuyAndSaleStatistics(null).then((res)=>{
|
||
if(res.code === 200){
|
||
this.statistics = res.data;
|
||
}
|
||
})
|
||
buyOrSalePrice(null).then(res=>{
|
||
if(res.code === 200){
|
||
this.buyPriceData = res.data.buyPriceList;
|
||
this.salePriceData = res.data.salePriceList;
|
||
this.retailPriceData = res.data.retailPriceList;
|
||
}
|
||
})
|
||
getPlatformConfigByKey({"platformKey": "pay_fee_url"}).then((res)=> {
|
||
if (res && res.code === 200) {
|
||
this.payFeeUrl = res.data.platformValue
|
||
}
|
||
})
|
||
},
|
||
initWithTenant() {
|
||
getAction("/user/infoWithTenant",{}).then(res=>{
|
||
if(res && res.code === 200) {
|
||
this.tenant = res.data
|
||
let currentTime = new Date(); //新建一个日期对象，默认现在的时间
|
||
let expireTime = new Date(res.data.expireTime); //设置过去的一个时间点，"yyyy-MM-dd HH:mm:ss"格式化日期
|
||
let difftime = expireTime - currentTime; //计算时间差
|
||
//如果距离到期还剩5天就进行提示续费
|
||
if(difftime<86400000*5) {
|
||
this.hasExpire = true
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.circle-cust{
|
||
position: relative;
|
||
top: 28px;
|
||
left: -100%;
|
||
}
|
||
.extra-wrapper {
|
||
line-height: 55px;
|
||
padding-right: 24px;
|
||
|
||
.extra-item {
|
||
display: inline-block;
|
||
margin-right: 24px;
|
||
|
||
a {
|
||
margin-left: 24px;
|
||
}
|
||
}
|
||
}
|
||
/* 首页访问量统计 */
|
||
.head-info {
|
||
position: relative;
|
||
text-align: left;
|
||
padding: 0 32px 0 0;
|
||
min-width: 125px;
|
||
&.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;
|
||
}
|
||
}
|
||
}
|
||
</style> |