Compare commits
3 Commits
7e75022a1b
...
86a1a27cfe
| Author | SHA1 | Date |
|---|---|---|
 lixiaobang
|
86a1a27cfe | |
|
lixiaobang
|
2bde3d8cc1 | |
|
lixiaobang
|
b873ad0b97 |
|
|
@ -48,6 +48,7 @@ export default {
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
/* text-align: center; */
|
||||
background: #040f26;
|
||||
overflow: hidden;
|
||||
}
|
||||
body{
|
||||
margin: 0;
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 636 B |
Binary file not shown.
|
After Width: | Height: | Size: 672 B |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 643 B |
|
|
@ -24,10 +24,15 @@ export default new Router({
|
|||
name: 'index',
|
||||
component: () => import ('./view/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/equipmentAssets',
|
||||
name: 'equipmentAssets',
|
||||
component: () => import ('./view/equipmentAssets.vue')
|
||||
},
|
||||
{
|
||||
path: '/smartPage',
|
||||
name: 'smartPage',
|
||||
component: () => import ('./view/smartPage.vue')
|
||||
},
|
||||
}
|
||||
]
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,573 @@
|
|||
<template>
|
||||
<div class="equipmentAssets">
|
||||
<transition name="left">
|
||||
<div class="assetsLeft" v-show="menuShow">
|
||||
<div class="btnLeft">
|
||||
<div
|
||||
v-for="(item, index) in menusArr"
|
||||
:key="index"
|
||||
:style="{
|
||||
backgroundImage:
|
||||
btnAc != index
|
||||
? 'url(' + btnBG.pic + ')'
|
||||
: 'url(' + btnBG.actPic + ')',
|
||||
marginLeft: btnAc == index ? '15px' : '0px',
|
||||
}"
|
||||
class="btnList"
|
||||
@click="handelBtn(index)"
|
||||
>
|
||||
<div class="textArr">
|
||||
<p :text="item.text">{{ item.text }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
src="../assets/images/shebeijiantou.png"
|
||||
class="jiantou"
|
||||
@click="menuHandel"
|
||||
v-show="arrow"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="right">
|
||||
<div class="assetsRight" v-show="menuShow">
|
||||
<div class="rightOne" v-if="btnAc == 0">
|
||||
<div class="assetsTitle">
|
||||
<p text="设备名称" style="font-family: 'maleGod'">设备名称</p>
|
||||
</div>
|
||||
<div class="asstesContent1">
|
||||
<div class="models">
|
||||
<div class="assetsStatus">
|
||||
<p style="margin-left: 15px">正常</p>
|
||||
</div>
|
||||
<div class="modelsImg">
|
||||
<img src="@/assets/images/shebeimoxing.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="modelIntroduction">
|
||||
{{ modelIntroduction }}
|
||||
</div>
|
||||
<div class="assetsList">
|
||||
<div
|
||||
v-for="(item, index) in assetsList"
|
||||
:key="index"
|
||||
class="assetsArr"
|
||||
>
|
||||
<div class="listContent">
|
||||
<div>{{ item.name }}</div>
|
||||
<div
|
||||
style="
|
||||
font-family: 'maleGod';
|
||||
color: rgb(76, 181, 209);
|
||||
font-size: 20px;
|
||||
"
|
||||
>
|
||||
{{ item.count }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightOne" v-if="btnAc == 1">
|
||||
<div class="assetsTitle">
|
||||
<p text="设备名称" style="font-family: 'maleGod'">设备名称二</p>
|
||||
</div>
|
||||
<div class="asstesContent1">
|
||||
<div class="models">
|
||||
<div class="assetsStatus">
|
||||
<p style="margin-left: 15px">正常</p>
|
||||
</div>
|
||||
<div class="modelsImg">
|
||||
<img src="@/assets/images/shebeimoxing.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="modelIntroduction">
|
||||
{{ modelIntroduction }}
|
||||
</div>
|
||||
<div class="assetsList">
|
||||
<div
|
||||
v-for="(item, index) in assetsList"
|
||||
:key="index"
|
||||
class="assetsArr"
|
||||
>
|
||||
<div class="listContent">
|
||||
<div>{{ item.name }}</div>
|
||||
<div
|
||||
style="
|
||||
font-family: 'maleGod';
|
||||
color: rgb(76, 181, 209);
|
||||
font-size: 20px;
|
||||
"
|
||||
>
|
||||
{{ item.count }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightOne" v-if="btnAc == 2">
|
||||
<div class="assetsTitle">
|
||||
<p text="设备名称" style="font-family: 'maleGod'">设备名称三</p>
|
||||
</div>
|
||||
<div class="asstesContent1">
|
||||
<div class="models">
|
||||
<div class="assetsStatus">
|
||||
<p style="margin-left: 15px">正常</p>
|
||||
</div>
|
||||
<div class="modelsImg">
|
||||
<img src="@/assets/images/shebeimoxing.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="modelIntroduction">
|
||||
{{ modelIntroduction }}
|
||||
</div>
|
||||
<div class="assetsList">
|
||||
<div
|
||||
v-for="(item, index) in assetsList"
|
||||
:key="index"
|
||||
class="assetsArr"
|
||||
>
|
||||
<div class="listContent">
|
||||
<div>{{ item.name }}</div>
|
||||
<div
|
||||
style="
|
||||
font-family: 'maleGod';
|
||||
color: rgb(76, 181, 209);
|
||||
font-size: 20px;
|
||||
"
|
||||
>
|
||||
{{ item.count }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightOne" v-if="btnAc == 3">
|
||||
<div class="assetsTitle">
|
||||
<p text="设备名称" style="font-family: 'maleGod'">设备名称四</p>
|
||||
</div>
|
||||
<div class="asstesContent1">
|
||||
<div class="models">
|
||||
<div class="assetsStatus">
|
||||
<p style="margin-left: 15px">正常</p>
|
||||
</div>
|
||||
<div class="modelsImg">
|
||||
<img src="@/assets/images/shebeimoxing.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="modelIntroduction">
|
||||
{{ modelIntroduction }}
|
||||
</div>
|
||||
<div class="assetsList">
|
||||
<div
|
||||
v-for="(item, index) in assetsList"
|
||||
:key="index"
|
||||
class="assetsArr"
|
||||
>
|
||||
<div class="listContent">
|
||||
<div>{{ item.name }}</div>
|
||||
<div
|
||||
style="
|
||||
font-family: 'maleGod';
|
||||
color: rgb(76, 181, 209);
|
||||
font-size: 20px;
|
||||
"
|
||||
>
|
||||
{{ item.count }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightOne" v-if="btnAc == 4">
|
||||
<div class="assetsTitle">
|
||||
<p text="设备名称" style="font-family: 'maleGod'">设备名称五</p>
|
||||
</div>
|
||||
<div class="asstesContent1">
|
||||
<div class="models">
|
||||
<div class="assetsStatus">
|
||||
<p style="margin-left: 15px">正常</p>
|
||||
</div>
|
||||
<div class="modelsImg">
|
||||
<img src="@/assets/images/shebeimoxing.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="modelIntroduction">
|
||||
{{ modelIntroduction }}
|
||||
</div>
|
||||
<div class="assetsList">
|
||||
<div
|
||||
v-for="(item, index) in assetsList"
|
||||
:key="index"
|
||||
class="assetsArr"
|
||||
>
|
||||
<div class="listContent">
|
||||
<div>{{ item.name }}</div>
|
||||
<div
|
||||
style="
|
||||
font-family: 'maleGod';
|
||||
color: rgb(76, 181, 209);
|
||||
font-size: 20px;
|
||||
"
|
||||
>
|
||||
{{ item.count }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightOne" v-if="btnAc == 5">
|
||||
<div class="assetsTitle">
|
||||
<p text="设备名称" style="font-family: 'maleGod'">设备名称六</p>
|
||||
</div>
|
||||
<div class="asstesContent1">
|
||||
<div class="models">
|
||||
<div class="assetsStatus">
|
||||
<p style="margin-left: 15px">正常</p>
|
||||
</div>
|
||||
<div class="modelsImg">
|
||||
<img src="@/assets/images/shebeimoxing.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="modelIntroduction">
|
||||
{{ modelIntroduction }}
|
||||
</div>
|
||||
<div class="assetsList">
|
||||
<div
|
||||
v-for="(item, index) in assetsList"
|
||||
:key="index"
|
||||
class="assetsArr"
|
||||
>
|
||||
<div class="listContent">
|
||||
<div>{{ item.name }}</div>
|
||||
<div
|
||||
style="
|
||||
font-family: 'maleGod';
|
||||
color: rgb(76, 181, 209);
|
||||
font-size: 20px;
|
||||
"
|
||||
>
|
||||
{{ item.count }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<img
|
||||
src="../assets/images/shebeijiantoufan.png"
|
||||
class="jiantoufan"
|
||||
@click="menuHandelShow"
|
||||
v-show="!arrow"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import index from "./index.vue";
|
||||
export default {
|
||||
// components: { index },
|
||||
name: "equipmentAssets",
|
||||
data() {
|
||||
return {
|
||||
arrow: false, //箭头隐藏
|
||||
menuShow: false, //菜单隐藏动画
|
||||
modelIntroduction: `具有自助交电费、查询账单、
|
||||
打印发票以及智能管理功能，具备24小时无人值守的自助服务特性，
|
||||
最大限度拓宽业务办理渠道、业务场所及最大限度拓宽业务办理渠道、业务场所及最大程度
|
||||
的人性化服务。`, //模型介绍
|
||||
btnAc: 0,
|
||||
btnBG: {
|
||||
pic: require("@/assets/images/assetsBtn.png"),
|
||||
actPic: require("@/assets/images/assetsBtnAc.png"),
|
||||
},
|
||||
menusArr: [
|
||||
{
|
||||
text: "设备名称一",
|
||||
},
|
||||
{
|
||||
text: "设备名称二",
|
||||
},
|
||||
{
|
||||
text: "设备名称三",
|
||||
},
|
||||
{
|
||||
text: "设备名称四",
|
||||
},
|
||||
{
|
||||
text: "设备名称五",
|
||||
},
|
||||
{
|
||||
text: "设备名称六",
|
||||
},
|
||||
],
|
||||
assetsList: [
|
||||
{
|
||||
name: "当日业务量(个)：",
|
||||
count: "24",
|
||||
},
|
||||
{
|
||||
name: "当日平均办理时间(分钟)：",
|
||||
count: "26",
|
||||
},
|
||||
{
|
||||
name: "当日最长办理时间(分钟)：",
|
||||
count: "68",
|
||||
},
|
||||
{
|
||||
name: "当日最长等待时间(分钟)：",
|
||||
count: "23",
|
||||
},
|
||||
{
|
||||
name: "平均等待时间(分钟)：",
|
||||
count: "17",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
handelBtn(index) {
|
||||
this.btnAc = index;
|
||||
},
|
||||
//隐藏菜单按钮
|
||||
menuHandel() {
|
||||
let that = this;
|
||||
this.menuShow = false;
|
||||
window.setTimeout(() => {
|
||||
that.arrow = false;
|
||||
}, 1000);
|
||||
},
|
||||
//显示菜单按钮
|
||||
menuHandelShow() {
|
||||
this.arrow = true;
|
||||
this.menuShow = true;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.equipmentAssets {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.assetsLeft {
|
||||
width: 15.5%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
background: url("../assets/images/assetsLeft.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.btnLeft {
|
||||
height: 60%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 18%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.btnList {
|
||||
width: 224px;
|
||||
height: 50px;
|
||||
.textArr {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
}
|
||||
.textArr ::before {
|
||||
content: attr(text);
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
// bottom: 0;
|
||||
color: rgb(163, 227, 245);
|
||||
-webkit-mask: linear-gradient(
|
||||
to top,
|
||||
rgba(163, 227, 245, 0.7),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
}
|
||||
.jiantou {
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 29px;
|
||||
top: 48%;
|
||||
right: 3%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.assetsRight {
|
||||
width: 20.6%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
.rightOne {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: url("../assets/images/assetsRight.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.assetsTitle {
|
||||
color: #ffffff;
|
||||
height: 5.5%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding-left: 10%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.assetsTitle ::before {
|
||||
content: attr(text);
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
color: rgb(135, 216, 238);
|
||||
-webkit-mask: linear-gradient(
|
||||
to top,
|
||||
rgba(163, 227, 245, 0.7),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
.asstesContent1 {
|
||||
height: calc(100% - 5.5%);
|
||||
width: 100%;
|
||||
padding: 0% 3%;
|
||||
box-sizing: border-box;
|
||||
.models {
|
||||
width: 100%;
|
||||
height: 50.5%;
|
||||
background: url("../assets/images/assets1.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
.assetsStatus {
|
||||
width: 81px;
|
||||
height: 31px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: url("../assets/images/zhuangtaikuang.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: chartreuse;
|
||||
font-size: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.modelsImg {
|
||||
width: 41%;
|
||||
height: 90%;
|
||||
}
|
||||
}
|
||||
.modelIntroduction {
|
||||
height: 18%;
|
||||
color: #ffffff;
|
||||
letter-spacing: 2px;
|
||||
text-align: justify;
|
||||
text-indent: 30px;
|
||||
margin-top: 10px;
|
||||
line-height: 30px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.modelIntroduction::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
}
|
||||
.assetsList {
|
||||
height: calc(100% - 70.5%);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
overflow-y: auto;
|
||||
.assetsArr {
|
||||
background: url("../assets/images/assetsArr.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 16%;
|
||||
.listContent {
|
||||
margin-left: 10%;
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.assetsList::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//箭头
|
||||
.jiantoufan {
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 29px;
|
||||
top: 48%;
|
||||
left: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
//left动画
|
||||
@keyframes donghua1 {
|
||||
from {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
.left-leave,
|
||||
.left-leave-active,
|
||||
.left-leave-to {
|
||||
animation: donghua1 1s linear;
|
||||
}
|
||||
|
||||
.left-enter,
|
||||
.left-enter-active,
|
||||
.left-enter-to {
|
||||
animation: donghua1 1s linear reverse;
|
||||
}
|
||||
//right动画
|
||||
@keyframes donghua2 {
|
||||
from {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
.right-leave,
|
||||
.right-leave-active,
|
||||
.right-leave-to {
|
||||
animation: donghua2 1s linear;
|
||||
}
|
||||
|
||||
.right-enter,
|
||||
.right-enter-active,
|
||||
.right-enter-to {
|
||||
animation: donghua2 1s linear reverse;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +1,8 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<!-- 左边的内容 -->
|
||||
<div class="left-content">
|
||||
<transition name="left">
|
||||
<div class="left-content" v-show="menuShow">
|
||||
<!-- 营业临厅时长 -->
|
||||
<div class="business-hall">
|
||||
<div class="title">
|
||||
|
|
@ -85,8 +86,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<!-- 右边的内容 -->
|
||||
<div class="right-content">
|
||||
<transition name="right">
|
||||
<div class="right-content" v-show="menuShow">
|
||||
<!-- 缴费情况 -->
|
||||
<div class="payment">
|
||||
<div class="title">
|
||||
|
|
@ -193,6 +196,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<div class="middle-content">
|
||||
<!-- 内容头部 -->
|
||||
<div class="middleTop">
|
||||
|
|
@ -204,25 +208,29 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="middleBottom">
|
||||
|
||||
<div class="menuBtn" :class="{ 'menuBtn1': menuAc == index }" v-for="(item, index) in menu" :key="index"
|
||||
@click="handelBtn(index)">
|
||||
<img :src="item.icon" />
|
||||
|
||||
<div class="menuBtn" :class="{'menuBtn1' : menuAc == index}" v-for="(item,index) in menu" :key="index" @click="handelBtn(index)">
|
||||
<img :src="menuAc != index ? item.icon : item.iconAc"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="middleBottomIcon">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<equipment-assets ref="equimentAssets" class="equimentAssets" v-show="equimentAssetsShow"/>
|
||||
<smartPage ref="smartPage" class="smartPage" v-show="smartPageShow"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import equipmentAssets from "./equipmentAssets.vue";
|
||||
import smartPage from "./smartPage.vue";
|
||||
export default {
|
||||
name: "index",
|
||||
data() {
|
||||
return {
|
||||
menuShow: true, //菜单显示
|
||||
equimentAssetsShow: false, //设备资产
|
||||
smartPageShow: false, //智慧
|
||||
hallList: [
|
||||
{
|
||||
font: "平均办理时长",
|
||||
|
|
@ -353,37 +361,41 @@ export default {
|
|||
// 内容头部
|
||||
middleTopList: [
|
||||
{
|
||||
name: '工单总数',
|
||||
num: 1311
|
||||
name: "工单总数",
|
||||
num: 1311,
|
||||
},
|
||||
{
|
||||
name: '已归档',
|
||||
num: 1076
|
||||
name: "已归档",
|
||||
num: 1076,
|
||||
},
|
||||
{
|
||||
name: '代办工单',
|
||||
num: 24
|
||||
name: "代办工单",
|
||||
num: 24,
|
||||
},
|
||||
{
|
||||
name: '预受理信息预警',
|
||||
num: 0
|
||||
name: "预受理信息预警",
|
||||
num: 0,
|
||||
},
|
||||
{
|
||||
name: '柜台状态',
|
||||
num: '在线'
|
||||
}
|
||||
name: "柜台状态",
|
||||
num: "在线",
|
||||
},
|
||||
],
|
||||
menu: [
|
||||
{
|
||||
icon: require("@/assets/images/zongti.png")
|
||||
icon: require("@/assets/images/zongti.png"),
|
||||
iconAc: require("@/assets/images/zongtiAc.png"),
|
||||
},
|
||||
{
|
||||
icon: require("@/assets/images/zhihui.png")
|
||||
icon: require("@/assets/images/zhihui.png"),
|
||||
iconAc: require("@/assets/images/zhihuiAc.png"),
|
||||
},
|
||||
{
|
||||
icon: require("@/assets/images/shebei.png")
|
||||
}
|
||||
]
|
||||
icon: require("@/assets/images/shebei.png"),
|
||||
iconAc: require("@/assets/images/shebeiAc.png"),
|
||||
},
|
||||
],
|
||||
menuAc: 0,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -393,26 +405,59 @@ export default {
|
|||
|
||||
this.drawHallChart();
|
||||
this.drawFlowChart();
|
||||
this.handelBtn(0)
|
||||
this.handelBtn(0);
|
||||
},
|
||||
methods: {
|
||||
//菜单切换
|
||||
handelBtn(index) {
|
||||
this.menuAc = index
|
||||
this.menuAc = index;
|
||||
let that = this;
|
||||
if (index == 0) {
|
||||
this.menu[0].icon = require("@/assets/images/zongtiAc.png")
|
||||
this.menu[1].icon = require("@/assets/images/zhihui.png")
|
||||
this.menu[2].icon = require("@/assets/images/shebei.png")
|
||||
} else if (index == 1) {
|
||||
this.menu[0].icon = require("@/assets/images/zongti.png")
|
||||
this.menu[1].icon = require("@/assets/images/zhihuiAc.png")
|
||||
this.menu[2].icon = require("@/assets/images/shebei.png")
|
||||
} else if (index == 2) {
|
||||
this.menu[0].icon = require("@/assets/images/zongti.png")
|
||||
this.menu[1].icon = require("@/assets/images/zhihui.png")
|
||||
this.menu[2].icon = require("@/assets/images/shebeiAc.png")
|
||||
//如果当前页面为设备资产
|
||||
if (this.equimentAssetsShow == true) {
|
||||
this.$refs.equimentAssets.menuHandel();
|
||||
window.setTimeout(() => {
|
||||
that.equimentAssetsShow = false;
|
||||
that.menuShow = true;
|
||||
}, 1500);
|
||||
} else if (this.smartPageShow == true) {
|
||||
this.$refs.smartPage.menuShow1();
|
||||
window.setTimeout(() => {
|
||||
that.smartPageShow = false;
|
||||
that.menuShow = true;
|
||||
}, 1500);
|
||||
}
|
||||
} else if (index == 1) {
|
||||
if (this.menuShow == true) {
|
||||
this.menuShow = false;
|
||||
window.setTimeout(() => {
|
||||
that.smartPageShow = true;
|
||||
that.$refs.smartPage.handleShow();
|
||||
}, 1500);
|
||||
} else if (this.equimentAssetsShow == true) {
|
||||
this.$refs.equimentAssets.menuHandel();
|
||||
window.setTimeout(() => {
|
||||
that.equimentAssetsShow = false;
|
||||
that.smartPageShow = true;
|
||||
this.$refs.smartPage.handleShow();
|
||||
}, 1500);
|
||||
}
|
||||
} else if (index == 2) {
|
||||
if (this.menuShow == true) {
|
||||
this.menuShow = false;
|
||||
window.setTimeout(() => {
|
||||
that.equimentAssetsShow = true;
|
||||
that.$refs.equimentAssets.menuHandelShow();
|
||||
}, 1500);
|
||||
} else if (this.smartPageShow == true) {
|
||||
this.$refs.smartPage.menuShow1();
|
||||
window.setTimeout(() => {
|
||||
that.smartPageShow = false;
|
||||
that.equimentAssetsShow = true;
|
||||
that.$refs.equimentAssets.menuHandelShow();
|
||||
}, 1500);
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
drawHallChart() {
|
||||
let myChart = this.$echarts.getInstanceByDom(this.$refs.hallChart);
|
||||
|
|
@ -1593,6 +1638,10 @@ export default {
|
|||
this.serviceTypeActive = index;
|
||||
},
|
||||
},
|
||||
components: {
|
||||
equipmentAssets,
|
||||
smartPage,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -1603,6 +1652,7 @@ export default {
|
|||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.left-content,
|
||||
|
|
@ -1634,12 +1684,12 @@ export default {
|
|||
|
||||
.menuBtn {
|
||||
width: 142px;
|
||||
height: 52px
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
.menuBtn1 {
|
||||
width: 188px;
|
||||
height: 74px
|
||||
height: 74px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1647,7 +1697,7 @@ export default {
|
|||
z-index: 100;
|
||||
width: 1115px;
|
||||
height: 57px;
|
||||
background: url('../assets/images/menubottom.png') no-repeat;
|
||||
background: url("../assets/images/menubottom.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: absolute;
|
||||
bottom: -37px;
|
||||
|
|
@ -1690,7 +1740,6 @@ export default {
|
|||
width: 102px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
|
||||
.span0 {
|
||||
|
|
@ -1722,10 +1771,7 @@ export default {
|
|||
height: 16px;
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
|
|
@ -1751,10 +1797,13 @@ export default {
|
|||
z-index: 10;
|
||||
bottom: 0;
|
||||
color: rgb(163, 227, 245);
|
||||
-webkit-mask: linear-gradient(to top, rgba(163, 227, 245, 0.7), transparent);
|
||||
-webkit-mask: linear-gradient(
|
||||
to top,
|
||||
rgba(163, 227, 245, 0.7),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
.hall-box .item {
|
||||
width: 48.5%;
|
||||
height: 100%;
|
||||
|
|
@ -1772,7 +1821,7 @@ export default {
|
|||
|
||||
.hall-time1,
|
||||
.hall-time0 {
|
||||
font-family: 'maleGod';
|
||||
font-family: "maleGod";
|
||||
font-size: 25px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
|
|
@ -1801,7 +1850,7 @@ export default {
|
|||
padding-left: 8%;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
font-family: 'maleGod';
|
||||
font-family: "maleGod";
|
||||
align-items: center;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 10px;
|
||||
|
|
@ -1817,7 +1866,6 @@ export default {
|
|||
|
||||
.left-content .business-hall {
|
||||
height: 38.2%;
|
||||
|
||||
}
|
||||
|
||||
.left-content .passenger-flow {
|
||||
|
|
@ -1856,12 +1904,8 @@ export default {
|
|||
font-size: 25px;
|
||||
color: #4bbfde;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.flow-right {
|
||||
width: 56%;
|
||||
height: 100%;
|
||||
|
|
@ -1924,8 +1968,6 @@ export default {
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.flow-item span:nth-child(2) {
|
||||
|
|
@ -1933,7 +1975,6 @@ export default {
|
|||
color: #c0c0c4;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1948,11 +1989,11 @@ export default {
|
|||
width: 33%;
|
||||
|
||||
.img2 {
|
||||
background-image: url(../assets/images/people-icon.png)
|
||||
background-image: url(../assets/images/people-icon.png);
|
||||
}
|
||||
|
||||
.img1 {
|
||||
background-image: url(../assets/images/paizi.png)
|
||||
background-image: url(../assets/images/paizi.png);
|
||||
}
|
||||
|
||||
// display: flex;
|
||||
|
|
@ -1970,20 +2011,18 @@ export default {
|
|||
}
|
||||
|
||||
.stat-num {
|
||||
font-family: 'maleGod';
|
||||
font-family: "maleGod";
|
||||
color: #4bbfde !important;
|
||||
font-size: 20px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-height: 980px) {
|
||||
.stat-num {
|
||||
font-size: 20px;
|
||||
font-family: 'maleGod';
|
||||
font-family: "maleGod";
|
||||
// display: inline-block;
|
||||
margin: 4px;
|
||||
position: relative;
|
||||
|
|
@ -1991,7 +2030,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.right-content .payment {
|
||||
height: 38.3%;
|
||||
|
||||
|
|
@ -2229,7 +2267,7 @@ export default {
|
|||
font-size: 25px;
|
||||
font-family: maleGod;
|
||||
margin-top: 7px;
|
||||
color: #4bbfde
|
||||
color: #4bbfde;
|
||||
}
|
||||
|
||||
.item-value3 {
|
||||
|
|
@ -2237,7 +2275,7 @@ export default {
|
|||
}
|
||||
|
||||
.item-value4 {
|
||||
color: #2c6e43
|
||||
color: #2c6e43;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -2261,4 +2299,52 @@ export default {
|
|||
background-image: url(../assets/images/content-icon5.png);
|
||||
}
|
||||
}
|
||||
//left动画
|
||||
@keyframes donghua1 {
|
||||
from {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
.left-leave,
|
||||
.left-leave-active,
|
||||
.left-leave-to {
|
||||
animation: donghua1 1s linear;
|
||||
}
|
||||
|
||||
.left-enter,
|
||||
.left-enter-active,
|
||||
.left-enter-to {
|
||||
animation: donghua1 1s linear reverse;
|
||||
}
|
||||
//right动画
|
||||
@keyframes donghua2 {
|
||||
from {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
.right-leave,
|
||||
.right-leave-active,
|
||||
.right-leave-to {
|
||||
animation: donghua2 1s linear;
|
||||
}
|
||||
|
||||
.right-enter,
|
||||
.right-enter-active,
|
||||
.right-enter-to {
|
||||
animation: donghua2 1s linear reverse;
|
||||
}
|
||||
.equimentAssets {
|
||||
position: absolute;
|
||||
}
|
||||
.smartPage {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="left-content">
|
||||
<transition name="left">
|
||||
<div class="left-content" v-if="!menuShow">
|
||||
<!-- 排班管理 -->
|
||||
<div class="work-force">
|
||||
<div class="title">
|
||||
|
|
@ -57,7 +58,7 @@
|
|||
</p>
|
||||
</div>
|
||||
<div style="width: 100%;height:calc(100% - 40px)">
|
||||
<dv-scroll-board :config="config" style="height:100%" />
|
||||
<dv-scroll-board :config="config" style="height:100%;width:100%" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 学习资料 -->
|
||||
|
|
@ -69,11 +70,13 @@
|
|||
</div>
|
||||
<div style="width: 100%;height:calc(100% - 40px)">
|
||||
|
||||
<dv-scroll-board :config="studyData" style="height:100%" />
|
||||
<dv-scroll-board :config="studyData" style="height:100%;width:100%" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-content">
|
||||
</transition>
|
||||
<transition name="right">
|
||||
<div class="right-content" v-if="!menuShow">
|
||||
<!-- 任务通知 -->
|
||||
<div class="notice">
|
||||
<div class="title">
|
||||
|
|
@ -150,6 +153,7 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -160,6 +164,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
menuShow:true,
|
||||
// 服务画面
|
||||
serviceFrame: [
|
||||
{
|
||||
|
|
@ -261,6 +266,16 @@ export default {
|
|||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
},
|
||||
methods:{
|
||||
handleShow(){
|
||||
this.menuShow = false
|
||||
},
|
||||
menuShow1(){
|
||||
this.menuShow = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -287,7 +302,6 @@ export default {
|
|||
color: #40accd;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -556,4 +570,46 @@ export default {
|
|||
color: rgb(163, 227, 245);
|
||||
-webkit-mask: linear-gradient(to top, rgb(163, 227, 245), transparent);
|
||||
}
|
||||
//left动画
|
||||
@keyframes donghua1 {
|
||||
from {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
.left-leave,
|
||||
.left-leave-active,
|
||||
.left-leave-to {
|
||||
animation: donghua1 1s linear;
|
||||
}
|
||||
|
||||
.left-enter,
|
||||
.left-enter-active,
|
||||
.left-enter-to {
|
||||
animation: donghua1 1s linear reverse;
|
||||
}
|
||||
//right动画
|
||||
@keyframes donghua2 {
|
||||
from {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
.right-leave,
|
||||
.right-leave-active,
|
||||
.right-leave-to {
|
||||
animation: donghua2 1s linear;
|
||||
}
|
||||
|
||||
.right-enter,
|
||||
.right-enter-active,
|
||||
.right-enter-to {
|
||||
animation: donghua2 1s linear reverse;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue