代码提交
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>
|
||||||
<!-- 当前值班人员 -->
|
<!-- 当前值班人员 -->
|
||||||
<div class="nowWork">
|
<div class="nowWork">
|
||||||
<p class="titleText" text="当前值班人员" style="font-family: maleGod;">
|
<p class="titleText" text="当前值班人员" style="font-family: maleGod;font-size: 14px;">
|
||||||
当前值班人员
|
当前值班人员
|
||||||
</p>
|
</p>
|
||||||
<div class="work-items">
|
<div class="work-items">
|
||||||
|
|
@ -34,7 +34,7 @@
|
||||||
</div>
|
</div>
|
||||||
<!-- 中午值班人员 -->
|
<!-- 中午值班人员 -->
|
||||||
<div class="wuWork">
|
<div class="wuWork">
|
||||||
<p class="titleText" text="中午值班人员" style="font-family: maleGod;">
|
<p class="titleText" text="中午值班人员" style="font-family: maleGod;font-size: 14px;">
|
||||||
中午值班人员
|
中午值班人员
|
||||||
</p>
|
</p>
|
||||||
<div class="work-items">
|
<div class="work-items">
|
||||||
|
|
@ -83,14 +83,31 @@
|
||||||
</div>
|
</div>
|
||||||
<!-- 交办的任务 -->
|
<!-- 交办的任务 -->
|
||||||
<div class="my-notice">
|
<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>
|
</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>
|
||||||
<div class="jiao-notice">
|
<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>
|
</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>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -102,8 +119,35 @@
|
||||||
服务
|
服务
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</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>
|
||||||
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -116,6 +160,43 @@ export default {
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
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: '',
|
workTime: '',
|
||||||
config: {
|
config: {
|
||||||
header: ['排名', '业务类型', '占比'],
|
header: ['排名', '业务类型', '占比'],
|
||||||
|
|
@ -168,7 +249,7 @@ export default {
|
||||||
// 我承办的任务
|
// 我承办的任务
|
||||||
myNotice2: [{
|
myNotice2: [{
|
||||||
name: '任务总数',
|
name: '任务总数',
|
||||||
num:2,
|
num: 2,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '已完成',
|
name: '已完成',
|
||||||
|
|
@ -326,10 +407,136 @@ export default {
|
||||||
// 右边内容
|
// 右边内容
|
||||||
.notice {
|
.notice {
|
||||||
height: 31.6%;
|
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 {
|
.service {
|
||||||
height: 67.5%;
|
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