详情布局优化

gassafety-web/src/views/deviceInspection/inspectiondetail/index.vue

@@ -2,23 +2,29 @@
     <div class="app-container detail" style="background-color: rgb(238, 241, 245);">
       <!-- 巡检计划信息 -->
       <div style="padding-top: 10px;background: #fff;height: 100%;">
-          <div style="width: 5%;height: 45px;margin-left: 20px;" @click="$router.go(-1)">
-            <el-button
-            size="medium"
-            type="text"
-            style="font-size: 18px; color: rgb(7, 63, 112);float: left;"
-          >返回</el-button>
+        <el-row>
+          <el-col :span="24" style="padding-left: 15px;">
+            <div style="height: 45px;" @click="$router.go(-1)">
+              <el-button size="medium" type="text" style="font-size: 18px; color: rgb(7, 63, 112);float: left;">返回
+              </el-button>
               <div style="float: left;margin-top: 8px;margin-left: 5px;"><img src="../../../assets/logo/fanhui.png" style="width: 25px;" alt=""></div>
             </div>
-
-        <div style="width: 100%;height: 440px;">
+          </el-col>
+        </el-row>
         <el-divider></el-divider>
-          <div style="color: #31EAEA;width: 30%;height: 30px;">
+
+        <el-row style="width: 100%;">
+          <el-col :span="24">
+            <div style="color: #31EAEA;height: 25px;">
               <ul><li>详细信息</li></ul>
             </div>
-          <div >
-            <div style="float: left;width: 50%;">
-              <el-form ref="form" v-model="form" :rules="rules" label-width="100px" style="float: left;margin-left: 50px;width: 50%;margin-bottom: 25px;">
+          </el-col> 
+        </el-row>
+
+        <el-row style="width: 100%;padding: 10px;padding-left: 40px;">
+          <el-col :span="12">
+            <el-col :span="12">
+              <el-form ref="form" v-model="form" :rules="rules" label-width="100px" style="width: 100%;margin-left: 25px;margin-bottom: 25px;">
                 <el-form-item label="计划名称:" prop="planName">
                   <font>{{form.planName}}</font>
                 </el-form-item>
@@ -31,7 +37,9 @@
                   </div>
                 </el-form-item>
               </el-form>
-              <el-form ref="form" v-model="form" :rules="rules" label-width="100px" style="float: left;width: 40%;">
+            </el-col>
+            <el-col :span="12">
+              <el-form ref="form" v-model="form" :rules="rules" label-width="100px" style="width: 100%;">
                 <el-form-item label="计划执行时间:" prop="startTime">
                   <font>{{form.startTime}}至{{form.endTime}}</font>
                 </el-form-item>
@@ -39,7 +47,8 @@
                   <font>{{form.planStatus}}</font>
                 </el-form-item>
               </el-form>
-
+            </el-col>
+            <el-col :span="24">
               <el-table max-height="175px" :data="form.inspectionDataList" style="width: 89%; margin-left: 50px;">
                 <el-table-column label="设备名称" align="center" prop="deviceName" />
                 <el-table-column label="设备编号" align="center" prop="deviceCode" />
@@ -60,30 +69,49 @@
                   </template>
                 </el-table-column>
               </el-table>
-            </div>
-
-            <div id="marbox" style="width: 700px;height: 400px;float: left;margin-top: -25px; border: 1px solid rgb(218, 213, 213);">
+            </el-col>
+          </el-col>
+          <el-col :span="12">
+            <div id="marbox" style="width: 100%;height: 400px;margin-top: -25px; border: 1px solid rgb(218, 213, 213);">
               <div style="width: 100%;height: 100%" id="container"></div>
             </div>
-          </div>
-        </div>
+          </el-col>
+        </el-row>
+
+        
         <!-- 接单信息 -->
-        <div>
+        <el-row>
           <el-divider></el-divider>
+          <el-col :span="24">
             <div style="color: #31EAEA;width: 100%;height: 40px;">
               <ul><li>接单信息</li></ul>
             </div>
