Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev
This commit is contained in:
wangshuaiswim
commit
6350a8f3b9
|
|
@ -0,0 +1,28 @@
|
|||
module.exports = {
|
||||
extends: ['@commitlint/config-conventional'],
|
||||
rules: {
|
||||
'type-enum': [
|
||||
2,
|
||||
'always',
|
||||
[
|
||||
'build', // 编译相关修改（新版本发布）
|
||||
'feat', // 新功能
|
||||
'fix', // 修复bug
|
||||
'update', // 更新某功能
|
||||
'refactor', // 重构
|
||||
'docs', // 文档
|
||||
'chore', // 增加依赖或库
|
||||
'style', // 格式（不影响代码变动）
|
||||
'revert', // 撤销commit 回滚上一版本
|
||||
'perf', // 性能优化
|
||||
]
|
||||
],
|
||||
'type-case': [0],
|
||||
'type-empty': [0],
|
||||
'scope-empty': [0],
|
||||
'scope-case': [0],
|
||||
'subject-full-stop': [0, 'never'],
|
||||
'subject-case': [0, 'never'],
|
||||
'header-max-length': [0, 'always', 72]
|
||||
}
|
||||
}
|
||||
|
|
@ -11,6 +11,8 @@ node_modules
|
|||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
yarn.lock
|
||||
components.d.ts
|
||||
|
||||
# Editor directories and files
|
||||
.vscode
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
#!/usr/bin/env sh
|
||||
. "$(dirname -- "$0")/_/husky.sh"
|
||||
|
||||
npx --no -- commitlint --edit ${1}
|
||||
|
|
@ -7,30 +7,18 @@ 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']
|
||||
AForm: typeof import('ant-design-vue/es')['Form']
|
||||
AFormItem: typeof import('ant-design-vue/es')['FormItem']
|
||||
AInput: typeof import('ant-design-vue/es')['Input']
|
||||
AInputGroup: typeof import('ant-design-vue/es')['InputGroup']
|
||||
AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
|
||||
AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
|
||||
AModal: typeof import('ant-design-vue/es')['Modal']
|
||||
APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
|
||||
ARow: typeof import('ant-design-vue/es')['Row']
|
||||
ASelect: typeof import('ant-design-vue/es')['Select']
|
||||
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']
|
||||
FormFormBuilder: typeof import('./src/components/Form/FormBuilder.vue')['default']
|
||||
GeoComponent: typeof import('./src/components/GeoComponent/index.vue')['default']
|
||||
MonacoEditor: typeof import('./src/components/MonacoEditor/index.vue')['default']
|
||||
PermissionButton: typeof import('./src/components/PermissionButton/index.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
TitleComponent: typeof import('./src/components/TitleComponent/index.vue')['default']
|
||||
ValueItem: typeof import('./src/components/ValueItem/index.vue')['default']
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
25
package.json
25
package.json
|
|
@ -8,7 +8,9 @@
|
|||
"build": "vite build --mode production",
|
||||
"preview": "vite preview",
|
||||
"eslint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
|
||||
"prettier": "prettier --write"
|
||||
"lint": "eslint src --fix --ext .ts,.tsx,.vue,.js,.jsx",
|
||||
"prettier": "prettier --write",
|
||||
"prepare": "husky install"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vitejs/plugin-vue-jsx": "^3.0.0",
|
||||
|
|
@ -16,6 +18,8 @@
|
|||
"ant-design-vue": "^3.2.15",
|
||||
"axios": "^1.2.1",
|
||||
"echarts": "^5.4.1",
|
||||
"jetlinks-store": "^0.0.3",
|
||||
"js-cookie": "^3.0.1",
|
||||
"less": "^4.1.3",
|
||||
"less-loader": "^11.1.0",
|
||||
"lodash-es": "^4.17.21",
|
||||
|
|
@ -25,20 +29,35 @@
|
|||
"unplugin-auto-import": "^0.12.1",
|
||||
"unplugin-vue-components": "^0.22.12",
|
||||
"vue": "^3.2.45",
|
||||
"vue-router": "^4.1.6",
|
||||
"jetlinks-store": "^0.0.3"
|
||||
"vue-router": "^4.1.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "^17.4.1",
|
||||
"@commitlint/config-conventional": "^17.4.0",
|
||||
"@types/lodash-es": "^4.17.6",
|
||||
"@types/moment": "^2.13.0",
|
||||
"@types/node": "^18.11.17",
|
||||
"@vitejs/plugin-vue": "^4.0.0",
|
||||
"@vuemap/unplugin-resolver": "^1.0.4",
|
||||
"autoprefixer": "^10.4.13",
|
||||
"commitlint": "^17.4.1",
|
||||
"husky": "^8.0.0",
|
||||
"lint-staged": "^13.1.0",
|
||||
"mrm": "^4.1.13",
|
||||
"prettier": "^2.8.1",
|
||||
"typescript": "^4.9.3",
|
||||
"vite": "^4.0.0",
|
||||
"vite-plugin-html": "^3.2.0",
|
||||
"vite-plugin-vue-setup-extend": "^0.4.0",
|
||||
"vue-tsc": "^1.0.11"
|
||||
},
|
||||
"lint-staged": {
|
||||
"**/*.{vue,js,jsx,ts,tsx}": [
|
||||
"npm run lint",
|
||||
"prettier --write"
|
||||
],
|
||||
"**/*.{html,css,less,md}": [
|
||||
"prettier --write"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 159 B |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
|
|
@ -0,0 +1,4 @@
|
|||
import { get } from '@/utils/request'
|
||||
|
||||
// 三方应用账户信息
|
||||
export const applicationInfo = (code: string) => get(`/application/sso/bind-code/${code}`)
|
||||
|
|
@ -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,13 @@
|
|||
<template>
|
||||
<div class=''>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup type='ts' name='FormBuilder'>
|
||||
const data = reactive({})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import FormBuilder from './FormBuilder.vue'
|
||||
|
||||
export default FormBuilder
|
||||
|
|
@ -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
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<template>
|
||||
<div class="title">
|
||||
<div class="title-before"></div>
|
||||
<span>{{ data }}</span>
|
||||
<slot name="extra"></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TitleComponent",
|
||||
props: {
|
||||
data: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
.title {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
padding-left: 10px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
.title-before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
height: calc(100% - 2px);
|
||||
background-color: @primary-color;
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,10 +1,16 @@
|
|||
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";
|
||||
import Form from './Form'
|
||||
|
||||
export default {
|
||||
install(app: App) {
|
||||
app.component('AIcon', AIcon)
|
||||
app.component('PermissionButton', PermissionButton)
|
||||
.component('PermissionButton', PermissionButton)
|
||||
.component('JTable', JTable)
|
||||
.component('TitleComponent', TitleComponent)
|
||||
.component('Form', Form)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,5 +36,31 @@ export default [
|
|||
path: '/iot/home',
|
||||
component: () => import('@/views/iot/home/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/table',
|
||||
component: () => import('@/views/table/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/form',
|
||||
component: () => import('@/views/demo/Form.vue')
|
||||
},
|
||||
// end: 测试用, 可删除
|
||||
|
||||
// link 运维管理
|
||||
{
|
||||
path: '/link/log',
|
||||
component: () => import('@/views/link/Log/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/link/certificate',
|
||||
component: () => import('@/views/link/Certificate/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/link/certificate/detail/add',
|
||||
component: () => import('@/views/link/Certificate/Detail/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/link/accessConfig/detail/add',
|
||||
component: () => import('@/views/link/AccessConfig/Detail/index.vue')
|
||||
},
|
||||
]
|
||||
|
|
@ -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 TOKEN_KEY = 'X-Access-Token'
|
||||
|
||||
export const Version_Code = 'version_code'
|
||||
|
|
@ -1,189 +1,286 @@
|
|||
<!-- 第三方账户绑定 -->
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="content">
|
||||
<div class="title">第三方账户绑定</div>
|
||||
<!-- 已登录-绑定三方账号 -->
|
||||
<template v-if="false">
|
||||
<div class="info">
|
||||
<a-card style="width: 280px">
|
||||
<template #title>
|
||||
<div class="info-head">
|
||||
<img :src="getImage('/bind/Rectangle.png')" />
|
||||
<span>个人信息</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="info-body">
|
||||
<img :src="getImage('/bind/jetlinksLogo.png')" />
|
||||
<p>账号：admin</p>
|
||||
<p>用户名：超级管理员</p>
|
||||
</div>
|
||||
</a-card>
|
||||
<img :src="getImage('/bind/Vector.png')" />
|
||||
<a-card style="width: 280px">
|
||||
<template #title>
|
||||
<div class="info-head">
|
||||
<img :src="getImage('/bind/Rectangle.png')" />
|
||||
<span>三方账户信息</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="info-body">
|
||||
<img :src="getImage('/bind/wechat-webapp.png')" />
|
||||
<p>用户名：-</p>
|
||||
<p>名称：微信昵称</p>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<a-button type="primary">立即绑定</a-button>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 未登录-绑定三方账号 -->
|
||||
<template v-else>
|
||||
<div class="not-login">
|
||||
<div class="logo">
|
||||
<img :src="getImage('/bind/jetlinksLogo.png')" />
|
||||
<img
|
||||
class="arrow"
|
||||
:src="getImage('/bind/Vector.png')"
|
||||
/>
|
||||
<img :src="getImage('/bind/wechat-webapp.png')" />
|
||||
</div>
|
||||
<div class="desc">
|
||||
你已通过微信授权,完善以下登录信息即可以完成绑定
|
||||
</div>
|
||||
<div class="login-form">
|
||||
<a-form layout="vertical" :model="formData">
|
||||
<a-form-item label="账户">
|
||||
<a-input
|
||||
v-model:value="formData.username"
|
||||
placeholder="请输入账户"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="密码">
|
||||
<a-input-password
|
||||
v-model:value="formData.password"
|
||||
placeholder="请输入密码"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="验证码">
|
||||
<a-input
|
||||
v-model:value="formData.captcha"
|
||||
placeholder="请输入验证码"
|
||||
>
|
||||
<template #addonAfter>图形验证码</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button type="primary" style="width: 100%">
|
||||
登录并绑定账户
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getImage } from '@/utils/comm';
|
||||
|
||||
interface formData {
|
||||
username: string;
|
||||
password: string;
|
||||
captcha: string;
|
||||
}
|
||||
const formData = ref<formData>({
|
||||
username: '',
|
||||
password: '',
|
||||
captcha: '',
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.page-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: url(/images/bind/bindPage.png) 0% 0% / 100% 100% no-repeat;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.content {
|
||||
box-sizing: border-box;
|
||||
width: 850px;
|
||||
min-height: 510px;
|
||||
background: #fff;
|
||||
border: 1px solid #e0e4e8;
|
||||
border-radius: 2px;
|
||||
.title {
|
||||
margin: 30px 0;
|
||||
color: #0f1222;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
font-family: 'PingFang SC';
|
||||
font-style: normal;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
// 已登录-绑定三方账号
|
||||
.info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
&-head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 10px;
|
||||
}
|
||||
&-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
img {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
// 未登录
|
||||
.not-login {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.arrow {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
.desc {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
font-size: 14px;
|
||||
font-family: 'PingFang SC';
|
||||
font-style: normal;
|
||||
line-height: 14px;
|
||||
opacity: 0.75;
|
||||
mix-blend-mode: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!-- 第三方账户绑定 -->
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<div class="content">
|
||||
<div class="title">第三方账户绑定</div>
|
||||
<!-- 已登录-绑定三方账号 -->
|
||||
<template v-if="false">
|
||||
<div class="info">
|
||||
<a-card style="width: 280px">
|
||||
<template #title>
|
||||
<div class="info-head">
|
||||
<img :src="getImage('/bind/Rectangle.png')" />
|
||||
<span>个人信息</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="info-body">
|
||||
<img :src="getImage('/bind/jetlinksLogo.png')" />
|
||||
<p>账号：admin</p>
|
||||
<p>用户名：超级管理员</p>
|
||||
</div>
|
||||
</a-card>
|
||||
<img :src="getImage('/bind/Vector.png')" />
|
||||
<a-card style="width: 280px">
|
||||
<template #title>
|
||||
<div class="info-head">
|
||||
<img :src="getImage('/bind/Rectangle.png')" />
|
||||
<span>三方账户信息</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="info-body">
|
||||
<img :src="getImage('/bind/wechat-webapp.png')" />
|
||||
<p>用户名：-</p>
|
||||
<p>名称：微信昵称</p>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<a-button type="primary">立即绑定</a-button>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 未登录-绑定三方账号 -->
|
||||
<template v-else>
|
||||
<div class="not-login">
|
||||
<div class="logo">
|
||||
<img :src="getImage('/bind/jetlinksLogo.png')" />
|
||||
<img
|
||||
class="arrow"
|
||||
:src="getImage('/bind/Vector.png')"
|
||||
/>
|
||||
<img :src="getImage('/bind/wechat-webapp.png')" />
|
||||
</div>
|
||||
<div class="desc">
|
||||
你已通过微信授权,完善以下登录信息即可以完成绑定
|
||||
</div>
|
||||
<div class="login-form">
|
||||
<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="密码"
|
||||
v-bind="validateInfos.password"
|
||||
>
|
||||
<a-input-password
|
||||
v-model:value="formData.password"
|
||||
placeholder="请输入密码"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="验证码"
|
||||
v-bind="validateInfos.captcha"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="formData.captcha"
|
||||
placeholder="请输入验证码"
|
||||
>
|
||||
<template #addonAfter>
|
||||
<span style="cursor: pointer">
|
||||
图形验证码
|
||||
</span>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="handleSubmit"
|
||||
style="width: 100%"
|
||||
>
|
||||
登录并绑定账户
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getImage } from '@/utils/comm';
|
||||
import { Form } from 'ant-design-vue';
|
||||
|
||||
import { applicationInfo } from '@/api/bind';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
|
||||
interface formData {
|
||||
username: string;
|
||||
password: string;
|
||||
captcha: string;
|
||||
}
|
||||
|
||||
// 三方应用信息
|
||||
const getAppInfo = async () => {
|
||||
const code: string = '73ab60c88979a1475963a5dde31e374b';
|
||||
const res = await applicationInfo(code);
|
||||
console.log('getAppInfo: ', res);
|
||||
};
|
||||
getAppInfo();
|
||||
|
||||
// 登录表单
|
||||
const formData = ref<formData>({
|
||||
username: '',
|
||||
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);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 绑定成功跳转至页面url的: redirect
|
||||
*/
|
||||
const goRedirect = () => {
|
||||
const urlParams = new URLSearchParams(window.location.hash);
|
||||
const redirectUrl =
|
||||
urlParams.get('redirect') ||
|
||||
window.location.href.split('redirect=')?.[1];
|
||||
console.log('redirectUrl: ', redirectUrl);
|
||||
//内部集成需要跳回它们页面
|
||||
if (redirectUrl && redirectUrl.indexOf('account/center/bind') === -1) {
|
||||
window.location.href = decodeURIComponent(redirectUrl);
|
||||
}
|
||||
};
|
||||
</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;
|
||||
background: url(/images/bind/bindPage.png) 0% 0% / 100% 100% no-repeat;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.content {
|
||||
box-sizing: border-box;
|
||||
width: 850px;
|
||||
min-height: 510px;
|
||||
background: #fff;
|
||||
border: 1px solid #e0e4e8;
|
||||
border-radius: 2px;
|
||||
.title {
|
||||
margin: 30px 0;
|
||||
color: #0f1222;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
font-family: 'PingFang SC';
|
||||
font-style: normal;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
// 已登录-绑定三方账号
|
||||
.info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
&-head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 10px;
|
||||
}
|
||||
&-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
img {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
// 未登录
|
||||
.not-login {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.arrow {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
.desc {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
font-size: 14px;
|
||||
font-family: 'PingFang SC';
|
||||
font-style: normal;
|
||||
line-height: 14px;
|
||||
opacity: 0.75;
|
||||
mix-blend-mode: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
<template>
|
||||
<Form />
|
||||
</template>
|
||||
|
||||
<script setup name='FormDemo'>
|
||||
const data = reactive({})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
const MetworkTypeMapping = new Map();
|
||||
MetworkTypeMapping.set('websocket-server', 'WEB_SOCKET_SERVER');
|
||||
MetworkTypeMapping.set('http-server-gateway', 'HTTP_SERVER');
|
||||
MetworkTypeMapping.set('udp-device-gateway', 'UDP');
|
||||
MetworkTypeMapping.set('coap-server-gateway', 'COAP_SERVER');
|
||||
MetworkTypeMapping.set('mqtt-client-gateway', 'MQTT_CLIENT');
|
||||
MetworkTypeMapping.set('mqtt-server-gateway', 'MQTT_SERVER');
|
||||
MetworkTypeMapping.set('tcp-server-gateway', 'TCP_SERVER');
|
||||
|
||||
const ProcotoleMapping = new Map();
|
||||
ProcotoleMapping.set('websocket-server', 'WebSocket');
|
||||
ProcotoleMapping.set('http-server-gateway', 'HTTP');
|
||||
ProcotoleMapping.set('udp-device-gateway', 'UDP');
|
||||
ProcotoleMapping.set('coap-server-gateway', 'CoAP');
|
||||
ProcotoleMapping.set('mqtt-client-gateway', 'MQTT');
|
||||
ProcotoleMapping.set('mqtt-server-gateway', 'MQTT');
|
||||
ProcotoleMapping.set('tcp-server-gateway', 'TCP');
|
||||
ProcotoleMapping.set('child-device', '');
|
||||
|
||||
const descriptionList = {
|
||||
'udp-device-gateway':
|
||||
'UDP可以让设备无需建立连接就可以与平台传输数据。在允许一定程度丢包的情况下，提供轻量化且简单的连接。',
|
||||
'tcp-server-gateway':
|
||||
'TCP服务是一种面向连接的、可靠的、基于字节流的传输层通信协议。设备可通过TCP服务与平台进行长链接，实时更新状态并发送消息。可自定义多种粘拆包规则，处理传输过程中可能发生的粘拆包问题。',
|
||||
'websocket-server':
|
||||
'WebSocket是一种在单个TCP连接上进行全双工通信的协议，允许服务端主动向客户端推送数据。设备通过WebSocket服务与平台进行长链接，实时更新状态并发送消息，且可以发布订阅消息',
|
||||
'mqtt-client-gateway':
|
||||
'MQTT是ISO 标准下基于发布/订阅范式的消息协议，具有轻量、简单、开放和易于实现的特点。平台使用指定的ID接入其他远程平台，订阅消息。也可添加用户名和密码校验。可设置最大消息长度。可统一设置共享的订阅前缀。',
|
||||
'http-server-gateway':
|
||||
'HTTP服务是一个简单的请求-响应的基于TCP的无状态协议。设备通过HTTP服务与平台进行灵活的短链接通信，仅支持设备和平台之间单对单的请求-响应模式',
|
||||
'mqtt-server-gateway':
|
||||
'MQTT是ISO 标准下基于发布/订阅范式的消息协议，具有轻量、简单、开放和易于实现的特点。提供MQTT的服务端，以供设备以长链接的方式接入平台。设备使用唯一的ID，也可添加用户名和密码校验。可设置最大消息长度。',
|
||||
'coap-server-gateway':
|
||||
'CoAP是针对只有少量的内存空间和有限的计算能力提供的一种基于UDP的协议。便于低功耗或网络受限的设备与平台通信，仅支持设备和平台之间单对单的请求-响应模式。',
|
||||
};
|
||||
|
||||
const columnsMQTT = [
|
||||
{
|
||||
title: '分组',
|
||||
dataIndex: 'group',
|
||||
key: 'group',
|
||||
ellipsis: true,
|
||||
align: 'center',
|
||||
width: 100,
|
||||
scopedSlots: { customRender: 'group' },
|
||||
},
|
||||
{
|
||||
title: 'topic',
|
||||
dataIndex: 'topic',
|
||||
key: 'topic',
|
||||
scopedSlots: { customRender: 'topic' },
|
||||
},
|
||||
{
|
||||
title: '上下行',
|
||||
dataIndex: 'stream',
|
||||
key: 'stream',
|
||||
ellipsis: true,
|
||||
align: 'center',
|
||||
width: 100,
|
||||
scopedSlots: { customRender: 'stream' },
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
dataIndex: 'description',
|
||||
key: 'description',
|
||||
scopedSlots: { customRender: 'description' },
|
||||
},
|
||||
]
|
||||
|
||||
const columnsHTTP = [
|
||||
{
|
||||
title: '分组',
|
||||
dataIndex: 'group',
|
||||
key: 'group',
|
||||
ellipsis: true,
|
||||
width: 100,
|
||||
scopedSlots: { customRender: 'group' },
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
dataIndex: 'address',
|
||||
key: 'address',
|
||||
scopedSlots: { customRender: 'address' },
|
||||
},
|
||||
{
|
||||
title: '示例',
|
||||
dataIndex: 'example',
|
||||
key: 'example',
|
||||
scopedSlots: { customRender: 'example' },
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
dataIndex: 'description',
|
||||
key: 'description',
|
||||
scopedSlots: { customRender: 'description' }
|
||||
},
|
||||
]
|
||||
|
||||
export { MetworkTypeMapping, ProcotoleMapping, descriptionList, columnsMQTT, columnsHTTP };
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
<template>
|
||||
<a-card :bordered="false">
|
||||
<TitleComponent data="自定义设备接入"></TitleComponent>
|
||||
<div>
|
||||
<a-row :gutter="[24, 24]">
|
||||
<a-col :span="12" v-for="item in items" :key="item.id">
|
||||
<div class="provider">
|
||||
<div class="box">
|
||||
<div class="left">
|
||||
<div class="images">
|
||||
<img :src="backMap.get(item.id)" />
|
||||
</div>
|
||||
<div class="context">
|
||||
<div class="title">{{ item.name }}</div>
|
||||
<div class="desc">
|
||||
<a-tooltip :title="item.description">
|
||||
{{ item.description || '' }}
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="goProviders(item)"
|
||||
>接入</a-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="AccessConfigDetail">
|
||||
import { getImage } from '@/utils/comm';
|
||||
import TitleComponent from '@/components/TitleComponent/index.vue';
|
||||
|
||||
const items = [
|
||||
{ id: 'mqtt-server-gateway', name: '测试1', description: '测试1' },
|
||||
{ id: 'websocket-server', name: '测试2', description: '测试' },
|
||||
{ id: 'coap-server-gateway', name: '测试3', description: '测试' },
|
||||
];
|
||||
|
||||
const backMap = new Map();
|
||||
backMap.set('mqtt-server-gateway', getImage('/access/mqtt.png'));
|
||||
backMap.set('websocket-server', getImage('/access/websocket.png'));
|
||||
backMap.set('coap-server-gateway', getImage('/access/coap.png'));
|
||||
backMap.set('tcp-server-gateway', getImage('/access/tcp.png'));
|
||||
backMap.set('child-device', getImage('/access/child-device.png'));
|
||||
backMap.set('http-server-gateway', getImage('/access/http.png'));
|
||||
backMap.set('udp-device-gateway', getImage('/access/udp.png'));
|
||||
backMap.set('mqtt-client-gateway', getImage('/access/mqtt-broke.png'));
|
||||
|
||||
const goProviders = (value: object) => {
|
||||
console.log(111, value);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.provider {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
background: url('/public/images/access/background.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border: 1px solid #e6e6e6;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 40px;
|
||||
display: block;
|
||||
width: 15%;
|
||||
min-width: 64px;
|
||||
height: 2px;
|
||||
background-image: url('/public/images/access/rectangle.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// border: 1px #8da1f4 solid;
|
||||
// border-bottom-left-radius: 10%;
|
||||
// border-bottom-right-radius: 10%;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 24px rgba(#000, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
width: calc(100% - 70px);
|
||||
.images {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.context {
|
||||
width: calc(100% - 84px);
|
||||
margin: 10px;
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.desc {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 70px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<template>
|
||||
<a-button type="primary" @click="handlAdd">新增</a-button>
|
||||
</template>
|
||||
<script lang="ts" setup name="AccessConfigPage">
|
||||
|
||||
const handlAdd = (e: any) => {
|
||||
console.log(111,e);
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<template>
|
||||
<a-spin :spinning="loading">
|
||||
<div>
|
||||
<a-textarea
|
||||
:rows="4"
|
||||
@change="textChange"
|
||||
v-model="keystoreBase64"
|
||||
:placeholder=placeholder
|
||||
/>
|
||||
<a-upload
|
||||
accept=".pem"
|
||||
listType="text"
|
||||
:action="action"
|
||||
:headers="headers"
|
||||
:showUploadList="false"
|
||||
@change="handleChange"
|
||||
>
|
||||
<a-button style="margin-top: 10px">
|
||||
<upload-outlined></upload-outlined>
|
||||
|
||||
上传文件</a-button>
|
||||
</a-upload>
|
||||
</div>
|
||||
</a-spin>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import storage from 'store'
|
||||
// import { ACCESS_TOKEN } from '@/store/mutation-types'
|
||||
// import { ACCESS_TOKEN_KEY } from '@/utils/consts'
|
||||
import { UploadOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'CertificateFile',
|
||||
data () {
|
||||
return {
|
||||
keystoreBase64: '',
|
||||
loading: false,
|
||||
action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
|
||||
headers:{
|
||||
authorization: 'authorization-text',
|
||||
}
|
||||
// action: process.env.VUE_APP_BASE_API + `/network/certificate/upload`,
|
||||
// headers: {
|
||||
// [ACCESS_TOKEN_KEY]: storage.get(ACCESS_TOKEN)
|
||||
// }
|
||||
}
|
||||
},
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change'
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler (v) {
|
||||
this.keystoreBase64 = v
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange (info) {
|
||||
this.loading = true
|
||||
if (info.file.status === 'done') {
|
||||
this.$message.success('上传成功！')
|
||||
const result = info.file.response?.result
|
||||
this.loading = false
|
||||
this.$emit('change', result)
|
||||
}
|
||||
},
|
||||
textChange (val) {
|
||||
this.$emit('change', val)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,207 @@
|
|||
<template>
|
||||
<a-card>
|
||||
<a-row :gutter="[24, 24]" style="padding: 24px">
|
||||
<a-col :span="12">
|
||||
<a-form
|
||||
class="form"
|
||||
layout="vertical"
|
||||
:model="formData"
|
||||
name="basic"
|
||||
:label-col="{ span: 8 }"
|
||||
:wrapper-col="{ span: 16 }"
|
||||
autocomplete="off"
|
||||
@finish="onFinish"
|
||||
@finishFailed="onFinishFailed"
|
||||
>
|
||||
<a-form-item
|
||||
label="证书标准"
|
||||
name="type"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请选择证书标准',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-radio-group v-model:value="formData.type">
|
||||
<a-radio-button
|
||||
class="form-radio-button"
|
||||
value="common"
|
||||
>
|
||||
<img :src="getImage('/certificate.png')" />
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
label="证书名称"
|
||||
name="name"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入证书名称',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
placeholder="请输入证书名称"
|
||||
v-model:value="formData.name"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="证书文件"
|
||||
name="cert"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '上传证书文件',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<CertificateFile
|
||||
placeholder='证书格式以"-----BEGIN CERTIFICATE-----"开头，以"-----END CERTIFICATE-----"结尾"'
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="证书私钥"
|
||||
name="key"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请上传证书私钥',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<CertificateFile
|
||||
placeholder='证书私钥格式以"-----BEGIN (RSA|EC) PRIVATE KEY-----"开头，以"-----END(RSA|EC) PRIVATE KEY-----"结尾。'
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="说明" name="description">
|
||||
<a-textarea
|
||||
placeholder="请输入说明"
|
||||
v-model:value="formData.description"
|
||||
:maxlength="200"
|
||||
:rows="3"
|
||||
showCount
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-button
|
||||
class="form-submit"
|
||||
html-type="submit"
|
||||
type="primary"
|
||||
>保存</a-button
|
||||
>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="doc">
|
||||
<h1>1. 概述</h1>
|
||||
<div>
|
||||
证书由受信任的数字证书颁发机构CA，在验证服务器身份后颁发，具有服务器身份验证和数据传输加密功能，保障设备与平台间的数据传输安全。配置后可被网络组件引用。
|
||||
</div>
|
||||
<h1>2. 配置说明</h1>
|
||||
<h2>1、证书文件</h2>
|
||||
<div>
|
||||
您可以使用文本编辑工具打开PEM或者CRT格式的证书文件，复制其中的内容并粘贴到该文本框，或者单击该文本框下的上传，并选择存储在本地计算机的证书文件，将文件内容上传到文本框。
|
||||
</div>
|
||||
<h2>2、证书私钥</h2>
|
||||
<div>
|
||||
填写证书私钥内容的PEM编码。
|
||||
您可以使用文本编辑工具打开KEY格式的证书私钥文件，复制其中的内容并粘贴到该文本框，或者单击该文本框下的上传并选择存储在本地计算机的证书私钥文件，将文件内容上传到文本框。
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</template>
|
||||
<!-- export const ACCESS_TOKEN_KEY = 'X-Access-Token' -->
|
||||
<!-- export const ACCESS_TOKEN = 'device_token' -->
|
||||
|
||||
<script lang="ts" setup name="CertificateDetail">
|
||||
import { message } from 'ant-design-vue';
|
||||
import { getImage } from '@/utils/comm';
|
||||
import CertificateFile from './CertificateFile.vue';
|
||||
|
||||
const formData = reactive({
|
||||
type: 'common',
|
||||
name: '',
|
||||
configs: {
|
||||
cert: '',
|
||||
key: '',
|
||||
},
|
||||
description: '',
|
||||
});
|
||||
|
||||
const onFinish = (values: any) => {
|
||||
console.log('Success:', values);
|
||||
};
|
||||
const onFinishFailed = (errorInfo: any) => {
|
||||
console.log('Failed:', errorInfo);
|
||||
};
|
||||
|
||||
const headers = {
|
||||
authorization: 'authorization-text',
|
||||
};
|
||||
|
||||
const handleChange = (info: any) => {
|
||||
if (info.file.status !== 'uploading') {
|
||||
console.log(info.file, info.fileList);
|
||||
}
|
||||
if (info.file.status === 'done') {
|
||||
message.success(`${info.file.name} file uploaded successfully`);
|
||||
} else if (info.file.status === 'error') {
|
||||
message.error(`${info.file.name} file upload failed.`);
|
||||
}
|
||||
};
|
||||
const fileList = ref([]);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.form {
|
||||
.form-radio-button {
|
||||
width: 148px;
|
||||
height: 80px;
|
||||
padding: 0;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.form-upload-button {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.form-submit {
|
||||
background-color: @primary-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.doc {
|
||||
height: 100%;
|
||||
padding: 0 24px;
|
||||
overflow-y: auto;
|
||||
color: rgba(#000, 0.8);
|
||||
font-size: 14px;
|
||||
background-color: #fff;
|
||||
|
||||
h1 {
|
||||
margin: 16px 0;
|
||||
color: rgba(#000, 0.85);
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 6px 10px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<template>
|
||||
<a-button type="primary" @click="handlAdd">新增</a-button>
|
||||
</template>
|
||||
<script lang="ts" setup name="CertificatePage">
|
||||
|
||||
const handlAdd = (e: any) => {
|
||||
console.log(111,e);
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<template>
|
||||
<div>访问日志</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="SystemLog">
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<template>
|
||||
<div>系统日志</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="AccessLog">
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<a-tab-pane key="1" tab="访问日志">
|
||||
<AccessLog />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="系统日志" force-render>
|
||||
<SystemLog />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</template>
|
||||
<script lang="ts" setup name="LogPage">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import AccessLog from './Access/index.vue';
|
||||
import SystemLog from './System/index.vue';
|
||||
|
||||
const activeKey = ref('1');
|
||||
</script>
|
||||
|
|
@ -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,534 @@
|
|||
<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: 20px">
|
||||
<a-divider plain style="height: 12px">
|
||||
<div
|
||||
style="color: #807676d9, font-size: 12px"
|
||||
>
|
||||
其他方式登录
|
||||
</div>
|
||||
</a-divider>
|
||||
<div
|
||||
style="position: relative, bottom: 10px; text-align: center"
|
||||
>
|
||||
<a-button
|
||||
v-for="(item, index) in bindings"
|
||||
:key="index"
|
||||
type="link"
|
||||
@Click="handleClickOther(item)"
|
||||
>
|
||||
<img
|
||||
style="width: 32px, height: 33px"
|
||||
:alt="item.name"
|
||||
:src="
|
||||
iconMap.get(
|
||||
item.provider,
|
||||
) || defaultImg
|
||||
"
|
||||
/>
|
||||
</a-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 { BASE_API_PATH, 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 defaultImg = getImage('/apply/provider1.png');
|
||||
const iconMap = new Map();
|
||||
iconMap.set('dingtalk-ent-app', getImage('/bind/dingtalk.png'));
|
||||
iconMap.set('wechat-webapp', getImage('/bind/wechat-webapp.png'));
|
||||
|
||||
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.success) {
|
||||
store.$patch({
|
||||
...res.result,
|
||||
username: form.username,
|
||||
});
|
||||
LocalStore.set(TOKEN_KEY, res?.result.token);
|
||||
const resp: any = await getInitSet();
|
||||
if (resp.success) {
|
||||
router.push('/demo');
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
form.verifyCode = '';
|
||||
getCode();
|
||||
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.success && res.result) {
|
||||
LocalStore.set(Version_Code, res.result.edition);
|
||||
if (res.result.edition !== 'community') {
|
||||
bindInfo().then((res: any) => {
|
||||
if (res.success) {
|
||||
bindings.value = res.result;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleClickOther = (item: any) => {
|
||||
LocalStore.set('onLogin', 'no');
|
||||
window.open(`${BASE_API_PATH}/application/sso/${item.id}/login`);
|
||||
window.onstorage = (e) => {
|
||||
if (e.newValue) {
|
||||
window.location.href = '/';
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
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;
|
||||
text-align: center;
|
||||
|
||||
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;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.verifyCode {
|
||||
.login-code-input {
|
||||
width: 70%;
|
||||
float: left;
|
||||
}
|
||||
.login-code {
|
||||
width: 30%;
|
||||
height: 32px;
|
||||
float: left;
|
||||
background-color: #e4e6e7;
|
||||
img {
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.login-code-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
|
|
@ -7,6 +7,7 @@ import AutoImport from 'unplugin-auto-import/vite'
|
|||
import { createHtmlPlugin } from 'vite-plugin-html'
|
||||
import Config from './config/config'
|
||||
import {VueAmapResolver} from '@vuemap/unplugin-resolver'
|
||||
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
|
||||
|
||||
import * as path from 'path'
|
||||
|
||||
|
|
@ -67,7 +68,8 @@ export default defineConfig(({ mode}) => {
|
|||
favicon: `<link rel="icon" type="image/svg+xml" href="${Config.logo}" />`
|
||||
}
|
||||
}
|
||||
})
|
||||
}),
|
||||
VueSetupExtend()
|
||||
],
|
||||
server: {
|
||||
host:'0.0.0.0',
|
||||
|
|
@ -76,9 +78,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