mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-27 18:59:26 +08:00
代码合并
This commit is contained in:
ym1026
@@ -15,6 +15,7 @@ module.exports = {
|
||||
},
|
||||
plugins: ['react', '@typescript-eslint', 'prettier'], // 添加 prettier 插件
|
||||
rules: {
|
||||
camelcase: 'off',
|
||||
'vue/require-explicit-emits': 'off', // 关闭 emits 声明检查
|
||||
'vue/v-on-event-hyphenation': 'off',
|
||||
'prettier/prettier': 'off',
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { deviceTypeList, logTypes } from '@/utils/config'
|
||||
export const columnList = [
|
||||
{
|
||||
page: 'user',
|
||||
@@ -231,6 +232,185 @@ export const columnList = [
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
page: 'device',
|
||||
columns: [
|
||||
{
|
||||
title: '设备ID',
|
||||
dataIndex: 'device_id',
|
||||
key: 'device_id',
|
||||
ellipsis: true,
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
title: '所属场站',
|
||||
dataIndex: 'station_id',
|
||||
key: 'station_id'
|
||||
// filterable: true
|
||||
},
|
||||
{
|
||||
title: '设备类型',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
type: 'slot',
|
||||
scopedSlots: { customRender: 'type' }
|
||||
},
|
||||
{
|
||||
title: '设备名称',
|
||||
dataIndex: 'name'
|
||||
},
|
||||
{
|
||||
title: '设备编号',
|
||||
dataIndex: 'code'
|
||||
},
|
||||
|
||||
{
|
||||
title: '厂家信息',
|
||||
dataIndex: 'factory'
|
||||
},
|
||||
{
|
||||
title: '厂家电话',
|
||||
dataIndex: 'factory_tel'
|
||||
},
|
||||
{
|
||||
title: '是否启用',
|
||||
dataIndex: 'is_open',
|
||||
key: 'is_open',
|
||||
align: 'center',
|
||||
scopedSlots: { customRender: 'isEnable' }
|
||||
},
|
||||
|
||||
{
|
||||
title: '属性参数',
|
||||
dataIndex: 'attrs'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'operate',
|
||||
key: 'operate',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
page: 'alarmLog',
|
||||
columns: [
|
||||
{
|
||||
title: '日志ID',
|
||||
dataIndex: 'log_id'
|
||||
},
|
||||
|
||||
{
|
||||
title: '日志类型',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
width: 120,
|
||||
scopedSlots: { customRender: 'type' }
|
||||
},
|
||||
{
|
||||
title: '操作用户',
|
||||
dataIndex: 'user_id',
|
||||
key: 'user_id',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '设备ID',
|
||||
dataIndex: 'device_id',
|
||||
key: 'device_id'
|
||||
},
|
||||
{
|
||||
title: '日志内容',
|
||||
dataIndex: 'content',
|
||||
key: 'content',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '记录时间',
|
||||
dataIndex: 'create_time',
|
||||
key: 'create_time',
|
||||
align: 'center',
|
||||
ellipsis: true,
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
ellipsis: true,
|
||||
scopedSlots: { customRender: 'status' },
|
||||
width: 80,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'operate',
|
||||
key: 'operate',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
page: 'log',
|
||||
columns: [
|
||||
{
|
||||
title: '用户',
|
||||
dataIndex: 'userName',
|
||||
width: 180
|
||||
},
|
||||
|
||||
{
|
||||
title: '日志类型',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
width: 120,
|
||||
|
||||
scopedSlots: { customRender: 'type' }
|
||||
},
|
||||
{
|
||||
title: '操作类型',
|
||||
dataIndex: 'opType',
|
||||
key: 'opType',
|
||||
width: 120,
|
||||
|
||||
scopedSlots: { customRender: 'opType' }
|
||||
},
|
||||
{
|
||||
title: 'ip',
|
||||
dataIndex: 'ip',
|
||||
key: 'ip'
|
||||
},
|
||||
{
|
||||
title: '内容',
|
||||
dataIndex: 'msg',
|
||||
key: 'msg',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '生成时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
align: 'center',
|
||||
ellipsis: true,
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
ellipsis: true,
|
||||
scopedSlots: { customRender: 'status' },
|
||||
width: 80,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'operate',
|
||||
key: 'operate',
|
||||
width: 80,
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
page: 'serviceApi',
|
||||
columns: [
|
||||
@@ -542,6 +722,165 @@ export const stationOptions = [
|
||||
ruleForm: {}
|
||||
}
|
||||
]
|
||||
export const deviceOptions = [
|
||||
{
|
||||
title: '基础信息',
|
||||
icon: 'icon-xinxi',
|
||||
list: [
|
||||
{
|
||||
label: '编号',
|
||||
value: '',
|
||||
key: 'code',
|
||||
type: 'input'
|
||||
},
|
||||
{
|
||||
label: '名称',
|
||||
value: '',
|
||||
key: 'name',
|
||||
type: 'input'
|
||||
},
|
||||
{
|
||||
label: '类型',
|
||||
value: '',
|
||||
key: 'type',
|
||||
type: 'select',
|
||||
list: deviceTypeList,
|
||||
options: {
|
||||
label: 'label',
|
||||
value: 'value'
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
label: '所属场站',
|
||||
value: undefined,
|
||||
key: 'station_id',
|
||||
type: 'select',
|
||||
list: [],
|
||||
options: {
|
||||
label: 'name',
|
||||
value: 'station_id'
|
||||
}
|
||||
// slotName: 'searchSelect'
|
||||
},
|
||||
{
|
||||
label: '厂家',
|
||||
value: '',
|
||||
key: 'factory',
|
||||
type: 'input'
|
||||
},
|
||||
{
|
||||
label: '厂家电话',
|
||||
value: '',
|
||||
key: 'factory_tel',
|
||||
type: 'input'
|
||||
},
|
||||
{
|
||||
label: '是否启用',
|
||||
value: '',
|
||||
key: 'is_open',
|
||||
type: 'switch'
|
||||
}
|
||||
],
|
||||
ruleForm: {}
|
||||
},
|
||||
{
|
||||
title: '设备属性参数',
|
||||
icon: 'icon-xinxi',
|
||||
list: [
|
||||
{
|
||||
label: '额定电压',
|
||||
value: '',
|
||||
key: 'rated_voltage',
|
||||
type: 'input-number'
|
||||
},
|
||||
{
|
||||
label: '额定电流',
|
||||
value: '',
|
||||
key: 'rated_current',
|
||||
type: 'input-number'
|
||||
},
|
||||
{
|
||||
label: '额定功率',
|
||||
value: '',
|
||||
key: 'reted_power',
|
||||
type: 'input-number'
|
||||
},
|
||||
|
||||
{
|
||||
label: '额定容量',
|
||||
value: undefined,
|
||||
key: 'rated_capacity',
|
||||
type: 'input-number'
|
||||
}
|
||||
],
|
||||
ruleForm: {}
|
||||
}
|
||||
]
|
||||
// log
|
||||
export const alarmlogOptions = [
|
||||
{
|
||||
title: '基础信息',
|
||||
icon: 'icon-xinxi',
|
||||
list: [
|
||||
{
|
||||
label: '日志ID',
|
||||
value: '',
|
||||
key: 'log_id',
|
||||
type: 'input'
|
||||
},
|
||||
{
|
||||
label: '日志类型',
|
||||
value: '',
|
||||
key: 'type',
|
||||
type: 'select',
|
||||
list: logTypes,
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '操作用户ID',
|
||||
value: '',
|
||||
key: 'user_id',
|
||||
type: 'input',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '设备ID',
|
||||
value: '',
|
||||
key: 'device_id',
|
||||
type: 'input',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '日志内容',
|
||||
value: '',
|
||||
key: 'content',
|
||||
type: 'textarea',
|
||||
disabled: true,
|
||||
className: 'item-l',
|
||||
rows: 8
|
||||
},
|
||||
{
|
||||
label: '记录时间',
|
||||
value: '',
|
||||
key: 'create_time',
|
||||
type: 'input'
|
||||
},
|
||||
|
||||
{
|
||||
label: '状态',
|
||||
type: 'select',
|
||||
list: [
|
||||
{ value: 0, label: '异常' },
|
||||
{ value: 1, label: '正常' }
|
||||
],
|
||||
value: [],
|
||||
key: 'status'
|
||||
}
|
||||
],
|
||||
ruleForm: {}
|
||||
}
|
||||
]
|
||||
export const serviceApiOptions = [
|
||||
{
|
||||
title: '基础信息',
|
||||
@@ -622,6 +961,37 @@ export const stationFormRules = {
|
||||
}
|
||||
]
|
||||
}
|
||||
export const deviceFormRules = {
|
||||
name: [
|
||||
{
|
||||
trigger: 'blur',
|
||||
required: true,
|
||||
message: '请输入设备名称'
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
trigger: 'blur',
|
||||
required: true,
|
||||
message: '请输入设备编号'
|
||||
}
|
||||
],
|
||||
type: [
|
||||
{
|
||||
trigger: 'change',
|
||||
required: true,
|
||||
message: '请选择设备类型'
|
||||
}
|
||||
],
|
||||
station_id: [
|
||||
{
|
||||
trigger: 'change',
|
||||
required: true,
|
||||
message: '请选择场站名称'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export const serviceApiFormRules = {
|
||||
name: [
|
||||
{
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_5010233_ev88efo2nou.css" />
|
||||
<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_5010233_6lxuclaoex9.css" />
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
|
||||
@@ -152,7 +152,7 @@ const data = reactive({
|
||||
|
||||
newPageOption: {},
|
||||
newTableOpt: {},
|
||||
pageSizeOptions: ['15', '20', '30', '40', '50', '100'],
|
||||
pageSizeOptions: ['10', '20', '30', '40', '50', '100'],
|
||||
mountedScroll
|
||||
})
|
||||
const loading = ref(false)
|
||||
|
||||
@@ -1,13 +1,10 @@
|
||||
<!-- item.type:xxxx-unshow:表示不显示 items.displayFlag为false表示不展示卡片 -->
|
||||
<template>
|
||||
<div class="card-content">
|
||||
<a-card
|
||||
style="margin: 0 0 15px 0; text-align: left"
|
||||
>
|
||||
<a-card style="margin: 0 0 15px 0; text-align: left">
|
||||
<div :class="['info-title', items.title ? '' : 'title-none']">
|
||||
<div class="box">
|
||||
|
||||
<div >
|
||||
<div>
|
||||
{{ items.title ? items.title : '基础信息' }}
|
||||
</div>
|
||||
|
||||
@@ -39,7 +36,7 @@
|
||||
layout="horizontal"
|
||||
:wrap="true"
|
||||
ref="formRef"
|
||||
:rules="props.formRules"
|
||||
:rules="props.formRules"
|
||||
name="info-form"
|
||||
class="info-form"
|
||||
label-align="left"
|
||||
@@ -72,7 +69,7 @@
|
||||
:placeholder="'请输入' + item.label"
|
||||
:disabled="!props.disabled && type ? !!item.disabled : props.disabled"
|
||||
/>
|
||||
|
||||
|
||||
<a-input-number
|
||||
v-if="item.type == 'input-number'"
|
||||
id="inputNumber"
|
||||
@@ -138,13 +135,24 @@
|
||||
:disabled="!props.disabled && type ? !!item.disabled : props.disabled"
|
||||
allow-clear
|
||||
>
|
||||
<a-select-option
|
||||
:value="selectItem.value"
|
||||
v-for="selectItem in item.list"
|
||||
:key="selectItem.value"
|
||||
>
|
||||
{{ selectItem.label }}
|
||||
</a-select-option>
|
||||
<template v-if="item.options">
|
||||
<a-select-option
|
||||
:value="selectItem[item.options.value]"
|
||||
v-for="selectItem in item.list"
|
||||
:key="selectItem[item.options.value]"
|
||||
>
|
||||
{{ selectItem[item.options.label] }}
|
||||
</a-select-option>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-select-option
|
||||
:value="selectItem.value"
|
||||
v-for="selectItem in item.list"
|
||||
:key="selectItem.value"
|
||||
>
|
||||
{{ selectItem.label }}
|
||||
</a-select-option>
|
||||
</template>
|
||||
</a-select>
|
||||
<!-- 下拉多选 -->
|
||||
<a-select
|
||||
@@ -548,11 +556,8 @@ defineExpose({
|
||||
}
|
||||
.card-content {
|
||||
margin-top: 15px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
:deep(.ant-timeline) {
|
||||
color: var(--theme-text-default) !important;
|
||||
|
||||
@@ -572,14 +577,13 @@ defineExpose({
|
||||
margin-bottom: 20px;
|
||||
|
||||
.box {
|
||||
color:#fff;
|
||||
width:230px;
|
||||
color: #fff;
|
||||
width: 230px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-image: url('../assets/boxBottom.png') 0 0 100% 0 stretch;
|
||||
|
||||
border-bottom: 5px solid transparent;
|
||||
border-image: url('../assets/boxBottom.png') 0 0 100% 0 stretch;
|
||||
|
||||
div:last-child {
|
||||
height: 25px;
|
||||
@@ -603,9 +607,8 @@ border-image: url('../assets/boxBottom.png') 0 0 100% 0 stretch;
|
||||
.title-none {
|
||||
display: none;
|
||||
}
|
||||
:deep(.ant-card){
|
||||
:deep(.ant-card) {
|
||||
background-color: transparent;
|
||||
|
||||
}
|
||||
:deep(.ant-card-body) {
|
||||
padding: 15px;
|
||||
@@ -629,25 +632,24 @@ border-image: url('../assets/boxBottom.png') 0 0 100% 0 stretch;
|
||||
height: calc(100% - 30px);
|
||||
.info-form {
|
||||
.item-div {
|
||||
|
||||
width:45%;
|
||||
|
||||
width: 45%;
|
||||
|
||||
display: inline-block;
|
||||
}
|
||||
.item-l{
|
||||
width:100%;
|
||||
.item-l {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.form-item {
|
||||
width:320px!important;
|
||||
width: 320px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-form-item-label) {
|
||||
color:#fff;
|
||||
color: #fff;
|
||||
font-size: 16px !important;
|
||||
width:100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
:deep(.ant-form-item-control-wrapper) {
|
||||
@@ -678,14 +680,15 @@ border-image: url('../assets/boxBottom.png') 0 0 100% 0 stretch;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
:deep(.ant-calendar-picker) {
|
||||
width: 100% !important;
|
||||
}
|
||||
:deep(.ant-picker) {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
:deep(.ant-input-number) {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
:deep(.ant-form-item.form-item) {
|
||||
padding: 0px !important;
|
||||
@@ -702,19 +705,7 @@ border-image: url('../assets/boxBottom.png') 0 0 100% 0 stretch;
|
||||
color: var(--theme-text-default) !important;
|
||||
}
|
||||
|
||||
|
||||
:deep(.ant-checkbox-wrapper) {
|
||||
color: var(--theme-text-default);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@@ -70,6 +70,9 @@ import {
|
||||
roleFormRules,
|
||||
stationOptions,
|
||||
stationFormRules,
|
||||
deviceOptions,
|
||||
deviceFormRules,
|
||||
alarmlogOptions,
|
||||
serviceApiOptions,
|
||||
serviceApiFormRules
|
||||
} from '../../public/config/columnList'
|
||||
@@ -115,6 +118,7 @@ export default {
|
||||
// menu: 'menuConfirm',
|
||||
user: 'userConfirm',
|
||||
role: 'roleConfirm',
|
||||
device: 'deviceConfirm',
|
||||
station: 'stationConfirm',
|
||||
serviceApi: 'serviceApiConfirm',
|
||||
// permission: 'permissionConfirm',
|
||||
@@ -163,6 +167,13 @@ export default {
|
||||
this.formRules = stationFormRules
|
||||
|
||||
break
|
||||
case 'device':
|
||||
this.detailInfos = deviceOptions
|
||||
this.formRules = deviceFormRules
|
||||
break
|
||||
case 'alarmLog':
|
||||
this.detailInfos = alarmlogOptions
|
||||
this.formRules = {}
|
||||
case 'serviceApi':
|
||||
this.detailInfos = serviceApiOptions
|
||||
this.formRules = serviceApiFormRules
|
||||
@@ -342,6 +353,37 @@ export default {
|
||||
console.log(error, 'stationConfirm')
|
||||
}
|
||||
},
|
||||
async deviceConfirm() {
|
||||
try {
|
||||
const menuApi = {
|
||||
add: '/insertDevice',
|
||||
edit: '/updateDevice'
|
||||
}
|
||||
const { is_open, rated_capacity, rated_current, rated_voltage, reted_power } = this.form
|
||||
const paramsDate = {
|
||||
...this.form,
|
||||
is_open: Number(is_open),
|
||||
attrs: JSON.stringify({rated_capacity, rated_current, rated_voltage, reted_power})
|
||||
}
|
||||
|
||||
|
||||
if (this.action == 'edit') {
|
||||
paramsDate.device_id = this.record.device_id
|
||||
}
|
||||
|
||||
const res = await postReq(menuApi[this.action], paramsDate)
|
||||
if (res.errcode === 0) {
|
||||
this.$message.success('添加成功')
|
||||
setTimeout(() => {
|
||||
this.handleback()
|
||||
}, 1000)
|
||||
} else {
|
||||
throw res
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error('添加失败')
|
||||
}
|
||||
},
|
||||
async serviceApiConfirm() {
|
||||
try {
|
||||
const menuApi = {
|
||||
|
||||
@@ -1,58 +1,89 @@
|
||||
<template>
|
||||
<div class="device">
|
||||
<div class="device" ref="device">
|
||||
<div class="device-item" v-for="item in deviceList" :key="item">
|
||||
<div class="item-header">
|
||||
<div style="display: flex; width: 50%">
|
||||
<div class="icon-bg"></div>
|
||||
<div class="icon-bg">
|
||||
<span class="iconfont" :class="getIcongont(item)"></span>
|
||||
</div>
|
||||
<div class="title">
|
||||
<span class="number">521245786665412</span>
|
||||
<span class="name">逆变器1</span>
|
||||
<span class="number type">逆变器</span>
|
||||
<span class="number">{{ item.device_id }}</span>
|
||||
<span class="name">{{ item.name }}</span>
|
||||
<span class="number type">{{ item.typename }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status">
|
||||
<div class="status-item">
|
||||
<span>在线</span>
|
||||
<span>{{ ['离线', '在线'][item.is_online] }}</span>
|
||||
<span class="text">在线状态</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span>在线</span>
|
||||
<span>{{ ['正常', '错误'][item.is_error] }}</span>
|
||||
<span class="text">故障状态</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span>在线</span>
|
||||
<span>{{ ['空闲', '工作'][item.is_running] }}</span>
|
||||
<span class="text">工作状态</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-content">
|
||||
<div v-for="info in chunengInfo" :key="info.key">
|
||||
<span class="text">{{ info.label }}：</span>
|
||||
<a-button
|
||||
v-if="info.key === 'realTimeData'"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="openModal"
|
||||
>查看</a-button
|
||||
>
|
||||
<span v-else class="value">{{ info.value }}</span>
|
||||
<div v-for="info in item.params" :key="info.k" class="item-info">
|
||||
<span class="text">{{ info.k }}：</span>
|
||||
|
||||
<span class="value">{{ info.v }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="item.view == 1" class="item-button">
|
||||
<span class="text">实时数据：</span>
|
||||
<a-button type="primary" size="small" @click="openModal(item)">查看</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<a-modal v-model:open="modalOpen" @ok="handleOk" width="800px">
|
||||
<!-- <p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p> -->
|
||||
<a-modal
|
||||
v-model:open="modalOpen"
|
||||
@ok="handleOk"
|
||||
width="90%"
|
||||
class="modal-device"
|
||||
:get-container="() => $refs.device"
|
||||
>
|
||||
<div>
|
||||
<div class="title">
|
||||
<div>电流电压</div>
|
||||
<img src="@/assets/images/titleLine.png" alt="" />
|
||||
</div>
|
||||
<div class="echarts">
|
||||
<predictEcharts
|
||||
:chart-options="chartOptions[0]"
|
||||
:chart-data="chartData"
|
||||
ref="chartRef1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="title">
|
||||
<div>功率</div>
|
||||
<img src="@/assets/images/titleLine.png" alt="" />
|
||||
</div>
|
||||
<div class="echarts">
|
||||
<predictEcharts
|
||||
:chart-options="chartOptions[1]"
|
||||
:chart-data="chartData"
|
||||
ref="chartRef2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import predictEcharts from '@/components/predict/predictEcharts.vue'
|
||||
import { postReq, getReq } from '@/request/api'
|
||||
import { deviceTypeList } from '@/utils/config'
|
||||
export default {
|
||||
name: '',
|
||||
components: {},
|
||||
components: { predictEcharts },
|
||||
props: {
|
||||
stationId: {
|
||||
type: String,
|
||||
@@ -79,7 +110,70 @@ export default {
|
||||
{ label: '实时数据', key: 'realTimeData', value: '0.01kWh' },
|
||||
{ label: '额定功率', key: 'ratedPower', value: '0.01kW' },
|
||||
{ label: '冷却方式', key: 'coolingMethod', value: '风冷' }
|
||||
]
|
||||
],
|
||||
chartOptions: [
|
||||
{
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
dataKey: 'chargeDischarge',
|
||||
infoKeys: [
|
||||
{
|
||||
key: 'V',
|
||||
label: '电压',
|
||||
seriesOptions: {
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#00FDF9' // 充电电量线条颜色
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#00FDF9' // 充电电量线条颜色
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'I',
|
||||
label: '电流',
|
||||
seriesOptions: {
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#3E7EEF' // 充电电量线条颜色
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#3E7EEF' // 充电电量线条颜色
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
dataKey: 'chargeDischarge',
|
||||
infoKeys: [
|
||||
{
|
||||
key: 'P',
|
||||
label: '功率',
|
||||
seriesOptions: {
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#00FDF9' // 充电电量线条颜色
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#00FDF9' // 充电电量线条颜色
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
chartData: {
|
||||
xdata: [],
|
||||
ydata: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@@ -99,24 +193,65 @@ export default {
|
||||
this.getDeviceList()
|
||||
},
|
||||
methods: {
|
||||
async getDeviceList() {
|
||||
const data = {
|
||||
category: this.systemType,
|
||||
'station_id': this.stationId,
|
||||
page: 0,
|
||||
'page_size': 1000
|
||||
}
|
||||
try {
|
||||
const res = await getReq('/queryDeviceList', data)
|
||||
getIcongont(ele) {
|
||||
return deviceTypeList.find((item) => item.value == ele.type).iconfont || ''
|
||||
},
|
||||
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
|
||||
},
|
||||
//查看实时数据
|
||||
async getDevicCharts(item) {
|
||||
try {
|
||||
const res = await getReq('/queryDevicCharts', {
|
||||
station_id: this.stationId,
|
||||
device_id: item.device_id
|
||||
})
|
||||
this.chartData.ydata = res.data
|
||||
this.chartData.xdata = this.generateTimePoints()
|
||||
this.$refs.chartRef1.initCharts()
|
||||
this.$refs.chartRef2.initCharts()
|
||||
|
||||
console.log(res)
|
||||
this.deviceList = res.data
|
||||
// this.selectStation=this.stations[0]['station_id']
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
openModal() {
|
||||
|
||||
//请求运行监控系统设备信息
|
||||
async getDeviceList() {
|
||||
try {
|
||||
const res = await getReq('/queryDevicByCategory', {
|
||||
station_id: this.stationId,
|
||||
category: this.systemType
|
||||
})
|
||||
|
||||
this.deviceList = res.data
|
||||
} catch (error) {
|
||||
this.deviceList = []
|
||||
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
async openModal(item) {
|
||||
await this.getDevicCharts(item)
|
||||
|
||||
this.modalOpen = true
|
||||
},
|
||||
handleOk() {
|
||||
@@ -136,8 +271,6 @@ export default {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
overflow-y: auto;
|
||||
.device-item {
|
||||
// width: 410px;
|
||||
// height: 340px;
|
||||
border-radius: 15px;
|
||||
|
||||
background: $bg2-color;
|
||||
@@ -149,11 +282,16 @@ export default {
|
||||
color: #fff;
|
||||
justify-content: space-between;
|
||||
.icon-bg {
|
||||
width: 76px;
|
||||
height: 72px;
|
||||
width: 66px;
|
||||
height: 66px;
|
||||
text-align: center;
|
||||
line-height: 66px;
|
||||
border-radius: 6px;
|
||||
background: linear-gradient(90deg, #3dfefa 0%, #2a82e4 2.96%, #27a188 100%),
|
||||
linear-gradient(90deg, #3dfefa 0%, #01dfef 2.96%, #08a5ff 100%);
|
||||
.iconfont {
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
display: flex;
|
||||
@@ -194,12 +332,20 @@ export default {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
color: #fff;
|
||||
display: grid;
|
||||
line-height: 45px;
|
||||
// line-height: 45px;
|
||||
margin-top: 15px;
|
||||
padding: 0 10px;
|
||||
height: 120px;
|
||||
overflow-y: auto;
|
||||
.value {
|
||||
font-weight: 700;
|
||||
}
|
||||
.item-info {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
.item-button {
|
||||
padding-left: 10px;
|
||||
}
|
||||
.text {
|
||||
color: $text-color;
|
||||
@@ -212,4 +358,22 @@ export default {
|
||||
.environment {
|
||||
width: 200px;
|
||||
}
|
||||
:deep(.modal-device) {
|
||||
color: #fff;
|
||||
.title {
|
||||
display: flex;
|
||||
font-weight: 700;
|
||||
flex-direction: column;
|
||||
|
||||
img {
|
||||
width: 232px;
|
||||
height: 6px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.echarts {
|
||||
width: 100%;
|
||||
height: 280px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -32,13 +32,12 @@
|
||||
</div>
|
||||
<div class="table-content">
|
||||
<ComTable
|
||||
:columns="columns"
|
||||
:table-data="tableData"
|
||||
:columns="columns[activeTab]"
|
||||
:table-data="tableDatas[activeTab]"
|
||||
@handlePagesizeChange="handlePagesizeChange"
|
||||
ref="comTable"
|
||||
:table-option="tableOption"
|
||||
:page-option="pageOption"
|
||||
:table-h="tableH"
|
||||
>
|
||||
</ComTable>
|
||||
</div>
|
||||
@@ -46,65 +45,143 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { postReq, getReq } from '@/request/api'
|
||||
export default {
|
||||
name: '',
|
||||
components: {},
|
||||
props: {},
|
||||
props: {
|
||||
stationId: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
systemType: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTab: '0',
|
||||
activeTab: 'temp_hum',
|
||||
columns: {
|
||||
airc: [
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'pos',
|
||||
key: 'pos',
|
||||
ellipsis: true,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
ellipsis: true,
|
||||
align: 'center'
|
||||
}
|
||||
],
|
||||
cooling: [
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'pos',
|
||||
key: 'pos',
|
||||
ellipsis: true,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
ellipsis: true,
|
||||
align: 'center'
|
||||
}
|
||||
],
|
||||
fire40: [
|
||||
{
|
||||
title: '点位',
|
||||
dataIndex: 'pos',
|
||||
key: 'pos',
|
||||
ellipsis: true,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
ellipsis: true,
|
||||
align: 'center'
|
||||
}
|
||||
],
|
||||
'temp_hum': [
|
||||
{
|
||||
title: '点位',
|
||||
dataIndex: 'pos',
|
||||
key: 'pos',
|
||||
ellipsis: true,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '温度',
|
||||
dataIndex: 'temp',
|
||||
key: 'temp',
|
||||
ellipsis: true,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '湿度',
|
||||
dataIndex: 'hum',
|
||||
key: 'hum',
|
||||
ellipsis: true,
|
||||
align: 'center'
|
||||
}
|
||||
]
|
||||
},
|
||||
tabList: [
|
||||
{
|
||||
key: '0',
|
||||
key: 'temp_hum',
|
||||
name: '环境温湿度信息'
|
||||
},
|
||||
{
|
||||
key: '1',
|
||||
key: 'fire40',
|
||||
name: '安防信息'
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
key: 'airc',
|
||||
name: '空调信息'
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
key: 'cooling',
|
||||
name: '冷机信息'
|
||||
}
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
title: '点位',
|
||||
dataIndex: 'policyId',
|
||||
key: 'policyId',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '温度',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '湿度',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
ellipsis: true
|
||||
}
|
||||
],
|
||||
tableDatas: {},
|
||||
|
||||
tableOption: {
|
||||
select: false,
|
||||
page: false
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
methods: {}
|
||||
mounted() {
|
||||
this.getEnvironment()
|
||||
},
|
||||
methods: {
|
||||
async getEnvironment() {
|
||||
try {
|
||||
const res = await getReq('/queryEnvironment', { station_id: this.stationId })
|
||||
console.log(res, '==============')
|
||||
this.tableDatas = res.data
|
||||
// this.deviceList=res.data
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.videos {
|
||||
width: 60%;
|
||||
width: calc(100% - 470px);
|
||||
margin-left: 20px;
|
||||
display: grid;
|
||||
grid-gap: 20px;
|
||||
@@ -130,7 +207,7 @@ export default {
|
||||
}
|
||||
}
|
||||
.environment {
|
||||
width: calc(40% - 20px);
|
||||
width: 430px;
|
||||
margin-left: 20px;
|
||||
color: #fff;
|
||||
|
||||
@@ -187,6 +264,7 @@ export default {
|
||||
}
|
||||
.table-content {
|
||||
margin-top: 20px;
|
||||
height: calc(100% - 60px);
|
||||
:deep(.ant-table) {
|
||||
border-radius: 10px 10px 0 0 !important;
|
||||
overflow: hidden; /* 确保圆角生效 */
|
||||
|
||||
@@ -1,16 +1,17 @@
|
||||
<template>
|
||||
<div class="echarts">
|
||||
<div class="chart-container">
|
||||
<div class="content-header">
|
||||
<div class="chart-container" >
|
||||
<div class="content-header" v-if="chartOptions.title">
|
||||
<div class="verline"></div>
|
||||
<span>{{ chartOptions.title }}</span>
|
||||
</div>
|
||||
<!-- {{ chartData.ydata }} -->
|
||||
|
||||
<div ref="chartContainer" class="echarts-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { postReq } from '@/request/api'
|
||||
export default {
|
||||
name: 'PredictEcharts',
|
||||
props: {
|
||||
@@ -20,8 +21,8 @@ export default {
|
||||
required: false // 非必须
|
||||
},
|
||||
chartData: {
|
||||
type: Array,
|
||||
default: () => ([]), // 默认空对象
|
||||
type: Object,
|
||||
default: () => ({}), // 默认空对象
|
||||
required: false // 非必须
|
||||
}
|
||||
},
|
||||
@@ -32,12 +33,11 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
|
||||
|
||||
this.$nextTick(() => {
|
||||
// 确保 DOM 完全渲染
|
||||
this.initCharts()
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
})
|
||||
// this.$nextTick(() => {
|
||||
// // 确保 DOM 完全渲染
|
||||
// this.initCharts()
|
||||
// window.addEventListener('resize', this.handleResize)
|
||||
// })
|
||||
},
|
||||
beforeUnmount() {
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
@@ -45,8 +45,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
initCharts() {
|
||||
// this.chartOptions.forEach((option, index) => {
|
||||
const {title,infoKeys,dataKey,type,smooth}=this.chartOptions
|
||||
const {infoKeys,dataKey,type,smooth}=this.chartOptions
|
||||
|
||||
const dom = this.$refs.chartContainer
|
||||
if (!dom) return
|
||||
@@ -73,12 +72,29 @@ export default {
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '3%',
|
||||
bottom: '1%',
|
||||
bottom: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'slider', // 滑动条型
|
||||
show: true,
|
||||
xAxisIndex: 0, // 控制第一个X轴
|
||||
start: 0, // 初始显示范围起点（百分比）
|
||||
end: 20, // 初始显示范围终点（百分比）
|
||||
height: 20, // 滑动条高度
|
||||
bottom: 10 // 距离底部距离
|
||||
},
|
||||
{
|
||||
type: 'inside', // 内置型（鼠标滚轮/拖拽交互）
|
||||
xAxisIndex: 0,
|
||||
start: 0,
|
||||
end: 20
|
||||
}
|
||||
],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.chartData.map((item) => item.date),
|
||||
data: this.chartData.xdata,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
@@ -122,7 +138,7 @@ export default {
|
||||
name: info.label,
|
||||
smooth: smooth || false,
|
||||
type: type,
|
||||
data: this.chartData.map((item) => item[info.key]),
|
||||
data: this.chartData.ydata[info.key],
|
||||
...info.seriesOptions,
|
||||
}
|
||||
})
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<img src="@/assets/images/titleLine.png" alt="" />
|
||||
</div>
|
||||
<a-form
|
||||
:model="formState"
|
||||
:model="formData"
|
||||
layout="inline"
|
||||
label-align="left"
|
||||
:label-col="{ style: { width: '85px' } }"
|
||||
@@ -22,7 +22,7 @@
|
||||
v-model:value="formData.type"
|
||||
placeholder=""
|
||||
:disabled="formStatus == 'read'"
|
||||
@change="changePolicy"
|
||||
|
||||
>
|
||||
<a-select-option v-for="item in policyTypes" :value="item.value">{{
|
||||
item.label
|
||||
@@ -69,39 +69,44 @@
|
||||
<a-form-item label="时段表" class="col1" v-if="formData.type == '1'">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="formData.period"
|
||||
:data-source="formData.period1"
|
||||
size="small"
|
||||
:scroll="{ y: 500 }"
|
||||
:pagination="false"
|
||||
row-class-name="no-hover-row"
|
||||
row-key="month"
|
||||
>
|
||||
<template #headerCell="{ column }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<span>
|
||||
<!-- <a-button type="primary" @click="handleAdd" :disabled="formStatus == 'read'">Add</a-button> -->
|
||||
<i
|
||||
class="iconfont icon-add"
|
||||
@click="handleAdd"
|
||||
:disabled="formStatus == 'read'"
|
||||
style="cursor: pointer"
|
||||
:style="{ cursor: formStatus == 'read' ? 'not-allowed' : 'pointer' }"
|
||||
></i>
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template #bodyCell="{ column, index }">
|
||||
<template v-if="column.dataIndex === 'action'">
|
||||
<span>
|
||||
<a @click="edit(record.key)">操作</a>
|
||||
<a
|
||||
@click="delPeriod(index)"
|
||||
:style="{ cursor: formStatus == 'read' ? 'not-allowed' : 'pointer' }"
|
||||
>删除</a
|
||||
>
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-form-item>
|
||||
<div v-if="formData.type == 5">
|
||||
<a-form-item label="充放策略" class="col1">
|
||||
<a-form-item label="充放策略" class="col1" name="chargePolicy">
|
||||
<a-radio-group
|
||||
v-model:value="formData.chargePolicy"
|
||||
:disabled="formStatus == 'read'"
|
||||
name="chargePolicy"
|
||||
@change="changePolicy"
|
||||
>
|
||||
<a-radio :value="1">一充一放</a-radio>
|
||||
<a-radio :value="2">两充两放</a-radio>
|
||||
@@ -109,58 +114,62 @@
|
||||
</a-form-item>
|
||||
<a-form-item label="" class="col1">
|
||||
<div class="charge">
|
||||
<div class="box" v-for="(item, index) in formData.chargePolicy" :key="index">
|
||||
<div class="box" v-for="(item, index) in formData.period5" :key="index">
|
||||
<span>第{{ index == 0 ? '一' : '二' }}次充放过程</span>
|
||||
<a-form
|
||||
:ref="'period' + index"
|
||||
:model="formData.period"
|
||||
:ref="
|
||||
(el) => {
|
||||
periodFormRefs[index] = el
|
||||
}
|
||||
"
|
||||
:model="item"
|
||||
layout="inline"
|
||||
label-align="left"
|
||||
:label-col="{ style: { width: '85px' } }"
|
||||
:rules="periodRules"
|
||||
>
|
||||
<a-form-item label="充电时间" class="col2" required>
|
||||
<a-form-item label="充电时间" class="col2" name="charge_time">
|
||||
<a-time-range-picker
|
||||
v-model:value="formData.period[index]['charge_time']"
|
||||
format="HH:mm"
|
||||
value-format="HH:mm"
|
||||
:disabled="formStatus == 'read'"
|
||||
v-model:value="formData.period5[index]['charge_time']"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="放电时间" class="col2" name="discharge_time">
|
||||
<a-time-range-picker
|
||||
v-model:value="formData.period5[index]['discharge_time']"
|
||||
format="HH:mm"
|
||||
value-format="HH:mm"
|
||||
:disabled="formStatus == 'read'"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="放电时间" class="col2" required>
|
||||
<a-time-range-picker
|
||||
v-model:value="formData.period[index]['discharge_time']"
|
||||
format="HH:mm"
|
||||
value-format="HH:mm"
|
||||
:disabled="formStatus == 'read'"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="充电功率" class="col2" required>
|
||||
<a-form-item label="充电功率" class="col2" name="chargeType">
|
||||
<a-radio-group
|
||||
v-model:value="formData.period[index].chargeType"
|
||||
:disabled="formStatus == 'read'"
|
||||
v-model:value="formData.period5[index].chargeType"
|
||||
|
||||
>
|
||||
<a-radio :value="0">自动</a-radio>
|
||||
<a-radio :value="1">自定义</a-radio>
|
||||
<a-input
|
||||
style="width: 60px"
|
||||
v-model:value="formData.period[index]['charge_power']"
|
||||
v-model:value="formData.period5[index]['charge_power']"
|
||||
></a-input>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="放电功率" class="col2" required>
|
||||
<a-form-item label="放电功率" class="col2" name="dischargeType">
|
||||
<a-radio-group
|
||||
v-model:value="formData.period[index].dischargeType"
|
||||
:disabled="formStatus == 'read'"
|
||||
v-model:value="formData.period5[index].dischargeType"
|
||||
|
||||
>
|
||||
<a-radio :value="0">自动</a-radio>
|
||||
<a-radio :value="1">自定义</a-radio>
|
||||
<a-input
|
||||
style="width: 60px"
|
||||
v-model:value="formData.period[index]['discharge_power']"
|
||||
v-model:value="formData.period5[index]['discharge_power']"
|
||||
></a-input>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
@@ -179,20 +188,25 @@
|
||||
<a-form-item class="col1">
|
||||
<div style="display: flex; justify-content: center; gap: 20px">
|
||||
<a-button @click="handleCancel">取消</a-button>
|
||||
<a-button @click="handleOk" type="primary">确认</a-button>
|
||||
<a-button @click="handleOk" type="primary" :disabled="formStatus == 'read'">确认</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
<a-modal v-model:open="periodModal" @ok="handlePeriodModalOk">
|
||||
<a-form ref="formRef" :model="periodForm" :label-col="{ style: { width: '85px' } }">
|
||||
<a-form-item ref="name" label="月份" name="month">
|
||||
<a-form
|
||||
ref="periodRef"
|
||||
:model="periodForm"
|
||||
:label-col="{ style: { width: '85px' } }"
|
||||
:rules="rules"
|
||||
>
|
||||
<a-form-item ref="name" label="月份" name="month" required>
|
||||
<a-input v-model:value="periodForm.month" />
|
||||
</a-form-item>
|
||||
<a-form-item label="开始时间" name="time">
|
||||
<a-form-item label="开始时间" name="time" required>
|
||||
<a-time-picker v-model:value="periodForm.time" value-format="HH:mm" format="HH:mm" />
|
||||
</a-form-item>
|
||||
<a-form-item label="时段类型" name="type">
|
||||
<a-form-item label="时段类型" name="type" required>
|
||||
<a-select ref="select" v-model:value="periodForm.type">
|
||||
<a-select-option value="尖">尖</a-select-option>
|
||||
<a-select-option value="峰">峰</a-select-option>
|
||||
@@ -230,7 +244,10 @@ export default {
|
||||
return {
|
||||
data: [],
|
||||
policyTypes,
|
||||
formData: {},
|
||||
formData: {
|
||||
period1: [],
|
||||
period5: []
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: '月份',
|
||||
@@ -273,14 +290,17 @@ export default {
|
||||
message: '请选择时段',
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
],
|
||||
month: [{ required: true, message: '请输入名称', trigger: 'change' }],
|
||||
time: [{ required: true, message: '请输入名称', trigger: 'change' }]
|
||||
},
|
||||
periodRules: {
|
||||
chargeTime: [{ required: true, trigger: 'change' }],
|
||||
dischargeTime: [{ required: true, trigger: 'change' }],
|
||||
charge_time: [{ required: true, trigger: 'change' }],
|
||||
discharge_time: [{ required: true, trigger: 'change' }],
|
||||
chargeType: [{ required: true, trigger: 'change' }],
|
||||
dischargeType: [{ required: true, trigger: 'change' }]
|
||||
}
|
||||
},
|
||||
periodFormRefs: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@@ -288,38 +308,32 @@ export default {
|
||||
handler(newVal) {
|
||||
if (this.formStatus == 'add') {
|
||||
this.formData = {
|
||||
type: '1',
|
||||
type: '5',
|
||||
name: '测试',
|
||||
price: [0, 0, 0, 0],
|
||||
period: [],
|
||||
period1: [],
|
||||
period5: [
|
||||
{
|
||||
charge_time: [],
|
||||
discharge_time: [],
|
||||
charge_power: '',
|
||||
discharge_power: '',
|
||||
chargeType: null,
|
||||
dischargeType: null
|
||||
}
|
||||
// {
|
||||
// charge_time: [],
|
||||
// discharge_time: [],
|
||||
// charge_power: '',
|
||||
// discharge_power: '',
|
||||
// chargeType: 1,
|
||||
// dischargeType:1
|
||||
// }
|
||||
],
|
||||
is_open: false,
|
||||
chargePolicy: 1
|
||||
}
|
||||
// this.formData = {
|
||||
// type: '5',
|
||||
// name: '测试',
|
||||
// price: [0, 0, 0, 0],
|
||||
// chargePolicy:1,//1从
|
||||
// period: [{
|
||||
// charge_time: [],
|
||||
// discharge_time: [],
|
||||
// charge_power: '',
|
||||
// discharge_power: '',
|
||||
// chargeType: 1,
|
||||
// dischargeType:1
|
||||
// },
|
||||
// {
|
||||
// charge_time: [],
|
||||
// discharge_time: [],
|
||||
// charge_power: '',
|
||||
// discharge_power: '',
|
||||
// chargeType: 1,
|
||||
// dischargeType:1
|
||||
// }
|
||||
// ],
|
||||
// is_open: false,
|
||||
// chargePolicy:1
|
||||
// }
|
||||
|
||||
} else {
|
||||
this.getFormData(newVal)
|
||||
}
|
||||
@@ -330,46 +344,85 @@ export default {
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
changePolicy(val) {
|
||||
console.log(val)
|
||||
changePolicy(e) {
|
||||
const val = e.target.value
|
||||
if (val == 1) {
|
||||
this.formData.period = []
|
||||
// const {length} = this.formData.period5
|
||||
|
||||
// this.formData.period5.splice(1,1)
|
||||
this.formData.period1=[]
|
||||
|
||||
} else {
|
||||
this.formData.period = [
|
||||
this.formData.period5[1] =
|
||||
{
|
||||
charge_time: [],
|
||||
discharge_time: [],
|
||||
charge_power: '',
|
||||
discharge_power: '',
|
||||
powerType: 1
|
||||
},
|
||||
{
|
||||
charge_time: [''],
|
||||
discharge_time: [''],
|
||||
charge_power: '',
|
||||
discharge_power: '',
|
||||
powerType: 1
|
||||
chargeType: null,
|
||||
dischargeType:null
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
//提交表单
|
||||
handleOk() {
|
||||
const { name, type, price, is_open, period, chargePolicy } = this.formData
|
||||
const newForm = { name, type, is_open }
|
||||
async handleOk() {
|
||||
const { type, price, is_open, chargePolicy } = this.formData
|
||||
const periodKey = `period${type}`
|
||||
const period = this.formData[periodKey] // 正确使用 period
|
||||
const newForm = { ...this.formData, is_open: Number(is_open) }
|
||||
|
||||
if (type == 1) {
|
||||
newForm.value = JSON.stringify({
|
||||
const data = {
|
||||
period: this.getPeriodJson(type, period),
|
||||
price: price.map((item) => Number(item))
|
||||
})
|
||||
price: price.map((item) => Number(item).toFixed(2))
|
||||
}
|
||||
|
||||
newForm.value = JSON.stringify(data)
|
||||
delete newForm.period1
|
||||
} else {
|
||||
newForm.value = JSON.stringify({
|
||||
const data = {
|
||||
period: this.getPeriodJson(type, period.slice(0, chargePolicy)),
|
||||
price: price.map((item) => Number(item))
|
||||
})
|
||||
price: price.map((item) => Number(item).toFixed(2))
|
||||
}
|
||||
newForm.value = JSON.stringify(data)
|
||||
delete newForm.period5
|
||||
}
|
||||
console.log(newForm, 'this.formData')
|
||||
this.addPolicy(newForm)
|
||||
delete newForm.price
|
||||
// console.log(this.$refs.formRef,'=================');
|
||||
|
||||
//校验表单
|
||||
// const formRefres = await this.validateform('formRef',newForm)
|
||||
// const formRefres = this.validateform(periodKey,newForm)
|
||||
// console.log(formRefres);
|
||||
|
||||
this.validateform(newForm)
|
||||
},
|
||||
async validateform(newForm) {
|
||||
try {
|
||||
await this.$refs.formRef.validateFields()
|
||||
if(newForm.type==5){
|
||||
const validFormRefs = this.periodFormRefs.filter((item) =>
|
||||
item && typeof item.validateFields === 'function'
|
||||
)
|
||||
await Promise.all(
|
||||
validFormRefs.map((item) => item.validateFields())
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
if (this.formStatus == 'add') {
|
||||
this.addPolicy(newForm)
|
||||
} else if (this.formStatus == 'edit') {
|
||||
this.updatePolicy(newForm)
|
||||
}
|
||||
|
||||
|
||||
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
|
||||
},
|
||||
handleCancel() {
|
||||
this.$emit('closeModal')
|
||||
@@ -377,54 +430,96 @@ export default {
|
||||
async addPolicy(newForm) {
|
||||
try {
|
||||
const res = await postReq('/insertPolicy', newForm)
|
||||
if (res.errcode == 0) {
|
||||
this.$message.success('添加成功')
|
||||
this.$emit('closeModal', true)
|
||||
}
|
||||
console.log(res)
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
async updatePolicy(newForm) {
|
||||
try {
|
||||
const res = await postReq('/updatePolicy', newForm)
|
||||
if (res.errcode == 0) {
|
||||
this.$message.success('更新成功')
|
||||
this.$emit('closeModal', true)
|
||||
}
|
||||
console.log(res)
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
//时段表删除
|
||||
delPeriod(index) {
|
||||
// console.log(record);
|
||||
this.formData.period1.splice(index, 1)
|
||||
},
|
||||
|
||||
//获取编辑的表单
|
||||
getFormData(newVal) {
|
||||
|
||||
const { value, type } = newVal
|
||||
const { price, period } = JSON.parse(value)
|
||||
|
||||
const jsonValue = JSON.parse(value)
|
||||
const { price, period } = jsonValue
|
||||
|
||||
this.formData = {
|
||||
...newVal,
|
||||
is_open: Boolean(newVal['is_open']),
|
||||
price,
|
||||
period: this.getPeriod(type, period)
|
||||
price
|
||||
}
|
||||
// const periodKey=period[type]
|
||||
this.formData[`period${type}`] = this.getPeriod(type, period)
|
||||
console.log(this.formData)
|
||||
},
|
||||
handleAdd() {
|
||||
this.periodModal = true
|
||||
this.periodForm = {}
|
||||
},
|
||||
handlePeriodModalOk() {
|
||||
this.formData.period.push(this.periodForm)
|
||||
this.periodModal = false
|
||||
this.$refs.periodRef
|
||||
.validateFields()
|
||||
.then((res) => {
|
||||
console.log(this.formData.period1,'=============')
|
||||
const target = this.formData.period1.find((item) => item.month == this.periodForm.month)
|
||||
|
||||
if (target) {
|
||||
target.children.push(this.periodForm) // 如果找到，放入 children
|
||||
}else{
|
||||
this.formData.period1.push(this.periodForm)
|
||||
}
|
||||
|
||||
// this.formData.period1.push(this.periodForm)
|
||||
this.periodModal = false
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
getPeriod(type, list=[]) {
|
||||
getPeriod(type, list = []) {
|
||||
let newValue = []
|
||||
debugger
|
||||
|
||||
if (type == 1) {
|
||||
list.forEach((arr, index) => {
|
||||
const item = arr[0]
|
||||
if (arr.length == 0) return
|
||||
const item = arr[0] || []
|
||||
newValue.push({
|
||||
month: index + 1,
|
||||
time: item[0]||'',
|
||||
type: item[1]||'',
|
||||
time: item[0] || '',
|
||||
type: item[1] || '',
|
||||
children: []
|
||||
})
|
||||
for (let i = 1; i < arr.length; i++) {
|
||||
const element = arr[i]
|
||||
newValue[index].children.push({
|
||||
time: element[0]||'',
|
||||
type: element[1]||''
|
||||
time: element[0] || '',
|
||||
type: element[1] || ''
|
||||
})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.formData.chargePolicy = list.length
|
||||
list.forEach((item, index) => {
|
||||
const ele = {
|
||||
...item,
|
||||
@@ -434,6 +529,8 @@ export default {
|
||||
newValue.push(ele)
|
||||
})
|
||||
}
|
||||
console.log(newValue, '==========')
|
||||
|
||||
return newValue
|
||||
},
|
||||
getPeriodJson(type, period) {
|
||||
@@ -444,6 +541,11 @@ export default {
|
||||
period.forEach((item, index) => {
|
||||
const { month, time, type } = item
|
||||
newPeriod[month - 1].push([time, type])
|
||||
if (item.children.length > 0) {
|
||||
item.children.forEach((ele) => {
|
||||
newPeriod[month - 1].push([ele.time, ele.type])
|
||||
})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
period.forEach((item, index) => {
|
||||
@@ -455,7 +557,7 @@ export default {
|
||||
newPeriod.push(ele)
|
||||
})
|
||||
}
|
||||
return JSON.stringify(newPeriod)
|
||||
return newPeriod
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -533,7 +635,42 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.ant-form-item-row) {
|
||||
// border: 1px solid red;
|
||||
:deep(.ant-table-wrapper .ant-table-row-expand-icon) {
|
||||
color: $green !important;
|
||||
}
|
||||
//表格行悬浮样式
|
||||
:deep(.no-hover-row:hover > td) {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
:deep(.ant-table-wrapper .ant-table-cell){
|
||||
background:none!important;
|
||||
}
|
||||
// /* 禁用行的 hover 过渡动画 */
|
||||
// .ant-table-tbody > tr.ant-table-row {
|
||||
// transition: none !important;
|
||||
// }
|
||||
|
||||
// /* 确保 hover 背景色完全透明 */
|
||||
// .ant-table-tbody > tr.ant-table-row:hover > td {
|
||||
// background-color: transparent !important;
|
||||
// }
|
||||
// .ant-table-wrapper .ant-table-tbody > tr.ant-table-row:hover > td {
|
||||
// background-color: transparent !important;
|
||||
// }
|
||||
// :deep(.ant-table-tbody > tr.ant-table-row:hover > td) {
|
||||
// background-color: transparent !important;
|
||||
// }
|
||||
// :deep(.ant-table-tbody) {
|
||||
// color: var(--theme-text-default) !important;
|
||||
|
||||
// > tr {
|
||||
// &:hover {
|
||||
// > .ant-table-cell {
|
||||
|
||||
// background: none !important;
|
||||
// }
|
||||
// }
|
||||
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
|
||||
@@ -10,22 +10,25 @@ import '@/style/index.scss'
|
||||
import * as echarts from 'echarts'
|
||||
import { setWidth } from '@/utils/column'
|
||||
import { getBtns } from '@/utils/btnList'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
|
||||
import VueTianditu from 'vue-tianditu'
|
||||
import SearchBox from '@/components/SearchBox.vue'
|
||||
import ComTable from '@/components/ComTable.vue'
|
||||
import OperateCom from '@/components/OperateCom'
|
||||
import TreeTable from '@/components/TreeTable.vue'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.component('SearchBox', SearchBox)
|
||||
app.component('ComTable', ComTable)
|
||||
app.component('OperateCom', OperateCom)
|
||||
app.component('TreeTable', TreeTable)
|
||||
|
||||
app.config.globalProperties.$echarts = echarts // 挂载到全局属性
|
||||
app.config.globalProperties.$setWidth = setWidth // 挂载到全局属性
|
||||
app.config.globalProperties.$getBtns = getBtns
|
||||
app.config.globalProperties.$message = message
|
||||
app.config.globalProperties.$Modal = Modal
|
||||
|
||||
app.use(store).use(router).use(Antd).use(VueTianditu).mount('#app')
|
||||
|
||||
@@ -85,17 +85,20 @@ export const routes = [
|
||||
{
|
||||
name: 'device',
|
||||
path: 'device',
|
||||
title: '设备管理'
|
||||
title: '设备管理',
|
||||
component: () => import(/* webpackChunkName: "system" */ '@/views/system/device.vue')
|
||||
},
|
||||
{
|
||||
name: 'log',
|
||||
name: 'alarmLog',
|
||||
path: 'log',
|
||||
title: '告警日志'
|
||||
title: '告警日志',
|
||||
component: () => import(/* webpackChunkName: "system" */ '@/views/system/alarmLog.vue')
|
||||
},
|
||||
{
|
||||
name: 'syslog',
|
||||
name: 'sylog',
|
||||
path: 'syslog',
|
||||
title: '系统日志'
|
||||
title: '系统日志',
|
||||
component: () => import(/* webpackChunkName: "system" */ '@/views/system/log.vue')
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@ const btnList = [
|
||||
]
|
||||
|
||||
function getBtns(arr) {
|
||||
console.log(route, 'route')
|
||||
console.log(this.$route, 'route')
|
||||
// JSON.parse(localStorage.getItem('permission')).find((item)=>item.route==)
|
||||
// const permissions =
|
||||
// JSON.parse(localStorage.getItem('permission')) || {}
|
||||
|
||||
@@ -13,3 +13,146 @@ export const policyTypes = [
|
||||
// label: '峰谷套利2'
|
||||
// }
|
||||
]
|
||||
|
||||
export const deviceTypeList = [
|
||||
{
|
||||
value: 1,
|
||||
label: '变压器',
|
||||
iconfont: 'icon-transformer'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '配电柜',
|
||||
iconfont: 'icon-dianpingcai'
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: '电表',
|
||||
iconfont: 'icon-dianbiao'
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
label: '门禁',
|
||||
iconfont: 'icon-menjin'
|
||||
},
|
||||
{
|
||||
value: 5,
|
||||
label: '空调',
|
||||
iconfont: 'icon-kongdiaogongcheng'
|
||||
},
|
||||
{
|
||||
value: 6,
|
||||
label: '照明',
|
||||
iconfont: 'icon-zhaomingdeng'
|
||||
},
|
||||
{
|
||||
value: 7,
|
||||
label: '消防',
|
||||
iconfont: 'icon-xiaofang'
|
||||
},
|
||||
{
|
||||
value: 8,
|
||||
label: '光照监测设备',
|
||||
iconfont: 'icon-guangzhaojianceshebei'
|
||||
},
|
||||
{
|
||||
value: 9,
|
||||
label: '风速监测设备',
|
||||
iconfont: 'icon-fengsujiance'
|
||||
},
|
||||
{
|
||||
value: 10,
|
||||
label: '温湿度监测设备',
|
||||
iconfont: 'icon-wenshidujiance'
|
||||
},
|
||||
{
|
||||
value: 11,
|
||||
label: '烟感监测设备',
|
||||
iconfont: 'icon-yanganjiance'
|
||||
},
|
||||
{
|
||||
value: 12,
|
||||
label: '水浸传感器',
|
||||
iconfont: 'icon-shuijinchuanganqiicon'
|
||||
},
|
||||
{
|
||||
value: 13,
|
||||
label: '视频监控',
|
||||
iconfont: 'icon-shipinjiankong'
|
||||
},
|
||||
{
|
||||
value: 100,
|
||||
label: '储能预制舱',
|
||||
iconfont: 'icon-jizhuangxiang'
|
||||
},
|
||||
{
|
||||
value: 101,
|
||||
label: 'EMS',
|
||||
iconfont: 'icon-quexianguanli'
|
||||
},
|
||||
{
|
||||
value: 102,
|
||||
label: 'PCS',
|
||||
iconfont: 'icon-nengyuanguanli'
|
||||
},
|
||||
{
|
||||
value: 103,
|
||||
label: 'PCU',
|
||||
iconfont: 'icon-bianyaqi'
|
||||
},
|
||||
{
|
||||
value: 104,
|
||||
label: 'BMS',
|
||||
iconfont: 'icon-BMSchunengdianchi'
|
||||
},
|
||||
{
|
||||
value: 105,
|
||||
label: 'BCU',
|
||||
iconfont: 'icon-L-chunengdianchicu'
|
||||
},
|
||||
{
|
||||
value: 106,
|
||||
label: '充电桩',
|
||||
iconfont: 'icon-charging-pile-line'
|
||||
},
|
||||
{
|
||||
value: 107,
|
||||
label: '充电枪',
|
||||
iconfont: 'icon-chongdianqiang'
|
||||
},
|
||||
{
|
||||
value: 108,
|
||||
label: '集中器',
|
||||
iconfont: 'icon-jizhongqi'
|
||||
},
|
||||
{
|
||||
value: 109,
|
||||
label: '光伏板',
|
||||
iconfont: 'icon-guangfuban'
|
||||
},
|
||||
{
|
||||
value: 110,
|
||||
label: '风力发电机光感',
|
||||
iconfont: 'icon-zhuangjirongliang'
|
||||
}
|
||||
]
|
||||
// 日志类型：0:其它; 1:系统日志; 2:操作日志; 3:设备日志
|
||||
|
||||
export const logTypes = [
|
||||
{
|
||||
value: '0',
|
||||
label: '其它'
|
||||
},
|
||||
{
|
||||
value: '1',
|
||||
label: '系统日志'
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '操作日志'
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '设备日志'
|
||||
}
|
||||
]
|
||||
|
||||
@@ -91,15 +91,15 @@ export default {
|
||||
},
|
||||
{
|
||||
name: '设备管理',
|
||||
icon: 'icon-rizhiguanli'
|
||||
path: '/device '
|
||||
},
|
||||
{
|
||||
name: '告警日志',
|
||||
icon: 'icon-rizhiguanli'
|
||||
path: '/log'
|
||||
},
|
||||
{
|
||||
name: '系统日志',
|
||||
icon: 'icon-rizhiguanli'
|
||||
path: '/syslog'
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -172,7 +172,7 @@ export default {
|
||||
subMenuClick(subMenu) {
|
||||
console.log(subMenu, subMenu.path)
|
||||
this.subCurrentKey = subMenu.path
|
||||
this.$router.push(subMenu.path)
|
||||
this.$router.push('/system'+subMenu.path)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div class="left">
|
||||
<div class="search-item">
|
||||
<span>场站切换</span>
|
||||
<a-select v-model:value="selectStation" style="width: 220px">
|
||||
<a-select v-model:value="selectStationId" style="width: 220px" @change="getStationChange">
|
||||
<a-select-option v-for="station in stations" :value="station['station_id']"
|
||||
>{{ station.name }}
|
||||
</a-select-option>
|
||||
@@ -14,8 +14,8 @@
|
||||
<div class="right">
|
||||
<div class="search-item">
|
||||
<span>运行模式</span>
|
||||
<a-select v-model:value="value" style="width: 220px">
|
||||
<a-select-option value="lucy">Lucy</a-select-option>
|
||||
<a-select v-model:value="workMode" style="width: 220px">
|
||||
<a-select-option :value="item.value" v-for="item in workModes">{{ item.label }}</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
@@ -38,8 +38,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<videos v-if="systemType == 4" />
|
||||
<device v-else :station-id="selectStation" :system-type="systemType"/>
|
||||
<videos v-if="systemType == 4" :station-id="selectStationId"/>
|
||||
<device v-else :station-id="selectStationId" :system-type="systemType"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -62,7 +62,7 @@ export default {
|
||||
systemType: 1,
|
||||
value: [],
|
||||
stations: [],
|
||||
selectStation:'',
|
||||
selectStationId:'',
|
||||
systems: [
|
||||
{
|
||||
name: '储能系统',
|
||||
@@ -91,27 +91,80 @@ export default {
|
||||
// {
|
||||
// name: "储能系统4",
|
||||
// }
|
||||
]
|
||||
],
|
||||
workMode:'',
|
||||
workModes:[
|
||||
// 0：手动，1：峰谷套利，2：增网配容，3：应急供电，4：并网保电，5：自定时段
|
||||
{
|
||||
value:0,
|
||||
label:'手动'
|
||||
},
|
||||
{
|
||||
value:1,
|
||||
label:'峰谷套利'
|
||||
},
|
||||
{
|
||||
value:2,
|
||||
label:'增网配容'
|
||||
},
|
||||
{
|
||||
value:3,
|
||||
label:'应急供电'
|
||||
},
|
||||
{
|
||||
value:4,
|
||||
label:'并网保电'
|
||||
},
|
||||
{
|
||||
value:5,
|
||||
label:'自定时段'
|
||||
}
|
||||
|
||||
],
|
||||
deviceGroup:[]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getStations()
|
||||
},
|
||||
methods: {
|
||||
//场站切换
|
||||
getStationChange(val){
|
||||
console.log(val);
|
||||
this.getStationAttr()
|
||||
|
||||
},
|
||||
//查询场站列表
|
||||
async getStations() {
|
||||
try {
|
||||
const res = await getReq('/queryStationList', { page: 0, 'page_size': 10000 })
|
||||
|
||||
console.log(res)
|
||||
this.stations = res.data
|
||||
this.selectStation=this.stations[0]['station_id']
|
||||
this.selectStationId=this.stations[0]['station_id']
|
||||
this.getStationAttr()
|
||||
} catch (error) {
|
||||
this.stations = []
|
||||
this.selectStation=''
|
||||
this.selectStationId=''
|
||||
this.$message.error(error.message)
|
||||
}
|
||||
},
|
||||
// 查询场站的参数
|
||||
async getStationAttr(){
|
||||
try {
|
||||
const res = await getReq('/queryStationOverview', { station_id: this.selectStationId })
|
||||
|
||||
res.data.device_group.forEach((Element,index) => {
|
||||
this.systems[index].num=Element.count
|
||||
this.systems[index].power=Element.power
|
||||
});
|
||||
this.workMode=res.data.work_mode
|
||||
} catch (error) {
|
||||
this.deviceGroup = []
|
||||
this.workMode=''
|
||||
// this.$message.error(error.errmsg)
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
chooseStation(system) {
|
||||
this.systemType = system.systemType
|
||||
@@ -166,6 +219,7 @@ export default {
|
||||
width: calc(100% - 30px);
|
||||
margin: 0 15px 15px 15px;
|
||||
border-radius: 12px;
|
||||
min-width: 150px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -189,8 +243,9 @@ export default {
|
||||
}
|
||||
}
|
||||
.container {
|
||||
width: 87%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div class="predict">
|
||||
<div class="top">
|
||||
<predictEcharts :chart-options="chartOptions[0]" :chart-data="chartData"/>
|
||||
<predictEcharts :chart-options="chartOptions[0]" :chart-data="chartData" ref="chartRef1"/>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="item">
|
||||
<predictEcharts :chart-options="chartOptions[1]" :chart-data="chartData"/>
|
||||
<predictEcharts :chart-options="chartOptions[1]" :chart-data="chartData" ref="chartRef2"/>
|
||||
</div>
|
||||
<div class="item">
|
||||
<predictEcharts :chart-options="chartOptions[2]" :chart-data="chartData"/>
|
||||
<predictEcharts :chart-options="chartOptions[2]" :chart-data="chartData" ref="chartRef3"/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -24,241 +24,159 @@ export default {
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
chartOptions:[ {
|
||||
title: '储能充放电预测',
|
||||
type: 'line',
|
||||
smooth:false,
|
||||
dataKey: 'chargeDischarge',
|
||||
infoKeys: [
|
||||
chartOptions:[
|
||||
{
|
||||
title: '储能充放电预测',
|
||||
type: 'line',
|
||||
smooth:false,
|
||||
dataKey: 'chargeDischarge',
|
||||
infoKeys: [
|
||||
|
||||
{
|
||||
key: 'key1',
|
||||
label: '电压',
|
||||
seriesOptions:{
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#00FDF9' // 充电电量线条颜色
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#00FDF9' // 充电电量线条颜色
|
||||
{
|
||||
key: 'W_store_in',
|
||||
label: '充电电量',
|
||||
seriesOptions:{
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#00FDF9' // 充电电量线条颜色
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#00FDF9' // 充电电量线条颜色
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
key: 'key2',
|
||||
label: '电流',
|
||||
|
||||
seriesOptions:{
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#3E7EEF' // 充电电量线条颜色
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#3E7EEF' // 充电电量线条颜色
|
||||
},
|
||||
{
|
||||
key: 'W_store_ou',
|
||||
label: '储能放电电量',
|
||||
seriesOptions:{
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#3E7EEF' // 充电电量线条颜色
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#3E7EEF' // 充电电量线条颜色
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
title: '充电负荷预测',
|
||||
type: 'line',
|
||||
smooth:false,
|
||||
dataKey: 'chargeDischarge',
|
||||
infoKeys: [
|
||||
title: '充电负荷预测',
|
||||
type: 'line',
|
||||
smooth:false,
|
||||
dataKey: 'chargeDischarge',
|
||||
infoKeys: [
|
||||
|
||||
{
|
||||
key: 'key1',
|
||||
label: '电压',
|
||||
seriesOptions:{
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#00FDF9' // 充电电量线条颜色
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#00FDF9' // 充电电量线条颜色
|
||||
{
|
||||
key: 'W_charge',
|
||||
label: '运行负荷',
|
||||
seriesOptions:{
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#00FDF9' // 充电电量线条颜色
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#00FDF9' // 充电电量线条颜色
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
key: 'key2',
|
||||
label: '电流',
|
||||
|
||||
seriesOptions:{
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#3E7EEF' // 充电电量线条颜色
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#3E7EEF' // 充电电量线条颜色
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
title: '光伏发电预测',
|
||||
type: 'line',
|
||||
smooth:false,
|
||||
dataKey: 'chargeDischarge',
|
||||
infoKeys: [
|
||||
title: '光伏发电预测',
|
||||
type: 'line',
|
||||
smooth:false,
|
||||
dataKey: 'chargeDischarge',
|
||||
infoKeys: [
|
||||
|
||||
{
|
||||
key: 'key1',
|
||||
label: '电压',
|
||||
seriesOptions:{
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#00FDF9' // 充电电量线条颜色
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#00FDF9' // 充电电量线条颜色
|
||||
{
|
||||
key: 'P_solar',
|
||||
label: '发电功率',
|
||||
seriesOptions:{
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#3F80F2' // 充电电量线条颜色
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#3F80F2' // 充电电量线条颜色
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
key: 'key2',
|
||||
label: '电流',
|
||||
},
|
||||
{
|
||||
key: 'W_solar',
|
||||
label: '发电量',
|
||||
|
||||
seriesOptions:{
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#3E7EEF' // 充电电量线条颜色
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#3E7EEF' // 充电电量线条颜色
|
||||
seriesOptions:{
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
itemStyle: {
|
||||
color: '#7747E8' // 充电电量线条颜色
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#7747E8' // 充电电量线条颜色
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
],
|
||||
|
||||
chartData: [
|
||||
{
|
||||
date: '2025-08-30',
|
||||
key1: 10,
|
||||
key2: 10,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-29',
|
||||
key1: 8,
|
||||
key2: 5,
|
||||
key3: 5,
|
||||
key4: 7
|
||||
},
|
||||
{
|
||||
date: '2025-08-28',
|
||||
key1: 10,
|
||||
key2: 10,
|
||||
key3: 20,
|
||||
key4: 4
|
||||
},
|
||||
{
|
||||
date: '2025-08-27',
|
||||
key1: 10,
|
||||
key2: 10,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-26',
|
||||
key1: 10,
|
||||
key2: 5,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-25',
|
||||
key1: 10,
|
||||
key2: 5,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-24',
|
||||
key1: 10,
|
||||
key2: 6,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-23',
|
||||
key1: 10,
|
||||
key2: 7,
|
||||
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
|
||||
}
|
||||
],
|
||||
chartData: {
|
||||
xdata:[],
|
||||
ydata:{}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getData()
|
||||
this.$nextTick(() => {
|
||||
this.getData()
|
||||
})
|
||||
|
||||
},
|
||||
methods: {
|
||||
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
|
||||
},
|
||||
async getData(){
|
||||
const date={}
|
||||
try {
|
||||
const res=await getReq('/queryPredictionDay',{date:'2025-09-04'})
|
||||
console.log(res);
|
||||
const res=await getReq('/queryPredictionDetail')
|
||||
this.chartData.ydata=res.data
|
||||
this.chartData.xdata = this.generateTimePoints()
|
||||
|
||||
this.$refs.chartRef1.initCharts()
|
||||
this.$refs.chartRef2.initCharts()
|
||||
this.$refs.chartRef3.initCharts()
|
||||
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
|
||||
|
||||
209
web/src/views/system/alarmLog.vue
Normal file
209
web/src/views/system/alarmLog.vue
Normal file
@@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<div class="alarmLog">
|
||||
<searchBox
|
||||
:btn-option-list="btnOptionList"
|
||||
@operateForm="operateForm"
|
||||
></searchBox>
|
||||
|
||||
<div class="content-table">
|
||||
<ComTable
|
||||
:columns="columns"
|
||||
:table-data="tableData"
|
||||
@handlePagesizeChange="handlePagesizeChange"
|
||||
ref="comTable"
|
||||
:table-option="tableOption"
|
||||
:page-option="pageOption"
|
||||
:table-h="tableH"
|
||||
>
|
||||
<template #type="record">
|
||||
<span>{{ ['其它','系统日志','操作日志','设备日志'][record.type] }}</span>
|
||||
</template>
|
||||
<template #status="record">
|
||||
<span><a-tag :color="record.status ? 'red' : 'green'">{{
|
||||
record.status ? '异常' : '正常'
|
||||
}}</a-tag></span>
|
||||
</template>
|
||||
|
||||
<template #action="record">
|
||||
<OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
|
||||
</template>
|
||||
</ComTable>
|
||||
</div>
|
||||
<a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
|
||||
<!-- action:edit add -->
|
||||
<EditCom
|
||||
:record="formState"
|
||||
@operateForm="operateForm"
|
||||
type="alarmLog"
|
||||
:action="formStatus"
|
||||
></EditCom>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { columnList, alarmlogOptions } from '../../../public/config/columnList'
|
||||
import { getReq, postReq } from '@/request/api.js'
|
||||
import EditCom from '@/components/EditCom.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
|
||||
import { createVNode } from 'vue'
|
||||
import { Modal } from 'ant-design-vue'
|
||||
export default {
|
||||
name: '',
|
||||
components: {
|
||||
EditCom,
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
formModal: false,
|
||||
formState: {},
|
||||
formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
|
||||
pageOption: {
|
||||
pageSize: 10,
|
||||
page: 1
|
||||
},
|
||||
btnOptionList: [],
|
||||
paramsDate: {}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
let info = []
|
||||
let col = columnList.find((i) => i.page == 'alarmLog').columns
|
||||
if (col.length) {
|
||||
col.forEach((item) => {
|
||||
info.push(this.$setWidth(item))
|
||||
})
|
||||
}
|
||||
this.columns = info
|
||||
},
|
||||
|
||||
mounted() {
|
||||
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('/querySystemLogList', 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) {
|
||||
//统一处理报错提示
|
||||
}
|
||||
},
|
||||
async operateForm(type, record = {}) {
|
||||
this.formStatus = type
|
||||
|
||||
if(type=='edit'||type=='read'){
|
||||
await this.getRuleFormInfo(record)
|
||||
|
||||
this.formModal = true
|
||||
this.formState = record
|
||||
}else if(type=='del'){
|
||||
this.handleDelete([record.device_id],this.getList)
|
||||
}else if(type=='back'){
|
||||
this.formModal = false
|
||||
this.getList()
|
||||
}
|
||||
|
||||
},
|
||||
// 删除操作
|
||||
async handleDelete(id,callback) {
|
||||
const that = this
|
||||
Modal.confirm({
|
||||
title: '你确认删除数据吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
|
||||
async onOk() {
|
||||
try {
|
||||
const res = await getReq('/deleteUser',{user_id:id})
|
||||
if (res.errcode === 0) {
|
||||
this.$message.success(res.errmsg)
|
||||
this.pageOption.page=1
|
||||
callback()
|
||||
} else {
|
||||
throw res
|
||||
}
|
||||
} catch (error) {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
onCancel() {
|
||||
// console.log("Cancel");
|
||||
},
|
||||
class: 'test'
|
||||
})
|
||||
},
|
||||
async getRuleFormInfo(record) {
|
||||
|
||||
|
||||
const row = record || {}
|
||||
|
||||
for (let e of alarmlogOptions) {
|
||||
for (let i of e.list) {
|
||||
e.ruleForm[i.key] = row[i.key] || ''
|
||||
// if (i.key === 'id') {
|
||||
// e.ruleForm.id = row.id
|
||||
// } else if (i.key === 'is_open') {
|
||||
// e.ruleForm.is_open = Boolean(row.is_open)
|
||||
// } else {
|
||||
// e.ruleForm[i.key] = row[i.key] || ''
|
||||
// }
|
||||
|
||||
// if (i.key === 'station_id') {
|
||||
// i.list = this.stations
|
||||
// }
|
||||
// if(['rated_capacity', 'rated_current', 'rated_voltage', 'reted_power'].includes(i.key)){
|
||||
// const attrs=JSON.parse(row.attrs||"{}")
|
||||
// e.ruleForm[i.key] = attrs[i.key]
|
||||
// }
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
handlePagesizeChange(pageOption) {
|
||||
this.pageOption.pageSize = pageOption.pageSize
|
||||
this.pageOption.page = pageOption.page
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.alarmLog {
|
||||
height: 100%;
|
||||
|
||||
.content-table {
|
||||
height: calc(100% - 70px);
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
241
web/src/views/system/device.vue
Normal file
241
web/src/views/system/device.vue
Normal file
@@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<div class="device">
|
||||
<searchBox
|
||||
:btn-option-list="btnOptionList"
|
||||
@operateForm="operateForm"
|
||||
></searchBox>
|
||||
|
||||
<div class="content-table">
|
||||
<ComTable
|
||||
:columns="columns"
|
||||
:table-data="tableData"
|
||||
@handlePagesizeChange="handlePagesizeChange"
|
||||
ref="comTable"
|
||||
:table-option="tableOption"
|
||||
:page-option="pageOption"
|
||||
>
|
||||
<template #type="record">
|
||||
<span>{{ getType(record.type) }}</span>
|
||||
</template>
|
||||
<template #isEnable="record">
|
||||
<span><a-tag :color="record.is_open ? 'green' : 'red'">{{
|
||||
record.is_open ? '启用' : '禁用'
|
||||
}}</a-tag></span>
|
||||
</template>
|
||||
|
||||
<template #action="record">
|
||||
<OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
|
||||
</template>
|
||||
</ComTable>
|
||||
</div>
|
||||
<a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
|
||||
<!-- action:edit add -->
|
||||
<EditCom
|
||||
:record="formState"
|
||||
@operateForm="operateForm"
|
||||
type="device"
|
||||
:action="formStatus"
|
||||
></EditCom>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { columnList, deviceOptions } from '../../../public/config/columnList'
|
||||
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 { createVNode } from 'vue'
|
||||
import { Modal } from 'ant-design-vue'
|
||||
import searchBox from '@/components/SearchBox.vue'
|
||||
import {deviceTypeList} from '@/utils/config'
|
||||
export default {
|
||||
name: '',
|
||||
components: {
|
||||
searchBox,
|
||||
EditCom,
|
||||
ComTable,
|
||||
OperateCom
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
deviceTypeList,
|
||||
formModal: false,
|
||||
formState: {},
|
||||
formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
|
||||
pageOption: {
|
||||
pageSize: 10,
|
||||
page: 1
|
||||
},
|
||||
btnOptionList: [],
|
||||
paramsDate: {},
|
||||
tableData:[],
|
||||
tableOption:{},
|
||||
stations:[],//场站列表
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
let info = []
|
||||
let col = columnList.find((i) => i.page == 'device').columns
|
||||
if (col.length) {
|
||||
col.forEach((item) => {
|
||||
info.push(this.$setWidth(item))
|
||||
})
|
||||
}
|
||||
this.columns = info
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.operateList = this.$getBtns(['查看', '修改', '删除'])
|
||||
this.btnOptionList = this.$getBtns(['新增'])
|
||||
this.getList()
|
||||
this.getStations()
|
||||
},
|
||||
|
||||
methods: {
|
||||
//查询场站列表
|
||||
async getStations() {
|
||||
this.stations=[]
|
||||
try {
|
||||
const res = await getReq('/queryStationList', { page: 0, 'page_size': 10000 })
|
||||
|
||||
this.stations = res.data
|
||||
|
||||
} catch (error) {
|
||||
this.stations = []
|
||||
|
||||
}
|
||||
return
|
||||
},
|
||||
//获取设备类型
|
||||
getType(type){
|
||||
const deviceType = this.deviceTypeList.find((item) => item.value == type).label||''
|
||||
return deviceType
|
||||
|
||||
},
|
||||
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('/queryDeviceList', 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) {
|
||||
//统一处理报错提示
|
||||
}
|
||||
},
|
||||
async operateForm(type, record = {}) {
|
||||
this.formStatus = type
|
||||
if(type=='add'){
|
||||
this.formModal = true
|
||||
this.formState = {}
|
||||
this.getRuleFormInfo()
|
||||
}else if(type=='edit'||type=='read'){
|
||||
await this.getRuleFormInfo(record)
|
||||
|
||||
this.formModal = true
|
||||
this.formState = record
|
||||
}else if(type=='del'){
|
||||
this.handleDelete([record.device_id],this.getList)
|
||||
}else if(type=='back'){
|
||||
this.formModal = false
|
||||
this.getList()
|
||||
}
|
||||
|
||||
},
|
||||
// 删除操作
|
||||
async handleDelete(id,callback) {
|
||||
const that = this
|
||||
Modal.confirm({
|
||||
title: '你确认删除数据吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
|
||||
async onOk() {
|
||||
try {
|
||||
const res = await getReq('/deleteDevice',{device_id:id})
|
||||
if (res.errcode === 0) {
|
||||
this.$message.success(res.errmsg)
|
||||
this.pageOption.page=1
|
||||
callback()
|
||||
} else {
|
||||
throw res
|
||||
}
|
||||
} catch (error) {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
onCancel() {
|
||||
},
|
||||
class: 'test'
|
||||
})
|
||||
},
|
||||
async getRuleFormInfo(record) {
|
||||
|
||||
|
||||
const row = record || {}
|
||||
|
||||
for (let e of deviceOptions) {
|
||||
for (let i of e.list) {
|
||||
if (i.key === 'id') {
|
||||
e.ruleForm.id = row.id
|
||||
} else if (i.key === 'is_open') {
|
||||
e.ruleForm.is_open = Boolean(row.is_open)
|
||||
} else {
|
||||
e.ruleForm[i.key] = row[i.key] || ''
|
||||
}
|
||||
|
||||
if (i.key === 'station_id') {
|
||||
i.list = this.stations
|
||||
}
|
||||
if(['rated_capacity', 'rated_current', 'rated_voltage', 'reted_power'].includes(i.key)){
|
||||
const attrs=JSON.parse(row.attrs||"{}")
|
||||
e.ruleForm[i.key] = attrs[i.key]
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
handlePagesizeChange(pageOption) {
|
||||
this.pageOption.pageSize = pageOption.pageSize
|
||||
this.pageOption.page = pageOption.page
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.device {
|
||||
height: 100%;
|
||||
|
||||
.content-table {
|
||||
height: calc(100% - 70px);
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
216
web/src/views/system/log.vue
Normal file
216
web/src/views/system/log.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div class="alarmlog">
|
||||
<searchBox
|
||||
:btn-option-list="btnOptionList"
|
||||
@operateForm="operateForm"
|
||||
></searchBox>
|
||||
|
||||
<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>
|
||||
<a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
|
||||
<!-- action:edit add -->
|
||||
<EditCom
|
||||
:record="record"
|
||||
@operateForm="operateForm"
|
||||
type="user"
|
||||
:action="formStatus"
|
||||
></EditCom>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { columnList, userOptions } from '../../../public/config/columnList'
|
||||
import { getReq, postReq } from '@/request/api.js'
|
||||
|
||||
import EditCom from '@/components/EditCom.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
|
||||
import { createVNode } from 'vue'
|
||||
|
||||
export default {
|
||||
name: '',
|
||||
components: {
|
||||
EditCom
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
formModal: false,
|
||||
formState: {},
|
||||
formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
|
||||
pageOption: {
|
||||
pageSize: 10,
|
||||
page: 1
|
||||
},
|
||||
btnOptionList: [],
|
||||
paramsDate: {}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
let info = []
|
||||
let col = columnList.find((i) => i.page == 'alarmlog').columns
|
||||
if (col.length) {
|
||||
col.forEach((item) => {
|
||||
info.push(this.$setWidth(item))
|
||||
})
|
||||
}
|
||||
this.columns = info
|
||||
},
|
||||
|
||||
mounted() {
|
||||
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('/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 = {}) {
|
||||
console.log(record, record.id, 'rrrrrrrrrr')
|
||||
this.formStatus = type
|
||||
switch (type) {
|
||||
case 'add':
|
||||
this.formModal = true
|
||||
this.formState = {}
|
||||
this.getRuleFormInfo()
|
||||
|
||||
break
|
||||
case 'edit':
|
||||
case 'read':
|
||||
this.formModal = true
|
||||
this.formState = record
|
||||
this.getRuleFormInfo(record)
|
||||
break
|
||||
|
||||
case 'del':
|
||||
this.handleDelete([record.user_id], this.getList)
|
||||
|
||||
break
|
||||
|
||||
case 'back':
|
||||
this.formModal = false
|
||||
this.getList()
|
||||
break
|
||||
|
||||
default:
|
||||
break
|
||||
}
|
||||
},
|
||||
// 删除操作
|
||||
async handleDelete(id, callback) {
|
||||
const that = this
|
||||
Modal.confirm({
|
||||
title: '你确认删除数据吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
|
||||
async onOk() {
|
||||
try {
|
||||
const res = await getReq('/deleteUser', { user_id: id })
|
||||
if (res.errcode === 0) {
|
||||
this.$message.success(res.errmsg)
|
||||
this.pageOption.page = 1
|
||||
callback()
|
||||
} else {
|
||||
throw res
|
||||
}
|
||||
} catch (error) {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
onCancel() {
|
||||
// console.log("Cancel");
|
||||
},
|
||||
class: 'test'
|
||||
})
|
||||
},
|
||||
async getRuleFormInfo(record) {
|
||||
function getInfo(data, url) {
|
||||
return new Promise((reslove, reject) => {
|
||||
getReq(data, url).then((res) => {
|
||||
reslove(res.data)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
let row = {}
|
||||
if (record && record.user_id) {
|
||||
// row = await getInfo({ id: record.id },'/queryUserList')
|
||||
this.record = record
|
||||
row = record
|
||||
// this.type='edit'
|
||||
}
|
||||
userOptions.forEach((e, index) => {
|
||||
e.list.forEach((i) => {
|
||||
e.ruleForm[i.key] = row ? row[i.key] : ''
|
||||
e.ruleForm.id = row.id
|
||||
})
|
||||
})
|
||||
},
|
||||
handlePagesizeChange(pageOption) {
|
||||
this.pageOption.pageSize = pageOption.pageSize
|
||||
this.pageOption.page = pageOption.page
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user {
|
||||
height: 100%;
|
||||
|
||||
.content-table {
|
||||
height: calc(100% - 70px);
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="policy">
|
||||
<div class="policy" ref="policy">
|
||||
<searchBox :btn-option-list="btnOptionList" @onSearch="onSearch" @operateForm="operateForm" />
|
||||
<div class="content-table">
|
||||
<ComTable
|
||||
@@ -20,36 +20,20 @@
|
||||
}}</a-tag>
|
||||
</template>
|
||||
<template #action="record">
|
||||
<a-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="operateForm('read', record)"
|
||||
style="margin-left: 10px"
|
||||
>查看</a-button
|
||||
>
|
||||
<a-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="operateForm('edit', record)"
|
||||
class="btn-edit"
|
||||
style="margin-left: 10px"
|
||||
>修改</a-button
|
||||
>
|
||||
<a-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="operateForm('del', record)"
|
||||
class="btn-del"
|
||||
style="margin-left: 10px"
|
||||
>删除</a-button
|
||||
>
|
||||
<OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
|
||||
</template>
|
||||
</ComTable>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<a-modal v-model:open="formModal" width="70%" style="top: 20px" :footer="null">
|
||||
<policyForm :form-state="formState" :form-status="formStatus" @closeModal="closeModal"/>
|
||||
<a-modal
|
||||
v-model:open="formModal"
|
||||
width="70%"
|
||||
style="top: 20px"
|
||||
:footer="null"
|
||||
:get-container="() => $refs.policy"
|
||||
>
|
||||
<policyForm :form-state="formState" :form-status="formStatus" @closeModal="closeModal" />
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
@@ -58,6 +42,8 @@
|
||||
import policyForm from '@/components/system/policyForm.vue'
|
||||
import { getReq } from '@/request/api'
|
||||
import { policyTypes } from '@/utils/config'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
|
||||
import { createVNode } from 'vue'
|
||||
export default {
|
||||
name: '',
|
||||
components: { policyForm },
|
||||
@@ -66,8 +52,6 @@ export default {
|
||||
return {
|
||||
formModal: false,
|
||||
btnOptionList: [
|
||||
{ label: '新增', icon: 'icon-tianjia', type: 'add' },
|
||||
{ label: '删除', icon: 'icon-tianjia', type: 'del' }
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
@@ -125,18 +109,23 @@ export default {
|
||||
}
|
||||
],
|
||||
tableData: [],
|
||||
tableOption: {},
|
||||
tableOption: {
|
||||
select:false
|
||||
},
|
||||
pageOption: {
|
||||
page: 0,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
count: 0
|
||||
},
|
||||
tableH: '',
|
||||
formState: {},
|
||||
formStatus:'add',//c表单状态辑状态 add:新增 edit:编辑
|
||||
formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
|
||||
operateList:[]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.operateList = this.$getBtns(['查看', '修改', '删除'])
|
||||
this.btnOptionList = this.$getBtns(['新增'])
|
||||
this.getTableList()
|
||||
},
|
||||
methods: {
|
||||
@@ -148,13 +137,12 @@ export default {
|
||||
})
|
||||
console.log(res)
|
||||
this.tableData = res.data
|
||||
this.total = res.count
|
||||
this.pageOption.count = res.count
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
getPolicyType(type) {
|
||||
|
||||
return policyTypes.find((item) => item.value == type)?.label || ''
|
||||
},
|
||||
|
||||
@@ -162,7 +150,8 @@ export default {
|
||||
console.log(data)
|
||||
},
|
||||
operateForm(type, record = {}) {
|
||||
|
||||
console.log(type, record)
|
||||
|
||||
this.formStatus = type
|
||||
switch (type) {
|
||||
case 'add':
|
||||
@@ -173,16 +162,71 @@ export default {
|
||||
this.formModal = true
|
||||
this.formState = record
|
||||
break
|
||||
|
||||
case 'del':
|
||||
this.handleDelete(record.policy_id)
|
||||
break
|
||||
case 'edit':
|
||||
this.formModal = true
|
||||
this.formState = record
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
},
|
||||
closeModal(){
|
||||
// async handleDelete(record) {
|
||||
// try {
|
||||
// const res = await getReq('/deletePolicy', {
|
||||
// policy_id: record['policy_id']
|
||||
// })
|
||||
// if (res.errcode == 0) {
|
||||
// this.$message.success('删除成功')
|
||||
// this.getTableList()
|
||||
// }
|
||||
// } catch (error) {
|
||||
// this.$message.success(error)
|
||||
// }
|
||||
// },
|
||||
// 删除操作
|
||||
async handleDelete(id) {
|
||||
const that = this
|
||||
this.$Modal.confirm({
|
||||
title: '你确认删除数据吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
|
||||
async onOk() {
|
||||
try {
|
||||
const res = await getReq('/deletePolicy', {
|
||||
policy_id: id
|
||||
})
|
||||
if (res.errcode == 0) {
|
||||
that.$message.success('删除成功')
|
||||
that.getTableList()
|
||||
}
|
||||
} catch (error) {
|
||||
that.$message.success(error)
|
||||
}
|
||||
},
|
||||
onCancel() {
|
||||
// console.log("Cancel");
|
||||
},
|
||||
class: 'test'
|
||||
})
|
||||
},
|
||||
closeModal(flag = false) {
|
||||
this.formModal = false
|
||||
if (flag) {
|
||||
this.pageOption.page = 1
|
||||
this.getTableList()
|
||||
}
|
||||
},
|
||||
handlePagesizeChange(data) {
|
||||
console.log(data)
|
||||
if (data.pageSize !== this.pageOption.pageSize) {
|
||||
this.pageOption.page = 1
|
||||
} else {
|
||||
this.pageOption.page = data.page
|
||||
}
|
||||
this.pageOption.pageSize = data.pageSize
|
||||
this.getTableList()
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -195,7 +239,7 @@ export default {
|
||||
padding: 0 15px;
|
||||
.content-table {
|
||||
width: 100%;
|
||||
height: calc(100% - 92px);
|
||||
height: calc(100% - 90px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -42,8 +42,6 @@
|
||||
<script>
|
||||
import { columnList, serviceApiOptions } from '../../../public/config/columnList'
|
||||
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 { createVNode } from 'vue'
|
||||
@@ -54,8 +52,6 @@ export default {
|
||||
components: {
|
||||
searchBox,
|
||||
EditCom,
|
||||
ComTable,
|
||||
OperateCom
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
|
||||
Reference in New Issue
Block a user