lixiaobang
/
YingYeTing
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

代码提交

This commit is contained in:
lixiaobang 2023-02-12 17:53:57 +08:00
parent 2bde3d8cc1 7e75022a1b
commit 86a1a27cfe
6 changed files with 311 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/eventBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
src/assets/images/frame.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
src/assets/images/undefinedBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

3
src/view/equipmentAssets.vue
View File

@ -333,9 +333,6 @@ export default {
};
},
mounted() {
window.setTimeout(()=>{
this.menuHandelShow()
},3400)
},
methods: {
handelBtn(index) {

44
src/view/index.vue
View File

@ -215,21 +215,22 @@
<div class="middleBottomIcon">
</div>
</div>
<transition name="equimentAssets">
<equipment-assets ref="equimentAssets" class="equimentAssets" v-show="equimentAssetsShow"/>
</transition>
<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: "平均办理时长",
@ -410,23 +411,50 @@ export default {
//菜单切换
handelBtn(index) {
this.menuAc = index;
let that = this;
if (index == 0) {
//如果当前页面为设备资产
if (this.equimentAssetsShow == true) {
this.$refs.equimentAssets.menuHandel();
window.setTimeout(() => {
this.equimentAssetsShow = false;
this.menuShow = true;
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) {
let that = this;
if (this.menuShow == true) {
this.menuShow = false;
window.setTimeout(() => {
that.equimentAssetsShow = true;
this.$refs.equimentAssets.menuHandelShow();
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);
}
}
@ -1612,6 +1640,7 @@ export default {
},
components: {
equipmentAssets,
smartPage,
},
};
</script>
@ -2315,4 +2344,7 @@ export default {
.equimentAssets {
position: absolute;
}
.smartPage {
position: absolute;
}
</style>

283
src/view/smartPage.vue
View File

@ -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">
@ -14,7 +15,7 @@
</div>
<!-- 当前值班人员 -->
<div class="nowWork">
<p class="titleText" text="当前值班人员" style="font-family: maleGod;">
<p class="titleText" text="当前值班人员" style="font-family: maleGod;font-size: 14px;">
当前值班人员
</p>
<div class="work-items">
@ -34,7 +35,7 @@
</div>
<!-- 中午值班人员 -->
<div class="wuWork">
<p class="titleText" text="中午值班人员" style="font-family: maleGod;">
<p class="titleText" text="中午值班人员" style="font-family: maleGod;font-size: 14px;">
中午值班人员
</p>
<div class="work-items">
@ -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">
@ -83,14 +86,31 @@
</div>
<!-- 交办的任务 -->
<div class="my-notice">
<p class="titleText" text="我交办的任务" style="font-family: maleGod">
<p class="titleText" text="我交办的任务"
style="font-family: maleGod;margin-bottom: 10px;font-size: 14px;">
我交办的任务
</p>
<div class="myBox">
<div class="noticeBg" v-for="(s, i) in myNotice1">
<section>
<p :class="'p' + i">{{ s.num }}</p>
<p class="name1">{{ s.name }}</p>
</section>
</div>
</div>
</div>
<div class="jiao-notice">
<p class="titleText" text="我承办的任务" style="font-family: maleGod">
<p class="titleText" text="我承办的任务" style="font-family: maleGod;margin:10px 0 10px;font-size: 14px;">
我承办的任务
</p>
<div class="myBox">
<div class="noticeBg" v-for="(s, i) in myNotice2">
<section>
<p :class="'p' + i">{{ s.num }}</p>
<p class="name1">{{ s.name }}</p>
</section>
</div>
</div>
</div>
@ -102,10 +122,38 @@
服务
</p>
</div>
<div class="service-event">
<div class="event-item" v-for="(s, i) in serviceList" :key="i">
<p class="event-title">{{ s.name }}</p>
<p>
<span :class="'span' + i">{{ s.num }}</span>
<span class="unit">件</span>
</p>
</div>
</div>
<p class="titleText" text="疑似不规范的行为" style="font-family: maleGod;margin:10px 0 10px;font-size: 14px;">
疑似不规范的行为
</p>
<!-- 画面 -->
<div class="service-frame">
<div class="frame-item" v-for="(s, i) in serviceFrame">
<div class="frame">
</div>
<div class="frame-cont">
<ul>
<li>{{ s.time }}</li>
<li>{{ s.adress }}</li>
<li style="color:#ebad22">{{ s.statu1 }}</li>
<li style="color:#0e745c">{{ s.statu2 }}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</transition>
</div>
</template>
<script>
@ -116,6 +164,44 @@ export default {
},
data() {
return {
menuShow:true,
// 服务画面
serviceFrame: [
{
time: '2023-02-03 16:23',
adress: '国网雨花营业厅',
statu1: '离岗异常',
statu2: '已办理'
},
{
time: '2023-02-03 16:23',
adress: '国网雨花营业厅',
statu1: '离岗异常',
statu2: '已办理'
},
{
time: '2023-02-03 16:23',
adress: '国网雨花营业厅',
statu1: '离岗异常',
statu2: '已办理'
}
],
// 服务情况事件
serviceList: [
{
name: '已响应事件',
num: 4
},
{
name: '未响应事件',
num: 0
},
{
name: '累计未响应事件',
num: 0
}
],
//
workTime: '',
config: {
header: ['排名', '业务类型', '占比'],
@ -168,7 +254,7 @@ export default {
// 我承办的任务
myNotice2: [{
name: '任务总数',
num:2,
num: 2,
},
{
name: '已完成',
@ -180,6 +266,16 @@ export default {
}
]
}
},
mounted(){
},
methods:{
handleShow(){
this.menuShow = false
},
menuShow1(){
this.menuShow = true
}
}
}
</script>
@ -206,7 +302,6 @@ export default {
color: #40accd;
font-size: 14px;
}
.container {
width: 100%;
height: 100%;
@ -326,10 +421,136 @@ export default {
// 右边内容
.notice {
height: 31.6%;
.my-notice,
.jiao-notice {
width: 100%;
height:41%;
.myBox {
display: flex;
justify-content: space-around;
}
.p0 {
color: #40accd;
}
.noticeBg>section>p:nth-child(1) {
font-size: 18px;
font-family: maleGod;
}
.noticeBg {
background-image: url(../assets/images/notice-item.png);
background-size: 100% 100%;
width: 123px;
height: 68px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
.name1 {
color: #f8fcfd;
font-size: 14px;
margin-top: 5px;
}
.p1 {
color: #54b441
}
.p2 {
color: #b8894b;
}
}
}
}
.service {
height: 67.5%;
.service-event {
display: flex;
justify-content: space-around;
.event-item>p:nth-child(2) {
text-align: center;
font-size: 26px;
}
.event-item {
background-image: url(../assets/images/eventBg.png);
width: 116px;
height: 73px;
padding: 8px;
position: relative;
box-sizing: border-box;
font-size: 14px;
color: #f8fcfd;
.unit {
position: absolute;
bottom: 15px;
right: 10px;
font-size: 14px;
}
.span0,
.span1,
.span2 {
font-family: maleGod;
color: #40accd
}
}
}
.service-frame {
width: 100%;
height: calc(100% - 148px);
.frame-item {
background-image: url(../assets/images/undefinedBg.png);
background-size: 100% 100%;
height: 30%;
margin-bottom: 13px;
padding: 10px 15px 10px;
box-sizing: border-box;
width: 100%;
display: flex;
.frame {
background-image: url(../assets/images/frame.png);
background-size: 100% 100%;
height: 100%;
width: 173px;
}
.frame-cont {
// width: calc(100% - 203px);
width:calc(100% - 173px);
ul {
width:100%;
height:100%;
li{
padding-left:30px;
padding-top:12px;
box-sizing:border-box;
height:22%;
display:flex;
// margin-top:2px;
align-items:center;
font-size:14px;
color:#fff;
}
}
}
}
}
}
}
@ -349,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>