-          <el-form ref="form" v-model="form" :rules="rules" label-width="100px" style="margin-left: 50px;height: 30px;width: 100%;">
-            <el-form-item label="下发人员:" prop="appointInspectorName" style="float: left;width: 15%;">
+          </el-col>
+          <el-col :span="5" style="margin-left: 50px;">
+            <el-form ref="form" v-model="form" :rules="rules" label-width="100px" style="height: 30px;width: 100%;">
+              <el-form-item label="下发人员:" prop="appointInspectorName">
                 <font>{{form.appointInspectorName}}</font>
               </el-form-item>
-            <el-form-item label="下发时间:" prop="allotTime" style="float: left;width: 20%;">
+            </el-form>
+          </el-col>
+          <el-col :span="6">
+            <el-form ref="form" v-model="form" :rules="rules" label-width="100px" style="height: 30px;width: 100%;">
+              <el-form-item label="下发时间:" prop="allotTime">
                 <font>{{form.allotTime}}</font>
               </el-form-item>
-            <el-form-item label="工单编号:" prop="orderId" style="float: left;">
+            </el-form>
+          </el-col>
+          <el-col :span="6">
+            <el-form ref="form" v-model="form" :rules="rules" label-width="100px" style="height: 30px;width: 100%;">
+              <el-form-item label="工单编号:" prop="orderId">
                 <font>{{form.orderId}}</font>
               </el-form-item>
             </el-form>
+          </el-col>
+        </el-row>
+        <div>
+          
+          
         </div>
         <el-divider></el-divider>
       </div>
@@ -198,11 +226,6 @@ export default {
           }
         });
       },
-      // 筛选节点
-      // filterNode(value, data) {
-      //   if (!value) return true;
-      //   return data.label.indexOf(value) !== -1;
-      // },
       // 节点单击事件
       handleNodeClick(data) {
 
@@ -229,28 +252,8 @@ export default {
         };
         this.resetForm("form");
       },
