Skip to content

M
manage
Commit 5fef1d4b by wangyalan-git
Options

登录，首页

parent 3391976e
Showing with 431 additions and 379 deletions
index.html
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="static/favicon.ico" /> <link rel="icon" href="static/favicon.ico" />
<title>权星后台管理</title> <title>万科物资管理平台</title>
<style> <style>
html, html,
body, body,
......
src/assets/images/ic_logo.png
src/assets/images/ic_logo.png

16.9 KB | W: | H:

src/assets/images/ic_logo.png

39.2 KB | W: | H:

src/assets/images/ic_logo.png
src/assets/images/ic_logo.png
src/assets/images/ic_logo.png
src/assets/images/ic_logo.png
  • 2-up
  • Swipe
  • Onion skin
src/icons/svg/delivery.svg 0 → 100644
<?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="1592799142096" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6733" data-spm-anchor-id="a313x.7781069.0.i30" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M392.6 726.9c2.2-55.2 28-325.1 327.6-337V303c-0.4-4.9-0.2-16 7.8-24.8 9.2-10.2 24.3-12.5 41.5-5.3l3.9 1.8 168.4 174.9c3.3 3.7 17.6 20.9 17.6 40.9 0 20.9-17.8 38.7-21.3 42.1L769.5 717.9c-4.3 4.5-14.7 13.5-28.2 13.5-10.4 0-19.8-5.7-24.8-14.9-3.5-6.5-5.1-14.5-5.1-25.4V585.8c-48.5-1.2-190.3 8.4-273 152.4-5.5 9.4-13.9 14.9-23.1 14.9h-8.8l-7.2-6.5c-7.3-7.2-6.9-16.6-6.7-19.7z m312-180.8c18.6 0 30.1 1.6 30.7 1.6l17.8 2.3v125.6L908 505.3c5.5-5.3 10-12.5 10-15.1 0-4.1-4.3-11.1-7.4-14.7l-149-154.7V429h-20.7C527.3 429 461.8 567.9 442 662.5c89.7-103.9 210-116.4 262.6-116.4z m-188-215.3c0-17.2-14.1-31.3-31.3-31.3H253.6c-17.2 0-31.3 14.1-31.3 31.3 0 17.2 14.1 31.3 31.3 31.3h231.8c17.1 0 31.2-14.1 31.2-31.3zM347.8 575.9h-94.3c-17.2 0-31.3 14.1-31.3 31.3 0 17.2 14.1 31.3 31.3 31.3h94.3c17.2 0 31.3-14.1 31.3-31.3 0-17.3-13.9-31.3-31.3-31.3z m56.8-107c0-17.2-14.1-31.3-31.3-31.3H253.6c-17.2 0-31.3 14.1-31.3 31.3 0 17.2 14.1 31.3 31.3 31.3h119.7c17.4 0.2 31.3-13.9 31.3-31.3z m0 0" p-id="6734" data-spm-anchor-id="a313x.7781069.0.i28" class="selected" fill="#409eff"></path><path d="M800 755v45c0 30.5-29.3 55.4-60 55.4H177.5c-30.5 0-55.4-24.8-55.4-55.4V220.9c1.6-29.3 25.6-52.6 55.4-52.6h576.2c29.5 0 53.8 23.3 55.4 52.6v18.6s33.6 51.4 58.1 83.3V220.9c0-12.9-2.3-25.8-6.7-38.1C845 140.3 804.1 110 756.4 110H174.7c-51.6 0-95.1 35.2-107.4 83.1-2.3 9-3.5 18.4-3.5 27.8v581.7c0 61.2 49.7 110.9 110.7 110.9h581.7c56.3 0 102.7-41.9 109.9-96.2 0 0 0.8-146.7-2.1-143.9-75.1 81.6-63.6 81.8-64 81.6z m0 0" p-id="6735" data-spm-anchor-id="a313x.7781069.0.i31" class="selected" fill="#409eff"></path></svg>
\ No newline at end of file
src/icons/svg/inventory.svg 0 → 100644
<?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="1592798938931" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4282" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M832 548.006c0-23.564 19.103-42.667 42.667-42.667s42.666 19.103 42.666 42.667V846.56c0 38.945-31.637 70.435-70.564 70.435H177.231c-38.927 0-70.564-31.49-70.564-70.435V324.08c0-27.701 16.261-52.803 42.113-64.454l295.445-127.8a170.667 170.667 0 0 1 135.554 0.018L875.468 259.84c25.442 11.306 41.865 36.506 41.865 64.347v91.771c0 23.564-19.102 42.667-42.666 42.667-23.564 0-42.667-19.103-42.667-42.667v-81.951L545.88 210.154a85.333 85.333 0 0 0-67.776-0.008L192 333.899v497.764h640V548.006zM295.753 440.687h53.478c14.768 0 26.74 12.646 26.74 28.244v56.488c0 15.598-11.972 28.244-26.74 28.244h-53.478c-14.768 0-26.74-12.646-26.74-28.244V468.93c0-15.598 11.972-28.244 26.74-28.244z m187.175 0h53.478c14.768 0 26.74 12.646 26.74 28.244v56.488c0 15.598-11.972 28.244-26.74 28.244h-53.478c-14.768 0-26.74-12.646-26.74-28.244V468.93c0-15.598 11.972-28.244 26.74-28.244zM295.753 638.394h53.478c14.768 0 26.74 12.645 26.74 28.244v56.487c0 15.6-11.972 28.244-26.74 28.244h-53.478c-14.768 0-26.74-12.645-26.74-28.244v-56.487c0-15.599 11.972-28.244 26.74-28.244z m187.175 0h53.478c14.768 0 26.74 12.645 26.74 28.244v56.487c0 15.6-11.972 28.244-26.74 28.244h-53.478c-14.768 0-26.74-12.645-26.74-28.244v-56.487c0-15.599 11.972-28.244 26.74-28.244z m187.174 0h53.479c14.768 0 26.74 12.645 26.74 28.244v56.487c0 15.6-11.972 28.244-26.74 28.244h-53.479c-14.767 0-26.739-12.645-26.739-28.244v-56.487c0-15.599 11.972-28.244 26.74-28.244z" p-id="4283"></path></svg>
\ No newline at end of file
src/icons/svg/person.svg 0 → 100644
<?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="1592799200925" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6968" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M86.4 824l1-24.6c12.4-65.1 33.7-126.2 74.3-179.9 41.6-55 93.9-95.6 156.4-123.7 8.3-3.7 16.5-7.4 28.1-12.6-30.9-24.6-57.5-50.4-74.2-84.2-42.5-86.3-35.4-168.9 22-245.7C348.1 81 445.8 47.9 532.1 72.6c93.1 26.6 149.2 88.3 168.6 183.6 23.5 115.7-67.6 265.4-230.1 266-114.7 0.4-205.7 52.3-270.9 146.9-44.7 64.9-57.9 138.1-54.5 215.6 0.9 19.7 14.1 14.7 24.5 14.7 111.2 0.2 222.5 0 333.7-0.1 5 0 10.1-0.6 14.9 0.2 17 2.7 27.5 12.8 27 30.1-0.5 17.2-10.9 28.1-28.3 28.8-24.9 1.1-49.8 0.3-74.7 0.3-105.4 0-210.9-0.2-316.3 0.2-17.2 0.1-31.2-3.2-39.2-19.9l-0.4-115z m386.7-361.1c93.1 1.4 172-76.6 171.9-170.1-0.1-92.6-76-168.4-169.9-169.6-91.9-1.2-169.6 76.1-170 168.9-0.4 93.2 74.5 169.4 168 170.8z m0 0" p-id="6969" fill="#409eff"></path><path d="M764.4 956c-33.8 0-67.7 0.2-101.6-0.1-41.6-0.4-69.9-25.3-70.9-67-1.6-71.1-1.5-142.4-0.1-213.5 0.7-36.7 29.8-62.9 66.1-63.3 39-0.4 78.1 0.2 117.2-0.3 14.3-0.2 25 4.7 25.4 19.4 0.4 15.4-9.6 23.1-25.3 23.1-34.7-0.1-69.4 0.5-104.1-0.2-22.6-0.5-33.7 8.1-33.4 32 0.7 64.2 0.6 128.5 0 192.7-0.2 21.7 7.6 31.7 30.5 31.4 64.2-0.8 128.4-0.7 192.7-0.1 22 0.2 31.8-8.6 31.3-30.9-0.8-33.8 0.2-67.7-0.4-101.5-0.3-15.6 6.3-26.5 21.2-27.5 15.3-1 24.5 11.2 24.9 25 1 40.7 2.3 81.7-1.3 122.2-3.3 36.7-31 58-68 58.5-34.7 0.5-69.4 0.1-104.2 0.1z m0 0" p-id="6970" fill="#409eff"></path><path d="M899.4 617.3c15.2-0.4 27 16.6 21 30.6-1.7 4-4.2 7.6-7.2 10.6-63 63.1-126.1 126.2-189.3 189.2-9.3 9.2-20.6 15.2-32.1 4.8-12.8-11.6-6.9-23.7 3-33.9 62.2-63.9 124.5-127.7 187-191.4 4.8-4.8 10-9.7 17.6-9.9z m0 0" p-id="6971" fill="#409eff"></path></svg>
\ No newline at end of file
src/icons/svg/put.svg 0 → 100644
<?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="1592798464785" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1473" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M959.5 776.4c-2.1-55.9-27.1-329.9-317.8-342v-88.1c0.4-5 0.2-16.3-7.6-25.2-9-10.2-23.4-12.6-40.1-5.4l-3.9 1.7-163.2 177.5c-3.3 3.9-17.2 21.2-17.2 41.5 0 21.2 17.2 39.3 20.7 42.7l163.5 188.1c4.2 4.5 14.2 13.7 27.2 13.7 10.1 0 19.1-5.7 24-15.1 3.4-6.5 5-14.7 5-25.7V633.2c47.1-1.2 184.7 8.5 264.9 154.7 5.2 9.5 13.4 15 22.4 15h8.5l6.9-6.6c7.2-7.3 6.8-16.8 6.7-19.9zM656.9 592.9c-18 0-29.2 1.6-29.7 1.6l-17.3 2.5v127.4L459.7 551.6c-5.3-5.4-9.7-12.6-9.8-15.3 0-4.1 4.1-11.4 7.2-15l144.5-157.1-0.1 109.8h20.1c207.1 0 270.6 140.9 289.9 236.9-87-105.2-203.6-118-254.6-118zM523.4 326.8c0-17.5-14.2-31.8-31.8-31.8H267.9c-17.6 0-31.8 14.2-31.8 31.8s14.2 31.8 31.8 31.8h223.8c17.5-0.1 31.7-14.3 31.7-31.8zM352.2 575.4h-84.3c-17.6 0-31.8 14.2-31.8 31.8s14.2 31.8 31.8 31.8h84.3c17.5 0 31.8-14.2 31.8-31.8-0.1-17.5-14.3-31.7-31.8-31.8zM409.7 467c0-17.5-14.2-31.8-31.8-31.8h-110c-17.6 0-31.8 14.2-31.8 31.8s14.2 31.8 31.8 31.8H378c17.5 0 31.7-14.3 31.7-31.8z m0 0" p-id="1474" fill="#409eff"></path><path d="M805.6 747.7c-0.4-0.1-0.9-0.2-1.3-0.3l-4.7 53.6c0 31-29.8 56.2-60.9 56.2H181.3c-31 0-56.2-25.2-56.2-56.2V220.3c0-1 0-1.9 0.1-2.9 1.5-29.7 26.1-53.4 56.2-53.4H762c30.1 0 54.6 23.7 56.2 53.4 0 1 0.1 1.9 0.1 2.9v18.2l4.7 159.3c26.4 17.6 28.2 35.3 56.4 62.1V215.5c0-13.2-2.3-26.3-6.8-38.7C856.8 133.7 815.5 103 767 103H176.5c-52.4 0-96.4 35.8-108.9 84.3-2.4 9.2-3.6 18.6-3.5 28.1v590.3c0 62.1 50.3 112.5 112.4 112.5h168.7v1.1h84.3v-1.1h84.3v1.1h84.3v-1.1h168.7c57.1 0 104.2-42.5 111.5-97.7 0 0-0.7-2.3-2.2-6.1-22.8-37.7-45.3-45.6-70.5-66.7z m0 0" p-id="1475" fill="#409eff"></path></svg>
\ No newline at end of file
src/icons/svg/warn.svg 0 → 100644
<?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="1592798608137" class="icon" viewBox="0 0 1094 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2153" xmlns:xlink="http://www.w3.org/1999/xlink" width="213.671875" height="200"><defs><style type="text/css"></style></defs><path d="M1079.89132 363.781049l-77.980105-53.286648a32.012732 32.012732 0 0 0-10.462343-7.14466L555.653726 5.587677a32.012732 32.012732 0 0 0-36.567271 0.305576L13.503553 364.101177a32.012732 32.012732 0 0 0 37.018359 52.166202l32.303757-22.889104v456.443359a174.382084 174.382084 0 0 0 174.178367 174.178366H836.841926a174.382084 174.382084 0 0 0 174.178366-174.178366V394.265901l32.754846 22.37981A32.012732 32.012732 0 1 0 1079.89132 363.781049zM946.994827 849.792531a110.283863 110.283863 0 0 1-110.152901 110.152902H257.004036a110.283863 110.283863 0 0 1-110.152902-110.152902V348.09481L537.915762 71.024612 946.994827 350.524868z" fill="#409eff" p-id="2154"></path><path d="M514.910248 353.333258v368.233729a32.012732 32.012732 0 0 0 64.025465 0V353.333258a32.012732 32.012732 0 0 0-64.025465 0z" fill="#409eff" p-id="2155"></path><path d="M546.922981 829.318934m-38.924573 0a38.924572 38.924572 0 1 0 77.849145 0 38.924572 38.924572 0 1 0-77.849145 0Z" fill="#409eff" p-id="2156"></path></svg>
\ No newline at end of file
src/views/home/index.vue
<template> <template>
<el-card class="app-container"> <el-card class="app-container">
<div class="total-layout"> <div class="total-layout">
<el-row :gutter="20"> <el-row :gutter="20" type="flex">
<el-col :span="6"> <el-col>
<div class="total-frame"> <div class="total-frame">
<img :src="img_home_order" <svg-icon icon-class="delivery"
class="total-icon"> class="total-icon">
<div class="total-title">今日订单总数</div> </svg-icon>
<div class="total-title">今日出库（件）</div>
<div class="total-value">200</div> <div class="total-value">200</div>
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col>
<div class="total-frame"> <div class="total-frame">
<img :src="img_home_today_amount" <svg-icon icon-class="put"
class="total-icon"> class="total-icon">
<div class="total-title">今日销售总额</div> </svg-icon>
<div class="total-value">￥5000.00</div> <div class="total-title">今日入库（件）</div>
<div class="total-value">5000.00</div>
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col>
<div class="total-frame"> <div class="total-frame">
<img :src="img_home_yesterday_amount" <svg-icon icon-class="warn"
class="total-icon"> class="total-icon">
<div class="total-title">昨日销售总额</div> </svg-icon>
<div class="total-value">￥5000.00</div> <div class="total-title">库存预警</div>
<div class="total-value">￥50000.00</div>
</div> </div>
</el-col> </el-col>
<el-col :span="6"> <el-col>
<div class="total-frame"> <div class="total-frame">
<svg-icon icon-class="total-week" <svg-icon icon-class="person"
class="total-icon"> class="total-icon">
</svg-icon> </svg-icon>
<div class="total-title">近7天销售总额</div> <div class="total-title">今日申领人</div>
<div class="total-value">￥50000.00</div> <div class="total-value">50000.00</div>
</div>
</el-col>
<el-col>
<div class="total-frame">
<svg-icon icon-class="inventory"
class="total-icon">
</svg-icon>
<div class="total-title">剩余库存</div>
<div class="total-value">5000.00</div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<!-- <div class="un-handle-layout">--> <div class="overview-layout">
<!-- <div class="layout-title">待处理事务</div>--> <el-row :gutter="20">
<!-- <div class="un-handle-content">--> <el-col :span="12">
<!-- <el-row :gutter="20">--> <div class="out-border">
<!-- <el-col :span="8">--> <div class="layout-title">出库入库</div>
<!-- <div class="un-handle-item">--> <div style="padding: 10px;border-left:1px solid #DCDFE6">
<!-- <span class="font-medium">待付款订单</span>--> <el-button type="primary" plain>7天</el-button>
<!-- <span style="float: right"--> <el-button plain>15天</el-button>
<!-- class="color-danger">(10)</span>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- <el-col :span="8">-->
<!-- <div class="un-handle-item">-->
<!-- <span class="font-medium">已完成订单</span>-->
<!-- <span style="float: right"-->
<!-- class="color-danger">(10)</span>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- <el-col :span="8">-->
<!-- <div class="un-handle-item">-->
<!-- <span class="font-medium">待确认收货订单</span>-->
<!-- <span style="float: right"-->
<!-- class="color-danger">(10)</span>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- <el-row :gutter="20">-->
<!-- <el-col :span="8">-->
<!-- <div class="un-handle-item">-->
<!-- <span class="font-medium">待发货订单</span>-->
<!-- <span style="float: right"-->
<!-- class="color-danger">(10)</span>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- <el-col :span="8">-->
<!-- <div class="un-handle-item">-->
<!-- <span class="font-medium">新缺货登记</span>-->
<!-- <span style="float: right"-->
<!-- class="color-danger">(10)</span>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- <el-col :span="8">-->
<!-- <div class="un-handle-item">-->
<!-- <span class="font-medium">待处理退款申请</span>-->
<!-- <span style="float: right"-->
<!-- class="color-danger">(10)</span>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- <el-row :gutter="20">-->
<!-- <el-col :span="8">-->
<!-- <div class="un-handle-item">-->
<!-- <span class="font-medium">已发货订单</span>-->
<!-- <span style="float: right"-->
<!-- class="color-danger">(10)</span>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- <el-col :span="8">-->
<!-- <div class="un-handle-item">-->
<!-- <span class="font-medium">待处理退货订单</span>-->
<!-- <span style="float: right"-->
<!-- class="color-danger">(10)</span>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- <el-col :span="8">-->
<!-- <div class="un-handle-item">-->
<!-- <span class="font-medium">广告位即将到期</span>-->
<!-- <span style="float: right"-->
<!-- class="color-danger">(10)</span>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="overview-layout">-->
<!-- <el-row :gutter="20">-->
<!-- <el-col :span="12">-->
<!-- <div class="out-border">-->
<!-- <div class="layout-title">商品总览</div>-->
<!-- <div style="padding: 40px">-->
<!-- <el-row>-->
<!-- <el-col :span="6"-->
<!-- class="color-danger overview-item-value">100</el-col>-->
<!-- <el-col :span="6"-->
<!-- class="color-danger overview-item-value">400</el-col>-->
<!-- <el-col :span="6"-->
<!-- class="color-danger overview-item-value">50</el-col>-->
<!-- <el-col :span="6"-->
<!-- class="color-danger overview-item-value">500</el-col>-->
<!-- </el-row>-->
<!-- <el-row class="font-medium">-->
<!-- <el-col :span="6"-->
<!-- class="overview-item-title">已下架</el-col>-->
<!-- <el-col :span="6"-->
<!-- class="overview-item-title">已上架</el-col>-->
<!-- <el-col :span="6"-->
<!-- class="overview-item-title">库存紧张</el-col>-->
<!-- <el-col :span="6"-->
<!-- class="overview-item-title">全部商品</el-col>-->
<!-- </el-row>-->
<!-- </div>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- <el-col :span="12">-->
<!-- <div class="out-border">-->
<!-- <div class="layout-title">用户总览</div>-->
<!-- <div style="padding: 40px">-->
<!-- <el-row>-->
<!-- <el-col :span="6"-->
<!-- class="color-danger overview-item-value">100</el-col>-->
<!-- <el-col :span="6"-->
<!-- class="color-danger overview-item-value">200</el-col>-->
<!-- <el-col :span="6"-->
<!-- class="color-danger overview-item-value">1000</el-col>-->
<!-- <el-col :span="6"-->
<!-- class="color-danger overview-item-value">5000</el-col>-->
<!-- </el-row>-->
<!-- <el-row class="font-medium">-->
<!-- <el-col :span="6"-->
<!-- class="overview-item-title">今日新增</el-col>-->
<!-- <el-col :span="6"-->
<!-- class="overview-item-title">昨日新增</el-col>-->
<!-- <el-col :span="6"-->
<!-- class="overview-item-title">本月新增</el-col>-->
<!-- <el-col :span="6"-->
<!-- class="overview-item-title">会员总数</el-col>-->
<!-- </el-row>-->
<!-- </div>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- </div>-->
<div class="statistics-layout">
<div class="layout-title">订单统计</div>
<el-row>
<el-col :span="4">
<div style="padding: 20px">
<div>
<div style="color: #909399;font-size: 14px">本月订单总数</div>
<div style="color: #606266;font-size: 24px;padding: 10px 0">10000</div>
<div> <div>
<span class="color-success" <ve-line :data="chartData"
style="font-size: 14px">+10%</span> :legend-visible="false"
<span style="color: #C0C4CC;font-size: 14px">同比上月</span> :loading="loading"
:data-empty="dataEmpty"
:settings="chartSettings"></ve-line>
</div> </div>
</div> </div>
<div style="margin-top: 20px;"> </div>
<div style="color: #909399;font-size: 14px">本周订单总数</div> </el-col>
<div style="color: #606266;font-size: 24px;padding: 10px 0">1000</div> <el-col :span="12">
<div> <div class="out-border">
<span class="color-danger" <div class="layout-title">库存预警</div>
style="font-size: 14px">-10%</span> <div style="padding: 40px">
<span style="color: #C0C4CC;font-size: 14px">同比上周</span> <el-table
</div> :data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</div> </div>
<div style="margin-top: 20px;"> </div>
<div style="color: #909399;font-size: 14px">本月销售总额</div> </el-col>
<div style="color: #606266;font-size: 24px;padding: 10px 0">100000</div> </el-row>
</div>
<div class="overview-layout">
<el-row :gutter="20">
<el-col :span="8">
<div class="out-border">
<div class="layout-title">领取物品类别分布</div>
<div style="padding: 10px;border-left:1px solid #DCDFE6">
<el-button type="primary" plain>昨天</el-button>
<el-button type="primary" plain>7天</el-button>
<el-button plain>15天</el-button>
<div> <div>
<span class="color-success" <ve-pie :data="chartData1" :settings="chartSettings1"></ve-pie>
style="font-size: 14px">+10%</span>
<span style="color: #C0C4CC;font-size: 14px">同比上月</span>
</div> </div>
</div> </div>
<div style="margin-top: 20px;"> </div>
<div style="color: #909399;font-size: 14px">本周销售总额</div> </el-col>
<div style="color: #606266;font-size: 24px;padding: 10px 0">50000</div> <el-col :span="8">
<div class="out-border">
<div class="layout-title">入库物品类别分布</div>
<div style="padding: 10px;border-left:1px solid #DCDFE6">
<el-button type="primary" plain>昨天</el-button>
<el-button type="primary" plain>7天</el-button>
<el-button plain>15天</el-button>
<div> <div>
<span class="color-danger" <ve-pie :data="chartData1" :settings="chartSettings1"></ve-pie>
style="font-size: 14px">-10%</span>
<span style="color: #C0C4CC;font-size: 14px">同比上周</span>
</div> </div>
</div> </div>
</div> </div>
</el-col> </el-col>
<el-col :span="20"> <el-col :span="8">
<div style="padding: 10px;border-left:1px solid #DCDFE6"> <div class="out-border">
<el-date-picker style="float: right;z-index: 1" <div class="layout-title">申领人部门分布</div>
size="small" <div style="padding: 10px;border-left:1px solid #DCDFE6">
v-model="orderCountDate" <el-button type="primary" plain>昨天</el-button>
type="daterange" <el-button type="primary" plain>7天</el-button>
align="right" <el-button plain>15天</el-button>
unlink-panels <div>
range-separator="至" <ve-pie :data="chartData1" :settings="chartSettings1"></ve-pie>
start-placeholder="开始日期" </div>
end-placeholder="结束日期"
@change="handleDateChange"
:picker-options="pickerOptions">
</el-date-picker>
<div>
<ve-line :data="chartData"
:legend-visible="false"
:loading="loading"
:data-empty="dataEmpty"
:settings="chartSettings"></ve-line>
</div> </div>
</div> </div>
</el-col> </el-col>
...@@ -241,10 +141,8 @@ ...@@ -241,10 +141,8 @@
</template> </template>
<script> <script>
import { str2Date } from '@/utils/date'; import { str2Date } from '@/utils/date'
import img_home_order from '@/assets/images/home_order.png';
import img_home_today_amount from '@/assets/images/home_today_amount.png';
import img_home_yesterday_amount from '@/assets/images/home_yesterday_amount.png';
const DATA_FROM_BACKEND = { const DATA_FROM_BACKEND = {
columns: ['date', 'orderCount', 'orderAmount'], columns: ['date', 'orderCount', 'orderAmount'],
rows: [ rows: [
...@@ -264,33 +162,77 @@ const DATA_FROM_BACKEND = { ...@@ -264,33 +162,77 @@ const DATA_FROM_BACKEND = {
{ date: '2018-11-14', orderCount: 10, orderAmount: 1293 }, { date: '2018-11-14', orderCount: 10, orderAmount: 1293 },
{ date: '2018-11-15', orderCount: 40, orderAmount: 4293 } { date: '2018-11-15', orderCount: 40, orderAmount: 4293 }
] ]
}; }
export default { export default {
name: 'home', name: 'home',
data () { data() {
return { return {
chartData1: {
columns: ['日期', '访问用户'],
rows: [
{ '日期': '1/1', '访问用户': 1393 },
{ '日期': '1/2', '访问用户': 3530 },
{ '日期': '1/3', '访问用户': 2923 },
{ '日期': '1/4', '访问用户': 1723 },
{ '日期': '1/5', '访问用户': 3792 },
{ '日期': '1/6', '访问用户': 4593 }
]
},
chartSettings1:{
dimension: '日期',
metrics: '访问用户'
},
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
pickerOptions: { pickerOptions: {
shortcuts: [{ shortcuts: [{
text: '最近一周', text: '最近一周',
onClick (picker) { onClick(picker) {
const end = new Date(); const end = new Date()
let start = new Date(); let start = new Date()
start.setFullYear(2018); start.setFullYear(2018)
start.setMonth(10); start.setMonth(10)
start.setDate(1); start.setDate(1)
end.setTime(start.getTime() + 3600 * 1000 * 24 * 7); end.setTime(start.getTime() + 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end]); picker.$emit('pick', [start, end])
} }
}, { }, {
text: '最近一月', text: '最近一月',
onClick (picker) { onClick(picker) {
const end = new Date(); const end = new Date()
let start = new Date(); let start = new Date()
start.setFullYear(2018); start.setFullYear(2018)
start.setMonth(10); start.setMonth(10)
start.setDate(1); start.setDate(1)
end.setTime(start.getTime() + 3600 * 1000 * 24 * 30); end.setTime(start.getTime() + 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end]); picker.$emit('pick', [start, end])
} }
}] }]
}, },
...@@ -299,51 +241,49 @@ export default { ...@@ -299,51 +241,49 @@ export default {
xAxisType: 'time', xAxisType: 'time',
area: true, area: true,
axisSite: { right: ['orderAmount'] }, axisSite: { right: ['orderAmount'] },
labelMap: { 'orderCount': '订单数量', 'orderAmount': '订单金额' } }, labelMap: { 'orderCount': '订单数量', 'orderAmount': '订单金额' }
},
chartData: { chartData: {
columns: [], columns: [],
rows: [] rows: []
}, },
loading: false, loading: false,
dataEmpty: false, dataEmpty: false
img_home_order,
img_home_today_amount,
img_home_yesterday_amount
} }
}, },
created () { created() {
this.initOrderCountDate(); this.initOrderCountDate()
this.getData(); this.getData()
}, },
methods: { methods: {
handleDateChange () { handleDateChange() {
this.getData(); this.getData()
}, },
initOrderCountDate () { initOrderCountDate() {
let start = new Date(); let start = new Date()
start.setFullYear(2018); start.setFullYear(2018)
start.setMonth(10); start.setMonth(10)
start.setDate(1); start.setDate(1)
const end = new Date(); const end = new Date()
end.setTime(start.getTime() + 1000 * 60 * 60 * 24 * 7); end.setTime(start.getTime() + 1000 * 60 * 60 * 24 * 7)
this.orderCountDate = [start, end]; this.orderCountDate = [start, end]
}, },
getData () { getData() {
setTimeout(() => { setTimeout(() => {
this.chartData = { this.chartData = {
columns: ['date', 'orderCount', 'orderAmount'], columns: ['date', 'orderCount', 'orderAmount'],
rows: [] rows: []
}; }
for (let i = 0; i < DATA_FROM_BACKEND.rows.length; i++) { for (let i = 0; i < DATA_FROM_BACKEND.rows.length; i++) {
let item = DATA_FROM_BACKEND.rows[i]; let item = DATA_FROM_BACKEND.rows[i]
let currDate = str2Date(item.date); let currDate = str2Date(item.date)
let start = this.orderCountDate[0]; let start = this.orderCountDate[0]
let end = this.orderCountDate[1]; let end = this.orderCountDate[1]
if (currDate.getTime() >= start.getTime() && currDate.getTime() <= end.getTime()) { if (currDate.getTime() >= start.getTime() && currDate.getTime() <= end.getTime()) {
this.chartData.rows.push(item); this.chartData.rows.push(item)
} }
} }
this.dataEmpty = false; this.dataEmpty = false
this.loading = false this.loading = false
}, 1000) }, 1000)
} }
...@@ -352,95 +292,97 @@ export default { ...@@ -352,95 +292,97 @@ export default {
</script> </script>
<style scoped> <style scoped>
.app-container { .app-container {
margin: 10px; margin: 10px;
overflow: hidden; overflow: hidden;
} }
.total-layout { .total-layout {
margin-top: 0px; margin-top: 0px;
} }
.total-frame { .total-frame {
border: 1px solid #dcdfe6; border: 1px solid #dcdfe6;
padding: 20px; padding: 20px;
height: 100px; height: 100px;
} }
.total-icon { .total-icon {
color: #409eff; color: #409eff;
width: 60px !important; width: 60px !important;
height: 60px !important; height: 60px !important;
} }
.total-title { .total-title {
position: relative; position: relative;
font-size: 16px; font-size: 16px;
color: #909399; color: #909399;
left: 70px; left: 70px;
top: -50px; top: -50px;
} }
.total-value { .total-value {
position: relative; position: relative;
font-size: 18px; font-size: 18px;
color: #606266; color: #606266;
left: 70px; left: 70px;
top: -40px; top: -40px;
} }
.un-handle-layout { .un-handle-layout {
margin-top: 20px; margin-top: 20px;
border: 1px solid #dcdfe6; border: 1px solid #dcdfe6;
} }
.layout-title { .layout-title {
color: #606266; color: #606266;
padding: 15px 20px; padding: 15px 20px;
background: #f2f6fc; background: #f2f6fc;
font-weight: bold; font-weight: bold;
} }
.un-handle-content { .un-handle-content {
padding: 20px 40px; padding: 20px 40px;
} }
.un-handle-item { .un-handle-item {
border-bottom: 1px solid #ebeef5; border-bottom: 1px solid #ebeef5;
padding: 10px; padding: 10px;
} }
.overview-layout { .overview-layout {
margin-top: 20px; margin-top: 20px;
} }
.overview-item-value { .overview-item-value {
font-size: 24px; font-size: 24px;
text-align: center; text-align: center;
} }
.overview-item-title { .overview-item-title {
margin-top: 10px; margin-top: 10px;
text-align: center; text-align: center;
} }
.out-border { .out-border {
border: 1px solid #dcdfe6; border: 1px solid #dcdfe6;
} }
.statistics-layout { .statistics-layout {
margin-top: 20px; margin-top: 20px;
border: 1px solid #dcdfe6; border: 1px solid #dcdfe6;
} }
.mine-layout {
position: absolute; .mine-layout {
right: 140px; position: absolute;
top: 107px; right: 140px;
width: 250px; top: 107px;
height: 235px; width: 250px;
} height: 235px;
.address-content { }
padding: 20px;
font-size: 18px; .address-content {
} padding: 20px;
font-size: 18px;
}
</style> </style>
src/views/inv/stockAdmin.vue 0 → 100644
<template>
<div>
</div>
</template>
<script>
export default {
name: 'index',
components: {},
data() {
return {}
},
mounted() {
},
methods: {}
}
</script>
<style lang='scss' scoped>
</style>
src/views/login/index.vue
<template> <template>
<div> <div>
<top-nav /> <top-nav/>
<div class="container"> <div class="container">
<img class="bg-img" <img class="bg-img"
src="@/assets/images/bg_login.png" /> src="@/assets/images/bg_login.png"/>
<el-card class="login-form-layout"> <el-card class="login-form-layout">
<div class="login-title">密码登录</div> <div class="login-title">账号登录</div>
<el-form autoComplete="on" <el-form autoComplete="on"
:model="loginForm" :model="loginForm"
:rules="loginRules" :rules="loginRules"
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
autoComplete="on" autoComplete="on"
placeholder="请输入用户名"> placeholder="请输入用户名">
<span slot="prefix"> <span slot="prefix">
<i class="el-icon-user-solid" /> <i class="el-icon-user-solid"/>
<el-divider direction="vertical"></el-divider> <el-divider direction="vertical"></el-divider>
</span> </span>
</el-input> </el-input>
...@@ -41,17 +41,34 @@ ...@@ -41,17 +41,34 @@
</span> --> </span> -->
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-row :gutter="20">
<el-col :span="16">
<el-form-item prop="VerificationCode">
       
<el-input type="text" v-model="loginForm.VerificationCode" auto-complete="off"
placeholder="请输入验证码"></el-input>
     
</el-form-item>
</el-col>
<el-col :span="8">
<div class="ValidCode disabled-select" :style="`width:${width}; height:${height}`" @click="refreshCode"
style="border: 1px solid #DCDFE6;float: right;border-radius: 4px;">
<span v-for="(item, index) in codeList" :key="index" :style="getStyle(item)">{{item.code}}</span>
</div>
</el-col>
</el-row>
<el-form-item> <el-form-item>
<el-button type="danger" <el-button type="danger"
style="width: 100%;" style="width: 100%;"
:loading="loading" :loading="loading"
@click.native.prevent="handleLogin">登录</el-button> @click.native.prevent="handleLogin">登录
</el-button>
</el-form-item> </el-form-item>
<el-link @click="forgetPwd">忘记密码</el-link> <el-link @click="forgetPwd">忘记密码</el-link>
</el-form> </el-form>
</el-card> </el-card>
</div> </div>
<bottom-footer /> <bottom-footer/>
</div> </div>
</template> </template>
...@@ -66,60 +83,121 @@ export default { ...@@ -66,60 +83,121 @@ export default {
TopNav, TopNav,
BottomFooter BottomFooter
}, },
data () { props: {
width: {
type: String,
default: '80px'
},
height: {
type: String,
default: '38px'
},
length: {
type: Number,
default: 4
}
},
data() {
const validateUsername = (rule, value, callback) => { const validateUsername = (rule, value, callback) => {
if (!value) { if (!value) {
callback(new Error('请输入正确的用户名')) callback(new Error('请输入正确的用户名'))
} else { } else {
callback() callback()
} }
}; }
const validatePass = (rule, value, callback) => { const validatePass = (rule, value, callback) => {
if (value.length < 3) { if (value.length < 3) {
callback(new Error('密码不能小于3位')) callback(new Error('密码不能小于3位'))
} else { } else {
callback() callback()
} }
}; }
const validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入验证码'))
} else if (value !== this.codeList.map(item => item.code).join('')) {
callback(new Error('请输入正确的验证码!'))
} else {
callback()
}
}
return { return {
codeList: [],
loginForm: { loginForm: {
username: '', username: '',
password: '', password: '',
VerificationCode: ''
}, },
loginRules: { loginRules: {
username: [{ required: true, trigger: 'blur', validator: validateUsername }], username: [{ required: true, trigger: 'blur', validator: validateUsername }],
password: [{ required: true, trigger: 'blur', validator: validatePass }] password: [{ required: true, trigger: 'blur', validator: validatePass }],
VerificationCode: [{ validator: validatePass2, trigger: 'blur' }],
}, },
loading: false, loading: false,
pwdType: 'password' pwdType:
'password'
} }
}, },
created () { created() {
let username = getCookie("username") let username = getCookie('username')
let password = getCookie("password") let password = getCookie('password')
if (username) { if (username) {
this.loginForm.username = username this.loginForm.username = username
} }
if (password) { if (password) {
this.loginForm.password = password this.loginForm.password = password
} }
this.createdCode()
}, },
methods: { methods: {
showPwd () { refreshCode() {
this.createdCode()
},
createdCode() {
let len = this.length,
codeList = [],
chars = 'ABCDEFGHJKMNPQRSTWXYZ0123456789',
charsLen = chars.length
// 生成
for (let i = 0; i < len; i++) {
let rgb = [Math.round(Math.random() * 220), Math.round(Math.random() * 240), Math.round(Math.random() * 200)]
codeList.push({
code: chars.charAt(Math.floor(Math.random() * charsLen)),
color: `rgb(${rgb})`,
fontSize: `1${[Math.floor(Math.random() * 10)]}px`,
padding: `${[Math.floor(Math.random() * 10)]}px`,
transform: `rotate(${Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)}deg)`
})
}
// 指向
// this.codeList = codeList
this.codeList.splice(0,this.codeList.length,codeList);
codeList.forEach((item,index)=>{
this.codeList.splice(index,1,item)
})
console.log('this.codeList',this.codeList)
// 将当前数据派发出去
this.$emit('update:value', codeList.map(item => item.code).join(''))
console.log(codeList.map(item => item.code).join(''))
},
getStyle(data) {
return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`
},
showPwd() {
if (this.pwdType === 'password') { if (this.pwdType === 'password') {
this.pwdType = '' this.pwdType = ''
} else { } else {
this.pwdType = 'password' this.pwdType = 'password'
} }
}, },
handleLogin () { handleLogin() {
this.$refs.loginForm.validate(valid => { this.$refs.loginForm.validate(valid => {
if (valid) { if (valid) {
this.loading = true this.loading = true
this.$store.dispatch('Login', this.loginForm).then(() => { this.$store.dispatch('Login', this.loginForm).then(() => {
this.loading = false this.loading = false
setCookie("username", this.loginForm.username, 15) setCookie('username', this.loginForm.username, 15)
setCookie("password", this.loginForm.password, 15) setCookie('password', this.loginForm.password, 15)
this.$router.push({ path: '/' }) this.$router.push({ path: '/' })
}).catch(() => { }).catch(() => {
this.loading = false this.loading = false
...@@ -130,7 +208,7 @@ export default { ...@@ -130,7 +208,7 @@ export default {
} }
}) })
}, },
forgetPwd () { forgetPwd() {
this.$router.push('/forget') this.$router.push('/forget')
} }
} }
...@@ -138,40 +216,40 @@ export default { ...@@ -138,40 +216,40 @@ export default {
</script> </script>
<style scoped> <style scoped>
.container { .container {
position: relative; position: relative;
height: calc(100vh - 196px); height: calc(100vh - 196px);
min-height: 36.5vw; min-height: 36.5vw;
background-color: #b70b30; background-color: #b70b30;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
} }
.container .bg-img { .container .bg-img {
position: absolute; position: absolute;
z-index: 0; z-index: 0;
left: 4.5vw; left: 4.5vw;
bottom: 0; bottom: 0;
height: 32.87vw; height: 32.87vw;
} }
.login-form-layout { .login-form-layout {
width: 320px; width: 370px;
padding: 20px; padding: 20px;
z-index: 9; z-index: 9;
margin-right: 12.87vw; margin-right: 12.87vw;
} }
.login-title { .login-title {
color: #e12d1a; color: #e12d1a;
font-size: 17px; font-size: 17px;
font-weight: bold; font-weight: bold;
margin-bottom: 20px; margin-bottom: 20px;
} }
.login-form-layout .el-input .el-divider { .login-form-layout .el-input .el-divider {
margin: 0; margin: 0;
} }
</style> </style>
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