xiaoning
/
yoga-manager-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

首页优化

Browse Source
master
zhaochencheng 3 years ago
parent 86d8ef746b
commit 12d410aa09
4 changed files with 211 additions and 25 deletions
Show Stats Download Patch File Download Diff File

1
package.json
Unescape View File

@ -42,6 +42,7 @@
"clipboard": "2.0.8",
"core-js": "3.19.1",
"echarts": "4.9.0",
"v-charts": "^1.19.0",
"element-ui": "2.15.8",
"file-saver": "2.0.5",
"fuse.js": "6.4.3",

2
src/main.js
Unescape View File

@ -13,6 +13,7 @@ import router from './router'
import directive from './directive' // directive
import plugins from './plugins' // plugins
import { download } from '@/utils/request'
import VCharts from 'v-charts'
import './assets/icons' // icon
import './permission' // permission control
@ -67,6 +68,7 @@ Vue.component('DictSelect',DictSelect)
Vue.use(directive)
Vue.use(plugins)
Vue.use(VueMeta)
Vue.use(VCharts)
DictData.install()
/**

42
src/utils/date.js
Unescape View File

@ -0,0 +1,42 @@
// date.js
export function formatDate(date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
}
let o = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
};
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + '';
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
}
}
return fmt;
}
function padLeftZero(str) {
return ('00' + str).substr(str.length);
}
export function str2Date(dateStr, separator) {
if (!separator) {
separator = "-";
}
let dateArr = dateStr.split(separator);
let year = parseInt(dateArr[0]);
let month;
//处理月份为04这样的情况
if (dateArr[1].indexOf("0") == 0) {
month = parseInt(dateArr[1].substring(1));
} else {
month = parseInt(dateArr[1]);
}
let day = parseInt(dateArr[2]);
let date = new Date(year, month - 1, day);
return date;
}

191
src/views/index.vue
Unescape View File

@ -65,30 +65,107 @@
router-link(to="/relation/carrier") 4
li.da
router-link(to="/item") 3
el-card(style="margin: 20px 20px; font-size: 14px")
div(slot="header")
span 发展历程
el-timeline
el-timeline-item(placement="top" timestamp="2018年")
el-card
h4 参与京东服务市场商品分析应用开发，参与京东服务市场会员积分应用开发
el-timeline-item(placement="top" timestamp="2019年")
el-card
h4 参与京东服务市场商品搬家应用开发，参与京东服务市场商品搬家应用开发，参与拼多多服务市场订单应用开发
el-timeline-item(placement="top" timestamp="2020年")
el-card
h4 所参与开发的拼多多订单应用排名服务市场类目第一，开始快手服务市场订单应用开发
el-timeline-item(placement="top" timestamp="2021年")
el-card
h4 日处理拼多多订单200万条，开始美团、饿了么应用市场应用开发
el-timeline-item(placement="top" timestamp="2022年")
el-card
h4 累计服务10万+电商平台店铺、5万+外卖店铺。开始抖音、淘宝服务市场订单应用开发，开源ruoyi-wms
el-row.pl20.pr20(:gutter="10")
el-col(:span="16")
el-card(style="margin: 20px 20px; font-size: 14px")
div(slot="header")
span 订单统计
el-row
el-col(:span="4")
div(style="padding: 20px")
div
div(style="color: #909399;font-size: 14px") 本月订单总数
div(style="color: #606266;font-size: 24px;padding: 10px 0") 10000
div
span.color-success(style="font-size: 14px") +10%
span(style="color: #C0C4CC;font-size: 14px") 同比上月
div(style="margin-top: 20px;")
div(style="color: #909399;font-size: 14px") 本周订单总数
div(style="color: #606266;font-size: 24px;padding: 10px 0") 1000
div
span.color-danger(style="font-size: 14px") -10%
span(style="color: #C0C4CC;font-size: 14px") 同比上周
div(style="margin-top: 20px;")
div(style="color: #909399;font-size: 14px") 本月销售总额
div(style="color: #606266;font-size: 24px;padding: 10px 0") 100000
div
span.color-success(style="font-size: 14px") +10%
span(style="color: #C0C4CC;font-size: 14px") 同比上月
div(style="margin-top: 20px;")
div(style="color: #909399;font-size: 14px") 本周销售总额
div(style="color: #606266;font-size: 24px;padding: 10px 0") 50000
div
span.color-danger(style="font-size: 14px") -10%
span(style="color: #C0C4CC;font-size: 14px") 同比上周
el-col(:span="20")
div(style="padding: 10px;border-left:1px solid #DCDFE6")
el-date-picker(
v-model="orderCountDate"
align="right"
end-placeholder="结束日期"
:picker-options="pickerOptions"
range-separator="至"
size="small"
start-placeholder="开始日期"
style="float: right;z-index: 1"
type="daterange"
unlink-panels
@change="handleDateChange"
)
div
ve-line(
:data-empty="dataEmpty"
:data="chartData"
:legend-visible="false"
:loading="loading"
:settings="chartSettings"
)
el-col(:span="8")
el-card(style="margin: 20px 20px; font-size: 14px")
div(slot="header")
span 发展历程
el-timeline
el-timeline-item(placement="top" timestamp="2018年")
el-card
h4 参与京东服务市场商品分析应用开发，参与京东服务市场会员积分应用开发
el-timeline-item(placement="top" timestamp="2019年")
el-card
h4 参与京东服务市场商品搬家应用开发，参与京东服务市场商品搬家应用开发，参与拼多多服务市场订单应用开发
el-timeline-item(placement="top" timestamp="2020年")
el-card
h4 所参与开发的拼多多订单应用排名服务市场类目第一，开始快手服务市场订单应用开发
el-timeline-item(placement="top" timestamp="2021年")
el-card
h4 日处理拼多多订单200万条，开始美团、饿了么应用市场应用开发
el-timeline-item(placement="top" timestamp="2022年")
el-card
h4 累计服务10万+电商平台店铺、5万+外卖店铺。开始抖音、淘宝服务市场订单应用开发，开源ruoyi-wms
</template>
<script>
import {str2Date} from '@/utils/date';
import PanelGroup from '@/views/components/PanelGroup'
import { mapGetters } from 'vuex'
const DATA_FROM_BACKEND = {
columns: ['date', 'orderCount','orderAmount'],
rows: [
{date: '2018-11-01', orderCount: 10, orderAmount: 1093},
{date: '2018-11-02', orderCount: 20, orderAmount: 2230},
{date: '2018-11-03', orderCount: 33, orderAmount: 3623},
{date: '2018-11-04', orderCount: 50, orderAmount: 6423},
{date: '2018-11-05', orderCount: 80, orderAmount: 8492},
{date: '2018-11-06', orderCount: 60, orderAmount: 6293},
{date: '2018-11-07', orderCount: 20, orderAmount: 2293},
{date: '2018-11-08', orderCount: 60, orderAmount: 6293},
{date: '2018-11-09', orderCount: 50, orderAmount: 5293},
{date: '2018-11-10', orderCount: 30, orderAmount: 3293},
{date: '2018-11-11', orderCount: 20, orderAmount: 2293},
{date: '2018-11-12', orderCount: 80, orderAmount: 8293},
{date: '2018-11-13', orderCount: 100, orderAmount: 10293},
{date: '2018-11-14', orderCount: 10, orderAmount: 1293},
{date: '2018-11-15', orderCount: 40, orderAmount: 4293}
]
};
export default {
components: {
@ -96,11 +173,43 @@ export default {
},
data() {
return {
tableData: [{
date: '1',
name: '应急',
address: '20'
}],
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
let start = new Date();
start.setFullYear(2018);
start.setMonth(10);
start.setDate(1);
end.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一月',
onClick(picker) {
const end = new Date();
let start = new Date();
start.setFullYear(2018);
start.setMonth(10);
start.setDate(1);
end.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}]
},
orderCountDate: '',
chartSettings: {
xAxisType: 'time',
area:true,
axisSite: { right: ['orderAmount']},
labelMap: {'orderCount': '订单数量', 'orderAmount': '订单金额'}},
chartData: {
columns: [],
rows: []
},
loading: false,
dataEmpty: false,
nowTime: '',
hello: ''
}
@ -111,9 +220,41 @@ export default {
created() {
this.showTimes()
this.helloTimes()
this.initOrderCountDate()
this.getData()
},
methods: {
handleDateChange(){
this.getData();
},
initOrderCountDate(){
let start = new Date();
start.setFullYear(2018);
start.setMonth(10);
start.setDate(1);
const end = new Date();
end.setTime(start.getTime() + 1000 * 60 * 60 * 24 * 7);
this.orderCountDate=[start,end];
},
getData(){
setTimeout(() => {
this.chartData = {
columns: ['date', 'orderCount','orderAmount'],
rows: []
};
for(let i=0;i<DATA_FROM_BACKEND.rows.length;i++){
let item=DATA_FROM_BACKEND.rows[i];
let currDate=str2Date(item.date);
let start=this.orderCountDate[0];
let end=this.orderCountDate[1];
if(currDate.getTime()>=start.getTime()&&currDate.getTime()<=end.getTime()){
this.chartData.rows.push(item);
}
}
this.dataEmpty = false;
this.loading = false
}, 1000)
},
timeFormate(timeStamp) {
let year = new Date(timeStamp).getFullYear()
let month =

Write Preview
Loading…
Cancel
Save