Skip to content

E
evm-store
Commit a64c69fd authored by wanli's avatar wanli
Browse files
Options

✨ feat(前端): 

前端新增设备管理、工具管理、资源监视器
parent b8947a5e
Hide whitespace changes
Inline Side-by-side
Showing with 734 additions and 4 deletions
tools/frontend/src/locales/en_US.js
View file @ a64c69fd
...@@ -51,6 +51,8 @@ export default { ...@@ -51,6 +51,8 @@ export default {
'menu.application': '应用管理', 'menu.application': '应用管理',
'menu.application.index': '应用列表', 'menu.application.index': '应用列表',
'menu.application.manager': '应用打包', 'menu.application.manager': '应用打包',
'menu.device': '设备管理',
'menu.device.index': '设备列表',
//--- //---
'app.home.introduce': 'introduce', 'app.home.introduce': 'introduce',
'app.analysis.test': 'Gongzhuan No.{no} shop', 'app.analysis.test': 'Gongzhuan No.{no} shop',
...@@ -199,6 +201,5 @@ export default { ...@@ -199,6 +201,5 @@ export default {
'app.setting.weakmode': 'Weak Mode', 'app.setting.weakmode': 'Weak Mode',
'app.setting.copy': 'Copy Setting', 'app.setting.copy': 'Copy Setting',
'app.setting.copyinfo': 'copy success，please replace defaultSettings in src/models/setting.js', 'app.setting.copyinfo': 'copy success，please replace defaultSettings in src/models/setting.js',
'app.setting.production.hint': 'app.setting.production.hint': 'Setting panel show in development enviorment only, please mannually modify',
'Setting panel show in development enviorment only, please mannually modify',
}; };
tools/frontend/src/locales/zh_CN.js
View file @ a64c69fd
...@@ -53,6 +53,8 @@ export default { ...@@ -53,6 +53,8 @@ export default {
'menu.application': '应用管理', 'menu.application': '应用管理',
'menu.application.index': '应用列表', 'menu.application.index': '应用列表',
'menu.application.manager': '应用打包', 'menu.application.manager': '应用打包',
'menu.device': '设备管理',
'menu.device.index': '设备列表',
//--- //---
'app.home.introduce': '介绍', 'app.home.introduce': '介绍',
'app.analysis.test': '工专路 {no} 号店', 'app.analysis.test': '工专路 {no} 号店',
...@@ -195,6 +197,5 @@ export default { ...@@ -195,6 +197,5 @@ export default {
'app.setting.weakmode': '色弱模式', 'app.setting.weakmode': '色弱模式',
'app.setting.copy': '拷贝设置', 'app.setting.copy': '拷贝设置',
'app.setting.copyinfo': '拷贝成功，请到 src/defaultSettings.js 中替换默认配置', 'app.setting.copyinfo': '拷贝成功，请到 src/defaultSettings.js 中替换默认配置',
'app.setting.production.hint': 'app.setting.production.hint': '配置栏只在开发环境用于预览，生产环境不会展现，请拷贝后手动修改配置文件',
'配置栏只在开发环境用于预览，生产环境不会展现，请拷贝后手动修改配置文件',
}; };
tools/frontend/src/router/index.js
View file @ a64c69fd
...@@ -194,6 +194,20 @@ const router = new Router({ ...@@ -194,6 +194,20 @@ const router = new Router({
}, },
], ],
}, },
{
path: "/device",
icon: "table",
name: "device",
// redirect: '/application/index',
component: BasicLayout,
children: [
{ path: "/device", redirect: "/device/index" },
{
path: "/device/index",
component: () => import("@/views/Application/Device"),
},
],
},
], ],
}); });
......
tools/frontend/src/store/modules/global-nav.js
View file @ a64c69fd
...@@ -111,6 +111,24 @@ const mock = [ ...@@ -111,6 +111,24 @@ const mock = [
}, },
], ],
}, },
{
id: "1044886626813353984",
icon: 'table',
parentId: "0",
name: "device",
path: "/device",
leaf: false,
children: [
{
id: "1044886629921333248",
parentId: "1044886626813353984",
name: "index",
path: "/device/index",
leaf: true,
children: [],
},
],
},
]; ];
const state = { const state = {
......
tools/frontend/src/views/Application/Device.vue 0 → 100644
View file @ a64c69fd
<template>
<a-page-header-wrapper title="查询表格">
<a-card :bordered="false">
<div class="tableList">
<div class="tableListForm">
<a-form v-show="!expandForm" layout="inline">
<a-row :gutter="{ md: 8, lg: 24, xl: 48 }">
<a-col :md="8" :sm="24">
<a-form-item label="设备" v-decorator="['name']">
<a-input placeholder="请输入" />
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item label="性别" v-decorator="['gender']">
<a-select placeholder="请选择" style="width: 100%">
<a-option value="male">male</a-option>
<a-option value="female">female</a-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<span class="submitButtons">
<a-button type="primary" htmlType="submit"> 查询 </a-button>
<a-button :style="{ marginLeft: '8px' }"> 重置 </a-button>
<a :style="{ marginLeft: '8px' }" @click="toggleForm">
展开 <a-icon type="down" />
</a>
</span>
</a-col>
</a-row>
</a-form>
<a-form v-show="expandForm" layout="inline">
<a-row :gutter="{ md: 8, lg: 24, xl: 48 }">
<a-col :md="8" :sm="24">
<a-form-item label="用户" v-decorator="['username']">
<a-input placeholder="请输入" />
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item label="性别" v-decorator="['gender']">
<a-select placeholder="请选择" style="width: 100%">
<a-option value="male">male</a-option>
<a-option value="female">female</a-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item label="姓名" v-decorator="['name']">
<a-input placeholder="请输入" />
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="{ md: 8, lg: 24, xl: 48 }">
<a-col :md="8" :sm="24">
<a-form-item label="时间" v-decorator="['registered']">
<a-range-picker style="width: 100%" />
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item label="邮箱" v-decorator="['email']">
<a-input placeholder="请输入" />
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item label="国籍" v-decorator="['nat']">
<a-input placeholder="请输入" />
</a-form-item>
</a-col>
</a-row>
<div style="overflow: hidden">
<div :style="{ float: 'right', marginBottom: '24px' }">
<a-button type="primary" htmlType="submit"> 查询 </a-button>
<a-button :style="{ marginLeft: '8px' }"> 重置 </a-button>
<a :style="{ marginLeft: '8px' }" @click="toggleForm">
收起 <a-icon type="up" />
</a>
</div>
</div>
</a-form>
</div>
<div class="tableListOperator">
<a-button icon="plus" type="primary"> 新建 </a-button>
<span v-show="selectedRowKeys.length > 0">
<a-button>批量操作</a-button>
<!-- <a-dropdown overlay={menu}>
<a-button>
更多操作 <icon type="down" />
</a-button>
</a-dropdown> -->
</span>
</div>
<!-- <StandardTable
selectedRows={selectedRows}
loading={loading}
data={data}
columns={this.columns}
onSelectRow={this.handleSelectRows}
onChange={this.handleStandardTableChange}
/> -->
<a-table
:columns="columns"
:rowKey="(record) => record.uuid"
:dataSource="users.data"
:pagination="users.pagination"
:loading="loading"
@change="handleTableChange"
>
<template slot="action" slot-scope="text, record">
<a href="javascript:;">查看</a>
<a-divider type="vertical" />
<a href="javascript:;">配置</a>
</template>
</a-table>
</div>
</a-card>
</a-page-header-wrapper>
</template>
<script>
import {
Avatar,
Row,
Col,
Card,
List,
Button,
Form,
Icon,
Table,
Divider,
Dropdown,
Input,
Select,
DatePicker,
} from "ant-design-vue";
import PageHeaderWrapper from "@/components/PageHeaderWrapper";
import DescriptionItem from "@/components/DescriptionItem";
const columns = [
{
title: "用户名",
dataIndex: "login",
sorter: true,
width: "12%",
scopedSlots: { customRender: "login" },
},
{
title: "姓名",
dataIndex: "name",
sorter: true,
width: "15%",
scopedSlots: { customRender: "name" },
},
{
title: "性别",
dataIndex: "gender",
filters: [
{ text: "Male", value: "male" },
{ text: "Female", value: "female" },
],
},
{
title: "邮箱",
dataIndex: "email",
},
{
title: "国籍",
dataIndex: "nat",
},
{
title: "Action",
key: "action",
scopedSlots: { customRender: "action" },
},
];
export default {
name: "DeviceIndex",
data: () => ({
expandForm: false,
selectedRowKeys: [],
columns,
sya: {
fontSize: "16px",
color: "rgba(0,0,0,0.85)",
lineHeight: "24px",
display: "block",
marginBottom: "16px",
},
syb: {
marginBottom: "24px",
},
}),
components: {
APageHeaderWrapper: PageHeaderWrapper,
AAvatar: Avatar,
ARow: Row,
ACol: Col,
ACard: Card,
ACardGrid: Card.Grid,
ACardMeta: Card.Meta,
AList: List,
AButton: Button,
AForm: Form,
AFormItem: Form.Item,
AIcon: Icon,
ATable: Table,
ADescriptionItem: DescriptionItem,
ADivider: Divider,
ADropdown: Dropdown,
AInput: Input,
ASelect: Select,
AOption: Select.Option,
ARangePicker: DatePicker.RangePicker,
},
methods: {
toggleForm() {
this.expandForm = !this.expandForm;
},
onSelectChange(selectedRowKeys) {
window.console.log("selectedRowKeys changed: ", selectedRowKeys);
this.selectedRowKeys = selectedRowKeys;
},
handleTableChange(pagination, filters, sorter) {
console.log(pagination, filters, sorter)
},
},
created() {},
};
</script>
<style lang="less">
@import url("styles/tableList.less");
</style>
tools/frontend/src/views/Application/Monitor.vue 0 → 100644
View file @ a64c69fd
<template>
<a-page-header-wrapper title="查询表格">
<a-card :bordered="false">
<div class="tableList">
<div class="tableListForm">
<a-form v-show="!expandForm" layout="inline">
<a-row :gutter="{ md: 8, lg: 24, xl: 48 }">
<a-col :md="8" :sm="24">
<a-form-item label="设备" v-decorator="['name']">
<a-input placeholder="请输入" />
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item label="性别" v-decorator="['gender']">
<a-select placeholder="请选择" style="width: 100%">
<a-option value="male">male</a-option>
<a-option value="female">female</a-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<span class="submitButtons">
<a-button type="primary" htmlType="submit"> 查询 </a-button>
<a-button :style="{ marginLeft: '8px' }"> 重置 </a-button>
<a :style="{ marginLeft: '8px' }" @click="toggleForm">
展开 <a-icon type="down" />
</a>
</span>
</a-col>
</a-row>
</a-form>
<a-form v-show="expandForm" layout="inline">
<a-row :gutter="{ md: 8, lg: 24, xl: 48 }">
<a-col :md="8" :sm="24">
<a-form-item label="用户" v-decorator="['username']">
<a-input placeholder="请输入" />
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item label="性别" v-decorator="['gender']">
<a-select placeholder="请选择" style="width: 100%">
<a-option value="male">male</a-option>
<a-option value="female">female</a-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item label="姓名" v-decorator="['name']">
<a-input placeholder="请输入" />
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="{ md: 8, lg: 24, xl: 48 }">
<a-col :md="8" :sm="24">
<a-form-item label="时间" v-decorator="['registered']">
<a-range-picker style="width: 100%" />
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item label="邮箱" v-decorator="['email']">
<a-input placeholder="请输入" />
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item label="国籍" v-decorator="['nat']">
<a-input placeholder="请输入" />
</a-form-item>
</a-col>
</a-row>
<div style="overflow: hidden">
<div :style="{ float: 'right', marginBottom: '24px' }">
<a-button type="primary" htmlType="submit"> 查询 </a-button>
<a-button :style="{ marginLeft: '8px' }"> 重置 </a-button>
<a :style="{ marginLeft: '8px' }" @click="toggleForm">
收起 <a-icon type="up" />
</a>
</div>
</div>
</a-form>
</div>
<div class="tableListOperator">
<a-button icon="plus" type="primary"> 新建 </a-button>
<span v-show="selectedRowKeys.length > 0">
<a-button>批量操作</a-button>
<!-- <a-dropdown overlay={menu}>
<a-button>
更多操作 <icon type="down" />
</a-button>
</a-dropdown> -->
</span>
</div>
<!-- <StandardTable
selectedRows={selectedRows}
loading={loading}
data={data}
columns={this.columns}
onSelectRow={this.handleSelectRows}
onChange={this.handleStandardTableChange}
/> -->
<a-table
:columns="columns"
:rowKey="(record) => record.uuid"
:dataSource="users.data"
:pagination="users.pagination"
:loading="loading"
@change="handleTableChange"
>
<template slot="action" slot-scope="text, record">
<a href="javascript:;">查看</a>
<a-divider type="vertical" />
<a href="javascript:;">配置</a>
</template>
</a-table>
</div>
</a-card>
</a-page-header-wrapper>
</template>
<script>
import {
Avatar,
Row,
Col,
Card,
List,
Button,
Form,
Icon,
Table,
Divider,
Dropdown,
Input,
Select,
DatePicker,
} from "ant-design-vue";
import PageHeaderWrapper from "@/components/PageHeaderWrapper";
import DescriptionItem from "@/components/DescriptionItem";
const columns = [
{
title: "用户名",
dataIndex: "login",
sorter: true,
width: "12%",
scopedSlots: { customRender: "login" },
},
{
title: "姓名",
dataIndex: "name",
sorter: true,
width: "15%",
scopedSlots: { customRender: "name" },
},
{
title: "性别",
dataIndex: "gender",
filters: [
{ text: "Male", value: "male" },
{ text: "Female", value: "female" },
],
},
{
title: "邮箱",
dataIndex: "email",
},
{
title: "国籍",
dataIndex: "nat",
},
{
title: "Action",
key: "action",
scopedSlots: { customRender: "action" },
},
];
export default {
name: "DeviceIndex",
data: () => ({
expandForm: false,
selectedRowKeys: [],
columns,
sya: {
fontSize: "16px",
color: "rgba(0,0,0,0.85)",
lineHeight: "24px",
display: "block",
marginBottom: "16px",
},
syb: {
marginBottom: "24px",
},
}),
components: {
APageHeaderWrapper: PageHeaderWrapper,
AAvatar: Avatar,
ARow: Row,
ACol: Col,
ACard: Card,
ACardGrid: Card.Grid,
ACardMeta: Card.Meta,
AList: List,
AButton: Button,
AForm: Form,
AFormItem: Form.Item,
AIcon: Icon,
ATable: Table,
ADescriptionItem: DescriptionItem,
ADivider: Divider,
ADropdown: Dropdown,
AInput: Input,
ASelect: Select,
AOption: Select.Option,
ARangePicker: DatePicker.RangePicker,
},
methods: {
toggleForm() {
this.expandForm = !this.expandForm;
},
onSelectChange(selectedRowKeys) {
window.console.log("selectedRowKeys changed: ", selectedRowKeys);
this.selectedRowKeys = selectedRowKeys;
},
handleTableChange(pagination, filters, sorter) {
console.log(pagination, filters, sorter)
},
},
created() {},
};
</script>
<style lang="less">
@import url("styles/tableList.less");
</style>
tools/frontend/src/views/Application/Tool.vue 0 → 100644
View file @ a64c69fd
<template>
<a-page-header-wrapper title="查询表格">
<a-card :bordered="false">
<div class="tableList">
<div class="tableListForm">
<a-form v-show="!expandForm" layout="inline">
<a-row :gutter="{ md: 8, lg: 24, xl: 48 }">
<a-col :md="8" :sm="24">
<a-form-item label="设备" v-decorator="['name']">
<a-input placeholder="请输入" />
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item label="性别" v-decorator="['gender']">
<a-select placeholder="请选择" style="width: 100%">
<a-option value="male">male</a-option>
<a-option value="female">female</a-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<span class="submitButtons">
<a-button type="primary" htmlType="submit"> 查询 </a-button>
<a-button :style="{ marginLeft: '8px' }"> 重置 </a-button>
<a :style="{ marginLeft: '8px' }" @click="toggleForm">
展开 <a-icon type="down" />
</a>
</span>
</a-col>
</a-row>
</a-form>
<a-form v-show="expandForm" layout="inline">
<a-row :gutter="{ md: 8, lg: 24, xl: 48 }">
<a-col :md="8" :sm="24">
<a-form-item label="用户" v-decorator="['username']">
<a-input placeholder="请输入" />
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item label="性别" v-decorator="['gender']">
<a-select placeholder="请选择" style="width: 100%">
<a-option value="male">male</a-option>
<a-option value="female">female</a-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item label="姓名" v-decorator="['name']">
<a-input placeholder="请输入" />
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="{ md: 8, lg: 24, xl: 48 }">
<a-col :md="8" :sm="24">
<a-form-item label="时间" v-decorator="['registered']">
<a-range-picker style="width: 100%" />
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item label="邮箱" v-decorator="['email']">
<a-input placeholder="请输入" />
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item label="国籍" v-decorator="['nat']">
<a-input placeholder="请输入" />
</a-form-item>
</a-col>
</a-row>
<div style="overflow: hidden">
<div :style="{ float: 'right', marginBottom: '24px' }">
<a-button type="primary" htmlType="submit"> 查询 </a-button>
<a-button :style="{ marginLeft: '8px' }"> 重置 </a-button>
<a :style="{ marginLeft: '8px' }" @click="toggleForm">
收起 <a-icon type="up" />
</a>
</div>
</div>
</a-form>
</div>
<div class="tableListOperator">
<a-button icon="plus" type="primary"> 新建 </a-button>
<span v-show="selectedRowKeys.length > 0">
<a-button>批量操作</a-button>
<!-- <a-dropdown overlay={menu}>
<a-button>
更多操作 <icon type="down" />
</a-button>
</a-dropdown> -->
</span>
</div>
<!-- <StandardTable
selectedRows={selectedRows}
loading={loading}
data={data}
columns={this.columns}
onSelectRow={this.handleSelectRows}
onChange={this.handleStandardTableChange}
/> -->
<a-table
:columns="columns"
:rowKey="(record) => record.uuid"
:dataSource="users.data"
:pagination="users.pagination"
:loading="loading"
@change="handleTableChange"
>
<template slot="action" slot-scope="text, record">
<a href="javascript:;">查看</a>
<a-divider type="vertical" />
<a href="javascript:;">配置</a>
</template>
</a-table>
</div>
</a-card>
</a-page-header-wrapper>
</template>
<script>
import {
Avatar,
Row,
Col,
Card,
List,
Button,
Form,
Icon,
Table,
Divider,
Dropdown,
Input,
Select,
DatePicker,
} from "ant-design-vue";
import PageHeaderWrapper from "@/components/PageHeaderWrapper";
import DescriptionItem from "@/components/DescriptionItem";
const columns = [
{
title: "用户名",
dataIndex: "login",
sorter: true,
width: "12%",
scopedSlots: { customRender: "login" },
},
{
title: "姓名",
dataIndex: "name",
sorter: true,
width: "15%",
scopedSlots: { customRender: "name" },
},
{
title: "性别",
dataIndex: "gender",
filters: [
{ text: "Male", value: "male" },
{ text: "Female", value: "female" },
],
},
{
title: "邮箱",
dataIndex: "email",
},
{
title: "国籍",
dataIndex: "nat",
},
{
title: "Action",
key: "action",
scopedSlots: { customRender: "action" },
},
];
export default {
name: "DeviceIndex",
data: () => ({
expandForm: false,
selectedRowKeys: [],
columns,
sya: {
fontSize: "16px",
color: "rgba(0,0,0,0.85)",
lineHeight: "24px",
display: "block",
marginBottom: "16px",
},
syb: {
marginBottom: "24px",
},
}),
components: {
APageHeaderWrapper: PageHeaderWrapper,
AAvatar: Avatar,
ARow: Row,
ACol: Col,
ACard: Card,
ACardGrid: Card.Grid,
ACardMeta: Card.Meta,
AList: List,
AButton: Button,
AForm: Form,
AFormItem: Form.Item,
AIcon: Icon,
ATable: Table,
ADescriptionItem: DescriptionItem,
ADivider: Divider,
ADropdown: Dropdown,
AInput: Input,
ASelect: Select,
AOption: Select.Option,
ARangePicker: DatePicker.RangePicker,
},
methods: {
toggleForm() {
this.expandForm = !this.expandForm;
},
onSelectChange(selectedRowKeys) {
window.console.log("selectedRowKeys changed: ", selectedRowKeys);
this.selectedRowKeys = selectedRowKeys;
},
handleTableChange(pagination, filters, sorter) {
console.log(pagination, filters, sorter)
},
},
created() {},
};
</script>
<style lang="less">
@import url("styles/tableList.less");
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment