提交代码

src/views/reportForms/components/projectDetail.vue

@@ -126,36 +126,32 @@
           <span>{{ discForm.proportion }}</span>
         </el-col>
       </el-row>
-      <el-row class="handle-box">
-        <el-col :span="4">
-          <div class="xuanfang">已选房</div>
-        </el-col>
-        <el-col :span="4">
-          <div class="qianyue">已签约</div>
-        </el-col>
-        <el-col :span="4">
-          <div class="shoukuan">已收款</div>
-        </el-col>
-        <el-col :span="4">
-          <div class="ruzhu">已入驻</div>
-        </el-col>
-        <el-col :span="4">
-          <div class="tuifang">已退房</div>
-        </el-col>
-        <el-col :span="4">
-          <div class="chushi">初始状态</div>
+      <el-row>
+        <el-col :span="24">
+          <span class="card_title">图例</span>
         </el-col>
+          <el-divider />
       </el-row>
+
+      <div class="tuli">
+        <div class="dis_flex align_center mr15px ml15px"><div class="mr10px">已选房：</div><div class="xuanfang" style="width: 15px;height: 15px" /></div>
+        <div class="dis_flex align_center mr15px ml15px"><div class="mr10px">已签约:</div><div class="qianyue" style="width: 15px;height: 15px" /></div>
+        <div class="dis_flex align_center mr15px ml15px"><div class="mr10px">已收款:</div><div class="shoukuan" style="width: 15px;height: 15px" /></div>
+        <div class="dis_flex align_center mr15px ml15px"><div class="mr10px">已入驻:</div><div class="ruzhu" style="width: 15px;height: 15px" /></div>
+        <div class="dis_flex align_center mr15px ml15px"><div class="mr10px">已退房:</div><div class="tuifang" style="width: 15px;height: 15px" /></div>
+        <div class="dis_flex align_center mr15px ml15px"><div class="mr10px">初始状态:</div><div class="chushi" style="width: 15px;height: 15px" /></div>
+
+      </div>
       <el-row v-for="(item, index) in houseData" :key="index">
         <el-col :span="24">
           <span class="card_title">单元/楼栋号:{{ item.buildName }}</span>
         </el-col>
         <el-divider />
-          <div class="buildList" v-loading="loading">
-              <div class="buildList-row" v-for="(roomItem, roomIndex) in item.roomList" :key="roomIndex">
-                  <div :class="grtProjectStatusStr(roomItem.projectStatusStr)">{{ roomItem.roomNo }}</div>
-              </div>
+        <div v-loading="loading" class="buildList">
+          <div v-for="(roomItem, roomIndex) in item.roomList" :key="roomIndex" class="buildList-row">
+            <div :class="grtProjectStatusStr(roomItem.projectStatusStr)">{{ roomItem.roomNo }}</div>
           </div>
+        </div>
 
       </el-row>
 
@@ -181,7 +177,7 @@ export default {
     },
     data() {
         return {
-            loading:false,
+            loading: false,
             dc_key: ['DECORATION_SITUATION', 'GROUP_NATURE', 'MAPPING_STATUS', 'SALE_STATUS'],
             groupForm: {},
             discForm: {},
@@ -254,14 +250,13 @@ export default {
             const postData = {
                 discId: this.discId
             }
-            this.loading=true
+            this.loading = true
             this.baseRoomRequest('projectHouseVoList', postData).then(res => {
                 if (res.data) {
                     this.houseData = res.data
-                    this.loading=false
+                    this.loading = false
                 }
             })
-
         },
         getItemJson: function(item) {
             return item
@@ -284,6 +279,24 @@ export default {
 </script>
 
 <style scoped>
+.mr15px{
+    margin-right: 15px;
+}
+.ml15px{
+    margin-left: 15px;
+}
+.mr10px{
+    margin-right: 10px;
+}
+.align_center{
+    align-items: center;
+}
+.dis_flex{
+    display: flex;
+}
+.tuli{
+    display: flex;
+}
 .xuanfang {
     text-align: center;
     width: 75px;