Commit 04ef0f9e authored by 刘怀志's avatar 刘怀志

统计样式修改

parent 2da96a64
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1603195985670" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3613" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M1001.91129653 452.07671895v-4.65416756a36.65157036 36.65157036 0 0 0-50.61407304-11.05364835L488.20754334 734.23563151a36.65157036 36.65157036 0 0 0-11.05364828 50.61407304l3.4906264 4.65416754a36.65157036 36.65157036 0 0 0 50.61407302 11.05364831l460.18082479-297.86672846a36.65157036 36.65157036 0 0 0 10.47187726-50.61407299z" fill="#2c2c2c" p-id="3614"></path><path d="M450.39243187 816.84710735l-6.39948078-9.3083351a67.48543104 67.48543104 0 0 1-3.49062543-64.5765757v-3.4906264a66.90366 66.90366 0 0 1 22.10729566-25.59792206l392.11362366-255.39744843V100.68706308A97.73752063 97.73752063 0 0 0 758.73103758 2.36777139h-639.94805017A97.73752063 97.73752063 0 0 0 22.79077997 100.68706308v823.20590002a97.73752063 97.73752063 0 0 0 98.31929169 97.73752063h639.9480492a97.73752063 97.73752063 0 0 0 97.73752063-97.73752063v-290.88547764L546.38463931 838.95440399A67.48543104 67.48543104 0 0 1 450.39243187 816.84710735zM179.86893767 167.00895097h533.48396551c22.10729663 0 39.5604247 12.79896052 39.56042469 29.08854845s-17.45312907 29.08854743-39.56042469 29.08854749H179.86893767c-21.52552556 0-39.5604247-12.79896052-39.56042472-29.08854749s18.03489916-29.08854743 39.56042472-29.08854845z m0 178.0219122h533.48396551c22.10729663 0 39.5604247 12.79896052 39.56042469 29.08854848s-17.45312907 29.08854743-39.56042469 29.08854746H179.86893767c-21.52552556 0-39.5604247-13.38073158-39.56042472-29.08854746s18.03489916-29.08854743 39.56042472-29.08854848zM179.86893767 525.96163072h257.14276159c22.10729663 0 39.5604247 13.38073158 39.56042472 29.08854746s-17.45312907 29.08854743-39.56042471 29.08854745H179.86893767c-21.52552556 0-40.72396684-11.63541939-40.72396686-27.92500535S158.34341207 525.96163072 179.86893767 525.96163072z m143.69742607 280.41359939a29.08854743 29.08854743 0 0 1 29.08854747 29.08854746 29.08854743 29.08854743 0 0 1-29.08854747 29.08854847h-47.70521867v25.59792205a29.08854743 29.08854743 0 0 1-29.08854746 29.08854744 29.08854743 29.08854743 0 0 1-29.08854748-29.08854744v-25.59792205h-48.28698973a29.08854743 29.08854743 0 0 1-29.08854745-29.08854847 29.67031855 29.67031855 0 0 1 29.08854745-29.08854746h48.28698973v-7.56302191h-48.28698973a29.08854743 29.08854743 0 0 1-29.08854745-29.08854845 29.67031855 29.67031855 0 0 1 29.08854745-29.08854744h11.63541939l-30.83386068-37.81511154a29.08854743 29.08854743 0 0 1 47.12344762-35.48802822l51.77761416 62.83126249 52.94115731-63.41303356a28.5067764 28.5067764 0 0 1 40.72396686-3.49062642 29.08854743 29.08854743 0 0 1 4.07239649 40.72396685l-33.16094397 37.81511252h11.05364731a29.08854743 29.08854743 0 0 1 29.08854846 29.08854747 29.08854743 29.08854743 0 0 1-29.08854846 29.08854745h-48.86875982v7.5630229z" fill="#2c2c2c" p-id="3615"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1603195985670" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3613" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M1001.91129653 452.07671895v-4.65416756a36.65157036 36.65157036 0 0 0-50.61407304-11.05364835L488.20754334 734.23563151a36.65157036 36.65157036 0 0 0-11.05364828 50.61407304l3.4906264 4.65416754a36.65157036 36.65157036 0 0 0 50.61407302 11.05364831l460.18082479-297.86672846a36.65157036 36.65157036 0 0 0 10.47187726-50.61407299z" fill="currentColor" p-id="3614"></path><path d="M450.39243187 816.84710735l-6.39948078-9.3083351a67.48543104 67.48543104 0 0 1-3.49062543-64.5765757v-3.4906264a66.90366 66.90366 0 0 1 22.10729566-25.59792206l392.11362366-255.39744843V100.68706308A97.73752063 97.73752063 0 0 0 758.73103758 2.36777139h-639.94805017A97.73752063 97.73752063 0 0 0 22.79077997 100.68706308v823.20590002a97.73752063 97.73752063 0 0 0 98.31929169 97.73752063h639.9480492a97.73752063 97.73752063 0 0 0 97.73752063-97.73752063v-290.88547764L546.38463931 838.95440399A67.48543104 67.48543104 0 0 1 450.39243187 816.84710735zM179.86893767 167.00895097h533.48396551c22.10729663 0 39.5604247 12.79896052 39.56042469 29.08854845s-17.45312907 29.08854743-39.56042469 29.08854749H179.86893767c-21.52552556 0-39.5604247-12.79896052-39.56042472-29.08854749s18.03489916-29.08854743 39.56042472-29.08854845z m0 178.0219122h533.48396551c22.10729663 0 39.5604247 12.79896052 39.56042469 29.08854848s-17.45312907 29.08854743-39.56042469 29.08854746H179.86893767c-21.52552556 0-39.5604247-13.38073158-39.56042472-29.08854746s18.03489916-29.08854743 39.56042472-29.08854848zM179.86893767 525.96163072h257.14276159c22.10729663 0 39.5604247 13.38073158 39.56042472 29.08854746s-17.45312907 29.08854743-39.56042471 29.08854745H179.86893767c-21.52552556 0-40.72396684-11.63541939-40.72396686-27.92500535S158.34341207 525.96163072 179.86893767 525.96163072z m143.69742607 280.41359939a29.08854743 29.08854743 0 0 1 29.08854747 29.08854746 29.08854743 29.08854743 0 0 1-29.08854747 29.08854847h-47.70521867v25.59792205a29.08854743 29.08854743 0 0 1-29.08854746 29.08854744 29.08854743 29.08854743 0 0 1-29.08854748-29.08854744v-25.59792205h-48.28698973a29.08854743 29.08854743 0 0 1-29.08854745-29.08854847 29.67031855 29.67031855 0 0 1 29.08854745-29.08854746h48.28698973v-7.56302191h-48.28698973a29.08854743 29.08854743 0 0 1-29.08854745-29.08854845 29.67031855 29.67031855 0 0 1 29.08854745-29.08854744h11.63541939l-30.83386068-37.81511154a29.08854743 29.08854743 0 0 1 47.12344762-35.48802822l51.77761416 62.83126249 52.94115731-63.41303356a28.5067764 28.5067764 0 0 1 40.72396686-3.49062642 29.08854743 29.08854743 0 0 1 4.07239649 40.72396685l-33.16094397 37.81511252h11.05364731a29.08854743 29.08854743 0 0 1 29.08854846 29.08854747 29.08854743 29.08854743 0 0 1-29.08854846 29.08854745h-48.86875982v7.5630229z" fill="currentColor" p-id="3615"></path></svg>
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1543827724451" class="icon" style="" viewBox="0 0 1084 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10233" xmlns:xlink="http://www.w3.org/1999/xlink" width="211.71875" height="200"><defs><style type="text/css">@font-face { font-family: rbicon; src: url("chrome-extension://dipiagiiohfljcicegpgffpbnjmgjcnf/fonts/rbicon.woff2") format("woff2"); font-weight: normal; font-style: normal; }
</style></defs><path d="M1080.09609 434.500756c-4.216302-23.731757-26.9241-47.945376-50.595623-53.185637l-17.648235-4.095836a175.940257 175.940257 0 0 1-101.612877-80.832531 177.807476 177.807476 0 0 1-18.732427-129.801867l5.541425-16.684509c7.10748-23.129428-2.108151-54.992624-20.599646-70.833873 0 0-16.624276-14.094495-63.244529-41.199293-46.800951-26.984332-66.858502-34.513443-66.858502-34.513443-22.76803-8.372371-54.631227-0.361397-71.255503 17.407304l-12.287509 13.251234a173.470708 173.470708 0 0 1-120.465769 48.065842A174.13327 174.13327 0 0 1 421.329029 33.590675L409.583617 20.761071C393.140039 2.99237 361.096144-4.898138 338.267881 3.353767c0 0-20.358715 7.529111-67.099434 34.513443-46.800951 27.34573-63.244529 41.440225-63.244529 41.440225-18.431263 15.66055-27.646894 47.222582-20.539413 70.592941l5.059562 16.865207a178.048407 178.048407 0 0 1-18.672194 129.621169 174.916297 174.916297 0 0 1-102.275439 81.073463l-17.045906 3.854904c-23.310126 5.42096-46.258856 29.333415-50.595623 53.185637 0 0-3.854905 21.382674-3.854905 75.712737 0 54.330062 3.854905 75.712736 3.854905 75.712736 4.216302 23.972688 26.9241 47.945376 50.595623 53.185637l16.624276 3.854905a174.253736 174.253736 0 0 1 102.395904 81.314394c23.310126 40.837896 28.911785 87.337683 18.732427 129.801867l-4.81863 16.443578c-7.10748 23.129428 2.108151 54.992624 20.599646 70.833872 0 0 16.624276 14.094495 63.244529 41.199293 46.800951 27.104798 66.918735 34.513443 66.918735 34.513443 22.707798 8.372371 54.631227 0.361397 71.255503-17.407303l11.624947-12.588673a175.096996 175.096996 0 0 1 242.256662 0.120465l11.624947 12.648906c16.383345 17.708468 48.427239 25.598976 71.255503 17.347071 0 0 20.358715-7.529111 67.159666-34.513443 46.740719-27.104798 63.124063-41.199293 63.124064-41.199293 18.491496-15.600317 27.707127-47.463513 20.599646-70.833873l-5.059562-17.106139a176.723284 176.723284 0 0 1 18.672194-129.139305 176.060722 176.060722 0 0 1 102.395904-81.314394l16.68451-3.854905c23.310126-5.42096 46.258856-29.333415 50.595623-53.185637 0 0 3.854905-21.382674 3.854904-75.712737-0.240932-54.330062-4.095836-75.833202-4.095836-75.833202z m-537.819428 293.334149c-119.261112 0-216.175824-97.336342-216.175824-217.621412a216.657687 216.657687 0 0 1 216.236057-217.320249c119.200879 0 216.115591 97.276109 216.11559 217.56118-0.240932 120.044139-96.974945 217.320248-216.175823 217.320249z" p-id="10234" fill="#bfbfbf"></path></svg>
\ No newline at end of file
</style></defs><path d="M1080.09609 434.500756c-4.216302-23.731757-26.9241-47.945376-50.595623-53.185637l-17.648235-4.095836a175.940257 175.940257 0 0 1-101.612877-80.832531 177.807476 177.807476 0 0 1-18.732427-129.801867l5.541425-16.684509c7.10748-23.129428-2.108151-54.992624-20.599646-70.833873 0 0-16.624276-14.094495-63.244529-41.199293-46.800951-26.984332-66.858502-34.513443-66.858502-34.513443-22.76803-8.372371-54.631227-0.361397-71.255503 17.407304l-12.287509 13.251234a173.470708 173.470708 0 0 1-120.465769 48.065842A174.13327 174.13327 0 0 1 421.329029 33.590675L409.583617 20.761071C393.140039 2.99237 361.096144-4.898138 338.267881 3.353767c0 0-20.358715 7.529111-67.099434 34.513443-46.800951 27.34573-63.244529 41.440225-63.244529 41.440225-18.431263 15.66055-27.646894 47.222582-20.539413 70.592941l5.059562 16.865207a178.048407 178.048407 0 0 1-18.672194 129.621169 174.916297 174.916297 0 0 1-102.275439 81.073463l-17.045906 3.854904c-23.310126 5.42096-46.258856 29.333415-50.595623 53.185637 0 0-3.854905 21.382674-3.854905 75.712737 0 54.330062 3.854905 75.712736 3.854905 75.712736 4.216302 23.972688 26.9241 47.945376 50.595623 53.185637l16.624276 3.854905a174.253736 174.253736 0 0 1 102.395904 81.314394c23.310126 40.837896 28.911785 87.337683 18.732427 129.801867l-4.81863 16.443578c-7.10748 23.129428 2.108151 54.992624 20.599646 70.833872 0 0 16.624276 14.094495 63.244529 41.199293 46.800951 27.104798 66.918735 34.513443 66.918735 34.513443 22.707798 8.372371 54.631227 0.361397 71.255503-17.407303l11.624947-12.588673a175.096996 175.096996 0 0 1 242.256662 0.120465l11.624947 12.648906c16.383345 17.708468 48.427239 25.598976 71.255503 17.347071 0 0 20.358715-7.529111 67.159666-34.513443 46.740719-27.104798 63.124063-41.199293 63.124064-41.199293 18.491496-15.600317 27.707127-47.463513 20.599646-70.833873l-5.059562-17.106139a176.723284 176.723284 0 0 1 18.672194-129.139305 176.060722 176.060722 0 0 1 102.395904-81.314394l16.68451-3.854905c23.310126-5.42096 46.258856-29.333415 50.595623-53.185637 0 0 3.854905-21.382674 3.854904-75.712737-0.240932-54.330062-4.095836-75.833202-4.095836-75.833202z m-537.819428 293.334149c-119.261112 0-216.175824-97.336342-216.175824-217.621412a216.657687 216.657687 0 0 1 216.236057-217.320249c119.200879 0 216.115591 97.276109 216.11559 217.56118-0.240932 120.044139-96.974945 217.320248-216.175823 217.320249z" p-id="10234" fill="currentColor"></path></svg>
......@@ -1488,7 +1488,8 @@ export default {
.content {
height: 244px;
width: 96%;
box-shadow: 0 0 5px rgba(63, 63, 63, 0.4);
border: 1px solid #d9d9d9;
border-radius: 4px;
margin: 0 0 0 22px;
.chart:first-of-type {
margin-left: 40px;
......@@ -1529,8 +1530,8 @@ export default {
.content {
height: 244px;
width: 96%;
box-shadow: 0 0 5px rgba(63, 63, 63, 0.4);
margin: 0 0 0 22px;
border: 1px solid #d9d9d9;
.chart:first-of-type {
margin-left: 40px;
}
......@@ -1571,8 +1572,8 @@ export default {
.content {
height: 244px;
width: 96%;
box-shadow: 0 0 5px rgba(63, 63, 63, 0.4);
margin: 0 0 0 22px;
border: 1px solid #d9d9d9;
.chart {
height: 100%;
width: 100%;
......@@ -1608,8 +1609,8 @@ export default {
.content {
height: 244px;
width: 96%;
box-shadow: 0 0 5px rgba(63, 63, 63, 0.4);
margin: 0 0 0 22px;
border: 1px solid #d9d9d9;
.chart {
height: 100%;
width: 100%;
......@@ -1807,20 +1808,24 @@ export default {
.title {
display: flex;
align-items: center;
margin: 20px 0 18px 8px;
margin: 20px 0 18px 22px;
.decoration {
width: 4px;
height: 26px;
height: 24px;
background: #214e90;
margin-left: 14px;
margin-right: 16px;
}
.text {
float: left;
margin-left: 5px;
margin-top: 5px;
font-size: 16px;
font-weight: 700;
color: #333333;
}
.button {
position: absolute;
right: 51.2%;
}
}
}
......
<template>
<!-- 单位视图 -->
<div class="companyView">
<!-- <el-row>
<!-- 单位视图 -->
<div class="companyView">
<!-- <el-row>
<el-col :span="12" style="height: 100%;">
<el-col :span="6" class="topCardLeftChild">
<div>企业数量</div>
......@@ -18,10 +18,10 @@
</div>
<el-divider></el-divider>
<div style="width: 90%; margin-left: 5%; margin-top: 10px;">
<el-table
v-loading="loading"
border
:data="rankList"
<el-table
v-loading="loading"
border
:data="rankList"
stripe
:header-cell-style="{background:'rgb(250,250,250)'}">
<el-table-column type="index" width="55" label="排名" align="center" />
......@@ -31,563 +31,572 @@
<el-table-column label="购买课程数" align="center" prop="classNumber" :show-overflow-tooltip="true" />
</el-table>
</div>
</div>
</el-col>
</el-row> -->
<div class="upCard">
<div class="left">
<div class="card" style=" margin-top: 1%; margin-bottom: 4%;">
<div style="padding-top: 20px; margin-left: 30px;">企业数量</div>
<div style="padding-top: 20px; margin-left: 30px; padding-bottom: 30px;">{{ cardInfo.companyNum }}</div>
<el-divider></el-divider>
<div style="padding-top: 0px; margin-left: 30px; color: black;">今日新增:{{ cardInfo.newCompanyNum }}</div>
</div>
<div class="card">
<div style="padding-top: 20px; margin-left: 30px;">企业用户数</div>
<div style="padding-top: 20px; margin-left: 30px; padding-bottom: 30px;">{{ cardInfo.companyUserNum }}</div>
<el-divider></el-divider>
<div style="padding-top: 0px; margin-left: 30px; color: black;">今日新增:{{ cardInfo.activeUsers }}</div>
</div>
</div>
<div class="center">
<div class="card" style=" margin-top: 1%; margin-bottom: 4%;">
<div style="padding-top: 20px; margin-left: 30px;">院校数量</div>
<div style="padding-top: 20px; margin-left: 30px; padding-bottom: 30px;">{{ cardInfo.schoolNum }}</div>
<el-divider></el-divider>
<div style="padding-top: 0px; margin-left: 30px; color: black;">今日新增:{{ cardInfo.newSchoolNum }}</div>
</div>
<div class="card">
<div style="padding-top: 20px; margin-left: 30px;">院校用户数</div>
<div style="padding-top: 20px; margin-left: 30px; padding-bottom: 30px;">{{ cardInfo.schoolUserNum }}</div>
<el-divider></el-divider>
<div style="padding-top: 0px; margin-left: 30px; color: black;">在学用户数:{{ cardInfo.InschoolUserNum }}</div>
</div>
</div>
<div class="right">
<div class="card" style=" margin-top: 0.5%;">
<div class="title">
<div class="decoration"></div>
<div class="text">购买课程TOP3</div>
</div>
<el-divider></el-divider>
<div style="width: 90%; margin-left: 5%; margin-top: 60px;">
<el-table
v-loading="loading"
border
:data="rankList"
stripe
:header-cell-style="{background:'rgb(250,250,250)'}">
<el-table-column type="index" width="55" label="排名" align="center" />
<el-table-column label="单位名称" align="center" prop="unitName" />
<el-table-column label="单位类型" align="center" prop="unitType" width="130"
:show-overflow-tooltip="true" />
<el-table-column label="购买课程数" align="center" prop="classNumber" :show-overflow-tooltip="true" />
</el-table>
</div>
</div>
</div>
<div class="upCard">
<div class="four-card">
<div class="card-info">
<div class="card-title">企业数量</div>
<div class="card-bottom bottom-one">
<img :src="qiyeshu" />
<div class="card-num">{{ cardInfo.companyNum }}</div>
<div class="card-detail">今日新增 {{ cardInfo.newCompanyNum }}</div>
</div>
</div>
<div class="downList">
<div class="title">
<div class="decoration"></div>
<div class="text">统计列表</div>
</div>
<el-table
class="table-class"
v-loading="loading"
border
:data="list"
@cell-click="clickTable"
stripe
:header-cell-style="{background:'rgb(250,250,250)'}">
<el-table-column type="index" width="55" label="序号" align="center" />
<el-table-column label="单位名称" align="center" prop="unitName">
<template slot-scope="scope">
<span>{{ scope.row.unitName }}</span>
</template>
</el-table-column>
<el-table-column label="学员人数" align="center" prop="studentNumber">
<template slot-scope="scope">
<span style="color: #214e90;">{{ scope.row.studentNumber }}</span>
</template>
</el-table-column>
<el-table-column label="付费课程数" align="center" prop="payed">
<template slot-scope="scope">
<span style="color: #214e90;">{{ scope.row.payed }}</span>
</template>
</el-table-column>
<el-table-column label="试用课程数" align="center" prop="noPay">
<template slot-scope="scope">
<span style="color: #214e90;">{{ scope.row.studentNumber }}</span>
</template>
</el-table-column>
<el-table-column label="完成必修课人次" align="center" prop="finish">
<template slot-scope="scope">
<span style="color: #214e90;">{{ scope.row.finish }}</span>
</template>
</el-table-column>
<el-table-column label="未完成必修课人次" align="center" prop="notFinish">
<template slot-scope="scope">
<span style="color: #214e90;">{{ scope.row.notFinish }}</span>
</template>
</el-table-column>
<el-table-column label="必修考核记录数" align="center" prop="exam">
<template slot-scope="scope">
<span style="color: #214e90;">{{ scope.row.exam }}</span>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.page"
:limit.sync="queryParams.rows"
@pagination="getList"
/>
<div class="card-info">
<div class="card-title">院校数量</div>
<div class="card-bottom bottom-two">
<img :src="yuanxiaoshu" />
<div class="card-num">{{ cardInfo.schoolNum }}</div>
<div class="card-detail">今日新增 {{ cardInfo.newSchoolNum }}</div>
</div>
</div>
<!-- 点击列表数据后的右弹窗 -->
<el-drawer
class="drawer"
title="统计明细"
:visible.sync="drawer"
direction="rtl"
:before-close="handleClose"
size="50%">
<div slot="title">
<span style="color: #333333;">统计</span>
</div>
<el-divider></el-divider>
<!-- 内容 -->
<div class="title">
<span class="name">单位:{{ this.detailQueryParams.unitName }}</span>
<span class="people">
{{ this.detailQueryParams.label }}:
<span class="num">{{ this.detailQueryParams.labelInfo + '人' }}</span>
</span>
<el-table
v-loading="loading"
border
:data="detailList"
class="table-class"
>
<el-table-column type="index" width="55" label="序号" align="center" />
<el-table-column
v-for="(column, index) in drawerHead"
:key="index"
:label="column.label"
align="center"
:prop="column.prop"
/>
</el-table>
</div>
</el-drawer>
<div class="card-info">
<div class="card-title">企业用户数</div>
<div class="card-bottom bottom-three">
<img :src="qiyeyonghu" />
<div class="card-num">{{ cardInfo.companyUserNum }}</div>
<div class="card-detail">活跃用户数 {{ cardInfo.activeUsers }}</div>
</div>
</div>
<div class="card-info">
<div class="card-title">院校用户数</div>
<div class="card-bottom bottom-four">
<img :src="yuanxiaoyonghu" />
<div class="card-num">{{ cardInfo.schoolUserNum }}</div>
<div class="card-detail">在学用户数 {{ cardInfo.InschoolUserNum }}</div>
</div>
</div>
</div>
<div class="right">
<div class="title">
<div class="decoration" />
<div class="text">购买课程TOP3</div>
</div>
<div class="table-area">
<el-table
v-loading="loading"
border
:data="rankList"
stripe
:header-cell-style="{background:'rgb(250,250,250)'}"
>
<el-table-column type="index" width="55" label="排名" align="center" />
<el-table-column label="单位名称" align="center" prop="unitName" />
<el-table-column
label="单位类型"
align="center"
prop="unitType"
width="130"
:show-overflow-tooltip="true"
/>
<el-table-column label="购买课程数" align="center" prop="classNumber" :show-overflow-tooltip="true" />
</el-table>
</div>
</div>
</div>
<div class="downList">
<div class="title">
<div class="decoration" />
<div class="text">统计列表</div>
</div>
<el-table
v-loading="loading"
class="table-class"
border
:data="list"
stripe
:header-cell-style="{background:'rgb(250,250,250)'}"
@cell-click="clickTable"
>
<el-table-column type="index" width="55" label="序号" align="center" />
<el-table-column label="单位名称" align="center" prop="unitName">
<template slot-scope="scope">
<span>{{ scope.row.unitName }}</span>
</template>
</el-table-column>
<el-table-column label="学员人数" align="center" prop="studentNumber">
<template slot-scope="scope">
<span style="color: #214e90;">{{ scope.row.studentNumber }}</span>
</template>
</el-table-column>
<el-table-column label="付费课程数" align="center" prop="payed">
<template slot-scope="scope">
<span style="color: #214e90;">{{ scope.row.payed }}</span>
</template>
</el-table-column>
<el-table-column label="试用课程数" align="center" prop="noPay">
<template slot-scope="scope">
<span style="color: #214e90;">{{ scope.row.studentNumber }}</span>
</template>
</el-table-column>
<el-table-column label="完成必修课人次" align="center" prop="finish">
<template slot-scope="scope">
<span style="color: #214e90;">{{ scope.row.finish }}</span>
</template>
</el-table-column>
<el-table-column label="未完成必修课人次" align="center" prop="notFinish">
<template slot-scope="scope">
<span style="color: #214e90;">{{ scope.row.notFinish }}</span>
</template>
</el-table-column>
<el-table-column label="必修考核记录数" align="center" prop="exam">
<template slot-scope="scope">
<span style="color: #214e90;">{{ scope.row.exam }}</span>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.page"
:limit.sync="queryParams.rows"
@pagination="getList"
/>
</div>
<!-- 点击列表数据后的右弹窗 -->
<el-drawer
class="drawer"
title="统计明细"
:visible.sync="drawer"
direction="rtl"
:before-close="handleClose"
size="50%"
>
<div slot="title">
<span style="color: #333333;">统计</span>
</div>
<el-divider />
<!-- 内容 -->
<div class="title">
<span class="name">单位:{{ this.detailQueryParams.unitName }}</span>
<span class="people">
{{ this.detailQueryParams.label }}:
<span class="num">{{ this.detailQueryParams.labelInfo + '人' }}</span>
</span>
<el-table
v-loading="loading"
border
:data="detailList"
class="table-class"
>
<el-table-column type="index" width="55" label="序号" align="center" />
<el-table-column
v-for="(column, index) in drawerHead"
:key="index"
:label="column.label"
align="center"
:prop="column.prop"
/>
</el-table>
</div>
</el-drawer>
</div>
</template>
<script>
import { getDataCache, setDataCache } from '@/assets/js/filterData'
import { getEnterprisesView,getEnterprisesPeopleView,getCollegesView,getCollegesPeopleView, getPayRank, getUnitView,getStudentNumber,getPayed,getLearning,getFinish,getNotFinish,getExam } from '@/api/dataStatistics/companyView'
import { getEnterprisesView, getEnterprisesPeopleView, getCollegesView, getCollegesPeopleView, getPayRank, getUnitView, getStudentNumber, getPayed, getLearning, getFinish, getNotFinish, getExam } from '@/api/dataStatistics/companyView'
import qiyeshu from '@/assets/image/qiyeshu.png'
import yuanxiaoshu from '@/assets/image/yuanxiaoshu.png'
import qiyeyonghu from '@/assets/image/qiyeyonghu.png'
import yuanxiaoyonghu from '@/assets/image/yuanxiaoyonghu.png'
export default {
name: 'companyView',
data() {
return {
// 卡片信息
cardInfo: {
companyNum: 100,
newCompanyNum: 1,
companyUserNum: 500,
activeUsers: 300,
schoolNum: 50,
newSchoolNum: 1,
schoolUserNum: 300,
InschoolUserNum: 300,
},
// 排名列表
rankList: [
{
unitName: 'xxxxxx',
unitType: '企业',
classNumber: '20门'
},
{
unitName: 'xxxxxx',
unitType: '院校',
classNumber: '16门'
},
{
unitName: 'xxxxxx',
unitType: '企业',
classNumber: '5门'
},
],
// 是否加载
loading: false,
// 底部列表数据
list: [
{
unitName: 'xxxx',
studentNumber: '2',
payed: '3',
noPay: '4',
finish: '5',
notFinish: '6',
exam: '7',
},
{
unitName: 'xxxx',
studentNumber: '2',
payed: '3',
noPay: '4',
finish: '5',
notFinish: '6',
exam: '7',
},
{
unitName: 'xxxx',
studentNumber: '2',
payed: '3',
noPay: '4',
finish: '5',
notFinish: '6',
exam: '7',
},
{
unitName: 'xxxx',
studentNumber: '2',
payed: '3',
noPay: '4',
finish: '5',
notFinish: '6',
exam: '7',
},
],
// 查询参数
total: 20,
queryParams: {
page: 1,
rows: 10,
username: '',
loginTime: ''
},
// 下面的两个要同时获得,保证能对得上
// 抽屉列表的表头信息
drawerHead: [
{label: '用户类型',prop: 'userType'},
{label: '单位类型',prop: 'companyType'},
{label: '所属单位',prop: 'affiliatedUnit'},
{label: '登录名',prop: 'loginName'},
{label: '用户姓名',prop: 'userName'},
],
// 抽屉列表信息
detailList: [
{
userType: '1',
companyType: '2',
affiliatedUnit: '3',
loginName: '4',
userName: '5',
},
{
userType: '1',
companyType: '2',
affiliatedUnit: '3',
loginName: '4',
userName: '5',
},
{
userType: '1',
companyType: '2',
affiliatedUnit: '3',
loginName: '4',
userName: '5',
},
{
userType: '1',
companyType: '2',
affiliatedUnit: '3',
loginName: '4',
userName: '5',
},
],
// 抽屉列表查询参数
detailTotal: 20,
detailQueryParams: {
page: 1,
rows: 10,
id: '',
column: '',
unitName: '',
label: '',
labelInfo: '',
username: '',
loginTime: ''
},
// 右到左的抽屉相关数据
drawer: false,
name: 'CompanyView',
data() {
return {
qiyeshu,
yuanxiaoshu,
qiyeyonghu,
yuanxiaoyonghu,
// 卡片信息
cardInfo: {
companyNum: 100,
newCompanyNum: 1,
companyUserNum: 500,
activeUsers: 300,
schoolNum: 50,
newSchoolNum: 1,
schoolUserNum: 300,
InschoolUserNum: 300
},
// 排名列表
rankList: [
{
unitName: 'xxxxxx',
unitType: '企业',
classNumber: '20门'
},
{
unitName: 'xxxxxx',
unitType: '院校',
classNumber: '16门'
},
{
unitName: 'xxxxxx',
unitType: '企业',
classNumber: '5门'
}
],
// 是否加载
loading: false,
// 底部列表数据
list: [
{
unitName: 'xxxx',
studentNumber: '2',
payed: '3',
noPay: '4',
finish: '5',
notFinish: '6',
exam: '7'
},
{
unitName: 'xxxx',
studentNumber: '2',
payed: '3',
noPay: '4',
finish: '5',
notFinish: '6',
exam: '7'
},
{
unitName: 'xxxx',
studentNumber: '2',
payed: '3',
noPay: '4',
finish: '5',
notFinish: '6',
exam: '7'
},
{
unitName: 'xxxx',
studentNumber: '2',
payed: '3',
noPay: '4',
finish: '5',
notFinish: '6',
exam: '7'
}
},
computed: {
},
/** 路由离开前存储筛选条件*/
beforeRouteLeave(to, from, next) {
setDataCache(this.$route.path, this.queryParams)
next()
},
created() {
],
// 查询参数
total: 20,
queryParams: {
page: 1,
rows: 10,
username: '',
loginTime: ''
},
// 下面的两个要同时获得,保证能对得上
// 抽屉列表的表头信息
drawerHead: [
{ label: '用户类型', prop: 'userType' },
{ label: '单位类型', prop: 'companyType' },
{ label: '所属单位', prop: 'affiliatedUnit' },
{ label: '登录名', prop: 'loginName' },
{ label: '用户姓名', prop: 'userName' }
],
// 抽屉列表信息
detailList: [
{
userType: '1',
companyType: '2',
affiliatedUnit: '3',
loginName: '4',
userName: '5'
},
{
userType: '1',
companyType: '2',
affiliatedUnit: '3',
loginName: '4',
userName: '5'
},
{
userType: '1',
companyType: '2',
affiliatedUnit: '3',
loginName: '4',
userName: '5'
},
{
userType: '1',
companyType: '2',
affiliatedUnit: '3',
loginName: '4',
userName: '5'
}
],
// 抽屉列表查询参数
detailTotal: 20,
detailQueryParams: {
page: 1,
rows: 10,
id: '',
column: '',
unitName: '',
label: '',
labelInfo: '',
username: '',
loginTime: ''
},
// 右到左的抽屉相关数据
drawer: false
}
},
computed: {
},
/** 路由离开前存储筛选条件*/
beforeRouteLeave(to, from, next) {
setDataCache(this.$route.path, this.queryParams)
next()
},
created() {
},
mounted() {
this.list = []
this.init()
},
methods: {
init() {
getEnterprisesView()
.then((res) => {
const data = res.data
this.cardInfo.companyNum = data.number
this.cardInfo.newCompanyNum = data.addNumber
})
.catch((err) => {
console.log(err)
})
getEnterprisesPeopleView()
.then((res) => {
const data = res.data
this.cardInfo.companyUserNum = data.totalNumber
this.cardInfo.activeUsers = data.liveNumber
})
.catch((err) => {
console.log(err)
})
getCollegesView()
.then((res) => {
const data = res.data
this.cardInfo.schoolNum = data.number
this.cardInfo.newSchoolNum = data.addNumber
})
.catch((err) => {
console.log(err)
})
getCollegesPeopleView()
.then((res) => {
const data = res.data
this.cardInfo.schoolUserNum = data.totalNumber
this.cardInfo.InschoolUserNum = data.learnNumber
})
.catch((err) => {
console.log(err)
})
// 获取右侧排行
getPayRank()
.then((res) => {
const data = res.data
this.rankList = data
})
.catch((err) => {
console.log(err)
})
this.getList()
},
mounted() {
this.list = []
this.init()
/** 获取下方列表 */
getList() {
// 获取下方列表
getUnitView(this.queryParams.rows, this.queryParams.page)
.then((res) => {
const data = res.data
this.list = data.records
this.total = data.total
this.loading = false
})
.catch((err) => {
console.log(err)
})
},
methods: {
init() {
getEnterprisesView()
.then((res)=>{
let data = res.data
this.cardInfo.companyNum = data.number
this.cardInfo.newCompanyNum = data.addNumber
/** 查询分页 */
detailGetList() {
switch (this.detailQueryParams.column) {
case 'studentNumber':
this.drawer = true
console.log(this.detailQueryParams.id)
getStudentNumber(this.detailQueryParams.id, this.detailQueryParams.page, this.detailQueryParams.rows)
.then((res) => {
const data = res.data
this.detailList = data.records
this.drawerHead = [
{ label: '登录名', prop: 'userName' },
{ label: '用户姓名', prop: 'name' },
{ label: '手机号', prop: 'phone' },
{ label: '职位/专业', prop: 'position' },
{ label: '状态', prop: 'status' }
]
this.detailTotal = data.total
})
.catch((err)=>{
console.log(err);
.catch((err) => {
console.log(err)
})
getEnterprisesPeopleView()
.then((res)=>{
let data = res.data
this.cardInfo.companyUserNum = data.totalNumber
this.cardInfo.activeUsers = data.liveNumber
break
case 'payed':
this.drawer = true
getPayed(this.detailQueryParams.id, this.detailQueryParams.page, this.detailQueryParams.rows)
.then((res) => {
const data = res.data
this.detailList = data.records
this.drawerHead = [
{ label: '课程名称', prop: 'lessonName' },
{ label: '课程讲师', prop: 'lessonTeacher' },
{ label: '开始日期', prop: 'start' },
{ label: '结束日期', prop: 'end' },
{ label: '剩余有效天数', prop: 'day' }
]
this.detailTotal = data.total
})
.catch((err)=>{
console.log(err);
.catch((err) => {
console.log(err)
})
getCollegesView()
.then((res)=>{
let data = res.data
this.cardInfo.schoolNum = data.number
this.cardInfo.newSchoolNum = data.addNumber
break
case 'noPay':
this.drawer = true
getLearning(this.detailQueryParams.id, this.detailQueryParams.page, this.detailQueryParams.rows)
.then((res) => {
const data = res.data
this.detailList = data.records
this.drawerHead = [
{ label: '课程名称', prop: 'lessonName' },
{ label: '课程讲师', prop: 'lessonTeacher' },
{ label: '开始日期', prop: 'start' },
{ label: '结束日期', prop: 'end' },
{ label: '剩余有效天数', prop: 'day' }
]
this.detailTotal = data.total
})
.catch((err)=>{
console.log(err);
.catch((err) => {
console.log(err)
})
getCollegesPeopleView()
.then((res)=>{
let data = res.data
this.cardInfo.schoolUserNum = data.totalNumber
this.cardInfo.InschoolUserNum = data.learnNumber
break
case 'finish':
this.drawer = true
getFinish(this.detailQueryParams.id, this.detailQueryParams.page, this.detailQueryParams.rows)
.then((res) => {
const data = res.data
this.detailList = data.records
this.drawerHead = [
{ label: '课程名称', prop: 'lessonName' },
{ label: '课程讲师', prop: 'lessonTeacher' },
{ label: '登录名', prop: 'userName' },
{ label: '用户姓名', prop: 'name' },
{ label: '完成日期', prop: 'date' }
]
this.detailTotal = data.total
})
.catch((err)=>{
console.log(err);
.catch((err) => {
console.log(err)
})
// 获取右侧排行
getPayRank()
.then((res)=>{
let data = res.data
this.rankList = data
break
case 'notFinish':
this.drawer = true
getNotFinish(this.detailQueryParams.id, this.detailQueryParams.page, this.detailQueryParams.rows)
.then((res) => {
const data = res.data
this.detailList = data.records
this.drawerHead = [
{ label: '课程名称', prop: 'lessonName' },
{ label: '课程讲师', prop: 'lessonTeacher' },
{ label: '登录名', prop: 'userName' },
{ label: '用户姓名', prop: 'name' },
{ label: '学习进度', prop: 'schedule' }
]
this.detailTotal = data.total
})
.catch((err)=>{
console.log(err);
.catch((err) => {
console.log(err)
})
this.getList()
},
/** 获取下方列表 */
getList() {
// 获取下方列表
getUnitView(this.queryParams.rows, this.queryParams.page)
.then((res)=>{
let data = res.data
this.list = data.records
this.total = data.total
this.loading = false
break
case 'exam':
this.drawer = true
console.log('========')
getExam(this.detailQueryParams.id, this.detailQueryParams.page, this.detailQueryParams.rows)
.then((res) => {
const data = res.data
this.detailList = data.records
this.drawerHead = [
{ label: '课程名称', prop: 'lessonName' },
{ label: '满分/及格线', prop: 'line' },
{ label: '登录名', prop: 'userName' },
{ label: '用户姓名', prop: 'name' },
{ label: '考核成绩(分)', prop: 'score' }
]
this.detailTotal = data.total
})
.catch((err)=>{
console.log(err);
.catch((err) => {
console.log(err)
})
},
/** 查询分页 */
detailGetList() {
switch (this.detailQueryParams.column) {
case 'studentNumber':
this.drawer = true
console.log(this.detailQueryParams.id);
getStudentNumber(this.detailQueryParams.id,this.detailQueryParams.page,this.detailQueryParams.rows)
.then((res)=>{
let data = res.data
this.detailList = data.records
this.drawerHead = [
{label: '登录名',prop: 'userName'},
{label: '用户姓名',prop: 'name'},
{label: '手机号',prop: 'phone'},
{label: '职位/专业',prop: 'position'},
{label: '状态',prop: 'status'},
]
this.detailTotal = data.total
})
.catch((err)=>{
console.log(err);
})
break;
case 'payed':
this.drawer = true
getPayed(this.detailQueryParams.id,this.detailQueryParams.page,this.detailQueryParams.rows)
.then((res)=>{
let data = res.data
this.detailList = data.records
this.drawerHead = [
{label: '课程名称',prop: 'lessonName'},
{label: '课程讲师',prop: 'lessonTeacher'},
{label: '开始日期',prop: 'start'},
{label: '结束日期',prop: 'end'},
{label: '剩余有效天数',prop: 'day'},
]
this.detailTotal = data.total
})
.catch((err)=>{
console.log(err);
})
break;
case 'noPay':
this.drawer = true
getLearning(this.detailQueryParams.id,this.detailQueryParams.page,this.detailQueryParams.rows)
.then((res)=>{
let data = res.data
this.detailList = data.records
this.drawerHead = [
{label: '课程名称',prop: 'lessonName'},
{label: '课程讲师',prop: 'lessonTeacher'},
{label: '开始日期',prop: 'start'},
{label: '结束日期',prop: 'end'},
{label: '剩余有效天数',prop: 'day'},
]
this.detailTotal = data.total
})
.catch((err)=>{
console.log(err);
})
break;
case 'finish':
this.drawer = true
getFinish(this.detailQueryParams.id,this.detailQueryParams.page,this.detailQueryParams.rows)
.then((res)=>{
let data = res.data
this.detailList = data.records
this.drawerHead = [
{label: '课程名称',prop: 'lessonName'},
{label: '课程讲师',prop: 'lessonTeacher'},
{label: '登录名',prop: 'userName'},
{label: '用户姓名',prop: 'name'},
{label: '完成日期',prop: 'date'},
]
this.detailTotal = data.total
})
.catch((err)=>{
console.log(err);
})
break;
case 'notFinish':
this.drawer = true
getNotFinish(this.detailQueryParams.id,this.detailQueryParams.page,this.detailQueryParams.rows)
.then((res)=>{
let data = res.data
this.detailList = data.records
this.drawerHead = [
{label: '课程名称',prop: 'lessonName'},
{label: '课程讲师',prop: 'lessonTeacher'},
{label: '登录名',prop: 'userName'},
{label: '用户姓名',prop: 'name'},
{label: '学习进度',prop: 'schedule'},
]
this.detailTotal = data.total
})
.catch((err)=>{
console.log(err);
})
break;
case 'exam':
this.drawer = true
console.log('========');
getExam(this.detailQueryParams.id,this.detailQueryParams.page,this.detailQueryParams.rows)
.then((res)=>{
let data = res.data
this.detailList = data.records
this.drawerHead = [
{label: '课程名称',prop: 'lessonName'},
{label: '满分/及格线',prop: 'line'},
{label: '登录名',prop: 'userName'},
{label: '用户姓名',prop: 'name'},
{label: '考核成绩(分)',prop: 'score'},
]
this.detailTotal = data.total
})
.catch((err)=>{
console.log(err);
})
break;
default:
break
default:
// console.log('Unknown fruit.');
}
},
// 右侧弹窗关闭逻辑
handleClose(done) {
done()
},
// 获取被点击的格的信息
clickTable(row,column,event,cell) {
this.detailList = []
this.detailQueryParams.page = 1
this.detailQueryParams.rows = 10
// // 行的信息
// console.log('====');
// console.log(row);
// // 列的信息
// console.log(column.property);
this.detailQueryParams.id = row.businessId
this.detailQueryParams.column = column.property
this.detailQueryParams.unitName = row.unitName
this.detailQueryParams.label = column.label
this.detailQueryParams.labelInfo = row[column.property]
this.detailGetList(this.detailQueryParams.rows, this.detailQueryParams.page)
},
}
},
// 右侧弹窗关闭逻辑
handleClose(done) {
done()
},
// 获取被点击的格的信息
clickTable(row, column, event, cell) {
this.detailList = []
this.detailQueryParams.page = 1
this.detailQueryParams.rows = 10
// // 行的信息
// console.log('====');
// console.log(row);
// // 列的信息
// console.log(column.property);
this.detailQueryParams.id = row.businessId
this.detailQueryParams.column = column.property
this.detailQueryParams.unitName = row.unitName
this.detailQueryParams.label = column.label
this.detailQueryParams.labelInfo = row[column.property]
this.detailGetList(this.detailQueryParams.rows, this.detailQueryParams.page)
}
}
}
</script>
<style lang="scss" scoped>
......@@ -669,75 +678,114 @@ export default {
.upCard {
width: 100%;
height: 400px;
display: flex;
padding: 0 22px;
.left {
float: left;
margin-left: 1%;
width: 24%;
height: 100%;
// background-color: aqua;
.card {
width: 100%;
height: 48%;
border-radius: 4px;
box-shadow: 0 0 5px rgba(63, 63, 63, 0.4);
color: rgb(146, 146, 146);
.four-card{
width: 798px;
height: 286px;
background: #ffffff;
border: 1px solid #d9d9d9;
border-radius: 4px;
margin-right: 25px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 30px 35px;
.card-info{
.card-title{
font-size: 16px;
font-family: Microsoft YaHei, Microsoft YaHei-700;
font-weight: 700;
text-align: LEFT;
color: #333333;
}
.card-bottom{
margin-top: 12px;
width: 164px;
height: 198px;
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
img{
margin-top: 28px;
margin-bottom: 22px;
}
.card-num{
font-size: 24px;
font-family: Microsoft YaHei, Microsoft YaHei-700;
font-weight: 700;
text-align: RIGHT;
color: #333333;
line-height: 28px;
}
.card-detail{
height: 48px;
border-top: 1px solid rgba(33,78,144,0.10);
font-size: 14px;
font-family: Microsoft YaHei, Microsoft YaHei-700;
font-weight: 700;
text-align: RIGHT;
line-height: 16px;
width: 100%;
margin-top: 28px;
display: flex;
align-items: center;
justify-content: center;
}
}
.bottom-one{
background: rgba(33,78,144,0.10);
color: #214e90;
}
.bottom-two{
background: rgba(249,111,33,0.10);
color: #f96f21;
}
.bottom-three{
background: rgba(249,162,33,0.10);
color: #f9a221;
}
.bottom-four{
background: rgba(33,78,144,0.10);
color: #214e90;
}
}
}
.right {
width: 798px;
height: 286px;
background: #ffffff;
border: 1px solid #d9d9d9;
border-radius: 4px;
padding: 22px 20px;
.title {
display: flex;
align-items: center;
.center {
float: left;
margin-left: 1%;
width: 24%;
height: 100%;
// background-color: aqua;
.card {
width: 100%;
height: 48%;
border-radius: 4px;
box-shadow: 0 0 5px rgba(63, 63, 63, 0.4);
color: rgb(146, 146, 146);
.decoration {
width: 4px;
height: 24px;
background: #214e90;
margin-right: 16px;
}
}
.right {
float: left;
margin-left: 1%;
width: 48%;
height: 100%;
// background-color: aqua;
.card {
width: 100%;
height: 99%;
border-radius: 4px;
box-shadow: 0 0 5px rgba(63, 63, 63, 0.4);
.title {
position: relative;
padding: 20px;
padding-left: 30px;
height: 50px;
.decoration {
float: left;
margin-top: 6px;
width: 8px;
height: 16px;
background-color: rgba(64, 158, 255, 1);
}
.text {
float: left;
margin-left: 5px;
margin-top: 5px;
font-size: 16px;
}
}
.text {
font-size: 16px;
font-weight: 700;
color: #333333;
}
.button {
position: absolute;
right: 51.2%;
}
}
.table-area{
margin-top: 24px;
}
}
}
......@@ -755,7 +803,6 @@ export default {
padding-left: 20px;
}
.title {
position: relative;
......@@ -778,4 +825,4 @@ export default {
}
}
}
</style>
\ No newline at end of file
</style>
......@@ -60,8 +60,8 @@ module.exports = {
proxy: {
[process.env.VUE_APP_BASE_API]: {
target: `http://49.232.167.247:20024/`,
// target: `http://192.168.10.108:8090/`, // 飞龙后端
// target: `http://192.168.10.128:8090/`, // 奕霖后端
// target: `http://192.168.1.23:8090/`, // 飞龙后端
// target: `http://192.168.1.119:8090/`, // 奕霖后端
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment