Commit 131b1fae authored by Nate 赵宇's avatar Nate 赵宇

Merge remote-tracking branch 'origin/master'

parents a668732e 7fbf7522
<template> <template>
<div class="navbar"> <div class="navbar">
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> <hamburger
id="hamburger-container"
:is-active="sidebar.opened"
class="hamburger-container"
@toggleClick="toggleSideBar"
/>
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" /> <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
<div class="right-menu"> <div class="right-menu">
<template v-if="device!=='mobile'"> <template v-if="device !== 'mobile'">
<search id="header-search" class="right-menu-item" /> <search id="header-search" class="right-menu-item" />
<el-tooltip content="项目文档" effect="dark" placement="bottom">
<Doc class="right-menu-item hover-effect" />
</el-tooltip>
<el-tooltip content="全屏缩放" effect="dark" placement="bottom"> <el-tooltip content="全屏缩放" effect="dark" placement="bottom">
<screenfull id="screenfull" class="right-menu-item hover-effect" /> <screenfull id="screenfull" class="right-menu-item hover-effect" />
</el-tooltip> </el-tooltip>
...@@ -19,12 +19,17 @@ ...@@ -19,12 +19,17 @@
<el-tooltip content="布局设置" effect="dark" placement="bottom"> <el-tooltip content="布局设置" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" /> <size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip> </el-tooltip>
</template> </template>
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click"> <el-dropdown
class="avatar-container right-menu-item hover-effect"
trigger="click"
>
<div class="avatar-wrapper"> <div class="avatar-wrapper">
<img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" class="user-avatar"> <div class="userIcon">
<i class="el-icon-user-solid" />
</div>
<!-- <img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" class="user-avatar"> -->
<i class="el-icon-caret-bottom" /> <i class="el-icon-caret-bottom" />
</div> </div>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
...@@ -53,7 +58,6 @@ ...@@ -53,7 +58,6 @@
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb' import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger' import Hamburger from '@/components/Hamburger'
import Doc from '@/components/Doc'
import Screenfull from '@/components/Screenfull' import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect' import SizeSelect from '@/components/SizeSelect'
import Search from '@/components/HeaderSearch' import Search from '@/components/HeaderSearch'
...@@ -65,8 +69,7 @@ export default { ...@@ -65,8 +69,7 @@ export default {
Hamburger, Hamburger,
Screenfull, Screenfull,
SizeSelect, SizeSelect,
Search, Search
Doc
}, },
data() { data() {
return { return {
...@@ -75,12 +78,7 @@ export default { ...@@ -75,12 +78,7 @@ export default {
} }
}, },
computed: { computed: {
...mapGetters([ ...mapGetters(['sidebar', 'device', 'user', 'baseApi']),
'sidebar',
'device',
'user',
'baseApi'
]),
show: { show: {
get() { get() {
return this.$store.state.settings.showSettings return this.$store.state.settings.showSettings
...@@ -121,18 +119,18 @@ export default { ...@@ -121,18 +119,18 @@ export default {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
background: #fff; background: #fff;
box-shadow: 0 1px 4px rgba(0,21,41,.08); box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
.hamburger-container { .hamburger-container {
line-height: 46px; line-height: 46px;
height: 100%; height: 100%;
float: left; float: left;
cursor: pointer; cursor: pointer;
transition: background .3s; transition: background 0.3s;
-webkit-tap-highlight-color:transparent; -webkit-tap-highlight-color: transparent;
&:hover { &:hover {
background: rgba(0, 0, 0, .025) background: rgba(0, 0, 0, 0.025);
} }
} }
...@@ -164,10 +162,10 @@ export default { ...@@ -164,10 +162,10 @@ export default {
&.hover-effect { &.hover-effect {
cursor: pointer; cursor: pointer;
transition: background .3s; transition: background 0.3s;
&:hover { &:hover {
background: rgba(0, 0, 0, .025) background: rgba(0, 0, 0, 0.025);
} }
} }
} }
...@@ -185,7 +183,9 @@ export default { ...@@ -185,7 +183,9 @@ export default {
height: 40px; height: 40px;
border-radius: 10px; border-radius: 10px;
} }
.userIcon {
height: 40px;
}
.el-icon-caret-bottom { .el-icon-caret-bottom {
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
......
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
</el-select> </el-select>
</div> </div>
<div class="body-container"> <div class="body-container">
<div class="cardOne" style="margin-top:40px; margin-left:40px "> <div class="cardOne" style="margin-top:30px; margin-left:-10px ">
<el-card class="box-card"> <el-card class="box-card">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<el-button <el-button
......
<template>
<el-row :gutter="32" class="Information">
<el-col :span="12">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span><i class="el-icon-s-order" /> 我的待办</span>
</div>
<div>
<el-card shadow="hover" class="textList">
入库上架---A100---C100---2022-04-18 15:11:29
</el-card>
<el-card shadow="hover" class="textList">
库存转移---TEST-003---2022-04-18 15:11:29
</el-card>
<el-card shadow="hover" class="textList">
拣货出库---TEST-003---2022-04-18 15:11:29
</el-card>
</div>
</el-card>
</el-col>
<el-col :span="12">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span><i class="el-icon-message-solid" /> 系统消息</span>
<!-- <el-button style="float: right; padding: 3px 0" type="text"
>操作按钮</el-button
> -->
</div>
<div>
<el-card shadow="hover" class="textList">
拣货出库---1000000008---2022-04-18 15:11:29
</el-card>
<el-card shadow="hover" class="textList">
拣货出库---1000000007---2022-04-18 15:11:29
</el-card>
<el-card shadow="hover" class="textList">
拣货出库---1000000004---2022-04-18 15:11:29
</el-card>
<!-- <el-card shadow="hover" class="textList">
鼠标悬浮时显示
</el-card> -->
</div>
</el-card>
</el-col>
</el-row>
</template>
<script>
export default {
methods: {}
}
</script>
<style lang="scss" scoped>
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
.box-card {
border-radius: 10px;
width: 520px;
padding: 0px 0px 15px 0px;
}
.textList {
background-color: rgba(240, 248, 255, 0.562);
border-radius: 10px;
margin: 10px 0px;
padding: 5px 5px 5px 5px;
}
</style>
...@@ -9,7 +9,12 @@ ...@@ -9,7 +9,12 @@
<div class="card-panel-text"> <div class="card-panel-text">
在线用户 在线用户
</div> </div>
<count-to :start-val="0" :end-val="200" :duration="2600" class="card-panel-num" /> <count-to
:start-val="0"
:end-val="200"
:duration="2600"
class="card-panel-num"
/>
</div> </div>
</div> </div>
</el-col> </el-col>
...@@ -22,7 +27,12 @@ ...@@ -22,7 +27,12 @@
<div class="card-panel-text"> <div class="card-panel-text">
消息通知 消息通知
</div> </div>
<count-to :start-val="0" :end-val="12000" :duration="3000" class="card-panel-num" /> <count-to
:start-val="0"
:end-val="12000"
:duration="3000"
class="card-panel-num"
/>
</div> </div>
</div> </div>
</el-col> </el-col>
...@@ -35,7 +45,12 @@ ...@@ -35,7 +45,12 @@
<div class="card-panel-text"> <div class="card-panel-text">
待收货订单 待收货订单
</div> </div>
<count-to :start-val="0" :end-val="20" :duration="3200" class="card-panel-num" /> <count-to
:start-val="0"
:end-val="20"
:duration="3200"
class="card-panel-num"
/>
</div> </div>
</div> </div>
</el-col> </el-col>
...@@ -48,7 +63,12 @@ ...@@ -48,7 +63,12 @@
<div class="card-panel-text"> <div class="card-panel-text">
待拣货订单 待拣货订单
</div> </div>
<count-to :start-val="0" :end-val="80" :duration="3600" class="card-panel-num" /> <count-to
:start-val="0"
:end-val="80"
:duration="3600"
class="card-panel-num"
/>
</div> </div>
</div> </div>
</el-col> </el-col>
...@@ -86,8 +106,8 @@ export default { ...@@ -86,8 +106,8 @@ export default {
overflow: hidden; overflow: hidden;
color: #666; color: #666;
background: #fff; background: #fff;
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05); box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, .05); border-color: rgba(0, 0, 0, 0.05);
&:hover { &:hover {
.card-panel-icon-wrapper { .card-panel-icon-wrapper {
...@@ -107,7 +127,7 @@ export default { ...@@ -107,7 +127,7 @@ export default {
} }
.icon-shopping { .icon-shopping {
background: #34bfa3 background: #34bfa3;
} }
} }
...@@ -124,7 +144,7 @@ export default { ...@@ -124,7 +144,7 @@ export default {
} }
.icon-shopping { .icon-shopping {
color: #34bfa3 color: #34bfa3;
} }
.card-panel-icon-wrapper { .card-panel-icon-wrapper {
...@@ -160,7 +180,7 @@ export default { ...@@ -160,7 +180,7 @@ export default {
} }
} }
@media (max-width:550px) { @media (max-width: 550px) {
.card-panel-description { .card-panel-description {
display: none; display: none;
} }
......
<template> <template>
<div class="dashboard-container"> <div class="dashboard-container">
<div class="dashboard-editor-container"> <div class="dashboard-editor-container">
<github-corner class="github-corner" /> <el-row>
<div class="firLine">
<panel-group @handleSetLineChartData="handleSetLineChartData" />
</div>
</el-row>
<panel-group @handleSetLineChartData="handleSetLineChartData" /> <el-row style="padding:16px 16px 0;margin-bottom:32px;">
<div class="secLine">
<Information />
</div>
</el-row>
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;"> <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
<line-chart :chart-data="lineChartData" /> <line-chart :chart-data="lineChartData" />
</el-row> </el-row>
<el-row :gutter="32">
<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="chart-wrapper">
<pie-chart />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<bar-chart />
</div>
</el-col>
</el-row>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import GithubCorner from '@/components/GithubCorner' // import GithubCorner from '@/components/GithubCorner'
import PanelGroup from './dashboard/PanelGroup' import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart' import LineChart from './dashboard/LineChart'
import RadarChart from '@/components/Echarts/RadarChart' import Information from './dashboard/Information'
import PieChart from '@/components/Echarts/PieChart'
import BarChart from '@/components/Echarts/BarChart'
const lineChartData = { const lineChartData = {
newVisitis: { newVisitis: {
...@@ -59,12 +48,10 @@ const lineChartData = { ...@@ -59,12 +48,10 @@ const lineChartData = {
export default { export default {
name: 'Dashboard', name: 'Dashboard',
components: { components: {
GithubCorner, // GithubCorner,
PanelGroup, PanelGroup,
LineChart, LineChart,
RadarChart, Information
PieChart,
BarChart
}, },
data() { data() {
return { return {
...@@ -80,28 +67,31 @@ export default { ...@@ -80,28 +67,31 @@ export default {
</script> </script>
<style rel="stylesheet/scss" lang="scss" scoped> <style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container { .dashboard-editor-container {
padding: 32px; padding: 32px;
background-color: rgb(240, 242, 245); background-color: rgb(240, 242, 245);
position: relative; position: relative;
.github-corner { .github-corner {
position: absolute; position: absolute;
top: 0; top: 0;
border: 0; border: 0;
right: 0; right: 0;
} }
.chart-wrapper { .chart-wrapper {
background: #fff; background: #fff;
padding: 16px 16px 0; padding: 16px 16px 0;
margin-bottom: 32px; margin-bottom: 32px;
} }
.firLine {
height: 80px;
} }
}
@media (max-width:1024px) { @media (max-width: 1024px) {
.chart-wrapper { .chart-wrapper {
padding: 8px; padding: 8px;
}
} }
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment