风险防控

src/views/inspectionWork/riskdetails.vue

@@ -1,105 +1,103 @@
 <!--任务详情页-->
 <template>
-  <div class="app-container p-2">
-    <el-row :gutter="20">
-      <!-- 基础信息 -->
-      <el-col :lg="30" :xs="24" style="">
-        <el-form-item>
-          <div class="back-btn" @click="goBack">
-            <el-icon><Back /></el-icon>
-            返回上一级
+  <div class="detail-container">
+      <div >
+        <div class="common-back-box" @click="goBack">
+          <i class="common-back" />
+          返回上一级
+        </div>
+        <div class="common-header">
+          <div class="common-header-left">
+            <i class="common-title-icon" />
+            <template v-if="detailData.type === '0'">
+              <div>风险源排查</div>
+            </template>
+            <template v-if="detailData.type === '1'">
+              <div>隐患源排查</div>
+            </template>
+            <template v-if="detailData.type === '2'">
+              <div>危险源排查</div>
+            </template>
           </div>
-        </el-form-item>
-        <el-row :span="24" :gutter="10">
-          <el-col :span="20" label="预案名称">
-            <!--            <h2 key="planName" style="font-weight: bolder">{{ detailData.type }}</h2>-->
-            <div class="td">
-              <template v-if="detailData.type === '0'">
-                <div>风险源排查</div>
-              </template>
-              <template v-if="detailData.type === '1'">
-                <div>隐患源排查</div>
-              </template>
-              <template v-if="detailData.type === '2'">
-                <div>危险源排查</div>
-              </template>
-            </div>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button class="common-btn-text-primary" type="primary" @click="planUpdate()"> 编辑 </el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="primary" @click="handlefinal"> 完结任务 </el-button>
-          </el-col>
-          <el-col :span="1.5">
+          <div class="common-header-right">
+            <el-button class="common-btn-text-primary" type="primary" @click="planUpdate()">
+              <i class="edit-icon2" />
+              编辑
+            </el-button>
+            <el-button type="primary" @click="handlefinal">
+              <i class="close-icon" />
+              完结任务
+            </el-button>
             <el-button type="danger" @click="handleDelete"> 删除 </el-button>
-          </el-col>
-        </el-row>
-        <div class="line" style="background: #e7e7e7; width: auto; height: 0.6px; position: relative"></div>
-        <h3>基础信息</h3>
-        <el-card style="margin-top: 10px" shadow="hover">
-          <el-descriptions title="">
-            <el-descriptions-item key="planId" label="任务编号：">{{ detailData.task_number }}</el-descriptions-item>
-            <el-descriptions-item key="planType" label="风险源类型：">
+          </div>
+        </div>
+        <div class="common-info-box">
+          <div class="common-info-header">
+            <i class="line-icon" />
+            <div class="common-info-title">基础信息</div>
+          </div>
+          <div class="common-info-content">
+            <div class="common-info-item" >任务编号：{{ detailData.task_number }}</div>
+            <div class="common-info-item" >风险源类型：
               <dict-tag :options="risk_type" :value="detailData.type" style="display: inline-block" />
-            </el-descriptions-item>
-            <el-descriptions-item key="publishDate" label="创建时间：">{{ detailData.create_time }}</el-descriptions-item>
-            <el-descriptions-item key="organizingUnit" label="创建人：">{{ detailData.create_by }}</el-descriptions-item>
-            <el-descriptions-item key="publishDate" label="排查时间范围：">{{ detailData.task_time }}</el-descriptions-item>
-            <el-descriptions-item key="publishDate" label="排查周期：">
+            </div>
+            <div class="common-info-item" >创建时间：{{ detailData.create_time }}</div>
+            <div class="common-info-item"  >创建人：{{ detailData.create_by }}</div>
+            <div class="common-info-item"  >排查时间范围：{{ detailData.task_time }}</div>
+            <div class="common-info-item"  >排查周期：
               <dict-tag :options="risk_cycle" :value="detailData.cycle" style="display: inline-block" />
-            </el-descriptions-item>
-            <el-descriptions-item key="publishDate" label="排查范围：">
+            </div>
+            <div class="common-info-item" >排查范围：
               <dict-tag :options="risk_range" :value="detailData.task_range" style="display: inline-block" />
-            </el-descriptions-item>
-            <el-descriptions-item key="event_type" label="任务状态：">
+            </div>
+            <div class="common-info-item" >任务状态：
               <dict-tag :options="risk_status" :value="detailData.task_status" style="display: inline-block" />
