615 lines
17 KiB
Vue
615 lines
17 KiB
Vue
<template>
|
|
<div class="container">
|
|
<transition name="left">
|
|
<div class="left-content" v-if="!menuShow">
|
|
<!-- 排班管理 -->
|
|
<div class="work-force">
|
|
<div class="title">
|
|
<p class="titleText" text="排班管理" style="font-family: maleGod">
|
|
排班管理
|
|
</p>
|
|
<!-- <p class="work-time">
|
|
<el-date-picker v-model="workTime" type="date" placeholder="选择日期">
|
|
</el-date-picker>
|
|
</p> -->
|
|
</div>
|
|
<!-- 当前值班人员 -->
|
|
<div class="nowWork">
|
|
<p class="titleText" text="当前值班人员" style="font-family: maleGod;font-size: 14px;">
|
|
当前值班人员
|
|
</p>
|
|
<div class="work-items">
|
|
<p class="work-item">
|
|
<img src="../assets/images/itemImg.png" alt="">
|
|
<span>刘伟</span>
|
|
</p>
|
|
<p class="work-item">
|
|
<img src="../assets/images/itemImg.png" alt="">
|
|
<span>李坤霞</span>
|
|
</p>
|
|
<p class="work-item">
|
|
<img src="../assets/images/itemImg.png" alt="">
|
|
<span>蒋玲</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<!-- 中午值班人员 -->
|
|
<div class="wuWork">
|
|
<p class="titleText" text="中午值班人员" style="font-family: maleGod;font-size: 14px;">
|
|
中午值班人员
|
|
</p>
|
|
<div class="work-items">
|
|
<p class="work-item">
|
|
<img src="../assets/images/itemImg.png" alt="">
|
|
<span>刘伟</span>
|
|
</p>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="itemBtn">
|
|
<span>查看排班</span>
|
|
</div>
|
|
</div>
|
|
<!-- 起点业务 -->
|
|
<div class="start-business">
|
|
<div class="title">
|
|
<p class="titleText" text="起点业务" style="font-family: maleGod">
|
|
起点业务
|
|
</p>
|
|
</div>
|
|
<div style="width: 100%;height:calc(100% - 40px)">
|
|
<dv-scroll-board :config="config" style="height:100%;width:100%" />
|
|
</div>
|
|
</div>
|
|
<!-- 学习资料 -->
|
|
<div class="study-means">
|
|
<div class="title">
|
|
<p class="titleText" text="学习资料" style="font-family: maleGod">
|
|
学习资料
|
|
</p>
|
|
</div>
|
|
<div style="width: 100%;height:calc(100% - 40px)">
|
|
|
|
<dv-scroll-board :config="studyData" style="height:100%;width:100%" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
<transition name="right">
|
|
<div class="right-content" v-if="!menuShow">
|
|
<!-- 任务通知 -->
|
|
<div class="notice">
|
|
<div class="title">
|
|
<p class="titleText" text="任务通知" style="font-family: maleGod">
|
|
任务通知
|
|
</p>
|
|
</div>
|
|
<!-- 交办的任务 -->
|
|
<div class="my-notice">
|
|
<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;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>
|
|
|
|
|
|
</div>
|
|
<!-- 服务 -->
|
|
<div class="service">
|
|
<div class="title">
|
|
<p class="titleText" text="服务" style="font-family: maleGod">
|
|
服务
|
|
</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>
|
|
|
|
export default {
|
|
name: 'smartPage',
|
|
components: {
|
|
},
|
|
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: ['排名', '业务类型', '占比'],
|
|
data: [
|
|
[1, '过户', '53.85%'],
|
|
[2, '电费结算协议变更', '19.23%'],
|
|
[3, '更名', '3.5%'],
|
|
[4, '低压居民新装增000', '15.30%'],
|
|
[5, '客户基础信息000', '3.85%'],
|
|
[6, '低压非居民新装000', '3.85%'],
|
|
[7, '过户', '3.85%'],
|
|
[8, '更名', '3.85%'],
|
|
[9, '电费', '3.85%'],
|
|
[10, '过户', '3.85%']
|
|
],
|
|
oddRowBGC: 'transparent',
|
|
evenRowBGC: '#102c50',
|
|
waitTime: 10000,
|
|
headerBGC: 'transparent',
|
|
rowNum: 6,
|
|
columnWidth: [80],
|
|
align: ['center']
|
|
},
|
|
studyData: {
|
|
header: ['序号', '标题', '时间'],
|
|
data: [[1, '关于进一步规范...', '2023-12-12 14:58'], [2, '关于重申在全市... ', '2023-12-12 14:58'], [3, '南京供电公司营...', '2023-12-12 14:58'], [4, '关于重申在全市...', '2023-12-12 14:58']],
|
|
oddRowBGC: 'transparent',
|
|
evenRowBGC: '#102c50',
|
|
waitTime: 10000,
|
|
headerBGC: 'transparent',
|
|
rowNum: 4,
|
|
columnWidth: [80],
|
|
align: ['center']
|
|
},
|
|
// 我交办的任务
|
|
myNotice1: [
|
|
{
|
|
name: '任务总数',
|
|
num: 3,
|
|
},
|
|
{
|
|
name: '已完成',
|
|
num: 3,
|
|
},
|
|
{
|
|
name: '未完成',
|
|
num: 0
|
|
}
|
|
],
|
|
// 我承办的任务
|
|
myNotice2: [{
|
|
name: '任务总数',
|
|
num: 2,
|
|
},
|
|
{
|
|
name: '已完成',
|
|
num: 1,
|
|
},
|
|
{
|
|
name: '未完成',
|
|
num: 1
|
|
}
|
|
]
|
|
}
|
|
},
|
|
mounted(){
|
|
},
|
|
methods:{
|
|
handleShow(){
|
|
this.menuShow = false
|
|
},
|
|
menuShow1(){
|
|
this.menuShow = true
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.el-date-editor.el-input {
|
|
width: 100px;
|
|
|
|
}
|
|
|
|
.el-input__inner {
|
|
height: 30px !important;
|
|
}
|
|
|
|
/deep/ .dv-scroll-board {
|
|
color: #f8fcfd;
|
|
}
|
|
|
|
/deep/ .dv-scroll-board .header {
|
|
background-image: url(../assets/images/stratHead.png) !important;
|
|
}
|
|
|
|
/deep/ .start-business .dv-scroll-board .rows .row-item>div:nth-child(3) {
|
|
font-family: maleGod;
|
|
color: #40accd;
|
|
font-size: 14px;
|
|
}
|
|
.container {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.left-content,
|
|
.right-content {
|
|
// position: absolute;
|
|
width: 20.6%;
|
|
// top: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
.left-content>div,
|
|
.right-content>div {
|
|
width: 100%;
|
|
background-image: url(../assets/images/border.png);
|
|
background-size: 100% 100%;
|
|
margin-bottom: 5px;
|
|
padding: 13px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.left-content,
|
|
.right-content {
|
|
|
|
|
|
|
|
// 左边内容
|
|
.work-force {
|
|
height: 39%;
|
|
|
|
.itemBtn {
|
|
width: 356px;
|
|
height: 35px;
|
|
text-align: center;
|
|
background-size: 100% 100%;
|
|
margin: 0 auto;
|
|
line-height: 35px;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
background-image: url(../assets/images/itemBtn.png);
|
|
}
|
|
|
|
.nowWork,
|
|
.wuWork {
|
|
.titleText {
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.work-items {
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
|
|
.work-item>img {
|
|
width: 83px;
|
|
height: 76px;
|
|
}
|
|
|
|
span {
|
|
display: block;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.start-business {
|
|
height: 35%;
|
|
}
|
|
|
|
@media screen and (min-height:980px) {
|
|
.wuWork>.titleText {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.nowWork,
|
|
.wuWork {
|
|
.titleText {
|
|
margin-bottom: 15px !important;
|
|
}
|
|
|
|
}
|
|
|
|
.itemBtn {
|
|
margin: 8px auto 0 !important;
|
|
}
|
|
}
|
|
|
|
.study-means {
|
|
height: 24.8%;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
// 标题样式
|
|
.title {
|
|
width: 100%;
|
|
background-image: url(../assets/images/border-title.png);
|
|
height: 30px;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
padding-left: 8%;
|
|
box-sizing: border-box;
|
|
color: #fff;
|
|
font-family: 'maleGod';
|
|
align-items: center;
|
|
letter-spacing: 1px;
|
|
margin-bottom: 10px;
|
|
|
|
}
|
|
|
|
// 右边内容
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.titleText {
|
|
position: relative;
|
|
display: inline-block;
|
|
color: #fff;
|
|
}
|
|
|
|
// 渐变颜色
|
|
.titleText:before {
|
|
content: attr(text);
|
|
position: absolute;
|
|
z-index: 10;
|
|
right: 0;
|
|
bottom: 0;
|
|
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> |