Skip to content

L
linshenxs-shop
Commit 1267995f by cpa
Options

Merge remote-tracking branch 'origin/master'

parents edd09763 4f2a01c4
Showing with 739 additions and 168 deletions
src/api/home.js 0 → 100644
import request from '@/router/axios'
export function getIndexData(params) {
return request({
url: '/admin/merchant/indexData/getIndexData',
method: 'get',
params
})
}
export function getIndexTrendData(params) {
return request({
url: '/admin/merchant/indexData/getIndexTrendData',
method: 'get',
params
})
}
src/components/echarts/index.vue 0 → 100644
<template>
<div>
<div :id="echarts" :style="styles"></div>
</div>
</template>
<script>
import echarts from 'echarts';
export default {
name: 'index',
props: {
// styles: {
// type: Object,
// default: null
// },
seriesData: {
type: Array,
default: () => []
},
xAxis: {
type: Array,
default: () => []
},
echartsTitle: {
type: String,
default: ''
},
yAxisData: {
type: Array,
default: () => []
},
legendData: {
type: Array,
default: () => []
}
},
data() {
return {
styles: 'height:300px',
infoLists: this.infoList,
seriesArray: this.seriesData
}
},
watch: {
seriesData: {
handler(newVal, oldVal) {
this.seriesArray = newVal;
this.handleSetVisitChart();
},
deep: true // 对象内部属性的监听，关键。
}
},
computed: {
echarts() {
return 'echarts' + Math.ceil(Math.random() * 100)
}
},
mounted: function () {
const vm = this
vm.$nextTick(() => {
vm.handleSetVisitChart();
window.addEventListener('resize', this.wsFunc)
})
},
methods: {
wsFunc() {
this.myChart.resize()
},
handleSetVisitChart() {
this.myChart = echarts.init(document.getElementById(this.echarts))
let option = null
if (this.echartsTitle === 'circle') {
option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
data: this.legendData || []
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '70%',
center: ['50%', '60%'],
data: this.seriesArray || [],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
console.log(option)
} else {
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
toolbox: {},
legend: {
data: this.legendData || []
},
color: ['#1495EB', '#00CC66', '#F9D249', '#ff9900', '#9860DF'],
grid: {
left: 16,
right: 25,
bottom: 10,
top: 40,
containLabel: true
},
xAxis: [
{
type: 'category',
// axisLine: {
// lineStyle: {
// color: '#D7DDE4'
// }
// },
// axisTick: {
// alignWithLabel: true,
// lineStyle: {
// color: '#D7DDE4'
// }
// },
// splitLine: {
// show: false,
// lineStyle: {
// color: '#F5F7F9'
// }
// },
axisLabel: {
interval: 0,
rotate: 40,
textStyle: {
color: '#7F8B9C'
}
},
data: this.xAxis
}
],
yAxis: this.yAxisData.length ? this.yAxisData : {
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#7F8B9C'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#F5F7F9'
}
},
type: 'value'
},
series: this.seriesArray
};
}
// 基于准备好的dom，初始化echarts实例
this.myChart.setOption(option, true)
},
handleResize() {
this.myChart.resize()
}
},
beforeDestroy() {
window.removeEventListener('resize', this.wsFunc)
if (!this.myChart) {
return
}
this.myChart.dispose()
this.myChart = null
}
}
</script>
<style scoped>
</style>
src/main.js
......@@ -21,6 +21,7 @@ import './styles/common.scss'
import './styles/zm_css.css'
import AvueFormDesign from '@sscfaith/avue-form-design'
import basicContainer from './components/basic-container/main'
import util from '@/util/utils'
// 挂载常用全局方法，import 引入
Vue.prototype.validatenull = validatenull
......
src/page/data/chart.vue 0 → 100644
<template>
<div class="layout_h" style="margin-top: 16px;">
<el-card class="box-card weight_0_full">
<div class="part_header layout_h_v_c">
<div class="v_line"></div>
<div class="header_title">运营趋势图</div>
<div class="layout_h_r weight_0_full">
<el-radio-group v-model="dateType" @change="onRangeChange">
<el-radio-button label="7天"></el-radio-button>
<el-radio-button label="30天"></el-radio-button>
<el-radio-button label="一季度"></el-radio-button>
<el-radio-button label="一年"></el-radio-button>
</el-radio-group>
</div>
</div>
<el-radio-group v-model="chartType" size="small" style="margin-top: 16px;margin-bottom: 16px;"
@change="onOrderChange">
<el-radio-button label="商品数"></el-radio-button>
<el-radio-button label="订单数"></el-radio-button>
<el-radio-button label="流水"></el-radio-button>
<el-radio-button label="历史体现"></el-radio-button>
</el-radio-group>
<echarts-from ref="juwuChart" :echartsTitle="line" :xAxis="xAxis" :yAxis="yAxis" :seriesData="series">
</echarts-from>
</el-card>
</div>
</template>
<script>
import echartsFrom from '@/components/echarts/index';
import {
getIndexTrendData
} from '@/api/home.js'
export default {
name: 'user-chart',
components: {
echartsFrom
},
data() {
return {
line: 'line',
circle: 'circle',
chartType: '商品数',
dateType: '近7天',
xAxis: [],
yAxis:[{ show:false}],
infoList: {},
series: [],
}
},
computed: {
chartTypeParam() {
let tab = this.chartType
let type = "1"
if (tab == '订单数') {
type = "2"
} else if (tab == '流水') {
type = "3"
} else if (tab == '历史体现A币') {
type = "4"
}
return type
},
dateTypeParam() {
let tab = this.dateType
let type = "1"
if (tab == '30天') {
type = "2"
} else if (tab == '一季度') {
type = "3"
} else if (tab == '一年') {
type = "4"
}
return type
}
},
mounted() {
this.loadData(this.dateTypeParam, this.chartTypeParam)
},
methods: {
onRangeChange(tab) {
this.loadData(this.dateTypeParam, this.chartTypeParam)
},
onOrderChange(tab) {
this.loadData(this.dateTypeParam, this.chartTypeParam)
},
remain(num) {
return Math.round(num * 100) / 100
},
loadData(dateType, type) {
getIndexTrendData({
dateType,
type
})
.then(r => {
let data = []
let dateList = []
for (var kei = 0; kei < r.data.data.length; kei++) {
var key = r.data.data[kei];
data.push(key.number)
dateList.push(key.data)
}
this.xAxis = dateList
this.series = [{
data: data,
name: '数量',
type: 'line',
tooltip: true,
smooth: true,
symbol: 'none',
areaStyle: {
normal: {
opacity: 0.2
}
}
}];
})
.catch(e => {
})
},
beforeDestroy() {
if (this.visitChart) {
this.visitChart.dispose();
this.visitChart = null;
}
}
}
}
</script>
<style scoped>
.header_title {
font-weight: 700;
font-size: 16px;
color: #333333;
margin-left: 16px;
}
.v_line {
width: 5px;
height: 20px;
background-color: #333333;
}
</style>
src/page/data/data.vue 0 → 100644
<template>
<el-card class="box-card" style="margin-top: 16px;">
<div>
<div class="part_header layout_h_v_c">
<div class="v_line"></div>
<div class="header_title">统计数据</div>
<el-date-picker type="daterange" value-format="yyyy-MM-dd HH:mm:ss" v-model="range" style="margin-left: 16px;"
start-placeholder="开始日期" end-placeholder="结束日期" @change="onDateChange"></el-date-picker>
<el-button type="primary" @click="indexData" style="margin-left: 16px;">搜索</el-button>
<div class="layout_h_r weight_0_full">
<el-radio-group v-model="statRange" @change="onRangeChange">
<el-radio-button label="今日"></el-radio-button>
<el-radio-button label="本月"></el-radio-button>
<el-radio-button label="本季度"></el-radio-button>
<el-radio-button label="本年"></el-radio-button>
</el-radio-group>
</div>
</div>
<div class="layout_h">
<div class="layout_v weight_0_full">
<div class="layout_h_b" style="padding-top: 20px;">
<div class="number_container">
<div class="number_name">商品数</div>
<div class="number">{{stat.userNum}}件</div>
</div>
<div class="number_container">
<div class="number_name">订单数</div>
<div class="number">{{stat.vipNum}}件</div>
</div>
<div class="number_container">
<div class="number_name">流水</div>
<div class="number">{{stat.taskNum}}元</div>
</div>
<div class="number_container">
<div class="number_name">历史体现</div>
<div class="number">{{stat.taskNum}}元</div>
</div>
</div>
</div>
</div>
</div>
</el-card>
</template>
<script>
import {
getIndexData
} from '@/api/home.js'
export default {
data: function() {
return {
range: [],
statRange: '近7天',
stat: {
}
}
},
methods: {
indexData() { //这个方法输给users填充数据的，但是没法直接初始化时就调用
getIndexData({
startTime: this.range[0],
endTime: this.range[1]
}).then(r => {
this.stat = r.data.data
}).catch(e => {
})
},
onDateChange(range) {
this.statRange = ''
this.indexData(this.statRange)
},
onRangeChange(state) {
let start = new Date()
let end = new Date()
if(state == '今日') {
let mStart = new Date().format("yyyy-mm-dd").toDate()
let mEnd = new Date()
start = mStart
end = mEnd
} else if(state == '本月') {
end.setDate(start.getMonth() - 1)
} else if(state == '本季度') {
end.setMonth(end.getMonth() - 3)
} else if(state == '本年') {
end.setFullYear(end.getFullYear() - 1)
}
if(state) {
this.range = [end.format('yyyy-mm-dd'), start.format('yyyy-mm-dd')]
this.indexData(this.statRange)
}
}
},
mounted() { //这个属性就可以，在里面声明初始化时要调用的方法即可
this.indexData(this.statRange)
}
}
</script>
<style scoped>
.header_title {
font-weight: 700;
font-size: 16px;
color: #333333;
margin-left: 16px;
}
.number_container {
border: 1px #DEDEDE solid;
border-radius: 8px;
padding: 20px;
margin-right: 16px;
flex-grow: 1;
align-items: center;
display: flex;
flex-direction: column;
}
.number_name {
font-size: 20px;
font-weight: 700;
margin-bottom: 16px;
}
.number {
font-weight: 700;
font-size: 20px;
}
.total_number {
margin-left: 30px;
font-weight: 700;
font-size: 20px;
}
.v_line {
width: 5px;
height: 20px;
background-color: #333333;
}
.v_gray_line {
width: 1px;
background-color: #dedede;
align-self: center;
margin-right: 16px;
}
.inner_card_header {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.inner_card_content {
display: flex;
flex-direction: column;
margin-left: 20px;
margin-right: 20px;
margin-top: 10px;
margin-bottom: 10px;
}
.inner_card {
margin-right: 16px;
width: 0px;
flex-grow: 1;
}
.inner_card_last {
margin-right: 16px;
width: 0px;
flex-grow: 1;
}
.inner_card_number {
font-weight: 700;
font-size: 20px;
}
.inner_red {
color: red;
}
.inner_green {
color: #00FF00;
}
.inner_card_footer {
display: flex;
flex-direction: row;
justify-content: space-between;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
border-top: 1px solid #e6ebf5;
}
.inner_number {
font-size: 16px;
font-weight: 600;
}
</style>
src/page/wel.vue
<template>
<div>
<basic-container>
<div class="banner-text">
<span>
<a href="https://avue.top/#/pay" target="_blank">
<img src="https://img.shields.io/badge/Avue-2.6.15-green.svg" alt="Build Status">
</a>
<img src="https://img.shields.io/badge/Spring%20Boot-2.6.3-yellowgreen.svg" alt="Downloads">
<img src="https://img.shields.io/badge/Spring%20Cloud-2021-blue.svg" alt="Coverage Status">
</span>
<br>
<div class="divBox relative">
<span>
<el-collapse v-model="activeNames">
<el-collapse-item name="1">
<div>基于Spring Cloud Gateway</div>
<div>基于Spring Cloud 2021</div>
<div>基于Spring Boot 2.6.3</div>
<div>基于Spring Cloud Alibaba 2021</div>
</el-collapse-item>
<el-collapse-item name="2">
<div>基于Spring Security OAuth实现鉴权体系；</div>
<div>深度定制，支持全流程的登录授权，Server Resource</div>
</el-collapse-item>
<el-collapse-item name="3">
<div>支持docker部署</div>
<div>支持Rancher2 + Kubernetes部署</div>
<div>支持企业Paas Rainbond 部署</div>
</el-collapse-item>
<el-collapse-item name="4">
<div>基于开源LCN 分布式事务解决方案深度定制</div>
<div>完美兼容2.X，优化集群部署，提升性能</div>
</el-collapse-item>
<el-collapse-item name="5">
<div>扩展Spring Cache无缝兼容</div>
<div>支持开发过程无感知</div>
</el-collapse-item>
<el-collapse-item name="6">
<div>基于activiti5.22整合OAuth2</div>
<div>支持在线流程设计</div>
</el-collapse-item>
<el-collapse-item name="7">
<div>支持数据库存储SCG路由信息</div>
<div>支持前端动态编辑</div>
</el-collapse-item>
<el-collapse-item name="8">
<div>单点登录</div>
<div>扩展SBA支持服务监听事件redis保存</div>
<div>扩展Turbine,定制展示UI</div>
<div>扩展ResourceServer完全屏蔽实现细节开发更简单</div>
</el-collapse-item>
</el-collapse>
</span>
</div>
</basic-container>
<juwu-data/>
<juwu-chart />
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'Wel',
data() {
return {
activeNames: ['1', '2', '3', '4'],
DATA: [],
text: '',
actor: '',
count: 0,
isText: false
}
},
computed: {
...mapGetters(['website'])
},
methods: {
getData() {
if (this.count < this.DATA.length - 1) {
this.count++
} else {
this.count = 0
export default {
components: {
'juwu-data': () => import('./data/data.vue'),
'juwu-chart': () => import('./data/chart.vue')
},
data() {
return {
orderRanage: '',
}
this.isText = true
this.actor = this.DATA[this.count]
},
setData() {
let num = 0
let count = 0
let active = false
const timeoutstart = 5000
const timeoutend = 1000
const timespeed = 10
setInterval(() => {
if (this.isText) {
if (count == this.actor.length) {
active = true
} else {
active = false
}
if (active) {
num--
this.text = this.actor.substr(0, num)
if (num == 0) {
this.isText = false
setTimeout(() => {
count = 0
this.getData()
}, timeoutend)
}
} else {
num++
this.text = this.actor.substr(0, num)
if (num == this.actor.length) {
this.isText = false
setTimeout(() => {
this.isText = true
count = this.actor.length
}, timeoutstart)
}
}
}
}, timespeed)
}
}
}
</script>
mounted() {
<style scoped="scoped" lang="scss">
.el-collapse-item__header {
display: block !important;
}
},
.wel-contailer {
position: relative;
}
</script>
.banner-text {
<style scoped>
.relative {
position: relative;
padding: 0 20px;
font-size: 20px;
text-align: center;
color: #333;
}
.banner-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.8;
display: none;
}
.actor {
height: 250px;
overflow: hidden;
font-size: 18px;
color: #333;
}
.actor:after {
content: '';
width: 3px;
height: 25px;
vertical-align: -5px;
margin-left: 5px;
background-color: #333;
display: inline-block;
animation: blink 0.4s infinite alternate;
}
.typeing:after {
animation: none;
}
.part_container {}
@keyframes blink {
to {
opacity: 0;
}
}
</style>
src/util/utils.js 0 → 100644
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import DateFormat from 'dateformat'
Date.prototype.format = function(fmt) {
return DateFormat(this, fmt)
}
Date.prototype.isToday = function() {
return new Date().getTime() - this.getTime() < 86400000
}
Date.prototype.isSameDay = function(d) {
if (d == undefined) {
return false
}
return d.getFullYear() == this.getFullYear() && d.getMonth() == this.getMonth() && d.getDate() == this.getDate()
}
Date.prototype.toWeekDay = function() {
switch(this.getDay()) {
case 0:
return "星期天"
case 1:
return "星期一"
case 2:
return "星期二"
case 3:
return "星期三"
case 4:
return "星期四"
case 5:
return "星期五"
case 6:
return "星期六"
}
}
Date.prototype.getDays = function() {
let copy = new Date()
copy.setFullYear(this.getFullYear())
copy.setMonth(this.getMonth() + 1)
copy.setDate(0)
return copy.getDate()
}
Date.prototype.isLate = function(d) {
if(d) {
return d.getTime() - this.getTime() > 0
}
return false
}
String.prototype.isMobile = function() {
return (/^1[3|4|5|6|7|8|9]\d{9}$/.test(this));
}
String.prototype.formatDate = function(pattern) {
if (pattern !== undefined) {
try {
return this.toDate().format(pattern)
} catch (e) {
return this
}
}
return this
}
String.prototype.toDate = function() {
return new Date(this.replace(/-/g, "/"))
}
String.prototype.toPrice = function() {
let v = this.replace(/[^\d.]/g, "")
.replace(/^\./g, "")
.replace(/\.{2,}/g, ".")
.replace(".", "$#$")
.replace(/\./g, "")
.replace("$#$", ".")
.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
return v
}
String.prototype.hidePhone = function() {
let reg = /^(\d{3})\d{4}(\d{4})$/
return this.replace(reg, "$1****$2")
}
String.prototype.urlEncode = function() {
let url = this.toString()
return encodeURIComponent(url)
.replace(/!/g, '%21')
.replace(/'/g, '%27')
.replace(/\(/g, '%28')
.replace(/\)/g, '%29')
.replace(/\*/g, '%2A')
.replace(/%20/g, '+')
}
export default {// 设置选中的方法
// 记忆选择核心方法
changePageCoreRecordData: function (multipleSelectionAll, multipleSelection, tableData, successFn) {
// 标识当前行的唯一键的名称
const idKey = 'uid'
const that = this
// 如果总记忆中还没有选择的数据，那么就直接取当前页选中的数据，不需要后面一系列计算
if (multipleSelectionAll.length <= 0) {
multipleSelectionAll=multipleSelection
successFn(multipleSelectionAll)
return
}
// 总选择里面的key集合
const selectAllIds = []
multipleSelectionAll.forEach(row => {
selectAllIds.push(row[idKey])
})
const selectIds = []
// 获取当前页选中的id
multipleSelection.forEach(row => {
selectIds.push(row[idKey])
// 如果总选择里面不包含当前页选中的数据，那么就加入到总选择集合里
if (selectAllIds.indexOf(row[idKey]) < 0) {
multipleSelectionAll.push(row)
}
})
const noSelectIds = []
// 得到当前页没有选中的id
tableData.forEach(row => {
if (selectIds.indexOf(row[idKey]) < 0) {
noSelectIds.push(row[idKey])
}
})
noSelectIds.forEach(uid => {
if (selectAllIds.indexOf(uid) >= 0) {
for (let i = 0; i < multipleSelectionAll.length; i++) {
if (multipleSelectionAll[i][idKey] == uid) {
// 如果总选择中有未被选中的，那么就删除这条
multipleSelectionAll.splice(i, 1)
break
}
}
}
})
successFn(multipleSelectionAll)
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment