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> |
<template> |
||||||
<div class="page"> |
<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> |
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
|
import echarts from 'echarts' |
||||||
|
|
||||||
export default { |
export default { |
||||||
filters: {}, |
filters: {}, |
||||||
data() { |
data() { |
||||||
return { |
return { |
||||||
|
myChart: null |
||||||
} |
} |
||||||
}, |
}, |
||||||
created() { |
created() { |
||||||
|
this.init() |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.initChart('chart') |
||||||
}, |
}, |
||||||
methods: { |
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> |
</script> |
||||||
|
|
||||||
<style scoped></style> |
<style scoped lang="scss"> |
||||||
|
@import './index.scss'; |
||||||
|
</style> |
||||||
|
@ -1,149 +1,151 @@ |
|||||||
<template> |
<template> |
||||||
<div> |
<div> |
||||||
<el-form ref="artFrom" :model="page" label-width="80px" label-position="right" class="tabform" |
<el-form ref="artFrom" :model="page" label-width="80px" label-position="right" class="tabform" |
||||||
@submit.native.prevent inline> |
@submit.native.prevent inline> |
||||||
<el-form-item label="输入搜索"> |
<el-form-item label="输入搜索"> |
||||||
<el-input clearable v-model="page.params.siteName" placeholder="请输入油站名称" |
<el-input clearable v-model="page.params.siteName" placeholder="请输入油站名称" |
||||||
class="form_content_width"></el-input> |
class="form_content_width"></el-input> |
||||||
</el-form-item> |
</el-form-item> |
||||||
<el-form-item> |
<el-form-item> |
||||||
<el-button type="primary" @click="userSearchs">查询</el-button> |
<el-button type="primary" @click="userSearchs">查询</el-button> |
||||||
<el-button type="primary" @click="submit">确定选择</el-button> |
<el-button type="primary" @click="submit">确定选择</el-button> |
||||||
</el-form-item> |
</el-form-item> |
||||||
</el-form> |
</el-form> |
||||||
<el-table max-height="500" @selection-change="selectionChange" v-loading="loading" ref="table" :data="tableList" |
<el-table max-height="500" @selection-change="selectionChange" v-loading="loading" ref="table" :data="tableList" |
||||||
highlight-current-row empty-text="暂无数据" class="mt14"> |
:row-key="(row) => row.siteId" highlight-current-row empty-text="暂无数据" class="mt14"> |
||||||
<el-table-column type="selection" width="55"> |
<el-table-column type="selection" reserve-selection width="55"> |
||||||
</el-table-column> |
</el-table-column> |
||||||
<el-table-column label="油站名称" prop="siteName"> </el-table-column> |
<el-table-column label="油站名称" prop="siteName"></el-table-column> |
||||||
<el-table-column label="渠道" prop="channel"> </el-table-column> |
<el-table-column label="渠道" prop="channel"></el-table-column> |
||||||
</el-table> |
</el-table> |
||||||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" |
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" |
||||||
:current-page="page.currentPage" :page-sizes="[10, 15, 20, 30]" :page-size="page.pageSize" |
:current-page="page.currentPage" :page-sizes="[10, 15, 20, 30]" :page-size="page.pageSize" |
||||||
layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount" /> |
layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount" /> |
||||||
</div> |
</div> |
||||||
</template> |
</template> |
||||||
<script> |
<script> |
||||||
import productApi from '@/api/product/productAttr.js'; |
import productApi from '@/api/product/productAttr.js' |
||||||
|
|
||||||
export default { |
export default { |
||||||
name: "OilStationSelection", |
name: 'OilStationSelection', |
||||||
props: { |
props: { |
||||||
OilStationSelectionList: { |
OilStationSelectionList: { |
||||||
type: Array, |
type: Array, |
||||||
default: () => [] |
default: () => [] |
||||||
}, |
}, |
||||||
selectAttrId: { |
selectAttrId: { |
||||||
type: String, |
type: String, |
||||||
default: () => "" |
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() { |
isStrictPromise(value) { |
||||||
return { |
return !!value |
||||||
selectionList: [], |
&& typeof value === 'object' |
||||||
loading: false, |
&& typeof value.then === 'function' |
||||||
tableList: [], |
&& typeof value.finally === 'function' |
||||||
page: { |
}, |
||||||
"currentPage": 1, |
loadingFn(callback) { |
||||||
"pageSize": 10, |
this.loading = true |
||||||
"totalCount": 0, |
if (this.isStrictPromise(callback)) { |
||||||
"params": { |
callback.finally(() => { |
||||||
"siteName": "" |
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: { |
handleCurrentChange(val) { |
||||||
OilStationSelectionList:{ |
this.page.currentPage = val |
||||||
handler(n,o){ |
this.getByPage() |
||||||
this.$refs.table.clearSelection(); |
}, |
||||||
n.forEach(element => { |
handleSizeChange(val) { |
||||||
this.$refs.table.toggleRowSelection(element); |
this.page.pageSize = val |
||||||
}); |
this.getByPage() |
||||||
}, |
}, |
||||||
deep:true |
del(e) { |
||||||
|
productApi.delete(e).then(res => { |
||||||
|
if (res.code == 20000) { |
||||||
|
this.$message.success('操作成功') |
||||||
|
this.handleCurrentChange() |
||||||
} |
} |
||||||
|
}) |
||||||
}, |
}, |
||||||
created() { |
edit(row) { |
||||||
this.init() |
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: { |
init() { |
||||||
submit() { |
// this.getByPage(); |
||||||
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(); |
|
||||||
|
|
||||||
// if (this.selectAttrId && this.selectAttrId.indexOf("/") !== -1) { |
// if (this.selectAttrId && this.selectAttrId.indexOf("/") !== -1) { |
||||||
// this.page.params.typeId = this.selectAttrId.split("/")[0] || ""; |
// this.page.params.typeId = this.selectAttrId.split("/")[0] || ""; |
||||||
// this.getByPage(); |
// this.getByPage(); |
||||||
// } else { |
// } else { |
||||||
// this.$message.warning("初始化出错") |
// this.$message.warning("初始化出错") |
||||||
// } |
// } |
||||||
} |
|
||||||
} |
} |
||||||
|
} |
||||||
} |
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style></style> |
<style></style> |
||||||
|
Loading…
Reference in new issue