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.
471 lines
14 KiB
471 lines
14 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" />
|
|
<div class="search-input">
|
|
<!-- v-model="input3" v-model="select"-->
|
|
<el-input placeholder="2022，办公室" class="input-with-select">
|
|
<el-select slot="prepend" v-model="selectValue">
|
|
<el-option label="全目录" value="1" />
|
|
<el-option label="订单号" value="2" />
|
|
<el-option label="用户电话" value="3" />
|
|
</el-select>
|
|
<el-button slot="append" icon="el-icon-search" />
|
|
</el-input>
|
|
</div>
|
|
</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">
|
|
<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 class="todo-list">
|
|
<li>
|
|
<!-- CCCCCCC，请及时处理 -->
|
|
<p>温馨提示：XX已提交了待借申请，请及时处理，请及时处理，请及时处理</p>
|
|
<span>2022-5-23 13:30</span>
|
|
</li>
|
|
<li>
|
|
<p>温馨提示：XX已提交了待借申请，请及时处理</p>
|
|
<span>2022-5-23 13:30</span>
|
|
</li>
|
|
<li>
|
|
<p>温馨提示：XX已提交了待借申请，请及时处理</p>
|
|
<span>2022-5-23 13:30</span>
|
|
</li>
|
|
<li>
|
|
<p>温馨提示：XX已提交了待借申请，请及时处理</p>
|
|
<span>2022-5-23 13:30</span>
|
|
</li>
|
|
<li>
|
|
<p>温馨提示：XX已提交了待借申请，请及时处理</p>
|
|
<span>2022-5-23 13:30</span>
|
|
</li>
|
|
<li>
|
|
<p>温馨提示：XX已提交了待借申请，请及时处理</p>
|
|
<span>2022-5-23 13:30</span>
|
|
</li>
|
|
</ul>
|
|
</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">
|
|
<svg-icon icon-class="menjin" class-name="warehouse-svg" />门禁记录
|
|
</p>
|
|
</h3>
|
|
<el-table ref="table2" style="min-width: 100%;" height="100%" :data="tableData" class="warehose-el-table" stripe>
|
|
<el-table-column prop="time" label="时间" align="center" min-width="60" />
|
|
<el-table-column prop="warehouse" label="库房" align="center" min-width="60" />
|
|
<el-table-column prop="warning" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" />
|
|
</el-table>
|
|
</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">
|
|
<svg-icon icon-class="alerm" class-name="warehouse-svg" />报警记录
|
|
</p>
|
|
</h3>
|
|
<el-table ref="table" style="min-width: 100%;" height="100%" :data="tableData" class="warehose-el-table" stripe>
|
|
<el-table-column prop="time" label="时间" align="center" min-width="60" />
|
|
<el-table-column prop="warehouse" label="库房" align="center" min-width="60" />
|
|
<el-table-column prop="warning" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" />
|
|
</el-table>
|
|
</div>
|
|
</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 class="chart-wrapper">
|
|
<type-pie :type-data="typeData" />
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// import GithubCorner from '@/components/GithubCorner'
|
|
import PanelGroup from './dashboard/PanelGroup'
|
|
// import LineChart from './dashboard/LineChart'
|
|
// import RadarChart from '@/components/Echarts/RadarChart'
|
|
// import PieChart from '@/components/Echarts/PieChart'
|
|
// import BarChart from '@/components/Echarts/BarChart'
|
|
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 data1 from './data1.json'
|
|
|
|
// const lineChartData = {
|
|
// newVisitis: {
|
|
// expectedData: [100, 120, 161, 134, 105, 160, 165],
|
|
// actualData: [120, 82, 91, 154, 162, 140, 145]
|
|
// },
|
|
// messages: {
|
|
// expectedData: [200, 192, 120, 144, 160, 130, 140],
|
|
// actualData: [180, 160, 151, 106, 145, 150, 130]
|
|
// },
|
|
// purchases: {
|
|
// expectedData: [80, 100, 121, 104, 105, 90, 100],
|
|
// actualData: [120, 90, 100, 138, 142, 130, 130]
|
|
// },
|
|
// shoppings: {
|
|
// expectedData: [130, 140, 141, 142, 145, 150, 160],
|
|
// actualData: [120, 82, 91, 154, 162, 140, 130]
|
|
// }
|
|
// }
|
|
|
|
export default {
|
|
name: 'Dashboard',
|
|
components: {
|
|
// GithubCorner,
|
|
PanelGroup,
|
|
// LineChart,
|
|
// RadarChart,
|
|
// PieChart
|
|
// ,
|
|
// BarChart
|
|
lendAcross, catePie, typePie
|
|
},
|
|
data() {
|
|
return {
|
|
selectValue: '1',
|
|
lendData: [18203, 23489, 29034, 104970],
|
|
cateData: [1000, 700],
|
|
typeData: [1110, 2000, 800, 600, 900]
|
|
}
|
|
},
|
|
created() {
|
|
this.getData()
|
|
},
|
|
methods: {
|
|
// handleSetLineChartData(type) {
|
|
// this.lineChartData = lineChartData[type]
|
|
// },
|
|
getData() {
|
|
this.tableData = data1.rows
|
|
},
|
|
changeActiveTab(id) {
|
|
this.$router.push({
|
|
name: 'warehouse3D',
|
|
params: {
|
|
roomId: id
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
@import "~@/assets/styles/lend-manage.scss";
|
|
.dashboard-editor-container {
|
|
padding: 20px;
|
|
background-color: #031435;
|
|
position: relative;
|
|
|
|
// .github-corner {
|
|
// position: absolute;
|
|
// top: 0;
|
|
// border: 0;
|
|
// right: 0;
|
|
// }
|
|
|
|
.chart-wrapper {
|
|
height: calc(100% - 40px);
|
|
// background: #fff;
|
|
// padding: 16px 16px 0;
|
|
// margin-bottom: 32px;
|
|
}
|
|
}
|
|
@media (max-width: 1024px) {
|
|
.chart-wrapper {
|
|
padding: 8px;
|
|
}
|
|
}
|
|
// .title-arrow {
|
|
// width: 100%;
|
|
// &:before{
|
|
// left: calc(50% - 100px)
|
|
// }
|
|
// &:after{
|
|
// right: calc(50% - 100px)
|
|
// }
|
|
// }
|
|
.warehouse-tab {
|
|
color: #fff;
|
|
.warehouse-nav {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
position: absolute;
|
|
bottom: 15px;
|
|
// left: 20px;
|
|
z-index: 11;
|
|
// width: calc(100vw - 545px);
|
|
width: 100%;
|
|
// height: 90px;
|
|
// min-height: 90px;
|
|
padding: 0;
|
|
li {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
// align-items: center;
|
|
align-content: center;
|
|
justify-content: center;
|
|
// width: 25%;
|
|
height: 90px;
|
|
// line-height: 90px;
|
|
text-align: right;
|
|
// padding-right: 20px;
|
|
// margin-right: 20px;
|
|
font-size: 14px;
|
|
position: relative;
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
// background: url('~@/assets/images/warehouse_tab_bg.png') no-repeat;
|
|
// background-size: 100% 100%;
|
|
span {
|
|
width: 72px;
|
|
height: 52px;
|
|
margin-bottom: 7px;
|
|
// position: absolute;
|
|
// left: 60px;
|
|
// top: 20px;
|
|
}
|
|
p {
|
|
// flex: 1;
|
|
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;
|
|
}
|
|
}
|
|
// .active-nav{
|
|
// color: #fff;
|
|
// background: url('~@/assets/images/warehouse_tab_active.png') no-repeat;
|
|
// background-size: 100% 100%;
|
|
// }
|
|
}
|
|
}
|
|
.search-area {
|
|
height: 100%;
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
& .search-input {
|
|
width: 796px;
|
|
::v-deep.el-input-group {
|
|
height: 42px;
|
|
& > input {
|
|
height: 42px;
|
|
border: 1px solid #339cff;
|
|
background-color: #021941;
|
|
&::placeholder {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
// border: 1px solid #339cff;
|
|
// background-color: #021941;
|
|
// height: 42px;
|
|
// line-height: 42px;
|
|
// color: #fff;
|
|
& ::v-deep.el-input-group__prepend {
|
|
width: 125px;
|
|
background-color: #339cff;
|
|
border: 1px solid #339cff;
|
|
border-radius: 34px;
|
|
border-right: 0;
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
.el-input__inner {
|
|
text-align: center;
|
|
color: #fff;
|
|
}
|
|
}
|
|
& ::v-deep.el-input-group__append {
|
|
width: 72px;
|
|
left: -20px;
|
|
text-align: center;
|
|
background-color: #339cff;
|
|
border: 1px solid #339cff;
|
|
border-radius: 34px;
|
|
& i {
|
|
font-size: 25px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
& .el-select .el-input {
|
|
width: 130px;
|
|
}
|
|
& ::v-deep.input-with-select ::v-deep.el-input-group__prepend {
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
.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 {
|
|
background: #02255f;
|
|
box-shadow: inset 0px 0px 6px 1px #339cff;
|
|
border-radius: 26px 26px 26px 26px;
|
|
opacity: 1;
|
|
margin-bottom: 10px;
|
|
font-size: 13px;
|
|
color: #ffffff;
|
|
line-height: 42px;
|
|
height: 42px;
|
|
& p {
|
|
font-family: Microsoft YaHei-Regular, Microsoft YaHei;
|
|
font-weight: 400;
|
|
display: inline-block;
|
|
padding-left: 10px;
|
|
width: calc(100% - 112px);
|
|
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;
|
|
}
|
|
</style>
|