master
parent
c7d667110b
commit
e5d1364701
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1,55 @@
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
$_sidebarElm: null,
|
||||
$_resizeHandler: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$_resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
this.$_initResizeEvent()
|
||||
this.$_initSidebarResizeEvent()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$_destroyResizeEvent()
|
||||
this.$_destroySidebarResizeEvent()
|
||||
},
|
||||
// to fixed bug when cached by keep-alive
|
||||
// https://github.com/PanJiaChen/vue-element-admin/issues/2116
|
||||
activated() {
|
||||
this.$_initResizeEvent()
|
||||
this.$_initSidebarResizeEvent()
|
||||
},
|
||||
deactivated() {
|
||||
this.$_destroyResizeEvent()
|
||||
this.$_destroySidebarResizeEvent()
|
||||
},
|
||||
methods: {
|
||||
// use $_ for mixins properties
|
||||
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
|
||||
$_initResizeEvent() {
|
||||
window.addEventListener('resize', this.$_resizeHandler)
|
||||
},
|
||||
$_destroyResizeEvent() {
|
||||
window.removeEventListener('resize', this.$_resizeHandler)
|
||||
},
|
||||
$_sidebarResizeHandler(e) {
|
||||
if (e.propertyName === 'width') {
|
||||
this.$_resizeHandler()
|
||||
}
|
||||
},
|
||||
$_initSidebarResizeEvent() {
|
||||
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
|
||||
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
},
|
||||
$_destroySidebarResizeEvent() {
|
||||
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,298 +1,335 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<div class="statistics">
|
||||
<panel-group :totaldata="list" />
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from "echarts"
|
||||
import PanelGroup from './components/PanelGroup'
|
||||
import {
|
||||
getChartsHome
|
||||
} from "@/api/dashboard"
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
<template>
|
||||
<div class="mainHeight" :style="{height:mainHeight+'px'}">
|
||||
<div class="mainHeight-top">
|
||||
<div class="mainHeight-title">
|
||||
<img src="../../assets/home-circle.png" alt="">
|
||||
一把手”及领导干部统计数据
|
||||
<img src="../../assets/home-circle.png" alt="">
|
||||
</div>
|
||||
<div class="mainHeight-content">
|
||||
<div class="mainHeight-panel">
|
||||
<div v-for="item in panelList" class="mainHeight-panel-item">
|
||||
<div style="width:70%">
|
||||
<div class="mainHeight-panel-item-name">{{item.name}}</div>
|
||||
<div class="mainHeight-panel-item-count">{{item.count}}</div>
|
||||
</div>
|
||||
<div style="width:30%">
|
||||
<img class="mainHeight-panel-item-icon" :src="item.icon" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mainHeight-chart">
|
||||
<div>
|
||||
<div class="mainHeight-chart-title">
|
||||
<div>
|
||||
<img src="../../assets/home-icon6.png" alt="">
|
||||
月度填报数
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<span></span>正常填报数
|
||||
</div>
|
||||
<div>
|
||||
<span style="background-color: #de454c;"></span>逾期填报数
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<myecharts :width="'100%'" :height="'100%'" :data="month_record_data"></myecharts>
|
||||
</div>
|
||||
<div>
|
||||
<div class="mainHeight-chart-title">
|
||||
<div>
|
||||
<img src="../../assets/home-icon7.png" alt="">
|
||||
月度填报率
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<span></span>正常填报数
|
||||
</div>
|
||||
<div>
|
||||
<span style="background-color: #de454c;"></span>逾期填报数
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<myecharts :width="'100%'" :height="'100%'" :data="month_record_data"></myecharts>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mainHeight-bottom">
|
||||
<div class="mainHeight-title">
|
||||
<img src="../../assets/home-circle.png" alt="">
|
||||
“1+7”清单填报统计数据
|
||||
<img src="../../assets/home-circle.png" alt="">
|
||||
</div>
|
||||
<div class="mainHeight-content">
|
||||
<div class="mainHeight-chart" style="height: 100%;padding-top: 20px;">
|
||||
<div>
|
||||
<div class="mainHeight-chart-title">
|
||||
<div>
|
||||
<img src="../../assets/home-icon6.png" alt="">
|
||||
月度填报数
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<span></span>正常填报数
|
||||
</div>
|
||||
<div>
|
||||
<span style="background-color: #de454c;"></span>逾期填报数
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<myecharts :width="'100%'" :height="'calc(100% - 40px)'" :data="month_record_data"></myecharts>
|
||||
</div>
|
||||
<div>
|
||||
<div class="mainHeight-chart-title">
|
||||
<div>
|
||||
<img src="../../assets/home-icon8.png" alt="">
|
||||
分类填报数
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<span></span>正常填报数
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<myecharts :width="'100%'" :height="'calc(100% - 40px)'" :data="type_record_data"></myecharts>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import myecharts from '@/components/myecharts';
|
||||
import {
|
||||
getChartsHome
|
||||
} from "@/api/dashboard"
|
||||
|
||||
export default {
|
||||
components: {
|
||||
myecharts
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mainHeight: 0,
|
||||
panelList: [{
|
||||
name: '“一把手”及领导干部',
|
||||
count: 345,
|
||||
icon: require('@/assets/home-icon1.png')
|
||||
}, {
|
||||
name: '相关单位',
|
||||
count: 45,
|
||||
icon: require('@/assets/home-icon2.png')
|
||||
}, {
|
||||
name: '清单项',
|
||||
count: 245,
|
||||
icon: require('@/assets/home-icon3.png')
|
||||
}, {
|
||||
name: '清单类型',
|
||||
count: 10,
|
||||
icon: require('@/assets/home-icon4.png')
|
||||
}, {
|
||||
name: '填报数量',
|
||||
count: 10423,
|
||||
icon: require('@/assets/home-icon5.png')
|
||||
}],
|
||||
|
||||
month_record_data: {
|
||||
xShow: true,
|
||||
yShow: true,
|
||||
rotate: 30,
|
||||
x: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
|
||||
list: [{
|
||||
name: "正常填报数",
|
||||
data: [10, 3, 15, 23, 10, 12, 1, 45, 11, 9, 3, 34],
|
||||
type: 'bar',
|
||||
unit: "",
|
||||
barGap: '0',
|
||||
color1: '#fbd5be',
|
||||
color2: '#ecc392',
|
||||
Linear: [0, 1, 0, 0]
|
||||
}, {
|
||||
name: "预期填报数",
|
||||
data: [1, 13, 5, 3, 1, 2, 12, 5, 1, 19, 13, 3],
|
||||
type: 'bar',
|
||||
unit: "",
|
||||
barGap: '0',
|
||||
color1: '#f0696b',
|
||||
color2: '#d22a36',
|
||||
Linear: [0, 1, 0, 0]
|
||||
}]
|
||||
},
|
||||
type_record_data: {
|
||||
xShow: true,
|
||||
yShow: true,
|
||||
yType: 'category',
|
||||
xType: 'value',
|
||||
gBottom: '15',
|
||||
xPosition: 'bottom',
|
||||
yData: ['类型一', '类型二', '类型三', '类型四', '类型五', '类型六'],
|
||||
list: [{
|
||||
name: "正常填报数",
|
||||
data: [10, 3, 15, 23, 10, 12],
|
||||
type: 'bar',
|
||||
unit: "",
|
||||
barGap: '0',
|
||||
color1: '#fbd5be',
|
||||
color2: '#ecc392',
|
||||
Linear: [0, 0, 1, 0]
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
initHeight() {
|
||||
let clientHeight = document.documentElement.clientHeight;
|
||||
let topHeight = 50; //页面 头部
|
||||
this.mainHeight = clientHeight - topHeight - 40;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.initHeight()
|
||||
//this.loadData();
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
//this.init()
|
||||
|
||||
// window.onresize = () => {
|
||||
// this.col.resize()
|
||||
// this.line.resize()
|
||||
// }
|
||||
|
||||
},
|
||||
destroyed() {
|
||||
window.onresize = null
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mainHeight {
|
||||
background: #f9fafa;
|
||||
margin-top: 20px;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 0 10px rgba(148, 147, 147, .27);
|
||||
|
||||
&-top {
|
||||
margin-bottom: 20px;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
height: calc(40% - 20px)
|
||||
}
|
||||
|
||||
&-title {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: linear-gradient(to right, #d12935 5%, #f0696b);
|
||||
border-radius: 10px 10px 0 0;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
width: 25px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
background-color: #fff;
|
||||
border-radius: 0 0 10px 10px;
|
||||
border: 1px solid #dde5f0;
|
||||
border-top: none;
|
||||
height: calc(100% - 40px)
|
||||
}
|
||||
|
||||
&-panel {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20px 10px;
|
||||
|
||||
&-item {
|
||||
background: linear-gradient(to right, #facebd 60%, #ebae8f);
|
||||
box-shadow: 0 0 10px rgba(148, 147, 147, .27);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
width: 20%;
|
||||
margin: 0 10px;
|
||||
align-items: center;
|
||||
color: #68372f;
|
||||
|
||||
&-name {}
|
||||
|
||||
&-count {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-chart {
|
||||
padding: 0 20px;
|
||||
height: calc(65% - 20px);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&>div {
|
||||
width: 48%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
&>div {
|
||||
&:first-child {
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
background-color: #f0c99f;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 5px;
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in new issue