elink-star
/
epmet-work-pc-chengyang
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

需求的列表和弹窗，基本完成

feature
tianq 3 years ago
parent
e2e65533a4
commit
daf160b9c1
2 changed files with 195 additions and 43 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 78
      src/assets/scss/dataBoard/popup-info.scss
  2. 160
      src/views/dataBoard/cpts/need-details.vue

78
src/assets/scss/dataBoard/popup-info.scss
View File

@ -63,4 +63,82 @@
} }
} }
} }
/deep/.timeline {
margin-top: 15px;
.sucess {
.el-timeline-item__node {
width: 16px;
height: 16px;
background-color: #0c81fe;
border: solid 3px #fff;
box-shadow: 0px 0px 10px 5px #0c81fe;
}
}
.el-timeline-item__node {
width: 16px;
height: 16px;
background: #09176c;
border: 1px solid #007ae7;
border-radius: 50%;
}
.el-timeline-item__tail {
left: 6px;
border-left: 1px solid #6398d1;
}
.status-box {
display: flex;
.status2 {
width: 66px;
height: 24px;
background: #0c81fe;
border-radius: 10px 0px 10px 0px;
color: #fefefe;
text-align: center;
line-height: 24px;
}
.status1 {
width: 66px;
height: 24px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #3d86ff;
line-height: 24px;
}
.timestamp {
width: 121px;
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: 300;
color: #b5d9ff;
line-height: 32px;
opacity: 0.46;
margin-left: 11px;
}
}
.content {
display: flex;
.field {
width: 80px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #b5d9ff;
line-height: 32px;
opacity: 0.76;
text-align: right;
}
.value {
flex: 1;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #ffffff;
line-height: 32px;
}
}
}
} }

160
src/views/dataBoard/cpts/need-details.vue
View File

@ -38,39 +38,81 @@
</div> </div>
</div> </div>
<div class="m-info" v-if="detailType == '政府支撑'"> <div class="m-info" v-if="detailType == '政府支撑'">
<div style="width: 50%;"> <el-row>
<div class="row"> <el-col :span="12">
<div class="item"> <div class="subtitle">
<div class="field">项目标题：</div> <i class="i-chunk"></i>
<div class="value">{{ info.title }}</div> 事件详情
<i class="i-line"></i>
</div> </div>
<div class="item"> <div class="row">
<div class="field">项目方案：</div> <div class="item">
<div class="value">{{ info.content }}</div> <div class="field">项目标题：</div>
<div class="value">{{ info.title }}</div>
</div>
</div> </div>
<div class="item"> <div class="row">
<div class="field">内部备注：</div> <div class="item">
<div class="value">{{ info.remark }}</div> <div class="field">项目方案：</div>
<div class="value">{{ info.content }}</div>
</div>
</div> </div>
<div class="item"> <div class="row">
<div class="field">当前处理部门：</div> <div class="item">
<div class="value">{{ info.department }}</div> <div class="field">内部备注：</div>
<div class="value">{{ info.remark }}</div>
</div>
</div> </div>
<div class="item"> <div class="row">
<div class="field">分类：</div> <div class="item">
<div class="value">{{ info.class }}{{ info.sub_class }}</div> <div class="field">当前处理部门：</div>
<div class="value">{{ info.department }}</div>
</div>
</div> </div>
<div class="item"> <div class="row">
<div class="field">标签：</div> <div class="item">
<div class="value">{{ info.label }}</div> <div class="field">分类：</div>
<div class="value">{{ info.class }}{{ info.sub_class }}</div>
</div>
</div> </div>
<div class="item"> <div class="row">
<div class="field">操作：</div> <div class="item">
<!-- <div class="value">{{ info.report_user_mobile }}</div> --> <div class="field">标签：</div>
<div class="value">{{ info.label }}</div>
</div>
</div> </div>
</div> <div class="row">
</div> <div class="item">
<div style="width: 50%;"></div> <div class="field">操作：</div>
<!-- <div class="value">{{ info.report_user_mobile }}</div> -->
</div>
</div>
</el-col>
<el-col :span="12">
<div class="subtitle">
<i class="i-chunk"></i>
处理进展
<i class="i-line"></i>
</div>
<el-timeline class="timeline">
<el-timeline-item v-for="(item, index) in progress" :key="index" :class="index == progress.length - 1 ? 'sucess' : ''">
<div class="status-box">
<div class="status2" v-if="index == progress.length - 1">{{ item.type }}</div>
<div class="status1" v-else>{{ item.type }}</div>
<div class="timestamp">{{ item.date }}</div>
</div>
<div class="content">
<div class="field">处理部门：</div>
<div class="value">{{ item.department }}</div>
</div>
<div class="content">
<div class="field">说明：</div>
<div class="value">{{ item.remark }}</div>
</div>
</el-timeline-item>
</el-timeline>
</el-col>
</el-row>
</div> </div>
<div class="m-info" v-else> <div class="m-info" v-else>
<div class="row"> <div class="row">
@ -159,22 +201,23 @@ export default {
created() {}, created() {},
data() { data() {
return { return {
progress: [],
info: { info: {
grid: '--', // grid: '--',
parent_category: '--', // parent_category: '--',
category: '--', // category: '--',
report_type: '--', // report_type: '--',
report_user_name: '--', // report_user_name: '--',
report_time: '--', // report_time: '--',
report_user_mobile: '--', // report_user_mobile: '--',
demand_user_name: '--', // demand_user_name: '--',
want_service_time: '--', // want_service_time: '--',
content: '--', // content: '--',
server_name: '--', // server_name: '--',
service_start_time: '--', // service_start_time: '--',
service_end_time: '--', // service_end_time: '--',
finish_result: '--', // finish_result: '--',
score: '--' // score: '--'
} }
}; };
}, },
@ -217,8 +260,37 @@ export default {
} }
); );
if (code === 0) { if (code === 0) {
this.info = { ...this.info, ...data[0] }; this.info = { ...this.info, ...data[0] };
if (this.detailType == '政府支撑') {
this.progress = this.info.progress;
this.progress = [
{
type: '适',
date: '2023-03-08 16:08:45',
department: '节',
remark: '非片实先只生音或话还种却处也长九整。'
},
{
type: '取',
date: '2023-03-08 16:08:45',
department: '战',
remark: '给查段义上影再圆认军律矿最影。'
},
{
type: '处',
date: '2023-03-08 16:08:45',
department: '才',
remark: '才除证线志路对这分收飞气建龙最说。'
},
{
type: '调',
date: '2023-03-08 16:08:45',
department: '造',
remark: '便以群群数全进更几采许定结前带。'
}
];
}
console.log(this.info); console.log(this.info);
} else { } else {
this.$message.error(msg); this.$message.error(msg);
@ -228,6 +300,8 @@ export default {
}; };
</script> </script>
<style scoped> <style scoped>
.m-info .row .item .field{width: 120px!important;} .m-info .row .item .field {
width: 120px !important;
}
</style> </style>
<style lang="scss" src="@/assets/scss/dataBoard/popup-info.scss" scoped></style> <style lang="scss" src="@/assets/scss/dataBoard/popup-info.scss" scoped></style>

Write Preview
Loading…
Cancel
Save