修改主题

This commit is contained in:
GGJ
2024-12-17 11:05:04 +08:00
parent 8c4cc891e5
commit e10ca83ec5
11 changed files with 464 additions and 31 deletions

View File

@@ -0,0 +1,34 @@
import createAxios from '@/utils/request'
//激活主题
export function activateTheme(params: String) {
return createAxios({
url: '/system-boot/theme/activateTheme',
method: 'PUT',
params: params
})
}
//删除主题
export function deleteTheme(params: String) {
return createAxios({
url: '/system-boot/theme/deleteTheme',
method: 'DELETE',
params: params
})
}
//新增主题
export function addTheme(data: anyObj) {
return createAxios({
url: '/system-boot/theme/addTheme',
method: 'POST',
data
})
}
//修改主题
export function updateTheme(data: anyObj) {
return createAxios({
url: '/system-boot/theme/updateTheme',
method: 'PUT',
data
})
}

View File

@@ -23,4 +23,9 @@ export function delMenu(id: string) {
method: 'delete'
})
}
export function getTheme() {
return createAxios({
url: '/system-boot/theme/getTheme',
method: 'get'
})
}

View File

@@ -3,22 +3,22 @@
<el-scrollbar>
<el-form :inline="false" :model="form" label-width="120px">
<el-form-item label="用户名称:">
<el-input maxlength="32" show-word-limit v-model="form.name" :disabled="true"></el-input>
<el-input v-model="form.name" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="登录名称:" class="top">
<el-input maxlength="32" show-word-limit v-model="form.loginName" :disabled="true"></el-input>
<el-input v-model="form.loginName" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="归属部门名称:" class="top">
<el-input maxlength="32" show-word-limit v-model="form.deptName" :disabled="true"></el-input>
<el-input v-model="form.deptName" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="拥有的角色:" class="top">
<el-input maxlength="32" show-word-limit v-model="form.role" :disabled="true"></el-input>
<el-input v-model="form.role" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="电话号码:" class="top">
<el-input maxlength="32" show-word-limit v-model="form.phone" :disabled="true"></el-input>
<el-input v-model="form.phone" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="电子邮箱:" class="top">
<el-input maxlength="32" show-word-limit v-model="form.email" :disabled="true"></el-input>
<el-input v-model="form.email" :disabled="true"></el-input>
</el-form-item>
</el-form>
</el-scrollbar>

View File

@@ -3,15 +3,15 @@
<el-scrollbar>
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
<el-form-item label="校验密码:" prop="password">
<el-input maxlength="32" show-word-limit v-model="form.password" type="password"
<el-input v-model="form.password" type="password"
placeholder="请输入校验密码" show-password />
</el-form-item>
<el-form-item label="新密码:" prop="newPwd" style="margin-top: 20px">
<el-input maxlength="32" show-word-limit v-model="form.newPwd" type="password" placeholder="请输入新密码"
<el-input v-model="form.newPwd" type="password" placeholder="请输入新密码"
show-password />
</el-form-item>
<el-form-item label="确认密码:" prop="confirmPwd" style="margin-top: 20px">
<el-input maxlength="32" show-word-limit v-model="form.confirmPwd" type="password"
<el-input v-model="form.confirmPwd" type="password"
placeholder="请输入确认密码" show-password />
</el-form-item>
</el-form>

View File

@@ -13,10 +13,10 @@
<IconSelector v-model="form.icon" placeholder="请选择图标" />
</el-form-item>
<el-form-item label="菜单路由">
<el-input maxlength="32" show-word-limit v-model="form.path" placeholder="请输入菜单名称" />
<el-input v-model="form.path" placeholder="请输入菜单名称" />
</el-form-item>
<el-form-item label="组件路径">
<el-input maxlength="32" show-word-limit v-model="form.routeName"
<el-input v-model="form.routeName"
placeholder="请输入组件路径,如/src/views/dashboard/index.vue" />
</el-form-item>
<el-form-item label="排序">

View File

