parent
5de5036c0b
commit
0912b2383d
@ -0,0 +1,9 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
export function home(params){
|
||||
return request({
|
||||
method:'get',
|
||||
url:'/api/admin/chart/home',
|
||||
params
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,33 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
export function getList(params){
|
||||
return request({
|
||||
method:'get',
|
||||
url:'/api/admin/notice/get-list',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function getForm(id,params){
|
||||
return request({
|
||||
method:'get',
|
||||
url:`/api/admin/notice/get-form/${id}`,
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function save(data){
|
||||
return request({
|
||||
method:'post',
|
||||
url:'/api/admin/notice/save',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function destroy(id,data){
|
||||
return request({
|
||||
method:'post',
|
||||
url:`/api/admin/notice/delete/${id}`,
|
||||
data
|
||||
})
|
||||
}
|
||||
@ -1,307 +1,307 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<div class="statistics">
|
||||
<panel-group :totaldata="list" />
|
||||
</div>
|
||||
|
||||
<div class="chart">
|
||||
<div class="chartItem" style="margin-right: 1%;">
|
||||
<div class="chartItemTitle">营业与收入</div>
|
||||
<div id="col-chart"></div>
|
||||
</div>
|
||||
<div class="chartItem" style="margin-left: 1%;">
|
||||
<div class="chartItemTitle">客户与订单</div>
|
||||
<div id="line-chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from "echarts"
|
||||
import PanelGroup from './components/PanelGroup'
|
||||
import {
|
||||
getChartsHome
|
||||
} from "../../api/dashboard.js"
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PanelGroup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
col: '',
|
||||
line: '',
|
||||
business_data: [],
|
||||
collect_data: [],
|
||||
list: {},
|
||||
customerArr: [],
|
||||
orderArr: [],
|
||||
chartData: {},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
chartData(val, newval) {
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<div class="statistics">
|
||||
<panel-group :totaldata="list" />
|
||||
</div>
|
||||
|
||||
<div class="chart">
|
||||
<div class="chartItem" style="margin-right: 1%;">
|
||||
<div class="chartItemTitle">营业与收入</div>
|
||||
<div id="col-chart"></div>
|
||||
</div>
|
||||
<div class="chartItem" style="margin-left: 1%;">
|
||||
<div class="chartItemTitle">客户与订单</div>
|
||||
<div id="line-chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from "echarts"
|
||||
import PanelGroup from './components/PanelGroup'
|
||||
import {
|
||||
getChartsHome
|
||||
} from "../../api/dashboard.js"
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PanelGroup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
col: '',
|
||||
line: '',
|
||||
business_data: [],
|
||||
collect_data: [],
|
||||
list: {},
|
||||
customerArr: [],
|
||||
orderArr: [],
|
||||
chartData: {},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
chartData(val, newval) {
|
||||
if (newval){
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async loadData() {
|
||||
await getChartsHome().then((res) => {
|
||||
console.log(res);
|
||||
this.list = res.list;
|
||||
this.chartData = res;
|
||||
let _business_data = [];
|
||||
let _collect_data = [];
|
||||
res.business_data.map(item => {
|
||||
_business_data.push(item.server_money_total)
|
||||
_collect_data.push(item.collect_money)
|
||||
})
|
||||
this.business_data = _business_data;
|
||||
this.collect_data = _collect_data;
|
||||
let _customerArr = [];
|
||||
let _orderArr = [];
|
||||
|
||||
res.order_data.map(item => {
|
||||
_customerArr.push(item.active_customer)
|
||||
_orderArr.push(item.order_total)
|
||||
})
|
||||
this.customerArr = _customerArr;
|
||||
this.orderArr = _orderArr;
|
||||
}).catch()
|
||||
},
|
||||
init() {
|
||||
this.col = echarts.init(document.getElementById('col-chart'))
|
||||
this.col.setOption({
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
position: 'bottom'
|
||||
},
|
||||
legend: {},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
boundaryGap: [0, 0.01]
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['第一周', '第二周', '第三周', '第四周']
|
||||
},
|
||||
series: [{
|
||||
name: '服务金额',
|
||||
type: 'bar',
|
||||
data: this.business_data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgb(42,182,252)'
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '收款',
|
||||
type: 'bar',
|
||||
data: this.collect_data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgb(34,228,255)'
|
||||
},
|
||||
},
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
this.line = echarts.init(document.getElementById('line-chart'))
|
||||
this.line.setOption({
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['活跃客户', '服务订单']
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '6%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {
|
||||
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['第一周', '第二周', '第三周', '第四周']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [{
|
||||
name: '活跃客户',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: this.customerArr,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgb(42,182,252)'
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '服务订单',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: this.orderArr,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgb(34,228,255)'
|
||||
},
|
||||
},
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
this.loadData();
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
//this.init()
|
||||
|
||||
window.onresize = () => {
|
||||
this.col.resize()
|
||||
this.line.resize()
|
||||
}
|
||||
|
||||
},
|
||||
destroyed() {
|
||||
window.onresize = null
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.statistics {
|
||||
display: flex;
|
||||
|
||||
margin-top: 20px;
|
||||
|
||||
&-title {
|
||||
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
&-content {
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
|
||||
&-top {
|
||||
|
||||
&__num {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-size: 10px;
|
||||
color: rgb(140, 140, 140);
|
||||
}
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&-left {
|
||||
|
||||
&__num {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-size: 10px;
|
||||
color: rgb(140, 140, 140);
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
|
||||
&__num {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-size: 10px;
|
||||
color: rgb(140, 140, 140);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>div {
|
||||
flex: 1;
|
||||
margin-right: 20px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
display: flex;
|
||||
|
||||
margin-top: 20px;
|
||||
|
||||
|
||||
.chartItem {
|
||||
|
||||
width: 49%;
|
||||
|
||||
.chartItemTitle {
|
||||
font-size: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#col-chart {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
flex: 1;
|
||||
margin-right: 20px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
min-height: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#line-chart {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
min-height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async loadData() {
|
||||
await getChartsHome().then((res) => {
|
||||
console.log(res);
|
||||
this.list = res.list;
|
||||
this.chartData = res;
|
||||
let _business_data = [];
|
||||
let _collect_data = [];
|
||||
res.business_data.map(item => {
|
||||
_business_data.push(item.server_money_total)
|
||||
_collect_data.push(item.collect_money)
|
||||
})
|
||||
this.business_data = _business_data;
|
||||
this.collect_data = _collect_data;
|
||||
let _customerArr = [];
|
||||
let _orderArr = [];
|
||||
|
||||
res.order_data.map(item => {
|
||||
_customerArr.push(item.active_customer)
|
||||
_orderArr.push(item.order_total)
|
||||
})
|
||||
this.customerArr = _customerArr;
|
||||
this.orderArr = _orderArr;
|
||||
}).catch()
|
||||
},
|
||||
init() {
|
||||
this.col = echarts.init(document.getElementById('col-chart'))
|
||||
this.col.setOption({
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
position: 'bottom'
|
||||
},
|
||||
legend: {},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
boundaryGap: [0, 0.01]
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['第一周', '第二周', '第三周', '第四周']
|
||||
},
|
||||
series: [{
|
||||
name: '服务金额',
|
||||
type: 'bar',
|
||||
data: this.business_data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgb(42,182,252)'
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '收款',
|
||||
type: 'bar',
|
||||
data: this.collect_data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgb(34,228,255)'
|
||||
},
|
||||
},
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
this.line = echarts.init(document.getElementById('line-chart'))
|
||||
this.line.setOption({
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['活跃客户', '服务订单']
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '6%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {
|
||||
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['第一周', '第二周', '第三周', '第四周']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [{
|
||||
name: '活跃客户',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: this.customerArr,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgb(42,182,252)'
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '服务订单',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: this.orderArr,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgb(34,228,255)'
|
||||
},
|
||||
},
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
this.loadData();
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
//this.init()
|
||||
|
||||
window.onresize = () => {
|
||||
this.col.resize()
|
||||
this.line.resize()
|
||||
}
|
||||
|
||||
},
|
||||
destroyed() {
|
||||
window.onresize = null
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.statistics {
|
||||
display: flex;
|
||||
|
||||
margin-top: 20px;
|
||||
|
||||
&-title {
|
||||
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
&-content {
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
|
||||
&-top {
|
||||
|
||||
&__num {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-size: 10px;
|
||||
color: rgb(140, 140, 140);
|
||||
}
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&-left {
|
||||
|
||||
&__num {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-size: 10px;
|
||||
color: rgb(140, 140, 140);
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
|
||||
&__num {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-size: 10px;
|
||||
color: rgb(140, 140, 140);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>div {
|
||||
flex: 1;
|
||||
margin-right: 20px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
display: flex;
|
||||
|
||||
margin-top: 20px;
|
||||
|
||||
|
||||
.chartItem {
|
||||
|
||||
width: 49%;
|
||||
|
||||
.chartItemTitle {
|
||||
font-size: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#col-chart {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
flex: 1;
|
||||
margin-right: 20px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
min-height: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#line-chart {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
min-height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<div>
|
||||
<div ref="lxHeader">
|
||||
<lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="通知">
|
||||
<div slot="content"></div>
|
||||
<slot>
|
||||
<div>
|
||||
<Input v-model="select.keyword" placeholder="关键字搜索" style="width: 200px; margin-right: 10px"/>
|
||||
<Button style="margin-left: 10px" type="primary" @click="select.page = 1,getList()">查询</Button>
|
||||
<Button style="margin-left: 10px" type="primary" @click="$refs['addnotice'].type = 'add',$refs['addnotice'].isShow = true">新建</Button>
|
||||
</div>
|
||||
</slot>
|
||||
</lx-header>
|
||||
</div>
|
||||
|
||||
<xy-table
|
||||
:total="total"
|
||||
:list="list"
|
||||
:table-item="table"
|
||||
@editor="editor"
|
||||
@delete="destroy"></xy-table>
|
||||
|
||||
<add ref="addnotice" @refresh="getList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getList,destroy} from '@/api/notice'
|
||||
import {parseTime} from "@/utils"
|
||||
|
||||
import add from "./component/addnotice"
|
||||
|
||||
export default {
|
||||
components:{
|
||||
add
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
select:{
|
||||
page:1,
|
||||
page_size:10,
|
||||
keyword:''
|
||||
},
|
||||
types:[],
|
||||
|
||||
total:0,
|
||||
list:[],
|
||||
table:[
|
||||
{
|
||||
prop:'title',
|
||||
label:'标题',
|
||||
minWidth:200,
|
||||
align:'left'
|
||||
},
|
||||
{
|
||||
prop:'content',
|
||||
label:'内容',
|
||||
minWidth: 300,
|
||||
align:'left'
|
||||
},
|
||||
{
|
||||
prop:'created_at',
|
||||
label:'创建信息',
|
||||
width: 200,
|
||||
formatter:(cell,data,value)=>{
|
||||
return parseTime(value,'{y}-{m}-{d}')
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
async getList(){
|
||||
const res = await getList(this.select)
|
||||
this.total = res.total
|
||||
this.list = res.data
|
||||
console.log(this.list)
|
||||
},
|
||||
|
||||
editor(row){
|
||||
this.$refs['addnotice'].type = 'editor'
|
||||
this.$refs['addnotice'].id = row.id
|
||||
this.$refs['addnotice'].isShow = true
|
||||
},
|
||||
destroy(row){
|
||||
destroy(row.id).then(res => {
|
||||
this.$successMessage('destroy','通知')
|
||||
this.getList()
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
Loading…
Reference in new issue