fix: Merge branch 'dev' into dev-hub
This commit is contained in:
jackhoo_98
commit
1bd0b49dc4
|
|
@ -11,6 +11,8 @@ node_modules
|
|||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
yarn.lock
|
||||
components.d.ts
|
||||
|
||||
# Editor directories and files
|
||||
.vscode
|
||||
|
|
|
|||
|
|
@ -7,11 +7,9 @@ export {}
|
|||
|
||||
declare module '@vue/runtime-core' {
|
||||
export interface GlobalComponents {
|
||||
ABadge: typeof import('ant-design-vue/es')['Badge']
|
||||
AButton: typeof import('ant-design-vue/es')['Button']
|
||||
ACard: typeof import('ant-design-vue/es')['Card']
|
||||
ACol: typeof import('ant-design-vue/es')['Col']
|
||||
ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
|
||||
ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
|
||||
ADivider: typeof import('ant-design-vue/es')['Divider']
|
||||
AForm: typeof import('ant-design-vue/es')['Form']
|
||||
AFormItem: typeof import('ant-design-vue/es')['FormItem']
|
||||
AInput: typeof import('ant-design-vue/es')['Input']
|
||||
|
|
@ -20,10 +18,12 @@ declare module '@vue/runtime-core' {
|
|||
AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
|
||||
AModal: typeof import('ant-design-vue/es')['Modal']
|
||||
APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
|
||||
ACard: typeof import('ant-design-vue/es')['Card']
|
||||
ACol: typeof import('ant-design-vue/es')['Col']
|
||||
ARow: typeof import('ant-design-vue/es')['Row']
|
||||
ASelect: typeof import('ant-design-vue/es')['Select']
|
||||
ASpin: typeof import('ant-design-vue/es')['Spin']
|
||||
ATooltip: typeof import('ant-design-vue/es')['Tooltip']
|
||||
AUpload: typeof import('ant-design-vue/es')['Upload']
|
||||
BadgeStatus: typeof import('./src/components/BadgeStatus/index.vue')['default']
|
||||
CardBox: typeof import('./src/components/CardBox/index.vue')['default']
|
||||
GeoComponent: typeof import('./src/components/GeoComponent/index.vue')['default']
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -15,6 +15,7 @@
|
|||
"@vuemap/vue-amap": "^1.1.20",
|
||||
"ant-design-vue": "^3.2.15",
|
||||
"axios": "^1.2.1",
|
||||
"js-cookie": "^3.0.1",
|
||||
"echarts": "^5.4.1",
|
||||
"less": "^4.1.3",
|
||||
"less-loader": "^11.1.0",
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
|
|
@ -0,0 +1,15 @@
|
|||
import server from '@/utils/request'
|
||||
|
||||
export const config = () => server.get(`/authorize/captcha/config`)
|
||||
|
||||
export const code = () => server.get(`/authorize/captcha/image?width=130&height=30`)
|
||||
|
||||
export const authLogin = (data) => server.post(`/authorize/login`, data)
|
||||
|
||||
export const getInitSet = () => server.get(`/user/settings/init`)
|
||||
|
||||
export const postInitSet = (data) => server.post(`/user/settings/init`, data)
|
||||
|
||||
export const systemVersion = () => server.get(`/system/version`)
|
||||
|
||||
export const bindInfo = () => server.get(`/application/sso/_all`)
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
.jtable-body {
|
||||
width: 100%;
|
||||
padding: 0 24px 24px;
|
||||
background-color: white;
|
||||
.jtable-body-header {
|
||||
padding: 16px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.jtable-body-header-right {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
.jtable-setting-item {
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color-hover;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: @primary-color-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.jtable-content {
|
||||
.jtable-card {
|
||||
.jtable-card-items {
|
||||
display: grid;
|
||||
grid-gap: 26px;
|
||||
// grid-template-columns: repeat(4, 1fr);
|
||||
.jtable-card-item {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.jtable-pagination {
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,163 @@
|
|||
import { UnorderedListOutlined, AppstoreOutlined } from '@ant-design/icons-vue'
|
||||
import styles from './index.module.less'
|
||||
import { Space, Pagination, Table, Empty } from 'ant-design-vue'
|
||||
import type { TableProps } from 'ant-design-vue/es/table'
|
||||
enum ModelEnum {
|
||||
TABLE = 'TABLE',
|
||||
CARD = 'CARD',
|
||||
}
|
||||
|
||||
export declare type RequestData = {
|
||||
code: string;
|
||||
result: {
|
||||
data: any[] | undefined;
|
||||
pageIndex: number;
|
||||
pageSize: number;
|
||||
total: number;
|
||||
};
|
||||
status: number;
|
||||
} & Record<string, any>;
|
||||
// interface ColumnType extends
|
||||
|
||||
interface JTableProps extends TableProps{
|
||||
// columns?: ColumnsType<RecordType>;
|
||||
request: (params: Record<string, any> & {
|
||||
pageSize?: number;
|
||||
pageIndex?: number;
|
||||
}) => Promise<Partial<RequestData>>;
|
||||
cardBodyClass?: string;
|
||||
}
|
||||
|
||||
|
||||
const JTable = defineComponent<JTableProps>({
|
||||
name: 'JTable',
|
||||
slots: [
|
||||
'headerTitle', // 顶部左边插槽
|
||||
'cardRender', // 卡片内容
|
||||
],
|
||||
emits: [
|
||||
'modelChange', // 切换卡片和表格
|
||||
],
|
||||
setup(props: JTableProps, { slots, emit }){
|
||||
const model = ref<keyof typeof ModelEnum>(ModelEnum.CARD); // 模式切换
|
||||
const column = ref<number>(3);
|
||||
console.log(props)
|
||||
const dataSource = ref<any[]>([
|
||||
{
|
||||
key: '1',
|
||||
name: '胡彦斌',
|
||||
age: 32,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖1',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: '胡彦斌',
|
||||
age: 32,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
name: '胡彦祖1',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '5',
|
||||
name: '胡彦斌',
|
||||
age: 32,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '6',
|
||||
name: '胡彦祖1',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
])
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
|
||||
return () => <div class={styles["jtable-body"]}>
|
||||
<div class={styles["jtable-body-header"]}>
|
||||
<div class={styles["jtable-body-header-left"]}>
|
||||
{/* 顶部左边插槽 */}
|
||||
{slots.headerTitle && slots.headerTitle()}
|
||||
</div>
|
||||
<div class={styles["jtable-body-header-right"]}>
|
||||
{/* <Space> */}
|
||||
<div class={[styles["jtable-setting-item"], ModelEnum.CARD === model.value ? styles['active'] : '']} onClick={() => {
|
||||
model.value = ModelEnum.CARD
|
||||
}}>
|
||||
<AppstoreOutlined />
|
||||
</div>
|
||||
<div class={[styles["jtable-setting-item"], ModelEnum.TABLE === model.value ? styles['active'] : '']} onClick={() => {
|
||||
model.value = ModelEnum.TABLE
|
||||
}}>
|
||||
<UnorderedListOutlined />
|
||||
</div>
|
||||
{/* </Space> */}
|
||||
</div>
|
||||
</div>
|
||||
{/* content */}
|
||||
<div class={styles['jtable-content']}>
|
||||
{
|
||||
model.value === ModelEnum.CARD ?
|
||||
<div class={styles['jtable-card']}>
|
||||
{
|
||||
dataSource.value.length ?
|
||||
<div
|
||||
class={styles['jtable-card-items']}
|
||||
style={{gridTemplateColumns: `repeat(${column.value}, 1fr)`}}
|
||||
>
|
||||
{
|
||||
dataSource.value.map(item => slots.cardRender ?
|
||||
<div class={[styles['jtable-card-item'], props.cardBodyClass]}>{slots.cardRender(item)}</div>
|
||||
: null)
|
||||
}
|
||||
</div> :
|
||||
<div><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /></div>
|
||||
}
|
||||
</div> :
|
||||
<div>
|
||||
<Table
|
||||
dataSource={dataSource.value}
|
||||
columns={props.columns}
|
||||
pagination={false}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
{/* 分页 */}
|
||||
{
|
||||
dataSource.value.length &&
|
||||
<div class={styles['jtable-pagination']}>
|
||||
<Pagination
|
||||
size="small"
|
||||
total={50}
|
||||
showTotal={(total) => {
|
||||
const min = 1
|
||||
const max = 1
|
||||
return `第 ${min} - ${max} 条/总共 ${total} 条`
|
||||
}}
|
||||
onChange={() => {
|
||||
|
||||
}}
|
||||
onShowSizeChange={() => {
|
||||
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
})
|
||||
|
||||
export default JTable
|
||||
|
|
@ -1,12 +1,14 @@
|
|||
import type { App } from 'vue'
|
||||
import AIcon from './AIcon'
|
||||
import PermissionButton from './PermissionButton/index.vue'
|
||||
import JTable from './Table/index'
|
||||
import TitleComponent from "./TitleComponent/index.vue";
|
||||
|
||||
export default {
|
||||
install(app: App) {
|
||||
app.component('AIcon', AIcon)
|
||||
app.component('PermissionButton', PermissionButton)
|
||||
app.component('JTable', JTable)
|
||||
app.component('TitleComponent', TitleComponent)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,10 @@ export default [
|
|||
// }
|
||||
|
||||
// start: 测试用, 可删除
|
||||
{
|
||||
path: '/login',
|
||||
component: () => import('@/views/user/Login/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/demo',
|
||||
component: () => import('@/views/demo/index.vue')
|
||||
|
|
@ -32,6 +36,10 @@ export default [
|
|||
path: '/iot/home',
|
||||
component: () => import('@/views/iot/home/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/table',
|
||||
component: () => import('@/views/table/index.vue')
|
||||
},
|
||||
// end: 测试用, 可删除
|
||||
|
||||
// link 运维管理
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
import { defineStore } from 'pinia';
|
||||
import { authLogin } from '@/api/login';
|
||||
import { LocalStore } from '@/utils/comm';
|
||||
import { TOKEN_KEY } from '@/utils/variable';
|
||||
|
||||
/**
|
||||
* 用户信息
|
||||
* @methods setUserInfos 设置用户信息
|
||||
*/
|
||||
export const useUserInfo = defineStore('userInfo', {
|
||||
state: () => ({
|
||||
userInfos: {
|
||||
id: '',
|
||||
username: '',
|
||||
isAdmin: true,
|
||||
currentAuthority: [],
|
||||
expires: 0,
|
||||
permissions: [],
|
||||
roles: [],
|
||||
token: '',
|
||||
user: {},
|
||||
},
|
||||
}),
|
||||
actions: {
|
||||
login(userInfo: any) {
|
||||
const username = userInfo.userName.trim();
|
||||
const password = userInfo.password;
|
||||
const verifyCode = userInfo.verifyCode;
|
||||
return new Promise((resolve: any, reject: any) => {
|
||||
authLogin({ username, password, verifyCode })
|
||||
.then((res: any) => {
|
||||
Object.assign(this.userInfos, res.result);
|
||||
LocalStore.set(TOKEN_KEY, res?.result.token);
|
||||
resolve(res);
|
||||
})
|
||||
.catch((error: any) => {
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -162,7 +162,7 @@ request.interceptors.request.use(config => {
|
|||
// 让每个请求携带自定义 token 请根据实际情况自行修改
|
||||
const token = LocalStore.get(TOKEN_KEY)
|
||||
// const token = store.$state.tokenAlias
|
||||
if (token) {
|
||||
if (!token) {
|
||||
setTimeout(() => {
|
||||
router.replace({
|
||||
path: LoginPath
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
export const BASE_API_PATH = import.meta.env.VITE_APP_BASE_API
|
||||
|
||||
export const TOKEN_KEY = 'X-Access-Token'
|
||||
|
||||
export const Version_Code = 'version_code'
|
||||
|
|
@ -53,29 +53,46 @@
|
|||
你已通过微信授权,完善以下登录信息即可以完成绑定
|
||||
</div>
|
||||
<div class="login-form">
|
||||
<a-form layout="vertical" :model="formData">
|
||||
<a-form-item label="账户">
|
||||
<a-form layout="vertical">
|
||||
<a-form-item
|
||||
label="账户"
|
||||
v-bind="validateInfos.username"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="formData.username"
|
||||
placeholder="请输入账户"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="密码">
|
||||
<a-form-item
|
||||
label="密码"
|
||||
v-bind="validateInfos.password"
|
||||
>
|
||||
<a-input-password
|
||||
v-model:value="formData.password"
|
||||
placeholder="请输入密码"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="验证码">
|
||||
<a-form-item
|
||||
label="验证码"
|
||||
v-bind="validateInfos.captcha"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="formData.captcha"
|
||||
placeholder="请输入验证码"
|
||||
>
|
||||
<template #addonAfter>图形验证码</template>
|
||||
<template #addonAfter>
|
||||
<span style="cursor: pointer">
|
||||
图形验证码
|
||||
</span>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button type="primary" style="width: 100%">
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="handleSubmit"
|
||||
style="width: 100%"
|
||||
>
|
||||
登录并绑定账户
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
|
|
@ -89,6 +106,9 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { getImage } from '@/utils/comm';
|
||||
import { Form } from 'ant-design-vue';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
|
||||
interface formData {
|
||||
username: string;
|
||||
|
|
@ -100,9 +120,59 @@ const formData = ref<formData>({
|
|||
password: '',
|
||||
captcha: '',
|
||||
});
|
||||
const formRules = ref({
|
||||
username: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入账户',
|
||||
},
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入密码',
|
||||
},
|
||||
],
|
||||
captcha: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入验证码',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const { resetFields, validate, validateInfos } = useForm(
|
||||
formData.value,
|
||||
formRules.value,
|
||||
);
|
||||
|
||||
/**
|
||||
* 登录并绑定账户
|
||||
*/
|
||||
const handleSubmit = () => {
|
||||
validate()
|
||||
.then(() => {
|
||||
console.log('toRaw:', toRaw(formData.value));
|
||||
console.log('formData.value:', formData.value);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log('error', err);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
:deep(
|
||||
.ant-form-item-label
|
||||
> label.ant-form-item-required:not(
|
||||
.ant-form-item-required-mark-optional
|
||||
)::before
|
||||
) {
|
||||
display: none;
|
||||
}
|
||||
:deep(.ant-form-item-label > label) {
|
||||
font-weight: bold;
|
||||
}
|
||||
.page-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,44 @@
|
|||
<template>
|
||||
<div class="box">
|
||||
<JTable
|
||||
:columns="[
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '年龄',
|
||||
dataIndex: 'age',
|
||||
key: 'age',
|
||||
},
|
||||
{
|
||||
title: '住址',
|
||||
dataIndex: 'address',
|
||||
key: 'address',
|
||||
}
|
||||
]"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<a-button type="primary">新增</a-button>
|
||||
</template>
|
||||
<template #cardRender="slotProps">
|
||||
{{slotProps.name}}
|
||||
</template>
|
||||
</JTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { post } from "@/utils/request";
|
||||
// :request="post('/device-product/_query', {})"
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="less" scoped>
|
||||
.box {
|
||||
padding: 20px;
|
||||
background: #f0f2f5;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,491 @@
|
|||
<template>
|
||||
<div>
|
||||
<a-spin :spinning="loading" :delay="500">
|
||||
<div class="container">
|
||||
<div class="left">
|
||||
<img
|
||||
style="width: 100%; height: 100%"
|
||||
:src="getImage('/login.png')"
|
||||
/>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="lang" data-lang=""></div>
|
||||
<div class="content">
|
||||
<div class="top">
|
||||
<div class="header">
|
||||
<!-- <link to="/"> -->
|
||||
<img
|
||||
alt="logo"
|
||||
class="logo"
|
||||
:src="getImage('/logo.png')"
|
||||
/>
|
||||
<!-- </link> -->
|
||||
</div>
|
||||
<div class="desc">物联网平台</div>
|
||||
<div class="main">
|
||||
<a-form
|
||||
layout="vertical"
|
||||
:model="form"
|
||||
class="login-form"
|
||||
@finish="onFinish"
|
||||
>
|
||||
<a-form-item
|
||||
label="账号"
|
||||
name="username"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入账号!',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="form.username"
|
||||
placeholder="请输入账号"
|
||||
:maxlength="64"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="密码"
|
||||
name="password"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入密码!',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input-password
|
||||
v-model:value="form.password"
|
||||
placeholder="请输入密码"
|
||||
:maxlength="64"
|
||||
></a-input-password>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
v-if="codeConfig"
|
||||
class="verifyCode"
|
||||
label="验证码"
|
||||
name="verifyCode"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入验证码!',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
class="login-code-input"
|
||||
v-model:value="form.verifyCode"
|
||||
autocomplete="off"
|
||||
:maxlength="64"
|
||||
placeholder="请输入验证码"
|
||||
></a-input>
|
||||
<div class="login-code">
|
||||
<img
|
||||
:src="codeUrl"
|
||||
@click="getCode()"
|
||||
class="login-code-img"
|
||||
/>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
name="remember"
|
||||
style="text-align: left"
|
||||
>
|
||||
<a-checkbox
|
||||
v-model:checked="form.remember"
|
||||
>记住密码</a-checkbox
|
||||
>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button
|
||||
:loading="loading"
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
class="login-form-button"
|
||||
block
|
||||
>
|
||||
登录
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<div style="margin-top: 20">
|
||||
<a-divider plain style="height: 12">
|
||||
<div
|
||||
style="color: '#807676d9', fontSize: 12"
|
||||
>
|
||||
其他方式登录
|
||||
</div>
|
||||
</a-divider>
|
||||
<div
|
||||
style="position: 'relative', bottom: '10px'"
|
||||
v-for="(item, index) in bindings"
|
||||
:key="index"
|
||||
>
|
||||
<Button type="link" @Click="handle">
|
||||
<img
|
||||
style="width: 32, height: 33"
|
||||
:alt="item.name"
|
||||
:src="
|
||||
iconMap.get(
|
||||
item.provider,
|
||||
) || defaultImg
|
||||
"
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="view">
|
||||
JETLINKS团队全新力作可视化大屏系统
|
||||
</div>
|
||||
<div class="url">
|
||||
<div style="height: 33px">
|
||||
<img :src="viewLogo" />
|
||||
</div>
|
||||
<a
|
||||
href="https://view.jetlinks.cn/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
体验DEMO
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-spin>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getImage } from '@/utils/comm';
|
||||
import {
|
||||
config,
|
||||
code,
|
||||
authLogin,
|
||||
getInitSet,
|
||||
systemVersion,
|
||||
bindInfo,
|
||||
} from '@/api/login';
|
||||
import Cookies from 'js-cookie';
|
||||
import { useUserInfo } from '@/store/userInfo';
|
||||
import { LocalStore } from '@/utils/comm';
|
||||
import { TOKEN_KEY, Version_Code } from '@/utils/variable';
|
||||
|
||||
const store = useUserInfo();
|
||||
const router = useRouter();
|
||||
const bgImage = getImage('/logo.png');
|
||||
const viewLogo = getImage('/view-logo.png');
|
||||
|
||||
const LoginWarpStyle = reactive({
|
||||
backgroundImage: `url(${bgImage})`,
|
||||
});
|
||||
|
||||
const screenWidth = ref(document.body.clientWidth);
|
||||
const screenHeight = ref(document.body.clientHeight);
|
||||
|
||||
const form = reactive({
|
||||
username: '',
|
||||
password: '',
|
||||
remember: false,
|
||||
expires: 3600000,
|
||||
verifyCode: '',
|
||||
verifyKey: '',
|
||||
});
|
||||
|
||||
const codeUrl = ref('');
|
||||
const codeConfig = ref(false);
|
||||
|
||||
const loading = ref(false);
|
||||
const bindings = ref<any[]>();
|
||||
|
||||
const onFinish = async () => {
|
||||
form.remember
|
||||
? Cookies.set('user', encodeURIComponent(JSON.stringify(form)), {
|
||||
expires: 7,
|
||||
})
|
||||
: Cookies.remove('user');
|
||||
Cookies.set('username', form.username, { expires: 30 });
|
||||
try {
|
||||
loading.value = true;
|
||||
const res: any = await authLogin(form);
|
||||
if (res.status === 200) {
|
||||
store.$patch({
|
||||
...res.result,
|
||||
username: form.username,
|
||||
});
|
||||
LocalStore.set(TOKEN_KEY, res?.result.token);
|
||||
const resp: any = await getInitSet();
|
||||
if (resp.status === 200) {
|
||||
router.push('/demo');
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const getCode = async () => {
|
||||
const configRes: any = await config();
|
||||
if (!configRes.success || (configRes.success && !configRes.result.enabled))
|
||||
return;
|
||||
|
||||
codeConfig.value = true;
|
||||
const res: any = await code();
|
||||
if (res.success) {
|
||||
codeUrl.value = res.result.base64;
|
||||
form.verifyKey = res.result.key;
|
||||
}
|
||||
};
|
||||
|
||||
const getCookie = () => {
|
||||
// form.username = Cookies.get('username');
|
||||
if (!Cookies.get('user')) return;
|
||||
const user = JSON.parse(decodeURIComponent(Cookies.get('user')));
|
||||
form.username = user.username;
|
||||
form.password = user.password;
|
||||
form.remember = user.remember || false;
|
||||
};
|
||||
|
||||
const getOpen = () => {
|
||||
systemVersion().then((res: any) => {
|
||||
if (res.status === 200 && res.result) {
|
||||
LocalStore.set(Version_Code, res.result.edition);
|
||||
if (res.result.edition !== 'community') {
|
||||
bindInfo().then((res: any) => {
|
||||
if (res.status === 200) {
|
||||
bindings.value = res.result;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const screenRotation = (width: number, height: number) => {
|
||||
LoginWarpStyle.backgroundImage = `url(${bgImage})`;
|
||||
};
|
||||
|
||||
window.onresize = () => {
|
||||
return (() => {
|
||||
screenWidth.value = document.body.clientWidth;
|
||||
screenHeight.value = document.body.clientHeight;
|
||||
})();
|
||||
};
|
||||
|
||||
watch(
|
||||
[() => screenWidth.value, () => screenHeight.value],
|
||||
(value) => {
|
||||
screenRotation(value[0], value[1]);
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
getOpen();
|
||||
getCode();
|
||||
getCookie();
|
||||
screenRotation(screenWidth.value, screenHeight.value);
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import 'ant-design-vue/es/style/themes/default.less';
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
background: @layout-body-background;
|
||||
|
||||
.left {
|
||||
width: 73%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 27%;
|
||||
background: #fff;
|
||||
|
||||
:deep(.ant-layout-footer) {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.lang {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 44px;
|
||||
text-align: right;
|
||||
|
||||
:global(.ant-dropdown-trigger) {
|
||||
margin-right: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: center;
|
||||
padding: 0 0 15% 0;
|
||||
|
||||
.top {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
.header {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 44px;
|
||||
margin-right: 16px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
color: @heading-color;
|
||||
font-weight: 600;
|
||||
font-size: 33px;
|
||||
font-family: Avenir, 'Helvetica Neue', Arial, Helvetica,
|
||||
sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin-top: 12px;
|
||||
margin-bottom: 40px;
|
||||
// color: @heading-color;
|
||||
color: rgb(0 0 0 / 70%);
|
||||
font-weight: 600;
|
||||
font-size: 22px;
|
||||
font-family: Avenir, 'Helvetica Neue', Arial, Helvetica,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.main {
|
||||
width: 70%;
|
||||
margin: 60px auto 0;
|
||||
|
||||
@media screen and (max-width: @screen-sm) {
|
||||
width: 95%;
|
||||
max-width: 328px;
|
||||
}
|
||||
|
||||
// ::v-deep {
|
||||
// .@{ant-prefix}-tabs-nav-list {
|
||||
// margin: auto;
|
||||
// font-size: 16px;
|
||||
// }
|
||||
|
||||
// // .ant-formily-item-size-large .ant-formily-item-help {
|
||||
// // text-align: left;
|
||||
// // }
|
||||
// }
|
||||
|
||||
.icon {
|
||||
margin-left: 16px;
|
||||
color: rgba(0, 0, 0, 0.2);
|
||||
font-size: 24px;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.other {
|
||||
margin-top: 24px;
|
||||
line-height: 22px;
|
||||
text-align: left;
|
||||
|
||||
.register {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.prefixIcon {
|
||||
color: @primary-color;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
|
||||
.remember {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 11%;
|
||||
border-top: 1px solid #e0e4e8;
|
||||
|
||||
.view {
|
||||
width: 247px;
|
||||
height: 20px;
|
||||
margin-right: 10%;
|
||||
margin-bottom: 10px;
|
||||
padding-top: 2px;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
font-size: 14px;
|
||||
font-family: 'PingFang SC';
|
||||
}
|
||||
|
||||
.url {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 10%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
left: 60px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2px 7px;
|
||||
line-height: 20px;
|
||||
border: 1px solid #2f54eb;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @screen-md-min) {
|
||||
.container {
|
||||
//background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center 110px;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 32px 0 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -76,9 +76,10 @@ export default defineConfig(({ mode}) => {
|
|||
[env.VITE_APP_BASE_API]: {
|
||||
// target: 'http://192.168.33.22:8800',
|
||||
// target: 'http://192.168.32.244:8881',
|
||||
target: 'http://47.112.135.104:5096', // opcua
|
||||
// target: 'http://47.112.135.104:5096', // opcua
|
||||
target: 'http://47.108.63.174:8845', // 测试
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace('^'+env.VITE_APP_BASE_API, '')
|
||||
rewrite: (path) => path.replace(/^\/api/, '')
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue