Commit 6f366395 authored by hangjun83's avatar hangjun83

前端更新

parent af574bbc
// 统一请求路径前缀在libs/axios.js中修改
import { getRequest, getNoAuthRequest, postNoAuthRequest, postRequest, putRequest } from '@/libs/axios';
// 认证
export const siteInfo = (id, params) => {
return getNoAuthRequest('/oauth2/info/' + id, params)
}
// 认证
export const authorize = (params) => {
return postNoAuthRequest('/oauth2/authorize', params)
}
// 认证过
export const authorized = (params) => {
return postRequest('/oauth2/authorized', params)
}
// 获取token
export const token = (params) => {
return getNoAuthRequest('/oauth2/token', params)
}
// 获取随机secretKey
export const getSecretKey = (params) => {
return getRequest('/client/getSecretKey', params)
}
// 获取客户端
export const getClientDataList = (params) => {
return getRequest('/client/getByCondition', params)
}
// 添加客户端
export const addClient = (params) => {
return postRequest('/client/save', params)
}
// 编辑客户端
export const updateClient = (params) => {
return putRequest('/client/update', params)
}
// 删除客户端
export const deleteClient = (params) => {
return postRequest('/client/delByIds', params)
}
\ No newline at end of file
...@@ -28,14 +28,14 @@ export const loginRouter = { ...@@ -28,14 +28,14 @@ export const loginRouter = {
component: () => import('@/views/regist-result.vue') component: () => import('@/views/regist-result.vue')
};*/ };*/
export const authorizeRouter = { /*export const authorizeRouter = {
path: '/authorize', path: '/authorize',
name: 'authorize', name: 'authorize',
meta: { meta: {
title: 'XBoot统一认证平台 - X-Boot前后端分离开发平台 ' title: 'XBoot统一认证平台 - X-Boot前后端分离开发平台 '
}, },
component: () => import('@/views/authorize.vue') component: () => import('@/views/authorize.vue')
}; };*/
// export const page404 = { // export const page404 = {
// path: '/*', // path: '/*',
...@@ -83,7 +83,6 @@ export const appRouter = []; ...@@ -83,7 +83,6 @@ export const appRouter = [];
// 所有上面定义的路由都要写在下面的routers里 // 所有上面定义的路由都要写在下面的routers里
export const routers = [ export const routers = [
loginRouter, loginRouter,
authorizeRouter,
otherRouter, otherRouter,
...appRouter, ...appRouter,
page500, page500,
......
...@@ -45,11 +45,7 @@ ...@@ -45,11 +45,7 @@
<div class="header-left"> <div class="header-left">
<!-- 固定图标 --> <!-- 固定图标 -->
<div v-if="fixNav && showLogo" style="width: 220px" class="fix-logo"> <div v-if="fixNav && showLogo" style="width: 220px" class="fix-logo">
<img <span style='font-size:22px;font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;'>System</span>
src="@/assets/logo-black.png"
v-if="navTheme == 'light' && mainTheme != 'darkMode'"
/>
<img src="@/assets/logo-white.png" key="max-logo" v-else />
</div> </div>
<!-- 收缩图标 --> <!-- 收缩图标 -->
<div <div
......
.authorize {
height: 100%;
background: url('../assets/background.svg');
background-color: #f0f2f5;
.other-thing {
margin-top: 3vh;
}
.ivu-tabs-nav-container {
line-height: 2;
font-size: 17px;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
position: relative;
zoom: 1;
}
.form {
padding-top: 1vh;
.input-verify {
width: 70%;
}
}
.code-image {
.ivu-spin-fix .ivu-spin-main {
height: 20px;
}
}
.back,
.forget-pass,
.other-way {
font-size: 14px;
}
.icons {
display: flex;
align-items: center;
}
.other-icon {
cursor: pointer;
margin-left: 10px;
display: flex;
align-items: center;
color: rgba(0, 0, 0, .2);
:hover {
color: #2d8cf0;
}
}
.layout {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.logos-wrap {
margin-top: 8vh;
margin-bottom: 5vh;
display: flex;
flex-direction: column;
align-items: center;
.logos {
width: 300px;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
.site-logo {
box-shadow: 0 1px 5px rgba(27, 31, 35, .15);
}
.top {
z-index: 1;
}
.line {
position: absolute;
top: 50%;
left: 0;
width: 100%;
content: "";
border-bottom: 2px dashed #e1e4e8;
}
}
.auth-title {
color: #24292e;
font-size: 24px;
font-weight: 400;
margin-top: 20px;
}
}
.auth-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
.auth-info-wrap {
width: 100%;
border-bottom: 1px solid #e1e4e8;
padding: 24px;
.auth-detail {
height: 40px;
display: flex;
align-items: center;
.auth-pic {
margin-right: 16px;
}
.auth-detail-href {
font-weight: 500;
}
.auth-detail-title {
font-weight: 500;
color: #24292e;
}
.auth-detail-sub-title {
font-size: 12px;
color: #586069
}
.auth-detail-strong {
font-weight: 500;
}
}
}
.button-confirm {
width: 100%;
padding: 0 24px;
margin-top: 24px;
}
.to-wrap {
display: flex;
flex-direction: column;
align-items: center;
font-size: 12px;
margin: 16px 0 24px 0;
color: #586069;
}
.to-strong {
font-size: 12px;
color: #24292e;
font-weight: 600;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
}
}
}
\ No newline at end of file
This diff is collapsed.
<template>
<Card :padding="0" :style="{ backgroundColor: backgroundColor }">
<div
class="card-content card2"
:style="{ backgroundImage: backgroundImage }"
>
<div class="card-body">
<div :style="{ color: color }" class="card-title">{{ title }}</div>
<div class="card-data">
<count-up
:prefix="prefix"
:suffix="suffix"
:id="id"
:end-val="endVal"
:color="dataColor"
:countSize="countSize"
:countWeight="countWeight"
/>
<span
class="card-description"
:style="{
color: descriptionColor,
fontSize: descriptionSize,
fontWeight: descriptionWeight,
}"
>{{ description }}</span
>
</div>
<Progress
:percent="endVal"
:stroke-color="color"
:stroke-width="strokeWidth"
hide-info
/>
</div>
</div>
</Card>
</template>
<script>
import countUp from "@/views/my-components/widget/countUp.vue";
export default {
name: "card2",
components: {
countUp,
},
props: {
id: String,
backgroundColor: String,
backgroundImage: String,
title: String,
prefix: String,
suffix: String,
endVal: Number,
color: {
type: String,
default: "#19be6b",
},
dataColor: {
type: String,
default: "#3f4255",
},
countSize: {
type: String,
default: "24px",
},
countWeight: {
type: Number,
default: 600,
},
description: String,
strokeWidth: {
type: Number,
default: 6.5,
},
descriptionColor: {
type: String,
default: "#b5b5c5",
},
descriptionSize: {
type: String,
default: "12px",
},
descriptionWeight: {
type: Number,
default: 500,
},
},
};
</script>
<style lang="less" scoped>
.card-content {
height: 150px;
padding: 26px 30px;
}
.card2 {
background-position: right top;
background-size: 30% auto;
background-repeat: no-repeat;
.card-body {
display: flex;
flex-direction: column;
height: 102px;
justify-content: space-around;
align-items: flex-start;
.card-title {
font-weight: 600;
}
.card-data {
display: flex;
align-items: flex-end;
.card-description {
margin: 0 0 5px 5px;
}
}
}
}
</style>
<template>
<Card
:padding="0"
:bordered="bordered"
:style="{ backgroundColor: realBackgroundColor }"
>
<div
class="card-app card-content"
@click="click"
@mouseover="itemHover"
@mouseout="removeHover"
>
<div class="card-body">
<Icon
class="card-icon"
:type="icon"
:color="realIconColor"
:size="iconSize"
v-if="icon"
></Icon>
<img :src="image" :width="width" :height="height" v-else />
<div
class="card-title"
:style="{
color: realTitleColor,
fontSize: titleSize,
fontWeight: titleWeight,
}"
>
{{ title }}
</div>
</div>
</div>
</Card>
</template>
<script>
export default {
name: "card-app",
components: {},
props: {
idName: String,
backgroundColor: String,
activeColor: {
type: String,
default: "#2d8cf0",
},
openBackColorChange: {
type: Boolean,
default: true,
},
bordered: {
type: Boolean,
default: true,
},
icon: String,
iconSize: {
type: Number,
default: 40,
},
iconColor: {
type: String,
default: "#b5b5c5",
},
image: String,
width: {
type: String,
default: "40px",
},
height: {
type: String,
default: "40px",
},
title: String,
titleColor: {
type: String,
default: "#7e8299",
},
titleSize: {
type: String,
default: "16px",
},
titleWeight: {
type: Number,
default: 600,
},
},
data() {
return {
clicked: false,
realIconColor: this.iconColor,
realTitleColor: this.titleColor,
realBackgroundColor: this.backgroundColor,
};
},
methods: {
click() {
this.clicked = !this.clicked;
if (this.clicked) {
if (this.openBackColorChange) {
this.realBackgroundColor = this.activeColor;
this.bordered = false;
this.realIconColor = "#fff";
this.realTitleColor = "#fff";
} else {
this.realIconColor = this.activeColor;
this.realTitleColor = this.activeColor;
}
} else {
if (this.openBackColorChange) {
this.realBackgroundColor = this.backgroundColor;
this.bordered = false;
this.realIconColor = this.iconColor;
this.realTitleColor = this.titleColor;
} else {
this.realIconColor = this.iconColor;
this.realTitleColor = this.titleColor;
}
}
},
itemHover() {
if (!this.clicked) {
this.realIconColor = this.activeColor;
this.realTitleColor = this.activeColor;
}
},
removeHover() {
if (!this.clicked) {
this.realIconColor = this.iconColor;
this.realTitleColor = this.titleColor;
}
},
},
};
</script>
<style lang="less" scoped>
.card-content {
height: 150px;
padding: 26px 30px;
}
.card-app {
cursor: pointer;
.card-body {
display: flex;
flex-direction: column;
height: 102px;
justify-content: center;
align-items: center;
.card-icon {
transition: all 0.2s ease;
}
.card-title {
transition: all 0.2s ease;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-top: 10px;
}
}
}
</style>
<template>
<div>
<Card>
<p slot="title" class="card-title">
<Icon type="md-locate" style="margin-right: 5px"></Icon>访问用户分布
</p>
<Row type="flex" justify="center" align="middle" style="height: 273px">
<apexchart
type="donut"
width="350"
:options="chartOptions"
:series="series"
/>
</Row>
</Card>
</div>
</template>
<script>
export default {
name: "visitSeparation",
data() {
return {
series: [],
chartOptions: {
labels: ["移动端", "PC", "平板", "IOS", "其他"],
plotOptions: {
pie: {
donut: {
size: "70%",
},
},
},
dataLabels: {
enabled: false,
},
legend: {
position: "right",
},
},
};
},
methods: {
init() {
this.series = [45, 18, 27, 15, 13];
},
},
mounted() {
this.init();
},
};
</script>
<template>
<div class="visit">
<Card>
<p slot="title" class="card-title">
<Icon type="md-map" style="margin-right: 5px"></Icon>每日来访量统计
</p>
<div slot="extra">
<DatePicker
:options="options"
type="daterange"
placeholder="选择日期范围"
style="width: 250px"
></DatePicker>
</div>
<div style="height: 273px">
<apexchart
type="bar"
height="280"
:options="chartOptions"
:series="series"
/>
</div>
</Card>
</div>
</template>
<script>
import { addDays, subDays } from "date-fns";
import { shortcuts } from "@/libs/shortcuts";
var zh = require("../../../libs/zh.json");
export default {
name: "visitVolume",
data() {
return {
options: {
shortcuts: shortcuts,
},
series: [
{
name: "",
data: [],
},
],
chartOptions: {
colors: ["#398af7", "#63a3f9", "#b3d1fd"],
chart: {
stacked: true,
toolbar: {
show: false,
},
zoom: {
enabled: false,
},
locales: [zh],
defaultLocale: "zh",
},
plotOptions: {
bar: {
columnWidth: "40%",
horizontal: false,
},
},
xaxis: {
type: "datetime",
labels: {
datetimeFormatter: {
year: "yyyy年",
month: "yyyy年MMM",
day: "MMMdd日",
},
},
categories: [],
},
legend: {
show: false,
},
dataLabels: {
enabled: false,
},
tooltip: {
enabled: true,
x: {
show: true,
format: "MMM dd日",
},
},
},
};
},
methods: {
init() {
this.series = [
{
name: "登录次数",
data: [44, 55, 41, 67, 22, 43, 27, 45, 15, 44, 30, 44, 30, 15],
},
{
name: "浏览量",
data: [13, 23, 20, 8, 13, 27, 23, 20, 8, 13, 27, 13, 27, 50],
},
{
name: "注册用户",
data: [11, 17, 15, 15, 21, 14, 17, 15, 15, 21, 14, 21, 14, 35],
},
];
let categories = [];
let num = 14;
let start = subDays(new Date(), num);
for (let i = 0; i < num; i++) {
categories.push(addDays(start, i).getTime());
}
this.chartOptions.xaxis.categories = categories;
},
},
created() {
this.init();
},
};
</script>
<style lang="less">
.visit {
.ivu-card-head {
border-bottom: none !important;
}
}
</style>
...@@ -10,14 +10,6 @@ ...@@ -10,14 +10,6 @@
</template> </template>
<script> <script>
import { ipInfo } from "@/api/index";
import visitVolume from "./components/visitVolume.vue";
import visitSeparation from "./components/visitSeparation.vue";
import card1 from "@/views/my-components/widget/card1.vue";
import card2 from "./components/card2.vue";
import card3 from "@/views/my-components/widget/card3.vue";
import card4 from "@/views/my-components/widget/card4.vue";
import cardApp from "./components/cardApp.vue";
import Cookies from "js-cookie"; import Cookies from "js-cookie";
export default { export default {
name: "home", name: "home",
......
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