Merge branch 'master' of http://121.196.213.68:3000/caoliancun/PointsMall_Admin into chenlianjie
commit
ad61e9693b
5 changed files with 423 additions and 146 deletions
@ -0,0 +1,90 @@ |
||||
.flex { |
||||
display: flex; |
||||
} |
||||
|
||||
.column { |
||||
flex-direction: column; |
||||
} |
||||
|
||||
.ac { |
||||
align-items: center; |
||||
} |
||||
|
||||
.jc { |
||||
justify-content: center; |
||||
} |
||||
|
||||
.oneflex { |
||||
flex: 1; |
||||
} |
||||
|
||||
.jw { |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
.js { |
||||
justify-content: space-around; |
||||
} |
||||
|
||||
.number { |
||||
color: red; |
||||
font-size: 25px; |
||||
} |
||||
|
||||
.product-card { |
||||
.product-card-item {} |
||||
} |
||||
|
||||
.orderData { |
||||
width: 100%; |
||||
|
||||
.orderData-right { |
||||
margin-left: 50px; |
||||
flex-wrap: wrap; |
||||
|
||||
.orderData-right-item { |
||||
width: calc(50% - 20px); |
||||
box-sizing: border-box; |
||||
text-align: center; |
||||
padding: 10px 20px; |
||||
border-bottom: #ececec solid 1px; |
||||
|
||||
} |
||||
} |
||||
|
||||
.orderData-left { |
||||
padding: 10px 20px; |
||||
box-sizing: border-box; |
||||
border: solid 1px #bbbbbb; |
||||
} |
||||
} |
||||
|
||||
.orderStatistics-card { |
||||
.orderStatistics-card-right{ |
||||
} |
||||
.orderStatistics-card-left { |
||||
flex-shrink: 0; |
||||
padding: 10px 50px; |
||||
border-right: solid 1px #ececec; |
||||
.orderStatistics-card-left-item{ |
||||
.orderStatistics-card-left-item-title{ |
||||
color: #bbbbbb; |
||||
} |
||||
.orderStatistics-card-left-item-number{ |
||||
font-size: 25px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
.box-card{ |
||||
margin-bottom: 30px; |
||||
} |
||||
.card-title{ |
||||
font-size: 20px; |
||||
font-weight: 600; |
||||
} |
||||
.page{ |
||||
height:calc(100vh - 144px); |
||||
box-sizing: border-box; |
||||
} |
@ -1,20 +1,184 @@ |
||||
<template> |
||||
<div class="page"> |
||||
<el-row> |
||||
<el-col :span="24"> |
||||
<el-card class="box-card"> |
||||
<div slot="header"> |
||||
<span class="card-title">订单数据</span> |
||||
</div> |
||||
<div class="flex"> |
||||
<div class="orderData flex ac"> |
||||
<div class="orderData-left flex ac"> |
||||
<i style="font-size: 40px;" class="el-icon-tickets"></i> |
||||
<div> |
||||
<div>今日订单总数</div> |
||||
<div>200</div> |
||||
</div> |
||||
</div> |
||||
<div class="orderData-right oneflex flex jw"> |
||||
<div class="orderData-right-item"> |
||||
<span>待核销订单</span> |
||||
<span>(10)</span> |
||||
</div> |
||||
<div class="orderData-right-item"> |
||||
<span>已核销订单</span> |
||||
<span>(10)</span> |
||||
</div> |
||||
<div class="orderData-right-item"> |
||||
<span>已完成订单</span> |
||||
<span>(10)</span> |
||||
</div> |
||||
<div class="orderData-right-item"> |
||||
<span>待退款订单</span> |
||||
<span>(10)</span> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</el-card></el-col> |
||||
</el-row> |
||||
<el-row> |
||||
<el-col :span="11"> |
||||
<el-card class="box-card"> |
||||
<div slot="header"> |
||||
<span class="card-title">商品总览</span> |
||||
</div> |
||||
<div class="product-card flex js"> |
||||
<div class="product-card-item"> |
||||
<div class="number">100</div> |
||||
<div>已下架</div> |
||||
</div> |
||||
<div class="product-card-item"> |
||||
<div class="number">100</div> |
||||
<div>已下架</div> |
||||
</div> |
||||
|
||||
<div class="product-card-item"> |
||||
<div class="number">100</div> |
||||
<div>已下架</div> |
||||
</div> |
||||
|
||||
<div class="product-card-item"> |
||||
<div class="number">100</div> |
||||
<div>已下架</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</el-card> |
||||
</el-col> |
||||
<el-col :span="2"></el-col> |
||||
<el-col :span="11"> |
||||
<el-card class="box-card"> |
||||
<div slot="header"> |
||||
<span class="card-title">商品总览</span> |
||||
</div> |
||||
<div class="product-card flex js"> |
||||
<div class="product-card-item"> |
||||
<div class="number">100</div> |
||||
<div>已下架</div> |
||||
</div> |
||||
<div class="product-card-item"> |
||||
<div class="number">100</div> |
||||
<div>已下架</div> |
||||
</div> |
||||
|
||||
<div class="product-card-item"> |
||||
<div class="number">100</div> |
||||
<div>已下架</div> |
||||
</div> |
||||
|
||||
<div class="product-card-item"> |
||||
<div class="number">100</div> |
||||
<div>已下架</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</el-card> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row> |
||||
<el-col :span="24"> |
||||
<el-card class="box-card"> |
||||
<div slot="header"> |
||||
<span class="card-title">订单统计</span> |
||||
</div> |
||||
<div class="orderStatistics-card flex"> |
||||
<div class="orderStatistics-card-left flex column js"> |
||||
<div class="orderStatistics-card-left-item"> |
||||
<div class="orderStatistics-card-left-item-title">本月订单总数</div> |
||||
<div class="orderStatistics-card-left-item-number">10000</div> |
||||
<div class="orderStatistics-card-left-item-title">10% 同比上周</div> |
||||
</div> |
||||
<div class="orderStatistics-card-left-item"> |
||||
<div class="orderStatistics-card-left-item-title">本月订单总数</div> |
||||
<div class="orderStatistics-card-left-item-number">10000</div> |
||||
<div class="orderStatistics-card-left-item-title">10% 同比上周</div> |
||||
</div> |
||||
</div> |
||||
<div class="orderStatistics-card-right oneflex"> |
||||
<div style="width: 100%;"> 近一周订单统计</div> |
||||
<div style="width: 100%; height:500px;margin-top:20px" id="chart"></div> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
</el-col> |
||||
</el-row> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import echarts from 'echarts' |
||||
|
||||
export default { |
||||
filters: {}, |
||||
data() { |
||||
return { |
||||
myChart: null |
||||
} |
||||
}, |
||||
created() { |
||||
this.init() |
||||
}, |
||||
mounted() { |
||||
this.initChart('chart') |
||||
}, |
||||
methods: { |
||||
initChart(id='chart') { |
||||
this.myChart = echarts.init(document.getElementById(id)); |
||||
this.myChart.setOption({ |
||||
color: ['#4370da'], |
||||
grid: { |
||||
x: 50, |
||||
y: 25, |
||||
x2: 30, |
||||
y2: 35 |
||||
}, |
||||
xAxis: { |
||||
type: 'category', |
||||
boundaryGap: false, |
||||
data: ['07-01周六', '07-02周日', '07-03周一', '07-04周二', '07-05周三', '07-06周四', '07-07周五'] |
||||
}, |
||||
yAxis: { |
||||
type: 'value' |
||||
}, |
||||
series: [ |
||||
{ |
||||
data: [820, 932, 901, 934, 1290, 1330, 1320], |
||||
type: 'line', |
||||
smooth: true, |
||||
areaStyle: {} |
||||
} |
||||
] |
||||
}); |
||||
}, |
||||
init() { |
||||
|
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped></style> |
||||
<style scoped lang="scss"> |
||||
@import './index.scss'; |
||||
</style> |
||||
|
@ -1,149 +1,151 @@ |
||||
<template> |
||||
<div> |
||||
<el-form ref="artFrom" :model="page" label-width="80px" label-position="right" class="tabform" |
||||
@submit.native.prevent inline> |
||||
<el-form-item label="输入搜索"> |
||||
<el-input clearable v-model="page.params.siteName" placeholder="请输入油站名称" |
||||
class="form_content_width"></el-input> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" @click="userSearchs">查询</el-button> |
||||
<el-button type="primary" @click="submit">确定选择</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
<el-table max-height="500" @selection-change="selectionChange" v-loading="loading" ref="table" :data="tableList" |
||||
highlight-current-row empty-text="暂无数据" class="mt14"> |
||||
<el-table-column type="selection" width="55"> |
||||
</el-table-column> |
||||
<el-table-column label="油站名称" prop="siteName"> </el-table-column> |
||||
<el-table-column label="渠道" prop="channel"> </el-table-column> |
||||
</el-table> |
||||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" |
||||
:current-page="page.currentPage" :page-sizes="[10, 15, 20, 30]" :page-size="page.pageSize" |
||||
layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount" /> |
||||
</div> |
||||
</template> |
||||
<div> |
||||
<el-form ref="artFrom" :model="page" label-width="80px" label-position="right" class="tabform" |
||||
@submit.native.prevent inline> |
||||
<el-form-item label="输入搜索"> |
||||
<el-input clearable v-model="page.params.siteName" placeholder="请输入油站名称" |
||||
class="form_content_width"></el-input> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button type="primary" @click="userSearchs">查询</el-button> |
||||
<el-button type="primary" @click="submit">确定选择</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
<el-table max-height="500" @selection-change="selectionChange" v-loading="loading" ref="table" :data="tableList" |
||||
:row-key="(row) => row.siteId" highlight-current-row empty-text="暂无数据" class="mt14"> |
||||
<el-table-column type="selection" reserve-selection width="55"> |
||||
</el-table-column> |
||||
<el-table-column label="油站名称" prop="siteName"></el-table-column> |
||||
<el-table-column label="渠道" prop="channel"></el-table-column> |
||||
</el-table> |
||||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" |
||||
:current-page="page.currentPage" :page-sizes="[10, 15, 20, 30]" :page-size="page.pageSize" |
||||
layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount" /> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import productApi from '@/api/product/productAttr.js'; |
||||
import productApi from '@/api/product/productAttr.js' |
||||
|
||||
export default { |
||||
name: "OilStationSelection", |
||||
props: { |
||||
OilStationSelectionList: { |
||||
type: Array, |
||||
default: () => [] |
||||
}, |
||||
selectAttrId: { |
||||
type: String, |
||||
default: () => "" |
||||
name: 'OilStationSelection', |
||||
props: { |
||||
OilStationSelectionList: { |
||||
type: Array, |
||||
default: () => [] |
||||
}, |
||||
selectAttrId: { |
||||
type: String, |
||||
default: () => '' |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
selectionList: [], |
||||
loading: false, |
||||
tableList: [], |
||||
page: { |
||||
'currentPage': 1, |
||||
'pageSize': 10, |
||||
'totalCount': 0, |
||||
'params': { |
||||
'siteName': '' |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
watch: { |
||||
OilStationSelectionList: { |
||||
handler(n, o) { |
||||
this.$refs.table.clearSelection() |
||||
n.forEach(element => { |
||||
this.$refs.table.toggleRowSelection(element) |
||||
}) |
||||
}, |
||||
deep: true |
||||
} |
||||
}, |
||||
created() { |
||||
this.init() |
||||
}, |
||||
methods: { |
||||
submit() { |
||||
this.$emit('submit', this.getSelectionList()) |
||||
}, |
||||
getSelectionList() { |
||||
return this.selectionList |
||||
}, |
||||
selectionChange(e) { |
||||
this.selectionList = e |
||||
}, |
||||
userSearchs() { |
||||
this.getByPage() |
||||
}, |
||||
data() { |
||||
return { |
||||
selectionList: [], |
||||
loading: false, |
||||
tableList: [], |
||||
page: { |
||||
"currentPage": 1, |
||||
"pageSize": 10, |
||||
"totalCount": 0, |
||||
"params": { |
||||
"siteName": "" |
||||
}, |
||||
} |
||||
isStrictPromise(value) { |
||||
return !!value |
||||
&& typeof value === 'object' |
||||
&& typeof value.then === 'function' |
||||
&& typeof value.finally === 'function' |
||||
}, |
||||
loadingFn(callback) { |
||||
this.loading = true |
||||
if (this.isStrictPromise(callback)) { |
||||
callback.finally(() => { |
||||
this.loading = false |
||||
}) |
||||
} |
||||
|
||||
}, |
||||
getByPage() { |
||||
this.loadingFn(productApi.getAllSites(this.page).then(res => { |
||||
if (res.code === 20000) { |
||||
this.tableList = res.data.list |
||||
this.page.totalCount = parseInt(res.data.totalCount) |
||||
|
||||
} else { |
||||
this.tableList = [] |
||||
this.page.totalCount = 0 |
||||
} |
||||
})) |
||||
}, |
||||
watch: { |
||||
OilStationSelectionList:{ |
||||
handler(n,o){ |
||||
this.$refs.table.clearSelection(); |
||||
n.forEach(element => { |
||||
this.$refs.table.toggleRowSelection(element); |
||||
}); |
||||
}, |
||||
deep:true |
||||
handleCurrentChange(val) { |
||||
this.page.currentPage = val |
||||
this.getByPage() |
||||
}, |
||||
handleSizeChange(val) { |
||||
this.page.pageSize = val |
||||
this.getByPage() |
||||
}, |
||||
del(e) { |
||||
productApi.delete(e).then(res => { |
||||
if (res.code == 20000) { |
||||
this.$message.success('操作成功') |
||||
this.handleCurrentChange() |
||||
} |
||||
}) |
||||
}, |
||||
created() { |
||||
this.init() |
||||
edit(row) { |
||||
let data = Object.assign({}, row, { |
||||
name: this.selectAttrId.split('/')[1] || '', |
||||
spec: [{ |
||||
value: row.attributeName, |
||||
detail: row.attributeContent.split(',') |
||||
}] |
||||
}) |
||||
this.$parent.$parent.selection = [data] |
||||
this.$parent.$parent.addAttr('typeUpdate') |
||||
}, |
||||
methods: { |
||||
submit() { |
||||
this.$emit('submit', this.getSelectionList()) |
||||
}, |
||||
getSelectionList() { |
||||
return this.selectionList |
||||
}, |
||||
selectionChange(e) { |
||||
this.selectionList = e |
||||
}, |
||||
userSearchs() { |
||||
this.getByPage() |
||||
}, |
||||
isStrictPromise(value) { |
||||
return !!value |
||||
&& typeof value === 'object' |
||||
&& typeof value.then === 'function' |
||||
&& typeof value.finally === 'function'; |
||||
}, |
||||
loadingFn(callback) { |
||||
this.loading = true; |
||||
if (this.isStrictPromise(callback)) { |
||||
callback.finally(() => { |
||||
this.loading = false; |
||||
}) |
||||
}; |
||||
}, |
||||
getByPage() { |
||||
this.loadingFn(productApi.getAllSites(this.page).then(res => { |
||||
// ({ |
||||
// data: this.tableList = [], |
||||
// currentPage: this.page.currentPage, |
||||
// pageSize: this.page.pageSize, |
||||
// totalCount: this.page.totalCount |
||||
// } = res.data); |
||||
this.tableList = res.data |
||||
console.log(res) |
||||
})); |
||||
}, |
||||
handleCurrentChange(val) { |
||||
this.page.currentPage = val |
||||
this.getByPage() |
||||
}, |
||||
handleSizeChange(val) { |
||||
this.page.pageSize = val |
||||
this.getByPage() |
||||
}, |
||||
del(e) { |
||||
productApi.delete(e).then(res => { |
||||
if (res.code == 20000) { |
||||
this.$message.success('操作成功') |
||||
this.handleCurrentChange(); |
||||
} |
||||
}) |
||||
}, |
||||
edit(row) { |
||||
let data = Object.assign({}, row, { |
||||
name: this.selectAttrId.split("/")[1] || "", |
||||
spec: [{ |
||||
value: row.attributeName, |
||||
detail: row.attributeContent.split(",") |
||||
}], |
||||
}) |
||||
this.$parent.$parent.selection = [data]; |
||||
this.$parent.$parent.addAttr('typeUpdate'); |
||||
}, |
||||
init() { |
||||
// this.getByPage(); |
||||
init() { |
||||
// this.getByPage(); |
||||
|
||||
// if (this.selectAttrId && this.selectAttrId.indexOf("/") !== -1) { |
||||
// this.page.params.typeId = this.selectAttrId.split("/")[0] || ""; |
||||
// this.getByPage(); |
||||
// } else { |
||||
// this.$message.warning("初始化出错") |
||||
// } |
||||
} |
||||
// if (this.selectAttrId && this.selectAttrId.indexOf("/") !== -1) { |
||||
// this.page.params.typeId = this.selectAttrId.split("/")[0] || ""; |
||||
// this.getByPage(); |
||||
// } else { |
||||
// this.$message.warning("初始化出错") |
||||
// } |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style></style> |
||||
<style></style> |
||||
|
Loading…
Reference in new issue