0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 右上角部分

This commit is contained in:
easy 2023-03-02 21:40:21 +08:00
parent 8a6e28fccc
commit 68a52db344
8 changed files with 325 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/api/login.ts
View File

@ -51,4 +51,9 @@ export const settingDetail = (scopes: string) => server.get(`/system/config/${sc
/**
* 获取当前登录用户信息
*/
export const userDetail = () => server.get<any>('/user/detail')
export const userDetail = () => server.get<any>('/user/detail')
/**
* 退出登录
*/
export const loginout_api = () => server.get<any>('/user-token/reset')

142
src/components/Layout/BasicLayoutPage.vue
View File

@ -1,84 +1,102 @@
<template>
<j-pro-layout
v-bind='layoutConf'
v-model:openKeys="state.openKeys"
v-model:collapsed="state.collapsed"
v-model:selectedKeys="state.selectedKeys"
:pure='state.pure'
:breadcrumb='{ routes: breadcrumb }'
>
<template #breadcrumbRender='slotProps'>
<a v-if='slotProps.route.index !== 0'>{{slotProps.route.breadcrumbName}}</a>
<span v-else>{{slotProps.route.breadcrumbName}}</span>
</template>
<router-view v-slot='{ Component}'>
<component :is='Component' />
</router-view>
</j-pro-layout>
<j-pro-layout
v-bind="layoutConf"
v-model:openKeys="state.openKeys"
v-model:collapsed="state.collapsed"
v-model:selectedKeys="state.selectedKeys"
:pure="state.pure"
:breadcrumb="{ routes: breadcrumb }"
>
<template #breadcrumbRender="slotProps">
<a v-if="slotProps.route.index !== 0">{{
slotProps.route.breadcrumbName
}}</a>
<span v-else>{{ slotProps.route.breadcrumbName }}</span>
</template>
<template #rightContentRender>
<div style="margin-right: 24px;display: flex;align-items: center;">
<AIcon type="QuestionCircleOutlined" @click="toDoc" />
<Notice style="margin: 0 24px;" />
<UserInfo />
</div>
</template>
<router-view v-slot="{ Component }">
<component :is="Component" />
</router-view>
</j-pro-layout>
</template>
<script setup lang="ts" name='BasicLayoutPage'>
import DefaultSetting from '../../../config/config'
import { useMenuStore } from '@/store/menu'
import { clearMenuItem } from 'jetlinks-ui-components/es/ProLayout/util'
<script setup lang="ts" name="BasicLayoutPage">
import UserInfo from './components/UserInfo.vue';
import Notice from './components/Notice.vue'
import DefaultSetting from '../../../config/config';
import { useMenuStore } from '@/store/menu';
import { clearMenuItem } from 'jetlinks-ui-components/es/ProLayout/util';
type StateType = {
collapsed: boolean
openKeys: string[]
selectedKeys: string[]
pure: boolean
}
collapsed: boolean;
openKeys: string[];
selectedKeys: string[];
pure: boolean;
};
const router = useRouter()
const route = useRoute()
const router = useRouter();
const route = useRoute();
const menu = useMenuStore()
const menu = useMenuStore();
const layoutConf = reactive({
theme: DefaultSetting.layout.theme,
siderWidth: DefaultSetting.layout.siderWidth,
logo: DefaultSetting.layout.logo,
title: DefaultSetting.layout.title,
menuData: clearMenuItem(menu.siderMenus),
splitMenus: true
theme: DefaultSetting.layout.theme,
siderWidth: DefaultSetting.layout.siderWidth,
logo: DefaultSetting.layout.logo,
title: DefaultSetting.layout.title,
menuData: clearMenuItem(menu.siderMenus),
splitMenus: true,
});
const state = reactive<StateType>({
pure: false,
collapsed: false, // default value
openKeys: [],
selectedKeys: [],
pure: false,
collapsed: false, // default value
openKeys: [],
selectedKeys: [],
});
const breadcrumb = computed(() =>
router.currentRoute.value.matched.concat().map((item, index) => {
return {
index,
path: item.path,
breadcrumbName: item.meta.title || ''
router.currentRoute.value.matched.concat().map((item, index) => {
return {
index,
path: item.path,
breadcrumbName: item.meta.title || '',
};
}),
);
watchEffect(() => {
if (router.currentRoute) {
const matched = router.currentRoute.value.matched.concat();
state.selectedKeys = matched.map((r) => r.path);
state.openKeys = matched
.filter((r) => r.path !== router.currentRoute.value.path)
.map((r) => r.path);
console.log(state.selectedKeys);
}
})
)
// TODO 获取当前路由中参数，用于控制pure
});
watchEffect(() => {
if (router.currentRoute) {
const matched = router.currentRoute.value.matched.concat()
state.selectedKeys = matched.map(r => r.path)
state.openKeys = matched.filter((r) => r.path !== router.currentRoute.value.path).map(r => r.path)
console.log(state.selectedKeys)
}
// TODO 获取当前路由中参数，用于控制pure
})
if (
route.query &&
'layout' in route.query &&
route.query.layout === 'false'
) {
state.pure = true;
} else {
state.pure = false;
}
});
watchEffect(() => {
if (route.query && 'layout' in route.query && route.query.layout === 'false') {
state.pure = true
} else {
state.pure = false
}
})
const toDoc = ()=>window.open('http://doc.v2.jetlinks.cn/')
</script>
<style scoped>
</style>
<style scoped></style>

31
src/components/Layout/components/Notice.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<div>
<a-dropdown :trigger="['click']">
<div style="height: 48px; display: flex; display: flex">
<AIcon type="BellOutlined" @click.prevent />
</div>
<template #overlay>
<div class="content">
<NoticeInfo />
</div>
</template>
</a-dropdown>
</div>
</template>
<script setup lang="ts">
import { getList_api } from '@/api/account/notificationRecord';
import NoticeInfo from './NoticeInfo.vue';
const getList = () => {
const params = {
'terms[0].column': 'state',
'terms[0].value': 'unread',
'sorts[0].name': 'notifyTime',
'sorts[0].order': 'desc',
};
getList_api(params).then((resp) => {});
};
</script>
<style lang="less" scoped></style>

24
src/components/Layout/components/NoticeInfo.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<div class="notice-info-container">
<a-tabs :activeKey="'default'">
<a-tab-pane key="default" tab="未读消息"> 111 </a-tab-pane>
</a-tabs>
</div>
</template>
<script setup lang="ts"></script>
<style lang="less" scoped>
.notice-info-container {
width: 336px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 6px 16px -8px rgb(0 0 0 / 8%), 0 9px 28px 0 rgb(0 0 0 / 5%),
0 12px 48px 16px rgb(0 0 0 / 3%);
:deep(.ant-tabs-nav-wrap) {
display: flex;
justify-content: center;
}
}
</style>

45
src/components/Layout/components/UserInfo.vue Normal file
View File

@ -0,0 +1,45 @@
<template>
<div>
<a-dropdown placement="bottomRight">
<div style="cursor: pointer;height: 100%;">
<img
:src="userInfo.avatar"
alt=""
style="width: 24px; margin-right: 12px"
/>
<span>{{ userInfo.name }}</span>
</div>
<template #overlay>
<a-menu>
<a-menu-item @click="jumpPage('account/center')" style="width: 160px;">
<AIcon type="UserOutlined" />
<span>个人中心</span>
</a-menu-item>
<a-menu-item @click="logOut">
<AIcon type="LogoutOutlined" />
<span>退出登录</span>
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</div>
</template>
<script setup lang="ts">
import { loginout_api } from '@/api/login';
import { useMenuStore } from '@/store/menu';
import { useUserInfo } from '@/store/userInfo';
const userInfo = useUserInfo().$state.userInfos as any;
const { jumpPage } = useMenuStore();
const logOut = () => {
loginout_api().then(() => {
localStorage.clear();
jumpPage('user/login');
});
};
</script>
<style scoped></style>

78
src/views/account/NotificationRecord/components/ViewDialog.vue
View File

@ -5,50 +5,55 @@
width="1000px"
@ok="emits('update:visible', false)"
@cancel="emits('update:visible', false)"
class="view-dialog-container"
>
<a-row v-if="data?.targetType === 'device'">
<a-col :span="6" class="label">告警设备</a-col>
<a-col :span="6" class="value">
<a-col :span="4" class="label">告警设备</a-col>
<a-col :span="8" class="value">
{{ data?.targetName || '' }}
</a-col>
<a-col :span="6" class="label">设备ID</a-col>
<a-col :span="6" class="value">
<a-col :span="4" class="label">设备ID</a-col>
<a-col :span="8" class="value">
{{ data?.targetId || '' }}
</a-col>
</a-row>
<a-row>
<a-col :span="6" class="label">告警名称</a-col>
<a-col :span="6" class="value">
<a-col :span="4" class="label">告警名称</a-col>
<a-col :span="8" class="value">
{{ data?.alarmName || data?.alarmConfigName || '' }}
</a-col>
<a-col :span="6" class="label">告警时间</a-col>
<a-col :span="6" class="value">
<a-col :span="4" class="label">告警时间</a-col>
<a-col :span="8" class="value">
{{ moment(data?.alarmTime).format('YYYY-MM-DD HH:mm:ss') }}
</a-col>
<a-col :span="6" class="label">告警级别</a-col>
<a-col :span="6" class="value">
<a-col :span="4" class="label">告警级别</a-col>
<a-col :span="8" class="value">
{{ (levelList.length > 0 && getLevelLabel(data.level)) || '' }}
</a-col>
<a-col :span="6" class="label">告警说明</a-col>
<a-col :span="6" class="value">{{ data?.description || '' }}</a-col>
<a-col :span="4" class="label">告警说明</a-col>
<a-col :span="8" class="value">{{ data?.description || '' }}</a-col>
<a-col :span="6" class="label">告警流水</a-col>
<a-col :span="18" class="value">
<!-- <MonacoEditor
style="width: 100%; height: 370px"
theme="vs"
v-model="jsonData"
/> -->
<JsonViewer :value="jsonData" copyable boxed sort />
<a-col
:span="4"
class="label"
style="display: flex; height: 440px; align-items: center"
>告警流水</a-col
>
<a-col
:span="20"
class="value"
style="max-height: 440px; overflow: auto"
>
<JsonViewer :value="JSON.parse(data?.alarmInfo || '{}')" />
</a-col>
</a-row>
</a-modal>
</template>
<script setup lang="ts">
import MonacoEditor from '@/components/MonacoEditor/index.vue';
import {JsonViewer} from 'vue3-json-viewer';
import { JsonViewer } from 'vue3-json-viewer';
import 'vue3-json-viewer/dist/index.css';
import { queryLevel as queryLevel_api } from '@/api/rule-engine/config';
import moment from 'moment';
@ -69,18 +74,25 @@ const getLevel = () => {
});
};
getLevel();
const getLevelLabel = (id: string) => {
const getLevelLabel = (id: number) => {
if (levelList.value.length < 1 || !id) return '';
const obj = levelList.value.find((item) => item.id === id);
return obj.title;
const obj = levelList.value.find((item) => item.level === id);
return obj?.title;
};
const jsonData = JSON.stringify({
name: 'qiu',
age: 18,
isMan: false,
arr: [1, 2, 5],
});
</script>
<style scoped></style>
<style lang="less" scoped>
.view-dialog-container {
.ant-row {
.ant-col {
padding: 16px 24px;
border-right: 1px solid #f0f0f0;
}
.label {
background-color: #fafafa;
}
.value {
}
}
}
</style>

4
src/views/account/NotificationRecord/index.vue
View File

@ -3,7 +3,7 @@
<div class="notification-record-container">
<Search :columns="columns" @search="query.search" />
<JTable
<j-pro-table
ref="tableRef"
:columns="columns"
:request="getList_api"
@ -78,7 +78,7 @@
</PermissionButton>
</a-space>
</template>
</JTable>
</j-pro-table>
<ViewDialog v-if="viewVisible" v-model:visible="viewVisible" :data="viewItem" />
</div>

94
yarn.lock
View File

@ -1072,6 +1072,16 @@
estree-walker "^2.0.2"
source-map "^0.6.1"
"@vue/compiler-core@3.2.47":
version "3.2.47"
resolved "https://registry.jetlinks.cn/@vue%2fcompiler-core/-/compiler-core-3.2.47.tgz#3e07c684d74897ac9aa5922c520741f3029267f8"
integrity sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==
dependencies:
"@babel/parser" "^7.16.4"
"@vue/shared" "3.2.47"
estree-walker "^2.0.2"
source-map "^0.6.1"
"@vue/compiler-dom@3.2.45", "@vue/compiler-dom@^3.2.45":
version "3.2.45"
resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.45.tgz"
@ -1080,6 +1090,14 @@
"@vue/compiler-core" "3.2.45"
"@vue/shared" "3.2.45"
"@vue/compiler-dom@3.2.47":
version "3.2.47"
resolved "https://registry.jetlinks.cn/@vue%2fcompiler-dom/-/compiler-dom-3.2.47.tgz#a0b06caf7ef7056939e563dcaa9cbde30794f305"
integrity sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==
dependencies:
"@vue/compiler-core" "3.2.47"
"@vue/shared" "3.2.47"
"@vue/compiler-sfc@3.2.45", "@vue/compiler-sfc@^3.2.29", "@vue/compiler-sfc@^3.2.45":
version "3.2.45"
resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.45.tgz"
@ -1096,6 +1114,22 @@
postcss "^8.1.10"
source-map "^0.6.1"
"@vue/compiler-sfc@3.2.47":
version "3.2.47"
resolved "https://registry.jetlinks.cn/@vue%2fcompiler-sfc/-/compiler-sfc-3.2.47.tgz#1bdc36f6cdc1643f72e2c397eb1a398f5004ad3d"
integrity sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==
dependencies:
"@babel/parser" "^7.16.4"
"@vue/compiler-core" "3.2.47"
"@vue/compiler-dom" "3.2.47"
"@vue/compiler-ssr" "3.2.47"
"@vue/reactivity-transform" "3.2.47"
"@vue/shared" "3.2.47"
estree-walker "^2.0.2"
magic-string "^0.25.7"
postcss "^8.1.10"
source-map "^0.6.1"
"@vue/compiler-ssr@3.2.45":
version "3.2.45"
resolved "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.45.tgz"
@ -1104,6 +1138,14 @@
"@vue/compiler-dom" "3.2.45"
"@vue/shared" "3.2.45"
"@vue/compiler-ssr@3.2.47":
version "3.2.47"
resolved "https://registry.jetlinks.cn/@vue%2fcompiler-ssr/-/compiler-ssr-3.2.47.tgz#35872c01a273aac4d6070ab9d8da918ab13057ee"
integrity sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==
dependencies:
"@vue/compiler-dom" "3.2.47"
"@vue/shared" "3.2.47"
"@vue/devtools-api@^6.4.5":
version "6.4.5"
resolved "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.4.5.tgz"
@ -1120,6 +1162,17 @@
estree-walker "^2.0.2"
magic-string "^0.25.7"
"@vue/reactivity-transform@3.2.47":
version "3.2.47"
resolved "https://registry.jetlinks.cn/@vue%2freactivity-transform/-/reactivity-transform-3.2.47.tgz#e45df4d06370f8abf29081a16afd25cffba6d84e"
integrity sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==
dependencies:
"@babel/parser" "^7.16.4"
"@vue/compiler-core" "3.2.47"
"@vue/shared" "3.2.47"
estree-walker "^2.0.2"
magic-string "^0.25.7"
"@vue/reactivity@3.2.45", "@vue/reactivity@^3.2.45":
version "3.2.45"
resolved "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.45.tgz"
@ -1127,6 +1180,13 @@
dependencies:
"@vue/shared" "3.2.45"
"@vue/reactivity@3.2.47":
version "3.2.47"
resolved "https://registry.jetlinks.cn/@vue%2freactivity/-/reactivity-3.2.47.tgz#1d6399074eadfc3ed35c727e2fd707d6881140b6"
integrity sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==
dependencies:
"@vue/shared" "3.2.47"
"@vue/runtime-core@3.2.45":
version "3.2.45"
resolved "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.45.tgz"
@ -1135,6 +1195,14 @@
"@vue/reactivity" "3.2.45"
"@vue/shared" "3.2.45"
"@vue/runtime-core@3.2.47":
version "3.2.47"
resolved "https://registry.jetlinks.cn/@vue%2fruntime-core/-/runtime-core-3.2.47.tgz#406ebade3d5551c00fc6409bbc1eeb10f32e121d"
integrity sha512-RZxbLQIRB/K0ev0K9FXhNbBzT32H9iRtYbaXb0ZIz2usLms/D55dJR2t6cIEUn6vyhS3ALNvNthI+Q95C+NOpA==
dependencies:
"@vue/reactivity" "3.2.47"
"@vue/shared" "3.2.47"
"@vue/runtime-dom@3.2.45":
version "3.2.45"
resolved "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.45.tgz"
@ -1144,6 +1212,15 @@
"@vue/shared" "3.2.45"
csstype "^2.6.8"
"@vue/runtime-dom@3.2.47":
version "3.2.47"
resolved "https://registry.jetlinks.cn/@vue%2fruntime-dom/-/runtime-dom-3.2.47.tgz#93e760eeaeab84dedfb7c3eaf3ed58d776299382"
integrity sha512-ArXrFTjS6TsDei4qwNvgrdmHtD930KgSKGhS5M+j8QxXrDJYLqYw4RRcDy1bz1m1wMmb6j+zGLifdVHtkXA7gA==
dependencies:
"@vue/runtime-core" "3.2.47"
"@vue/shared" "3.2.47"
csstype "^2.6.8"
"@vue/server-renderer@3.2.45":
version "3.2.45"
resolved "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.45.tgz"
@ -1152,11 +1229,24 @@
"@vue/compiler-ssr" "3.2.45"
"@vue/shared" "3.2.45"
"@vue/server-renderer@3.2.47":
version "3.2.47"
resolved "https://registry.jetlinks.cn/@vue%2fserver-renderer/-/server-renderer-3.2.47.tgz#8aa1d1871fc4eb5a7851aa7f741f8f700e6de3c0"
integrity sha512-dN9gc1i8EvmP9RCzvneONXsKfBRgqFeFZLurmHOveL7oH6HiFXJw5OGu294n1nHc/HMgTy6LulU/tv5/A7f/LA==
dependencies:
"@vue/compiler-ssr" "3.2.47"
"@vue/shared" "3.2.47"
"@vue/shared@3.2.45", "@vue/shared@^3.2.45":
version "3.2.45"
resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.2.45.tgz"
integrity sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==
"@vue/shared@3.2.47":
version "3.2.47"
resolved "https://registry.jetlinks.cn/@vue%2fshared/-/shared-3.2.47.tgz#e597ef75086c6e896ff5478a6bfc0a7aa4bbd14c"
integrity sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==
"@vuemap/layer-3dtiles@^0.0.3":
version "0.0.3"
resolved "https://registry.npmjs.org/@vuemap/layer-3dtiles/-/layer-3dtiles-0.0.3.tgz"
@ -3644,8 +3734,8 @@ jetlinks-store@^0.0.3:
jetlinks-ui-components@^1.0.1:
version "1.0.1"
resolved "https://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.1.tgz#12fe9a193af14b859e1baf02fbd706a2be5b31cf"
integrity sha512-4hdEJUaKNMSIcmbn4qKcG8oK7h6VSYP3X3fCNndBm6WhHh+9ONf8f+3OSrUy1PvxdenmqO0VN2QdWV0KupByKQ==
resolved "https://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.1.tgz#d9e6f5bd9b98523fb4708269be9b4e9bba3437b9"
integrity sha512-P8ykIynH6ti9c4KndFfHu/dwewqiWm4Gjki4e+IlCJcwq1at2iokWAITOVm9UsBnEBqWhTQowpK6vlSyTlW+9g==
dependencies:
"@vueuse/core" "^9.12.0"
ant-design-vue "^3.2.15"