代码提交
This commit is contained in:
parent
c46cb81bb4
commit
7e75022a1b
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -14,7 +14,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 +34,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">
|
||||
|
|
@ -83,14 +83,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,8 +119,35 @@
|
|||
服务
|
||||
</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>
|
||||
</div>
|
||||
|
|
@ -116,6 +160,43 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
// 服务画面
|
||||
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 +249,7 @@ export default {
|
|||
// 我承办的任务
|
||||
myNotice2: [{
|
||||
name: '任务总数',
|
||||
num:2,
|
||||
num: 2,
|
||||
},
|
||||
{
|
||||
name: '已完成',
|
||||
|
|
@ -326,10 +407,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue