YaolongHan 3 年之前
父節點
當前提交
84f8443bd9

+ 1 - 1
src/views/maintain/relationship/components/tableHeader.ts

@@ -6,7 +6,7 @@ const tableHeader = {
     '设备所在供电空间': [['空间本地名称', "objectInfo-localName"], ['空间本地编码', "objectInfo-localId"], ['建筑', 'objectInfo-localName'], ['楼层', 'objectInfo-floorName'], ['BIM构件名称', 'bimTypeId'], ['系统分类', 'systemCategory'], ['设备类型名称', 'codeName'], ['设备本地编码', "localId"]],
     '空间所在建筑': [['建筑', 'localName'], ['空间本地名称', "objectInfo-localName"], ['空间本地编码', "objectInfo-localId"], ['楼层', 'objectInfo-floorName']],
     '空间所在楼层': [['建筑', 'buildingName'], ['楼层', 'localName'], ['空间本地名称', "objectInfo-localName"], ['空间本地编码', "objectInfo-localId"]],
-    '空间服务空间': [['空间本地名称', "buildingName"], ['空间本地编码', "localId"], ['建筑', 'buildingName'], ['楼层', 'floorName'], ['空间本地名称', "objectInfo-localName"], ['空间本地编码', "objectInfo-localId"], ['楼层', 'objectInfo-floorName']],
+    '空间服务空间': [['空间本地名称', "buildingName"], ['空间本地编码', "localId"], ['建筑', 'buildingName'], ['楼层', 'floorName'], ['空间本地名称', "objectInfo-localName"], ['空间本地编码', "objectInfo-localId"], ['楼层', 'objectInfo-floorName']] ,
     '系统下的设备': [['系统分类', 'systemCategory'], ['系统名称', ''], ['系统编码', ''], ['BIM构件名称', 'bimTypeId'], ['系统分类', 'systemCategory'], ['设备类型名称', 'codeName'], ['设备本地编码', "localId"]],
 }
 export default tableHeader

+ 31 - 4
src/views/maintain/relationship/relation/components/table.vue

@@ -20,11 +20,16 @@
       align="left"
     >
       <template slot-scope="scope">
-        {{ (item[1].includes('objectInfo') && scope.row.objectInfo ? scope.row.objectInfo[0][item[1].split('-')[1]] :scope.row[item[1]]) || '--' }}
+        {{
+          (item[1].includes("objectInfo") && scope.row.objectInfo
+            ? scope.row.objectInfo[0][item[1].split("-")[1]]
+            : scope.row[item[1]]) || "--"
+        }}
       </template>
     </el-table-column>
     <el-table-column label="操作" align="left">
       <template slot-scope="scope">
+        <!-- <span v-if="">更多</span> -->
         <el-button
           slot="reference"
           size="mini"
