master
parent
86b274004a
commit
1d97eff3e5
@ -1,461 +1,533 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<!-- <div class="statistics">
|
||||
<div style="display: flex;justify-content: flex-end;margin-bottom: 10px;">
|
||||
<el-date-picker v-model="dateMonth" value-format="yyyy-MM" type="month" @change="loadData" placeholder="选择月份">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<panel-group :totaldata="list" />
|
||||
</div> -->
|
||||
<div>
|
||||
<div ref="lxHeader">
|
||||
<LxHeader icon="md-apps" text="待处理订单" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
|
||||
<div slot="content"></div>
|
||||
|
||||
</LxHeader>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<xy-table
|
||||
:table-item="table"
|
||||
:list="data"
|
||||
:total="total"
|
||||
@pageSizeChange="e => {select.rows = e;select.page = 1;getList()}"
|
||||
@pageIndexChange="e => {select.page = e;getList()}">
|
||||
<template v-slot:btns><div></div></template>
|
||||
</xy-table>
|
||||
|
||||
<!-- <div class="chart">-->
|
||||
<!-- <div style="display: flex;justify-content: flex-end;margin-bottom: 10px;">-->
|
||||
<!-- <el-date-picker v-model="year" value-format="yyyy" type="year" @change="getCharData" placeholder="选择年份">-->
|
||||
<!-- </el-date-picker>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div>-->
|
||||
|
||||
<!-- <el-row :gutter="16">-->
|
||||
<!-- <el-col :xs="12" :sm="12" :lg="8">-->
|
||||
<!-- <div class="chart-wrapper">-->
|
||||
<!-- <div class="chart-title">-->
|
||||
<!-- <router-link to="/toolbox/exception">人员借阅统计</router-link>-->
|
||||
<!-- </div>-->
|
||||
<!-- <ybar-chart :chartData="lineUserData" />-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col :xs="12" :sm="12" :lg="8">-->
|
||||
<!-- <div class="chart-wrapper">-->
|
||||
<!-- <div class="chart-title">-->
|
||||
<!-- <router-link to="/toolbox/exception">部门借阅统计</router-link>-->
|
||||
<!-- </div>-->
|
||||
<!-- <ybar-chart :chartData="lineDeptData" />-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col :xs="12" :sm="12" :lg="8">-->
|
||||
<!-- <div class="chart-wrapper">-->
|
||||
<!-- <div class="chart-title">-->
|
||||
<!-- <router-link to="/toolbox/exception">书籍借阅统计</router-link>-->
|
||||
<!-- </div>-->
|
||||
<!-- <ybar-chart :chartData="lineBookData" />-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- </el-row>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
|
||||
<!-- <el-row :gutter="16" style="margin-top: 20px;">-->
|
||||
|
||||
<!-- <el-col :xs="12" :sm="12" :lg="8">-->
|
||||
<!-- <div class="chart-wrapper">-->
|
||||
<!-- <div class="chart-title">-->
|
||||
<!-- <router-link to="/toolbox/exception">类目借阅统计</router-link>-->
|
||||
<!-- </div>-->
|
||||
<!-- <ybar-chart :chartData="lineTypeData" />-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col :xs="16" :sm="16" :lg="16">-->
|
||||
<!-- <div class="chart-wrapper">-->
|
||||
<!-- <div class="chart-title">-->
|
||||
<!-- <router-link to="/toolbox/exception">月度借阅趋势</router-link>-->
|
||||
<!-- </div>-->
|
||||
<!-- <line-chart :chartData="lineArr" />-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- </el-row>-->
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from "echarts"
|
||||
import PanelGroup from './components/PanelGroup'
|
||||
import LineChart from './components/LineChart.vue'
|
||||
import YbarChart from './components/YbarChart.vue'
|
||||
import {
|
||||
getChartsData,
|
||||
getCounts
|
||||
} from "../../api/dashboard.js"
|
||||
import LxHeader from '@/components/LxHeader/index.vue'
|
||||
import {getList} from '@/api/order'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PanelGroup,
|
||||
LineChart,
|
||||
YbarChart,
|
||||
LxHeader
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
select:{
|
||||
page:1,
|
||||
rows:10,
|
||||
show_history:0,
|
||||
state:'assigned',
|
||||
keyword:'',
|
||||
not_state:["pending"],
|
||||
sort_name:"updated_at",
|
||||
sort_type:"desc"
|
||||
},
|
||||
total:0,
|
||||
data:[],
|
||||
table:[
|
||||
{
|
||||
label:'订单名称',
|
||||
sortable:false,
|
||||
prop:'order.order_name',
|
||||
width:180,
|
||||
align:'left'
|
||||
},
|
||||
{
|
||||
label:'客户姓名',
|
||||
sortable:false,
|
||||
prop:'member_name',
|
||||
width:140
|
||||
},
|
||||
{
|
||||
label:'客户电话',
|
||||
sortable:false,
|
||||
prop:'member_phone',
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
label:'区域',
|
||||
sortable:false,
|
||||
prop:'member.area',
|
||||
width: 160
|
||||
},
|
||||
{
|
||||
label:'预产期',
|
||||
sortable:false,
|
||||
prop:'member_due_date',
|
||||
width: 160
|
||||
},
|
||||
{
|
||||
label:'产品类型',
|
||||
sortable:false,
|
||||
prop:'product_type.name',
|
||||
width: 140
|
||||
},
|
||||
{
|
||||
prop:'order.serial',
|
||||
label:'订单编号',
|
||||
width:180,
|
||||
sortable:false,
|
||||
},
|
||||
{
|
||||
prop:'order.created_at',
|
||||
label:'订单创建时间',
|
||||
// width:180,
|
||||
sortable:false,
|
||||
},
|
||||
{
|
||||
label:'状态',
|
||||
sortable:false,
|
||||
prop:'state_name',
|
||||
width:120
|
||||
}],
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
dateMonth: "",
|
||||
year: "",
|
||||
col: '',
|
||||
line: '',
|
||||
business_data: [],
|
||||
collect_data: [],
|
||||
list: {},
|
||||
customerArr: [],
|
||||
orderArr: [],
|
||||
chartData: {},
|
||||
lineTypeData: {
|
||||
xArr: [],
|
||||
yArr: []
|
||||
},
|
||||
lineUserData: {
|
||||
xArr: [],
|
||||
yArr: []
|
||||
},
|
||||
lineDeptData: {
|
||||
xArr: [],
|
||||
yArr: []
|
||||
},
|
||||
lineBookData: {
|
||||
xArr: [],
|
||||
yArr: []
|
||||
},
|
||||
lineArr: {
|
||||
xArr: [],
|
||||
legendArr: ["借阅次数"],
|
||||
series: [{
|
||||
name: '借阅次数',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: []
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
methods: {
|
||||
async getList(){
|
||||
let res = await getList(this.select)
|
||||
console.log(res)
|
||||
this.data = res.data
|
||||
this.total = res.total
|
||||
},
|
||||
async loadData() {
|
||||
await getCounts({
|
||||
date: this.dateMonth
|
||||
}).then((res) => {
|
||||
this.list = res;
|
||||
}).catch(error => {
|
||||
|
||||
});
|
||||
|
||||
},
|
||||
async getCharData() {
|
||||
|
||||
await getChartsData({
|
||||
year: this.year
|
||||
}).then((res) => {
|
||||
|
||||
var xArrMonth = [];
|
||||
var yArrData = [];
|
||||
for (var i = 1; i <= 12; i++) {
|
||||
xArrMonth.push(i + "月");
|
||||
let d = res.month.filter(function(item) {
|
||||
return item.month == i;
|
||||
})
|
||||
if (d.length > 0)
|
||||
yArrData.push(d[0].total);
|
||||
else
|
||||
yArrData.push(0);
|
||||
}
|
||||
this.lineArr.xArr = xArrMonth;
|
||||
|
||||
this.lineArr.series[0].data = yArrData;
|
||||
|
||||
|
||||
let xTypeArr = [];
|
||||
let yTypeArr = [];
|
||||
|
||||
|
||||
for (var mod of res.type) {
|
||||
xTypeArr.push(mod.total)
|
||||
yTypeArr.push(mod.type.name)
|
||||
}
|
||||
this.lineTypeData = {
|
||||
xArr: xTypeArr,
|
||||
yArr: yTypeArr
|
||||
}
|
||||
|
||||
|
||||
|
||||
xTypeArr = [];
|
||||
yTypeArr = [];
|
||||
|
||||
|
||||
for (var mod of res.person) {
|
||||
xTypeArr.push(mod.total)
|
||||
yTypeArr.push(mod.user?.name)
|
||||
}
|
||||
this.lineUserData = {
|
||||
xArr: xTypeArr,
|
||||
yArr: yTypeArr
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
xTypeArr = [];
|
||||
yTypeArr = [];
|
||||
|
||||
|
||||
for (var mod of res.book) {
|
||||
xTypeArr.push(mod.total)
|
||||
yTypeArr.push(mod.book?.name)
|
||||
}
|
||||
this.lineBookData = {
|
||||
xArr: xTypeArr,
|
||||
yArr: yTypeArr
|
||||
}
|
||||
|
||||
|
||||
xTypeArr = [];
|
||||
yTypeArr = [];
|
||||
|
||||
|
||||
for (var mod of res.department) {
|
||||
xTypeArr.push(mod.total)
|
||||
yTypeArr.push(mod.department?.name)
|
||||
}
|
||||
this.lineDeptData = {
|
||||
xArr: xTypeArr,
|
||||
yArr: yTypeArr
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}).catch(error => {
|
||||
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
this.dateMonth = this.$moment().format("YYYY-MM");
|
||||
this.year = this.$moment().format("YYYY");
|
||||
//this.loadData();
|
||||
//this.getCharData();
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
|
||||
},
|
||||
destroyed() {
|
||||
//window.onresize = null
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.statistics {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
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;
|
||||
flex-direction: column;
|
||||
|
||||
.chartBox {
|
||||
display: flex;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<!-- <div class="statistics">
|
||||
<div style="display: flex;justify-content: flex-end;margin-bottom: 10px;">
|
||||
<el-date-picker v-model="dateMonth" value-format="yyyy-MM" type="month" @change="loadData" placeholder="选择月份">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
<panel-group :totaldata="list" />
|
||||
</div> -->
|
||||
<div>
|
||||
<div ref="lxHeader">
|
||||
<LxHeader icon="md-apps" text="待处理订单" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
|
||||
<div slot="content"></div>
|
||||
|
||||
</LxHeader>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<xy-table :table-item="table" :list="data" :total="total"
|
||||
@pageSizeChange="e => {select.rows = e;select.page = 1;getList()}"
|
||||
@pageIndexChange="e => {select.page = e;getList()}">
|
||||
<template v-slot:btns>
|
||||
<div></div>
|
||||
</template>
|
||||
</xy-table>
|
||||
|
||||
|
||||
<div>
|
||||
<div ref="lxHeader">
|
||||
<LxHeader icon="md-apps" text="财务中心" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
|
||||
<div slot="content"></div>
|
||||
|
||||
</LxHeader>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<xy-table :table-item="fintable" :list="findata" :total="fintotal"
|
||||
@pageSizeChange="e => {finselect.rows = e;finselect.page = 1;getFinList()}"
|
||||
@pageIndexChange="e => {finselect.page = e;getFinList()}">
|
||||
<template v-slot:btns>
|
||||
<div></div>
|
||||
</template>
|
||||
</xy-table>
|
||||
|
||||
<!-- <div class="chart">-->
|
||||
<!-- <div style="display: flex;justify-content: flex-end;margin-bottom: 10px;">-->
|
||||
<!-- <el-date-picker v-model="year" value-format="yyyy" type="year" @change="getCharData" placeholder="选择年份">-->
|
||||
<!-- </el-date-picker>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div>-->
|
||||
|
||||
<!-- <el-row :gutter="16">-->
|
||||
<!-- <el-col :xs="12" :sm="12" :lg="8">-->
|
||||
<!-- <div class="chart-wrapper">-->
|
||||
<!-- <div class="chart-title">-->
|
||||
<!-- <router-link to="/toolbox/exception">人员借阅统计</router-link>-->
|
||||
<!-- </div>-->
|
||||
<!-- <ybar-chart :chartData="lineUserData" />-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col :xs="12" :sm="12" :lg="8">-->
|
||||
<!-- <div class="chart-wrapper">-->
|
||||
<!-- <div class="chart-title">-->
|
||||
<!-- <router-link to="/toolbox/exception">部门借阅统计</router-link>-->
|
||||
<!-- </div>-->
|
||||
<!-- <ybar-chart :chartData="lineDeptData" />-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col :xs="12" :sm="12" :lg="8">-->
|
||||
<!-- <div class="chart-wrapper">-->
|
||||
<!-- <div class="chart-title">-->
|
||||
<!-- <router-link to="/toolbox/exception">书籍借阅统计</router-link>-->
|
||||
<!-- </div>-->
|
||||
<!-- <ybar-chart :chartData="lineBookData" />-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- </el-row>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
|
||||
<!-- <el-row :gutter="16" style="margin-top: 20px;">-->
|
||||
|
||||
<!-- <el-col :xs="12" :sm="12" :lg="8">-->
|
||||
<!-- <div class="chart-wrapper">-->
|
||||
<!-- <div class="chart-title">-->
|
||||
<!-- <router-link to="/toolbox/exception">类目借阅统计</router-link>-->
|
||||
<!-- </div>-->
|
||||
<!-- <ybar-chart :chartData="lineTypeData" />-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col :xs="16" :sm="16" :lg="16">-->
|
||||
<!-- <div class="chart-wrapper">-->
|
||||
<!-- <div class="chart-title">-->
|
||||
<!-- <router-link to="/toolbox/exception">月度借阅趋势</router-link>-->
|
||||
<!-- </div>-->
|
||||
<!-- <line-chart :chartData="lineArr" />-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- </el-row>-->
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from "echarts"
|
||||
import PanelGroup from './components/PanelGroup'
|
||||
import LineChart from './components/LineChart.vue'
|
||||
import YbarChart from './components/YbarChart.vue'
|
||||
import {
|
||||
getChartsData,
|
||||
getCounts
|
||||
} from "../../api/dashboard.js"
|
||||
import LxHeader from '@/components/LxHeader/index.vue'
|
||||
import {
|
||||
getList
|
||||
} from '@/api/order'
|
||||
import {
|
||||
getList as getfinlist
|
||||
} from '@/api/finance'
|
||||
export default {
|
||||
components: {
|
||||
PanelGroup,
|
||||
LineChart,
|
||||
YbarChart,
|
||||
LxHeader
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
select: {
|
||||
page: 1,
|
||||
rows: 10,
|
||||
show_history: 0,
|
||||
state: 'assigned',
|
||||
keyword: '',
|
||||
not_state: ["pending"],
|
||||
sort_name: "updated_at",
|
||||
sort_type: "desc"
|
||||
},
|
||||
finselect: {
|
||||
page: 1,
|
||||
rows: 10,
|
||||
},
|
||||
fintotal: 0,
|
||||
findata: [],
|
||||
fintable: [{
|
||||
label: '产生时间',
|
||||
prop: 'created_at_formatted',
|
||||
width: 200,
|
||||
sortable: false
|
||||
},
|
||||
{
|
||||
label: '金额',
|
||||
align: 'right',
|
||||
prop: 'money',
|
||||
width: 160,
|
||||
sortable: false
|
||||
},
|
||||
{
|
||||
label: '余额',
|
||||
prop: 'balance',
|
||||
align: 'right',
|
||||
width: 160,
|
||||
sortable: false
|
||||
},
|
||||
{
|
||||
label: '类型',
|
||||
prop: 'type_name',
|
||||
width: 160,
|
||||
sortable: false
|
||||
},
|
||||
{
|
||||
label: '相关类型',
|
||||
prop: 'related_type_name',
|
||||
width: 160,
|
||||
sortable: false
|
||||
},
|
||||
// {
|
||||
// label:'相关流水号',
|
||||
// prop:'related_id',
|
||||
// sortable:false
|
||||
// },
|
||||
{
|
||||
label: '订单编号',
|
||||
prop: 'order.serial',
|
||||
sortable: false
|
||||
}
|
||||
],
|
||||
total: 0,
|
||||
data: [],
|
||||
table: [{
|
||||
label: '订单名称',
|
||||
sortable: false,
|
||||
prop: 'order.order_name',
|
||||
width: 180,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
label: '客户姓名',
|
||||
sortable: false,
|
||||
prop: 'member_name',
|
||||
width: 140
|
||||
},
|
||||
{
|
||||
label: '客户电话',
|
||||
sortable: false,
|
||||
prop: 'member_phone',
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
label: '区域',
|
||||
sortable: false,
|
||||
prop: 'member.area',
|
||||
width: 160
|
||||
},
|
||||
{
|
||||
label: '预产期',
|
||||
sortable: false,
|
||||
prop: 'member_due_date',
|
||||
width: 160
|
||||
},
|
||||
{
|
||||
label: '产品类型',
|
||||
sortable: false,
|
||||
prop: 'product_type.name',
|
||||
width: 140
|
||||
},
|
||||
{
|
||||
prop: 'order.serial',
|
||||
label: '订单编号',
|
||||
width: 180,
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
prop: 'order.created_at',
|
||||
label: '订单创建时间',
|
||||
// width:180,
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
label: '状态',
|
||||
sortable: false,
|
||||
prop: 'state_name',
|
||||
width: 120
|
||||
}
|
||||
],
|
||||
dateMonth: "",
|
||||
year: "",
|
||||
col: '',
|
||||
line: '',
|
||||
business_data: [],
|
||||
collect_data: [],
|
||||
list: {},
|
||||
customerArr: [],
|
||||
orderArr: [],
|
||||
chartData: {},
|
||||
lineTypeData: {
|
||||
xArr: [],
|
||||
yArr: []
|
||||
},
|
||||
lineUserData: {
|
||||
xArr: [],
|
||||
yArr: []
|
||||
},
|
||||
lineDeptData: {
|
||||
xArr: [],
|
||||
yArr: []
|
||||
},
|
||||
lineBookData: {
|
||||
xArr: [],
|
||||
yArr: []
|
||||
},
|
||||
lineArr: {
|
||||
xArr: [],
|
||||
legendArr: ["借阅次数"],
|
||||
series: [{
|
||||
name: '借阅次数',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: []
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
methods: {
|
||||
async getList() {
|
||||
let res = await getList(this.select)
|
||||
console.log(res)
|
||||
this.data = res.data
|
||||
this.total = res.total
|
||||
},
|
||||
async getFinList() {
|
||||
let res = await getfinlist(this.finselect)
|
||||
console.log(res)
|
||||
this.findata = res.data
|
||||
this.fintotal = res.total
|
||||
},
|
||||
async loadData() {
|
||||
await getCounts({
|
||||
date: this.dateMonth
|
||||
}).then((res) => {
|
||||
this.list = res;
|
||||
}).catch(error => {
|
||||
|
||||
});
|
||||
|
||||
},
|
||||
async getCharData() {
|
||||
|
||||
await getChartsData({
|
||||
year: this.year
|
||||
}).then((res) => {
|
||||
|
||||
var xArrMonth = [];
|
||||
var yArrData = [];
|
||||
for (var i = 1; i <= 12; i++) {
|
||||
xArrMonth.push(i + "月");
|
||||
let d = res.month.filter(function(item) {
|
||||
return item.month == i;
|
||||
})
|
||||
if (d.length > 0)
|
||||
yArrData.push(d[0].total);
|
||||
else
|
||||
yArrData.push(0);
|
||||
}
|
||||
this.lineArr.xArr = xArrMonth;
|
||||
|
||||
this.lineArr.series[0].data = yArrData;
|
||||
|
||||
|
||||
let xTypeArr = [];
|
||||
let yTypeArr = [];
|
||||
|
||||
|
||||
for (var mod of res.type) {
|
||||
xTypeArr.push(mod.total)
|
||||
yTypeArr.push(mod.type.name)
|
||||
}
|
||||
this.lineTypeData = {
|
||||
xArr: xTypeArr,
|
||||
yArr: yTypeArr
|
||||
}
|
||||
|
||||
|
||||
|
||||
xTypeArr = [];
|
||||
yTypeArr = [];
|
||||
|
||||
|
||||
for (var mod of res.person) {
|
||||
xTypeArr.push(mod.total)
|
||||
yTypeArr.push(mod.user?.name)
|
||||
}
|
||||
this.lineUserData = {
|
||||
xArr: xTypeArr,
|
||||
yArr: yTypeArr
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
xTypeArr = [];
|
||||
yTypeArr = [];
|
||||
|
||||
|
||||
for (var mod of res.book) {
|
||||
xTypeArr.push(mod.total)
|
||||
yTypeArr.push(mod.book?.name)
|
||||
}
|
||||
this.lineBookData = {
|
||||
xArr: xTypeArr,
|
||||
yArr: yTypeArr
|
||||
}
|
||||
|
||||
|
||||
xTypeArr = [];
|
||||
yTypeArr = [];
|
||||
|
||||
|
||||
for (var mod of res.department) {
|
||||
xTypeArr.push(mod.total)
|
||||
yTypeArr.push(mod.department?.name)
|
||||
}
|
||||
this.lineDeptData = {
|
||||
xArr: xTypeArr,
|
||||
yArr: yTypeArr
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}).catch(error => {
|
||||
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
this.dateMonth = this.$moment().format("YYYY-MM");
|
||||
this.year = this.$moment().format("YYYY");
|
||||
//this.loadData();
|
||||
//this.getCharData();
|
||||
this.getList()
|
||||
this.getFinList()
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
destroyed() {
|
||||
//window.onresize = null
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.statistics {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
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;
|
||||
flex-direction: column;
|
||||
|
||||
.chartBox {
|
||||
display: flex;
|
||||
|
||||
.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>
|
||||
|
||||
Loading…
Reference in new issue