jsyhsec/energy_storage
7
0
Fork 0
mirror of https://gitee.com/js-yhsec/energy_storage.git synced 2026-05-27 18:59:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

修改菜单+权限+图表渲染

Browse Source
This commit is contained in:
ym1026
2025-09-11 19:01:01 +08:00
parent 45ff73c295
commit 506c2e98f2
26 changed files with 1069 additions and 527 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/public/config/columnList.js
View File

@@ -87,6 +87,8 @@ export const columnList = [
title: '关联权限',
dataIndex: 'permission',
key: 'permission',
ellipsis: true,
scopedSlots: { customRender: 'permission' }
},
{
@@ -581,7 +583,7 @@ export const roleOptions = [
dataIndex: 'is_view',
key: 'is_view',
align: 'center',
scopedSlots: { customRender: 'isQuery' }
scopedSlots: { customRender: 'is_view' }
}
]
},

20
web/src/components/ComTable.vue
View File

@@ -190,16 +190,16 @@ watch(
},
{ deep: true, immediate: true }
)
watch(
() => props.tableH,
(n, o) => {
if (n && n !== o) {
const pageH = data.newTableOpt.page ? 42 : 0
scroll.value = { y: n - pageH - 56 }
}
}
// { deep: true, immediate: true }
)
// watch(
// () => props.tableH,
// (n, o) => {
// if (n && n !== o) {
// const pageH = data.newTableOpt.page ? 42 : 0
// scroll.value = { y: n - pageH - 56 }
// }
// }
// // { deep: true, immediate: true }
// )
function rowClassName(record, index) {
return 'table-row'

149
web/src/components/EditCom.vue
View File

@@ -38,17 +38,18 @@
scroll: { y: 500 }
}"
>
<template #is_add="recordList">
<a-checkbox v-model:checked="recordList.is_add"></a-checkbox>
<template #is_add="{ record, index }">
<a-checkbox v-model:checked="record.is_add"></a-checkbox>
</template>
<template #is_del="recordList">
<a-checkbox v-model:checked="recordList.is_del"></a-checkbox>
<template #is_del="{ record, index }">
<a-checkbox v-model:checked="record.is_del"></a-checkbox>
</template>
<template #is_edit="recordList">
<a-checkbox v-model:checked="recordList.is_edit"></a-checkbox>
<template #is_edit="{ record, index }">
<a-checkbox v-model:checked="record.is_edit"></a-checkbox>
</template>
<template #isQuery="recordList">
<a-checkbox v-model:checked="recordList.isQuery"></a-checkbox>
<template #is_view="{ record, index }">
<a-checkbox v-model:checked="record.is_view"></a-checkbox>
</template>
</TreeTable>
</template>
@@ -120,7 +121,7 @@ export default {
role: 'roleConfirm',
device: 'deviceConfirm',
station: 'stationConfirm',
serviceApi: 'serviceApiConfirm',
serviceApi: 'serviceApiConfirm'
// permission: 'permissionConfirm',
},
form: {},
@@ -304,30 +305,127 @@ export default {
try {
const menuApi = {
add: '/insertRole',
edit: '/deleteRole'
edit: '/updateRole'
}
const { selectedRowKeys } = this.$refs.treeTable[0]
console.log(selectedRowKeys, 'selectedRowKeys')
const { selectedRowKeys ,selectedArr} = this.$refs.treeTable[0]
console.log(selectedRowKeys,selectedArr, 'selectedRowKeys')
// const arr = selectedArr.map((item) => ({
// ...item,
// // 转换操作权限为布尔值
// ...this.getPerOperBoolean(item),
// // 递归处理children
// children: item.children
// ? item.children.map((child) => ({
// ...child,
// ...this.getPerOperBoolean(child),
// }))
// : []
// }))
// console.log(arr,"arr")
const data=this.filterTreeData(selectedRowKeys,this.$refs.treeTable[0].tableData)
const arr = data.map((item) => ({
...item,
// 转换操作权限为布尔值
...this.getPerOperBoolean(item),
// 递归处理children
children: item.children
? item.children.map((child) => ({
...child,
...this.getPerOperBoolean(child),
}))
: []
}))
const paramsDate = {
...this.form
...this.form,
permission:arr
}
// if (this.action == 'edit') {
// paramsDate.role_id = this.record.role_id
// }
if (this.action == 'edit') {
paramsDate.role_id = this.record.role_id
}
// const res = await postReq(menuApi[this.action], paramsDate)
// if (res.errcode === 0) {
// setTimeout(() => {
// this.handleback()
// }, 1000)
// } else {
// throw res
// }
const res = await postReq(menuApi[this.action], paramsDate)
if (res.errcode === 0) {
setTimeout(() => {
this.handleback()
}, 1000)
} else {
throw res
}
} catch (error) {
console.log(error, 'roleConfirm')
}
},
// 定义筛选树形数据的函数
filterTreeData(list1, list2) {
const keySet = new Set(list1);
// 递归处理节点的函数
const filterNode = (node) => {
// 创建新节点对象（浅拷贝）
const newNode = Object.assign({}, node);
// 临时删除children属性以便处理
const { children, ...rest } = newNode;
// 处理子节点
let newChildren = [];
if (children) {
newChildren = children
.map((child) => filterNode(child))
.filter((child) => child !== null);
}
// 重建新节点
const resultNode = Object.assign(rest, {});
if (newChildren.length > 0) {
resultNode.children = newChildren;
}
// 判断是否保留节点
if (keySet.has(node.key)) {
return resultNode;
}
// 保留有符合条件子节点的父节点（移除自身key）
if (newChildren.length > 0) {
return resultNode;
}
return null;
};
// 处理根节点
const result = list2
.map((node) => filterNode(node))
.filter((node) => node !== null);
return result;
},
getPerOperBoolean(data) {
return {
is_add: Boolean(data.is_add)? '1' : '0',
is_del: Boolean(data.is_del)? '1' : '0',
is_edit: Boolean(data.is_edit)? '1' : '0',
is_view: Boolean(data.is_view)? '1' : '0'
}
},
getPermissionData(keys,list){
const arr=[]
// list.forEach(item=>{
// if(keys.include(item.key)){
// arr.push(item)
// if()
// }
// })
},
async stationConfirm() {
try {
const menuApi = {
@@ -366,7 +464,6 @@ export default {
attrs: JSON.stringify({ rated_capacity, rated_current, rated_voltage, reted_power })
}
if (this.action == 'edit') {
paramsDate.device_id = this.record.device_id
}
@@ -451,6 +548,6 @@ export default {
}
:deep(.treeTable) {
width: 550px !important;
width: 750px !important;
}
</style>

4
web/src/components/Home/Alarm.vue
View File

@@ -169,7 +169,9 @@ export default {
},
axisLabel: {
interval: 4,
color: '#fff'
color: '#fff',
fontSize:12
}
},
series: this.lineChartData.ydata

4
web/src/components/Home/Charge.vue
View File

@@ -198,7 +198,9 @@ export default {
},
axisLabel: {
interval: 4,
color: '#fff'
color: '#fff',
fontSize:12
}
},
series: this.chargeChartData.ydata

4
web/src/components/Home/Energy.vue
View File

@@ -166,7 +166,9 @@ export default {
},
axisLabel: {
interval: 4,
color: '#fff'
color: '#fff',
fontSize:12
}
},
series: this.energyChartData.ydata

72
web/src/components/Home/Map.vue
View File