-      /** 搜索按钮操作 */
-      handleQuery() {
-        this.queryParams.pageNum = 1;
-        this.getList();
-      },
-      /** 重置按钮操作 */
-      resetQuery() {
-        this.resetForm("queryForm");
-        this.handleQuery();
-      },
-      // 多选框选中数据
-      handleSelectionChange(selection) {
-        this.ids = selection.map(item => item.orderId)
-        this.single = selection.length!==1
-        this.multiple = !selection.length
-      },
-      /** 新增按钮操作 */
-      handleAdd() {
-        this.reset();
-        this.open = true;
-        this.title = "添加工单基础信息";
-      },
+     
+      
       /** 归档按钮操作 */
     handleFinish(res) {
       // this.reset();

gassafety-web/src/views/workOrder/detail/index.vue

@@ -181,18 +181,7 @@
                           </div>
                         </el-col>
                       </el-row>
-                      <!-- <div style="width: 600px;float: left;">
-                        <div style=" width: 600px;">
-                          <div style="float: left;margin-left: 50px; width: 250px;">
                       
-                          </div>
-                          <div style="float: left;margin-left: 50px; width: 250px;">
-                            
-
-                          </div>
-                        </div>
-                      </div>
-                       -->
                     </el-card>
                   </el-timeline-item>
                 </el-timeline>

gassafety-web/src/views/workOrder/feedbackdetail/index.vue

@@ -2,15 +2,15 @@
     <div class="app-container detail" style="background-color: rgb(238, 241, 245);">
       <!-- 工单信息 -->
       <div style="padding-top: 10px;background: #fff;height: 100%;">
-        <div>
-          <div style="width: 5%;height: 45px;margin-left: 20px;" @click="$router.go(-1)">
-            <el-button
-            size="medium"
-            type="text"
-            style="font-size: 18px; color: rgb(7, 63, 112);float: left;"
-          >返回</el-button>
+        <el-row>
+          <el-col :span="24" style="padding-left: 15px;">
+            <div style="height: 45px;" @click="$router.go(-1)">
+              <el-button size="medium" type="text" style="font-size: 18px; color: rgb(7, 63, 112);float: left;">返回
+              </el-button>
               <div style="float: left;margin-top: 8px;margin-left: 5px;"><img src="../../../assets/logo/fanhui.png" style="width: 25px;" alt=""></div>
             </div>
+          </el-col>
+        </el-row>
           <el-steps :active="active" finish-status="success" simple prop="orderStatus" style="margin-top: 5px">
               <el-step title="未接收" ></el-step>
               <el-step title="已接收" ></el-step>
@@ -18,14 +18,18 @@
               <el-step title="已反馈" ></el-step>
               <el-step title="已归档" ></el-step>
           </el-steps>
-        </div>
 
-        <div style="width: 100%;height: 265px;">
           <el-divider></el-divider>
-          <div style="color: #31EAEA;width: 30%;height: 30px;">
+          <el-row style="width: 100%;">
+            <el-col :span="24">
+              <div style="color: #31EAEA;height: 25px;">
                 <ul><li>详细信息</li></ul>
               </div>
-          <el-form ref="form" v-model="form" :rules="rules" label-width="100px" style="float: left;margin-left: 50px;">
+            </el-col> 
+          </el-row>
+          <el-row style="width: 100%;padding: 10px;padding-left: 40px;">
+            <el-col :span="6">
+              <el-form ref="form" v-model="form" :rules="rules" label-width="100px" style="width: 100%;">
                 <el-form-item label="工单类型:" prop="orderType">
                   <font v-if="form.orderType == 1">巡检信息</font>
                   <font v-if="form.orderType == 2">隐患信息</font>
@@ -50,7 +54,9 @@
                   <font>{{form.remarks}}</font>
                 </el-form-item>
             </el-form>
-          <el-form ref="form" v-model="form" :rules="rules" label-width="100px" style="float: left;width: 25%;">
+            </el-col>
+            <el-col :span="6">
+              <el-form ref="form" v-model="form" :rules="rules" label-width="100px" style="width: 100%;">
                 <el-form-item label="设备类型:" prop="deviceType" v-if="form.orderType != 1">
                   <font v-if="form.deviceType == 0">管道</font>
                   <font v-if="form.deviceType == 1">调压阀</font>
@@ -78,28 +84,46 @@
                 <el-form-item label="下发时间:" prop="allotTime">
                   <font>{{form.allotTime}}</font>
                 </el-form-item>
-              <!-- <el-form-item label="接收时间:" prop="actualTime">
-                <font>{{form.actualTime}}</font>
-              </el-form-item> -->
               </el-form>
-          <div id="marbox" style="width: 700px;height: 250px;float: left;margin-top: -35px; border: 1px solid rgb(218, 213, 213);">
+            </el-col>
+            <el-col :span="12">
+              <div id="marbox" style="width: 100%;height: 250px;margin-top: -35px; border: 1px solid rgb(218, 213, 213);">
                 <div style="width: 100%;height: 100%" id="container"></div>
               </div>
-        </div>
+            </el-col>
+          </el-row>
+        <!-- <div style="width: 100%;height: 265px;">
+          
+          
+          
+         
+        </div> -->
         <!-- 接单信息 -->
         <div v-if="form.actualTime != '' && form.actualTime != null">
           <el-divider></el-divider>
+          <el-row>
+            <el-col :span="24">
               <div style="color: #31EAEA;width: 100%;height: 40px;">
                 <ul><li>接单信息</li></ul>
               </div>
-          <el-form ref="form" v-model="form" :rules="rules" label-width="100px" style="margin-left: 50px;height: 30px;width: 100%;">
-            <el-form-item label="接单人:" prop="actualInspectorName" style="float: left;width: 20%;">
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="6">
+              <el-form ref="form" v-model="form" :rules="rules" label-width="100px" style="height: 30px;width: 100%;">
+                <el-form-item label="接单人:" prop="actualInspectorName">
                   <font>{{form.actualInspectorName}}</font>
                 </el-form-item>
-            <el-form-item label="接单时间:" prop="actualTime" style="float: left;">
+              </el-form>
+            </el-col>
+            <el-col :span="6">
+              <el-form ref="form" v-model="form" :rules="rules" label-width="100px" style="height: 30px;width: 100%;">
+                <el-form-item label="接单时间:" prop="actualTime">
                   <font>{{form.actualTime}}</font>
                 </el-form-item>
               </el-form>
+            </el-col>
+          </el-row>
         </div>
         <el-divider></el-divider>
         <!-- 反馈信息 -->
@@ -111,9 +135,8 @@
                 <el-timeline ref="timeline">
                   <el-timeline-item v-for="(activity, index) in form.feedbackList"  v-show='index>1?false:true' :key="index" :timestamp="activity.feedbackTime">
                     <el-card>
-                    <div style="width: 600px;float: left;">
-                      <div style=" width: 600px;">
-                        <div style="float: left;margin-left: 50px; width: 250px;">
+                      <el-row>
+                        <el-col :span="6">
                           <p>设备类型：
                             <span v-if="activity.deviceType == 0">管道</span>
                             <span v-if="activity.deviceType == 1">调压箱</span>
@@ -136,14 +159,12 @@
                               <span>{{activity.contents}}</span>
                             </p>
                           </div>
-                        </div>
-                        <div style="float: left;margin-left: 50px; width: 250px;">
+                        </el-col>
+                        <el-col :span="6">
                           <p>设备名称：{{activity.deviceName}}</p>
                             <p>反馈时间：{{activity.feedbackTime}}</p>
-
-                        </div>
-                      </div>
-                    </div>
+                        </el-col>
+                        <el-col :span="12">
                           <div class="feedbackTime-div">
                             <div class="feedbackTime">
                               <el-image :src="activity.pictureUrl1" :preview-src-list="[activity.pictureUrl1]" v-if="activity.pictureUrl1 != null && activity.pictureUrl1 != ''" style="width: 90px;"></el-image>
@@ -155,34 +176,25 @@
                               <el-image :src="activity.pictureUrl3" :preview-src-list="[activity.pictureUrl3]"  v-if="activity.pictureUrl3 != null && activity.pictureUrl3 != ''" style="width: 90px;"></el-image>
                             </div>
                           </div>
+                        </el-col>
+                      </el-row>
                     </el-card>
                   </el-timeline-item>
                 </el-timeline>
               </div>
               <div style="width: 95%;position: relative;" @click="changeDisplay(scope)">
-                <!-- <el-button type="primary"> -->
                   <i class="el-icon-arrow-down" v-if="isDisplay==false" style="margin-left: 100px;color: #909399;font-size: 14px;">
                     <span style="text-decoration:underline">显示全部</span>
                   </i>
                   <i class="el-icon-arrow-up" v-else style="color: #909399;font-size: 14px;margin-left: 100px;">
                     <span style="text-decoration:underline">收起</span>
                   </i>
-                <!-- </el-button> -->
-
               </div>
         </div>
 
         <!-- 归档 -->
 
         <div class="" style="width: 95%; height: 60px;margin-left: 50px;text-align: center;">
-          <!-- <el-button
-            type="primary"
-            size="normal"
-            icon="el-icon-edit"
-            @click="handleUpdate(form.orderId)"
-            v-hasPermi="['workOrder:basicsInfo:edit']"
-            v-if="form.orderStatus == 0"
-          >修改</el-button> -->
           <el-button
             type="primary"
             size="normal"
@@ -191,15 +203,6 @@
             v-hasPermi="['workOrder:basicsInfo:editStatus']"
             v-if="form.orderStatus == 1 || form.orderStatus == 2"
           >反馈</el-button>
-            <!-- <el-button
-              type="primary"
-              size="normal"
-              icon="el-icon-edit"
-              @click="handleFinish(form.orderId)"
-              v-hasPermi="['workOrder:basicsInfo:editStatus']"
-              v-if="form.orderStatus == 2"
-            >归档</el-button> -->
-            <!-- 工单反馈对话框 -->
           <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @close="cancel">
             <el-form ref="form" :model="form" :rules="rules" label-width="100px">
               <el-form-item label="工单名称" prop="orderName">
@@ -257,6 +260,7 @@
         </div>
       </div>
     </div>
+    </div>
   </template>
 
   <script>