From f2508c58235a398875d088db183897b8634f2b97 Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Mon, 14 Mar 2022 12:07:48 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E4=BC=81=E4=B8=9A=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 project/oms/apps/AppCompany/AppCompany.vue    |  35 ++
 .../oms/apps/AppCompany/components/List.vue   |  39 +-
 .../apps/AppCompany/components/Statistics.vue | 550 +++++++++---------
 3 files changed, 337 insertions(+), 287 deletions(-)
 create mode 100644 project/oms/apps/AppCompany/AppCompany.vue

diff --git a/project/oms/apps/AppCompany/AppCompany.vue b/project/oms/apps/AppCompany/AppCompany.vue
new file mode 100644
index 00000000..7606c893
--- /dev/null
+++ b/project/oms/apps/AppCompany/AppCompany.vue
@@ -0,0 +1,35 @@
+<template>
+  <section class="AppCompany">
+    <component :is="currentComponent" :instance="instance" :dict="dict" :permissions="permissions"/>
+  </section>
+</template>
+
+<script>
+
+import List from "./components/List";
+import Sta from "./components/Statistics";
+
+export default {
+  name: "AppCompany",
+  label: "企业管理",
+  components: {List, Sta},
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function
+  },
+  computed: {
+    currentComponent() {
+      return this.$route.hash == "#sta" ? Sta : List
+    }
+  },
+  created() {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AppCompany {
+  height: 100%;
+}
+</style>
diff --git a/project/oms/apps/AppCompany/components/List.vue b/project/oms/apps/AppCompany/components/List.vue
index 37999c0e..d4bd515d 100644
--- a/project/oms/apps/AppCompany/components/List.vue
+++ b/project/oms/apps/AppCompany/components/List.vue
@@ -7,10 +7,10 @@
           <template #left>
             <el-select v-model="search.saasId" size="small" placeholder="请选择saas平台" @change="getDataInit">
               <el-option
-                v-for="item in saasList"
-                :key="item.value"
-                :label="item.name"
-                :value="item.id">
+                  v-for="item in saasList"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.id">
               </el-option>
             </el-select>
           </template>
@@ -38,7 +38,7 @@
         </ai-table>
       </template>
     </ai-list>
-    <ai-dialog :title="dialogTitle" :visible.sync="dialog" width="600px"  @onConfirm="saveSaas">
+    <ai-dialog :title="dialogTitle" :visible.sync="dialog" width="600px" @onConfirm="saveSaas">
       <el-form ref="saasForm" :model="dialogForm" :rules="rules" size="small" label-width="120px">
         <el-form-item required label="名称" prop="name">
           <el-input v-model.trim="dialogForm.name" placeholder="请输入saas企业名称" clearable :maxLength="50"/>
@@ -46,27 +46,28 @@
         <el-form-item required label="saas平台" prop="saasId">
           <el-select v-model="dialogForm.saasId" placeholder="请选择saas平台" style="width:100%;">
             <el-option
-              v-for="item in saasList"
-              :key="item.value"
-              :label="item.name"
-              :value="item.id">
+                v-for="item in saasList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.id">
             </el-option>
           </el-select>
         </el-form-item>
         <el-form-item required label="地区" prop="areaId" :rules="[{required: true, message: '请选择发布地区'}]">
-          <ai-area-get :instance="instance" v-model="dialogForm.areaId" :name.sync="dialogForm.areaName" />
+          <ai-area-get :instance="instance" v-model="dialogForm.areaId" :name.sync="dialogForm.areaName"/>
         </el-form-item>
         <el-form-item required label="企业CORP_ID" prop="corpId" :rules="[{required: true, message: '请输入企业CORP_ID'}]">
-          <el-input v-model.trim="dialogForm.corpId" placeholder="请输入企业CORP_ID" clearable  :maxLength="50"/>
+          <el-input v-model.trim="dialogForm.corpId" placeholder="请输入企业CORP_ID" clearable :maxLength="50"/>
         </el-form-item>
         <el-form-item label="AGENT_ID" prop="corpAgentId">
-          <el-input v-model.trim="dialogForm.corpAgentId" placeholder="请输入企业AGENT_ID" clearable  :maxLength="50"/>
+          <el-input v-model.trim="dialogForm.corpAgentId" placeholder="请输入企业AGENT_ID" clearable :maxLength="50"/>
         </el-form-item>
         <el-form-item label="CORP_SECRET" prop="corpSecret">
-          <el-input v-model.trim="dialogForm.corpSecret" placeholder="请输入企业CORP_SECRET" clearable  :maxLength="50"/>
+          <el-input v-model.trim="dialogForm.corpSecret" placeholder="请输入企业CORP_SECRET" clearable :maxLength="50"/>
         </el-form-item>
         <el-form-item label="企业通讯录SECRET" prop="corpAddressBookSecret">
-          <el-input v-model.trim="dialogForm.corpAddressBookSecret" placeholder="请输入企业通讯录SECRET" clearable  :maxLength="50"/>
+          <el-input v-model.trim="dialogForm.corpAddressBookSecret" placeholder="请输入企业通讯录SECRET" clearable
+                    :maxLength="50"/>
         </el-form-item>
         <el-form-item label="访问地址" prop="accessUrl" :rules="[{required: true, message: '请输入访问地址'}]">
           <el-input v-model.trim="dialogForm.accessUrl" placeholder="请输入访问地址" clearable
@@ -156,7 +157,7 @@ export default {
       this.$refs.saasForm.validate(v => {
         if (v) {
           this.saasList.map(item => {
-            if(item.id == this.dialogForm.saasId) {
+            if (item.id == this.dialogForm.saasId) {
               this.dialogForm.saasName = item.name
             }
           })
@@ -190,7 +191,7 @@ export default {
     },
     handleSync(corpId) {
       this.$confirm("是否确定同步该企业数据?").then(() => {
-        this.instance.post("/appCorpStat/syncData?corpId="+corpId, null, {}).then(res => {
+        this.instance.post("/appCorpStat/syncData?corpId=" + corpId, null, {}).then(res => {
           if (res?.code == 0) {
             this.getTableData();
             this.$message.success("同步成功!");
@@ -202,10 +203,8 @@ export default {
       window.open(accessUrl, "_blank");
     },
     toStatistics(item) {
-      this.$emit('change', {
-        type: 'Statistics',
-        params: item
-      })
+      let {corpId} = item
+      this.$router.push({query: {corpId}, hash: "#sta"})
     },
   },
   created() {
diff --git a/project/oms/apps/AppCompany/components/Statistics.vue b/project/oms/apps/AppCompany/components/Statistics.vue
index 9fc3b3e9..b10e11d0 100644
--- a/project/oms/apps/AppCompany/components/Statistics.vue
+++ b/project/oms/apps/AppCompany/components/Statistics.vue
@@ -10,23 +10,23 @@
           <el-row :gutter="20">
             <el-col :span="5">
               <div class="title">群总数</div>
-              <div class="num">{{info.groupCount}}</div>
+              <div class="num">{{ info.groupCount }}</div>
             </el-col>
             <el-col :span="5">
               <div class="title">成员总数</div>
-              <div class="num">{{info.userCount}}</div>
+              <div class="num">{{ info.userCount }}</div>
             </el-col>
             <el-col :span="5">
               <div class="title">成员活跃总数</div>
-              <div class="num">{{info.activeCount}}</div>
+              <div class="num">{{ info.activeCount }}</div>
             </el-col>
             <el-col :span="5">
               <div class="title">居民总人数</div>
-              <div class="num">{{info.residentCount}}</div>
+              <div class="num">{{ info.residentCount }}</div>
             </el-col>
             <el-col :span="4">
               <div class="title">群成员总数</div>
-              <div class="num">{{info.groupuserCount}}</div>
+              <div class="num">{{ info.groupuserCount }}</div>
             </el-col>
           </el-row>
         </template>
@@ -34,7 +34,9 @@
       <ai-card title="统计信息" class="chart-content">
         <template #title>
           <div class="tabs">
-            <div class="item" v-for="(item, index) in tabs" :key="index" :class="index == activeIndex ? 'active' : ''" @click="tabClick(index)">{{item}}</div>
+            <div class="item" v-for="(item, index) in tabs" :key="index" :class="index == activeIndex ? 'active' : ''"
+                 @click="tabClick(index)">{{ item }}
+            </div>
           </div>
         </template>
         <template #content>
@@ -43,30 +45,31 @@
             <ai-search-bar>
               <template slot="right">
                 <el-input
-                  v-model="innerMemberId"
-                  size="small"
-                  placeholder="输入群成员ID"
-                  @keyup.enter.native="(page.current = 1), getTableData()"
-                  clearable
-                  prefix-icon="iconfont iconSearch"
+                    v-model="innerMemberId"
+                    size="small"
+                    placeholder="输入群成员ID"
+                    @keyup.enter.native="(page.current = 1), getTableData()"
+                    clearable
+                    prefix-icon="iconfont iconSearch"
                 />
                 <el-button
-                  type="primary"
-                  icon="iconfont iconSearch"
-                  size="small"
-                  @click="(page.current = 1), getTableData()"
-                  >查询
+                    type="primary"
+                    icon="iconfont iconSearch"
+                    size="small"
+                    @click="(page.current = 1), getTableData()"
+                >查询
                 </el-button>
                 <el-button
-                  icon="el-icon-refresh-right"
-                  size="small"
-                  @click="resetSearch"
-                  >重置</el-button
+                    icon="el-icon-refresh-right"
+                    size="small"
+                    @click="resetSearch"
+                >重置
+                </el-button
                 >
               </template>
             </ai-search-bar>
             <ai-table :tableData="gropList" :total="page.total" :current.sync="page.current" :size.sync="page.size"
-              @getList="getTableData" :col-configs="colConfigs" :dict="dict">
+                      @getList="getTableData" :col-configs="colConfigs" :dict="dict">
               <!-- <el-table-column slot="options" align="center" label="操作" fixed="right" width="240px">
                 <div class="table-options" slot-scope="{ row }">
                   <el-button type="text">打开</el-button>
@@ -75,8 +78,9 @@
             </ai-table>
           </div>
           <div class="table" v-else-if="activeIndex == 3">
-            <ai-table :tableData="userList" :total="userPage.total" :current.sync="userPage.current" :size.sync="userPage.size"
-              @getList="getUserTableData" :col-configs="userColConfigs" :dict="dict">
+            <ai-table :tableData="userList" :total="userPage.total" :current.sync="userPage.current"
+                      :size.sync="userPage.size"
+                      @getList="getUserTableData" :col-configs="userColConfigs" :dict="dict">
               <!-- <el-table-column slot="options" align="center" label="操作" fixed="right" width="240px">
                 <div class="table-options" slot-scope="{ row }">
                   <el-button type="text">打开</el-button>
@@ -91,274 +95,286 @@
 </template>
 
 <script>
-  import * as echarts from 'echarts'
-  export default {
-    name: 'Statistics',
+import * as echarts from 'echarts'
 
-    props: {
-      instance: Function,
-      dict: Object,
-      permissions: Function,
-      params: Object
-    },
+export default {
+  name: 'Statistics',
 
-    data () {
-      return {
-        info: {},
-        activeIndex: 0,
-        tabs: ['概览', '群统计',  '群列表', '成员与好友统计'],
-        listData: [],
-        pieData: [],
-        myChart: null,
-        gropList: [],
-        page: {current: 1, size: 10, total: 0},
-        innerMemberId: '',
-        userList: [],
-        userPage: {current: 1, size: 10, total: 0}
-      }
-    },
-    computed: { 
-      colConfigs() {
-        return [
-          {label: "群名", prop: "name", width:200},
-          {label: "创建时间", prop: "createTime", align: 'center', width:150},
-          {label: "群成员数", prop: "memberCount", align: 'center', width:100},
-          {label: "群主ID", prop: "owner", align: 'center', width:150},
-          {label: "群公告", prop: "notice"},
-        ]
-      },
-      userColConfigs() {
-        return [
-          {label: "部门", prop: "departmentName"},
-          {label: "姓名", prop: "name", align: 'center'},
-          {label: "添加好友人数", prop: "residentCount", align: 'center'}
-        ]
-      }
-    },
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function,
+  },
 
-    mounted() {
-      this.getInfo()
-      this.getTableData()
-      this.getUserTableData()
+  data() {
+    return {
+      info: {},
+      activeIndex: 0,
+      tabs: ['概览', '群统计', '群列表', '成员与好友统计'],
+      listData: [],
+      pieData: [],
+      myChart: null,
+      gropList: [],
+      page: {current: 1, size: 10, total: 0},
+      innerMemberId: '',
+      userList: [],
+      userPage: {current: 1, size: 10, total: 0}
+    }
+  },
+  computed: {
+    colConfigs() {
+      return [
+        {label: "群名", prop: "name", width: 200},
+        {label: "创建时间", prop: "createTime", align: 'center', width: 150},
+        {label: "群成员数", prop: "memberCount", align: 'center', width: 100},
+        {label: "群主ID", prop: "owner", align: 'center', width: 150},
+        {label: "群公告", prop: "notice"},
+      ]
     },
+    userColConfigs() {
+      return [
+        {label: "部门", prop: "departmentName"},
+        {label: "姓名", prop: "name", align: 'center'},
+        {label: "添加好友人数", prop: "residentCount", align: 'center'}
+      ]
+    },
+    params() {
+      return this.$route.query || {}
+    }
+  },
 
-    methods: {
-      chartInit() {
-        var option = {}
-        if(this.activeIndex != 1) {
-          option = {
-            tooltip: {
-              trigger: 'axis'
+  created() {
+    this.getTableData()
+    this.getUserTableData()
+  },
+  mounted() {
+    this.getInfo()
+  },
+
+  methods: {
+    chartInit() {
+      var option = {}
+      if (this.activeIndex != 1) {
+        option = {
+          tooltip: {
+            trigger: 'axis'
+          },
+          legend: {
+            data: ['群总数', '成员总数', '成员活跃总数', '居民总人数', '群成员总数']
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            data: this.listData[5],
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series: [
+            {
+              name: '群总数',
+              type: 'line',
+              data: this.listData[0]
             },
-            legend: {
-              data: ['群总数', '成员总数', '成员活跃总数', '居民总人数', '群成员总数']
+            {
+              name: '成员总数',
+              type: 'line',
+              data: this.listData[1]
             },
-            grid: {
-              left: '3%',
-              right: '4%',
-              bottom: '3%',
-              containLabel: true
+            {
+              name: '成员活跃总数',
+              type: 'line',
+              data: this.listData[2]
             },
-            xAxis: {
-              type: 'category',
-              data: this.listData[5],
+            {
+              name: '居民总人数',
+              type: 'line',
+              data: this.listData[3]
             },
-            yAxis: {
-              type: 'value'
+            {
+              name: '群成员总数',
+              type: 'line',
+              data: this.listData[4]
             },
-            series: [
-              {
-                name: '群总数',
-                type: 'line',
-                data: this.listData[0]
-              },
-              {
-                name: '成员总数',
-                type: 'line',
-                data: this.listData[1]
-              },
-              {
-                name: '成员活跃总数',
-                type: 'line',
-                data: this.listData[2]
-              },
-              {
-                name: '居民总人数',
-                type: 'line',
-                data: this.listData[3]
-              },
-              {
-                name: '群成员总数',
-                type: 'line',
-                data: this.listData[4]
-              },
-            ]
-          };
-        }else {
-          option = {
-            tooltip: {
-              trigger: 'item'
-            },
-            legend: {
-              orient: 'vertical',
-              left: 'left'
-            },
-            series: [
-              {
-                type: 'pie',
-                radius: '50%',
-                data: this.pieData,
-                emphasis: {
-                  itemStyle: {
-                    shadowBlur: 10,
-                    shadowOffsetX: 0,
-                    shadowColor: 'rgba(0, 0, 0, 0.5)'
-                  }
+          ]
+        };
+      } else {
+        option = {
+          tooltip: {
+            trigger: 'item'
+          },
+          legend: {
+            orient: 'vertical',
+            left: 'left'
+          },
+          series: [
+            {
+              type: 'pie',
+              radius: '50%',
+              data: this.pieData,
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                 }
               }
-            ]
-          };
+            }
+          ]
+        };
+      }
+      this.myChart.setOption(option);
+    },
+    getInfo() {
+      this.myChart = echarts.init(document.getElementById("echart"));
+      this.instance.post(`/appCorpStat/getLatestInfo?corpId=${this.params.corpId}`).then(res => {
+        if (res.code === 0) {
+          this.info = res.data
+          this.getCharInfo()
         }
-        this.myChart.setOption(option);
-      },
-      getInfo() {
-        this.myChart = echarts.init(document.getElementById("echart"));
-        this.instance.post(`/appCorpStat/getLatestInfo?corpId=${this.params.corpId}`).then(res => {
-          if (res.code === 0) {
-            this.info = res.data
-            this.getCharInfo()
-          }
-        })
-      },
-      getCharInfo() {
-        this.instance.post(`/appCorpStat/getLatestThreeMonthStat?corpId=${this.params.corpId}`).then(res => {
-          if (res.code === 0) {
-            if(res.data && res.data.length) {
-              this.listData = []
-              this.listData[0] =  res.data.map(v => v.groupCount)
-              this.listData[1] =  res.data.map(v => v.userCount)
-              this.listData[2] =  res.data.map(v => v.activeCount)
-              this.listData[3] =  res.data.map(v => v.residentCount)
-              this.listData[4] =  res.data.map(v => v.groupuserCount)
-              this.listData[5] = res.data.map(v => v.statDate)
-              this.chartInit()
-            }
-          }
-        })
-
-        this.instance.post(`/wxcp/wxgroup/groupStatistic?corpId=${this.params.corpId}`).then(res => {
-          if (res.code === 0) {
-            if(res.data) {
-              this.pieData = []
-              Object.getOwnPropertyNames(res.data).forEach((key) => {
-                var e = {
-                  value: res.data[key],
-                  name: key
-                }
-                this.pieData.push(e)
-              });
-            }
-          }
-        })
-      },
-
-      resetSearch() {
-        this.innerMemberId = ''
-        this.page.current = 1
-        this.getTableData()
-      },
-      getTableData() {
-        this.instance.post(`/wxcp/wxgroup/list?corpId=${this.params.corpId}&current=${this.page.current}&size=${this.page.size}&innerMemberId=${this.innerMemberId}`,).then(res => {
-          if (res.code === 0) {
-            if(res.data) {
-              this.gropList = res.data.records
-              this.page.total = res.data.total
-            }
-          }
-        })
-      },
-      getUserTableData() {
-        this.instance.post(`/wxcp/wxuser/userStat?corpId=${this.params.corpId}&current=${this.userPage.current}&size=${this.userPage.size}&mainDepartment=1`,).then(res => {
-          if (res.code === 0) {
-            if(res.data) {
-              this.userList = res.data.records
-              this.userPage.total = res.data.total
-            }
-          }
-        })
-      },
-      onBack () {
-        this.$emit('change', {
-          type: 'list'
-        })
-      },
-      tabClick(index) {
-        this.activeIndex = index
-        this.myChart.dispose()
-        if(index != 2 && index != 3) {
-          this.$nextTick(() => {
-            this.myChart = echarts.init(document.getElementById("echart"));
+      })
+    },
+    getCharInfo() {
+      this.instance.post(`/appCorpStat/getLatestThreeMonthStat?corpId=${this.params.corpId}`).then(res => {
+        if (res.code === 0) {
+          if (res.data && res.data.length) {
+            this.listData = []
+            this.listData[0] = res.data.map(v => v.groupCount)
+            this.listData[1] = res.data.map(v => v.userCount)
+            this.listData[2] = res.data.map(v => v.activeCount)
+            this.listData[3] = res.data.map(v => v.residentCount)
+            this.listData[4] = res.data.map(v => v.groupuserCount)
+            this.listData[5] = res.data.map(v => v.statDate)
             this.chartInit()
-          })
+          }
         }
+      })
+
+      this.instance.post(`/wxcp/wxgroup/groupStatistic?corpId=${this.params.corpId}`).then(res => {
+        if (res.code === 0) {
+          if (res.data) {
+            this.pieData = []
+            Object.getOwnPropertyNames(res.data).forEach((key) => {
+              var e = {
+                value: res.data[key],
+                name: key
+              }
+              this.pieData.push(e)
+            });
+          }
+        }
+      })
+    },
+
+    resetSearch() {
+      this.innerMemberId = ''
+      this.page.current = 1
+      this.getTableData()
+    },
+    getTableData() {
+      this.instance.post(`/wxcp/wxgroup/list?corpId=${this.params.corpId}&current=${this.page.current}&size=${this.page.size}&innerMemberId=${this.innerMemberId}`,).then(res => {
+        if (res.code === 0) {
+          if (res.data) {
+            this.gropList = res.data.records
+            this.page.total = res.data.total
+          }
+        }
+      })
+    },
+    getUserTableData() {
+      this.instance.post(`/wxcp/wxuser/userStat?corpId=${this.params.corpId}&current=${this.userPage.current}&size=${this.userPage.size}&mainDepartment=1`,).then(res => {
+        if (res.code === 0) {
+          if (res.data) {
+            this.userList = res.data.records
+            this.userPage.total = res.data.total
+          }
+        }
+      })
+    },
+    onBack() {
+      this.$router.push({})
+    },
+    tabClick(index) {
+      this.activeIndex = index
+      this.myChart.dispose()
+      if (index != 2 && index != 3) {
+        this.$nextTick(() => {
+          this.myChart = echarts.init(document.getElementById("echart"));
+          this.chartInit()
+        })
       }
     }
   }
+}
 </script>
 
 <style scoped lang="scss">
-  .cover {
-    display: block;
-    width: 300px;
-    height: 140px;
-    margin: 20px auto;
+.cover {
+  display: block;
+  width: 300px;
+  height: 140px;
+  margin: 20px auto;
+}
+
+.subTitle {
+  text-align: center;
+  font-size: 12px;
+  font-weight: normal;
+}
+
+.title {
+  line-height: 60px;
+  font-size: 18px;
+  text-align: center;
+  color: #666;
+}
+
+.num {
+  font-size: 32px;
+  font-weight: 700;
+  text-align: center;
+  padding-bottom: 20px;
+}
+
+.tabs {
+  .item {
+    display: inline-block;
+    padding: 0 20px;
+    line-height: 54px;
+    cursor: pointer;
   }
 
-  .subTitle {
-    text-align: center;
-    font-size: 12px;
-    font-weight: normal;
+  .active {
+    color: #26f;
+    border-bottom: 2px solid #26f;
   }
-  .title{
-    line-height: 60px;
-    font-size: 18px;
-    text-align: center;
-    color: #666;
+}
+
+.chart-content {
+  height: calc(100% - 240px);
+
+  ::v-deep .ai-card__body {
+    height: calc(100% - 70px);
   }
-  .num{
-    font-size: 32px;
-    font-weight: 700;
-    text-align: center;
-    padding-bottom: 20px;
-  }
-  .tabs{
-    .item{
-      display: inline-block;
-      padding: 0 20px;
-      line-height: 54px;
-      cursor: pointer;
-    }
-    .active{
-      color: #26f;
-      border-bottom: 2px solid #26f;
-    }
-  }
-  .chart-content{
-    height: calc(100% - 240px);
-    ::v-deep .ai-card__body{
-       height: calc(100% - 70px);
-    }
-    .echart{
-      width: 100%;
-      height: 100%;
-    }
-    .table{
-      width: 100%;
-      height: 100%;
-      overflow-y: scroll;
-    }
-  }
-  ::v-deep .ai-detail__content--wrapper{
+
+  .echart {
+    width: 100%;
     height: 100%;
   }
+
+  .table {
+    width: 100%;
+    height: 100%;
+    overflow-y: scroll;
+  }
+}
+
+::v-deep .ai-detail__content--wrapper {
+  height: 100%;
+}
 </style>