初报新增

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DisposalProcess/DialogVisible/index.vue

@@ -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;