-            </el-descriptions-item>
-          </el-descriptions>
-        </el-card>
-      </el-col>
-      <el-col :lg="30" :xs="24">
-        <h3>子任务记录</h3>
-        <el-card style="margin-top: 10px" shadow="hover">
-          <el-table ref="multipleTable" v-loading="loading" :data="subtaskData" style="width: 100%">
-            <el-table-column label="风险源类型" align="center" prop="type" width="150">
-              <template #default="scope">
-                <dict-tag :options="risk_type" :value="scope.row.type" style="display: inline-block" />
-              </template>
-            </el-table-column>
-            <el-table-column prop="task_time" label="要求排查时间" width="150" />
-            <el-table-column label="排查周期" align="center" prop="cycle" width="150">
-              <template #default="scope">
-                <dict-tag :options="risk_cycle" :value="scope.row.cycle" style="display: inline-block" />
-              </template>
-            </el-table-column>
-            <el-table-column label="排查范围" align="center" prop="task_range" width="150">
-              <template #default="scope">
-                <dict-tag :options="risk_range" :value="scope.row.task_range" style="display: inline-block" />
-              </template>
-            </el-table-column>
-            <el-table-column prop="create_time" label="执行日期" width="150" />
-            <el-table-column prop="completed_num" label="已完成" width="100">
-              <template #default="scope">
-                <el-text class="common-btn-text-primary" @click="handleCompletedClick(scope.row)">{{ scope.row.completed_num }}</el-text>
-              </template>
-            </el-table-column>
-            <el-table-column prop="incomplete_num" label="未完成" width="100">
-              <template #default="scope">
-                <el-text class="common-btn-text-primary" @click="handleIncompletedClick(scope.row)">{{ scope.row.incomplete_num }}</el-text>
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" width="150">
-              <template #default="scope">
-                <el-text class="common-btn-text-primary" @click="handleResult(scope.row)">巡查结果</el-text>
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-card>
-      </el-col>
-    </el-row>
+            </div>
+          </div>
+        </div>
+      </div>
+    <div class="common-info-box">
+      <div class="common-info-header">
+        <i class="line-icon" />
+        <div class="common-info-title">子任务记录</div>
+      </div>
+        <el-table ref="multipleTable" v-loading="loading" :data="subtaskData" style="width: 100%">
+          <el-table-column label="风险源类型" align="center" prop="type" width="150">
+            <template #default="scope">
+              <dict-tag :options="risk_type" :value="scope.row.type" style="display: inline-block" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="task_time" label="要求排查时间" width="150" />
+          <el-table-column label="排查周期" align="center" prop="cycle" width="150">
+            <template #default="scope">
+              <dict-tag :options="risk_cycle" :value="scope.row.cycle" style="display: inline-block" />
+            </template>
+          </el-table-column>
+          <el-table-column label="排查范围" align="center" prop="task_range" width="150">
+            <template #default="scope">
+              <dict-tag :options="risk_range" :value="scope.row.task_range" style="display: inline-block" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="create_time" label="执行日期" width="150" />
+          <el-table-column prop="completed_num" label="已完成" width="100">
+            <template #default="scope">
+              <el-text class="common-btn-text-primary" @click="handleCompletedClick(scope.row)">{{ scope.row.completed_num }}</el-text>
+            </template>
+          </el-table-column>
+          <el-table-column prop="incomplete_num" label="未完成" width="100">
+            <template #default="scope">
+              <el-text class="common-btn-text-primary" @click="handleIncompletedClick(scope.row)">{{ scope.row.incomplete_num }}</el-text>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="150">
+            <template #default="scope">
+              <el-text class="common-btn-text-primary" @click="handleResult(scope.row)">巡查结果</el-text>
+            </template>
+          </el-table-column>
+        </el-table>
+    </div>
     <!-- 修改弹窗 -->
-    <el-dialog v-model="visible" title="修改任务" width="500px" append-to-body>
+    <el-dialog v-model="visible" title="修改任务"  class="common-dialog">
       <el-form ref="demoFormRef" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="风险源类型：" prop="type">
           <el-select v-model="form.type" placeholder="请选择风险源排查类型">
@@ -158,54 +156,6 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
-    <!--    巡查结果-->
-    <el-dialog v-model="visible" title="巡查结果" width="500px" append-to-body>
-      <div v-show="showSearch">
-        <el-form ref="queryFormRef" :model="queryParams">
-          <el-row :gutter="20">
-            <el-col :span="6">
-              <el-form-item label="所属区划：" prop="area" label-width="auto">
-                <el-tree-select
-                  v-model="divisionSelectedId"
-                  :data="formattedDivisionData"
-                  :props="{ label: 'label', value: 'code', children: 'children' }"
-                  :render-after-expand="false"
-                  style="width: 468px"
-                  @change="onDivisionChange"
-                />
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item label="巡查结果：" prop="inspection_result" label-width="auto">
-                <el-select v-model="queryParams.inspection_result" placeholder="全部" clearable>
-                  <el-option v-for="item in risk_result" :key="item.value" :label="item.label" :value="item.value"></el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-form-item prop="nick_name" label-width="auto">
-                <el-input v-model="queryParams.nick_name" placeholder="请输入巡查人"></el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="6">
-              <el-button type="primary" @click="handleQuery">搜索</el-button>
-              <el-button @click="resetQuery">重置</el-button>
-            </el-col>
-          </el-row>
-        </el-form>
-      </div>
-      <!--      表格组件-->
-      <el-table v-loading="loading" :data="SubtaskResultList" border style="width: 100%">
-        <el-table-column prop="point_name" label="排查点" align="center" width="180" />
-        <el-table-column prop="area" label="所属区划" width="180" />
-        <el-table-column prop="create_time" label="执行日期" width="180" />
-        <el-table-column prop="nick_name" label="排查人" width="180" />
-        <el-table-column prop="result" label="排查结果" />
-        <el-table-column prop="fileList" label="现场照片" />
-        <el-table-column prop="remark" label="备注" />
-      </el-table>
-      <pagination v-show="total > 0" v-model:page="queryParams.page" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
-    </el-dialog>
   </div>
   <RiskResult v-if="riskResultState.show" :event-id="riskResultState.eventId" @close="handleCancel" />
   <RiskCompleted v-if="risk_completedState.show" :event-id="risk_completedState.eventId" @close="handleCancel" />