store+统计分析+用户管理

This commit is contained in:
ym1026
2025-09-05 09:26:14 +08:00
parent 1cc916c53c
commit 013a2245f5
15 changed files with 911 additions and 278 deletions

View File

@@ -53,8 +53,8 @@
<div class="pagination" v-if="data.newTableOpt.page">
<a-pagination
v-model:current="data.newPageOption.current"
:total="data.newPageOption.total"
v-model:current="data.newPageOption.page"
:total="data.newPageOption.count"
:page-size="data.newPageOption.pageSize"
@change="onChange"
show-size-changer
@@ -64,9 +64,9 @@
</a-pagination>
<div style="color: #7f8fa4; height: 30px; line-height: 30px; margin: 0 10px">
<span style="color: aqua; font-size: 18px; margin: 0 2px">{{
data.newPageOption.total
data.newPageOption.count
}}</span
>
>
</div>
</div>
</div>
@@ -107,9 +107,9 @@ const props = defineProps({
type: Object,
default: () => {
return {
current: 1,
count: 1,
pageSize: 10,
total: 1
page: 1
}
}
},
@@ -206,7 +206,7 @@ function rowClassName(record, index) {
}
function expandIcon(props) {}
function onChange(page, pageSize) {
data.newPageOption.current = page
data.newPageOption.page = page
data.newPageOption.pageSize = pageSize
emit('handlePagesizeChange', data.newPageOption)
}

View File

@@ -41,7 +41,7 @@ export default {
showCtrModal: false,
testVal: {
name: '场站211',
id: '124563'
id: '2'
},
changeStationId:''
}

View File

@@ -9,7 +9,7 @@
</div>
<component
:is="item.componentId"
:props-total="modalInfo.allTotal"
:props-total="item.infoKey=='prefab'? modalInfo.prefabTotal: modalInfo.allTotal"
:props-info="modalInfo[item.infoKey]"
></component>
</div>
@@ -59,7 +59,7 @@ export default {
title: '预制舱信息',
class: '',
componentId: PrefabCabin,
infoKey: ''
infoKey: 'prefab'
},
{
title: '储能充放电量',
@@ -114,6 +114,7 @@ export default {
async mounted() {
await Promise.all([
this.getStatTotalList(),
this.queryStationInfo(),
this.getStatDayList(1),
])
},
@@ -128,7 +129,7 @@ export default {
// category:类别1:储能设备,2:充电设备,3:光伏设备,为0或不传查询所有类别总计
const query = {
date: getDateDaysAgo(0),
stationId: this.stationId,
station_id: this.stationId,
category: 0
}
const res = await getReq('/api/queryStatTotal', query)
@@ -144,6 +145,24 @@ export default {
this.modalInfo.allTotal = {}
}
},
// 查询场站信息
async queryStationInfo() {
try {
// station_id场站ID
const query = {
station_id: this.stationId,
}
const res = await getReq('/api//queryStationInfo', query)
if (res.errcode === 0) {
this.modalInfo.prefabTotal = res.data
} else {
throw res
}
} catch (error) {
this.modalInfo.allTotal = {}
}
},
// 查询场站日统计信息
async getStatDayList(category) {
try {
@@ -152,7 +171,7 @@ export default {
// start_date开始日期格式yyyy-mm-dd
// end_date结束日期格式yyyy-mm-dd
const query = {
stationId: this.stationId,
station_id: this.stationId,
category,
start_date: getDateDaysAgo(7 - 1),
end_date: getDateDaysAgo(0)

View File

@@ -44,42 +44,68 @@ export default {
curStatus: '充电',
list: [
{
key: 'tianshu',
key: 'batttey_type',
value: '磷酸铁锂电池',
d: '',
label: '电池类型',
class: 'item-1'
},
{
key: 'shouyi',
key: 'cooling_type',
value: '风冷',
d: '',
label: '冷却方式',
class: 'item-2'
},
{
key: 'shuliang',
key: 'voltage_rated',
value: 20,
d: 'V',
label: '电池额定总电压',
class: 'item-3'
},
{
key: 'shuliang',
key: 'work_mode',
value: '最优经济化运行模式',
d: '',
label: '运行模式',
class: 'item-4'
class: 'item-4',
list:[
{
label:'手动',
value:0
},
{
label:'峰谷套利',
value:1
},
{
label:'增网配容',
value:2
},
{
label:'应急供电',
value:3
},
{
label:'并网保电',
value:4
},
{
label:'自定时段',
value:5
},
]
},
{
key: 'fadianliang',
key: 'capacity',
value: 20,
d: 'Wh',
label: '电池储能容量',
class: 'item-5'
},
{
key: 'rongliang',
key: 'power_rated',
value: 100,
d: 'Kw',
label: 'PCS额定功率',
@@ -100,8 +126,15 @@ export default {
propsTotal: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
// 0正常 1故障
this.curStatus=['正常','故障'][this.propsTotal.status]
this.list.forEach((item) => {
item.value = this.propsTotal[item.key]
if(item.key=='work_mode'){
item.value =item.list.map((item)=>this.propsTotal[item.key]==item.value)[0].label
}else {
item.value = this.propsTotal[item.key]
}
})
}
}

View File

@@ -1,5 +1,5 @@
<template>
<div class="onLine">
<div class="statistical">
<div class="content">
<div v-for="item in list" :key="item.key" :class="`item ${item.class}`">
<span>{{ item.value ? item.value : 0 }} {{ item.d }}</span>
@@ -96,7 +96,7 @@ export default {
</script>
<style lang="scss" scoped>
.onLine {
.statistical {
height: calc(100% - 45px);
display: flex;
justify-content: center;

View File

@@ -0,0 +1,107 @@
<template>
<div class="operate">
<template v-if="operateList.length < 4">
<a-button
v-for="item in operateList"
:key="item.type"
type="primary"
style="margin-right: 5px"
:class="['operateCol', item.type]"
:disabled="item.disabled"
@click="munuClick(item.type)"
>{{ item.label }}
</a-button>
</template>
</div>
</template>
<script>
export default {
name: 'OperateCom',
components: { },
props: {
operateList: {
type: Array,
default: () => {
return []
}
},
record: {
type: Object,
default:()=>{}
},
flag: {
type: String,
default:''
}
},
data() {
return {}
},
watch: {
operateList: {
handler(n, o) {},
deep: true,
immediate: true
}
},
mounted() {},
methods: {
munuClick(type) {
this.$emit('operateForm', type, { ...this.record })
}
}
}
</script>
<style lang="scss" scoped>
.moreIcon{
color:#fff !important
}
:deep(.ant-btn) {
padding: 0px 7px !important;
height: 24px !important;
font-size: 13px !important;
letter-spacing: -1px;
border-radius: 4px;
& > span + .anticon {
margin-inline-start: 4px;
}
}
:deep(.ant-btn-primary) {
box-shadow: none !important;
background: var(--theme-btn3);
}
:deep(.ant-btn,.ant-btn-primary){
&:hover{
opacity: 0.9;
}
&:disabled{
color: rgba(255,255,255,0.5);
}
}
.operate{
display: flex;
justify-content: center;
}
.operateCol {
background: var(--theme-btn3);
&.more {
background: var(--theme-btn1);
}
&.del {
background: var(--theme-btn2);
}
}
.ant-dropdown .ant-dropdown-menu{
background-color:var(--theme-opert-bg)!important;
}
</style>

View File

@@ -8,9 +8,13 @@ import 'ant-design-vue/dist/reset.css'
import '@/style/index.scss'
// import '@/assets/iconfont/iconfont.css'
import * as echarts from 'echarts'
import { setWidth } from '@/utils/column'
import { getBtns } from '@/utils/btnList'
import VueTianditu from 'vue-tianditu'
const app = createApp(App)
app.config.globalProperties.$echarts = echarts // 挂载到全局属性
app.config.globalProperties.$setWidth = setWidth // 挂载到全局属性
app.config.globalProperties.$getBtns = getBtns
app.use(store).use(router).use(Antd).use(VueTianditu).mount('#app')

View File

@@ -1,9 +1,10 @@
import { createStore } from "vuex";
import { createStore } from 'vuex'
import systemUser from './systemUser'
export default createStore({
state: {},
getters: {},
mutations: {},
actions: {},
modules: {},
});
modules: { systemUser }
})

View File

@@ -0,0 +1,17 @@
export default {
namespaced: true,
tate: {
page: 'main', //main or detail
detailType: 'add', // add or edit or view
title: '新增', // 新增 or 查看
type: 'user' // menu or authority role
},
mutations: {
updateState(state, playload) {
Object.entries(playload).forEach((item) => {
const [key, value] = item
state[key] = value
})
}
}
}

54
web/src/utils/btnList.js Normal file
View File

@@ -0,0 +1,54 @@
const btnList = [
{ label: '', type: '', disFlag: '' },
{ label: '新增', type: 'add', disFlag: 'isEdit', icon: 'icon-add' },
{ label: '更新', type: 'edit', disFlag: 'isEdit' },
{ label: '查看', type: 'detail', disFlag: 'isQuery' },
{ label: '编辑', type: 'edit', disFlag: 'isEdit' },
{ label: '删除', type: 'del', disFlag: 'isEdit', icon: 'icon-del' },
{ label: '批量删除', type: 'del', disFlag: 'isEdit', icon: 'icon-del' },
{ label: '导入', type: 'upload', disFlag: 'isEdit', icon: 'icon-import' },
{ label: '导出', type: 'download', disFlag: 'isEdit', icon: 'icon-export' },
{ label: '上传', type: 'upload', disFlag: 'isEdit', icon: 'icon-upload' },
{ label: '下载', type: 'download', disFlag: 'isEdit', icon: 'icon-download' },
{ label: '下发', type: 'xf', disFlag: 'isControl' },
{ label: '批量下载', type: 'download', disFlag: 'isEdit', icon: 'icon-download' },
{ label: '下载模版', type: 'downTemplate', disFlag: 'isControl', icon: 'icon-download' },
{ label: '重置密码', type: 'reset', disFlag: 'isEdit' },
{ label: '派发', type: 'distribute', disFlag: 'isControl' },
{ label: '处理', type: 'dealWith', disFlag: 'isControl' },
{ label: '审核', type: 'audit', disFlag: 'isControl' },
{ label: '标记为已读', type: 'setTagR', disFlag: 'isControl', icon: 'icon-chulizhuangtai' },
{ label: '标记为已处理', type: 'setTagD', disFlag: 'isControl' },
{ label: '启动', type: 'start', disFlag: 'isControl' },
{ label: '停止', type: 'stop', disFlag: 'isControl' },
{ label: '重启', type: 'restart', disFlag: 'isControl' },
{ label: '批量启动', type: 'start', disFlag: 'isControl' },
{ label: '批量停止', type: 'stop', disFlag: 'isControl' },
{ label: '批量重启', type: 'restart', disFlag: 'isControl' },
{ label: '监控日志', type: 'log', disFlag: 'isControl' },
{ label: '新建备份', type: 'backups', disFlag: 'isEdit', icon: 'icon-add' },
{ label: '导入备份', type: 'importBackups', disFlag: 'isEdit', icon: 'icon-import' },
{ label: '还原', type: 'restore', disFlag: 'isEdit' },
{ label: '批量启用', type: 'enable', disFlag: 'isControl', icon: 'icon-a-qiyong' },
{ label: '批量禁用', type: 'disable', disFlag: 'isControl', icon: 'icon-a-jinyong' }
]
// arr:按钮数组
// permissions:{
// isControl: true;
// isEdit: true;
// isQuery: true;
// }
function getBtns(arr) {
const permissions =
JSON.parse(localStorage.getItem('user')).userExtend.role.permissionList[0] || {}
const btns = []
btnList.forEach((item) => {
if (arr.includes(item.label)) {
item.disabled = !Boolean(permissions[item.disFlag])
btns.push(item)
}
})
return btns
}
export { btnList, getBtns }

93
web/src/utils/column.js Normal file
View File

@@ -0,0 +1,93 @@
const colWidth = [
{
label: '用户',
width: 120,
align: 'left'
},
{
label: '名称',
width: 200,
align: 'left',
sorter: (a, b) => {
return a.name.localeCompare(b.name)
},
sortDirections: ['ascend', 'descend']
},
{
label: '所属',
width: 150,
align: 'left'
},
{
label: '类型',
width: 120,
align: 'left'
},
{
label: 'ip',
width: 120,
align: 'left'
},
{
label: '状态',
width: 120,
align: 'center'
},
{
label: '是否',
width: 120,
align: 'center'
},
{
label: '服务',
width: 120,
align: 'left'
},
{
label: '手机号',
width: 200,
align: 'left'
},
{
label: '时间',
width: 200,
align: 'center'
},
{
label: '文件路径',
width: 400
},
{
label: '内容',
width: 350
},
{
label: '通知方式',
width: 240,
align: 'center'
},
{
label: '操作',
align: 'center',
width: 130,
fixed: 'right',
resizable: false
}
]
function setWidth(val) {
let info = {}
const Item = colWidth.find((item) => val.title.search(item.label) !== -1) || null
if (Item) {
if (val.title == '操作') {
info = { ...Item, ...val, resizable: true }
} else {
info = { ...val, ...Item, resizable: true, ellipsis: true }
}
} else {
info = { ...val, align: 'left', ellipsis: true, resizable: true, width: 150 }
}
return info
}
export { colWidth, setWidth }

View File

@@ -143,7 +143,7 @@ export default {
.subMenu {
display: flex;
color: #fff;
margin-left: 10px;
// margin-left: 10px;
padding-bottom: 20px;
.subItem {
width: 96px;

View File

@@ -1,12 +1,7 @@
<template>
<div class="Home">
<div class="content-left">
<div
v-for="item in leftList"
:key="item.componentId"
:class="`grid-item ${item.class}`"
>
<div v-for="item in leftList" :key="item.componentId" :class="`grid-item ${item.class}`">
<div class="tool">
<div class="title">
<i class="iconfont icon-hebing linear-text"></i>
@@ -26,12 +21,7 @@
<Map @changeStation="getCurrentStation"></Map>
</div>
<div class="content-right">
<div
v-for="item in rightList"
:key="item.componentId"
:class="`grid-item ${item.class}`"
>
<div v-for="item in rightList" :key="item.componentId" :class="`grid-item ${item.class}`">
<div class="tool">
<div class="title">
<i class="iconfont icon-hebing linear-text"></i>
@@ -57,7 +47,7 @@ import Pv from '@/components/Home/Pv.vue'
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 { getRunDays, getDateDaysAgo } from '@/utils/dealWithData'
export default {
name: 'Home',
@@ -122,220 +112,6 @@ export default {
},
async mounted() {
await Promise.all([
// (this.deviceInfo = {
// alarm: [
// {
// date: '2025-08-30',
// key1: 10,
// key2: 0,
// key3: 15,
// key4: 5
// },
// {
// date: '2025-08-29',
// key1: 8,
// key2: 5,
// key3: 5,
// key4: 7
// },
// {
// date: '2025-08-28',
// key1: 0,
// key2: 10,
// key3: 20,
// key4: 4
// },
// {
// date: '2025-08-27',
// key1: 10,
// key2: 0,
// key3: 15,
// key4: 5
// },
// {
// date: '2025-08-26',
// key1: 10,
// key2: 0,
// key3: 15,
// key4: 5
// },
// {
// date: '2025-08-25',
// key1: 10,
// key2: 0,
// key3: 15,
// key4: 5
// },
// {
// date: '2025-08-24',
// key1: 10,
// key2: 0,
// key3: 15,
// key4: 5
// },
// {
// date: '2025-08-23',
// key1: 10,
// key2: 0,
// key3: 15,
// key4: 5
// },
// {
// date: '2025-08-22',
// key1: 10,
// key2: 0,
// key3: 15,
// key4: 5
// },
// {
// date: '2025-08-21',
// key1: 10,
// key2: 0,
// key3: 15,
// key4: 5
// },
// {
// date: '2025-08-20',
// key1: 10,
// key2: 0,
// key3: 15,
// key4: 5
// },
// {
// date: '2025-08-19',
// key1: 10,
// key2: 0,
// key3: 15,
// key4: 5
// },
// {
// date: '2025-08-18',
// key1: 10,
// key2: 0,
// key3: 15,
// key4: 5
// },
// {
// date: '2025-08-17',
// key1: 10,
// key2: 0,
// key3: 15,
// key4: 5
// }
// ],
// energy: [
// {
// date: '2025-08-30',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-29',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-28',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-27',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-26',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-25',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-24',
// key1: '2',
// key2: '2'
// }
// ],
// charge: [
// {
// date: '2025-08-30',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-29',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-28',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-27',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-26',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-25',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-24',
// key1: '2',
// key2: '2'
// }
// ],
// pv: [
// {
// date: '2025-08-30',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-29',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-28',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-27',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-26',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-25',
// key1: '2',
// key2: '2'
// },
// {
// date: '2025-08-24',
// key1: '2',
// key2: '2'
// }
// ],
// allTotal: {}
// }),
this.getOnLineList(),
this.getStatTotalList(),
this.getStatDayList(1),
@@ -409,7 +185,6 @@ export default {
this.deviceInfo.allTotal.incomeCharge + this.deviceInfo.allTotal.incomeElect
}
},
// 示例获取7天前的日期
// 查询场站日统计信息
@@ -430,6 +205,18 @@ export default {
if (res.errcode === 0) {
this.list.forEach((item) => {
this.deviceInfo[arr[category]] = res.data
if (
this.deviceInfo.energy.length &&
this.deviceInfo.charge.length &&
this.deviceInfo.pv.length
) {
const newArr = this.mergedArray(
this.deviceInfo.energy,
this.deviceInfo.charge,
this.deviceInfo.pv
)
this.deviceInfo.alarm = newArr
}
})
} else {
throw res
@@ -437,6 +224,24 @@ export default {
} catch (error) {
console.log(error)
}
},
// 整合三个数组
mergedArray(arr1, arr2, arr3) {
const newArr = []
arr1.forEach((item1, index) => {
// 获取对应索引的 arr2 和 arr3 的对象
const item2 = arr2[index] || {}
const item3 = arr3[index] || {}
// 返回整合后的对象
newArr.push({
storage_num_err: item1.storage_num_err || '',
solar_num_err: item2.solar_num_err || '',
charge_num_err: item3.charge_num_err || '',
dt: item1.dt
})
})
return newArr
}
}
}

View File

@@ -1,38 +1,196 @@
<template>
<div class="user">
<SearchBox></SearchBox>
<template>
<div class="user">
<searchBox
:btn-option-list="btnOptionList"
@onSearch="onSearch"
:search-options="searchOptions"
@operateForm="operateForm"
></searchBox>
<div class="table-content">
<div class="content-table">
<ComTable
:columns="columns"
:table-data="tableData"
@handlePagesizeChange="handlePagesizeChange"
ref="comTable"
:table-option="tableOption"
:page-option="pageOption"
:table-h="tableH"
>
<template #gender="record">
<!-- 0:; 1: -->
<span>{{ ['女', '男'][record.gender] }}</span>
</template>
<template #action="record">
<OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
</template>
</ComTable>
</div>
</div>
</div>
</template>
</div>
</template>
<script>
import SearchBox from '@/components/SearchBox.vue'
import { columnList } from '../../../public/config/columnList'
import { mapState } from 'vuex'
import { getReq, postReq } from '@/request/api.js'
import ComTable from '@/components/ComTable'
import OperateCom from '@/components/OperateCom'
import searchBox from '@/components/SearchBox.vue'
export default {
name: '',
components:{
SearchBox
components: {
searchBox,
ComTable,
OperateCom
},
props: {
},
data() {
props: {},
data() {
return {
pageOption:{},
btnOptionList: [],
paramsDate:{
}
}
},
computed: {
...mapState(['page', 'detailType', 'type'])
},
created() {
let info = []
let col = columnList.find((i) => i.page == 'user').columns
if (col.length) {
col.forEach((item) => {
info.push(this.$setWidth(item))
})
}
this.columns = info
},
mounted() {
},
methods:{
this.operateList = this.$getBtns(['查看', '编辑', '删除'])
this.btnOptionList = this.$getBtns(['新增', '批量删除'])
this.getList()
},
methods: {
async getList() {
this.$refs.comTable.loading = true
const { page, pageSize } = this.pageOption
const params = {
...this.paramsDate,
page_size: pageSize,
page
}
try {
const res = await getReq('/api/queryUserList',params)
if (res.errcode === 0) {
this.$refs.comTable.loading = false
this.tableData = res.data
this.pageOption = {
page: res.page,
pageSize: res.page_size,
count: res.count
}
} else {
const err = { tip: res.errmsg }
throw err
}
} catch (error) {
//统一处理报错提示
}
},
operateForm(type, record = {}) {
switch (type) {
case 'detail':
this.$store.commit('updateState', {
detailType: 'edit', //edit or view
page: 'detail',
title: '查看',
type: 'user'
})
this.getRuleFormInfo(record)
break
case 'back':
this.$store.commit('updateState', {
page: 'main'
})
this.isShowFlag = false
this.getList()
break
default:
break
}
},
async getRuleFormInfo(record) {
function getInfo(data, url) {
return new Promise((reslove, reject) => {
getReq(data, url).then((res) => {
reslove(res.data)
})
})
}
let row = {}
if (record.id) {
row = await getInfo({ id: record.id }, this.apiMethods[0].get)
this.record = row
this.$store.commit('updateState', {
// 配电柜-集中器-查看
title:
(row.cabinetName ? row.cabinetName + '-' : '') +
(row.name.split('集中器')[0] ? row.name.split('集中器')[0] : '') +
'集中器-查看'
})
}
let connectorType
cabinetOptions.forEach((e, index) => {
e.list.forEach((i) => {
if (index == 1) {
// 集中器状态
if (i.key == 'ctrMode' || i.key == 'powerStatus') {
e.ruleForm[i.key] = row.deviceStatus.lightStatus[i.key]
} else {
e.ruleForm[i.key] = row.deviceStatus[i.key]
}
} else if (i.key == 'connectorType') {
connectorType = row.deviceExtend[i.key]
e.ruleForm[i.key] = row.deviceExtend[i.key]
} else {
e.ruleForm[i.key] = row ? row[i.key] : ''
e.ruleForm.id = row.id
}
})
})
// C型控制器手自动状态和故障状态显示为“无”
if (connectorType == 1) {
cabinetOptions[1].ruleForm.status = 5
cabinetOptions[1].ruleForm.ctrMode = 5
}
this.isShowFlag = true
},
handlePagesizeChange(pageOption) {
this.pageOption.pageSize = pageOption.pageSize
this.pageOption.page = pageOption.page
this.getList()
}
}
}
</script>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>