浏览代码

adm:fix> 修改模型待补充的设备数据展示

shaun-sheep 4 年之前
父节点
当前提交
c42b2e73f3
共有 4 个文件被更改,包括 474 次插入394 次删除
  1. 2 2
      package.json
  2. 66 28
      src/views/model/report/deleted.vue
  3. 344 332
      src/views/model/report/index.vue
  4. 62 32
      src/views/model/report/supplement.vue

+ 2 - 2
package.json

@@ -20,9 +20,9 @@
   },
   },
   "dependencies": {
   "dependencies": {
     "@saga-web/base": "2.1.27",
     "@saga-web/base": "2.1.27",
-    "@saga-web/cad-engine": "2.0.574",
+    "@saga-web/cad-engine": "2.0.575",
     "@saga-web/draw": "2.1.110",
     "@saga-web/draw": "2.1.110",
-    "@saga-web/graph": "2.1.131",
+    "@saga-web/graph": "2.1.132",
     "@saga-web/topology": "1.0.85",
     "@saga-web/topology": "1.0.85",
     "axios": "^0.18.0",
     "axios": "^0.18.0",
     "echarts": "^4.1.0",
     "echarts": "^4.1.0",

+ 66 - 28
src/views/model/report/deleted.vue

@@ -4,29 +4,42 @@
     <div class="content-box" v-for="(item,index) in pageData" :key="index">
     <div class="content-box" v-for="(item,index) in pageData" :key="index">
       <div class="content-top">
       <div class="content-top">
         <div class="details">
         <div class="details">
-          <h4>{{index | numTransformation(4)}}<el-badge value="待删除" class="item"></el-badge>
+          <h4>{{ index | numTransformation(4) }}
+            <el-badge value="待删除" class="item"></el-badge>
           </h4>
           </h4>
-          <h4>{{`${item.BuildingName}建筑模型`}}-{{`${item.FloorName}层`}}-{{`${item.EquipLocalName?item.EquipLocalName:item.EquipName}`}}</h4>
+          <h4>
+            {{ `${item.BuildingName}建筑模型` }}-{{
+              `${item.FloorName}层`
+            }}-{{ `${item.EquipLocalName ? item.EquipLocalName : item.EquipName}` }}</h4>
           <b>BIM ID:<span @dblclick="copyContent"
           <b>BIM ID:<span @dblclick="copyContent"
-              id="copy">{{item.ScanTaskBase && item.ScanTaskBase[0]?item.ScanTaskBase[0].BIMID:'' | bimIdTransformation}}</span></b><span class="copy"
-            @click="clickCopy">点击复制</span>
-          <input id="copyContent" type="text" @dblclick="copyContent" style="border:none;opacity:0;position:absolute;top:0;left:0;">
-          <p style="margin-top:30px;">Revit族:{{item.BIMFamilyName}}</p>
-          <p>设计图纸中编码:{{item.CADID}}</p>
-          <p><span>设备类型:{{item.Category}}</span></p>
-          <p>设备ID:{{item.EquipID}}</p>
-          <p><span v-if="item.Property && item.Property.FamilyName">资产族:{{item.Property.FamilyName.Name}}</span><span
-              v-if="item.PropertyId">关联的资产ID:{{item.PropertyId}}</span></p>
-          <p>现场任务ID:{{item.ScanTaskBase && item.ScanTaskBase[0]?item.ScanTaskBase[0].TaskId:""}}</p>
+                          id="copy">{{
+              item.ScanTaskBase && item.ScanTaskBase[0] ? item.ScanTaskBase[0].BIMID : '' | bimIdTransformation
+            }}</span></b><span
+          class="copy"
+          @click="clickCopy">点击复制</span>
+          <input id="copyContent" type="text" @dblclick="copyContent"
+                 style="border:none;opacity:0;position:absolute;top:0;left:0;">
+          <p style="margin-top:30px;">Revit族:{{ item.BIMFamilyName }}</p>
+          <p>设计图纸中编码:{{ item.CADID }}</p>
+          <p><span>设备类型:{{ item.Category }}</span></p>
+          <p>设备ID:{{ item.EquipID }}</p>
+          <p><span v-if="item.Property && item.Property.FamilyName">资产族:{{ item.Property.FamilyName.Name }}</span><span
+            v-if="item.PropertyId">关联的资产ID:{{ item.PropertyId }}</span></p>
+          <p>现场任务ID:{{ item.ScanTaskBase && item.ScanTaskBase[0] ? item.ScanTaskBase[0].TaskId : "" }}</p>
           <p>
           <p>
-            <span>执行人:{{item.ScanTaskBase && item.ScanTaskBase[0]?item.ScanTaskBase[0].WorkerName:''}}</span><span>确认人:{{item.ScanTaskBase && item.ScanTaskBase[0]?item.ScanTaskBase[0].ConfirmingPersonName:''}}</span>
+            <span>执行人:{{
+                item.ScanTaskBase && item.ScanTaskBase[0] ? item.ScanTaskBase[0].WorkerName : ''
+              }}</span><span>确认人:{{
+              item.ScanTaskBase && item.ScanTaskBase[0] ? item.ScanTaskBase[0].ConfirmingPersonName : ''
+            }}</span>
           </p>
           </p>
         </div>
         </div>
         <div class="plan">
         <div class="plan">
-          <p>平面图上的位置:<span>{{item.local | localTransformation}}</span></p>
+          <p>平面图上的位置:<span>{{ item.local | localTransformation }}</span></p>
           <div class="img-box">
           <div class="img-box">
-            <canvas :id="'canvas'+index" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0" :data-modelid="item.ModelId"
-              :data-EquipID='item.EquipID' :data-x="item.local.X" :data-y="item.local.Y"></canvas>
+            <canvas :id="'canvas'+index" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"
+                    :data-modelid="item.ModelId"
+                    :data-EquipID='item.EquipID' :data-x="item.local.X" :data-y="item.local.Y"></canvas>
           </div>
           </div>
         </div>
         </div>
       </div>
       </div>
@@ -36,14 +49,15 @@
           <el-scrollbar>
           <el-scrollbar>
             <p class="explain-content">
             <p class="explain-content">
               <el-scrollbar>
               <el-scrollbar>
-                {{item.ScanTaskBase?item.ScanTaskBase[0].Note:""}}
+                {{ item.ScanTaskBase ? item.ScanTaskBase[0].Note : "" }}
               </el-scrollbar>
               </el-scrollbar>
             </p>
             </p>
           </el-scrollbar>
           </el-scrollbar>
         </div>
         </div>
-        <div class="photo" v-for="(it,ind) in item.ScanTaskBase[0].TaskPicList" :key='ind' v-else-if="item.ScanTaskBase && item.ScanTaskBase[0]">
+        <div class="photo" v-for="(it,ind) in item.ScanTaskBase[0].TaskPicList" :key='ind'
+             v-else-if="item.ScanTaskBase && item.ScanTaskBase[0]">
           <div class="img-box">
           <div class="img-box">
-            <p>{{it.Name}}<span>拍摄时间:{{it.CreateTime | timeTransformation}}</span></p>
+            <p>{{ it.Name }}<span>拍摄时间:{{ it.CreateTime | timeTransformation }}</span></p>
             <div class="img-content">
             <div class="img-content">
               <img :src="`/image-service/common/image_get?systemId=dataPlatform&key=${it.Key}`" alt="现场拍摄照片">
               <img :src="`/image-service/common/image_get?systemId=dataPlatform&key=${it.Key}`" alt="现场拍摄照片">
             </div>
             </div>
@@ -55,14 +69,12 @@
 </template>
 </template>
 
 
 <script>
 <script>
-import { mapGetters } from "vuex";
-import { toBeDelEquipPage } from "@/api/scan/request.js";
-import { LocationPointScene, FloorView } from "@saga-web/cad-engine/lib";
+import {mapGetters} from "vuex";
+import {toBeDelEquipPage} from "@/api/scan/request.js";
+import {LocationPointScene, FloorView} from "@saga-web/cad-engine/lib";
 
 
 export default {
 export default {
-  components: {
-
-  },
+  components: {},
   data() {
   data() {
     return {
     return {
       pageData: [],
       pageData: [],
@@ -235,7 +247,7 @@ export default {
       that.clearGraphy(this.i)
       that.clearGraphy(this.i)
       that.scene = new LocationPointScene();
       that.scene = new LocationPointScene();
       this.canvasLoading = true;
       this.canvasLoading = true;
-      that.scene.getFloorData('/modelapi/base-graph/query', { ModelId: can[this.i].dataset.modelid }).then(res => {
+      that.scene.getFloorData('/modelapi/base-graph/query', {ModelId: can[this.i].dataset.modelid}).then(res => {
         that.canvasLoading = false;
         that.canvasLoading = false;
         if (res == 'error') {
         if (res == 'error') {
           this.FloorMap = '';
           this.FloorMap = '';
@@ -283,50 +295,63 @@ export default {
     margin-right: 0;
     margin-right: 0;
   }
   }
 }
 }
+
 .box {
 .box {
   background: #f2f2f2;
   background: #f2f2f2;
   margin: 0 auto;
   margin: 0 auto;
   height: 100%;
   height: 100%;
   overflow-y: auto;
   overflow-y: auto;
+
   ul {
   ul {
     .infinite-list-item {
     .infinite-list-item {
       margin-bottom: 20px;
       margin-bottom: 20px;
     }
     }
   }
   }
+
   .content-box {
   .content-box {
     width: 1000px;
     width: 1000px;
     margin: 0 auto;
     margin: 0 auto;
     background: white;
     background: white;
     padding: 10px 4px 10px 20px;
     padding: 10px 4px 10px 20px;
     box-sizing: border-box;
     box-sizing: border-box;
+
     .content-top {
     .content-top {
       display: flex;
       display: flex;
+
       div {
       div {
         flex: 1;
         flex: 1;
       }
       }
+
       .details {
       .details {
         margin-right: 10px;
         margin-right: 10px;
+
         .el-badge {
         .el-badge {
           margin: 10px 0 0 10px;
           margin: 10px 0 0 10px;
         }
         }
+
         p {
         p {
           margin-top: 4px;
           margin-top: 4px;
+
           span:nth-child(1) {
           span:nth-child(1) {
             display: inline-block;
             display: inline-block;
             width: 200px;
             width: 200px;
           }
           }
         }
         }
+
         .copy {
         .copy {
           color: #409eff;
           color: #409eff;
           margin-left: 20px;
           margin-left: 20px;
         }
         }
       }
       }
+
       .plan {
       .plan {
         padding-left: 20px;
         padding-left: 20px;
         box-sizing: border-box;
         box-sizing: border-box;
+
         p {
         p {
           width: 100%;
           width: 100%;
           margin: 10px 0 10px 0;
           margin: 10px 0 10px 0;
+
           span {
           span {
             float: right;
             float: right;
             padding-right: 20px;
             padding-right: 20px;
@@ -335,36 +360,45 @@ export default {
         }
         }
       }
       }
     }
     }
+
     .content-bottom {
     .content-bottom {
       width: 100%;
       width: 100%;
       margin-top: 20px;
       margin-top: 20px;
       overflow: hidden;
       overflow: hidden;
+
       .photo,
       .photo,
       .explain {
       .explain {
         float: left;
         float: left;
         width: 50%;
         width: 50%;
       }
       }
+
       .photo {
       .photo {
         box-sizing: border-box;
         box-sizing: border-box;
         margin-bottom: 24px;
         margin-bottom: 24px;
+
         p {
         p {
           margin-bottom: 10px;
           margin-bottom: 10px;
         }
         }
+
         span {
         span {
           float: right;
           float: right;
           padding-right: 20px;
           padding-right: 20px;
           box-sizing: border-box;
           box-sizing: border-box;
         }
         }
       }
       }
+
       .explain {
       .explain {
         padding-right: 20px;
         padding-right: 20px;
         box-sizing: border-box;
         box-sizing: border-box;
+
         .el-scrollbar {
         .el-scrollbar {
           background: #f2f2f2;
           background: #f2f2f2;
         }
         }
+
         p {
         p {
           margin-bottom: 10px;
           margin-bottom: 10px;
         }
         }
+
         .explain-content {
         .explain-content {
           padding: 10px;
           padding: 10px;
           width: 100%;
           width: 100%;
@@ -375,17 +409,20 @@ export default {
     }
     }
   }
   }
 }
 }
+
 .img-box {
 .img-box {
   width: 100%;
   width: 100%;
+
   .img-content {
   .img-content {
     overflow: hidden;
     overflow: hidden;
     position: relative;
     position: relative;
-    width: calc(100%-20px);
+    width: calc(100% - 20px);
     height: 300px;
     height: 300px;
     vertical-align: middle;
     vertical-align: middle;
     text-align: center;
     text-align: center;
     background: #ebeef5;
     background: #ebeef5;
     margin-right: 20px;
     margin-right: 20px;
+
     img {
     img {
       position: absolute;
       position: absolute;
       left: 50%;
       left: 50%;
@@ -396,7 +433,8 @@ export default {
     }
     }
   }
   }
 }
 }
+
 canvas {
 canvas {
   position: static !important;
   position: static !important;
 }
 }
-</style>
+</style>

+ 344 - 332
src/views/model/report/index.vue

@@ -2,13 +2,13 @@
   <div class="report-index">
   <div class="report-index">
     <div class="statistics">
     <div class="statistics">
       <div class="building">
       <div class="building">
-        <p>建筑模型文件夹:<b>{{ModelFileCount}}</b></p>
+        <p>建筑模型文件夹:<b>{{ ModelFileCount }}</b></p>
       </div>
       </div>
       <div class="includefloor">
       <div class="includefloor">
-        <p>包含楼层模型文件:<b>{{modelFloorCount}}</b></p>
+        <p>包含楼层模型文件:<b>{{ modelFloorCount }}</b></p>
       </div>
       </div>
       <div class="problematic">
       <div class="problematic">
-        <p>检查出问题的楼层模型文件:<b>{{problemCount}}</b></p>
+        <p>检查出问题的楼层模型文件:<b>{{ problemCount }}</b></p>
       </div>
       </div>
     </div>
     </div>
     <div class="main-content">
     <div class="main-content">
@@ -17,7 +17,8 @@
           <template v-for="(item,index) in tableList">
           <template v-for="(item,index) in tableList">
             <el-tab-pane :name="item.Code" :key="index" :label="item.Name">
             <el-tab-pane :name="item.Code" :key="index" :label="item.Name">
               <span slot="label">
               <span slot="label">
-                <i :class="item.flag?'msg-icon el-icon-success success-color':'msg-icon el-icon-error error-color'" style="font-size:14px;"></i>
+                <i :class="item.flag?'msg-icon el-icon-success success-color':'msg-icon el-icon-error error-color'"
+                   style="font-size:14px;"></i>
                 <span>{{ item.Name }}</span>
                 <span>{{ item.Name }}</span>
               </span>
               </span>
             </el-tab-pane>
             </el-tab-pane>
@@ -26,9 +27,10 @@
       </div>
       </div>
       <div class="content-box">
       <div class="content-box">
         <div class="button">
         <div class="button">
-          <el-button @click="del"  :disabled="toBeDelCount?false:true" :title="toBeDelCount ? '':'没有待删除的设备'">需从模型中删除的设备
+          <el-button @click="del" :disabled="toBeDelCount?false:true" :title="toBeDelCount ? '':'没有待删除的设备'">需从模型中删除的设备
           </el-button>
           </el-button>
-          <el-button @click="supplement" :disabled="toBeSuppCount?false:true" :title="toBeSuppCount ? '':'没有待补充的设备'">模型待补充的设备
+          <el-button @click="supplement" :disabled="toBeSuppCount?false:true" :title="toBeSuppCount ? '':'没有待补充的设备'">
+            模型待补充的设备
           </el-button>
           </el-button>
           <el-button :loading="load" @click='getExportReport'>导出模型问题报告</el-button>
           <el-button :loading="load" @click='getExportReport'>导出模型问题报告</el-button>
         </div>
         </div>
@@ -60,7 +62,8 @@
             </el-table-column>
             </el-table-column>
             <el-table-column prop="questionItem" label="有问题的检查项" fixed width="150" style="border-right:1px solid red">
             <el-table-column prop="questionItem" label="有问题的检查项" fixed width="150" style="border-right:1px solid red">
               <template slot-scope="scope">
               <template slot-scope="scope">
-                <el-badge :value="scope.row.questionItem" class="item" :type='scope.row.questionItem?"warning":"success"'>
+                <el-badge :value="scope.row.questionItem" class="item"
+                          :type='scope.row.questionItem?"warning":"success"'>
                 </el-badge>
                 </el-badge>
               </template>
               </template>
             </el-table-column>
             </el-table-column>
@@ -129,7 +132,8 @@
             </el-table-column>
             </el-table-column>
             <el-table-column prop="SystemReferEquipCheck" label='管网及相关设备检查' width="200">
             <el-table-column prop="SystemReferEquipCheck" label='管网及相关设备检查' width="200">
               <template slot-scope="scope">
               <template slot-scope="scope">
-                <el-badge :type='scope.row.SystemReferEquipCheck?"danger":"success"' :value="scope.row.SystemReferEquipCheck"
+                <el-badge :type='scope.row.SystemReferEquipCheck?"danger":"success"'
+                          :value="scope.row.SystemReferEquipCheck"
                           class="item"
                           class="item"
                           v-if="scope.row.SystemReferEquipCheck"/>
                           v-if="scope.row.SystemReferEquipCheck"/>
                 <i class="msg-icon el-icon-success success-color1" style="font-size:20px;"
                 <i class="msg-icon el-icon-success success-color1" style="font-size:20px;"
@@ -160,8 +164,10 @@
               </div>
               </div>
             </template>
             </template>
           </el-table>
           </el-table>
-          <el-pagination class="right" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.pageNumber"
-                         :page-sizes="page.pageSizes" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.total">
+          <el-pagination class="right" @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                         :current-page="page.pageNumber"
+                         :page-sizes="page.pageSizes" :page-size="page.pageSize"
+                         layout="total, sizes, prev, pager, next, jumper" :total="page.total">
           </el-pagination>
           </el-pagination>
         </div>
         </div>
       </div>
       </div>
@@ -170,385 +176,391 @@
 </template>
 </template>
 
 
 <script>
 <script>
-  import {mapGetters} from "vuex";
-  import dasBoard from "@/views/dasboard/index";
-  import {queryFloorList, queryLostReportList, queryModel, queryReportList} from "@/api/model/report.js";
-  import {getSupplement, getToBeDelEquip} from "@/api/scan/request.js";
-  import axios from 'axios'
+import {mapGetters} from "vuex";
+import dasBoard from "@/views/dasboard/index";
+import {queryFloorList, queryLostReportList, queryModel, queryReportList} from "@/api/model/report.js";
+import {getSupplement, getToBeDelEquip} from "@/api/scan/request.js";
+import axios from 'axios'
 
 
-  export default {
-    components: {
-      dasBoard
-    },
-    data() {
-      return {
-        params: null,
-        ModelFileCount: null,// 模型文件夹数量
-        modelFloorCount: null,// 包含楼层模型文件数量
-        problemCount: 0,// 检查出问题的楼层模型文件数量
-        tableList: [], // tab数据
-        tableData: [],// 列表数据
-        activeTab: '', // tab当前选中项
-        headerStyle: { // 列表样式
-          backgroundColor: '#e1e4e5',
-          color: '#2b2b2b',
+export default {
+  components: {
+    dasBoard
+  },
+  data() {
+    return {
+      params: null,
+      ModelFileCount: null,// 模型文件夹数量
+      modelFloorCount: null,// 包含楼层模型文件数量
+      problemCount: 0,// 检查出问题的楼层模型文件数量
+      tableList: [], // tab数据
+      tableData: [],// 列表数据
+      activeTab: '', // tab当前选中项
+      headerStyle: { // 列表样式
+        backgroundColor: '#e1e4e5',
+        color: '#2b2b2b',
+        lineHeight: '30px'
+      },
+      page: {
+        pageSize: 50,
+        pageSizes: [10, 20, 50, 100],
+        pageNumber: 1,
+        total: 0
+      },
+      loading: false,
+      load: false,
+      floorIconType: null,
+      toBeSuppCount: 0,
+      toBeDelCount: 0
+    }
+  },
+  mounted() {
+  },
+  created() {
+    this.params = {
+      Orders: "Name asc"
+    }
+    this.getModelFileCount();
+    this.getModelFloorCount();
+  },
+  computed: {
+    ...mapGetters('layout', ['projectId'])
+  },
+  methods: {
+    cellStyle({row, column, rowIndex, columnIndex}) {
+      if (column.label !== '模型楼层' && column.label !== '待删除设备数量' && column.label !== '待补充设备数量' && column.label !== '有问题的检查项') {
+        return {
+          background: '#f3f3f3',
           lineHeight: '30px'
           lineHeight: '30px'
-        },
-        page: {
-          pageSize: 50,
-          pageSizes: [10, 20, 50, 100],
-          pageNumber: 1,
-          total: 0
-        },
-        loading: false,
-        load: false,
-        floorIconType: null,
-        toBeSuppCount: 0,
-        toBeDelCount: 0
-      }
-    },
-    mounted() { },
-    created() {
-      this.params = {
-        Orders: "Name asc"
+        }
       }
       }
-      this.getModelFileCount();
-      this.getModelFloorCount();
     },
     },
-    computed: {
-      ...mapGetters('layout', ['projectId'])
-    },
-    methods: {
-      cellStyle({row, column, rowIndex, columnIndex}) {
-        if (column.label !== '模型楼层' && column.label !== '待删除设备数量' && column.label !== '待补充设备数量' && column.label !== '有问题的检查项') {
-          return {
-            background: '#f3f3f3',
-            lineHeight: '30px'
+    getModelFloorCount() {// 获取楼层模型文件数量,计算出检查出问题的模型文件
+      let promise1 = new Promise(resolve => {
+        queryFloorList({Filters: "Status=4", pageNumber: 1, PageSize: 500}, res => {
+          resolve(res);
+        })
+      })
+      Promise.all([promise1]).then(response => {
+        this.problemCount = 0;
+        let res = response[0];
+        this.modelFloorCount = res.Total;
+        this.modelFloor = res.Content;
+        this.getModelFileIcon();
+        this.modelFloor.forEach(item => {
+          if (!item.DataCheckResult) {
+            this.problemCount++;
           }
           }
-        }
-      },
-      getModelFloorCount() {// 获取楼层模型文件数量,计算出检查出问题的模型文件
-        let promise1 = new Promise(resolve => {
-          queryFloorList({Filters:"Status=4",pageNumber:1,PageSize: 500}, res => {
-            resolve(res);
-          })
         })
         })
-        Promise.all([promise1]).then(response => {
-          this.problemCount = 0;
-          let res = response[0];
-          this.modelFloorCount = res.Total;
-          this.modelFloor = res.Content;
-          this.getModelFileIcon();
-          this.modelFloor.forEach(item => {
+      })
+    },
+    getModelFileIcon() {// 计算文件夹的图标
+      this.tableList.forEach(item => {
+        this.modelFloor.forEach(it => {
+          if (item.Code === it.FolderId) {
             if (!item.DataCheckResult) {
             if (!item.DataCheckResult) {
-              this.problemCount++;
+              item.flag = false;
             }
             }
-          })
+          }
         })
         })
-      },
-      getModelFileIcon() {// 计算文件夹的图标
-        this.tableList.forEach(item => {
-          this.modelFloor.forEach(it => {
-            if (item.Code === it.FolderId) {
-              if (!item.DataCheckResult) {
-                item.flag = false;
-              }
-            }
+      })
+    },
+    getData(tab) {// 切换tab时执行
+      this.getModelFloor();
+    },
+    getModelFileCount() {// 获取项目下所有模型文件夹
+      queryModel(this.params, res => {
+        this.ModelFileCount = res.Content.length;
+        this.tableList = res.Content;
+        if (this.tableList && this.tableList.length) {
+          this.tableList.forEach((item, index) => {
+            item.Code = item.Id;
           })
           })
-        })
-      },
-      getData(tab) {// 切换tab时执行
-        this.getModelFloor();
-      },
-      getModelFileCount() {// 获取项目下所有模型文件夹
-        queryModel(this.params, res => {
-          this.ModelFileCount = res.Content.length;
-          this.tableList = res.Content;
-          if (this.tableList && this.tableList.length) {
-            this.tableList.forEach((item, index) => {
-              item.Code = item.Id;
-            })
-            this.activeTab = this.tableList[0].Code;// 默认选中第一个模型文件夹
-          }
-          this.getModelFloor();
-        });
-      },
-      getModelFloor() {// 获取当前楼层下的模型楼层和各个检查项的数据
-        let params = {
-          ProjectId: this.projectId,
-          Id: `${this.activeTab}`,
-          PageNumber: this.page.pageNumber,
-          PageSize: this.page.pageSize
+          this.activeTab = this.tableList[0].Code;// 默认选中第一个模型文件夹
         }
         }
-        queryReportList(params, res => {
-          this.FloorName = res.Content;
-          this.tableData = [];
-          if (this.FloorName && this.FloorName.length) {
-            this.loading = true;
-            let i = 0;
-            this.FloorName.forEach(item => {
-              item.questionItem = 0;
-              for (let key in item) {
-                if (item[key] > 0 && key !== "FloorName" && key !== "questionItem") {
-                  i += 1;
-                  item.questionItem += 1;
-                }
+        this.getModelFloor();
+      });
+    },
+    getModelFloor() {// 获取当前楼层下的模型楼层和各个检查项的数据
+      let params = {
+        ProjectId: this.projectId,
+        Id: `${this.activeTab}`,
+        PageNumber: this.page.pageNumber,
+        PageSize: this.page.pageSize
+      }
+      queryReportList(params, res => {
+        this.FloorName = res.Content;
+        this.tableData = [];
+        if (this.FloorName && this.FloorName.length) {
+          this.loading = true;
+          let i = 0;
+          this.FloorName.forEach(item => {
+            item.questionItem = 0;
+            for (let key in item) {
+              if (item[key] > 0 && key !== "FloorName" && key !== "questionItem") {
+                i += 1;
+                item.questionItem += 1;
               }
               }
-            })
-            this.floorIconType = i;
-          }
-          this.getLostModelFloor();
-        })
-      },
-      getLostModelFloor() {// 获取缺失楼层
-        let params = {
-          ProjectId: this.projectId,
-          Filters: `FolderId='${this.activeTab}';Status=4`
+            }
+          })
+          this.floorIconType = i;
         }
         }
-        queryLostReportList(params, res => {
-          this.LostFloorName = res.Content;
-          this.getToBeCount();
-        })
-      },
-      getToBeCount() {// 根据模型ID获取待删除数量和待补充数量
-        let equipComDelList = [],
-          toBeAdded = []
-        this.equipComDelList = [];
-        this.LostFloorName.forEach(item => {
-          if (item.CurrentModelId) {
-            equipComDelList.push({
-              ModelId: item.CurrentModelId
-            });
-            this.equipComDelList.push(item.CurrentModelId)
-          } else {
-            item.flag = 'lost';
-            item.FloorName = `${item.Note + item.FloorName}`
-          }
-          if (item.Id) {
-            toBeAdded.push({
-              ModelId: item.Id
-            })
-          }
-        })
-        let params = {
-          ProjectId: this.projectId,
-          data: equipComDelList
-        }, paramsToBe = {
-          ProjectId: this.projectId,
-          data: toBeAdded
+        this.getLostModelFloor();
+      })
+    },
+    getLostModelFloor() {// 获取缺失楼层
+      let params = {
+        ProjectId: this.projectId,
+        Filters: `FolderId='${this.activeTab}';Status=4`
+      }
+      queryLostReportList(params, res => {
+        this.LostFloorName = res.Content;
+        this.getToBeCount();
+      })
+    },
+    getToBeCount() {// 根据模型ID获取待删除数量和待补充数量
+      let equipComDelList = [],
+        toBeAdded = []
+      this.equipComDelList = [];
+      this.LostFloorName.forEach(item => {
+        if (item.CurrentModelId) {
+          equipComDelList.push({
+            ModelId: item.CurrentModelId
+          });
+          this.equipComDelList.push(item.CurrentModelId)
+        } else {
+          item.flag = 'lost';
+          item.FloorName = `${item.Note + item.FloorName}`
         }
         }
-        let promise1 = new Promise(resolve => {
-          getToBeDelEquip(params, res => {
-            resolve(res);
+        if (item.Id) {
+          toBeAdded.push({
+            ModelId: item.Id
           })
           })
+        }
+      })
+      let params = {
+        ProjectId: this.projectId,
+        data: equipComDelList
+      }, paramsToBe = {
+        ProjectId: this.projectId,
+        data: toBeAdded
+      }
+      let promise1 = new Promise(resolve => {
+        getToBeDelEquip(params, res => {
+          resolve(res);
         })
         })
-        let promise2 = new Promise(resolve => {
-          getSupplement(paramsToBe, res => {
-            resolve(res);
-          })
+      })
+      let promise2 = new Promise(resolve => {
+        getSupplement(paramsToBe, res => {
+          resolve(res);
         })
         })
-        Promise.all([promise1, promise2]).then(response => {
-          let res = response[0];
-          let res1 = response[1];
-          this.toBeDelCount = 0;
-          this.toBeSuppCount = 0;
-          res.Content.forEach(item => {
-            if (item.Count > 0) {
-              this.toBeDelCount += 1;
+      })
+      Promise.all([promise1, promise2]).then(response => {
+        let res = response[0];
+        let res1 = response[1];
+        this.toBeDelCount = 0;
+        this.toBeSuppCount = 0;
+        res.Content.forEach(item => {
+          if (item.Count > 0) {
+            this.toBeDelCount += 1;
+          }
+          this.LostFloorName.forEach(it => {
+            if (item.ModelId === it.CurrentModelId) {
+              it.toBeDel = item.Count;
             }
             }
-            this.LostFloorName.forEach(it => {
-              if (item.ModelId === it.CurrentModelId) {
-                it.toBeDel = item.Count;
-              }
-            })
           })
           })
-          res1.Content.forEach(item => {
-            if (item.Count > 0) {
-              this.toBeSuppCount += 1;
+        })
+        res1.Content.forEach(item => {
+          if (item.Count > 0) {
+            this.toBeSuppCount += 1;
+          }
+          this.LostFloorName.forEach(it => {
+            if (item.ModelId === it.Id) {
+              it.toBeSupplement = item.Count;
             }
             }
-            this.LostFloorName.forEach(it => {
-              if (item.ModelId === it.Id) {
-                it.toBeSupplement = item.Count;
-              }
-            })
           })
           })
-          if (this.LostFloorName && this.LostFloorName.length) {
-            this.LostFloorName.forEach(item => {
-              this.FloorName.forEach(it => {
-                if (item.FloorName === it.FloorName) {
-                  for (let key in it) {
-                    item[key] = it[key];
-                  }
+        })
+        if (this.LostFloorName && this.LostFloorName.length) {
+          this.LostFloorName.forEach(item => {
+            this.FloorName.forEach(it => {
+              if (item.FloorName === it.FloorName) {
+                for (let key in it) {
+                  item[key] = it[key];
                 }
                 }
-              })
+              }
             })
             })
-            this.tableData = this.LostFloorName;
-          } else {
-            this.tableData = [];
+          })
+          this.tableData = this.LostFloorName;
+        } else {
+          this.tableData = [];
+        }
+        this.page.total = this.tableData.length;
+        this.loading = false;
+      })
+    },
+    del() {// 点击需从模型中删除的设备
+      let equipComDelList = encodeURIComponent(JSON.stringify(this.equipComDelList));
+      let jumpRouter = this.$router.resolve({path: '/model/report/deleted', query: {equipComDelList: equipComDelList}})
+      window.open(jumpRouter.href, '_blank')
+    },
+    supplement() {// 点击模型待补充的设备
+      let equipComDelList = encodeURIComponent(JSON.stringify(this.equipComDelList));
+      console.log(equipComDelList, 'list')
+      let jumpRouter = this.$router.resolve({
+        path: '/model/report/supplement',
+        query: {equipComDelList: equipComDelList}
+      })
+
+      window.open(jumpRouter.href, '_blank')
+    },
+    getExportReport() {// 导出模型问题报告
+      let that = this;
+      this.load = true;
+      axios({
+        method: 'post',
+        url: `/modelapi/report/non-blocking`,
+        data: {
+          Id: this.activeTab,
+          ProjectId: this.projectId
+        },
+        headers: {
+          ProjectId: this.projectId
+        },
+        responseType: 'blob'
+      }).then(function (res) {
+        if (res.data.type == 'application/vnd.ms-excel') {
+          let blob = new Blob([res.data], {type: 'application/vnd.ms-excel;charset=utf-8'});
+          let fileName = decodeURI(res.headers['content-disposition']);
+          if (fileName)
+            fileName = fileName.substring(fileName.indexOf('=') + 1);
+          if ('download' in document.createElement('a')) { // 非IE下载
+            const elink = document.createElement('a')
+            elink.download = fileName
+            elink.style.display = 'none'
+            elink.href = URL.createObjectURL(blob)
+            document.body.appendChild(elink)
+            elink.click()
+            URL.revokeObjectURL(elink.href) // 释放URL 对象
+            document.body.removeChild(elink)
+            that.load = false;
+          } else { // IE10+下载
+            navigator.msSaveBlob(blob, fileName)
+            that.load = false;
           }
           }
-          this.page.total = this.tableData.length;
-          this.loading = false;
-        })
-      },
-      del() {// 点击需从模型中删除的设备
-        let equipComDelList = encodeURIComponent(JSON.stringify(this.equipComDelList));
-        let jumpRouter = this.$router.resolve({ path: '/model/report/deleted', query: { equipComDelList: equipComDelList } })
-        window.open(jumpRouter.href, '_blank')
-      },
-      supplement() {// 点击模型待补充的设备
-        let equipComDelList = encodeURIComponent(JSON.stringify(this.equipComDelList));
-        let jumpRouter = this.$router.resolve({ path: '/model/report/supplement', query: { equipComDelList: equipComDelList } })
-        window.open(jumpRouter.href, '_blank')
-      },
-      getExportReport() {// 导出模型问题报告
-        let that = this;
-        this.load = true;
-        axios({
-          method: 'post',
-          url: `/modelapi/report/non-blocking`,
-          data: {
-            Id: this.activeTab,
-            ProjectId: this.projectId
-          },
-          headers: {
-            ProjectId: this.projectId
-          },
-          responseType: 'blob'
-        }).then(function (res) {
-          if (res.data.type == 'application/vnd.ms-excel') {
-            let blob = new Blob([res.data], { type: 'application/vnd.ms-excel;charset=utf-8' });
-            let fileName = decodeURI(res.headers['content-disposition']);
-            if (fileName)
-              fileName = fileName.substring(fileName.indexOf('=') + 1);
-            if ('download' in document.createElement('a')) { // 非IE下载
-              const elink = document.createElement('a')
-              elink.download = fileName
-              elink.style.display = 'none'
-              elink.href = URL.createObjectURL(blob)
-              document.body.appendChild(elink)
-              elink.click()
-              URL.revokeObjectURL(elink.href) // 释放URL 对象
-              document.body.removeChild(elink)
+        } else {
+          let reader = new FileReader()
+          reader.onload = e => {
+            if (e.target.readyState === 2) {
+              let res = {}
               that.load = false;
               that.load = false;
-            } else { // IE10+下载
-              navigator.msSaveBlob(blob, fileName)
-              that.load = false;
-            }
-          } else {
-            let reader = new FileReader()
-            reader.onload = e => {
-              if (e.target.readyState === 2) {
-                let res = {}
-                that.load = false;
-                res = JSON.parse(e.target.result)
-                that.$message.error(res.Message);
-              }
+              res = JSON.parse(e.target.result)
+              that.$message.error(res.Message);
             }
             }
-            reader.readAsText(res.data)
           }
           }
-        })
-      },
-      tableRowClassName({ row, rowIndex, column }) {// 设置缺失楼层所在行的背景色
-        if (row.flag && row.flag === 'lost') {
-          return 'warning-row';
+          reader.readAsText(res.data)
         }
         }
-      },
-      handleSizeChange(val) {// 切换每页显示数量
-        this.page.pageSize = val;
-        this.getModelFloor();
-      },
-      handleCurrentChange(val) {// 切换页码
-        this.page.pageNumber = val;
-        this.getModelFloor();
-      }
+      })
     },
     },
-    watch: {
-      projectId() {
-        this.getModelFileCount();
-        this.getModelFloorCount();
+    tableRowClassName({row, rowIndex, column}) {// 设置缺失楼层所在行的背景色
+      if (row.flag && row.flag === 'lost') {
+        return 'warning-row';
       }
       }
+    },
+    handleSizeChange(val) {// 切换每页显示数量
+      this.page.pageSize = val;
+      this.getModelFloor();
+    },
+    handleCurrentChange(val) {// 切换页码
+      this.page.pageNumber = val;
+      this.getModelFloor();
+    }
+  },
+  watch: {
+    projectId() {
+      this.getModelFileCount();
+      this.getModelFloorCount();
     }
     }
   }
   }
+}
 </script>
 </script>
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>
-  .report-index {
-    .statistics {
-      display: flex;
-      width: 100%;
-      padding: 20px 0;
-      background: white;
-      margin-bottom: 10px;
+.report-index {
+  .statistics {
+    display: flex;
+    width: 100%;
+    padding: 20px 0;
+    background: white;
+    margin-bottom: 10px;
 
 
-      div {
-        flex: 1;
-        text-align: center;
+    div {
+      flex: 1;
+      text-align: center;
 
 
-        p {
-          b {
-            font-size: 20px;
-            margin-left: 20px;
-          }
+      p {
+        b {
+          font-size: 20px;
+          margin-left: 20px;
         }
         }
       }
       }
     }
     }
+  }
 
 
-    .main-content {
-      width: 100%;
-      height: calc(100% - 90px);
-      background: white;
+  .main-content {
+    width: 100%;
+    height: calc(100% - 90px);
+    background: white;
 
 
-      .content-box {
-        height: calc(100% - 105px);
+    .content-box {
+      height: calc(100% - 105px);
 
 
-        .table {
-          margin-top: 15px;
-        }
+      .table {
+        margin-top: 15px;
       }
       }
     }
     }
+  }
 
 
-    .button {
-      padding-left: 10px;
-
-    }
+  .button {
+    padding-left: 10px;
 
 
-    .success-color {
-      color: #67c23a;
-    }
+  }
 
 
-    .error-color {
-      color: #f56c6c;
-    }
+  .success-color {
+    color: #67c23a;
+  }
 
 
-    .success-color1 {
-      color: #67c23a60;
-    }
+  .error-color {
+    color: #f56c6c;
+  }
 
 
-    .error-color1 {
-      color: #f56c6c60;
-    }
+  .success-color1 {
+    color: #67c23a60;
+  }
 
 
-    /deep/ .el-table_1_column_4 {
-      border-right: 1px solid #e2e2e2 !important;
-    }
+  .error-color1 {
+    color: #f56c6c60;
+  }
 
 
-    /deep/ .el-table {
-      .el-table__fixed {
-        height: auto !important;
-        bottom: 17px;
-      }
-    }
+  /deep/ .el-table_1_column_4 {
+    border-right: 1px solid #e2e2e2 !important;
+  }
 
 
-    /deep/ .el-table__row.warning-row {
-      td {
-        background: #f9f9f9 !important;
-      }
+  /deep/ .el-table {
+    .el-table__fixed {
+      height: auto !important;
+      bottom: 17px;
     }
     }
+  }
 
 
-    /deep/ .el-badge__content--danger {
-      background-color: #F56C6C60;
+  /deep/ .el-table__row.warning-row {
+    td {
+      background: #f9f9f9 !important;
     }
     }
+  }
 
 
+  /deep/ .el-badge__content--danger {
+    background-color: #F56C6C60;
   }
   }
 
 
+}
+
 </style>
 </style>

+ 62 - 32
src/views/model/report/supplement.vue

@@ -4,41 +4,48 @@
     <div class="content-box" v-for="(item,index) in pageData" :key="index">
     <div class="content-box" v-for="(item,index) in pageData" :key="index">
       <div class="content-top">
       <div class="content-top">
         <div class="details">
         <div class="details">
-          <h4>{{index |numTransformation(4)}}<el-badge value="待补充" class="item" type="success"></el-badge>
+          <h4>{{ index |numTransformation(4) }}
+            <el-badge value="待补充" class="item" type="success"></el-badge>
           </h4>
           </h4>
-          <h4>{{`${item.BuildingName}建筑模型`}}-{{`${item.FloorName}层`}}-{{`${item.EquipLocalName?item.EquipLocalName:item.EquipName}`}}</h4>
-          <b>标记码:<span @dblclick="copyContent" id="copy">{{item.EquipID}}</span></b><span class="copy" @click="clickCopy">点击复制</span>
-          <input id="copyContent" type="text" @dblclick="copyContent" style="border:none;opacity:0;position:absolute;top:0;left:0;">
-          <p style="margin-top:30px;">建议使用的Revit族:{{item.Res}}</p>
-          <p>设计图纸中编码:{{item.CADID}}</p>
-          <p><span>资产族:{{item.FamilyName.Name}}</span></p>
-          <p><span style="width:500px;">资产ID:{{item.EquipID}}</span></p>
-          <p>现场发现人:{{item.FindPeople}}</p>
+          <h4>
+            {{ `${item.BuildingName}建筑模型` }}-{{
+              `${item.FloorName}层`
+            }}-{{ `${item.EquipLocalName ? item.EquipLocalName : item.EquipName}` }}</h4>
+          <b>标记码:<span @dblclick="copyContent" id="copy">{{ item.EquipID }}</span></b><span class="copy"
+                                                                                            @click="clickCopy">点击复制</span>
+          <input id="copyContent" type="text" @dblclick="copyContent"
+                 style="border:none;opacity:0;position:absolute;top:0;left:0;">
+          <p style="margin-top:30px;">建议使用的Revit族:{{ item.Res }}</p>
+          <p>设计图纸中编码:{{ item.CADID }}</p>
+          <p><span>资产族:{{ item.FamilyName.Name }}</span></p>
+          <p><span style="width:500px;">资产ID:{{ item.EquipID }}</span></p>
+          <p>现场发现人:{{ item.FindPeople }}</p>
         </div>
         </div>
         <div class="plan">
         <div class="plan">
-          <p>平面图上的位置:<span>{{item.local | localTransformation}}</span></p>
+          <p>平面图上的位置:<span>{{ item.local | localTransformation }}</span></p>
           <div class="img-box">
           <div class="img-box">
-            <canvas :id="'canvas'+index" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0" :data-modelid="item.ModelId"
-              :data-EquipID='item.EquipID' :data-x="item.local.X" :data-y="item.local.Y"></canvas>
+            <canvas :id="'canvas'+index" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"
+                    :data-modelid="item.ModelId"
+                    :data-EquipID='item.EquipID' :data-x="item.local.X" :data-y="item.local.Y"></canvas>
           </div>
           </div>
         </div>
         </div>
       </div>
       </div>
       <div class="content-bottom">
       <div class="content-bottom">
         <div class="photo" v-for="(it,ind) in item.LedgerParam.PhotoDoc.Nameplate" :key="ind">
         <div class="photo" v-for="(it,ind) in item.LedgerParam.PhotoDoc.Nameplate" :key="ind">
-          <p>{{it.name}}<span>拍摄时间:{{it.createTime | timeTransformation}}</span></p>
+          <p>{{ it.Name }}<span>拍摄时间:{{ it.createTime | timeTransformation }}</span></p>
           <div class="img-box">
           <div class="img-box">
             <div class="img-content">
             <div class="img-content">
-              <img :src="`/image-service/common/image_get?systemId=dataPlatform&key=${it.key}`" alt="铭牌图片">
+              <img :src="`/image-service/common/image_get?systemId=dataPlatform&key=${it.Key}`" alt="铭牌图片">
             </div>
             </div>
           </div>
           </div>
         </div>
         </div>
         <div class="photo" v-for="(photo,num) in item.LedgerParam.PhotoDoc.Pic" :key="num+photo">
         <div class="photo" v-for="(photo,num) in item.LedgerParam.PhotoDoc.Pic" :key="num+photo">
-          <div class="img-box" v-if="item.LedgerParam.PhotoDoc.Pic">
-            <p v-if="item.LedgerParam.PhotoDoc.Pic && photo.type !== 'video'">
-              {{photo.name}}<span>拍摄时间:{{photo.createTime | timeTransformation}}</span>
+          <div class="img-box" v-show="item.LedgerParam.PhotoDoc.Pic">
+            <p v-show="item.LedgerParam.PhotoDoc.Pic && photo.Type !== 'video'">
+              {{ photo.Name }}<span>拍摄时间:{{ photo.createTime | timeTransformation }}</span>
             </p>
             </p>
-            <div class="img-content" v-if="photo.type !=='video'">
-              <img :src="`/image-service/common/image_get?systemId=dataPlatform&key=${photo.key}`" alt="现场图片">
+            <div class="img-content" v-show="photo.Type !=='video'">
+              <img :src="`/image-service/common/image_get?systemId=dataPlatform&key=${photo.Key}`" alt="现场图片">
             </div>
             </div>
           </div>
           </div>
         </div>
         </div>
@@ -48,14 +55,12 @@
 </template>
 </template>
 
 
 <script>
 <script>
-import { mapGetters } from "vuex";
-import { toBeSupplementEquip } from "@/api/scan/request.js";
-import { LocationPointScene, FloorView } from "@saga-web/cad-engine/lib";
+import {mapGetters} from "vuex";
+import {toBeSupplementEquip} from "@/api/scan/request.js";
+import {LocationPointScene, FloorView} from "@saga-web/cad-engine/lib";
 
 
 export default {
 export default {
-  components: {
-
-  },
+  components: {},
   data() {
   data() {
     return {
     return {
       pageData: [],
       pageData: [],
@@ -89,8 +94,7 @@ export default {
       return str;
       return str;
     },
     },
     timeTransformation(time) {// 时间转换
     timeTransformation(time) {// 时间转换
-      time = time.substring(0, 16)
-      return time;
+      return time ? time.substring(0, 16) : '';
     }
     }
   },
   },
   mounted() {
   mounted() {
@@ -148,7 +152,6 @@ export default {
     },
     },
     getToBeSuppement() {
     getToBeSuppement() {
       let params = {
       let params = {
-        ProjectId: this.projectId,
         Cascade: [
         Cascade: [
           {
           {
             "Name": "equipFamily"
             "Name": "equipFamily"
@@ -207,7 +210,7 @@ export default {
       that.clearGraphy(this.i)
       that.clearGraphy(this.i)
       that.scene = new LocationPointScene();
       that.scene = new LocationPointScene();
       this.canvasLoading = true;
       this.canvasLoading = true;
-      that.scene.getFloorData('/modelapi/base-graph/query', { ModelId: can[this.i].dataset.modelid }).then(res => {
+      that.scene.getFloorData('/modelapi/base-graph/query', {ModelId: can[this.i].dataset.modelid}).then(res => {
         that.canvasLoading = false;
         that.canvasLoading = false;
         if (res == 'error') {
         if (res == 'error') {
           this.FloorMap = '';
           this.FloorMap = '';
@@ -230,7 +233,8 @@ export default {
         if (this.i !== this.pageData.length) {
         if (this.i !== this.pageData.length) {
           this.$nextTick(() => {
           this.$nextTick(() => {
             this.getGraphy();
             this.getGraphy();
-          })        }
+          })
+        }
       })
       })
     },
     },
     clearGraphy(i) {
     clearGraphy(i) {
@@ -250,50 +254,63 @@ export default {
     margin-right: 0;
     margin-right: 0;
   }
   }
 }
 }
+
 .box {
 .box {
   background: #f2f2f2;
   background: #f2f2f2;
   margin: 0 auto;
   margin: 0 auto;
   height: 100%;
   height: 100%;
   overflow-y: auto;
   overflow-y: auto;
+
   ul {
   ul {
     .infinite-list-item {
     .infinite-list-item {
       margin-bottom: 20px;
       margin-bottom: 20px;
     }
     }
   }
   }
+
   .content-box {
   .content-box {
     width: 1000px;
     width: 1000px;
     margin: 0 auto;
     margin: 0 auto;
     background: white;
     background: white;
     padding: 10px 4px 10px 20px;
     padding: 10px 4px 10px 20px;
     box-sizing: border-box;
     box-sizing: border-box;
+
     .content-top {
     .content-top {
       display: flex;
       display: flex;
+
       div {
       div {
         flex: 1;
         flex: 1;
       }
       }
+
       .details {
       .details {
         margin-right: 10px;
         margin-right: 10px;
+
         .el-badge {
         .el-badge {
           margin: 10px 0 0 10px;
           margin: 10px 0 0 10px;
         }
         }
+
         p {
         p {
           margin-top: 4px;
           margin-top: 4px;
+
           span:nth-child(1) {
           span:nth-child(1) {
             display: inline-block;
             display: inline-block;
             width: 200px;
             width: 200px;
           }
           }
         }
         }
+
         .copy {
         .copy {
           color: #409eff;
           color: #409eff;
           margin-left: 20px;
           margin-left: 20px;
         }
         }
       }
       }
+
       .plan {
       .plan {
         padding-left: 20px;
         padding-left: 20px;
         box-sizing: border-box;
         box-sizing: border-box;
+
         p {
         p {
           width: 100%;
           width: 100%;
           margin: 10px 0 10px 0;
           margin: 10px 0 10px 0;
+
           span {
           span {
             float: right;
             float: right;
             padding-right: 20px;
             padding-right: 20px;
@@ -302,36 +319,45 @@ export default {
         }
         }
       }
       }
     }
     }
+
     .content-bottom {
     .content-bottom {
       width: 100%;
       width: 100%;
       margin-top: 20px;
       margin-top: 20px;
       overflow: hidden;
       overflow: hidden;
+
       .photo,
       .photo,
       .explain {
       .explain {
         float: left;
         float: left;
         width: 50%;
         width: 50%;
       }
       }
+
       .photo {
       .photo {
         box-sizing: border-box;
         box-sizing: border-box;
         margin-bottom: 24px;
         margin-bottom: 24px;
+
         p {
         p {
           margin-bottom: 10px;
           margin-bottom: 10px;
         }
         }
+
         span {
         span {
           float: right;
           float: right;
           padding-right: 20px;
           padding-right: 20px;
           box-sizing: border-box;
           box-sizing: border-box;
         }
         }
       }
       }
+
       .explain {
       .explain {
         padding-right: 20px;
         padding-right: 20px;
         box-sizing: border-box;
         box-sizing: border-box;
+
         .el-scrollbar {
         .el-scrollbar {
           background: #f2f2f2;
           background: #f2f2f2;
         }
         }
+
         p {
         p {
           margin-bottom: 10px;
           margin-bottom: 10px;
         }
         }
+
         .explain-content {
         .explain-content {
           padding: 10px;
           padding: 10px;
           width: 100%;
           width: 100%;
@@ -342,17 +368,20 @@ export default {
     }
     }
   }
   }
 }
 }
+
 .img-box {
 .img-box {
   width: 100%;
   width: 100%;
+
   .img-content {
   .img-content {
     overflow: hidden;
     overflow: hidden;
     position: relative;
     position: relative;
-    width: calc(100%-20px);
+    width: calc(100% - 20px);
     height: 300px;
     height: 300px;
     vertical-align: middle;
     vertical-align: middle;
     text-align: center;
     text-align: center;
     background: #ebeef5;
     background: #ebeef5;
     margin-right: 20px;
     margin-right: 20px;
+
     img {
     img {
       position: absolute;
       position: absolute;
       left: 50%;
       left: 50%;
@@ -363,7 +392,8 @@ export default {
     }
     }
   }
   }
 }
 }
+
 canvas {
 canvas {
   position: static !important;
   position: static !important;
 }
 }
-</style>
+</style>