upright
/
duoji-frontend
mirror of https://gitlab.hzleaper.com:81/duoji/duoji-frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

历史页面实时部分

Browse Source
1.0.0
黄崇栋 6 years ago
parent 356baa8785
commit b6de85a511
7 changed files with 343 additions and 96 deletions
Show Stats Download Patch File Download Diff File

27
src/components/common/the-aside.vue
Unescape Escape View File

@ -1,16 +1,11 @@
<template>
<div class="aside">
<transition name="slide">
<div class="aside-logo" v-show="!aside_collapsed">
<span>昆船随行式垛机监测系统</span>
</div>
</transition>
<a-menu
:selectedKeys="selectedKeys"
:openKeys.sync="openKeys"
@click="clickMenu"
mode="inline"
theme="dark"
theme="light"
:inline-collapsed="aside_collapsed"
>
<template v-for="item in routes">
@ -132,25 +127,7 @@ export default {
position: relative;
box-shadow: 2px 0px 6px 0px rgba(0, 21, 41, 0.35);
z-index: 1000;
.slide-enter-active {
transition: all 1s;
}
.slide-enter,
.slide-leave-to {
width: 0;
opacity: 0;
}
&-logo {
height: 65px;
display: flex;
align-items: center;
background-color: #00284d;
span {
font-size: 18px;
font-weight: bold;
margin-left: 24px;
}
}
background-color: #fff;
.ant-menu-inline {
width: 256px;
}

75
src/components/common/the-header.vue
Unescape Escape View File

@ -1,15 +1,16 @@
<template>
<div class="header">
<div class="header-top">
<a-icon :type="aside_collapsed ? 'menu-unfold' : 'menu-fold'" @click="setCollapsed"></a-icon>
<div class="header-top-company">昆船随行式垛机监测系统</div>
<div class="header-top-right">
<a-popover v-model="visible" placement="bottom" trigger="click">
<div class="header-top-right-circle" @click="visible = !visible"></div>
<a-popover id="popover" v-model="visible" placement="bottom" trigger="click">
<a href="javascript:;">
{{
userInfo.name ? userInfo.name : "userName"
}}
</a>
<div class="flex flex-column" :style="{ 'min-width': '56px' }" slot="content">
<div class="flex flex-column" :style="{ 'min-width': '78px' }" slot="content">
<a
class="block mb16"
href="javascript:;"
@ -20,14 +21,6 @@
</a-popover>
</div>
</div>
<div class="header-breadcrumb">
<!-- 面包屑 -->
<a-breadcrumb class="main-breadcrumb-cover">
<a-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
<span>{{ item.meta.name }}</span>
</a-breadcrumb-item>
</a-breadcrumb>
</div>
</div>
</template>
@ -36,79 +29,55 @@ import { mapState, mapMutations } from "vuex";
export default {
name: "the-header",
computed: {
...mapState(["aside_collapsed", "userInfo"])
...mapState(["userInfo"])
},
data() {
return {
breadcrumbList: [],
visible: false
};
},
watch: {
$route(data) {
this.processBread(data);
}
},
methods: {
...mapMutations(["setState"]),
setCollapsed() {
this.setState({ aside_collapsed: !this.aside_collapsed });
},
logout() {
this.visible = false;
sessionStorage.clear();
this.$router.push({ name: "login" });
},
/**
* 处理全局面包屑
* @param route 当前路由信息
*/
processBread(route) {
this.breadcrumbList = route.matched.filter((el, index) => {
return el.name && (el.meta.unfold || index);
});
this.breadcrumbList.forEach(el => {
if (el.name === route.name) {
el.query = route.query;
}
});
}
},
mounted() {
this.processBread(this.$route);
}
};
</script>
<style lang="scss">
.header {
background: #fff;
background: #eeeeee;
&-top {
z-index: 10;
height: 64px;
height: 48px;
box-shadow: 0 1px 4px 0 rgba(0, 21, 41, 0.12);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
.station-selector {
&-select {
width: 220px;
}
}
.anticon {
font-size: 20px;
cursor: pointer;
background-color: #001529;
&-company {
font-size: 18px;
font-family: PingFangSC, PingFangSC-Medium;
font-weight: 500;
text-align: center;
color: #ffffff;
}
&-right {
display: flex;
align-items: center;
align-items: flex-start;
&-circle {
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #fff;
margin-right: 8px;
cursor: pointer;
}
}
&-breadcrumb {
padding: 16px 32px;
}
}
</style>

31
src/utils/index.js
Unescape Escape View File

@ -7,6 +7,37 @@ export default {
var seconds = (time % (1000 * 60)) / 1000;
return days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒 ";
},
// 时间处理
timerFormat() {
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
let h =
date.getHours() < 10 ?
"0" + date.getHours() :
date.getHours();
let m =
date.getMinutes() < 10 ?
"0" + date.getMinutes() :
date.getMinutes();
let s =
date.getSeconds() < 10 ?
"0" + date.getSeconds() :
date.getSeconds();
return year +
"年" +
month +
"月" +
day +
"日" +
" " +
h +
":" +
m +
":" +
s;
},
//计算字符串长度，英文1个字符，中文2个字符
computedStrLen(str) {
var len = 0;

60
src/views/center.vue
Unescape Escape View File

@ -1,12 +1,66 @@
<template>
<div class="center"></div>
<div class="center bg-white">
<div class="center-table">
<a-row>
<a-col span="4">登录账户</a-col>
<a-col span="8">{{userInfo.account || '-'}}</a-col>
<a-col span="4">用户姓名</a-col>
<a-col span="8">{{userInfo.name || '-'}}</a-col>
</a-row>
<a-row>
<a-col span="4">手机号码</a-col>
<a-col span="8">{{userInfo.phone || '-'}}</a-col>
<a-col span="4">邮箱</a-col>
<a-col span="8">{{userInfo.email || '-'}}</a-col>
</a-row>
</div>
<a-row>
<a-col span="24" align="center">
<a-button class="mt16">修改密码</a-button>
</a-col>
</a-row>
</div>
</template>
<script>
export default {
name: "center"
name: "center",
data() {
return {
userInfo: {}
};
}
};
</script>
<style>
<style lang='scss'>
.center {
padding: 24px;
&-table {
.ant-row {
display: flex;
border-right: 1px solid #e9e9e9;
div {
padding: 16px;
border-top: 1px solid #e9e9e9;
border-left: 1px solid #e9e9e9;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, 0.65);
display: flex;
align-items: center;
}
.ant-col-4 {
background-color: #fafafa;
}
}
.ant-row:last-child {
border-bottom: 1px solid #e9e9e9;
}
}
}
</style>

59
src/views/history/index.vue
Unescape Escape View File

@ -1,12 +1,65 @@
<template>
<div class="history"></div>
<div class="history bg-white">
<a-input-search
class="mb24"
style="width: 40%;"
placeholder="请输入工单号搜索"
v-model="search"
enter-button="搜索"
@search="handleSearch"
></a-input-search>'
<a-table :columns="columns" :dataSource="dataSource"></a-table>
</div>
</template>
<script>
export default {
name: "history"
name: "history",
data() {
return {
search: "",
columns: [
{
title: "货位号",
dataIndex: ""
},
{
title: "视频录制时间",
dataIndex: ""
},
{
title: "历史视频播放地址",
dataIndex: "",
scopedSlot: {
customRender: ""
}
},
{
title: "取货前照片",
dataIndex: "",
scopedSlot: {
customRender: ""
}
},
{
title: "取货后照片",
dataIndex: "",
scopedSlot: {
customRender: ""
}
}
],
dataSource: []
};
},
methods: {
handleSearch() {}
}
};
</script>
<style>
<style lang='scss'>
.history {
padding: 24px;
}
</style>

127
src/views/main.vue
Unescape Escape View File

@ -1,14 +1,21 @@
<template>
<div class="mainIndex">
<div class="mainIndex-aside">
<the-aside></the-aside>
</div>
<div class="mainIndex-container">
<div class="mainIndex-container-header">
<the-header></the-header>
</div>
<div class="mainIndex-container">
<the-aside></the-aside>
<div class="mainIndex-container-content">
<router-view></router-view>
<div class="mainIndex-container-content-breadcrumb">
<!-- 面包屑 -->
<a-breadcrumb class="main-breadcrumb-cover">
<a-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
<span>{{ item.meta.name }}</span>
</a-breadcrumb-item>
</a-breadcrumb>
<!-- 当前时间 -->
<div class="mainIndex-container-content-breadcrumb-time">当前时间：{{current}}</div>
</div>
<router-view class="sss"></router-view>
<div class="mainIndex-container-content-footer">Copyright © 昆船随行式垛机监测系统</div>
</div>
</div>
</div>
@ -16,24 +23,126 @@
<script>
export default {
name: "mainIndex"
name: "mainIndex",
data() {
return {
breadcrumbList: [],
current: ""
};
},
watch: {
$route(data) {
this.processBread(data);
}
},
methods: {
/**
* 处理全局面包屑
* @param route 当前路由信息
*/
processBread(route) {
this.breadcrumbList = route.matched.filter((el, index) => {
return el.name && (el.meta.unfold || index);
});
this.breadcrumbList.forEach(el => {
if (el.name === route.name) {
el.query = route.query;
}
});
},
// 当前时间
getCurrentTime() {
let time = null;
let _this = this;
function timerFormat() {
if (!time) clearTimeout(time);
time = setTimeout(() => {
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
let h =
date.getHours() < 10
? "0" + date.getHours()
: date.getHours();
let m =
date.getMinutes() < 10
? "0" + date.getMinutes()
: date.getMinutes();
let s =
date.getSeconds() < 10
? "0" + date.getSeconds()
: date.getSeconds();
_this.current =
year +
"年" +
month +
"月" +
day +
"日" +
" " +
h +
":" +
m +
":" +
s;
timerFormat();
}, 1000);
}
timerFormat();
}
},
mounted() {
this.getCurrentTime();
this.processBread(this.$route);
}
};
</script>
<style lang="scss">
.mainIndex {
display: flex;
flex-direction: column;
&-aside {
background: #001529;
}
&-container {
flex: 1;
display: flex;
flex-direction: column;
&-content {
background-color: #eeeeee;
flex: 1;
padding: 24px;
display: flex;
flex-direction: column;
&-breadcrumb {
display: flex;
justify-content: space-between;
margin-bottom: 16px;
.main-breadcrumb-cover {
span {
font-size: 16px;
font-family: PingFangSC, PingFangSC-Medium;
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
}
}
&-time {
font-size: 14px;
font-family: PingFangSC, PingFangSC-Medium;
font-weight: 500;
color: rgba(0, 0, 0, 0.65);
}
}
.sss {
flex: 1;
}
&-footer {
width: 100%;
text-align: center;
padding: 16px 0;
}
}
}
}

58
src/views/realTime/index.vue
Unescape Escape View File

@ -1,12 +1,66 @@
<template>
<div class="realTime bg-white"></div>
<div class="realTime bg-white">
<div class="realTime-position">
<div class="realTime-position-label">选择位置：</div>
<div class="realTime-position-box">
<div class="realTime-position-box-btns"></div>
<div class="realTime-position-box-control" @click="handleUpDown">
{{controlLabel ? '收起' : '展开'}}
<a-icon type="up" :class="{'anticon-rotate': !controlLabel}"></a-icon>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "realTime"
name: "realTime",
data() {
return {
// 收起true 展开false
controlLabel: true
};
},
methods: {
// 展开收起
handleUpDown() {
this.controlLabel = !this.controlLabel;
}
}
};
</script>
<style lang='scss'>
.realTime {
padding: 24px;
&-position {
display: flex;
justify-content: space-between;
&-box {
flex: 1;
display: flex;
justify-content: space-between;
&-btns {
flex: 1;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
&-control {
text-align: right;
cursor: pointer;
color: #55a4ff;
.anticon {
transform: rotate(0deg);
transform-origin: center;
transition: all 0.2s linear;
}
.anticon-rotate {
transform: rotate(180deg);
}
}
}
}
}
</style>
Write Preview
Loading…
Cancel
Save