@@ -1,6 +1,5 @@
<template>
<div class="map">
<div ref="mapContent" class="mapContent">
<tdt-map
ref="tiandituMap"
@@ -16,7 +15,7 @@
:position="[marker.lon, marker.lat]"
:key="marker.id"
:icon="marker.iconMap"
style="width: 20px; height: 20px"
style="width: 20px;height: auto"
@click="clickArrayMarker(marker)"
:title="marker.name"
>
@@ -44,11 +43,12 @@
</a-modal>
</div>
</template>
<script>
import { getReq, postReq } from '@/request/api'
import Modal from '@/components/Home/Modal.vue'
import { loadTMap } from '@/utils/loadTMap'
import {gcj02ToWgs84} from '@/utils/gcj02ToWgs84'
import { gcj02ToWgs84, wgs84ToGcj02 } from '@/utils/gcj02ToWgs84'
import { TdtMap } from 'vue-tianditu'
export default {
@@ -57,14 +57,12 @@ export default {
data() {
return {
center: [],
// zoom: 16,
zoom: 2,
center: [116.404, 39.915], // 默认中心点（北京）
zoom: 12,
map: null,
currentMarker: {},
showCtrModal: false,
markers: [],
testVal: {
name: '场站211',
id: '2'
@@ -75,19 +73,11 @@ export default {
},
mounted() {
this.initMap()
// this.getMarkList()
},
methods: {
init(map) {
this.map = map
// console.log(this.map.getCenter(),"this.map.getCenter()")
this.map.centerAndZoom(new T.LngLat(116.404, 39.915), 12);
// 监听地图加载完成事件
this.map.addEventListener('load', () => {
const c= this.map.getCenter()
this.center =gcj02ToWgs84(c);
console.log('GCJ02坐标:', this.center);
});
this.center= [110.404, 40.915]
this.getMarkList()
},
async getMarkList() {
@@ -98,18 +88,13 @@ export default {
const res = await getReq('/queryStationList', query)
if (res.errcode === 0) {
this.markers = res.data.map((item) => {
console.log(gcj02ToWgs84(+item.lon, +item.lat),"gcj02ToWgs84(+item.lon, +item.lat)")
let wgs = +item.lat && +item.lon ? gcj02ToWgs84(+item.lon, +item.lat) : [null, null]
return {
...item,
lon: wgs[0],
lat: wgs[1],
iconMap: !+item.status
? require('../../assets/home/homeIcon1.png')
: require('../../assets/home/homeIcon.png')
}
})
console.log("this.markers ",this.markers )
} else {
this.markers = []
throw res
@@ -121,27 +106,23 @@ export default {
async initMap() {
try {
const [mapKey] = await Promise.all([this.getSysConfig('map-key')])
// const gcj02LngLat=map.getCenter()
// console.log(gcj02LngLat.getLng())
console.log(mapKey,"mapKey")
await loadTMap(mapKey)
// 创建地图实例（需要HTML中存在id为mapContainer的元素）
// this.map = new T.Map("amap-vue");
// // this.map.centerAndZoom(new T.LngLat(116.404, 39.915), 12); // 初始中心点
// const centerGcj02 = this.map.getCenter();
// console.log("GCJ02坐标:", centerGcj02.getLng(), centerGcj02.getLat());
// const centerWgs84=gcj02ToWgs84(centerGcj02.getLng(),centerGcj02.getLat())
// this.center =[]
} catch (err) {
console.error('天地图加载失败:', err)
}
},
// 备用定位方案
// setFallbackLocation() {
// const fallbackCoords = [116.404, 39.915] // 北京坐标
// this.center = fallbackCoords
// if (this.map) {
// this.map.setCenter(new T.LngLat(...fallbackCoords))
// }
// },
async getSysConfig() {
let sysConfig
try {
@@ -157,28 +138,17 @@ export default {
}
return sysConfig
},
async clickArrayMarker(currentVal) {
this.changeStationId = currentVal.station_id
console.log(currentVal, 'cccccccccccccccccccccc')
this.showCtrModal = true
// try {
// const query = {
// // station_id:this.changeStationId
// }
// const res = await postReq(query, '')
// if (res.errcode === 0) {
// this.modalInfo = res.data.records
// } else {
// throw res
// }
// } catch (err) {
// console.log(err, 'eeeeeeeeeeeeeeeerr')
// }
}
}
}
</script>
<style scoped lang="scss">
/* 保持原有样式不变 */
.map {
width: 100%;
height: 100%;

15
web/src/components/Home/Modal.vue
View File

@@ -47,6 +47,7 @@ import DisCharge from '@/components/Home/Modal/DisCharge.vue'
import { getReq, postReq } from '@/request/api'
import { getRunDays, getDateDaysAgo } from '@/utils/dealWithData'
import EnvInfo from './Modal/EnvInfo.vue'
import { markRaw } from 'vue';
export default {
name: 'Home',
@@ -64,44 +65,44 @@ export default {
{
title: '预制舱信息',
class: '',
componentId: PrefabCabin,
componentId: markRaw( PrefabCabin),
infoKey: 'prefab'
},
{
title: '储能充放电量',
class: 'stats-cards',
componentId: DisCharge,
componentId:markRaw( DisCharge),
infoKey: 'energy'
},
{
title: '运行信息',
class: 'operation-status',
componentId: OperationalInfo,
componentId:markRaw( OperationalInfo),
infoKey: 'dataTotal'
},
{
title: '场站收益情况',
class: 'revenue',
componentId: Revenue,
componentId:markRaw( Revenue),
infoKey: 'energy'
},
{
title: '统计信息',
class: 'statistical',
componentId: StatisticalInfo,
componentId:markRaw( StatisticalInfo),
infoKey: ''
},
{
title: '设备利用率',
class: '',
componentId: Utilization,
componentId:markRaw( Utilization),
infoKey: 'energy'
},
{
title: '环境信息',
class: 'envInfo',
componentId: EnvInfo,
componentId:markRaw( EnvInfo),
infoKey: 'dataTotal'
}
],

4
web/src/components/Home/Pv.vue
View File

@@ -166,7 +166,9 @@ export default {
},
axisLabel: {
interval: 4,
color: '#fff'
color: '#fff',
fontSize:12
}
},
series: this.pvChartData.ydata

2
web/src/components/SearchBox.vue
View File

@@ -258,7 +258,7 @@ input:-internal-autofill-selected {
}
.label {
width: 40px;
width: 80px;
color: var(--theme-text-default);
}
.top-right,

22
web/src/components/TreeTable.vue
View File

@@ -8,18 +8,19 @@
:data-source="tableData"
:pagination="false"
:row-class-name="(record, index) => rowClassName(record, index)"
row-key="id"
row-key="key"
size="middle"
:row-selection="rowSelection"
:indent-size="30"
:check-strictly="false"
@resizeColumn="handleResizeColumn"
>
<template #bodyCell="{ column, record }">
<template #bodyCell="{ text, record, index, column }">
<template v-if="column.scopedSlots">
<slot
v-bind="record"
v-bind="{record,index}"
:name="column.scopedSlots ? column.scopedSlots.customRender : ''"
></slot>
</template>
</template>
@@ -85,6 +86,7 @@ export default {
realColumns: [],
realTableData: [],
selectedRows: {},
defaultTabOpt: {
page: true,
align: 'center',
@@ -149,6 +151,8 @@ export default {
onSelectChange(selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys
this.selectedRows = selectedRows[selectedRows.length - 1]
this.selectedArr=selectedRows
console.log(selectedRowKeys, this.selectedArr ,"selectedRowKeys")
this.$emit('getSelectedIds', selectedRowKeys)
},
onSelect(record, selected) {
@@ -232,6 +236,8 @@ export default {
</script>
<style lang="scss" scoped>
:deep(.ant-table-body) {
border-radius: 0px 0px 20px 20px !important;
.ant-table-cell {
background: var(--theme-bg) !important;
}
@@ -272,8 +278,9 @@ export default {
}
:deep(.ant-table) {
border-radius:20px 20px 0 0 !important;
// border-radius:20px 20px 0 0 !important;
overflow: hidden; /* 确保圆角生效 */
}
:deep(.ant-table-wrapper .ant-table.ant-table-bordered >.ant-table-container){
border-inline-start:none!important;
@@ -516,6 +523,8 @@ export default {
}
:deep(.ant-table-wrapper .ant-table) {
border: 1px solid $table-border;
background-color: transparent !important;
}
@@ -525,4 +534,9 @@ export default {
:deep(.ant-table-wrapper .ant-table-thead th.ant-table-column-has-sorters:hover) {
background: var(--table-select) !important;
}
:deep(.ant-table-wrapper .ant-table-row-expand-icon){
background:#2c538a!important;
}
</style>

227
web/src/components/statisticalAnalysis/energyEchart.vue
View File

@@ -17,7 +17,6 @@
ref="comTable"
:table-option="tableOption"
:page-option="pageOption"
:table-h="tableH"
></ComTable>
</div>
</div>
@@ -26,10 +25,16 @@
import { processData } from '@/utils/dealWithData'
import { postReq } from '@/request/api'
import ComTable from '@/components/ComTable'
// import { debounce } from 'lodash';
export default {
name: 'StatisicalAnView',
components: { ComTable },
props: {
pageOption: {
type: Object,
default: () => ({}), // 默认空对象
required: false // 非必须
},
tableInfo: {
type: Object,
default: () => ({}), // 默认空对象
@@ -50,6 +55,11 @@ export default {
default: () => ({}), // 默认空对象
required: false // 非必须
},
chartDatav: {
type: Object,
default: () => ({}), // 默认空对象
required: false // 非必须
},
tableData: {
type: Array,
default: () => [] // 默认空对象
@@ -64,94 +74,172 @@ export default {
},
select: false
},
tableH: 0,
chartInstances: [] // 存储 ECharts 实例
}
},
watch: {
chartData: {
handler(n) {
console.log(n, 'nnnnnnnnnnnnnnnnnnnnnnn')
handler(newVal) {
if (newVal && Object.keys(newVal).length > 0) {
this.$nextTick(() => {
this.initCharts()
window.addEventListener('resize', this.handleResize)
})
// this.destroyCharts(); // 先销毁旧图表
this.initBarCharts(); // 重新初始化
});
}
},
deep: true,
// immediate: true,
},
chartDatav: {
handler(newVal) {
if (newVal && Object.keys(newVal).length > 0) {
this.$nextTick(() => {
// this.destroyCharts(); // 先销毁旧图表
this.initLineCharts(); // 重新初始化
});
}
},
deep: true,
// immediate: true,
},
},
mounted() {
// this.initCharts()
// window.addEventListener('resize', this.handleResize)
window.addEventListener('resize', this.handleResize);
},
beforeUnmount() {
window.removeEventListener('resize', this.handleResize)
this.chartInstances.forEach((chart) => chart && chart.dispose())
window.removeEventListener('resize', this.handleResize);
this.destroyCharts();
},
methods: {
initCharts() {
this.chartOptions.forEach((option, index) => {
const dom = this.$refs[`chartContainer${index}`][0]
if (!dom) return
const chart = this.$echarts.init(dom)
this.chartInstances.push(chart) // 存储实例
const keys= option.infoKeys.map((item) => item.key)
// 设置图表配置
chart.setOption({
destroyCharts() {
this.chartInstances.forEach((chart) => {
if (chart && !chart.isDisposed()) {
chart.dispose(); // 销毁旧图表
}
});
this.chartInstances = []; // 清空实例数组
},
// 公共 ECharts 配置
getCommonOption(option, dataKeys, isLineChart = false) {
return {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
axisPointer: { type: 'shadow' },
},
legend: {
top: 20,
textStyle: {
color: '#fff'
}
textStyle: { color: '#fff' },
},
grid: {
left: '3%',
right: '3%',
bottom: '5%',
containLabel: true
containLabel: true,
},
xAxis: {
type: 'category',
data: processData(this.chartData,keys)
.dates,
axisLine: {
lineStyle: { type: 'dashed', color: '#435463' }
},
axisLabel: {
color: '#fff'
}
data: isLineChart ? this.generateTimePoints() : processData(this.chartData, dataKeys).dates,
axisLine: { lineStyle: { color: '#fff' } },
axisLabel: { color: '#fff' },
},
yAxis: {
type: 'value',
splitLine: {
lineStyle: { type: 'dashed', color: '#435463' }
splitLine: { lineStyle: { type: 'dashed', color: '#435463' } },
axisLabel: { color: '#fff' },
},
axisLabel: {
color: '#fff'
};
},
generateTimePoints() {
const timePoints = []
for (let hour = 0; hour <= 24; hour++) {
for (let minute = 0; minute < 60; minute += 10) {
// 处理24:00的特殊情况
if (hour === 24 && minute === 0) {
timePoints.push('24:00')
break
}
// 格式化小时和分钟，确保两位数
const formattedHour = hour.toString().padStart(2, '0')
const formattedMinute = minute.toString().padStart(2, '0')
timePoints.push(`${formattedHour}:${formattedMinute}`)
}
}
return timePoints
},
series: option.infoKeys.map((info, i) => {
return {
// 初始化柱状图
initBarCharts() {
this.chartOptions.forEach((option, index) => {
if (option.type === 'bar') {
const dom = this.$refs[`chartContainer${index}`]?.[0];
if (!dom) return;
const chart = this.$echarts.init(dom);
this.chartInstances.push(chart);
const dataKeys = option.infoKeys.map((item) => item.key);
const commonOption = this.getCommonOption(option, dataKeys);
chart.setOption({
...commonOption,
series: option.infoKeys.map((info, i) => ({
name: info.label,
smooth: true,
type: option.type,
type: 'bar',
barWidth: 10,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: info.lineColor
color: info.lineColor,
},
emphasis: {
focus: 'series'
data: processData(this.chartData, dataKeys).values[i],
})),
});
}
});
},
// 初始化折线图
initLineCharts() {
this.chartOptions.forEach((option, index) => {
if (option.type === 'line') {
const dom = this.$refs[`chartContainer${index}`]?.[0];
if (!dom) return;
const chart = this.$echarts.init(dom);
this.chartInstances.push(chart);
const dataKeys = option.infoKeys.map((item) => item.key);
const commonOption = this.getCommonOption(option, dataKeys, true);
chart.setOption({
...commonOption,
dataZoom: [
{
type: 'slider',
show: true,
xAxisIndex: 0,
start: 0,
end: 20,
height: 20,
bottom: 10,
},
{
type: 'inside',
xAxisIndex: 0,
start: 0,
end: 20,
},
],
series: option.infoKeys.map((info, i) => ({
name: info.label,
type: 'line',
smooth: true,
showSymbol: false,
itemStyle: { color: info.lineColor },
areaStyle: {
global: false,
color: {
type: 'linear',
x: 0,
@@ -159,32 +247,33 @@ export default {
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: info.colorStart }, // 顶部颜色
{ offset: 1, color: info.colorEnd } // 底部颜色
]
}
{ offset: 0, color: info.colorStart },
{ offset: 1, color: info.colorEnd },
],
},
global: false,
showSymbol: false,
data: processData(
this.chartData,
keys
).values[i]
}
})
})
})
},
data: this.chartDatav[info.key],
})),
});
}
});
},
handleResize () {
this.chartInstances.forEach((chart) => chart && chart.resize())
this.chartInstances.forEach((chart) => chart && chart.resize());
// this.handleResize = debounce(this.resize, 300);
},
resize() {
this.chartInstances.forEach((chart) => chart && chart.resize());
},
handlePagesizeChange(pageOption) {
this.$emit('pagesizeChange_energy', pageOption)
}
}
},
}
</script>
@@ -242,5 +331,11 @@ export default {
min-height: 500px;
width: 100%;
padding-right: 10px;
padding-bottom: 10px;
.comtable{
height:610px;
// overflow: scroll;
}
}
</style>

13
web/src/utils/btnList.js
View File

@@ -1,4 +1,3 @@
import route from 'vue-router'
const btnList = [
{ label: '', type: '', disFlag: '' },
{ label: '新增', type: 'add', disFlag: 'is_add', icon: 'icon-add' },
@@ -8,14 +7,16 @@ const btnList = [
]
function getBtns(arr) {
console.log(this.$route, 'route')
// JSON.parse(localStorage.getItem('permission')).find((item)=>item.route==)
// const permissions =
// JSON.parse(localStorage.getItem('permission')) || {}
const curPermission =
JSON.parse(localStorage.getItem('permission')).find(
(item) => item.route == this.$route.fullPath
) || {}
// console.log(this.$route, curPermission, localStorage.getItem('permission'), 'curPermission')
const btns = []
btnList.forEach((item) => {
if (arr.includes(item.label)) {
// item.disabled = !Boolean(permissions[item.disFlag])
// item.disabled = !Boolean(curPermission[item.disFlag])
btns.push(item)
}
})

2
web/src/utils/gcj02ToWgs84.js
View File

@@ -63,7 +63,7 @@ export function gcj02ToWgs84(lng, lat) {
/**
* WGS-84 转 GCJ-02（用于迭代优化）
*/
function wgs84ToGcj02(lng, lat) {
export function wgs84ToGcj02(lng, lat) {
if (outOfChina(lng, lat)) {
return [lng, lat]
}

32
web/src/utils/wgs84ToGcj02.js Normal file
View File

@@ -0,0 +1,32 @@
function transformlat(lonx, laty) {
/* 略 */
}
function transformlng(lonx, laty) {
/* 略 */
}
// WGS-84 转 GCJ-02 坐标
export function wgs84ToGcj02(lon, lat) {
const PI = 3.1415926535897932384626
const a = 6378245.0
const ee = 0.00669342162296594323
// if (outOfChina(lon, lat)) {
// return [lon, lat]
// }
let dlat = transformlat(lon - 105.0, lat - 35.0)
let dlon = transformlng(lon - 105.0, lat - 35.0)
const radlat = (lat / 180.0) * PI
let magic = Math.sin(radlat)
magic = 1 - ee * magic * magic
const sqrtmagic = Math.sqrt(magic)
dlat = (dlat * 180.0) / (((a * (1 - ee)) / (magic * sqrtmagic)) * PI)
dlon = (dlon * 180.0) / ((a / sqrtmagic) * Math.cos(radlat) * PI)
const mglat = lat + dlat
const mglon = lon + dlon
return [mglon, mglat]
}
// // 辅助函数保持原样...
// function outOfChina(lon, lat) {
// /* 略 */
// }

221
web/src/views/MainView.vue
View File

@@ -43,134 +43,141 @@ export default {
return {
currentKey: '',
subCurrentKey: '',
menuList: [
{
name: '系统总览',
path: '/home'
},
{
name: '运行监控',
path: '/monitor'
},
{
name: '预测管理',
path: '/predict'
},
{
name: '统计分析',
path: '/statisticalAnalysis'
},
{
name: '系统管理',
path: '/system',
children: [
{
name: '用户管理',
path: '/user'
},
{
name: '角色管理',
path: '/role'
},
{
name: '权限管理',
icon: 'icon-caidanguanli'
},
{
name: '场站管理',
path: '/station',
icon: 'icon-caidanguanli'
},
{
name: '服务管理',
icon: 'icon-bumenguanli'
},
{
name: '策略管理',
path: '/policy'
},
{
name: '设备管理',
path: '/device '
},
{
name: '告警日志',
path: '/log'
},
{
name: '系统日志',
path: '/syslog'
}
]
}
],
menuList: [],
// menuList: [
// {
// name: '系统总览',
// path: '/home'
// },
// {
// name: '运行监控',
// path: '/monitor'
// },
// {
// name: '预测管理',
// path: '/predict'
// },
// {
// name: '统计分析',
// path: '/statisticalAnalysis'
// },
// {
// name: '系统管理',
// path: '/system',
// children: [
// {
// name: '用户管理',
// path: '/user'
// },
// {
// name: '角色管理',
// path: '/role'
// },
// {
// name: '权限管理',
// icon: 'icon-caidanguanli'
// },
// {
// name: '场站管理',
// path: '/station',
// icon: 'icon-caidanguanli'
// },
// {
// name: '服务管理',
// icon: 'icon-bumenguanli'
// },
// {
// name: '策略管理',
// path: '/policy'
// },
// {
// name: '设备管理',
// path: '/device '
// },
// {
// name: '告警日志',
// path: '/log'
// },
// {
// name: '系统日志',
// path: '/syslog'
// }
// ]
// }
// ],
subMenu: []
}
},
computed: {
dynamicMenuList() {
return this.generateMenu(JSON.parse(localStorage.getItem('permission')))
}
},
watch: {
$route: {
handler(n) {
console.log(n,"nnnnnnnnnnnnnn")
this.subMenu =n.matched[1].children || []
},
immediate: true
immediate: true,
handler(to) {
console.log(this.dynamicMenuList, 'this.dynamicMenuList')
// // 更新当前激活的菜单项
// // this.currentKey = to.matched[0]?.path || ''
this.menuList = this.dynamicMenuList
// 解析当前路由路径
const pathSegments = to.path.split('/').filter(Boolean)
// 处理主菜单激活状态
this.currentKey = pathSegments.length > 0 ? `/${pathSegments[0]}` : ''
// 处理子菜单逻辑
this.handleSubMenu(pathSegments,to)
}
}
},
mounted() {
this.initRoute()
// this.initRoute()
},
methods: {
// 过滤函数：根据权限数据过滤路由并附加权限信息
filterRoutes(routes, permissions) {
return routes.filter((route) => {
let hasViewPermission = false
// 查找当前路由对应的权限项
const routePermissions = permissions.filter((perm) => perm.route === route.path)
// 新增子菜单处理方法
handleSubMenu(pathSegments,to) {
// 查找当前激活的主菜单项
const activeMainMenu = this.menuList.find((menu) => menu.path === `/${pathSegments[0]}`)
// 如果有权限项，附加到路由对象
if (routePermissions.length > 0) {
route.permissions = routePermissions;
hasViewPermission = true
// 更新子菜单列表
this.subMenu = activeMainMenu?.children || []
// 处理子菜单激活状态
if (pathSegments.length > 1) {
this.subCurrentKey = `/${pathSegments[1]}`
} else {
this.subCurrentKey = ''
}
// 检查是否有查看权限
// const hasViewPermission = routePermissions.some((perm) =>
// perm.is_view === '1'
// );
// 递归处理子路由
if (route.children && route.children.length) {
route.children = this.filterRoutes(route.children, permissions)
// 自动跳转至默认子菜单（当主菜单有子菜单时）
if (this.subMenu.length > 0 && to.path === `/${pathSegments[0]}`) {
const defaultPath = this.subMenu[0].path
this.$router.replace(`/${pathSegments[0]}/${defaultPath}`)
}
// 保留有权限的路由或包含有效子路由的父路由
return hasViewPermission || (route.children && route.children.length)
})
},
initRoute() {
console.log(localStorage.getItem('permission'), "localStorage.getItem('permission')")
// 执行过滤
// const filteredRoutes = this.filterRoutes(
// this.menuList,
// JSON.parse(localStorage.getItem('permission'))
// )
console.log( this.$route.matched, 'filteredRoutes')
this.subMenu = this.$route.matched[1].children || []
// this.menuList= JSON.parse(localStorage.getItem('permission'))
// this.subMenu =filteredRoutes[0].children||[]
this.currentKey = '/' + this.$route.fullPath.split('/')[1]
this.subCurrentKey = this.$route.fullPath.split('/')[2]
console.log(this.subCurrentKey)
generateMenu(routes) {
console.log(routes, 'routes')
return routes.map((route) => ({
...route,
title: route.name,
path: route.route,
children: route.children ? this.generateMenu(route.children) : []
}))
},
menuClick(menu) {
this.currentKey = menu.path
this.currentKey = '/' + menu.path
this.subMenu = menu.children || []
this.$router.push(menu.path)
const targetPath = menu.children?.length > 0 ? menu.path + menu.children[0].path : menu.path
this.$router.push(targetPath)
},
subMenuClick(subMenu) {
console.log(subMenu, subMenu.path)
this.subCurrentKey = subMenu.path
this.$router.push('/system' + subMenu.path)
}

462
web/src/views/statisticalAnalysis.vue
View File

@@ -18,19 +18,39 @@
:title-option="{ title: '', info: '' }"
@onSearch="onSearch"
>
<template #stationSelect="item">
<a-select
style="width: 120px;"
:dropdown-match-select-width="false"
v-model:value="stationId"
allow-clear
@change="changeStation"
>
<a-select-option
:value="option.value"
v-for="option in stationList"
:key="option.value"
>
{{ option.label }}
</a-select-option>
</a-select>
</template>
</searchBox>
</div>
<div class="main_content">
<a-spin :spinning="loading.chart || loading.table">
<energyEchart
:key="activeKey"
:key="`${activeKey}_${renderKey}`"
:chart-options="echartsInfo[activeKey].chartOptions"
:chart-data="echartsInfo[activeKey].chartData"
:chart-datav="echartsInfo[activeKey].chartDatav"
:columns="tableList[activeKey].columns"
:page-option="tableList[activeKey].pageOption"
:table-info="tableList[activeKey].tableInfo"
:table-data="tableList[activeKey].tableData"
@pagesizeChange="pagesizeChange()"
></energyEchart>
</a-spin>
</div>
</div>
</template>
@@ -47,6 +67,12 @@ export default {
data() {
return {
loading: {
chart: false,
table: false
},
stationId: undefined,
renderKey: 0,
categoryArr: [
{
type: 1,
@@ -71,10 +97,18 @@ export default {
type: 'datePick1',
value: [],
key: 'time'
},
{
label: '场站切换',
type: 'slot',
value: [],
key: 'station',
slotName: 'stationSelect'
}
],
stationList: [],
echartsInfo: {
0: {
1: {
chartOptions: [
{
title: '充放电分析',
@@ -96,19 +130,19 @@ export default {
]
},
{
title: '电压与电流分析',
title: '今日电压与电流分析',
type: 'line',
dataKey: 'stock',
infoKeys: [
{
key: 'key1',
key: 'V',
label: '电压',
lineColor: '#3F80F2',
colorStart: ' rgba(10, 250, 106, 0.15)',
colorEnd: ' rgba(171, 255, 249, 0.3)'
},
{
key: 'key2',
key: 'I',
label: '电流',
lineColor: '#A9A6FF',
colorStart: ' rgba(10, 250, 106, 0.15)',
@@ -117,12 +151,12 @@ export default {
]
},
{
title: '功率分析',
title: '今日功率分析',
type: 'line',
dataKey: 'yearly',
infoKeys: [
{
key: 'key1',
key: 'P',
label: '功率',
lineColor: '#00FFFB',
colorStart: ' rgba(10, 250, 106, 0.15)',
@@ -131,17 +165,16 @@ export default {
]
}
],
chartData: {}
chartData: {},
chartDatav: {},
},
1: {
2: {
chartOptions: [
{
title: '发电电量分析',
type: 'bar',
dataKey: 'sales',
infoKeys: [
{ key: 'storage_elect_in', label: '日发电电量', lineColor: '#2A82E4' },
]
infoKeys: [{ key: 'storage_elect_in', label: '日发电电量', lineColor: '#2A82E4' }]
},
{
title: '运行状态分析',
@@ -153,19 +186,19 @@ export default {
]
},
{
title: '电压与电流分析',
title: '今日电压与电流分析',
type: 'line',
dataKey: 'stock',
infoKeys: [
{
key: 'key1',
key: 'V',
label: '电压',
lineColor: '#3F80F2',
colorStart: ' rgba(10, 250, 106, 0.15)',
colorEnd: ' rgba(171, 255, 249, 0.3)'
},
{
key: 'key2',
key: 'I',
label: '电流',
lineColor: '#A9A6FF',
colorStart: ' rgba(10, 250, 106, 0.15)',
@@ -174,12 +207,12 @@ export default {
]
},
{
title: '功率分析',
title: '今日功率分析',
type: 'line',
dataKey: 'yearly',
infoKeys: [
{
key: 'key1',
key: 'P',
label: '功率',
lineColor: '#00FFFB',
colorStart: ' rgba(10, 250, 106, 0.15)',
@@ -190,15 +223,13 @@ export default {
],
chartData: {}
},
2: {
3: {
chartOptions: [
{
title: '充电分析',
type: 'bar',
dataKey: 'sales',
infoKeys: [
{ key: 'storage_elect_in', label: '日充电电量', lineColor: '#2A82E4' },
]
infoKeys: [{ key: 'storage_elect_in', label: '日充电电量', lineColor: '#2A82E4' }]
},
{
title: '运行状态分析',
@@ -211,19 +242,19 @@ export default {
]
},
{
title: '电压与电流分析',
title: '今日电压与电流分析',
type: 'line',
dataKey: 'stock',
infoKeys: [
{
key: 'key1',
key: 'V',
label: '电压',
lineColor: '#3F80F2',
colorStart: ' rgba(10, 250, 106, 0.15)',
colorEnd: ' rgba(171, 255, 249, 0.3)'
},
{
key: 'key2',
key: 'I',
label: '电流',
lineColor: '#A9A6FF',
colorStart: ' rgba(10, 250, 106, 0.15)',
@@ -232,12 +263,12 @@ export default {
]
},
{
title: '功率分析',
title: '今日功率分析',
type: 'line',
dataKey: 'yearly',
infoKeys: [
{
key: 'key1',
key: 'P',
label: '功率',
lineColor: '#00FFFB',
colorStart: ' rgba(10, 250, 106, 0.15)',
@@ -249,23 +280,24 @@ export default {
chartData: {}
}
},
activeKey: 0,
activeKey: 1,
interval:null,
tabList: [
{
key: 0,
key: 1,
name: '储能设备'
},
{
key: 1,
key: 2,
name: '光伏设备'
},
{
key: 2,
key: 3,
name: '充电设备'
}
],
tableList: {
0: {
1: {
columns: [
{
title: '设备ID',
@@ -339,7 +371,7 @@ export default {
count: 1
}
},
1: {
2: {
columns: [
{
title: '设备ID',
@@ -400,7 +432,7 @@ export default {
count: 1
}
},
2: {
3: {
columns: [
{
title: '设备ID',
@@ -471,134 +503,298 @@ export default {
}
},
watch: {
activeKey(newVal, oldVal) {
console.log(newVal, oldVal,"activeKey")
// 清空旧数据（可选）
if( this.echartsInfo[oldVal]){
this.echartsInfo[oldVal].chartData = {};
this.tableList[oldVal].tableData = [];
// // 重新加载数据
this.getTableList()
this.getEchartsList()
}
activeKey: {
handler(newVal) {
if (!newVal) return;
// 清除之前的数据
this.resetDataForInactiveKey();
// 并行加载新数据
Promise.all([
this.getEchartsListForActiveKey(),
this.getTableListForActiveKey()
]).then(() => {
this.$nextTick(() => {
this.getStatCharts();
});
});
},
immediate: true // 添加立即执行
}
},
async mounted() {
await Promise.all([this.getTableList(), this.getEchartsList()])
// 优先加载第一个页面(activeKey=1)所需的数据
await Promise.all([
this.getStationList(),
this.getEchartsListForActiveKey(),
this.getTableListForActiveKey()
]);
// 初始化实时刷新
this.startRealtimeRefresh();
},
beforeUnmount() {
console.log('beforeUnmount')
clearInterval(this.interval); // 组件销毁时清除定时器
},
beforeUnmount() {},
methods: {
forceRerender() {
this.renderKey += 1;
},
resetDataForInactiveKey() {
// 重置非当前激活页面的数据，减少内存占用
Object.keys(this.echartsInfo).forEach((key) => {
if (key != this.activeKey) {
this.echartsInfo[key].chartData={}
this.echartsInfo[key].chartDatav={}
}
});
Object.keys(this.tableList).forEach((key) => {
if (key != this.activeKey) {
this.echartsInfo[key].tableData={}
}
});
},
async getEchartsListForActiveKey() {
if (!this.activeKey) return;
this.loading.chart = true;
const currentInfo = this.echartsInfo[this.activeKey];
const query = {
...this.paramsDate,
category: this.activeKey
};
try {
const res = await getReq('/queryStatDayList', query);
if (res.errcode === 0) {
this.echartsInfo[this.activeKey].chartData=res.data
this.loading.chart = false;
} else {
throw res;
}
} catch (error) {
this.loading.chart = false;
this.echartsInfo[this.activeKey].chartData={}
}
},
// 专门获取当前激活页面的表格数据
async getTableListForActiveKey() {
this.loading.table = true;
if (!this.activeKey) return;
const currentInfo = this.tableList[this.activeKey];
const query = {
...this.paramsDate,
category: this.activeKey,
page_size: currentInfo.pageOption.pageSize,
pageNumber: currentInfo.pageOption.page
};
try {
const res = await getReq('/queryStatDayList', query);
if (res.errcode === 0) {
this.tableList[this.activeKey].tableData=res.data.list || res.data
this.tableList[this.activeKey].pageOption.count=res.data.count || 0
this.loading.table = false;
} else {
throw res;
}
} catch (error) {
this.tableList[this.activeKey].tableData=[]
this.tableList[this.activeKey].pageOption.count= 0
this.loading.table = false;
}
},
startRealtimeRefresh() {
this.interval = setInterval(() => {
if (this.activeKey) {
this.getStatCharts(); // 定时获取最新实时数据
}
}, 10000); // 30秒刷新一次
},
async getStationList() {
const params = {
page_size: 1000,
page: 1
}
try {
const res = await getReq('/queryStationList', params)
if (res.errcode === 0) {
this.stationList = res.data.map((item) => {
return {
value: item.station_id,
label: item.name
}
})
if (this.stationList.length) {
if (!this.stationId) {
this.stationId = this.stationList[0].value
}
//V I P
}
} else {
const err = { tip: res.errmsg }
throw err
}
} catch (error) {
//统一处理报错提示
}
},
pagesizeChange(e) {
this.tableList[this.activeKey].pageOption.pageSize = e.pageSize
this.tableList[this.activeKey].pageOption.page = e.page
this.getTableList()
this.getTableListForActiveKey()
},
onSearch(data) {
this.paramsDate.start_date = data.time ? data.time[0] : ''
this.paramsDate.end_date = data.time ? data.time[1] : ''
this.tableList[this.activeKey].pageOption.page = 1
this.getTableList()
this.getEchartsList()
this.getStationList(),
this.getEchartsListForActiveKey(),
this.getTableListForActiveKey()
},
async getEchartsList() {
changeStation() {
this.getStatCharts();
},
// async getEchartsList() {
// const key = activeKey || this.activeKey;
// if (!key) return;
// const currentInfo = this.echartsInfo[this.activeKey]
// const query = {
// ...this.paramsDate,
// category: this.activeKey
// }
// try {
// const res = await getReq('/queryStatDayList', query)
// if (res.errcode === 0) {
// this.echartsInfo[this.activeKey].chartData = res.data
// console.log(
// this.echartsInfo[this.activeKey].chartData,
// ' this.echartsInfo[this.activeKey].chartData'
// )
// } else {
// throw res
// }
// } catch (error) {
// this.echartsInfo[this.activeKey].chartData = {}
// }
// },
async getStatCharts() {
const currentInfo = this.echartsInfo[this.activeKey]
const query = {
...this.paramsDate,
category: this.categoryArr.map((item) => item.label == this.activeKey)[0].type,
// start_date: getDateDaysAgo(7 - 1),
// end_date: getDateDaysAgo(0)
dt: this.paramsDate.end_date,
station_id: this.stationId,
category: this.activeKey
}
try {
const res = await getReq('/queryStatDayList', query)
const res = await getReq('/queryStatCharts', query)
if (res.errcode === 0) {
this.echartsInfo[this.activeKey].chartData = res.data
console.log(
this.echartsInfo[this.activeKey].chartData,
' this.echartsInfo[this.activeKey].chartData'
)
this.echartsInfo[this.activeKey].chartDatav = {
"V":[100.0,100.0,100.0], // 电压曲线
"I":[10.0,10.0,10.0], // 电流曲线
"P":[1000.0,1000.0,1000.0], // 功率曲线
}
// x轴0点到24点
} else {
throw res
}
} catch (error) {
this.echartsInfo[this.activeKey].chartData = {}
this.echartsInfo[this.activeKey].chartDatav = {
"V":[100.0,100.0,100.0], // 电压曲线
"I":[10.0,10.0,10.0], // 电流曲线
"P":[1000.0,1000.0,1000.0], // 功率曲线
}
}
},
async getTableList() {
const currentInfo = this.tableList[this.activeKey]
const query = {
...this.paramsDate,
category: this.categoryArr.map((item) => item.label == this.activeKey)[0].type,
page_size: currentInfo.pageOption.pageSize,
pageNumber: currentInfo.pageOption.page
}
try {
const res = await getReq('/queryStatDayList', query)
if (res.errcode === 0) {
currentInfo.tableData = res.data
currentInfo.pageOption = {
page: res.data.page,
pageSize: res.data.page_size,
count: res.data.count
}
} else {
throw res
}
} catch (error) {
currentInfo.tableData = [
{
key1: '1515151515',
key2: '设备1111',
key3: '类型',
key4: '电量',
key5: '时长',
key6: '时长',
key7: 'dianl',
key8: '时长',
key9: '时长11'
},
{
key1: '1515151515',
key2: '设备1111',
key3: '类型',
key4: '电量',
key5: '时长',
key6: '时长',
key7: 'dianl',
key8: '时长',
key9: '时长11'
},
{
key1: '1515151515',
key2: '设备1111',
key3: '类型',
key4: '电量',
key5: '时长',
key6: '时长',
key7: 'dianl',
key8: '时长',
key9: '时长11'
},
{
key1: '1515151515',
key2: '设备1111',
key3: '类型',
key4: '电量',
key5: '时长',
key6: '时长',
key7: 'dianl',
key8: '时长',
key9: '时长11'
}
]
}
}
// async getTableList() {
// const currentInfo = this.tableList[this.activeKey]
// const query = {
// ...this.paramsDate,
// category: this.activeKey,
// page_size: currentInfo.pageOption.pageSize,
// pageNumber: currentInfo.pageOption.page
// }
// try {
// const res = await getReq('/queryStatDayList', query)
// if (res.errcode === 0) {
// this.tableList[this.activeKey].pageOption.tableData = res.data
// this.tableList[this.activeKey].pageOption.pageOption = {
// page: res.data.page,
// pageSize: res.data.page_size,
// count: res.data.count
// }
// } else {
// throw res
// }
// } catch (error) {
// this.tableList[this.activeKey].pageOption.tableData = [
// {
// key1: '1515151515',
// key2: '设备1111',
// key3: '类型',
// key4: '电量',
// key5: '时长',
// key6: '时长',
// key7: 'dianl',
// key8: '时长',
// key9: '时长11'
// },
// {
// key1: '1515151515',
// key2: '设备1111',
// key3: '类型',
// key4: '电量',
// key5: '时长',
// key6: '时长',
// key7: 'dianl',
// key8: '时长',
// key9: '时长11'
// },
// {
// key1: '1515151515',
// key2: '设备1111',
// key3: '类型',
// key4: '电量',
// key5: '时长',
// key6: '时长',
// key7: 'dianl',
// key8: '时长',
// key9: '时长11'
// },
// {
// key1: '1515151515',
// key2: '设备1111',
// key3: '类型',
// key4: '电量',
// key5: '时长',
// key6: '时长',
// key7: 'dianl',
// key8: '时长',
// key9: '时长11'
// }
// ]
// }
// }
}
}
</script>
@@ -639,7 +835,7 @@ export default {
}
.main_content {
overflow: scroll;
height: calc(100% - 15px);
height: calc(100% - 30px);
// margin-top: 10px;
}
</style>

14
web/src/views/sub/Home.vue
View File

@@ -48,7 +48,7 @@ import Alarm from '@/components/Home/Alarm.vue'
import Map from '@/components/Home/Map.vue'
import { getReq, postReq } from '@/request/api'
import { getRunDays, getDateDaysAgo } from '@/utils/dealWithData'
import { markRaw } from 'vue';
export default {
name: 'Home',
components: { Map },
@@ -62,38 +62,38 @@ export default {
{
title: '运行状况',
class: 'online-status',
componentId: onLine,
componentId:markRaw(onLine),
infoKey: 'onLineTotal'
},
{
title: '运行分析',
class: 'stats-cards',
componentId: Operational,
componentId:markRaw( Operational),
infoKey: ''
},
{
title: '储能设备',
class: 'energy-status',
componentId: Energy,
componentId:markRaw( Energy),
infoKey: 'energy'
},
{
title: '充电设备',
class: 'charge-analysis',
componentId: Charge,
componentId:markRaw( Charge),
infoKey: 'charge'
},
{
title: '光伏设备',
class: 'work-order',
componentId: Pv,
componentId:markRaw( Pv),
infoKey: 'pv'
},
{
title: '告警信息',
class: 'alarm-stats',
componentId: Alarm,
componentId: markRaw(Alarm),
infoKey: 'alarm'
}
],

1
web/src/views/system/alarmLog.vue
View File

@@ -13,7 +13,6 @@
ref="comTable"
:table-option="tableOption"
:page-option="pageOption"
:table-h="tableH"
>
<template #type="record">
<span>{{ ['其它','系统日志','操作日志','设备日志'][record.type] }}</span>

1
web/src/views/system/log.vue
View File

@@ -13,7 +13,6 @@
ref="comTable"
:table-option="tableOption"
:page-option="pageOption"
:table-h="tableH"
>
<template #gender="record">
<!-- 0:女; 1:男 -->

11
web/src/views/system/permission.vue
View File

@@ -15,7 +15,6 @@
ref="comTable"
:table-option="tableOption"
:page-option="pageOption"
:table-h="tableH"
>
<template #is_open="record">
<!-- 0:禁用; 1:启用 -->
@@ -104,8 +103,14 @@ export default {
if (res.errcode === 0) {
this.$refs.comTable.loading = false
this.tableData = res.data
// this.tableData = res.data
this.tableData =JSON.parse( localStorage.getItem('permission')).map((item)=>{
return {
...item,
key:item.permission_id,
}
})
console.log( this.tableData," this.tableData")
this.pageOption = {
page: res.page,
pageSize: res.page_size,

2
web/src/views/system/policy.vue
View File

@@ -9,7 +9,6 @@
ref="comTable"
:table-option="tableOption"
:page-option="pageOption"
:table-h="tableH"
>
<template #type="record">
<div>{{ getPolicyType(record.type) }}</div>
@@ -117,7 +116,6 @@ export default {
pageSize: 10,
count: 0
},
tableH: '',
formState: {},
formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
operateList:[]

173
web/src/views/system/role.vue
View File

@@ -15,7 +15,6 @@
ref="comTable"
:table-option="tableOption"
:page-option="pageOption"
:table-h="tableH"
>
<template #is_open="record">
<!-- 0:禁用; 1:启用 -->
@@ -31,7 +30,7 @@
</template>
</ComTable>
</div>
<a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
<a-modal v-model:open="formModal" width="950px" style="top: 20px" :footer="null" :destroy-on-close="true">
<!-- action:edit add -->
<EditCom
:show-flag="formModal"
@@ -50,7 +49,7 @@ import { getReq, postReq } from '@/request/api.js'
import ComTable from '@/components/ComTable'
import OperateCom from '@/components/OperateCom'
import EditCom from '@/components/EditCom.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { ConsoleSqlOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { createVNode } from 'vue'
import { Modal } from 'ant-design-vue'
import searchBox from '@/components/SearchBox.vue'
@@ -73,7 +72,10 @@ export default {
page: 1
},
btnOptionList: [],
paramsDate: {}
paramsDate: {},
tableOption: {
select:false
},
}
},
computed: {},
@@ -126,24 +128,123 @@ export default {
//统一处理报错提示
}
},
mergePermissionData(routeData, permissionData) {
// 创建权限ID快速索引
const permissionMap = new Map()
// 构建权限配置映射表（含子权限处理）
const flattenPermissions = (data) => {
data.forEach((item) => {
// 初始化权限项的默认值（关键修改）
const permissionItem = {
...item,
key: item.permission_id,
is_add: Boolean(+item.is_add) || false,
is_del: Boolean(+item.is_del )|| false,
is_edit: Boolean(+item.is_edit )|| false,
is_view: Boolean(+item.is_view )|| false,
// 确保子权限容器存在
children: item.children ? [...item.children] : []
}
permissionMap.set(item.permission_id, permissionItem)
// 递归处理子权限
if (item.children?.length) {
flattenPermissions(item.children)
}
})
}
// 初始化扁平化处理
flattenPermissions(permissionData)
// 递归构建合并后的树形结构
const buildTree = (data) => {
return data
.map((routeItem) => {
const permissionItem = permissionMap.get(routeItem.permission_id) || {
key: routeItem.permission_id,
is_add: false,
is_del: false,
is_edit: false,
is_view: false
}
// 基础合并：路由结构+权限配置
const mergedItem = {
...routeItem,
...permissionItem,
// 初始化子权限容器
children: routeItem.children ? buildTree(routeItem.children) : []
}
// 特殊处理：父级权限的联动计算
this.calculateParentPermissions(mergedItem)
return mergedItem
})
.filter(Boolean) // 过滤无效节点
}
return buildTree(routeData)
},
calculateParentPermissions(node) {
if (node.children?.length) {
node.is_view = node.children.some((child) => child.is_view === '1') ? true:false
node.is_add = node.children.some((child) => child.is_add === '1') ? true:false
node.is_edit = node.children.some((child) => child.is_edit === '1') ? true:false
node.is_del = node.children.some((child) => child.is_del === '1') ? true:false
}
},
async getPermissionList() {
let arr = []
const res = await getReq('/queryPermissionList', { page_size: 1000, page: 1 })
const params = {
page_size: 1000,
page: 1
}
const res = await getReq('/queryPermissionList', params)
if (res.errcode === 0) {
arr = res.data
} else {
arr = []
// const permissionData = JSON.parse(localStorage.getItem('permission'));
// const permissionData = res.data
// arr = permissionData.map((item) => ({
// ...item,
// key: item.permission_id,
// // 转换操作权限为布尔值
// ...this.getPerOperBoolean(item),
// // 递归处理children
// children: item.children
// ? item.children.map((child) => ({
// ...child,
// ...this.getPerOperBoolean(child),
// key: child.permission_id,
// // 继续递归处理子项
// children: child.children
// ? child.children.map((grandchild) => ({
// ...grandchild,
// ...this.getPerOperBoolean(grandchild)
// }))
// : []
// }))
// : []
// }))
}
return arr
},
// 新增专用方法处理操作权限转换
getPerOperBoolean(data) {
return {
is_add: data ? Boolean(+data.is_add) : false,
is_del: data ? Boolean(+data.is_del) : false,
is_edit: data ? Boolean(+data.is_edit) : false,
is_view: data ? Boolean(+data.is_view ): false
}
},
operateForm(type, record = {}) {
console.log(record, record.id, 'rrrrrrrrrr')
console.log(record, 'rrrrrrrrrr')
this.formStatus = type
switch (type) {
case 'add':
@@ -199,6 +300,7 @@ export default {
})
},
async getRuleFormInfo(record) {
function getInfo(data, url) {
return new Promise((reslove, reject) => {
getReq(data, url).then((res) => {
@@ -209,31 +311,22 @@ export default {
let row = {}
if (record && record.role_id) {
// row = await getInfo({ id: record.id },'/queryroleList')
this.record = record
row = record
// this.type='edit'
}
const perList = await this.getPermissionList()
const permissionList=perList.map((item)=>{
return{
key:+item.permission_id,
...item
}
})
console.log(permissionList, 'permissionList')
this.processedData = this.mergePermissionData(
perList,
record && record.permission.length ? record.permission : []
)
const newData=JSON.parse(JSON.stringify( this.processedData))
roleOptions.forEach((e, index) => {
e.list.forEach((i) => {
if (i.key == 'permission') {
i.tableData=permissionList
// .forEach((item)=>{
// .push({...item,key:item.permission_id})
// })
i.tableData = newData
if(record&&record.role_id){
i.selectTableData = row.permission
? row.permissionList.map((item) => item.permission_id)
: []
i.selectTableData=this.extractAllIds( record.permission)
}else {
i.selectTableData=[]
}
@@ -242,9 +335,29 @@ export default {
}
})
})
console.log(permissionList,"permissionList")
this.formModal = true
},
// 定义提取所有ID的函数
extractAllIds(treeData) {
const idSet = new Set();
// 递归遍历函数
const traverse = (node) => {
// 添加当前节点ID
if (node.permission_id) {
idSet.add(node.permission_id);
}
// 递归处理子节点
if (node.children && node.children.length > 0) {
node.children.forEach((child) => traverse(child));
}
};
// 处理所有根节点
treeData.forEach((node) => traverse(node));
return Array.from(idSet);
},
handlePagesizeChange(pageOption) {
this.pageOption.pageSize = pageOption.pageSize

4
web/src/views/system/service.vue
View File

@@ -15,7 +15,6 @@
ref="comTable"
:table-option="tableOption"
:page-option="pageOption"
:table-h="tableH"
>
<template #is_open="record">
<span>{{ ['禁用', '启用'][record.is_open] }}</span>
@@ -56,6 +55,9 @@ export default {
props: {},
data() {
return {
tableOption: {
select:false
},
formModal: false,
formState: {},
formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑

13
web/src/views/system/station.vue
View File

@@ -15,16 +15,15 @@
ref="comTable"
:table-option="tableOption"
:page-option="pageOption"
:table-h="tableH"
>
<template #status="record">
<span>{{ ['未启用', '启用'][record.status] }}</span>
</template>
<template #work_mode="record">
<span>{{workModeList.find(item=>record.value==item.value)?.label|| '' }}</span>
<span>{{ workModeList.find((item) => record.value == item.value)?.label || '' }}</span>
</template>
<template #policy_id="record">
<span>{{policyList.find(item=>record.value==item.value)?.label|| ''}}</span>
<span>{{ policyList.find((item) => record.value == item.value)?.label || '' }}</span>
</template>
<template #action="record">
@@ -65,6 +64,9 @@ export default {
props: {},
data() {
return {
tableOption: {
select:false
},
formModal: false,
formState: {},
formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
@@ -86,7 +88,7 @@ export default {
{
label: '自定义',
value: 3
},
}
],
policyList: [
{
@@ -100,7 +102,7 @@ export default {
{
label: '自发自用',
value: 3
},
}
]
}
},
@@ -230,7 +232,6 @@ export default {
}
stationOptions.forEach((e, index) => {
e.list.forEach((i) => {
e.ruleForm[i.key] = row ? row[i.key] : ''
e.ruleForm.id = row.id
})

4
web/src/views/system/user.vue
View File

@@ -15,7 +15,6 @@
ref="comTable"
:table-option="tableOption"
:page-option="pageOption"
:table-h="tableH"
>
<template #gender="record">
<!-- 0:女; 1:男 -->
@@ -60,6 +59,9 @@ export default {
props: {},
data() {
return {
tableOption: {
select:false
},
formModal: false,
formState: {},
formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