9 changed files with 962 additions and 606 deletions
-
8src/views/archiveUtilize/archiveEditing/index.vue
-
197src/views/components/echarts/catePie.vue
-
44src/views/components/echarts/lendAcross.vue
-
239src/views/components/echarts/serverProgress.vue
-
374src/views/components/echarts/serverProgress2.vue
-
40src/views/components/echarts/typePie.vue
-
316src/views/home copy.vue
-
345src/views/home.vue
-
1src/views/system/archiveStatistics/mixins/statistics.js
@ -0,0 +1,239 @@ |
|||
<template> |
|||
<div class="chart-wrapper" style="display: flex; justify-content: space-between; align-items: center; overflow: hidden; margin-top: -20px;"> |
|||
<div class="progress-class"> |
|||
<el-progress class="differ" type="circle" stroke-linecap="butt" :percentage="21" :stroke-width="30" :width="200" :format="formatterSame" /> |
|||
<svg width="100%" height="100%"> |
|||
<defs> |
|||
<linearGradient id="red" x1="1" y1="0" x2="0.3" y2="1"> |
|||
<stop |
|||
offset="0%" |
|||
style="stop-color: #14C9C9" |
|||
stop-opacity="1" |
|||
/> |
|||
<stop |
|||
offset="100%" |
|||
style="stop-color: #82DAAC" |
|||
stop-opacity="1" |
|||
/> |
|||
</linearGradient> |
|||
</defs> |
|||
</svg> |
|||
</div> |
|||
<div class="progress-right" style="display: flex; flex-wrap: wrap; align-items: center; flex: 1; height: 100%;"> |
|||
<div class="progress-right-item"> |
|||
<div class="progress-right-txt right-txt1"> |
|||
<p>内存占比</p> |
|||
<span>65<i>%</i></span> |
|||
</div> |
|||
<div class="progress-class2"> |
|||
<el-progress :show-text="false" type="circle" stroke-linecap="butt" :percentage="65" :stroke-width="20" :width="100" :format="formatterSame" /> |
|||
<svg width="100%" height="100%"> |
|||
<defs> |
|||
<linearGradient id="yellow" x1="1" y1="0" x2="0.3" y2="1"> |
|||
<stop |
|||
offset="0%" |
|||
style="stop-color: #FF973E" |
|||
stop-opacity="1" |
|||
/> |
|||
|
|||
<stop |
|||
offset="100%" |
|||
style="stop-color: #F7BA1E" |
|||
stop-opacity="1" |
|||
/> |
|||
</linearGradient> |
|||
</defs> |
|||
</svg> |
|||
</div> |
|||
</div> |
|||
<div class="progress-right-item"> |
|||
<div class="progress-right-txt right-txt2"> |
|||
<p>磁盘占比</p> |
|||
<span>38<i>%</i></span> |
|||
</div> |
|||
<div class="progress-class3"> |
|||
<el-progress :show-text="false" type="circle" stroke-linecap="butt" :percentage="38" :stroke-width="20" :width="100" :format="formatterSame" /> |
|||
<svg width="100%" height="100%"> |
|||
<defs> |
|||
<linearGradient id="green" x1="1" y1="0" x2="0.3" y2="1"> |
|||
<stop |
|||
offset="0%" |
|||
style="stop-color: #14C9C9" |
|||
stop-opacity="1" |
|||
/> |
|||
<stop |
|||
offset="100%" |
|||
style="stop-color: #82DAAC" |
|||
stop-opacity="1" |
|||
/> |
|||
</linearGradient> |
|||
</defs> |
|||
</svg> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
export default { |
|||
name: 'ServerProgress', |
|||
mixins: [], |
|||
props: { |
|||
}, |
|||
data() { |
|||
return { |
|||
} |
|||
}, |
|||
watch: { |
|||
}, |
|||
mounted() { |
|||
}, |
|||
methods: { |
|||
formatterSame(percentage) { |
|||
return percentage |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.dashboard-editor-container { |
|||
padding: 20px; |
|||
position: relative; |
|||
|
|||
.chart-wrapper { |
|||
height: calc(100% - 55px); |
|||
} |
|||
} |
|||
@media (max-width: 1024px) { |
|||
.chart-wrapper { |
|||
padding: 8px; |
|||
} |
|||
} |
|||
.progress-right-item{ |
|||
width:100%; |
|||
height: calc(100% / 2); |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
} |
|||
|
|||
.progress-right-txt{ |
|||
position: relative; |
|||
color: #545B65; |
|||
font-size: 14px; |
|||
padding-left: 12px; |
|||
margin-right: 50px; |
|||
span{ |
|||
display: block; |
|||
font-size: 20px; |
|||
color: #0C0E1E; |
|||
padding-top: 4px; |
|||
i{ |
|||
display: inline-block; |
|||
font-size: 12px; |
|||
color: #A6ADB6; |
|||
} |
|||
} |
|||
&::before{ |
|||
position: absolute; |
|||
left: 0; |
|||
top: 50%; |
|||
content: ''; |
|||
width: 4px; |
|||
height: 50px; |
|||
background: linear-gradient(180deg, #FF9B3B 0%, #F7BA1E 100%); |
|||
border-radius: 100px; |
|||
transform: translateY(-50%); |
|||
} |
|||
&.right-txt1{ |
|||
&::before{ |
|||
background: linear-gradient(180deg, #FF9B3B 0%, #F7BA1E 100%); |
|||
} |
|||
} |
|||
&.right-txt2{ |
|||
&::before{ |
|||
background: linear-gradient(180deg, #14C9C9 0%, #83DBAD 100%); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.progress-class { |
|||
position: relative; |
|||
width: 200px; |
|||
height: 200px; |
|||
margin: 0 100px; |
|||
::v-deep svg > path:nth-child(2) { |
|||
stroke: url(#red); |
|||
} |
|||
::v-deep .el-progress-circle{ |
|||
border-radius: 50%; |
|||
// box-shadow: 0 12px 12px #FEF1F3; |
|||
box-shadow: 0 6px 8px #D9F6F6; |
|||
} |
|||
} |
|||
.progress-class2{ |
|||
position: relative; |
|||
width: 100px; |
|||
height: 100px; |
|||
::v-deep svg > path:nth-child(2) { |
|||
stroke: url(#yellow); |
|||
} |
|||
::v-deep .el-progress-circle{ |
|||
border-radius: 50%; |
|||
box-shadow: 0 6px 8px #FFDEC1; |
|||
} |
|||
} |
|||
|
|||
.progress-class3{ |
|||
position: relative; |
|||
width: 100px; |
|||
height: 100px; |
|||
::v-deep svg > path:nth-child(2) { |
|||
stroke: url(#green); |
|||
} |
|||
::v-deep .el-progress-circle{ |
|||
border-radius: 50%; |
|||
box-shadow: 0 6px 8px #D9F6F6; |
|||
} |
|||
} |
|||
|
|||
::v-deep .el-progress__text{ |
|||
white-space: pre; |
|||
|
|||
} |
|||
::v-deep .el-progress-circle__track { |
|||
stroke: #F1F2F6; |
|||
} |
|||
|
|||
.differ { |
|||
::v-deep .el-progress__text { |
|||
top: 55%; |
|||
font-size: 30px !important; |
|||
color: #0C0E1E; |
|||
&::before { |
|||
content: 'CPU占比'; |
|||
width: 100%; |
|||
position: absolute; |
|||
top: -85%; |
|||
left: 50%; |
|||
font-weight: normal; |
|||
font-size: 14px; |
|||
color: #545B65; |
|||
transform: translateX(-50%); |
|||
} |
|||
&::after { |
|||
content: '%'; |
|||
width: 100%; |
|||
position: absolute; |
|||
bottom: 6px; |
|||
left: 30px; |
|||
font-weight: normal; |
|||
font-size: 12px; |
|||
color: #DEE0E4; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,374 @@ |
|||
<template> |
|||
<div id="main4" :style="{height:height,width:width}" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import echarts from 'echarts' |
|||
require('echarts/theme/macarons') |
|||
import resize from '@/views/dashboard/mixins/resize' |
|||
// const gaugeData = [ |
|||
// { |
|||
// value: 20, |
|||
// name: 'Perfect', |
|||
// title: { |
|||
// offsetCenter: ['0%', '-30%'] |
|||
// }, |
|||
// detail: { |
|||
// valueAnimation: true, |
|||
// offsetCenter: ['0%', '-20%'] |
|||
// } |
|||
// }, |
|||
// { |
|||
// value: 40, |
|||
// name: 'Good', |
|||
// title: { |
|||
// offsetCenter: ['0%', '0%'] |
|||
// }, |
|||
// detail: { |
|||
// valueAnimation: true, |
|||
// offsetCenter: ['0%', '10%'] |
|||
// } |
|||
// }, |
|||
// { |
|||
// value: 60, |
|||
// name: 'Commonly', |
|||
// title: { |
|||
// offsetCenter: ['0%', '30%'] |
|||
// }, |
|||
// detail: { |
|||
// valueAnimation: true, |
|||
// offsetCenter: ['0%', '40%'] |
|||
// } |
|||
// } |
|||
// ] |
|||
export default { |
|||
name: 'AcrossEcharts', |
|||
mixins: [resize], |
|||
props: { |
|||
addArcivesData: { |
|||
type: Object, |
|||
require: true, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: '100%' |
|||
}, |
|||
height: { |
|||
type: String, |
|||
default: '100%' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
chart: null |
|||
} |
|||
}, |
|||
watch: { |
|||
// 'addArcivesData': { |
|||
// handler(val) { |
|||
// setTimeout(() => { |
|||
// this.drawChart() |
|||
// }, 100) |
|||
// }, |
|||
// immediate: true, |
|||
// deep: true |
|||
// } |
|||
}, |
|||
mounted() { |
|||
this.drawChart() |
|||
window.addEventListener('resize', this.__resizeHandler) |
|||
}, |
|||
methods: { |
|||
drawChart() { |
|||
const chartDom = document.getElementById('main4') |
|||
this.chart = echarts.init(chartDom, 'macarons') |
|||
let option = null |
|||
option = { |
|||
// title: { // 标题组件 |
|||
// text: '80%', |
|||
// subtext: '', |
|||
// itemGap: 10, // 上下标题间距 |
|||
// textStyle: { |
|||
// color: '#000', // 文字颜色 |
|||
// fontStyle: 'normal', // 字体风格：'normal','italic','oblique' |
|||
// fontWeight: 'bold', // 字体粗细 ：'normal','bold','bolder','lighter',100 | 200 | 300 | 400...//字体系列： 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ... |
|||
// fontSize: 30 // 字体大小 |
|||
// }, |
|||
// subtextStyle: { |
|||
// color: '#000', // 文字颜色 |
|||
// fontStyle: 'normal', // 字体风格：'normal','italic','oblique' |
|||
// fontSize: 18 // 字体大小 |
|||
// }, |
|||
// x: 'center', // 设置标题居中 |
|||
// // y: 'center', |
|||
// bottom: 40 |
|||
// }, |
|||
tooltip: { |
|||
formatter: '{a} <br/>{b} : {c}' |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '业务指标', |
|||
type: 'gauge', |
|||
startAngle: 90, // 仪表盘开始角度（设置背景圆的角度） |
|||
endAngle: 180, // 仪表盘结束角度 |
|||
radius: '100%', // 圆大小（仪表盘半径） |
|||
clockwise: true, // 仪表盘刻度是否是顺时针增长 |
|||
axisLine: { // 仪表盘轴线样式 |
|||
show: true, |
|||
roundCap: false, |
|||
clip: false, |
|||
lineStyle: { |
|||
width: 20, |
|||
color: [[1, '#F1F2F6']] |
|||
// color: [[0.3, 'rgb(26,143,255)'], [0.5, 'rgb(23,151,255)'], [0.7, 'rgb(13,213,253)'], [0.8, 'rgb(9,237,253)'], [1, 'rgb(70,100,144)']] |
|||
// opacity: 0.6, //盘的颜色变成透明 |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
show: false |
|||
}, |
|||
splitLine: { // 分割线样式,是大分割线 |
|||
show: false |
|||
}, |
|||
// 刻度线 |
|||
axisTick: { |
|||
show: false |
|||
}, |
|||
// data: [{ value: '80' }], |
|||
markPoint: { |
|||
show: false, |
|||
symbol: 'circle', |
|||
symbolSize: 0, |
|||
data: [ |
|||
// 跟你的仪表盘的中心位置对应上，颜色可以和画板底色一样 |
|||
{ value: '', x: 'center', y: 'center', itemStyle: { color: '#000' }} |
|||
], |
|||
itemStyle: { |
|||
normal: { |
|||
label: { |
|||
show: true, |
|||
color: '#000', // 气泡中字体颜色 |
|||
fontSize: 0 |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
detail: { // 仪表盘详情，用于显示数据。(仪表盘的数值字体样式和显示位置) |
|||
show: true, // 是否显示详情,默认 true。 |
|||
offsetCenter: [0, 0], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。 |
|||
color: '#000', // 文字的颜色,默认 auto。 |
|||
fontSize: 10, // 文字的字体大小,默认 15。 |
|||
formatter: '{value}' // 格式化函数或者字符串 |
|||
}, |
|||
pointer: { // 仪表盘指针。 |
|||
show: false, // 是否显示指针,默认 true。 |
|||
length: '60%', // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。 |
|||
width: 15 // 指针宽度,默认 8。 |
|||
}, |
|||
itemStyle: { // 仪表盘指针样式。 |
|||
color: '#0066FF', // 指针颜色，默认(auto)取数值所在的区间的颜色 |
|||
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。 |
|||
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。 |
|||
borderType: 'solid', // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。 |
|||
borderColor: '#000', // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。 |
|||
// shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 |
|||
shadowColor: '#000' // 阴影颜色。支持的格式同color。 |
|||
}, |
|||
// 进度设置 |
|||
progress: { |
|||
show: true, |
|||
overlap: false, // 多组数据时进度条是否重叠 |
|||
roundCap: true, // 是否在两端显示成圆形 |
|||
clip: false, // 是否裁掉超出部分 |
|||
// 进度条样式 |
|||
itemStyle: { |
|||
borderWidth: 10, |
|||
shadowColor: '', |
|||
color: { |
|||
type: 'linear', |
|||
x: 0, |
|||
y: 0, |
|||
x2: 0, |
|||
y2: 1, |
|||
colorStops: [ |
|||
{ |
|||
offset: 0, |
|||
color: this.startColor // 0% 处的颜色 '#02C77E' |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: this.endColor // 100% 处的颜色 '#017770' |
|||
} |
|||
], |
|||
global: false // 缺省为 false |
|||
} |
|||
} |
|||
}, |
|||
data: [ |
|||
{ |
|||
value: 21, |
|||
name: 'CPU占比', |
|||
title: {}, |
|||
detail: { |
|||
// 中心title设置 |
|||
offsetCenter: ['0%', '0%'], |
|||
color: '#01F8FF', |
|||
formatter: '{value}%' |
|||
// borderColor: '#01F8FF', |
|||
// borderRadius: 20, |
|||
// borderWidth: 1, |
|||
} |
|||
} |
|||
] |
|||
} |
|||
] |
|||
} |
|||
option && this.chart.setOption(option) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.dashboard-editor-container { |
|||
padding: 20px; |
|||
position: relative; |
|||
|
|||
.chart-wrapper { |
|||
height: calc(100% - 55px); |
|||
} |
|||
} |
|||
@media (max-width: 1024px) { |
|||
.chart-wrapper { |
|||
padding: 8px; |
|||
} |
|||
} |
|||
.progress-right-item{ |
|||
width:100%; |
|||
height: calc(100% / 2); |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
} |
|||
|
|||
.progress-right-txt{ |
|||
position: relative; |
|||
color: #545B65; |
|||
font-size: 14px; |
|||
padding-left: 12px; |
|||
margin-right: 50px; |
|||
span{ |
|||
display: block; |
|||
font-size: 20px; |
|||
color: #0C0E1E; |
|||
padding-top: 4px; |
|||
i{ |
|||
display: inline-block; |
|||
font-size: 12px; |
|||
color: #A6ADB6; |
|||
} |
|||
} |
|||
&::before{ |
|||
position: absolute; |
|||
left: 0; |
|||
top: 50%; |
|||
content: ''; |
|||
width: 4px; |
|||
height: 50px; |
|||
background: linear-gradient(180deg, #FF9B3B 0%, #F7BA1E 100%); |
|||
border-radius: 100px; |
|||
transform: translateY(-50%); |
|||
} |
|||
&.right-txt1{ |
|||
&::before{ |
|||
background: linear-gradient(180deg, #FF9B3B 0%, #F7BA1E 100%); |
|||
} |
|||
} |
|||
&.right-txt2{ |
|||
&::before{ |
|||
background: linear-gradient(180deg, #14C9C9 0%, #83DBAD 100%); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.progress-class { |
|||
position: relative; |
|||
width: 200px; |
|||
height: 200px; |
|||
margin: 0 100px; |
|||
::v-deep svg > path:nth-child(2) { |
|||
stroke: url(#red); |
|||
} |
|||
::v-deep .el-progress-circle{ |
|||
border-radius: 50%; |
|||
// box-shadow: 0 12px 12px #FEF1F3; |
|||
box-shadow: 0 6px 8px #D9F6F6; |
|||
} |
|||
} |
|||
.progress-class2{ |
|||
position: relative; |
|||
width: 100px; |
|||
height: 100px; |
|||
::v-deep svg > path:nth-child(2) { |
|||
stroke: url(#yellow); |
|||
} |
|||
::v-deep .el-progress-circle{ |
|||
border-radius: 50%; |
|||
box-shadow: 0 6px 8px #FFDEC1; |
|||
} |
|||
} |
|||
|
|||
.progress-class3{ |
|||
position: relative; |
|||
width: 100px; |
|||
height: 100px; |
|||
::v-deep svg > path:nth-child(2) { |
|||
stroke: url(#green); |
|||
} |
|||
::v-deep .el-progress-circle{ |
|||
border-radius: 50%; |
|||
box-shadow: 0 6px 8px #D9F6F6; |
|||
} |
|||
} |
|||
|
|||
::v-deep .el-progress__text{ |
|||
white-space: pre; |
|||
|
|||
} |
|||
::v-deep .el-progress-circle__track { |
|||
stroke: #F1F2F6; |
|||
} |
|||
|
|||
.differ { |
|||
::v-deep .el-progress__text { |
|||
top: 55%; |
|||
font-size: 30px !important; |
|||
color: #0C0E1E; |
|||
&::before { |
|||
content: 'CPU占比'; |
|||
width: 100%; |
|||
position: absolute; |
|||
top: -85%; |
|||
left: 50%; |
|||
font-weight: normal; |
|||
font-size: 14px; |
|||
color: #545B65; |
|||
transform: translateX(-50%); |
|||
} |
|||
&::after { |
|||
content: '%'; |
|||
width: 100%; |
|||
position: absolute; |
|||
bottom: 6px; |
|||
left: 30px; |
|||
font-weight: normal; |
|||
font-size: 12px; |
|||
color: #DEE0E4; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,316 +0,0 @@ |
|||
<template> |
|||
<div class="dashboard-container"> |
|||
<div class="dashboard-editor-container"> |
|||
<panel-group /> |
|||
<el-row :gutter="20" style="margin-bottom:20px;height: 152px;"> |
|||
<el-col :xs="24" :sm="24" :lg="16"> |
|||
<div class="container-left search-area"> |
|||
<span class="right-top-line" /> |
|||
<span class="left-bottom-line" /> |
|||
<!-- <SearchAcrives /> --> |
|||
</div> |
|||
</el-col> |
|||
<el-col :xs="24" :sm="24" :lg="8"> |
|||
<div class="container-left" style="height: 100%;margin: 0"> |
|||
<span class="right-top-line" /> |
|||
<span class="left-bottom-line" /> |
|||
<h3 class=" table-title"> |
|||
<p class="title-arrow"> |
|||
<svg-icon icon-class="a-3Dkufang" class-name="warehouse-svg" />3D库房 |
|||
</p> |
|||
</h3> |
|||
<div class="warehouse-tab"> |
|||
<ul class="warehouse-nav"> |
|||
<li @click="changeActiveTab(0)"> |
|||
<span /> |
|||
<p>全景图</p> |
|||
</li> |
|||
<li @click="changeActiveTab(1)"> |
|||
<span /> |
|||
<p>档案库</p> |
|||
</li> |
|||
<li @click="changeActiveTab(2)"> |
|||
<span /> |
|||
<p>整理室</p> |
|||
</li> |
|||
<li @click="changeActiveTab(3)"> |
|||
<span /> |
|||
<p>阅览室</p> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row :gutter="20" style="margin-bottom:20px;height: calc(50vh - 251px);"> |
|||
<el-col :xs="24" :sm="24" :lg="8"> |
|||
<!-- 待办事项 --> |
|||
<div class="container-wrap"> |
|||
<span class="right-top-line" /> |
|||
<span class="left-bottom-line" /> |
|||
<h3 class="table-title"> |
|||
<p class="title-arrow"> |
|||
<svg-icon icon-class="tongzhigonggao" class-name="warehouse-svg" />待办事项 |
|||
</p> |
|||
</h3> |
|||
<div style="height: calc(100% - 40px);overflow-y: auto;overflow-x: hidden;"> |
|||
<ul v-if="waitBorrowerData.length !== 0" class="todo-list"> |
|||
<li v-for="(item,index) in waitBorrowerData" :key="index"> |
|||
<el-tooltip class="item" effect="dark" :content="item.title" :enterable="false" placement="top"> |
|||
<p>{{ item.title }}</p> |
|||
</el-tooltip> |
|||
<span>{{ item.update_time | parseTime }}</span> |
|||
</li> |
|||
</ul> |
|||
<div v-else class="empty-main" style="height: 100%;"> |
|||
<svg-icon icon-class="empty" class-name="empty-img" /> |
|||
<p>暂无数据</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :xs="24" :sm="24" :lg="8"> |
|||
<!-- 门禁记录 --> |
|||
<security-door :height="'calc(100% - 40px)'" /> |
|||
</el-col> |
|||
<el-col :xs="24" :sm="24" :lg="8"> |
|||
<!-- 报警记录 --> |
|||
<warehouse-warning :height="'calc(100% - 40px)'" /> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row :gutter="20" style="height: calc(50vh - 251px);"> |
|||
<el-col :xs="24" :sm="24" :lg="8"> |
|||
<!-- 档案借阅 --> |
|||
<div class="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"> |
|||
<lend-across :lend-data="lendData" /> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :xs="24" :sm="24" :lg="8"> |
|||
<!-- 档案类别 --> |
|||
<div class="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"> |
|||
<cate-pie :cate-data="cateData" /> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :xs="24" :sm="24" :lg="8"> |
|||
<!-- 档案类型 --> |
|||
<div class="container-wrap"> |
|||
<span class="right-top-line" /> |
|||
<span class="left-bottom-line" /> |
|||
<h3 class="table-title"> |
|||
<p class="title-arrow">档案类型</p> |
|||
</h3> |
|||
<div v-if="typeData.length !== 0" class="chart-wrapper"> |
|||
<type-pie :type-data="typeData" /> |
|||
</div> |
|||
<div v-else class="empty-main"> |
|||
<svg-icon icon-class="empty" class-name="empty-img" /> |
|||
<p>暂无数据</p> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import PanelGroup from './dashboard/PanelGroup' |
|||
import lendAcross from '@/views/components/echarts/lendAcross.vue' |
|||
import catePie from '@/views/components/echarts/catePie.vue' |
|||
import typePie from '@/views/components/echarts/typePie.vue' |
|||
import WarehouseWarning from '@/views/components/WarehouseWarning' |
|||
import SecurityDoor from '@/views/components/SecurityDoor' |
|||
// import SearchAcrives from '@/views/archivesManage/archivesSearch/index' |
|||
import { statisticsCrud } from '@/views/system/archiveStatistics/mixins/statistics' |
|||
import { FetchWaitBorrower } from '@/api/archivesManage/lendManage' |
|||
|
|||
export default { |
|||
name: 'Dashboard', |
|||
components: { |
|||
WarehouseWarning, |
|||
SecurityDoor, |
|||
PanelGroup, |
|||
lendAcross, |
|||
catePie, |
|||
typePie |
|||
// SearchAcrives |
|||
}, |
|||
mixins: [statisticsCrud], |
|||
data() { |
|||
return { |
|||
waitBorrowerData: [] |
|||
} |
|||
}, |
|||
created() { |
|||
this.getWaitBorrower() |
|||
}, |
|||
methods: { |
|||
getWaitBorrower() { |
|||
FetchWaitBorrower().then(data => { |
|||
if (data) { |
|||
this.waitBorrowerData = data |
|||
} |
|||
}) |
|||
}, |
|||
changeActiveTab(id) { |
|||
this.$router.push({ |
|||
name: 'warehouse3D', |
|||
params: { |
|||
roomId: id |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
.dashboard-editor-container { |
|||
padding: 20px; |
|||
position: relative; |
|||
|
|||
.chart-wrapper { |
|||
height: calc(100% - 40px); |
|||
} |
|||
} |
|||
@media (max-width: 1024px) { |
|||
.chart-wrapper { |
|||
padding: 8px; |
|||
} |
|||
} |
|||
.warehouse-tab { |
|||
.warehouse-nav { |
|||
display: flex; |
|||
justify-content: space-around; |
|||
position: absolute; |
|||
bottom: 15px; |
|||
z-index: 11; |
|||
width: 100%; |
|||
padding: 0; |
|||
li { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
flex-wrap: nowrap; |
|||
align-content: center; |
|||
justify-content: center; |
|||
height: 90px; |
|||
text-align: right; |
|||
font-size: 14px; |
|||
position: relative; |
|||
&:hover { |
|||
cursor: pointer; |
|||
} |
|||
span { |
|||
width: 72px; |
|||
height: 52px; |
|||
margin-bottom: 7px; |
|||
} |
|||
p { |
|||
text-align: left; |
|||
} |
|||
&:first-child span { |
|||
background: url("~@/assets/images/tab_fullview_logo.png") no-repeat; |
|||
} |
|||
&:nth-child(2) span { |
|||
background: url("~@/assets/images/tab_archives_logo.png") no-repeat; |
|||
} |
|||
&:nth-child(3) span { |
|||
background: url("~@/assets/images/tab_collate_logo.png") no-repeat; |
|||
} |
|||
&:nth-child(4) span { |
|||
background: url("~@/assets/images/tab_read_logo.png") no-repeat; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.el-col { |
|||
height: 100%; |
|||
} |
|||
.container-left, |
|||
.container-right, |
|||
.container-wrap, |
|||
.el-card, |
|||
.header-container-wrap { |
|||
min-height: 100%; |
|||
} |
|||
.warehose-el-table ::v-deep .el-table__header-wrapper { |
|||
box-shadow: inset 0px 0px 6px 1px #339cff; |
|||
background: none !important; |
|||
} |
|||
.container-wrap { |
|||
min-height: auto; |
|||
height: 100%; |
|||
} |
|||
.todo-list { |
|||
padding: 0 20px; |
|||
& li { |
|||
height: 42px; |
|||
line-height: 42px; |
|||
margin-bottom: 10px; |
|||
font-size: 13px; |
|||
color: #ffffff; |
|||
background: #02255f; |
|||
box-shadow: inset 0px 0px 6px 1px #339cff; |
|||
border-radius: 26px; |
|||
opacity: 1; |
|||
cursor: pointer; |
|||
|
|||
& p { |
|||
display: inline-block; |
|||
width: calc(100% - 140px); |
|||
padding-left: 10px; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
word-break: break-all; |
|||
} |
|||
& span { |
|||
float: right; |
|||
padding-right: 10px; |
|||
} |
|||
} |
|||
} |
|||
::v-deep |
|||
.el-table--striped |
|||
.el-table__body |
|||
tr.el-table__row--striped |
|||
td.el-table__cell { |
|||
background: #02255f; |
|||
} |
|||
.search-area { |
|||
width: 100%; |
|||
height: 100%; |
|||
margin: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
::v-deep .search-main{ |
|||
padding: 0 62px; |
|||
.head-container{ |
|||
padding: 0; |
|||
width: 100% !important; |
|||
.search-input { |
|||
width: 100% !important; |
|||
} |
|||
.input-with-select{ |
|||
width: 100% !important; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue