xiaoy
/
hjjc-workbench-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

up

Browse Source
master
刘翔宇-旅管家 3 years ago
parent 7979506474
commit 99292a8453
6 changed files with 511 additions and 16 deletions
Show Stats Download Patch File Download Diff File

16
src/components/LxHeader/index.vue
Unescape View File

@ -29,13 +29,23 @@
text: {
type: String,
default: "未定义名称"
}
},
custom:{
type: Boolean,
default: false
},
},
computed: {
title() {
title() {
if(this.custom){
return this.text;
}else
return this.$route.meta.title;
},
iconImg() {
iconImg() {
if(this.custom){
return this.icon;
}else
return this.$route.meta.icon;
}

149
src/views/dashboard/components/BarChart.vue
Unescape View File

@ -0,0 +1,149 @@
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
const animationDuration = 6000
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '500px'
},
chartData: {
type: Object
}
},
data() {
return {
chart: null
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
}
}
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons');
this.$nextTick(() => {
this.setOptions(this.chartData);
})
},
setOptions(chartdata) {
console.log(chartdata.xArr)
this.chart.setOption({
dataZoom: [
//给x轴设置滚动条
{
startValue: 0,
endValue: 6, // 显示条数
type: 'slider',
show: true,
xAxisIndex: [0],
handleSize: 0, //滑动条的 左右2个滑动条的大小
height: 8, //组件高度
left: 50, //左边的距离
right: 40, //右边的距离
bottom: 31, //右边的距离
handleColor: '#EFEFEF', //h滑动图标的颜色
handleStyle: {
borderColor: '#409EFF',
borderWidth: '1',
shadowBlur: 2,
background: '#EFEFEF',
shadowColor: '#EFEFEF'
},
fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
//给第一个设置0，第四个设置1，就是垂直渐变
offset: 0,
color: '#409EFF'
},
{
offset: 1,
color: '#409EFF'
}
]),
backgroundColor: '#EFEFEF', //两边未选中的滑动条区域的颜色
showDataShadow: false, //是否显示数据阴影 默认auto
showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
filterMode: 'filter'
}
//下面这个属性是里面拖到
// {
// type: 'inside',
// show: true,
// xAxisIndex: [0],
// start: 0, //默认为1
// end: 50,
// },
],
grid: {
top: 10,
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: chartdata.xArr,
axisTick: {
alignWithLabel: true
}
}],
yAxis: [{
type: 'value',
minInterval: 1,
axisTick: {
show: false
}
}],
series: [{
name: '数据',
type: 'bar',
stack: 'vistors',
barWidth: '60%',
data: chartdata.yArr,
animationDuration,
barMaxWidth: 20, // 每一个都要设置
}]
})
}
}
}
</script>

144
src/views/dashboard/components/LineChart.vue
Unescape View File

@ -0,0 +1,144 @@
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
const animationDuration = 6000
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '400px'
},
chartData: {
type: Object
}
},
data() {
return {
chart: null
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
}
}
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons');
this.setOptions(this.chartData);
},
setOptions(chartdata) {
console.log(chartdata.xArr)
this.chart.setOption({
dataZoom: [
//给x轴设置滚动条
// {
// startValue: 0,
// endValue: 6, // 显示条数
// type: 'slider',
// show: true,
// xAxisIndex: [0],
// // handleSize: 0, //滑动条的 左右2个滑动条的大小
// height: 8, //组件高度
// left: 50, //左边的距离
// right: 40, //右边的距离
// bottom: 26, //右边的距离
// handleColor: '#EFEFEF', //h滑动图标的颜色
// handleStyle: {
// borderColor: '#409EFF',
// borderWidth: '1',
// shadowBlur: 2,
// background: '#EFEFEF',
// shadowColor: '#EFEFEF'
// },
// fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
// //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
// //给第一个设置0，第四个设置1，就是垂直渐变
// offset: 0,
// color: '#409EFF'
// },
// {
// offset: 1,
// color: '#409EFF'
// }
// ]),
// backgroundColor: '#EFEFEF', //两边未选中的滑动条区域的颜色
// showDataShadow: false, //是否显示数据阴影 默认auto
// showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
// handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
// filterMode: 'filter'
// }
//下面这个属性是里面拖到
// {
// type: 'inside',
// show: true,
// xAxisIndex: [0],
// start: 0, //默认为1
// end: 50,
// },
],
legendArr:[],
legend: {
orient: 'horizontal',
bottom: '3%',
data:chartdata.legendArr
},
tooltip: {
trigger: 'axis'
},
backgroundColor:"#fff",
grid: {
top: '3%',
left: '2%',
right: '2%',
bottom: '12%',
containLabel: true
},
xAxis: [{
type: 'category',
axisLabel: {rotate: chartdata.rotate},
data: chartdata.xArr,
}],
yAxis: [{
type: 'value',
minInterval: 1,
}],
series: chartdata.series
})
}
}
}
</script>

102
src/views/dashboard/components/PieChart.vue
Unescape View File

