9 changed files with 962 additions and 606 deletions
-
8src/views/archiveUtilize/archiveEditing/index.vue
-
199src/views/components/echarts/catePie.vue
-
46src/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