Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

代码提示优化

Browse Source
This commit is contained in:
仲么了
2024-01-03 13:20:19 +08:00
parent 0a0304f913
commit 9f234dfa1e
17 changed files with 330 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/baInput/components/iconSelector.vue
View File

@@ -169,15 +169,16 @@ const onChangeTab = (name: IconType) => {
getAwesomeIconfontNames().then((res) => {
state.fontIconNames = res.map((name) => `fa ${name}`)
})
} else if (name == 'ali') {
getIconfontNames().then((res) => {
state.fontIconNames = res.map((name) => `iconfont ${name}`)
})
} else if (name == 'local') {
getLocalIconfontNames().then((res) => {
state.fontIconNames = res
})
}
}
// else if (name == 'ali') {
// getIconfontNames().then((res) => {
// state.fontIconNames = res.map((name) => `iconfont ${name}`)
// })
// } else if (name == 'local') {
// getLocalIconfontNames().then((res) => {
// state.fontIconNames = res
// })
// }
}
const onIcon = (icon: string) => {
state.iconSelectorMouseover = state.popoverVisible = false

5
src/components/table/defaultAttribute.ts
View File

@@ -1,6 +1,7 @@
export const defaultAttribute = {
import { VxeTableProps } from "vxe-table";
export const defaultAttribute:VxeTableProps = {
align: 'center',
class: 'ba-data-table w100',
headerCellClassName: 'table-header-cell',
border: true,
stripe: true,

5
src/components/table/header/index.vue
View File

@@ -18,8 +18,9 @@
<div class='table-header ba-scroll-style' v-if='showOperation'>
<slot name='operation'></slot>
<!-- 右侧搜索框和工具按钮 -->
<div class='table-search' v-if='$slots.select'>
<div class='table-search-button-group'>
<div class='table-search' >
<slot name='right'></slot>
<div class='table-search-button-group' v-if='$slots.select'>
<el-button class='table-search-button-item' color='#dcdfe6' plain @click='showSelectChange'>
<Icon size='14' name='el-icon-Search' />
</el-button>

6
src/layouts/admin/components/config.vue
View File

@@ -40,7 +40,7 @@
</div>
</el-col>
</el-row>
<el-row :gutter="10">
<!-- <el-row :gutter="10">
<el-col :span="12">
<div
@click="setLayoutMode('Streamline')"
@@ -72,11 +72,11 @@
<div class="layout-mode-style-name">双栏</div>
</div>
</el-col>
</el-row>
</el-row> -->
</div>
<el-divider border-style="dashed">全局</el-divider>
<div class="layout-config-global">
<el-form-item label="'后台页面切换动画">
<el-form-item label="后台页面切换动画">
<el-select
@change="onCommitState($event, 'mainAnimation')"
:model-value="configStore.layout.mainAnimation"

9
src/layouts/admin/components/navBar/classic.vue
View File

@@ -49,18 +49,25 @@ const onMenuCollapse = () => {
.close-icon {
padding: 2px;
margin: 2px 0 0 4px;
color: v-bind('config.getColorVal("headerBarTabColor")') !important;
}
.close-icon:hover {
background: var(--ba-color-primary-light);
background: v-bind('config.getColorVal("headerBarBackground")');
color: var(--el-border-color) !important;
border-radius: 50%;
}
&.active {
color: v-bind('config.getColorVal("headerBarTabActiveColor")');
.close-icon {
color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;
}
}
&:hover {
color: v-bind('config.getColorVal("headerBarTabActiveColor")');
background-color: v-bind('config.getColorVal("headerBarHoverBackground")');
.close-icon {
color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;
}
}
}
.nav-tabs-active-box {

12
src/layouts/admin/components/navBar/default.vue
View File

@@ -35,17 +35,25 @@ const config = useConfig()
.close-icon {
padding: 2px;
margin: 2px 0 0 4px;
color: v-bind('config.getColorVal("headerBarTabColor")') !important;
}
.close-icon:hover {
background: var(--ba-color-primary-light);
background: v-bind('config.getColorVal("headerBarBackground")');
color: var(--el-border-color) !important;
border-radius: 50%;
}
&.active {
color: v-bind('config.getColorVal("headerBarTabActiveColor")');
.close-icon {
color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;;
}
}
&:hover {
opacity: 1;
color: v-bind('config.getColorVal("headerBarTabActiveColor")');
background-color: v-bind('config.getColorVal("headerBarHoverBackground")');
.close-icon {
color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;
}
}
}
.nav-tabs-active-box {

2
src/layouts/admin/index.vue
View File

@@ -248,7 +248,7 @@ const init = async () => {
icon: 'el-icon-Avatar',
menu_type: 'tab',
url: '',
component: '/src/views/auth/role.vue',
component: '/src/views/auth/role/index.vue',
keepalive: 'auth/role',
extend: 'none',
children: []

2
src/stores/dictData.ts
View File

@@ -11,7 +11,7 @@ export const useDictData = defineStore(
area: []
// 其他接口获取的字典，比如区域
})
const getBasicData = (code: string, arr: string) => {
const getBasicData = (code: string, arr?: string) => {
let list = []
list = state.basic.filter(item => item.code === code)[0]?.children || []
if (arr) {

9
src/styles/app.scss
View File

@@ -117,9 +117,12 @@ body,
}
.ba-operate-dialog .el-dialog__body {
height: 60vh;
padding-top: 0;
padding-top: 20px;
padding-bottom: 52px;
}
.ba-operate-dialog .el-dialog__body .el-scrollbar{
padding-right: 60px;
}
.ba-operate-dialog .el-dialog__footer {
padding: 10px var(--el-dialog-padding-primary);
box-shadow: var(--el-box-shadow);
@@ -127,6 +130,10 @@ body,
width: 100%;
bottom: 0;
}
.ba-operate-dialog .el-form--inline {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
}
.ba-operate-form {
padding-top: 20px;
}

18
src/styles/element.scss
View File

@@ -26,6 +26,19 @@
}
}
.el-dialog__header {
background: var(--el-color-primary);
margin-right: 0;
.el-dialog__headerbtn {
.el-icon {
color: var(--el-color-white);
}
}
.el-dialog__title {
color: var(--el-color-white);
}
}
.el-table {
--el-table-border-color: var(--ba-border-color);
}
@@ -73,3 +86,8 @@
}
}
/* 小屏设备 el-radio-group 样式调整-e */
.vxe-header--row {
background: var(--el-color-primary);
color: var(--el-color-white);
}

1
src/views/auth/menu/index.vue
View File

@@ -64,7 +64,6 @@ const tableStore = new TableStore({
title: '确定删除该菜单吗？'
},
click: (row) => {
popupRef.value.open('编辑菜单', row)
}
}
]

77
src/views/auth/menu/popupForm.vue
View File

@@ -1,22 +1,67 @@
<template>
<el-dialog
class='ba-operate-dialog'
v-model='dialogVisible'
:title='title'
>
<span>This is a message</span>
<el-dialog class="ba-operate-dialog" v-model="dialogVisible" :title="title">
<el-scrollbar>
<el-form :inline="false" :model="form" label-width="120px">
<el-form-item label="上级菜单">
<el-cascader
v-model="form.pid"
:options="tableStore.table.data"
:props="cascaderProps"
style="width: 100%"
/>
</el-form-item>
<el-form-item label="菜单名称">
<el-input v-model="form.name" placeholder="请输入菜单名称" />
</el-form-item>
<el-form-item label="图标">
<IconSelector v-model="form.icon" placeholder="请选择图标" />
</el-form-item>
<el-form-item label="菜单路由">
<el-input v-model="form.path" placeholder="请输入菜单名称" />
</el-form-item>
<el-form-item label="组件路径">
<el-input v-model="form.routeName" placeholder="请输入组件路径，如/src/views/dashboard/index.vue" />
</el-form-item>
<el-form-item label="排序">
<el-input-number v-model="form.sort" :min="0" />
</el-form-item>
<el-form-item label="菜单描述">
<el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" />
</el-form-item>
</el-form>
</el-scrollbar>
<template #footer>
<span class='dialog-footer'>
<el-button @click='dialogVisible = false'>取消</el-button>
<el-button type='primary' @click='submit'>
确认
</el-button>
</span>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submit">确认</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang='ts' setup>
import { ref } from 'vue'
<script lang="ts" setup>
import { ref, inject } from 'vue'
import { reactive } from 'vue'
import TableStore from '@/utils/tableStore'
import IconSelector from '@/components/baInput/components/iconSelector.vue'
const tableStore = inject('tableStore') as TableStore
const cascaderProps = {
label: 'title',
value: 'id'
}
// do not use same name with ref
const form = reactive({
code: 'menu',
icon: '设备月保_设备日保',
id: '88c61dfd02fbdab02e3bf0753d487444',
name: '系统配置',
path: '/app/setting',
pid: 'f517484e241c2fdd7f11a9c3fcaaa109',
remark: '系统配置',
routeName: null,
sort: 0,
type: 0
})
const dialogVisible = ref(false)
const title = ref('新增菜单')
@@ -29,6 +74,4 @@ const submit = () => {
}
defineExpose({ open })
</script>
</script>

3
src/views/auth/role.vue
View File

@@ -1,3 +0,0 @@
<template>
<div>123</div>
</template>

71
src/views/auth/role/index.vue Normal file
View File

@@ -0,0 +1,71 @@
<template>
<div class="default-main">
<TableHeader>
<template v-slot:operation>
<el-button :icon="Plus" type="primary" @click="addMenu">添加</el-button>
</template>
</TableHeader>
<Table ref="tableRef" />
<popupForm ref="popupRef"></popupForm>
</div>
</template>
<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import { ref, onMounted, provide } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
defineOptions({
name: 'auth/role'
})
const popupRef = ref()
const tableStore = new TableStore({
url: '/user-boot/role/selectRoleDetail?id=1',
method: 'POST',
column: [
{ title: '角色名称', field: 'name', align: 'center' },
{ title: '角色编码', field: 'code', align: 'center' },
{ title: '备注', field: 'remark', align: 'center' },
{ title: '状态', field: 'state', align: 'center' },
{
title: '操作',
align: 'center',
width: '130',
render: 'buttons',
buttons: [
{
name: 'edit',
title: '编辑',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'tipButton',
click: row => {
popupRef.value.open('编辑角色', row)
}
},
{
name: 'del',
title: '删除',
type: 'danger',
icon: 'el-icon-Delete',
render: 'confirmButton',
popconfirm: {
confirmButtonText: '确认',
cancelButtonText: '取消',
confirmButtonType: 'danger',
title: '确定删除该角色吗？'
},
click: row => {}
}
]
}
]
})
provide('tableStore', tableStore)
tableStore.table.params.searchValue = ''
onMounted(() => {
tableStore.index()
})
const addMenu = () => {}
</script>

77
src/views/auth/role/popupForm.vue Normal file
View File

@@ -0,0 +1,77 @@
<template>
<el-dialog class="ba-operate-dialog" v-model="dialogVisible" :title="title">
<el-scrollbar>
<el-form :inline="false" :model="form" label-width="120px">
<el-form-item label="上级菜单">
<el-cascader
v-model="form.pid"
:options="tableStore.table.data"
:props="cascaderProps"
style="width: 100%"
/>
</el-form-item>
<el-form-item label="菜单名称">
<el-input v-model="form.name" placeholder="请输入菜单名称" />
</el-form-item>
<el-form-item label="图标">
<IconSelector v-model="form.icon" placeholder="请选择图标" />
</el-form-item>
<el-form-item label="菜单路由">
<el-input v-model="form.path" placeholder="请输入菜单名称" />
</el-form-item>
<el-form-item label="组件路径">
<el-input v-model="form.routeName" placeholder="请输入组件路径，如/src/views/dashboard/index.vue" />
</el-form-item>
<el-form-item label="排序">
<el-input-number v-model="form.sort" :min="0" />
</el-form-item>
<el-form-item label="菜单描述">
<el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入描述" />
</el-form-item>
</el-form>
</el-scrollbar>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submit">确认</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject } from 'vue'
import { reactive } from 'vue'
import TableStore from '@/utils/tableStore'
import IconSelector from '@/components/baInput/components/iconSelector.vue'
const tableStore = inject('tableStore') as TableStore
const cascaderProps = {
label: 'title',
value: 'id'
}
// do not use same name with ref
const form = reactive({
code: 'menu',
icon: '设备月保_设备日保',
id: '88c61dfd02fbdab02e3bf0753d487444',
name: '系统配置',
path: '/app/setting',
pid: 'f517484e241c2fdd7f11a9c3fcaaa109',
remark: '系统配置',
routeName: null,
sort: 0,
type: 0
})
const dialogVisible = ref(false)
const title = ref('新增菜单')
const open = (text: string, data?: anyObj) => {
title.value = text
dialogVisible.value = true
}
const submit = () => {
dialogVisible.value = false
}
defineExpose({ open })
</script>

111
src/views/voltage/sags/operationsManagement/statistics.vue
View File

@@ -1,86 +1,86 @@
<template>
<div class='default-main'>
<TableHeader date-picker :showOperation='false' showSelect>
<div class="default-main">
<TableHeader date-picker :showOperation="false" showSelect>
<template v-slot:select>
<el-form-item label='区域'>
<Area v-model='tableStore.table.params.deptIndex' />
<el-form-item label="区域">
<Area v-model="tableStore.table.params.deptIndex" />
</el-form-item>
</template>
</TableHeader>
<div style='font-weight: bold; background: #fff;text-indent: 1em'>
<span style='color: #000'>
<div style="font-weight: bold; background: #fff; text-indent: 1em">
<span style="color: #000">
(左柱):
<span style='color: #0099cc'>
<span class='smallBlock' style='background: #0099cc'></span>
<span style="color: #0099cc">
<span class="smallBlock" style="background: #0099cc"></span>
投运
</span>
<span style='color: #996600'>
<span class='smallBlock' style='background: #996600'></span>
<span style="color: #996600">
<span class="smallBlock" style="background: #996600"></span>
热备用
</span>
<span style='color: #cc0000'>
<span class='smallBlock' style='background: #cc0000'></span>
<span style="color: #cc0000">
<span class="smallBlock" style="background: #cc0000"></span>
停运
</span>
</span>
&nbsp;&nbsp;
<span style='color: #000'>
<span style="color: #000">
(右柱):
<span style='color: #2e8b57'>
<span class='smallBlock' style='background: #2e8b57'></span>
<span style="color: #2e8b57">
<span class="smallBlock" style="background: #2e8b57"></span>
{{ '在线率≥90 %' }}
</span>
<span style='color: #daa520'>
<span class='smallBlock' style='background: #daa520'></span>
<span style="color: #daa520">
<span class="smallBlock" style="background: #daa520"></span>
{{ '60 %≤在线率 < 90 %' }}
</span>
<span style='color: #cc0000'>
<span class='smallBlock' style='background: #cc0000'></span>
<span style="color: #cc0000">
<span class="smallBlock" style="background: #cc0000"></span>
{{ '在线率 < 60 %' }}
</span>
</span>
</div>
<div class='statistics-main' v-loading='tableStore.table.loading'>
<template v-if='!tableStore.table.loading'>
<div class="statistics-main" v-loading="tableStore.table.loading">
<template v-if="!tableStore.table.loading">
<div>
<my-echart :options='areaStatistics' />
<my-echart :options="areaStatistics" />
</div>
<div>
<vxe-table
height='auto'
height="auto"
auto-resize
:data='tableStore.table.data.area.areaInfo'
v-bind='defaultAttribute'
:data="tableStore.table.data.area.areaInfo"
v-bind="defaultAttribute"
>
<vxe-column field='areaName' title='区域'></vxe-column>
<vxe-column field='numberOfTerminals' title='终端个数' width='80'></vxe-column>
<vxe-column field='normal' title='投运' width='80'></vxe-column>
<vxe-column field='breaks' title='热备用' width='80'></vxe-column>
<vxe-column field='shutdown' title='停运' width='80'></vxe-column>
<vxe-column field='onlineRate' title='在线率（%）'>
<template v-slot:default='scoped'>
<vxe-column field="areaName" title="区域"></vxe-column>
<vxe-column field="numberOfTerminals" title="终端个数" width="80"></vxe-column>
<vxe-column field="normal" title="投运" width="80"></vxe-column>
<vxe-column field="breaks" title="热备用" width="80"></vxe-column>
<vxe-column field="shutdown" title="停运" width="80"></vxe-column>
<vxe-column field="onlineRate" title="在线率（%）">
<template v-slot:default="scoped">
{{ scoped.row.onlineRate === 3.14159 ? '/' : scoped.row.onlineRate }}
</template>
</vxe-column>
</vxe-table>
</div>
<div>
<my-echart :options='factoryStatistics' />
<my-echart :options="factoryStatistics" />
</div>
<div>
<vxe-table
height='auto'
height="auto"
auto-resize
:data='tableStore.table.data.factory.areaInfo'
v-bind='defaultAttribute'
:data="tableStore.table.data.factory.areaInfo"
v-bind="defaultAttribute"
>
<vxe-column field='areaName' title='厂家'></vxe-column>
<vxe-column field='numberOfTerminals' title='终端个数' width='80'></vxe-column>
<vxe-column field='normal' title='投运' width='80'></vxe-column>
<vxe-column field='breaks' title='热备用' width='80'></vxe-column>
<vxe-column field='shutdown' title='停运' width='80'></vxe-column>
<vxe-column field='onlineRate' title='在线率（%）'>
<template v-slot:default='scoped'>
<vxe-column field="areaName" title="厂家"></vxe-column>
<vxe-column field="numberOfTerminals" title="终端个数" width="80"></vxe-column>
<vxe-column field="normal" title="投运" width="80"></vxe-column>
<vxe-column field="breaks" title="热备用" width="80"></vxe-column>
<vxe-column field="shutdown" title="停运" width="80"></vxe-column>
<vxe-column field="onlineRate" title="在线率（%）">
<template v-slot:default="scoped">
{{ scoped.row.onlineRate === 3.14159 ? '/' : scoped.row.onlineRate }}
</template>
</vxe-column>
@@ -90,7 +90,7 @@
</div>
</div>
</template>
<script setup lang='ts'>
<script setup lang="ts">
import TableHeader from '@/components/table/header/index.vue'
import Area from '@/components/form/area/index.vue'
import TableStore from '@/utils/tableStore'
@@ -105,11 +105,12 @@ defineOptions({
name: 'voltage/sags/operationsManagement/statistics'
})
const dictData = useDictData()
const areaStatistics = ref(null)
const factoryStatistics = ref(null)
const areaStatistics = ref()
const factoryStatistics = ref()
const tableStore = new TableStore({
url: '/event-boot/area/getTerminalRunningStatistics',
method: 'POST',
column: [],
loadCallback: () => {
areaStatistics.value = {
legend: {
@@ -144,7 +145,7 @@ const tableStore = new TableStore({
fontSize: 14
},
backgroundColor: 'rgba(0,0,0,0.35)',
formatter: function(params) {
formatter: function (params) {
var tips = ''
tips += params[0].name + '</br/>'
for (var i = 0; i < params.length; i++) {
@@ -164,7 +165,7 @@ const tableStore = new TableStore({
data: tableStore.table.data.area.areaInfo.map((item: any) => item.normalRate),
itemStyle: {
normal: {
color: function(params) {
color: function (params) {
if (params.value != 3.14159) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
@@ -192,7 +193,7 @@ const tableStore = new TableStore({
type: 'bar',
itemStyle: {
normal: {
color: function(params) {
color: function (params) {
if (params.value != 3.14159) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
@@ -218,7 +219,7 @@ const tableStore = new TableStore({
data: tableStore.table.data.area.areaInfo.map((item: any) => item.onlineRate),
itemStyle: {
normal: {
color: function(params) {
color: function (params) {
if (params.value >= 90) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
@@ -289,7 +290,7 @@ const tableStore = new TableStore({
fontSize: 14
},
backgroundColor: 'rgba(0,0,0,0.35)',
formatter: function(params) {
formatter: function (params: any) {
var tips = ''
tips += params[0].name + '</br/>'
for (var i = 0; i < params.length; i++) {
@@ -309,7 +310,7 @@ const tableStore = new TableStore({
data: tableStore.table.data.factory.areaInfo.map((item: any) => item.normalRate),
itemStyle: {
normal: {
color: function(params) {
color: function (params: any) {
if (params.value != 3.14159) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
@@ -337,7 +338,7 @@ const tableStore = new TableStore({
type: 'bar',
itemStyle: {
normal: {
color: function(params) {
color: function (params: any) {
if (params.value != 3.14159) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
@@ -363,7 +364,7 @@ const tableStore = new TableStore({
data: tableStore.table.data.factory.areaInfo.map((item: any) => item.onlineRate),
itemStyle: {
normal: {
color: function(params) {
color: function (params: any) {
if (params.value >= 90) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
@@ -423,7 +424,7 @@ onMounted(() => {
const layout = mainHeight(104) as any
</script>
<style lang='scss' scoped>
<style lang="scss" scoped>
.statistics-main {
box-sizing: border-box;
height: v-bind('layout.height');

2
types/table.d.ts vendored
View File

@@ -7,7 +7,7 @@ import { Mutable } from 'element-plus/es/utils'
declare global {
interface CnTable {
ref: typeof Table | null
data: TableRow[]
data: TableRow[] | any
// 前端分页数据
webPagingData: TableRow[][]
// 表格加载状态