|
|
|
|
@ -1,7 +1,381 @@
|
|
|
|
|
<template></template>
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="title">
|
|
|
|
|
<span class="icon-bar"></span>
|
|
|
|
|
<span class="subtitle">整改过程信息</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="search-gr">
|
|
|
|
|
<div class="itemtwo">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<div class="ball"></div>
|
|
|
|
|
<div class="content">整改工单编号：</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="input-right">
|
|
|
|
|
<el-input placeholder="请输入" v-model="input"> </el-input>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="itemtwo">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<div class="ball"></div>
|
|
|
|
|
<div class="content">网格：</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right">
|
|
|
|
|
<el-select v-model="value" placeholder="请选择">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in options"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
>
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="itemtwo">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<div class="ball"></div>
|
|
|
|
|
<div class="content">排查日期：</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right">
|
|
|
|
|
<el-date-picker
|
|
|
|
|
v-model="dateTime"
|
|
|
|
|
type="datetime"
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
>
|
|
|
|
|
</el-date-picker>
|
|
|
|
|
<img class="data_icon" src="@/assets/images/timeIcon.png" alt="" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="btn-reset">
|
|
|
|
|
<div class="icon-reset"></div>
|
|
|
|
|
<span class="text">重置</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="btn-search">
|
|
|
|
|
<div class="icon-search"></div>
|
|
|
|
|
<span class="text">查询</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="tb-header">
|
|
|
|
|
<span>整改工单编号</span>
|
|
|
|
|
<span>整改期限</span>
|
|
|
|
|
<span>是否整改完成</span>
|
|
|
|
|
<span>是否通过复查</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="tb-list">
|
|
|
|
|
<div v-for="(item, ind) in 10" :key="ind">
|
|
|
|
|
<div class="tb-content">
|
|
|
|
|
<span>202309120001</span>
|
|
|
|
|
<span>2023-09-12</span>
|
|
|
|
|
<span>否</span>
|
|
|
|
|
<span>否</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="tb-content_">
|
|
|
|
|
<span>202309120001</span>
|
|
|
|
|
<span>2023-09-12</span>
|
|
|
|
|
<span>否</span>
|
|
|
|
|
<span>否</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {};
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
input: "",
|
|
|
|
|
dateTime: "",
|
|
|
|
|
value: "",
|
|
|
|
|
options: [
|
|
|
|
|
{
|
|
|
|
|
value: "1",
|
|
|
|
|
label: "网格1",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: "2",
|
|
|
|
|
label: "网格2",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: "3",
|
|
|
|
|
label: "网格3",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: "4",
|
|
|
|
|
label: "网格4",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: "5",
|
|
|
|
|
label: "网格5",
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style></style>
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.title {
|
|
|
|
|
margin-bottom: 14px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
.icon-bar {
|
|
|
|
|
width: 5px;
|
|
|
|
|
height: 12px;
|
|
|
|
|
background-color: #5ba1d2;
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.subtitle {
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-family: Source Han Sans-Medium, Source Han Sans;
|
|
|
|
|
color: #e9f4ff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.search-gr {
|
|
|
|
|
display: flex;
|
|
|
|
|
margin: 10px 0;
|
|
|
|
|
|
|
|
|
|
.itemtwo {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
.left {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
.ball {
|
|
|
|
|
width: 4px;
|
|
|
|
|
height: 4px;
|
|
|
|
|
background: #daebff;
|
|
|
|
|
box-shadow: 0px 0px 10px 5px rgba(0, 119, 255, 0.25),
|
|
|
|
|
0px 0px 5px 0px rgba(229, 241, 255, 0.25);
|
|
|
|
|
border-radius: 20px 20px 20px 20px;
|
|
|
|
|
margin-right: 15px;
|
|
|
|
|
}
|
|
|
|
|
.content {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-family: "Source Han Sans CN-Medium";
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
color: #cccccc;
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.right {
|
|
|
|
|
background-image: url("../../../../assets/images/timebg.png");
|
|
|
|
|
// width: 120px;
|
|
|
|
|
// height: 35px;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
position: relative;
|
|
|
|
|
::v-deep .el-input__prefix {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-date-editor {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
width: 120px;
|
|
|
|
|
.el-input__inner {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
border: none;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 35px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-family: "Source Han Sans CN-Medium";
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
color: #e9f4ff;
|
|
|
|
|
padding-left: 12px;
|
|
|
|
|
}
|
|
|
|
|
.el-input__inner::placeholder {
|
|
|
|
|
/* 在这里添加你想要修改的 placeholder 样式 */
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-family: "Source Han Sans CN-Regular";
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #d3eef2;
|
|
|
|
|
-webkit-background-clip: text;
|
|
|
|
|
-webkit-text-fill-color: rgba(211, 238, 242, 0.2);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-select {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
width: 120px;
|
|
|
|
|
.el-input
|
|
|
|
|
.el-input__suffix
|
|
|
|
|
.el-input__suffix-inner
|
|
|
|
|
.el-icon-arrow-up::before {
|
|
|
|
|
content: "";
|
|
|
|
|
background: url("../../../../assets/images/pull-bottom.png") center
|
|
|
|
|
center no-repeat;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 11px;
|
|
|
|
|
height: 11px;
|
|
|
|
|
top: 50%;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
}
|
|
|
|
|
.el-input__suffix .el-input__suffix-inner .el-select__caret {
|
|
|
|
|
width: 22px;
|
|
|
|
|
}
|
|
|
|
|
.el-input__suffix {
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
}
|
|
|
|
|
.el-input__inner {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
border: none;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 35px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-family: "Source Han Sans CN-Medium";
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
color: #e9f4ff;
|
|
|
|
|
}
|
|
|
|
|
.el-input__inner::placeholder {
|
|
|
|
|
/* 在这里添加你想要修改的 placeholder 样式 */
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-family: "Source Han Sans CN-Regular";
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #d3eef2;
|
|
|
|
|
-webkit-background-clip: text;
|
|
|
|
|
-webkit-text-fill-color: rgba(211, 238, 242, 0.2);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.data_icon {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 10px;
|
|
|
|
|
top: 8px;
|
|
|
|
|
width: 20px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.input-right {
|
|
|
|
|
::v-deep .el-input {
|
|
|
|
|
background: rgba(0, 60, 116, 0.2);
|
|
|
|
|
box-shadow: inset 0px 0px 6px 0px #00c2ff;
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
border: 1px solid rgba(181, 207, 255, 0.5);
|
|
|
|
|
.el-input__inner {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
width: 120px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
border: none;
|
|
|
|
|
}
|
|
|
|
|
.el-input__inner::placeholder {
|
|
|
|
|
/* 在这里添加你想要修改的 placeholder 样式 */
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-family: "Source Han Sans CN-Regular";
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #d3eef2;
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-input__suffix {
|
|
|
|
|
line-height: 44px;
|
|
|
|
|
color: #d3eef2;
|
|
|
|
|
right: 10px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
.el-icon-search:before {
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
color: #d3eef2;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.btn-reset {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
border-radius: 2px 2px 2px 2px;
|
|
|
|
|
border: 1px solid rgba(181, 207, 255, 0.5);
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
padding: 4px 16px;
|
|
|
|
|
.icon-reset {
|
|
|
|
|
width: 24px;
|
|
|
|
|
height: 24px;
|
|
|
|
|
background-image: url("../../../../assets/images/icon-reset.png");
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.text {
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-family: Source Han Sans-Regular, Source Han Sans;
|
|
|
|
|
color: #d3eef2;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.btn-search {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding: 4px 16px;
|
|
|
|
|
background: rgba(255, 125, 64, 0.8);
|
|
|
|
|
box-shadow: inset 0px 0px 13px 0px #f6b463;
|
|
|
|
|
border-radius: 2px;
|
|
|
|
|
border: 1px solid rgba(181, 207, 255, 0.5);
|
|
|
|
|
.icon-search {
|
|
|
|
|
width: 24px;
|
|
|
|
|
height: 24px;
|
|
|
|
|
background-image: url("../../../../assets/images/icon-search.png");
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.text {
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-family: Source Han Sans-Regular, Source Han Sans;
|
|
|
|
|
color: #d3eef2;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.tb-header {
|
|
|
|
|
width: 100%;
|
|
|
|
|
background: rgba(7, 127, 255, 0.1608);
|
|
|
|
|
display: flex;
|
|
|
|
|
border-top: 1px solid #077fff;
|
|
|
|
|
padding: 10px 20px;
|
|
|
|
|
span {
|
|
|
|
|
flex: 1;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-family: Source Han Sans-Regular, Source Han Sans;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #d3eef2;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tb-list {
|
|
|
|
|
height: 400px;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tb-content {
|
|
|
|
|
width: 100%;
|
|
|
|
|
background: rgba(216, 216, 216, 0.1);
|
|
|
|
|
display: flex;
|
|
|
|
|
padding: 10px 20px;
|
|
|
|
|
span {
|
|
|
|
|
flex: 1;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-family: Source Han Sans-Regular, Source Han Sans;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #d3eef2;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.tb-content_ {
|
|
|
|
|
width: 100%;
|
|
|
|
|
background: rgba(216, 216, 216, 0.3);
|
|
|
|
|
display: flex;
|
|
|
|
|
padding: 10px 20px;
|
|
|
|
|
span {
|
|
|
|
|
flex: 1;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-family: Source Han Sans-Regular, Source Han Sans;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: #d3eef2;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
laozt
1 year ago
