12 changed files with 425 additions and 29 deletions
-
18src/assets/iconfonts/iconfont.css
-
2src/assets/iconfonts/iconfont.js
-
21src/assets/iconfonts/iconfont.json
-
BINsrc/assets/iconfonts/iconfont.ttf
-
BINsrc/assets/iconfonts/iconfont.woff
-
BINsrc/assets/iconfonts/iconfont.woff2
-
71src/views/system/archiveStatistics/index.vue
-
231src/views/system/archiveStatistics/module/barEcharts.vue
-
23src/views/system/logManage/warnLog/index.vue
-
28src/views/system/messageCenter/data1.json
-
24src/views/system/messageCenter/index.vue
-
36src/views/system/notifyManage/index.vue
2
src/assets/iconfonts/iconfont.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,71 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div> |
|||
<el-row :gutter="20" style="height:296px;"> |
|||
<el-col :xs="24" :sm="24" :lg="8"> |
|||
<div class="chart-wrapper"> |
|||
<radar-chart /> |
|||
</div> |
|||
</el-col> |
|||
<el-col :xs="24" :sm="24" :lg="8"> |
|||
<!-- 档案类别 --> |
|||
<!-- <div class="container-wrap"> --> |
|||
<div class="top-row container-wrap"> |
|||
<span class="right-top-line" /> |
|||
<span class="left-bottom-line" /> |
|||
<h3 class="table-title"> |
|||
<p class="title-arrow">档案类别</p> |
|||
</h3> |
|||
<div class="chart-wrapper"> |
|||
<pie-chart :width="'100%'" :height="'100%'" /> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :xs="24" :sm="24" :lg="8"> |
|||
<div class="chart-wrapper"> |
|||
<pie-chart /> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
<!-- 中间 --> |
|||
<el-row :gutter="20" style="height:296px;margin:20px 0"> |
|||
<el-col :xs="24" :sm="24" :lg="12"> |
|||
<div class="container-wrap"> |
|||
<BarEcharts /> |
|||
</div> |
|||
|
|||
</el-col> |
|||
<el-col :xs="24" :sm="24" :lg="12"> |
|||
<!-- 档案类别 --> |
|||
<!-- <div class="container-wrap"> --> |
|||
<div class=" container-wrap" /> |
|||
</el-col> |
|||
|
|||
</el-row> |
|||
<!-- 底部 --> |
|||
<el-row :gutter="20" style="height:296px;margin:20px 0"> |
|||
<el-col :xs="24" :sm="24" :lg="25"> |
|||
<div class=" container-wrap" /> |
|||
|
|||
</el-col> |
|||
|
|||
</el-row> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import RadarChart from '@/components/Echarts/RadarChart' |
|||
import PieChart from '@/components/Echarts/PieChart' |
|||
import BarEcharts from './module/barEcharts.vue' |
|||
export default { |
|||
components: { RadarChart, PieChart, BarEcharts } |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
@import '~@/assets/styles/lend-manage.scss'; |
|||
.container-wrap{ |
|||
min-height:calc(100vh - 636px) ; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,231 @@ |
|||
<template> |
|||
<div class="barEcharts"> |
|||
<div id="main" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import echarts from 'echarts' |
|||
|
|||
export default { |
|||
name: 'BarEcharts', |
|||
mounted() { |
|||
this.drawChart() |
|||
}, |
|||
methods: { |
|||
drawChart() { |
|||
const app = {} |
|||
const chartDom = document.getElementById('main') |
|||
const myChart = echarts.init(chartDom) |
|||
|
|||
let option = null |
|||
const posList = [ |
|||
'left', |
|||
'right', |
|||
'top', |
|||
'bottom', |
|||
'inside', |
|||
'insideTop', |
|||
'insideLeft', |
|||
'insideRight', |
|||
'insideBottom', |
|||
'insideTopLeft', |
|||
'insideTopRight', |
|||
'insideBottomLeft', |
|||
'insideBottomRight' |
|||
] |
|||
app.configParameters = { |
|||
rotate: { |
|||
min: -90, |
|||
max: 90 |
|||
}, |
|||
align: { |
|||
options: { |
|||
left: 'left', |
|||
center: 'center', |
|||
right: 'right' |
|||
} |
|||
}, |
|||
verticalAlign: { |
|||
options: { |
|||
top: 'top', |
|||
middle: 'middle', |
|||
bottom: 'bottom' |
|||
} |
|||
}, |
|||
position: { |
|||
options: posList.reduce(function(map, pos) { |
|||
map[pos] = pos |
|||
return map |
|||
}, {}) |
|||
}, |
|||
distance: { |
|||
min: 0, |
|||
max: 100 |
|||
} |
|||
} |
|||
app.config = { |
|||
rotate: 90, |
|||
align: 'left', |
|||
verticalAlign: 'middle', |
|||
position: 'insideBottom', |
|||
distance: 15, |
|||
onChange: function() { |
|||
const labelOption = { |
|||
rotate: app.config.rotate, |
|||
align: app.config.align, |
|||
verticalAlign: app.config.verticalAlign, |
|||
position: app.config.position, |
|||
distance: app.config.distance |
|||
} |
|||
myChart.setOption({ |
|||
series: [ |
|||
{ |
|||
label: labelOption |
|||
}, |
|||
{ |
|||
label: labelOption |
|||
} |
|||
] |
|||
}) |
|||
} |
|||
} |
|||
const labelOption = { |
|||
show: false, |
|||
position: app.config.position, |
|||
distance: app.config.distance, |
|||
align: app.config.align, |
|||
verticalAlign: app.config.verticalAlign, |
|||
rotate: app.config.rotate, |
|||
formatter: '{c} {name|{a}}', |
|||
fontSize: 16, |
|||
rich: { |
|||
name: {} |
|||
} |
|||
} |
|||
option = { |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'shadow' |
|||
} |
|||
}, |
|||
legend: { |
|||
data: ['Forest', 'Steppe'] |
|||
}, |
|||
toolbox: { |
|||
show: true, |
|||
orient: 'vertical', |
|||
left: 'right', |
|||
top: 'center', |
|||
feature: { |
|||
mark: { show: true }, |
|||
dataView: { show: true, readOnly: false }, |
|||
magicType: { show: true, type: ['line', 'bar', 'stack'] }, |
|||
restore: { show: true }, |
|||
saveAsImage: { show: true } |
|||
} |
|||
}, |
|||
xAxis: [{ |
|||
type: 'category', |
|||
axisTick: { show: false }, |
|||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], |
|||
axisLine: {// 轴线的颜色以及宽度 |
|||
lineStyle: { |
|||
color: '#113D72', |
|||
type: 'solid' |
|||
} |
|||
}, |
|||
axisLabel: {// x轴文字的配置 |
|||
show: true, |
|||
textStyle: { |
|||
color: '#fff' |
|||
} |
|||
}, |
|||
splitLine: {// 分割线配置 |
|||
lineStyle: { |
|||
color: '#113D72', |
|||
type: 'dashed' |
|||
} |
|||
} |
|||
|
|||
}], |
|||
yAxis: [{ |
|||
min: 0, |
|||
max: 900, |
|||
splitNumber: 3, |
|||
type: 'value', |
|||
axisLine: {// 轴线的颜色以及宽度 |
|||
show: false |
|||
}, |
|||
axisLabel: {// 轴文字的配置 |
|||
show: true, |
|||
textStyle: { |
|||
color: '#fff' |
|||
} |
|||
}, |
|||
splitLine: {// 分割线配置 |
|||
lineStyle: { |
|||
color: '#113D72', |
|||
type: 'dashed' |
|||
} |
|||
} |
|||
}], |
|||
series: [ |
|||
{ |
|||
name: '出库', |
|||
type: 'bar', |
|||
barWidth: 10, // 柱图宽度 |
|||
barGap: '30%', |
|||
label: labelOption, |
|||
emphasis: { |
|||
focus: 'series' |
|||
}, |
|||
data: [320, 332, 301, 334, 390], |
|||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ |
|||
{ |
|||
offset: 0, |
|||
color: '#6E48E6' |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: '#3AA6FA ' |
|||
} |
|||
]) |
|||
|
|||
}, |
|||
{ |
|||
name: '入库', |
|||
type: 'bar', |
|||
barWidth: 10, // 柱图宽度 |
|||
label: labelOption, |
|||
emphasis: { |
|||
focus: 'series' |
|||
}, |
|||
data: [220, 182, 191, 234, 290], |
|||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ |
|||
{ |
|||
offset: 0, |
|||
color: '#9DDD92' |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: '#10BFAA' |
|||
} |
|||
]) |
|||
} |
|||
] |
|||
} |
|||
|
|||
option && myChart.setOption(option) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
#main { |
|||
width: 765px; |
|||
height:297px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,28 @@ |
|||
{ |
|||
"rows":[ |
|||
{ |
|||
"notification":"内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容", |
|||
"msgType":"系统通知", |
|||
"pushObj":"全部用户", |
|||
"sendRole":"管理员", |
|||
"sendTime":"", |
|||
"readType":"未读" |
|||
}, |
|||
{ |
|||
"notification":"内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容", |
|||
"msgType":"系统通知", |
|||
"pushObj":"全部用户", |
|||
"sendRole":"管理员", |
|||
"sendTime":"", |
|||
"readType":"已读" |
|||
}, |
|||
{ |
|||
"notification":"内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容", |
|||
"msgType":"系统通知", |
|||
"pushObj":"全部用户", |
|||
"sendRole":"管理员", |
|||
"sendTime":"", |
|||
"readType":"已读" |
|||
} |
|||
] |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue