208 lines
17 KiB
HTML
208 lines
17 KiB
HTML
<!--#
|
|
layout("/mobile/platform.html"){
|
|
#-->
|
|
|
|
<style>
|
|
.chart-card {
|
|
background-color: #FFFFFF;
|
|
margin: 10px;
|
|
}
|
|
|
|
.flex-box {
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div id="app" v-clock>
|
|
<van-row gutter="20" style="margin: 0 10px 10px 10px;padding-top: 20px;">
|
|
<van-col span="8">
|
|
<div class="flex-box" style="justify-content: space-between;padding: 15px">
|
|
<svg t="1634176912094" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
p-id="712" width="32" height="32">
|
|
<path d="M327.6 682.7c-31.8-31.5-49.7-74.4-49.7-119.3V385.3c0-33.5 9.8-64.7 26.8-91-7.8-1.9-15.7-2.9-23.7-2.9H154.3c-56.6 0-102.9 46.9-102.9 104v163.7c0 38.8 21.5 74.4 55.7 92.3v319.9h83l30.6-202.5 30.6 202.5h76.4V682.7z m304.1-18.5c36.3-18.8 61.2-57.1 61.2-100.8V385.3c0-62.2-50.4-113.2-112-113.2h-138c-61.6 0-112 50.9-112 113.2v178.1c0 43.6 24.7 81.6 60.6 100.5V1012H482l33.3-220.3 33.3 220.3h83.1V664.2zM515.1 12c65.2 0 118 53.4 118 119.3 0 65.8-52.8 119.3-118 119.3s-118-53.4-118-119.3c0-66.1 52.8-119.3 118-119.3z m182.2 670.7v288.8h76.4L804.3 769l30.6 202.5H918V651.7c33-17.4 55.6-52.3 55.6-92.3V395.6c0-57.2-46.4-104-103-104H744.1c-8.2 0-16.2 1-23.7 2.9 17.6 27.1 26.9 58.7 26.8 91v178.1c0 45.4-18.5 88.2-49.9 119.1zM804.6 52.4c-60 0-108.5 49-108.5 109.5s48.5 109.6 108.5 109.6c59.8 0 108.3-49 108.3-109.6 0-60.6-48.5-109.5-108.3-109.5z m-584.1 0c59.8 0 108.5 49 108.5 109.5s-48.5 109.6-108.5 109.6c-59.9 0-108.3-49-108.3-109.6-0.1-60.6 48.4-109.5 108.3-109.5z"
|
|
fill="#e0620d" p-id="713"></path>
|
|
</svg>
|
|
<div class="text-center" style="font-size: 11px">
|
|
总会员
|
|
<span>
|
|
{{memberNumberMap.totalCount}}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</van-col>
|
|
<van-col span="8">
|
|
<div class="flex-box" style="justify-content: space-between;padding: 15px">
|
|
<svg t="1634178080836" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg" p-id="8757" width="32" height="32">
|
|
<path d="M579.2 646.5H445.1c-14.4 0-26.2-11.8-26.2-26.2V436.7c0-14.4 11.8-26.2 26.2-26.2h134.1c14.4 0 26.2 11.8 26.2 26.2v183.6c0 14.4-11.8 26.2-26.2 26.2z"
|
|
fill="#F7C9A4" p-id="8758"></path>
|
|
<path d="M840.7 959.1V779c0-83.9-147.8-139.5-328.4-139.5-180.6 0-328.4 55.6-328.4 139.5v180.1h656.8z"
|
|
fill="#E8E8DD" p-id="8759"></path>
|
|
<path d="M381.5 420.5h-53.7c-26.5 0-48.1-21.7-48.1-48.1 0-26.5 21.7-48.1 48.1-48.1h53.7c26.5 0 48.1 21.7 48.1 48.1 0 26.4-21.7 48.1-48.1 48.1zM687 415.9h-53.7c-26.5 0-48.1-21.7-48.1-48.1 0-26.5 21.7-48.1 48.1-48.1H687c26.5 0 48.1 21.7 48.1 48.1 0.1 26.4-21.6 48.1-48.1 48.1z"
|
|
fill="#F7C9A4" p-id="8760"></path>
|
|
<path d="M800.7 959.1V779c0-83.9-81.2-139.5-288.4-139.5-202.6 0-288.4 55.6-288.4 139.5v180.1h576.8z"
|
|
fill="#F2F2F1" p-id="8761"></path>
|
|
<path d="M512.1 549.1c-95.4 0-173.5-55.2-173.5-156.2V258.7c0-101 78.1-183.7 173.5-183.7s173.5 82.7 173.5 183.8v134.1c0 101-78.1 156.2-173.5 156.2z"
|
|
fill="#FFD9B6" p-id="8762"></path>
|
|
<path d="M409 353.3a19.2 23.8 0 1 0 38.4 0 19.2 23.8 0 1 0-38.4 0Z" fill="#694B4B"
|
|
p-id="8763"></path>
|
|
<path d="M576 353.3a19.2 23.8 0 1 0 38.4 0 19.2 23.8 0 1 0-38.4 0Z" fill="#694B4B"
|
|
p-id="8764"></path>
|
|
<path d="M339.6 959.1v-112c0-7.7-6.3-14-14-14s-14 6.3-14 14V959h28zM711.3 959.1v-112c0-7.7-6.3-14-14-14s-14 6.3-14 14V959h28z"
|
|
fill="#E5E5DB" p-id="8765"></path>
|
|
<path d="M577.8 649.5H447.3c-8.6 12.2-8.6 32.2 0 44.5l49.5 70.2c8.6 12.2 22.8 12.2 31.4 0l49.5-70.2c8.7-12.3 8.7-32.3 0.1-44.5z"
|
|
fill="#0AC2FD" p-id="8766"></path>
|
|
<path d="M700.4 82.6h-243c-28.9 0-54 19.7-65.8 48.1-37.5 3.3-63.4 40-63.4 84.2l11.4 119.4H397c2.6 0 4.8-2.2 4.8-4.9v-65.1c0-3.1 2.2-5.7 4.9-5.7l212 20.8c2.7 0 4.9 2.6 4.9 5.7v40.5c0 3.7 2.9 6.7 6.5 6.7l45.4 2h7.1c19.4 0 36.3-230.3 36.3-230.3 1.3-12.5-8.3-21.4-18.5-21.4z"
|
|
fill="#F7CCA5" p-id="8767"></path>
|
|
<path d="M712.1 62.6h-254c-29.3 0-54.7 19.3-66.6 47.2-38 3.3-68.1 39.1-68.1 82.4l14 117.3H379c2.7 0 4.8-2.2 4.8-4.8v-63.8c0-3.1 2.2-5.6 5-5.6l246.8 22.3c2.7 0 5 2.5 5 5.6V303c0 3.6 2.9 6.5 6.6 6.5h46.1c12.3 0 37.6-225.9 37.6-225.9 1.1-12.3-8.5-21-18.8-21z"
|
|
fill="#694B4B" p-id="8768"></path>
|
|
<path d="M511.3 648.5l-36.5 79.4c-6.5 10.3-13.6 21.2-24.1 11.7l-103.4-75.7c-7.9-7.9-15.9-13.9-12.8-23.6l32.3-54.2c3.1-9.7 14-15 24.1-11.7L498.5 625c10.2 3.2 15.9 13.8 12.8 23.5z"
|
|
fill="#E8E8DD" p-id="8769"></path>
|
|
<path d="M513.2 647.9l35.9 79.6c6.4 10.4 13.4 21.3 24.1 11.9l103.9-75c7.9-7.8 16-13.8 12.9-23.5l-21-51.4c-3.1-9.7-13.9-15.1-24.1-11.9L526 624.3c-10 3.3-15.9 13.9-12.8 23.6z"
|
|
fill="#E8E8DD" p-id="8770"></path>
|
|
<path d="M549.3 959.7h-73.9c-7.7 0-14-3-14-6.7l30-206c0-3.7 6.3-6.7 14-6.7h13.9c7.7 0 14 3 14 6.7l30 206c0 3.7-6.3 6.7-14 6.7z"
|
|
fill="#0AC2FD" p-id="8771"></path>
|
|
<path d="M528.3 762.3h-33c-3 0-5.5-2.5-5.5-5.5s2.5-5.5 5.5-5.5h33c3 0 5.5 2.5 5.5 5.5s-2.5 5.5-5.5 5.5z"
|
|
fill="#079FDB" p-id="8772"></path>
|
|
</svg>
|
|
<div class="text-center" style="font-size: 11px">
|
|
男性会员
|
|
<span>
|
|
{{memberNumberMap.maleCount}}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</van-col>
|
|
<van-col span="8">
|
|
<div class="flex-box" style="justify-content: space-between;padding: 15px">
|
|
<svg t="1634178064546" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg" p-id="8382" width="32" height="32">
|
|
<path d="M668.501333 761.685333h-2.048a97.621333 97.621333 0 0 1-97.621333-97.621333v-43.52h-109.397333v43.52a97.621333 97.621333 0 0 1-97.621334 97.621333h-6.314666a136.533333 136.533333 0 0 0-136.533334 136.533334v29.013333h586.069334v-29.013333a136.533333 136.533333 0 0 0-136.533334-136.533334z"
|
|
fill="#FFE3BA" p-id="8383"></path>
|
|
<path d="M427.690667 735.914667a180.224 180.224 0 0 0 170.666666-1.365334 96.938667 96.938667 0 0 1-30.208-70.485333v-43.52h-108.714666v43.52a96.938667 96.938667 0 0 1-31.744 71.850667zM805.034667 870.4a232.106667 232.106667 0 0 1-93.525334 19.626667H312.490667A232.106667 232.106667 0 0 1 218.965333 870.4v56.149333h586.069334V870.4z"
|
|
fill="#FFC670" p-id="8384"></path>
|
|
<path d="M512 108.032a254.805333 254.805333 0 0 1 254.805333 254.976v265.898667a38.229333 38.229333 0 0 1-38.229333 38.229333H295.424a38.229333 38.229333 0 0 1-38.229333-38.229333V363.008A254.805333 254.805333 0 0 1 512 108.032z"
|
|
fill="#FFC670" p-id="8385"></path>
|
|
<path d="M512 552.106667a529.066667 529.066667 0 0 1-254.805333-63.488v140.288a38.229333 38.229333 0 0 0 38.229333 38.229333h433.152a38.229333 38.229333 0 0 0 38.229333-38.229333v-140.288A529.066667 529.066667 0 0 1 512 552.106667z"
|
|
fill="#FFB038" p-id="8386"></path>
|
|
<path d="M694.101333 304.64v221.866667A182.101333 182.101333 0 0 1 512 708.608a182.101333 182.101333 0 0 1-182.101333-182.101333v-149.674667a131.072 131.072 0 0 0 184.32-119.466667 131.242667 131.242667 0 0 0 113.834666 65.877334 129.706667 129.706667 0 0 0 66.048-17.92z"
|
|
fill="#FFF6E6" p-id="8387"></path>
|
|
<path d="M638.122667 321.706667v204.8a182.101333 182.101333 0 0 1-153.6 179.712 189.610667 189.610667 0 0 0 27.989333 2.389333 182.101333 182.101333 0 0 0 181.589333-182.101333v-221.866667a130.389333 130.389333 0 0 1-55.978666 17.066667z"
|
|
fill="#FFE3BA" p-id="8388"></path>
|
|
<path d="M666.453333 750.933333H648.533333c0 73.557333-59.562667 116.053333-133.12 116.053334h-7.850666c-73.557333 0-133.12-42.496-133.12-116.053334H358.4a136.533333 136.533333 0 0 0-58.538667 13.141334v163.328h426.666667v-163.498667a136.533333 136.533333 0 0 0-60.074667-12.970667z"
|
|
fill="#F6716F" p-id="8389"></path>
|
|
<path d="M724.992 870.4A232.106667 232.106667 0 0 1 631.466667 890.709333H392.533333A232.106667 232.106667 0 0 1 299.008 870.4v56.149333h426.666667V870.4z"
|
|
fill="#F0504D" p-id="8390"></path>
|
|
<path d="M593.92 107.52a36.864 36.864 0 0 0 5.973333 57.002667l69.12 45.397333 27.306667-27.306667-45.397333-69.290666a37.034667 37.034667 0 0 0-57.002667-5.802667zM770.901333 285.354667a36.864 36.864 0 0 0-5.802666-57.002667l-68.266667-45.397333-27.306667 27.306666 45.397334 69.12a36.693333 36.693333 0 0 0 55.978666 5.973334z"
|
|
fill="#F6716F" p-id="8391"></path>
|
|
<path d="M631.466667 201.250133l55.381333-55.3984 46.08 46.097067-55.381333 55.3984z" fill="#FCFEFF"
|
|
p-id="8392"></path>
|
|
<path d="M877.397333 910.165333h-55.296v-11.946666a153.6 153.6 0 0 0-80.042666-134.485334 17.066667 17.066667 0 0 0-9.898667-15.36 153.6 153.6 0 0 0-65.706667-14.506666H648.533333a17.066667 17.066667 0 0 0-12.117333 5.12A81.92 81.92 0 0 1 597.333333 705.877333a212.992 212.992 0 0 0 35.328-21.674666h95.402667a55.466667 55.466667 0 0 0 55.296-55.296V363.008a277.504 277.504 0 0 0-6.826667-60.757333c2.048-1.536 4.096-3.072 5.973334-4.778667a54.101333 54.101333 0 0 0-8.533334-83.456l-25.429333-17.066667a17.066667 17.066667 0 0 0-4.096-17.066666L699.733333 133.802667a17.066667 17.066667 0 0 0-17.066666-4.096l-17.066667-25.6a53.930667 53.930667 0 0 0-83.285333-8.704 38.058667 38.058667 0 0 0-3.242667 4.096 271.189333 271.189333 0 0 0-338.944 263.509333v265.898667a55.466667 55.466667 0 0 0 55.296 55.296h95.402667a199.509333 199.509333 0 0 0 38.570666 23.210666 80.042667 80.042667 0 0 1-41.472 32.597334A17.066667 17.066667 0 0 0 375.466667 733.866667h-17.066667a153.6 153.6 0 0 0-65.706667 14.677333 17.066667 17.066667 0 0 0-9.898666 15.530667v2.218666a145.408 145.408 0 0 0-80.042667 129.365334v14.677333H146.602667a17.066667 17.066667 0 0 0 0 34.133333h730.794666a17.066667 17.066667 0 0 0 0-34.133333z m-595.456 0h-47.786666v-14.677333a112.64 112.64 0 0 1 47.786666-91.818667z m473.770667-667.477333a18.944 18.944 0 0 1 8.874667 14.506667 20.48 20.48 0 0 1-21.674667 21.845333 20.309333 20.309333 0 0 1-14.677333-8.874667l-19.456-29.696 17.066666-17.066666z m-68.266667-72.533333l22.016 22.016-31.914666 31.232-22.016-22.016z m-64.682666-56.32a20.650667 20.650667 0 0 1 14.677333 8.874666l19.456 29.696-17.066667 17.066667L609.28 150.186667a18.944 18.944 0 0 1-8.874667-13.653334 20.309333 20.309333 0 0 1 21.674667-22.698666zM295.424 650.069333a21.162667 21.162667 0 0 1-21.162667-21.162666V363.008A238.933333 238.933333 0 0 1 512 125.098667a242.346667 242.346667 0 0 1 54.442667 6.485333 55.125333 55.125333 0 0 0 0 7.509333 53.418667 53.418667 0 0 0 24.064 39.594667l25.088 17.066667a17.066667 17.066667 0 0 0 3.754666 18.090666L665.6 259.584a17.066667 17.066667 0 0 0 17.066667 3.925333l17.066666 25.258667a53.248 53.248 0 0 0 39.594667 24.064 25.6 25.6 0 0 0 5.12 0 233.984 233.984 0 0 1 5.290667 50.176v265.898667a21.162667 21.162667 0 0 1-21.162667 21.162666h-60.586667a198.656 198.656 0 0 0 43.178667-123.562666V313.002667a17.066667 17.066667 0 0 0-8.704-14.677334 17.066667 17.066667 0 0 0-17.066667 0A114.005333 114.005333 0 0 1 529.066667 256a17.066667 17.066667 0 0 0-31.914667 8.874667 114.176 114.176 0 0 1-160.256 104.448 17.066667 17.066667 0 0 0-24.064 15.530666v141.141334a198.656 198.656 0 0 0 43.178667 123.562666z m51.2-123.562666V409.6a150.698667 150.698667 0 0 0 36.010667 4.437333A148.138667 148.138667 0 0 0 525.312 307.2a148.821333 148.821333 0 0 0 102.4 41.301333 144.896 144.896 0 0 0 48.981333-8.362666v187.733333a165.034667 165.034667 0 0 1-330.069333 0z m115.2 192.682666a199.338667 199.338667 0 0 0 49.834667 6.485334 191.829333 191.829333 0 0 0 53.589333-7.68 115.712 115.712 0 0 0 64.170667 54.613333c-11.093333 53.077333-62.634667 77.141333-113.834667 77.141333h-7.850667c-51.2 0-102.4-23.722667-113.493333-75.946666a115.029333 115.029333 0 0 0 67.925333-54.613334z m245.76 190.976h-392.533333v-134.826666A119.466667 119.466667 0 0 1 358.4 768c8.362667 68.266667 67.242667 116.053333 149.162667 116.053333h7.850666C597.333333 883.882667 656.725333 836.266667 665.6 768h1.365333a119.466667 119.466667 0 0 1 41.472 7.509333z m80.042667 0h-45.568v-105.813333a119.466667 119.466667 0 0 1 45.909333 93.866667z"
|
|
fill="#3D3D63" p-id="8393"></path>
|
|
<path d="M587.776 586.581333a17.066667 17.066667 0 0 0-31.402667-13.824 48.298667 48.298667 0 0 1-88.746666 0 17.066667 17.066667 0 0 0-31.402667 13.824 82.773333 82.773333 0 0 0 151.552 0zM453.290667 454.826667v-19.797334a17.066667 17.066667 0 0 0-34.133334 0v19.797334a17.066667 17.066667 0 0 0 34.133334 0zM587.776 471.893333a17.066667 17.066667 0 0 0 17.066667-17.066666v-19.797334a17.066667 17.066667 0 1 0-34.133334 0v19.797334a17.066667 17.066667 0 0 0 17.066667 17.066666z"
|
|
fill="#3D3D63" p-id="8394"></path>
|
|
</svg>
|
|
<div class="text-center" style="font-size: 11px">
|
|
女性会员
|
|
<span>
|
|
{{memberNumberMap.femaleCount}}
|
|
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
</van-col>
|
|
</van-row>
|
|
|
|
<div class="chart-card">
|
|
<div class="van-sidebar-item van-sidebar-item--select ml15 p10">
|
|
人员类型
|
|
</div>
|
|
<canvas id="personType" style="width: 100%" height="350"></canvas>
|
|
</div>
|
|
|
|
<div class="chart-card">
|
|
<div class="van-sidebar-item van-sidebar-item--select ml15 p10">
|
|
增长趋势
|
|
</div>
|
|
<canvas id="memberTrend" style="width: 100%" height="350"></canvas>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<script src="https://gw.alipayobjects.com/os/lib/antv/f2/3.7.0/dist/f2.min.js"></script>
|
|
<script>
|
|
const vue = new Vue({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
memberNumberMap: {}
|
|
}
|
|
},
|
|
methods: {
|
|
async getMemberNumber() {
|
|
const {data} = await $.get('/mobile/member/dashBoard/memberNumber')
|
|
this.memberNumberMap = data
|
|
},
|
|
async growthTrend() {
|
|
const {data} = await $.get('/mobile/member/dashBoard/growthTrend')
|
|
const chart = new F2.Chart({
|
|
id: 'memberTrend',
|
|
pixelRatio: window.devicePixelRatio
|
|
})
|
|
chart.source(data)
|
|
chart.scale({
|
|
label: {
|
|
range: [ 0, 1 ]
|
|
},
|
|
value: {
|
|
tickCount: 5,
|
|
min: 0
|
|
}
|
|
})
|
|
// chart.axis('label', {
|
|
// label: {
|
|
// rotate: -1,
|
|
// textAlign: 'end',
|
|
// textBaseline: 'middle'
|
|
// }
|
|
// })
|
|
chart.area().position('label*value').color('l(90) 0:#1890FF 1:#f7f7f7').shape('smooth')
|
|
chart.line().position('label*value').color('l(90) 0:#1890FF 1:#f7f7f7').shape('smooth')
|
|
chart.render()
|
|
|
|
|
|
|
|
},
|
|
async getPersonTypeMember() {
|
|
const {data} = await $.get('/platform/member/inquire/board/personTypeMember')
|
|
const chart = new F2.Chart({
|
|
id: 'personType',
|
|
pixelRatio: window.devicePixelRatio
|
|
})
|
|
chart.source(data)
|
|
chart.interval().position('label*value').color('label')
|
|
chart.axis('label', {
|
|
label: {
|
|
rotate: -1,
|
|
textAlign: 'end',
|
|
textBaseline: 'middle'
|
|
}
|
|
})
|
|
chart.render();
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getPersonTypeMember()
|
|
this.getMemberNumber()
|
|
this.growthTrend()
|
|
}
|
|
})
|
|
</script>
|
|
|
|
|
|
<!--#
|
|
}
|
|
#--> |