@ -0,0 +1,102 @@
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
const animationDuration = 6000
export default {
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '300px'
},
chartData: {
type: Object
}
},
data() {
return {
chart: null
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
watch: {
chartData: {
deep: true,
handler(val) {
this.setOptions(val)
}
}
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons');
this.setOptions(this.chartData);
},
setOptions(chartdata) {
this.chart.setOption({
legend: {
orient: 'horizontal',
bottom: '4%',
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
}
,
series: [{
name: '数据',
type: 'pie',
radius: ['60%', '90%'],
center: ['50%', '50%'], //圆心坐标
avoidLabelOverlap: true, //是否启用防止标签重叠策略
label: { //每个数据的标签
show: true, //设置为true则显示第一个数据
position: 'center', //位置居中
formatter: '{d}%', //{d}表示数据在总数据中的百分比
fontSize: 20,
fontWeight: 'bold'
},
color: ['#695BF9', '#1E3E55'], //系列的颜色
emphasis: { //高亮，即鼠标经过时的样式
scale: false //表示不放大item
},
labelLine: {
show: true
},
center: ['50%', '45%'],
data: chartdata.yArr,
animationDuration
}]
})
}
}
}
</script>

55
src/views/dashboard/components/mixins/resize.js
Unescape View File

@ -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)
}
}
}

61
src/views/dashboard/index.vue
Unescape View File

@ -7,8 +7,9 @@
<el-button type="primary">统计设置</el-button>
</div>
<el-card class="box-card" style="margin: 20px 0;">
<el-row :gutter="20">
<el-col :span="16">
<el-card class="box-card" style="margin: 20px 0;">
<div slot="header" class="clearfix">
<span>预算总体进展情况</span>
<DatePicker :value="select.year" placeholder="选择所属年份" placement="bottom" style="width: 130px;float: right;"
@ -42,7 +43,7 @@
</el-card>
<div ref="lxHeader">
<LxHeader icon="md-apps" text="待办事项" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
<LxHeader icon="iconfont/icon--kucunguanli" text="待办事项" :custom="true" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
<div slot="content" />
<slot>
<div></div>
@ -73,12 +74,26 @@
<Page :total="total" show-elevator @on-change="pageChange" />
</div>
</div>
</el-col>
<el-col :span="8">
<el-card class="box-card" style="margin: 20px 0;">
<div class="text item">
<pie-chart :chartData="rptChartData"></pie-chart>
</div>
</el-card>
</el-col>
</el-row>
<div class="demo-split">
<Split v-model="split" style="height: 440px;">
<template #left>
<div class="demo-split-pane" style="padding-right: 5px;">
<div ref="lxHeader" v-if="statistic.departmentList">
<LxHeader icon="md-apps" text="科室进展情况" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
<LxHeader icon="iconfont/icon--kucunguanli" text="科室进展情况" :custom="true" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
<div slot="content" />
<slot>
<div style="width: 100%">
@ -102,7 +117,7 @@
<template #right>
<div class="demo-split-pane" style="padding-left: 10px;">
<div ref="lxHeader" v-if="statistic.typeList">
<LxHeader icon="md-apps" text="预算类型进展情况" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
<LxHeader icon="iconfont/icon--kucunguanli" text="预算类型进展情况" :custom="true" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
<div slot="content" />
<slot>
<div style="width: 100%">
@ -135,6 +150,7 @@
import detailContract from "@/views/contract/components/detailContract"
import LxHeader from '@/components/LxHeader/index.vue'
import Pagination from '@/components/Pagination'
import PieChart from "./components/PieChart.vue"
import {
adminDepartmentList
} from '../../api/system/department.js'
@ -159,12 +175,14 @@
components: {
LxHeader,
Pagination,
detailContract
detailContract,
PieChart
},
data() {
return {
value2: 12,
split: 0.5,
rptChartData: [],
select: {
year: ''
},
@ -191,9 +209,10 @@
departmentProgress: [],
departmentTable: [{
label: '科室',
width: 80,
minWidth: 180,
prop: 'plan_department.name',
sortable: false,
sortable: false,
align:"left",
fixed: "left"
},
{
@ -222,7 +241,7 @@
},
{
label: '年初预算合计金额(元)',
width: 160,
width: 260,
align: 'right',
sortable: false,
prop: 'money_total_1',
@ -232,7 +251,7 @@
},
{
label: '调整后预算合计金额(元)',
width: 160,
width: 260,
align: 'right',
sortable: false,
prop: 'money_total_2',
@ -284,7 +303,7 @@
},
{
label: '年初预算合计金额(元)',
width: 160,
width: 260,
align: 'right',
sortable: false,
prop: 'money_total_1',
@ -294,7 +313,7 @@
},
{
label: '调整后预算合计金额(元)',
width: 160,
width: 260,
align: 'right',
sortable: false,
prop: 'money_total_2',
@ -335,7 +354,23 @@
async getStatistic() {
const res = await statistic(this.select)
console.log(res)
this.statistic = res
this.statistic = res;
this.rptChartData = {
xArr: ["预算合计金额","预算已执行金额"],
radiusArr: '50%',
yArr: [{ value: res.progress.money_total_1, name: '预算合计金额',
label:{
show:false//这个数据高亮时不显示label，就不会显示替遮住第一个数据的label值了
},
emphasis:{
label:{
show:false//这个数据高亮时不显示label，就不会显示替遮住第一个数据的label值了
}
} },
{ value: res.progress.use_money_total, name: '预算已执行金额' }]
}
},
toContract(row) {

Write Preview
Loading…
Cancel
Save