|
|
|
@ -1,5 +1,5 @@ |
|
|
|
<template> |
|
|
|
<Dialog v-model="modelVisible" title="事件上报" width="885px" top="90px"> |
|
|
|
<Dialog v-model="modelVisible" title="事件上报" width="1485px" top="90px"> |
|
|
|
<el-tabs v-model="activeName" @tab-click="handleClick"> |
|
|
|
<el-tab-pane label="事件" name="first"> |
|
|
|
<div class="EventDetail"> |
|
|
|
@ -36,7 +36,52 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-tab-pane> |
|
|
|
<el-tab-pane label="初报" name="second"> </el-tab-pane> |
|
|
|
<el-tab-pane label="初报" name="second" class="file"> |
|
|
|
<div class="file-box"> |
|
|
|
<el-form> |
|
|
|
<div class="file-title">重要事件</div> |
|
|
|
<div class="file-top"> |
|
|
|
<span class="file-top-fromDept" |
|
|
|
>报送单位: |
|
|
|
<el-input v-model="fromDept" /> |
|
|
|
</span> |
|
|
|
<span class="file-top-createTime" |
|
|
|
>报送时间: {{ createTime }} |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
<div class="file-content"> |
|
|
|
<div class="file-content-title"> |
|
|
|
<el-input v-model="title"> </el-input> |
|
|
|
</div> |
|
|
|
<div class="file-content-toDept"> |
|
|
|
<el-input v-model="toDept"></el-input>: |
|
|
|
</div> |
|
|
|
|
|
|
|
<el-input |
|
|
|
class="file-content-text" |
|
|
|
v-model="content" |
|
|
|
type="textarea" |
|
|
|
:rows="2" |
|
|
|
placeholder="请输入内容" |
|
|
|
></el-input> |
|
|
|
</div> |
|
|
|
<div class="file-footer"> |
|
|
|
<div class="file-createName"> |
|
|
|
<span>填报人:</span |
|
|
|
><el-input v-model="createName" placeholder=""></el-input> |
|
|
|
</div> |
|
|
|
<div class="file-phoneNumber"> |
|
|
|
<span>联系电话:</span |
|
|
|
><el-input v-model="phoneNumber" placeholder=""></el-input> |
|
|
|
</div> |
|
|
|
<div class="file-issuedr"> |
|
|
|
<span>签发人:</span |
|
|
|
><el-input v-model="issued" placeholder=""></el-input> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
</el-tab-pane> |
|
|
|
<el-tab-pane label="续报" name="third"> </el-tab-pane> |
|
|
|
<el-tab-pane label="终报" name="fourth"> </el-tab-pane> |
|
|
|
</el-tabs> |
|
|
|
@ -89,6 +134,14 @@ export default { |
|
|
|
chemicalsStatus: "", |
|
|
|
fireStatus: "", |
|
|
|
}, |
|
|
|
fromDept: "济青济南运管中心", |
|
|
|
createTime: "2024年04月24日17时22分", |
|
|
|
title: "关于G20青银高速K305+208交通事故的续报1", |
|
|
|
toDept: "智慧管理中心", |
|
|
|
content: "路管等单位及清障救援车辆已到达现场。预计结束时间为12时44分。", |
|
|
|
createName: "智慧高速菜单", |
|
|
|
phoneNumber: "18678866677", |
|
|
|
issued: "康传刚", |
|
|
|
// submitting: false, |
|
|
|
}; |
|
|
|
}, |
|
|
|
@ -272,7 +325,7 @@ export default { |
|
|
|
.EventDetail { |
|
|
|
display: flex; |
|
|
|
gap: 9px; |
|
|
|
width: 836px; |
|
|
|
width: 100%; |
|
|
|
height: 768px; |
|
|
|
flex-direction: column; |
|
|
|
.title { |
|
|
|
@ -286,6 +339,137 @@ export default { |
|
|
|
margin-right: 20px; |
|
|
|
} |
|
|
|
} |
|
|
|
.file { |
|
|
|
// width: 80%; |
|
|
|
padding: 20px; |
|
|
|
height: 100%; |
|
|
|
text-align: center; |
|
|
|
background: #fff; |
|
|
|
color: #000; |
|
|
|
::v-deep { |
|
|
|
.el-input { |
|
|
|
// background: #fff; |
|
|
|
width: auto; |
|
|
|
} |
|
|
|
.el-input__inner { |
|
|
|
caret-color: #000; |
|
|
|
font-family: 仿宋; |
|
|
|
border-width: initial; |
|
|
|
border-style: none; |
|
|
|
border-color: initial; |
|
|
|
-o-border-image: initial; |
|
|
|
border-image: initial; |
|
|
|
line-height: 32px; |
|
|
|
height: 33px; |
|
|
|
font-size: 1.04167vw; |
|
|
|
background: #fff; |
|
|
|
color: #000; |
|
|
|
margin: 0; |
|
|
|
padding: 0; |
|
|
|
} |
|
|
|
.el-textarea__inner { |
|
|
|
caret-color: #000; |
|
|
|
margin-bottom: 20px; |
|
|
|
font-size: 1.14583vw; |
|
|
|
font-family: 仿宋; |
|
|
|
margin: 0 20px; |
|
|
|
height: 400px !important; |
|
|
|
border-width: initial; |
|
|
|
border-style: none; |
|
|
|
border-color: initial; |
|
|
|
border-image: initial; |
|
|
|
background: #fff; |
|
|
|
color: #000; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.file-box { |
|
|
|
width: 95%; |
|
|
|
margin: 0 auto; |
|
|
|
.file-title { |
|
|
|
font-size: 40px; |
|
|
|
color: red; |
|
|
|
font-family: AlibabaPuHuiTi-Medium, AlibabaPuHuiTi; |
|
|
|
font-weight: 600; |
|
|
|
} |
|
|
|
.file-top { |
|
|
|
border-bottom: 3px solid red; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
text-align: left; |
|
|
|
font-size: 1.04167vw; |
|
|
|
font-family: 仿宋; |
|
|
|
color: rgb(0, 0, 0); |
|
|
|
font-weight: 400 !important; |
|
|
|
.file-top-fromDep { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
width: 50%; |
|
|
|
} |
|
|
|
.file-top-createTime { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
width: 50%; |
|
|
|
justify-content: end; |
|
|
|
} |
|
|
|
} |
|
|
|
.file-content { |
|
|
|
::v-deep .file-content-title .el-input__inner { |
|
|
|
font-family: AlibabaPuHuiTi-Medium, AlibabaPuHuiTi; |
|
|
|
font-weight: 600; |
|
|
|
text-align: center; |
|
|
|
font-weight: 700 !important; |
|
|
|
font-size: 1.19792vw; |
|
|
|
border: none; |
|
|
|
line-height: 34px; |
|
|
|
height: 34px; |
|
|
|
} |
|
|
|
::v-deep .file-content-toDept .el-input__inner { |
|
|
|
width: 160px; |
|
|
|
} |
|
|
|
.file-content-toDept { |
|
|
|
font-size: 1.14583vw; |
|
|
|
font-family: 仿宋; |
|
|
|
border-width: initial; |
|
|
|
border-style: none; |
|
|
|
border-color: initial; |
|
|
|
border-image: initial; |
|
|
|
text-align: left; |
|
|
|
padding: 0 15px; |
|
|
|
} |
|
|
|
.file-content-text { |
|
|
|
margin-bottom: 20px; |
|
|
|
font-size: 1.14583vw; |
|
|
|
display: block; |
|
|
|
resize: vertical; |
|
|
|
padding: 5px 15px; |
|
|
|
font-family: 仿宋; |
|
|
|
border-width: initial; |
|
|
|
border-style: none; |
|
|
|
border-color: initial; |
|
|
|
border-image: initial; |
|
|
|
} |
|
|
|
} |
|
|
|
.file-footer { |
|
|
|
border-top: 3px solid red; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
font-size: 1.04167vw; |
|
|
|
font-family: 仿宋; |
|
|
|
color: rgb(0, 0, 0); |
|
|
|
font-weight: 400 !important; |
|
|
|
.file-createName { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
text-align: left; |
|
|
|
} |
|
|
|
.file-phoneNumber { |
|
|
|
} |
|
|
|
.file-issuedr { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
::v-deep .el-tabs__content { |
|
|
|
overflow: auto; |
|
|
|
position: relative; |
|
|
|
|
