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