@@ -825,12 +825,12 @@ const getRealDataMqttMsg = async () => {
...obj,
// 电压有效值
vRmsA: ((obj.vRmsA * obj.pt)) / 1000,
vRmsB: ((obj.vRmsA * obj.pt)) / 1000,
vRmsC: ((obj.vRmsA * obj.pt)) / 1000,
vRmsB: ((obj.vRmsB * obj.pt)) / 1000,
vRmsC: ((obj.vRmsC * obj.pt)) / 1000,
// 电流有效值
iRmsA: (obj.iRmsA * obj.ct),
iRmsB: (obj.iRmsA * obj.ct),
iRmsC: (obj.iRmsA * obj.ct),
iRmsB: (obj.iRmsB * obj.ct),
iRmsC: (obj.iRmsC * obj.ct),
//基波电压幅值
v1A: ((obj.v1A * obj.pt)) / 1000,
v1B: ((obj.v1B * obj.pt)) / 1000,
@@ -862,12 +862,12 @@ const getRealDataMqttMsg = async () => {
...obj,
// 电压有效值
vRmsA: (obj.vRmsA / obj.pt) * 1000,
vRmsB: (obj.vRmsA / obj.pt) * 1000,
vRmsC: (obj.vRmsA / obj.pt) * 1000,
vRmsB: (obj.vRmsB / obj.pt) * 1000,
vRmsC: (obj.vRmsC / obj.pt) * 1000,
// 电流有效值
iRmsA: obj.iRmsA / obj.ct,
iRmsB: obj.iRmsA / obj.ct,
iRmsC: obj.iRmsA / obj.ct,
iRmsB: obj.iRmsB / obj.ct,
iRmsC: obj.iRmsC / obj.ct,
//基波电压幅值
v1A: (obj.v1A / obj.pt) * 1000,
v1B: (obj.v1B / obj.pt) * 1000,

View File

@@ -33,18 +33,22 @@ const column: any = ref([
{ field: 'startTime', title: '数据起始时间', width: '140px', sortable: true },
{ field: 'endTime', title: '数据结束时间', width: '140px', sortable: true },
{ field: 'itemName', title: '数据来源', width: '100px' },
{ field: 'statisticalInterval', title: '统计间隔', width: '100px', },
{ field: '', title: '时间间隔', width: '140px', },
{ field: 'voltageLevel', title: '电压等级', width: '100px',sortable: true },
{ field: 'volConType', title: ' 电压接线方式', width: '100px', sortable: true },
{ field: 'statisticalInterval', title: '时间间隔(分钟)', width: '120px', },
{ field: 'voltageLevel', title: '电压等级', width: '100px', sortable: true },
{ field: 'volConType', title: ' 电压接线方式', width: '120px', sortable: true },
{
field: 'pt', title: 'PT变比', width: '100px',
},
{ field: 'ct', title: 'CT变比', width: '100px', },
{ field: 'capacitySi', title: '用户协议容量(MVA)', width: '140px', },
{ field: 'capacitySt', title: '供电设备容量(MVA)', width: '140px', },
{ field: 'capacitySscb', title: '基准短路容量(MVA)', width: '140px', },
{ field: 'capacitySscmin', title: '最小短路容量(MVA)', width: '140px', },
{ field: 'capacitySt', title: '供电设备容量(MVA)', width: '140px', },
{ field: 'location', title: ' 测试位置', width: '100px', },
{ field: 'ct', title: 'CT', width: '70px', },
{ field: 'pt', title: 'PT', width: '70px', },
])
const setData = (data: any) => {
@@ -54,6 +58,10 @@ const setData = (data: any) => {
const formatter = (row: any) => {
if (row.column.field == 'voltageLevel') {
return row.cellValue == null ? '/' : voltageLevelList.filter((item: any) => item.id == row.cellValue)[0]?.name
} else if (row.column.field == 'pt') {
return row.row.pt == null ? '/' : (row.row.pt + '/' + row.row.pt1)
} else if (row.column.field == 'ct') {
return row.row.ct == null ? '/' : (row.row.ct + '/' + row.row.ct1)
} else if (row.column.field == 'volConType') {
return row.cellValue == null ? '/' : volConTypeList.filter((item: any) => item.id == row.cellValue)[0]?.name
} else {

View File

@@ -0,0 +1,236 @@
<template>
<el-dialog draggable v-model="dialogVisible" :title="title" :before-close="Cancel">
<el-form :inline="false" :model="configStore" label-width="auto">
<el-divider border-style="dashed">全局</el-divider>
<div class="layout-config-global form-two">
<el-form-item label="组件主名称">
<el-input v-model="configStore.name" placeholder="请输入主题名称" />
</el-form-item>
<el-form-item label="后台页面切换动画">
<el-select v-model="configStore.mainAnimation">
<el-option label="slide-right" value="slide-right"></el-option>
<el-option label="slide-left" value="slide-left"></el-option>
<el-option label="el-fade-in-linear" value="el-fade-in-linear"></el-option>
<el-option label="el-fade-in" value="el-fade-in"></el-option>
<el-option label="el-zoom-in-center" value="el-zoom-in-center"></el-option>
<el-option label="el-zoom-in-top" value="el-zoom-in-top"></el-option>
<el-option label="el-zoom-in-bottom" value="el-zoom-in-bottom"></el-option>
</el-select>
</el-form-item>
<el-form-item label="组件主题色">
<el-color-picker v-model="configStore.elementUiPrimary[0]" />
</el-form-item>
<el-form-item label="表格标题栏背景颜色">
<el-color-picker v-model="configStore.tableHeaderBackground[0]" />
</el-form-item>
<el-form-item label="表格标题栏文字颜色">
<el-color-picker v-model="configStore.tableHeaderColor[0]" />
</el-form-item>
<el-form-item label="表格激活栏颜色">
<el-color-picker v-model="configStore.tableCurrent[0]" />
</el-form-item>
<el-form-item label="组件主描述">
<el-input
v-model="configStore.remark"
:autosize="{ minRows: 2, maxRows: 4 }"
type="textarea"
placeholder="请输入描述"
/>
</el-form-item>
</div>
<el-divider border-style="dashed">侧边栏</el-divider>
<div class="layout-config-aside form-two">
<el-form-item label="侧边菜单栏背景色">
<el-color-picker v-model="configStore.menuBackground[0]" />
</el-form-item>
<el-form-item label="侧边菜单文字颜色">
<el-color-picker v-model="configStore.menuColor[0]" />
</el-form-item>
<el-form-item label="侧边菜单激活项背景色">
<el-color-picker v-model="configStore.menuActiveBackground[0]" />
</el-form-item>
<el-form-item label="侧边菜单激活项文字色">
<el-color-picker v-model="configStore.menuActiveColor[0]" />
</el-form-item>
<el-form-item label="侧边菜单顶栏背景色">
<el-color-picker v-model="configStore.menuTopBarBackground[0]" />
</el-form-item>
</div>
<el-divider border-style="dashed">顶栏</el-divider>
<div class="layout-config-aside form-two">
<el-form-item label="顶栏背景色">
<el-color-picker v-model="configStore.headerBarBackground[0]" />
</el-form-item>
<el-form-item label="顶栏文字色">
<el-color-picker v-model="configStore.headerBarTabColor[0]" />
</el-form-item>
<el-form-item label="顶栏logo">
<el-image
style="height: 50px"
:src="logoFile.url"
:preview-src-list="[logoFile.url]"
v-if="logoFile.url"
class="mr10"
></el-image>
<el-upload
action=""
:show-file-list="false"
:auto-upload="false"
accept=".png,.jpg"
:on-change="chooseImage"
>
<el-button type="primary">上传图片</el-button>
</el-upload>
</el-form-item>
</div>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="onSubmit">确定</el-button>
<el-button @click="Cancel">取消</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject } from 'vue'
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
const dialogVisible = ref(false)
const title = ref('')
import { addTheme, updateTheme } from '@/api/system/subject/index'
const emit = defineEmits(['Cancels'])
const configStore = ref({
// 后台主页面切换动画,可选值<slide-right|slide-left|el-fade-in-linear|el-fade-in|el-zoom-in-center|el-zoom-in-top|el-zoom-in-bottom>
mainAnimation: 'slide-right',
elementUiPrimary: ['#0e8780', '#0e8780'],
tableHeaderBackground: ['#F3F6F9', '#F3F6F9'],
tableHeaderColor: ['#111', '#fff'],
tableCurrent: ['#F3F6F9', '#F3F6F9'],
/* 侧边菜单 */
// 侧边菜单背景色
menuBackground: ['#0e8780', '#1d1e1f'],
// 侧边菜单文字颜色
menuColor: ['#FFFFFF', '#CFD3DC'],
// 侧边菜单激活项背景色
menuActiveBackground: ['#0c7973', '#1d1e1f'],
// 侧边菜单激活项文字色
menuActiveColor: ['#00f5fd', '#3375b9'],
// 侧边菜单顶栏背景色
menuTopBarBackground: ['#0e8780', '#1d1e1f'],
// 顶栏文字色
headerBarTabColor: ['#FFFFFF', '#CFD3DC'],
// 顶栏背景色
headerBarBackground: ['#0e8780', '#1d1e1f'],
logoFile: '',
name: '',
color: '',
faviconFile: '',
remark: ''
})
const logoFile = reactive({
url: '',
raw: ''
})
const open = (e: any) => {
title.value = e.text
dialogVisible.value = true
if (e.text == '修改主题') {
let form = JSON.parse(JSON.stringify(e.row))
for (let k in form) {
if (
k == 'elementUiPrimary' ||
k == 'tableHeaderBackground' ||
k == 'tableHeaderColor' ||
k == 'tableCurrent' ||
k == 'menuBackground' ||
k == 'menuColor' ||
k == 'menuActiveBackground' ||
k == 'menuActiveColor' ||
k == 'menuTopBarBackground' ||
k == 'headerBarTabColor' ||
k == 'headerBarBackground'
) {
form[k] = JSON.parse(form[k])
}
}
logoFile.url = form.logoUrl
configStore.value = form
}
}
// 确定主题
const onSubmit = () => {
configStore.value.faviconFile = configStore.value.logoFile
configStore.value.color = configStore.value.elementUiPrimary[0]
let form = new FormData()
for (let k in configStore.value) {
if (
k == 'logoFile' ||
k == 'faviconFile' ||
k == 'name' ||
k == 'color' ||
k == 'remark' ||
k == 'mainAnimation' ||
k == 'id'
) {
form.append(k, configStore.value[k])
} else if (k == 'logoUrl' || k == 'faviconUrl') {
if (configStore.value.logoFile == null) {
let str = configStore.value[k].match(/base64,([^"]+)/)[1]
let bin = atob(str)
let arr = new Array(bin.length)
for (let i = 0; i < bin.length; i++) {
arr[i] = bin.charCodeAt(i)
}
let b = new Uint8Array(arr)
const blob = new Blob([b], { type: 'image/jpeg' })
form.append('faviconFile', blob)
form.append('logoFile', blob)
}
} else {
form.append(k, JSON.stringify(configStore.value[k]))
}
}
if (title.value == '新增主题') {
addTheme(form).then(res => {
ElMessage.success('新增成功')
Cancel()
})
}
if (title.value == '修改主题') {
updateTheme(form).then(res => {
ElMessage.success('修改成功')
Cancel()
})
}
}
// 取消
const Cancel = () => {
// dialogVisible.value = false
emit('Cancels')
}
/**
* 选择图片上传
* @param e
*/
const chooseImage = (e: any) => {
console.log('🚀 ~ chooseImage ~ e:', URL.createObjectURL(e.raw!))
logoFile.url = URL.createObjectURL(e.raw!)
configStore.value.logoFile = e.raw
// uploadFile(e.raw, 'sgGovern/').then(res => {
// logoFile.name = res.data.name
// logoFile.url = res.data.url
// configStore.logoFile = res.data.name
// ElMessage.success('新增成功')
// })
}
defineExpose({ open })
</script>

View File

@@ -0,0 +1,150 @@
<template>
<div class="default-main">
<TableHeader select ref="TableHeaderRef">
<template #operation>
<el-button icon="el-icon-Plus" type="primary" @click="add">新增</el-button>
</template>
</TableHeader>
<Table ref="tableRef" />
<formTab ref="formTabRef" v-if="show" @Cancels=";(show = false), tableStore.index()" />
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { activateTheme, deleteTheme } from '@/api/system/subject/index'
import formTab from './form/index.vue'
import { ElMessage } from 'element-plus'
import { useConfig } from '@/stores/config'
import { getTheme } from '@/api/systerm'
const configStore = useConfig()
defineOptions({
name: 'user-boot/function/functionTree'
})
const formTabRef = ref()
const TableHeaderRef = ref()
const show = ref(false)
const tableStore: any = new TableStore({
url: '/system-boot/theme/getAllThemes',
method: 'GET',
column: [
{
field: 'index',
title: '序号',
width: '80',
formatter: (row: any) => {
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
}
},
{ field: 'name', title: '主题名称' },
{ field: 'remark', title: '描述' },
// { field: 'logoUrl', title: '主题图标', render: 'image' },
{
title: '操作',
width: '180',
render: 'buttons',
buttons: [
{
name: 'edit',
title: '激活 ',
type: 'primary',
icon: 'el-icon-Plus',
render: 'basicButton',
disabled: row => {
return row.active == 1
},
click: row => {
activateTheme({ id: row.id }).then(res => {
ElMessage({
message: '激活成功!',
type: 'success'
})
tableStore.index()
})
}
},
{
name: 'edit',
title: '修改 ',
type: 'primary',
icon: 'el-icon-Plus',
render: 'basicButton',
click: row => {
show.value = true
setTimeout(() => {
formTabRef.value.open({
text: '修改主题',
row: row
})
}, 10)
}
},
{
name: 'edit',
title: '删除',
type: 'danger',
icon: 'el-icon-Delete',
render: 'confirmButton',
popconfirm: {
confirmButtonText: '确认',
cancelButtonText: '取消',
confirmButtonType: 'danger',
title: '确定删除吗?'
},
click: row => {
deleteTheme({ id: row.id }).then(res => {
ElMessage({
message: '删除成功!',
type: 'success'
})
tableStore.index()
})
}
}
]
}
],
loadCallback: () => {
getTheme().then(res => {
let list: any = [
'elementUiPrimary',
'tableHeaderBackground',
'tableHeaderColor',
'tableCurrent',
'menuBackground',
'menuColor',
'menuTopBarBackground',
'menuActiveBackground',
'menuActiveColor',
'headerBarTabColor',
'headerBarBackground'
]
window.localStorage.setItem('getTheme', JSON.stringify(res.data))
for (let i = 0; i < list.length; i++) {
configStore.setLayout(list[i], JSON.parse(res.data[list[i]]))
}
configStore.setLayout('elementUiPrimary', JSON.parse(res.data['elementUiPrimary']))
})
}
})
provide('tableStore', tableStore)
// 新增主题
const add = () => {
show.value = true
setTimeout(() => {
formTabRef.value.open({
text: '新增主题'
})
}, 10)
}
onMounted(() => {
tableStore.index()
})
</script>

View File

@@ -12,7 +12,7 @@
</div>
<el-form :rules="rules" ref="formRef" size="large" class="login-form" :model="form">
<el-form-item prop="username">
<el-input maxlength="32" show-word-limit ref="usernameRef" v-model="form.username" type="text"
<el-input ref="usernameRef" v-model="form.username" type="text"
clearable style="width: 368px" placeholder="用户名" autocomplete="off">
<template #prefix>
<span class="iconfont icon-yonghu" style="color: #003078"></span>
@@ -20,7 +20,7 @@
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input maxlength="32" show-word-limit ref="passwordRef" v-model="form.password" type="password"
<el-input ref="passwordRef" v-model="form.password" type="password"
placeholder="密码" show-password style="width: 368px" autocomplete="off">
<template #prefix>
<span class="iconfont icon-mima" style="color: #003078"></span>

View File

@@ -3,11 +3,11 @@
<el-scrollbar>
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
<el-form-item label="新密码:" prop="newPwd" style="margin-top: 20px">
<el-input maxlength="32" show-word-limit v-model="form.newPwd" type="password" placeholder="请输入新密码"
<el-input v-model="form.newPwd" type="password" placeholder="请输入新密码"
show-password />
</el-form-item>
<el-form-item label="确认密码:" prop="confirmPwd" style="margin-top: 20px">
<el-input maxlength="32" show-word-limit v-model="form.confirmPwd" type="password"
<el-input v-model="form.confirmPwd" type="password"
placeholder="请输入确认密码" show-password />
</el-form-item>
</el-form>