You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
390 lines
11 KiB
390 lines
11 KiB
<template>
|
|
<div class="dashboard-container">
|
|
<div class="dashboard-editor-container">
|
|
<!-- <github-corner class="github-corner" /> -->
|
|
<panel-group />
|
|
<!-- <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
|
<line-chart :chart-data="lineChartData" />
|
|
</el-row> -->
|
|
<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="chart-wrapper">
|
|
<pie-chart />
|
|
</div> -->
|
|
<div class="container-left" style="height: 100%;margin: 0; position: relative;">
|
|
<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="home-floor-tab">
|
|
<p :class="{ 'active-floor': floorIndex == 0 }" @click="changeFloorTab(0)">5楼</p>
|
|
<p :class="{ 'active-floor': floorIndex == 1 }" @click="changeFloorTab(1)">7楼</p>
|
|
</div>
|
|
<el-carousel ref="carouselRef" trigger="click" :interval="4000" indicator-position="none" height="110px" arrow="never" @change="handleChange">
|
|
<el-carousel-item>
|
|
<div class="warehouse-tab">
|
|
<ul class="warehouse-nav">
|
|
<li @click="changeActiveTab(1,0)">
|
|
<span />
|
|
<p>全景图</p>
|
|
</li>
|
|
<li @click="changeActiveTab(1,1)">
|
|
<span />
|
|
<p>档案库</p>
|
|
</li>
|
|
<li @click="changeActiveTab(1,2)">
|
|
<span />
|
|
<p>整理室</p>
|
|
</li>
|
|
<li @click="changeActiveTab(1,3)">
|
|
<span />
|
|
<p>阅览室</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</el-carousel-item>
|
|
<el-carousel-item>
|
|
<div class="warehouse-tab">
|
|
<ul class="warehouse-nav">
|
|
<li @click="changeActiveTab(0,4)">
|
|
<span />
|
|
<p>全景图</p>
|
|
</li>
|
|
<li @click="changeActiveTab(0,5)">
|
|
<span />
|
|
<p>现行文件室</p>
|
|
</li>
|
|
<li @click="changeActiveTab(0,6)">
|
|
<span />
|
|
<p>待销文件室</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
</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: [],
|
|
floorIndex: 0
|
|
}
|
|
},
|
|
created() {
|
|
this.getWaitBorrower()
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
handleChange(index) {
|
|
this.floorIndex = index
|
|
},
|
|
changeFloorTab(index) {
|
|
this.floorIndex = index
|
|
const carousel = this.$refs.carouselRef
|
|
carousel.setActiveItem(index)
|
|
},
|
|
// handleSetLineChartData(type) {
|
|
// this.lineChartData = lineChartData[type]
|
|
// },
|
|
getWaitBorrower() {
|
|
FetchWaitBorrower().then(data => {
|
|
if (data) {
|
|
this.waitBorrowerData = data
|
|
}
|
|
})
|
|
},
|
|
changeActiveTab(floorId, roomId) {
|
|
this.$router.push({
|
|
name: 'warehouse3D',
|
|
params: {
|
|
floorId: floorId,
|
|
roomId: roomId
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
@import "~@/assets/styles/lend-manage.scss";
|
|
.dashboard-editor-container {
|
|
padding: 20px;
|
|
background-color: #031435;
|
|
position: relative;
|
|
|
|
.chart-wrapper {
|
|
height: calc(100% - 40px);
|
|
}
|
|
}
|
|
@media (max-width: 1024px) {
|
|
.chart-wrapper {
|
|
padding: 8px;
|
|
}
|
|
}
|
|
.warehouse-tab {
|
|
color: #fff;
|
|
.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%;
|
|
// overflow: hidden;
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
.home-floor-tab{
|
|
position: absolute;
|
|
right: 14px;
|
|
top: 10px;
|
|
color: #fff;
|
|
display: flex;
|
|
justify-self: flex-start;
|
|
p{
|
|
font-size: 14px;
|
|
padding:2px 6px;
|
|
margin-right: 6px;
|
|
color: #339cff;
|
|
border: 1px solid #339cff;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
&.active-floor,
|
|
&:hover{
|
|
color: #fff;
|
|
background-color: #113d72;
|
|
}
|
|
}
|
|
}
|
|
</style>
|