xuhaoyun 1 year ago
commit 263a526fbf

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 378 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 351 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

@ -5,17 +5,25 @@
<el-tab-pane label="表单信息" name="first">
<MyCourseDetailForm ref="myCourseDetailForm"></MyCourseDetailForm>
</el-tab-pane>
<el-tab-pane label="流程图" name="second">流程图</el-tab-pane>
<el-tab-pane label="流转记录" name="third">流转记录</el-tab-pane>
<el-tab-pane label="流程图" name="second">
<MyCourseDetailPicture ref="myCourseDetailPicture"></MyCourseDetailPicture>
</el-tab-pane>
<el-tab-pane label="流转记录" name="third">
<MyCourseDetailRecords ref="myCourseDetailRecords"></MyCourseDetailRecords>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import MyCourseDetailForm from "./myCourseDetailForm";
import MyCourseDetailPicture from "./myCourseDetailPicture";
import MyCourseDetailRecords from './myCourseDetailRecords'
export default {
name: "MyCourseDetail",
components:{
MyCourseDetailForm
MyCourseDetailForm,
MyCourseDetailPicture,
MyCourseDetailRecords
},
data() {
return {

@ -82,6 +82,7 @@
</template>
<script>
export default {
name: "MyCourseDetailForm",
data() {
return {
attachment_show: true, //

@ -0,0 +1,130 @@
<template>
<!-- 我的流程流程图 -->
<div class="picture_body">
<!-- 流程图示例 -->
<div class="picture_title">
<div class="picture_area">
<div class="picture_icon_one"></div>
<div class="picture_text_one">已经过的节点</div>
</div>
<div class="picture_area">
<div class="picture_icon_two"></div>
<div class="picture_text_two">未经过的节点</div>
</div>
<div class="picture_area">
<div class="picture_icon_three"></div>
<div class="picture_text_three">当前节点</div>
</div>
<div class="picture_area">
<div class="picture_icon_four"></div>
<div class="picture_text_four">已经过的出口</div>
</div>
<div class="picture_area">
<div class="picture_icon_five"></div>
<div class="picture_text_five">未经过的出口</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "MyCourseDetailPicture",
data() {
return {};
},
};
</script>
<style lang="less" scoped>
.picture_body {
width: 95.9vw;
height: 70vh;
// border: 0.1px solid #3f5564;
background: url("~@/assets/companyFile/09091.png") no-repeat !important;
background-size: 100% 100% !important;
.picture_title {
width: 94vw;
height: 6vh;
margin-left: 1vw;
border-bottom: 0.1px solid #3f5564;
display: flex;
.picture_area {
width: 8vw;
height: 4vh;
margin-top: 1vh;
margin-left: 1vw;
// border: 0.1px solid #3f5564;
display: flex;
.picture_icon_one {
width: 18px;
height: 18px;
// border: 0.1px solid #fff;
border-radius: 50%;
background: #41ffc4;
margin-top: 0.9vh;
}
.picture_text_one {
color: #fff;
margin-left: 1vw;
height: 4vh;
line-height: 4vh;
}
.picture_icon_two {
width: 18px;
height: 18px;
// border: 0.1px solid #fff;
border-radius: 50%;
background: #c8c8c8;
margin-top: 0.9vh;
}
.picture_text_two {
color: #fff;
margin-left: 1vw;
height: 4vh;
line-height: 4vh;
}
.picture_icon_three {
width: 18px;
height: 18px;
// border: 0.1px solid #fff;
border-radius: 50%;
background: #2fe7ff;
margin-top: 0.9vh;
}
.picture_text_three {
color: #fff;
margin-left: 1vw;
height: 4vh;
line-height: 4vh;
}
.picture_icon_four {
width: 18px;
height: 18px;
// border: 0.1px solid #fff;
background: url("~@/assets/companyFile/rightarrow.png") no-repeat !important;
background-size: 100% 100% !important;
margin-top: 0.9vh;
}
.picture_text_four {
color: #fff;
margin-left: 1vw;
height: 4vh;
line-height: 4vh;
}
.picture_icon_five {
width: 18px;
height: 18px;
// border: 0.1px solid #fff;
background: url("~@/assets/companyFile/rightarrow02.png") no-repeat !important;
background-size: 100% 100% !important;
margin-top: 0.9vh;
}
.picture_text_five {
color: #fff;
margin-left: 1vw;
height: 4vh;
line-height: 4vh;
}
}
}
}
</style>

@ -0,0 +1,300 @@
<template>
<!-- 流程记录 -->
<div class="record_body">
<div class="all_step">
<div class="record_step" v-for="item in record_list" :key="item.id">
<!-- 侧边进度图标 -->
<div class="step">
<div class="step_icon">
<i v-if="icon_show" class="el-icon-success"></i>
<i v-else class="el-icon-time"></i>
</div>
<div class="step_line"></div>
</div>
<div class="step_table">
<div class="step_table_top">
<div class="step_table_top_name">{{ item.name }}</div>
<div class="step_table_top_opeartion">
<div class="opeartion_num">
<div class="opeartion_num_text">操作者总计:</div>
<div class="opeartion_num_val">{{ item.opeartion_num }}</div>
</div>
<div class="opeartion_num">
<div class="opeartion_num_text">已操作:</div>
<div class="opeartion_num_val">
{{ item.have_opeartion_num }}
</div>
</div>
<div class="opeartion_num">
<div class="opeartion_num_text">未操作:</div>
<div class="not_opeartion_num_val">
{{ item.not_opeartion_num }}
</div>
</div>
</div>
</div>
<el-table
height="250"
:data="item.table_list"
:header-cell-style="table_header"
:cell-style="{ background: 'revert', 'text-align': 'center' }"
>
<el-table-column prop="change" label="实际办理" width="280">
</el-table-column>
<el-table-column prop="under_change" label="候选办理" width="280">
</el-table-column>
<el-table-column prop="type" label="操作状态" width="280">
</el-table-column>
<el-table-column prop="load_time" label="接收时间" width="280">
</el-table-column>
<el-table-column prop="time" label="操作时间" width="280">
</el-table-column>
<el-table-column prop="use_time" label="耗时"> </el-table-column>
</el-table>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "MyCourseDetailRecords",
data() {
return {
record_list: [
{
id: "1",
name: "卫健部门",
opeartion_num: "2",
have_opeartion_num: "1",
not_opeartion_num: "1",
table_list: [
{
change: "吴沁",
under_change: "治安大队",
type: "已操作",
load_time: "2023-06-06 12:53:30",
time: "2023-06-06 12:53:30",
use_time: "2秒",
},
{
change: "吴沁",
under_change: "治安大队",
type: "已操作",
load_time: "2023-06-06 12:53:30",
time: "2023-06-06 12:53:30",
use_time: "2秒",
},
{
change: "吴沁",
under_change: "治安大队",
type: "已操作",
load_time: "2023-06-06 12:53:30",
time: "2023-06-06 12:53:30",
use_time: "2秒",
},
{
change: "吴沁",
under_change: "治安大队",
type: "已操作",
load_time: "2023-06-06 12:53:30",
time: "2023-06-06 12:53:30",
use_time: "2秒",
},
{
change: "吴沁",
under_change: "治安大队",
type: "已操作",
load_time: "2023-06-06 12:53:30",
time: "2023-06-06 12:53:30",
use_time: "2秒",
},
],
},
{
id: "2",
},
{
id: "3",
name: "发布人",
},
],
src: require("../../../assets/companyFile/loadtrue.png"),
icon_show: true, //
};
},
methods: {
//
table_header({ row, rowIndex }) {
console.log(row);
console.log(rowIndex);
return {
"text-align": "center", //
color: "#fff",
border: "0.1px solid #3b4f5c",
};
},
},
};
</script>
<style lang='less' scoped>
.record_body {
width: 95.9vw;
height: 70vh;
background: url("~@/assets/companyFile/09091.png") no-repeat !important;
background-size: 100% 100% !important;
overflow-y: scroll;
}
.record_body::-webkit-scrollbar {
display: none;
width: 6px;
background-color: #5e666a;
border-radius: 4px;
}
.record_body::-webkit-scrollbar-thumb {
display: none;
width: 5px;
background-color: #3c4b4a;
border-radius: 4px;
}
.all_step {
margin-top: 1vh;
}
/* 不固定高度,给自由展示空间 */
.record_step {
width: 94vw;
height: 31vh;
margin-left: 1vw;
// border: 0.1px solid #3f5564;
display: flex;
.step {
width: 30px;
// margin-top: 10%;
margin-left: 1vw;
height: 100%;
// border: 0.1px solid #fff;
display: flex;
flex-direction: column;
.step_icon {
width: 30px;
height: 30px;
// border: 0.1px solid #fff;
border-radius: 50%;
.el-icon-success {
font-size: 30px;
color: #41ffc4;
}
.el-icon-time {
font-size: 30px;
color: #38eafc;
}
}
.step_line {
flex-grow: 1;
width: 2px;
background: #56808f;
margin: auto;
}
}
.step_table {
margin-left: 1vw;
// border: 0.1px solid #fff;
width: 90vw;
// height: 30vh;
.step_table_top {
// border: 0.1px solid #fff;
width: 90vw;
height: 5vh;
display: flex;
justify-content: space-between;
.step_table_top_name {
width: 10vw;
color: #fff;
text-align: left;
height: 5vh;
text-shadow: 0 0 9px rgba(21, 255, 198, 0.64);
}
.step_table_top_opeartion {
width: 21vw;
height: 5vh;
// border: 0.1px solid #fff;
display: flex;
.opeartion_num {
width: 7vw;
height: 5vh;
display: flex;
.opeartion_num_text {
width: 5vw;
height: 5vh;
color: #fff;
font-size: 16px;
line-height: 5vh;
text-align: center;
}
.opeartion_num_val {
width: 2vw;
height: 5vh;
color: #fff;
font-size: 16px;
line-height: 5vh;
text-align: center;
}
.not_opeartion_num_val {
width: 2vw;
height: 5vh;
color: #e75c5d;
font-size: 16px;
line-height: 5vh;
text-align: center;
}
}
}
}
}
}
/deep/.el-table {
// width: 96vw;
height: 25vh;
background: rgba(0, 0, 0, 0);
border: 0.1px solid #3f5564;
thead {
color: #fff;
font-weight: 500;
border: 0.1px solid #3f5564;
background: linear-gradient(
to right,
#284f49,
#2f6363 5%,
#233b38 80%
) !important;
& th {
background-color: transparent;
}
& tr {
background-color: transparent;
}
}
tr {
color: #fff;
background: rgba(0, 0, 0, 0);
}
}
/deep/ .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
border: 0.1px solid #3f5564;
}
/deep/.el-table__body-wrapper::-webkit-scrollbar {
width: 6px;
background-color: #5e666a;
border-radius: 4px;
}
/deep/.el-table__body-wrapper::-webkit-scrollbar-thumb {
width: 5px;
background-color: #3c4b4a;
border-radius: 4px;
}
</style>
Loading…
Cancel
Save