diff --git a/web/babel.config.js b/web/babel.config.js
index 162a3ea..59dfb82 100644
--- a/web/babel.config.js
+++ b/web/babel.config.js
@@ -1,3 +1,12 @@
module.exports = {
- presets: ["@vue/cli-plugin-babel/preset"],
-};
+ plugins: [
+ [
+ 'import',
+ {
+ libraryName: 'ant-design-vue',
+ libraryDirectory: 'es',
+ style: true // 或 true(使用 less)
+ }
+ ]
+ ]
+}
diff --git a/web/public/config/columnList.js b/web/public/config/columnList.js
index f4f9fee..e00475e 100644
--- a/web/public/config/columnList.js
+++ b/web/public/config/columnList.js
@@ -288,7 +288,9 @@ export const columnList = [
title: '操作',
dataIndex: 'operate',
key: 'operate',
- scopedSlots: { customRender: 'action' }
+ scopedSlots: { customRender: 'action' },
+ fixed: 'right',
+ align: 'center'
}
]
},
@@ -350,45 +352,30 @@ export const columnList = [
]
},
{
- page: 'log',
+ page: 'syslog',
columns: [
{
- title: '用户',
- dataIndex: 'userName',
- width: 180
+ title: '日志ID',
+ dataIndex: 'log_id'
},
{
- title: '日志类型',
- dataIndex: 'type',
- key: 'type',
- width: 120,
+ title: '操作用户',
+ dataIndex: 'user_id',
+ key: 'user_id',
+ 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',
+ title: '日志内容',
+ dataIndex: 'content',
+ key: 'content',
ellipsis: true
},
{
- title: '生成时间',
- dataIndex: 'createTime',
- key: 'createTime',
+ title: '记录时间',
+ dataIndex: 'create_time',
+ key: 'create_time',
align: 'center',
ellipsis: true,
width: 180
@@ -406,7 +393,6 @@ export const columnList = [
title: '操作',
dataIndex: 'operate',
key: 'operate',
- width: 80,
scopedSlots: { customRender: 'action' }
}
]
@@ -871,8 +857,58 @@ export const alarmlogOptions = [
label: '状态',
type: 'select',
list: [
- { value: 0, label: '异常' },
- { value: 1, label: '正常' }
+ { value: '0', label: '异常' },
+ { value: '1', label: '正常' }
+ ],
+ value: [],
+ key: 'status'
+ }
+ ],
+ ruleForm: {}
+ }
+]
+export const syslogOptions = [
+ {
+ title: '基础信息',
+ icon: 'icon-xinxi',
+ list: [
+ {
+ label: '日志ID',
+ value: '',
+ key: 'log_id',
+ type: 'input'
+ },
+
+ {
+ label: '操作用户ID',
+ value: '',
+ key: 'user_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'
diff --git a/web/src/components/ComTable.vue b/web/src/components/ComTable.vue
index d425351..ac2eac0 100644
--- a/web/src/components/ComTable.vue
+++ b/web/src/components/ComTable.vue
@@ -161,8 +161,11 @@ const scroll = ref({})
onMounted(async () => {
data.newColumns = [...props.columns]
data.realTableData = [...props.tableData]
+
await nextTick()
// console.log(props.tableH, 'props.tableH');
+ console.log(comtable.value.offsetHeight,'comtable.value.offsetHeight');
+
scroll.value = { y: comtable.value.offsetHeight - 56 }
})
@@ -220,10 +223,11 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
diff --git a/web/src/components/DetailInfo.vue b/web/src/components/DetailInfo.vue
index 186847e..923f945 100644
--- a/web/src/components/DetailInfo.vue
+++ b/web/src/components/DetailInfo.vue
@@ -371,7 +371,7 @@ import {
onMounted,
defineExpose
} from 'vue'
-import { TreeSelect } from 'ant-design-vue'
+
import iconfonts from '../assets/iconfont/iconfont.json'
import validateRulesObj from '../utils/decorator'
@@ -641,7 +641,7 @@ defineExpose({
}
.form-item {
- width: 320px !important;
+ // width: 320px !important;
}
}
}
diff --git a/web/src/components/EditCom.vue b/web/src/components/EditCom.vue
index 07502d3..0d3373b 100644
--- a/web/src/components/EditCom.vue
+++ b/web/src/components/EditCom.vue
@@ -174,6 +174,7 @@ export default {
case 'alarmLog':
this.detailInfos = alarmlogOptions
this.formRules = {}
+ break
case 'serviceApi':
this.detailInfos = serviceApiOptions
this.formRules = serviceApiFormRules
diff --git a/web/src/components/monitor/device.vue b/web/src/components/monitor/device.vue
index 6e44c7f..9ba5315 100644
--- a/web/src/components/monitor/device.vue
+++ b/web/src/components/monitor/device.vue
@@ -35,9 +35,15 @@
{{ info.v }}
-
-
-
-
电流电压
-

+
+
+
+
电流电压
+

+
+
-
-
+
+
+
功率
+

+
+
-
-
-
功率
-

-
-
+
+
@@ -98,19 +119,7 @@ export default {
return {
modalOpen: false,
deviceList: [],
- chunengInfo: [
- { label: '运行模式', key: 'operationMode', value: '并网运行' },
- { label: '电池储能容量', key: 'batteryCapacity', value: '100kWh' },
- { label: '实时电压', key: 'voltage', value: '232.5V' },
- { label: '功率因数', key: 'powerFactor', value: '0.95' },
- { label: '实时电流', key: 'current', value: '0.01A' },
- { label: '额定电压', key: 'ratedVoltage', value: '232.5V' },
- { label: '实时功率', key: 'power', value: '0.01kW' },
- { label: '额定电流', key: 'ratedCurrent', value: '0.01A' },
- { label: '实时数据', key: 'realTimeData', value: '0.01kWh' },
- { label: '额定功率', key: 'ratedPower', value: '0.01kW' },
- { label: '冷却方式', key: 'coolingMethod', value: '风冷' }
- ],
+
chartOptions: [
{
type: 'line',
@@ -173,6 +182,52 @@ export default {
chartData: {
xdata: [],
ydata: {}
+ },
+ modalComponent: 1,
+ columns: [
+ {
+ title: '序号',
+ dataIndex: 'id',
+ key: 'id',
+ ellipsis: true,
+ fixed: 'left'
+ },
+ {
+ title: '单体SOC(%)',
+ dataIndex: 'SOC',
+ key: 'SOC'
+ },
+ {
+ title: '单体SOH(%)',
+ dataIndex: 'SOH',
+ key: 'SOH'
+ },
+ {
+ title: '单体电压(V)',
+ dataIndex: 'V',
+ key: 'V'
+ },
+ {
+ title: '单体温度(℃)',
+ dataIndex: 'T',
+ key: 'T'
+ },
+ {
+ title: '单体内阻(Ω)',
+ dataIndex: 'R_i',
+ key: 'R_i'
+ }
+ ],
+ tableData: [],
+ pageOption: {
+ // pageSize: 1000,
+ // page: 1
+ },
+ tableOption: {
+ scroll: {
+ y: 500
+ },
+ page: false
}
}
},
@@ -193,6 +248,11 @@ export default {
this.getDeviceList()
},
methods: {
+ handlePagesizeChange(pageOption) {
+ this.pageOption.pageSize = pageOption.pageSize
+ this.pageOption.page = pageOption.page
+ this.getList()
+ },
getIcongont(ele) {
return deviceTypeList.find((item) => item.value == ele.type).iconfont || ''
},
@@ -228,7 +288,22 @@ export default {
this.chartData.xdata = this.generateTimePoints()
this.$refs.chartRef1.initCharts()
this.$refs.chartRef2.initCharts()
+ } catch (error) {
+ console.log(error)
+ }
+ },
+ //查询BCU单体信息
+ async getDeviceBCUDetail(item) {
+ try {
+ const res = await getReq('/queryDeviceBCUDetail', {
+ station_id: this.stationId,
+ device_id: item.device_id
+ })
+ this.tableData = res.data.map((item, index) => {
+ item.id = index + 1
+ return item
+ })
} catch (error) {
console.log(error)
}
@@ -249,8 +324,14 @@ export default {
console.log(error)
}
},
- async openModal(item) {
- await this.getDevicCharts(item)
+ async openModal(item, val) {
+ console.log(item, '=============')
+ this.modalComponent = val
+ if (val == 1) {
+ await this.getDevicCharts(item)
+ } else {
+ await this.getDeviceBCUDetail(item)
+ }
this.modalOpen = true
},
@@ -268,13 +349,16 @@ export default {
margin-left: 20px;
display: grid;
grid-gap: 20px;
- grid-template-columns: 1fr 1fr 1fr;
overflow-y: auto;
+ grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
.device-item {
border-radius: 15px;
-
background: $bg2-color;
padding: 15px;
+ min-width: 340px;
+ max-width: 430px;
+ max-height: 230px;
+ flex: 1;
.item-header {
display: flex;
align-items: center;
@@ -290,7 +374,7 @@ export default {
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;
+ font-size: 45px;
}
}
.title {
@@ -332,8 +416,8 @@ export default {
grid-template-columns: 1fr 1fr;
color: #fff;
display: grid;
- // line-height: 45px;
margin-top: 15px;
+ margin-bottom: 3px;
padding: 0 10px;
height: 120px;
overflow-y: auto;
@@ -345,7 +429,12 @@ export default {
}
}
.item-button {
+ width: 100%;
padding-left: 10px;
+ display: flex;
+ div {
+ width: calc(50% - 10px);
+ }
}
.text {
color: $text-color;
@@ -354,26 +443,35 @@ export default {
margin-top: 10px;
}
}
+ .content-table {
+ height: 700px;
+ margin-top: 40px;
+
+ :deep(.ant-table-header tr th) {
+ background: $table-border !important;
+ color: #fff;
+ }
+ :deep(.ant-table-body tr td, .ant-table-cell) {
+ background: $table-bg !important;
+ color: #fff;
+ }
+ }
}
.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;
- }
+:deep(.ant-modal-body) {
+ :deep(.ant-table-wrapper .ant-table-row-expand-icon) {
+ color: $green !important;
}
- .echarts {
- width: 100%;
- height: 280px;
+ //表格行悬浮样式
+ .no-hover-row:hover > td {
+ // background-color: transparent !important;
+ background-color: #f0f8ff !important;
}
}
+// .a-modal :deep(.ant-table-thead > tr > th) {
+// background-color: #f0f8ff !important;
+// }
diff --git a/web/src/components/monitor/videos.vue b/web/src/components/monitor/videos.vue
index f175643..56537c1 100644
--- a/web/src/components/monitor/videos.vue
+++ b/web/src/components/monitor/videos.vue
@@ -1,8 +1,8 @@
-
+
-
xxxxz监控点
+
{{ item.name }}
@@ -53,10 +52,6 @@ export default {
stationId: {
type: String,
default: ''
- },
- systemType: {
- type: Number,
- default: 1
}
},
data() {
@@ -111,7 +106,7 @@ export default {
align: 'center'
}
],
- 'temp_hum': [
+ temp_hum: [
{
title: '点位',
dataIndex: 'pos',
@@ -158,20 +153,39 @@ export default {
tableOption: {
select: false,
page: false
- }
+ },
+ videoList: []
}
},
mounted() {
+ console.log(this.systemType)
+
this.getEnvironment()
+ this.getDeviceList()
},
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) {
+ this.tableDatas={}
+ console.log(error)
+ }
+ },
+ //请求运行监控系统设备信息
+ async getDeviceList() {
+ try {
+ const res = await getReq('/queryDevicByCategory', {
+ station_id: this.stationId,
+ category: 4
+ })
+
+ this.videoList = res.data.concat(res.data)
+ } catch (error) {
+ this.videoList = []
+
console.log(error)
}
}
@@ -182,18 +196,18 @@ export default {
diff --git a/web/src/main.js b/web/src/main.js
index 350ff23..086f95a 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -3,21 +3,62 @@ import App from './App.vue'
import router from './router'
import store from './store'
-import Antd from 'ant-design-vue'
-import 'ant-design-vue/dist/reset.css'
+
import '@/style/index.scss'
-// import '@/assets/iconfont/iconfont.css'
-import * as echarts from 'echarts'
+
+import * as echarts from 'echarts/core'
+import { BarChart, LineChart } from 'echarts/charts'
+import {
+ TitleComponent,
+ TooltipComponent,
+ GridComponent,
+ DatasetComponent,
+ LegendComponent,
+ TransformComponent,
+ DataZoomComponent
+} from 'echarts/components'
+// 标签自动布局、全局过渡动画等特性
+import { LabelLayout, UniversalTransition } from 'echarts/features'
+// 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
+import { CanvasRenderer } from 'echarts/renderers'
import { setWidth } from '@/utils/column'
import { getBtns } from '@/utils/btnList'
-import { message, Modal } from 'ant-design-vue'
-
+import {
+ message,
+ Modal,
+ Button,
+ Table,
+ Tag,
+ Select,
+ DatePicker,
+ Input,
+ Pagination,
+ ConfigProvider,
+ notification,
+ TreeSelect
+} 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'
+// 注册必须的组件
+echarts.use([
+ TitleComponent,
+ TooltipComponent,
+ GridComponent,
+ DatasetComponent,
+ TransformComponent,
+ DataZoomComponent,
+ BarChart,
+ LineChart,
+ LabelLayout,
+ UniversalTransition,
+ CanvasRenderer,
+ LegendComponent
+])
+
const app = createApp(App)
app.component('SearchBox', SearchBox)
@@ -31,4 +72,17 @@ 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')
+app.use(store).use(router)
+app
+ .use(Button)
+ .use(Modal)
+ .use(Table)
+ .use(Tag)
+ .use(Select)
+ .use(DatePicker)
+ .use(Input)
+ .use(Pagination)
+ .use(ConfigProvider)
+ .use(notification)
+ .use(TreeSelect)
+app.use(VueTianditu).mount('#app')
diff --git a/web/src/request/index.js b/web/src/request/index.js
index ae8a733..c8e7e27 100644
--- a/web/src/request/index.js
+++ b/web/src/request/index.js
@@ -1,6 +1,6 @@
import axios from 'axios'
import openNotification from '../utils/notification'
-import { message } from 'ant-design-vue'
+// import { message } from 'ant-design-vue'
const service = axios.create({
baseURL: '/api',
diff --git a/web/src/router/index.js b/web/src/router/index.js
index a95fd91..0743483 100644
--- a/web/src/router/index.js
+++ b/web/src/router/index.js
@@ -89,13 +89,13 @@ export const routes = [
component: () => import(/* webpackChunkName: "system" */ '@/views/system/device.vue')
},
{
- name: 'alarmLog',
- path: 'log',
+ name: 'alarmlog',
+ path: 'alarmlog',
title: '告警日志',
component: () => import(/* webpackChunkName: "system" */ '@/views/system/alarmLog.vue')
},
{
- name: 'sylog',
+ name: 'syslog',
path: 'syslog',
title: '系统日志',
component: () => import(/* webpackChunkName: "system" */ '@/views/system/log.vue')
diff --git a/web/src/utils/notification.js b/web/src/utils/notification.js
index 66d6a97..18f1492 100644
--- a/web/src/utils/notification.js
+++ b/web/src/utils/notification.js
@@ -1,4 +1,4 @@
-import { notification } from 'ant-design-vue'
+// import { notification } from 'ant-design-vue'
import { h } from 'vue'
import {
CheckCircleFilled,
@@ -41,7 +41,7 @@ const notiInfo = {
}
}
const openNotification = ({ name, type, status, desc = '' }) => {
- notification[status]({
+ this.$notification[status]({
placement: 'bottomRight',
message: notiInfo[status].iconMessage,
description: desc || option.names[name] + option.types[type] + option.status[status],
diff --git a/web/src/views/MainView.vue b/web/src/views/MainView.vue
index ce5b1a5..d95df4b 100644
--- a/web/src/views/MainView.vue
+++ b/web/src/views/MainView.vue
@@ -95,7 +95,7 @@ export default {
},
{
name: '告警日志',
- path: '/log'
+ path: '/alarmlog'
},
{
name: '系统日志',
@@ -214,7 +214,7 @@ export default {
}
.page {
width: calc(100% - 20px);
- height: calc(100% - 70px - 65px - 40px);
+ height: calc(100% - 70px - 60px - 40px);
margin: 20px 10px;
border-radius: 20px;
}
@@ -227,7 +227,8 @@ export default {
.menu {
position: absolute;
width: 100%;
- bottom: 15px;
+ bottom: 10px;
+ height: 50px;
// height: 150px;
display: flex;
justify-content: center;
diff --git a/web/src/views/monitor.vue b/web/src/views/monitor.vue
index 8cac35d..1d64b73 100644
--- a/web/src/views/monitor.vue
+++ b/web/src/views/monitor.vue
@@ -15,11 +15,13 @@
运行模式
- {{ item.label }}
+ {{
+ item.label
+ }}
@@ -33,13 +35,14 @@
:class="systemType == system.systemType ? 'active' : ''"
>
{{ system.name }}
-
边缘网关:{{ system.power }} W
-
总有功功率(台区):{{ system.num }}
+
{{ title.v }}:{{ system[title.key] }}{{ title.sufix }}
+
-
-
+
+
@@ -62,10 +65,14 @@ export default {
systemType: 1,
value: [],
stations: [],
- selectStationId:'',
+ selectStationId: '',
systems: [
{
name: '储能系统',
+ titles: [
+ { v: '边缘网关', key: 'num' },
+ { v: '总有功功率(台区)', key: 'power', sufix: 'kW' }
+ ],
power: 60,
num: 62,
systemType: 1
@@ -74,99 +81,125 @@ export default {
name: '充电系统',
power: 60,
num: 62,
- systemType: 2
+ systemType: 2,
+ titles: [
+ { v: '总功率', key: 'power', sufix: 'kW' },
+ { v: '数量', key: 'num' }
+ ]
},
{
name: '光伏系统',
power: 60,
num: 62,
- systemType: 3
+ systemType: 3,
+ titles: [
+ { v: '总功率', key: 'power', sufix: 'kW' },
+ { v: '数量', key: 'num' }
+ ]
},
{
name: '安防系统',
power: 60,
num: 62,
- systemType: 4
+ systemType: 4,
+ titles: [
+ { v: '总功率', key: 'power', sufix: 'kW' },
+ { v: '数量', key: 'num' }
+ ]
}
// {
// name: "储能系统4",
// }
],
- workMode:'',
- workModes:[
+ workMode: '',
+ workModes: [
// 0:手动,1:峰谷套利,2:增网配容,3:应急供电,4:并网保电,5:自定时段
{
- value:0,
- label:'手动'
+ value: 0,
+ label: '手动'
},
{
- value:1,
- label:'峰谷套利'
+ value: 1,
+ label: '峰谷套利'
},
{
- value:2,
- label:'增网配容'
+ value: 2,
+ label: '增网配容'
},
{
- value:3,
- label:'应急供电'
+ value: 3,
+ label: '应急供电'
},
{
- value:4,
- label:'并网保电'
+ value: 4,
+ label: '并网保电'
},
{
- value:5,
- label:'自定时段'
+ value: 5,
+ label: '自定时段'
}
-
],
- deviceGroup:[]
+ deviceGroup: []
}
},
mounted() {
this.getStations()
},
methods: {
+ //下发
+ async handleDispatch() {
+ console.log(this.workMode)
+ try {
+ const res = await postReq('/updateStation', {
+ station_id: this.selectStationId,
+ work_mode: this.workMode
+ })
+ if (res.errcode == 0) {
+ this.$message.success('下发成功')
+ }
+ } catch (error) {
+ this.$message.error('下发失败')
+ }
+ },
//场站切换
- getStationChange(val){
- console.log(val);
+ getStationChange(val) {
+ console.log(val)
this.getStationAttr()
-
},
//查询场站列表
async getStations() {
try {
- const res = await getReq('/queryStationList', { page: 0, 'page_size': 10000 })
+ const res = await getReq('/queryStationList', { page: 0, page_size: 10000 })
this.stations = res.data
- this.selectStationId=this.stations[0]['station_id']
+ this.selectStationId = this.stations[0]['station_id']
this.getStationAttr()
} catch (error) {
this.stations = []
- this.selectStationId=''
+ this.selectStationId = ''
this.$message.error(error.message)
}
},
// 查询场站的参数
- async getStationAttr(){
+ 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
+ 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.workMode = ''
// this.$message.error(error.errmsg)
}
},
-
chooseStation(system) {
+ console.log(system, 'system')
+
this.systemType = system.systemType
}
}
@@ -176,8 +209,8 @@ export default {