@@ -47,15 +52,13 @@ export default class extends Vue {
   @Prop({ default: Array }) tableData?: [];
   @Prop({ default: String || Number }) height?: "";
   @Prop({ default: Boolean }) loading?: false;
-
-  objectSpanMethod() {}
   //  删除
   deleteObject(index: number, val: any) {
     const data = {
       relType: this.$route.query.relationType,
       graphicType: this.$route.query.graphicType,
       fromId: val.id, //主对象id
-      toId: val.objectInfo.id, //对象id
+      toId: val.objectInfo.id, //对象id
     };
     relDel(data).then((res) => {
       if (res.result == "success") {
@@ -66,6 +69,30 @@ export default class extends Vue {
       }
     });
   }
+
+  objectSpanMethod({ row, column, rowIndex, columnIndex }: any) {
+    if (columnIndex === 0) {
+      if (row.rowspan && row.rowspan > 1) {
+        return {
+          rowspan: row.rowspan + 1,
+          colspan: 1,
+        };
+      } else {
+        return {
+          rowspan: 1,
+          colspan: 0,
+        };
+      }
+    }
+
+    if (rowIndex === 9) {
+      if (columnIndex === 4) {
+        return [1, 4];
+      } else if (columnIndex < 4 && columnIndex > 0) {
+        return [0, 0];
+      }
+    }
+  }
 }
 </script>
 

+ 355 - 307
src/views/maintain/relationship/relation/index.vue

@@ -1,83 +1,83 @@
 <template>
-    <div class="relation">
-        <div class="header">
-            <el-button class="el-icon-back" @click="goBack"></el-button>
-            <el-button type="primary" @click="addRelation">添加关系</el-button>
-            <el-button style="float: right" @click="updataExecl">上传Excel</el-button>
-        </div>
-        <el-row class="content">
-            <el-col :span="12" class="object">
-                <p>主对象</p>
-                <span v-if="relTypeStatus == 1 || relTypeStatus == 3">类型:</span>
-                <el-select
-                    :clearable="true"
-                    v-if="relTypeStatus == 1 || relTypeStatus == 3"
-                    v-model="categoryFrom"
-                    placeholder="请选择"
-                    @change="mainSelect"
-                    style="margin-right: 10px"
-                >
-                    <el-option
-                        v-for="item in mainOptions"
-                        :key="item.classCode"
-                        :label="item.className"
-                        :value="item.classCode"
-                    >
-                    </el-option>
-                </el-select>
-                <AdmSearch @SearchValue="mainSerch"/>
-            </el-col>
-            <el-col :span="12" class="object">
-                <p>从对象</p>
-                <span v-if="relTypeStatus == 2 || relTypeStatus == 3">类型:</span>
-                <el-select
-                    v-if="relTypeStatus == 2 || relTypeStatus == 3"
-                    v-model="categoryTo"
-                    :clearable="true"
-                    placeholder="请选择"
-                    style="margin-right: 10px"
-                >
-                    <el-option
-                        v-for="item in minorOptions"
-                        :key="item.classCode"
-                        :label="item.className"
-                        :value="item.classCode"
-                    >
-                    </el-option>
-                </el-select>
-                <AdmSearch @SearchValue="minorSearch"/>
-            </el-col>
-        </el-row>
-        <relationTable
-            v-if="tableHeight"
-            @updata="relManualQuery"
-            :tableHeader="tableHeader"
-            :tableData="tableData"
-            :height="tableHeight"
-            :loading="loading"
-        />
-        <!-- 分页 -->
-        <div class="pagination">
-            <el-pagination
-                @size-change="handleSizeChange"
-                @current-change="handleCurrentChange"
-                :current-page="page.currentPage"
-                :page-sizes="[10, 15, 20, 30]"
-                :page-size="page.pageSize"
-                layout="total, sizes, prev, pager, next, jumper"
-                :total="page.total"
-            >
-            </el-pagination>
-        </div>
-        <addRelationDialog
-            @closeAddRelation="addRelationValue = false"
-            @update="relManualQuery"
-            :addRelationValue="addRelationValue"
-            :values="values"
-        />
-        <excelDialog :values="values" ref="excelDialog"></excelDialog>
-        <editRelationDialog :values="values"></editRelationDialog>
+  <div class="relation">
+    <div class="header">
+      <el-button class="el-icon-back" @click="goBack"></el-button>
+      <el-button type="primary" @click="addRelation">添加关系</el-button>
+      <el-button style="float: right" @click="updataExecl">上传Excel</el-button>
     </div>
+    <el-row class="content">
+      <el-col :span="12" class="object">
+        <p>主对象</p>
+        <span v-if="relTypeStatus == 1 || relTypeStatus == 3">类型:</span>
+        <el-select
+          :clearable="true"
+          v-if="relTypeStatus == 1 || relTypeStatus == 3"
+          v-model="categoryFrom"
+          placeholder="请选择"
+          @change="mainSelect"
+          style="margin-right: 10px"
+        >
+          <el-option
+            v-for="item in mainOptions"
+            :key="item.classCode"
+            :label="item.className"
+            :value="item.classCode"
+          >
+          </el-option>
+        </el-select>
+        <AdmSearch @SearchValue="mainSerch" />
+      </el-col>
+      <el-col :span="12" class="object">
+        <p>从对象</p>
+        <span v-if="relTypeStatus == 2 || relTypeStatus == 3">类型:</span>
+        <el-select
+          v-if="relTypeStatus == 2 || relTypeStatus == 3"
+          v-model="categoryTo"
+          :clearable="true"
+          placeholder="请选择"
+          style="margin-right: 10px"
+        >
+          <el-option
+            v-for="item in minorOptions"
+            :key="item.classCode"
+            :label="item.className"
+            :value="item.classCode"
+          >
+          </el-option>
+        </el-select>
+        <AdmSearch @SearchValue="minorSearch" />
+      </el-col>
+    </el-row>
+    <relationTable
+      v-if="tableHeight"
+      @updata="relManualQuery"
+      :tableHeader="tableHeader"
+      :tableData="tableData"
+      :height="tableHeight"
+      :loading="loading"
+    />
+    <!-- 分页 -->
+    <div class="pagination">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="page.currentPage"
+        :page-sizes="[10, 15, 20, 30]"
+        :page-size="page.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="page.total"
+      >
+      </el-pagination>
+    </div>
+    <addRelationDialog
+      @closeAddRelation="addRelationValue = false"
+      @update="relManualQuery"
+      :addRelationValue="addRelationValue"
+      :values="values"
+    />
+    <excelDialog :values="values" ref="excelDialog"></excelDialog>
+    <editRelationDialog :values="values"></editRelationDialog>
+  </div>
 </template>
 
 <script lang="ts">
@@ -89,269 +89,317 @@ import addRelationDialog from "./components/addRelationDialog.vue";
 import editRelationDialog from "./components/editRelationDialog.vue";
 import excelDialog from "./components/excelDialog.vue";
 import { relToType, relManualQuery, relDel } from "@/api/datacenter";
+import { ElSelect } from "element-ui/types/select";
 
 @Component({
-    name: "relation",
-    components: {
-        AdmSearch,
-        relationTable,
-        addRelationDialog,
-        excelDialog,
-        editRelationDialog,
-    },
+  name: "relation",
+  components: {
+    AdmSearch,
+    relationTable,
+    addRelationDialog,
+    excelDialog,
+    editRelationDialog,
+  },
 })
 export default class extends Vue {
-    categoryFrom = ""; //主关系
-    mainOptions = []; //主关系选项
-    categoryTo = ""; //次关系
-    minorOptions = []; //次关系选项
-    vagueFrom = ""; //主关系模糊收索
-    vagueTo = ""; //次关系模糊收索
-    //表头数据
-    tableHeader = [];
-    //表格数据
-    tableData = [];
-    // 是否添加关系
-    addRelationValue: Boolean = false;
-    // 传入tip需要得字段
-    values: object = {
-        relation_maintenance: "关系维护",
-        optionTips: `请下载最新最新<${ this.$route.query.relationTypeName }>数据进行手动维护`, //请下载最新最新 xxxx 数据进行手动维护
-        currentNum: "当前关系数量:",
-        download: "下载模板(含数据)",
-        lastTime: `最后更新时间为:${ this.$route.query.lastUpdate || "" }`, //最后更新时间为
-        uploadTxt: "将Excel文件拖到此处,或<em>单击上传Excel文件<em>",
-        uploadTips: "上传的Excel数据将完全覆盖当前关系表(关系表先前数据不会保留)",
-        downloadFile: " 下载报告文件",
-        back: "返回",
-        done: "完成",
-        addShip: "添加关系",
-        editShip: "编辑关系",
-        codeTip: "请填写主被控设备对象识别编码",
-        deviceTip: "请填写主被控设备对象设备号",
-        codeTitle: "识别编码对应:",
-        mainObject: "主对象:",
-        affiliatedObject: "从对象:",
-        pleaseEnter: "请输入",
-        pleaseEnterCode: "请输入识别编码",
-        add: "添加",
-        cancel: "取消",
-        delete: "删除关系",
-    };
-    relTypeStatus: any = 0; //关系相关类型主从 0 None 1主 2从 3主从
+  categoryFrom = ""; //主关系
+  mainOptions = []; //主关系选项
+  categoryTo = ""; //次关系
+  minorOptions = []; //次关系选项
+  vagueFrom = ""; //主关系模糊收索
+  vagueTo = ""; //次关系模糊收索
+  //表头数据
+  tableHeader = [];
+  //表格数据
+  tableData = [];
+  // 是否添加关系
+  addRelationValue: Boolean = false;
+  // 传入tip需要得字段
+  values: object = {
+    relation_maintenance: "关系维护",
+    optionTips: `请下载最新最新<${this.$route.query.relationTypeName}>数据进行手动维护`, //请下载最新最新 xxxx 数据进行手动维护
+    currentNum: "当前关系数量:",
+    download: "下载模板(含数据)",
+    lastTime: `最后更新时间为:${this.$route.query.lastUpdate || ""}`, //最后更新时间为
+    uploadTxt: "将Excel文件拖到此处,或<em>单击上传Excel文件<em>",
+    uploadTips: "上传的Excel数据将完全覆盖当前关系表(关系表先前数据不会保留)",
+    downloadFile: " 下载报告文件",
+    back: "返回",
+    done: "完成",
+    addShip: "添加关系",
+    editShip: "编辑关系",
+    codeTip: "请填写主被控设备对象识别编码",
+    deviceTip: "请填写主被控设备对象设备号",
+    codeTitle: "识别编码对应:",
+    mainObject: "主对象:",
+    affiliatedObject: "从对象:",
+    pleaseEnter: "请输入",
+    pleaseEnterCode: "请输入识别编码",
+    add: "添加",
+    cancel: "取消",
+    delete: "删除关系",
+  };
+  relTypeStatus: any = 0; //关系相关类型主从 0 None 1主 2从 3主从
 
-    page: object = {
-        total: 0, //总数
-        currentPage: 1, //当前页
-        pageSize: 15, //当前页数量
-    };
-    tableHeight: number = 0; //table高
-    loading: Boolean = false; //是否显示loadding
-    /////////////////////////////////////////
-    // 方法
+  page: object = {
+    total: 0, //总数
+    currentPage: 1, //当前页
+    pageSize: 15, //当前页数量
+  };
+  tableHeight: number = 0; //table高
+  loading: Boolean = false; //是否显示loadding
+  /////////////////////////////////////////
+  // 方法
 
-    /**
-     * 返回页面上一级
-     */
-    goBack() {
-        this.$router.go(-1);
-    }
+  /**
+   * 返回页面上一级
+   */
+  goBack() {
+    this.$router.go(-1);
+  }
 
-    /**
-     * 上传 execl
-     */
-    updataExecl() {
-        this.$refs.excelDialog.dialogExport = true;
-    }
+  /**
+   * 上传 execl
+   */
+  updataExecl() {
+    this.$refs.excelDialog.dialogExport = true;
+  }
 
-    /**
-     * 分页数量切换
-     */
+  /**
+   * 分页数量切换
+   */
 
-    handleSizeChange(val: any) {
-        Object.assign(this.page, {
-            pageSize: val,
-        });
-        this.relManualQuery();
-    }
+  handleSizeChange(val: any) {
+    Object.assign(this.page, {
+      pageSize: val,
+    });
+    this.relManualQuery();
+  }
 
-    /**
-     * 分页切换
-     */
-    handleCurrentChange(val: any) {
-        Object.assign(this.page, {
-            currentPage: val,
-        });
-        this.relManualQuery();
-    }
+  /**
+   * 分页切换
+   */
+  handleCurrentChange(val: any) {
+    Object.assign(this.page, {
+      currentPage: val,
+    });
+    this.relManualQuery();
+  }
 
-    /**
-     * 主关系下拉框选择
-     */
-    mainSelect(val: any) {
-        this.categoryFrom = val;
-        this.relManualQuery();
-        console.log("mainSelect", val);
-    }
+  /**
+   * 主关系下拉框选择
+   */
+  mainSelect(val: any) {
+    this.categoryFrom = val;
+    this.relManualQuery();
+    console.log("mainSelect", val);
+  }
 
-    /**
-     * 从关系下拉框选择
-     */
-    minorSelect(val: any) {
-        this.categoryTo = val;
-        this.relManualQuery();
-    }
+  /**
+   * 从关系下拉框选择
+   */
+  minorSelect(val: any) {
+    this.categoryTo = val;
+    this.relManualQuery();
+  }
 
-    // 主关系模糊搜索
-    mainSerch(val: string) {
-        this.vagueFrom = val;
-        this.relManualQuery();
-    }
+  // 主关系模糊搜索
+  mainSerch(val: string) {
+    this.vagueFrom = val;
+    this.relManualQuery();
+  }
+
+  // 从关系模糊搜索
+  minorSearch(val: string) {
+    this.vagueTo = val;
+    this.relManualQuery();
+  }
 
-    // 从关系模糊搜索
-    minorSearch(val: string) {
-        this.vagueTo = val;
-        this.relManualQuery();
+  /**
+   * 添加关系
+   */
+  addRelation() {
+    this.addRelationValue = true;
+  }
+
+  /**
+   * 获取主对象从对象关系
+   */
+  relToType() {
+    const urlData = this.$route.query;
+    if (this.relTypeStatus == 0) {
+      this.mainObject = ""; //主关系
+      this.mainOptions = []; //主关系选项
+      this.minorObject = ""; //次关系
+      this.minorOptions = []; //次关系选项
+      return;
+    }
+    // 获取主关系接口
+    if (this.relTypeStatus == 1 || this.relTypeStatus == 3) {
+      const data = {
+        zoneType: urlData.zoneType ? urlData.zoneType : "",
+        graphCode: urlData.graphicType,
+        type: urlData.relationType,
+        relType: urlData.relationType,
+        status: 1, // 1 为主关系;2 为从关系
+      };
+      relToType(data).then((res) => {
+        this.mainObject = ""; //主关系
+        this.mainOptions = this.dataReduce(res.content);
+      });
     }
 
-    /**
-     * 添加关系
-     */
-    addRelation() {
-        this.addRelationValue = true;
+    // 获取从关系接口
+    if (this.relTypeStatus == 2 || this.relTypeStatus == 3) {
+      const data = {
+        zoneType: urlData.zoneType ? urlData.zoneType : "",
+        graphCode: urlData.graphicType,
+        type: urlData.relationType,
+        relType: urlData.relationType,
+        status: 2, // 1 为主关系;2 为从关系
+      };
+      relToType(data).then((res) => {
+        this.minorObject = ""; //次关系
+        this.minorOptions = this.dataReduce(res.content); //次关系选项
+      });
     }
+  }
 
-    /**
-     * 获取主对象从对象关系
-     */
-    relToType() {
-        const urlData = this.$route.query;
-        if (this.relTypeStatus == 0) {
-            this.mainObject = ""; //主关系
-            this.mainOptions = []; //主关系选项
-            this.minorObject = ""; //次关系
-            this.minorOptions = []; //次关系选项
-            return;
-        }
-        // 获取主关系接口
-        if (this.relTypeStatus == 1 || this.relTypeStatus == 3) {
-            const data = {
-                zoneType: urlData.zoneType ? urlData.zoneType : "",
-                graphCode: urlData.graphicType,
-                type: urlData.relationType,
-                relType: urlData.relationType,
-                status: 1, // 1 为主关系;2 为从关系
-            };
-            relToType(data).then((res) => {
-                this.mainObject = ""; //主关系
-                this.mainOptions = this.dataReduce(res.content);
-            });
-        }
+  //下拉框数据去重
+  dataReduce(arr: []): [] {
+    let obj = {},
+      setArr = [];
+    setArr = arr.reduce((item, next) => {
+      obj[next.classCode]
+        ? ""
+        : (obj[next.classCode] = true && item.push(next));
+      return item;
+    }, []);
+    return setArr;
+  }
 
-        // 获取从关系接口
-        if (this.relTypeStatus == 2 || this.relTypeStatus == 3) {
-            const data = {
-                zoneType: urlData.zoneType ? urlData.zoneType : "",
-                graphCode: urlData.graphicType,
-                type: urlData.relationType,
-                relType: urlData.relationType,
-                status: 2, // 1 为主关系;2 为从关系
-            };
-            relToType(data).then((res) => {
-                this.minorObject = ""; //次关系
-                this.minorOptions = this.dataReduce(res.content); //次关系选项
-            });
-        }
-    }
+  /**
+   * 获取table列表
+   */
+  relManualQuery() {
+    this.loading = true;
+    // 获取table数据
+    const data = {
+      projectId: this.$route.query.projectId,
+      categoryFrom: this.categoryFrom,
+      categoryTo: this.categoryTo,
+      vagueTo: this.vagueTo, //主关系
+      vagueFrom: this.vagueFrom, //从关系
+      objectType: 1,
+      relType: this.$route.query.relationType,
+      pageSize: this.page.pageSize,
+      pageNumber: this.page.currentPage,
+      graphicType: this.$route.query.graphicType,
+      zoneType: this.$route.query.zoneType ? this.$route.query.zoneType : "",
+    };
+    relManualQuery(data)
+      .then((res) => {
+        this.eachResData(res.content);
+        // this.tableData = res.content;
+        this.page.total = res.total;
+        this.loading = false;
+      })
+      .catch((error) => {
+        this.loading = false;
+      });
+  }
 
-    //下拉框数据去重
-    dataReduce(arr: []): [] {
-        let obj = {}, setArr = []
-        setArr = arr.reduce((item, next) => {
-            obj[next.classCode] ? '' : obj[next.classCode] = true && item.push(next)
-            return item
-        }, []);
-        return setArr
-    }
+  /**
+   * 重新拼装数组
+   */
+  eachResData(list: []) {
 
-    /**
-     * 获取table列表
-     */
-    relManualQuery() {
-        this.loading = true;
-        // 获取table数据
-        const data = {
-            projectId: this.$route.query.projectId,
-            categoryFrom: this.categoryFrom,
-            categoryTo: this.categoryTo,
-            vagueTo: this.vagueTo, //主关系
-            vagueFrom: this.vagueFrom, //从关系
-            objectType: 1,
-            relType: this.$route.query.relationType,
-            pageSize: this.page.pageSize,
-            pageNumber: this.page.currentPage,
-            graphicType: this.$route.query.graphicType,
-            zoneType: this.$route.query.zoneType ? this.$route.query.zoneType : "",
-        };
-        relManualQuery(data)
-            .then((res) => {
-                this.tableData = res.content;
-                this.page.total = res.total;
-                this.loading = false;
-            })
-            .catch((error) => {
-                this.loading = false;
+    if (list.length) {
+      let newList: any[] = [];
+      list.forEach((item: any) => {
+        //  从对象为多个则新曾对象
+        if (item.objectInfo && item.objectInfo.length >= 2) {
+          // 只展示最多展示9个合并
+          let objList:any = [];
+          // 取9个
+          if(item.objectInfo.length>=9){
+             objList = [...item.objectInfo.slice(0,10)]
+          }
+          const objInfo = JSON.parse(JSON.stringify(objList));
+          objInfo.forEach((objItem: any, index: number) => {
+            const newItem = JSON.parse(JSON.stringify(item));
+            Object.assign(newItem, {
+              objectInfo: [objItem],
+              rowspan: index == 0 ? item.objectInfo.length : 1,
             });
-    }
+            newList.push(newItem);
+          });
+          // 如果从关系大于10个则需要添加打开弹窗按钮
+          if(item.objectInfo.length>9){
+               newList.push()
+          }
 
-    created() {
-        let relationTypeName = this.$route.query.relationTypeName;
-        this.tableHeader = tableHeader[relationTypeName];
-        this.relTypeStatus = this.$route.query.relTypeStatus;
-        // 获取主从对象下拉框数据
-        this.relToType();
-        // 获取table列表
-        this.relManualQuery();
+        } else {
+          Object.assign(item, {
+            rowspan: 1,
+          });
+          newList.push(item);
+        }
+      });
+      this.tableData = newList;
+    } else {
+      this.tableData = [];
     }
+  }
 
-    mounted() {
-        //计算table的高度
-        let allHeight =
-            document.getElementsByClassName("relation")[0].offsetHeight - 57; //57是Head的高
-        let contentHeight = document.getElementsByClassName("content")[0]
-            .offsetHeight;
-        this.tableHeight = allHeight - contentHeight - 47;
-    }
+  created() {
+    let relationTypeName = this.$route.query.relationTypeName;
+    this.tableHeader = tableHeader[relationTypeName];
+    this.relTypeStatus = this.$route.query.relTypeStatus;
+    // 获取主从对象下拉框数据
+    this.relToType();
+    // 获取table列表
+    this.relManualQuery();
+  }
+
+  mounted() {
+    //计算table的高度
+    let allHeight =
+      document.getElementsByClassName("relation")[0].offsetHeight - 57; //57是Head的高
+    let contentHeight = document.getElementsByClassName("content")[0]
+      .offsetHeight;
+    this.tableHeight = allHeight - contentHeight - 47;
+  }
 }
 </script>
 
 <style scoped lang="scss">
 .relation {
-    background: #ffffff;
-    height: 100%;
+  background: #ffffff;
+  height: 100%;
 
-    .header {
-        padding: 12px;
-        overflow: hidden;
-        border-bottom: 1px solid #e1e7ea;
-    }
+  .header {
+    padding: 12px;
+    overflow: hidden;
+    border-bottom: 1px solid #e1e7ea;
+  }
 
-    .content {
-        padding: 12px;
+  .content {
+    padding: 12px;
 
-        .object {
-            p {
-                border-left: 7px solid #555555;
-                text-indent: 10px;
-                margin-bottom: 10px;
-            }
-        }
+    .object {
+      p {
+        border-left: 7px solid #555555;
+        text-indent: 10px;
+        margin-bottom: 10px;
+      }
     }
+  }
 
-    .pagination {
-        margin-top: 12px;
-        margin-right: 24px;
-        float: right;
-    }
+  .pagination {
+    margin-top: 12px;
+    margin-right: 24px;
+    float: right;
+  }
 }
 </style>