mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-27 18:59:26 +08:00
feat(web): 新增设备管理功能
- 新增设备管理页面和相关功能
This commit is contained in:
zhoumengru
@@ -80,6 +80,7 @@ export default {
|
||||
},
|
||||
{
|
||||
name: '场站管理',
|
||||
path: '/station',
|
||||
icon: 'icon-caidanguanli'
|
||||
},
|
||||
{
|
||||
@@ -92,15 +93,15 @@ export default {
|
||||
},
|
||||
{
|
||||
name: '设备管理',
|
||||
icon: 'icon-rizhiguanli'
|
||||
path: '/device '
|
||||
},
|
||||
{
|
||||
name: '告警日志',
|
||||
icon: 'icon-rizhiguanli'
|
||||
path: '/log'
|
||||
},
|
||||
{
|
||||
name: '系统日志',
|
||||
icon: 'icon-rizhiguanli'
|
||||
path: '/syslog'
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -126,8 +127,9 @@ export default {
|
||||
this.$router.push(menu.path)
|
||||
},
|
||||
subMenuClick(subMenu) {
|
||||
debugger
|
||||
this.subCurrentKey = subMenu.path
|
||||
this.$router.push(subMenu.path)
|
||||
this.$router.push('/system'+subMenu.path)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -197,6 +199,7 @@ export default {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
margin: 0 20px;
|
||||
}
|
||||
.active {
|
||||
border: 1px solid $border-color;
|
||||
|
||||
@@ -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);
|
||||
|
||||
|
||||
@@ -515,7 +515,7 @@ export default {
|
||||
// end_date: getDateDaysAgo(0)
|
||||
}
|
||||
try {
|
||||
const res = await getReq('/api/queryStatDayList', query)
|
||||
const res = await getReq('/queryStatDayList', query)
|
||||
if (res.errcode === 0) {
|
||||
this.echartsInfo[this.activeKey].chartData = res.data
|
||||
console.log(
|
||||
@@ -539,7 +539,7 @@ export default {
|
||||
pageNumber: currentInfo.pageOption.page
|
||||
}
|
||||
try {
|
||||
const res = await getReq('/api/queryStatDayList', query)
|
||||
const res = await getReq('/queryStatDayList', query)
|
||||
if (res.errcode === 0) {
|
||||
currentInfo.tableData = res.data
|
||||
currentInfo.pageOption = {
|
||||
|
||||
@@ -130,7 +130,7 @@ export default {
|
||||
async getOnLineList() {
|
||||
try {
|
||||
// token: 用户TOKEN
|
||||
const res = await getReq('/api/queryStatSystem')
|
||||
const res = await getReq('/queryStatSystem')
|
||||
if (res.errcode === 0) {
|
||||
this.deviceInfo.onLine = JSON.parse(JSON.stringify(res.data))
|
||||
this.deviceInfo.onLine.runDays = getRunDays(res.data.launch_date)
|
||||
@@ -155,7 +155,7 @@ export default {
|
||||
stationId: this.stationId,
|
||||
category: 0
|
||||
}
|
||||
const res = await getReq('/api/queryStatTotal', query)
|
||||
const res = await getReq('/queryStatTotal', query)
|
||||
if (res.errcode === 0) {
|
||||
this.deviceInfo.allTotal = res.data
|
||||
const { income_charge: incomeCharge, income_elect: incomeElect } =
|
||||
@@ -201,7 +201,7 @@ export default {
|
||||
end_date: getDateDaysAgo(0)
|
||||
}
|
||||
const arr = { 1: 'energy', 2: 'charge', 3: 'pv' }
|
||||
const res = await getReq('/api/queryStatDayList', query)
|
||||
const res = await getReq('/queryStatDayList', query)
|
||||
if (res.errcode === 0) {
|
||||
this.list.forEach((item) => {
|
||||
this.deviceInfo[arr[category]] = res.data
|
||||
|
||||
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>
|
||||
@@ -20,32 +20,7 @@
|
||||
}}</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-popconfirm
|
||||
title="确认要删除数据吗?"
|
||||
ok-text="确认"
|
||||
cancel-text="取消"
|
||||
@confirm="operateForm('del', record)"
|
||||
@cancel="() => {}"
|
||||
>
|
||||
<a-button type="primary" size="small" class="btn-del" style="margin-left: 10px"
|
||||
>删除</a-button
|
||||
>
|
||||
</a-popconfirm>
|
||||
<OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
|
||||
</template>
|
||||
</ComTable>
|
||||
</div>
|
||||
@@ -67,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 },
|
||||
@@ -75,8 +52,6 @@ export default {
|
||||
return {
|
||||
formModal: false,
|
||||
btnOptionList: [
|
||||
{ label: '新增', icon: 'icon-tianjia', type: 'add' }
|
||||
// { label: '删除', icon: 'icon-tianjia', type: 'del' }
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
@@ -144,10 +119,13 @@ export default {
|
||||
},
|
||||
tableH: '',
|
||||
formState: {},
|
||||
formStatus: 'add' //表单状态辑状态 add:新增 edit:编辑
|
||||
formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
|
||||
operateList:[]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.operateList = this.$getBtns(['查看', '修改', '删除'])
|
||||
this.btnOptionList = this.$getBtns(['新增'])
|
||||
this.getTableList()
|
||||
},
|
||||
methods: {
|
||||
@@ -185,7 +163,7 @@ export default {
|
||||
this.formState = record
|
||||
break
|
||||
case 'del':
|
||||
this.handleDelete(record)
|
||||
this.handleDelete(record.policy_id)
|
||||
break
|
||||
case 'edit':
|
||||
this.formModal = true
|
||||
@@ -195,18 +173,44 @@ export default {
|
||||
break
|
||||
}
|
||||
},
|
||||
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(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
|
||||
@@ -235,7 +239,7 @@ export default {
|
||||
padding: 0 15px;
|
||||
.content-table {
|
||||
width: 100%;
|
||||
height: calc(100% - 92px);
|
||||
height: calc(100% - 90px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
228
web/src/views/system/role.vue
Normal file
228
web/src/views/system/role.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<div class="role">
|
||||
<searchBox
|
||||
:btn-option-list="btnOptionList"
|
||||
@onSearch="onSearch"
|
||||
:search-options="searchOptions"
|
||||
@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 #is_open="record">
|
||||
<!-- 0:禁用; 1:启用 -->
|
||||
<span>{{ ['禁用', '启用'][record.is_open] }}</span>
|
||||
</template>
|
||||
<template #permission="record">
|
||||
<!-- 0:禁用; 1:启用 -->
|
||||
<span>{{record.permission.map(item=>item.name).toString() }}</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="role"
|
||||
:action="formStatus"
|
||||
></EditCom>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { columnList, roleOptions } 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'
|
||||
export default {
|
||||
name: '',
|
||||
components: {
|
||||
searchBox,
|
||||
EditCom,
|
||||
ComTable,
|
||||
OperateCom
|
||||
},
|
||||
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 == 'role').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('/queryRoleList', 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.role_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('/deleteRole',{role_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.role_id) {
|
||||
// row = await getInfo({ id: record.id },'/queryroleList')
|
||||
this.record = record
|
||||
row = record
|
||||
// this.type='edit'
|
||||
}
|
||||
roleOptions.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>
|
||||
.role {
|
||||
height: 100%;
|
||||
|
||||
.content-table {
|
||||
height: calc(100% - 70px);
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
30
web/src/views/system/service.vue
Normal file
30
web/src/views/system/service.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<div >
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: '',
|
||||
components:{
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods:{
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
228
web/src/views/system/station.vue
Normal file
228
web/src/views/system/station.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<div class="station">
|
||||
<searchBox
|
||||
:btn-option-list="btnOptionList"
|
||||
@onSearch="onSearch"
|
||||
:search-options="searchOptions"
|
||||
@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 #is_open="record">
|
||||
<!-- 0:禁用; 1:启用 -->
|
||||
<span>{{ ['禁用', '启用'][record.is_open] }}</span>
|
||||
</template>
|
||||
<template #permission="record">
|
||||
<!-- 0:禁用; 1:启用 -->
|
||||
<span>{{record.permission.map(item=>item.name).toString() }}</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="station"
|
||||
:action="formStatus"
|
||||
></EditCom>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { columnList, stationOptions } 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'
|
||||
export default {
|
||||
name: '',
|
||||
components: {
|
||||
searchBox,
|
||||
EditCom,
|
||||
ComTable,
|
||||
OperateCom
|
||||
},
|
||||
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 == 'station').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('/queryStationList', 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.station_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('/deleteStation',{station_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.station_id) {
|
||||
row = await getInfo({ station_id: record.station_id},'/queryStationInfo')
|
||||
this.record = record
|
||||
row = record
|
||||
// this.type='edit'
|
||||
}
|
||||
stationOptions.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>
|
||||
.station {
|
||||
height: 100%;
|
||||
|
||||
.content-table {
|
||||
height: calc(100% - 70px);
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -17,48 +17,61 @@
|
||||
:page-option="pageOption"
|
||||
:table-h="tableH"
|
||||
>
|
||||
<template #gender="record">
|
||||
<!-- 0:女; 1:男 -->
|
||||
<template #gender="record">
|
||||
<!-- 0:女; 1:男 -->
|
||||
<span>{{ ['女', '男'][record.gender] }}</span>
|
||||
</template>
|
||||
|
||||
|
||||
<template #action="record">
|
||||
<OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
|
||||
</template>
|
||||
</ComTable>
|
||||
</div>
|
||||
|
||||
</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 } from '../../../public/config/columnList'
|
||||
import { mapState } from 'vuex'
|
||||
import { columnList, userOptions } 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'
|
||||
export default {
|
||||
name: '',
|
||||
components: {
|
||||
searchBox,
|
||||
EditCom,
|
||||
ComTable,
|
||||
OperateCom
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
pageOption:{},
|
||||
formModal: false,
|
||||
formState: {},
|
||||
formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
|
||||
pageOption: {
|
||||
pageSize: 10,
|
||||
page: 1
|
||||
},
|
||||
btnOptionList: [],
|
||||
paramsDate:{
|
||||
|
||||
}
|
||||
paramsDate: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['page', 'detailType', 'type'])
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
let info = []
|
||||
let col = columnList.find((i) => i.page == 'user').columns
|
||||
@@ -69,10 +82,10 @@ export default {
|
||||
}
|
||||
this.columns = info
|
||||
},
|
||||
|
||||
|
||||
mounted() {
|
||||
this.operateList = this.$getBtns(['查看', '编辑', '删除'])
|
||||
this.btnOptionList = this.$getBtns(['新增', '批量删除'])
|
||||
this.operateList = this.$getBtns(['查看', '修改', '删除'])
|
||||
this.btnOptionList = this.$getBtns(['新增'])
|
||||
this.getList()
|
||||
},
|
||||
|
||||
@@ -89,7 +102,7 @@ export default {
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await getReq('/api/queryUserList',params)
|
||||
const res = await getReq('/queryUserList', params)
|
||||
if (res.errcode === 0) {
|
||||
this.$refs.comTable.loading = false
|
||||
|
||||
@@ -109,25 +122,29 @@ export default {
|
||||
}
|
||||
},
|
||||
operateForm(type, record = {}) {
|
||||
console.log(record,record.id,'rrrrrrrrrr')
|
||||
this.formStatus = type
|
||||
switch (type) {
|
||||
case 'detail':
|
||||
this.$store.commit('updateState', {
|
||||
detailType: 'edit', //edit or view
|
||||
page: 'detail',
|
||||
title: '查看',
|
||||
type: 'user'
|
||||
})
|
||||
|
||||
|
||||
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.$store.commit('updateState', {
|
||||
page: 'main'
|
||||
})
|
||||
this.isShowFlag = false
|
||||
this.formModal = false
|
||||
this.getList()
|
||||
break
|
||||
|
||||
@@ -135,6 +152,33 @@ export 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) => {
|
||||
@@ -145,52 +189,36 @@ export default {
|
||||
}
|
||||
|
||||
let row = {}
|
||||
if (record.id) {
|
||||
row = await getInfo({ id: record.id }, this.apiMethods[0].get)
|
||||
this.record = row
|
||||
this.$store.commit('updateState', {
|
||||
// 配电柜-集中器-查看
|
||||
title:
|
||||
(row.cabinetName ? row.cabinetName + '-' : '') +
|
||||
(row.name.split('集中器')[0] ? row.name.split('集中器')[0] : '') +
|
||||
'集中器-查看'
|
||||
})
|
||||
if (record && record.user_id) {
|
||||
// row = await getInfo({ id: record.id },'/queryUserList')
|
||||
this.record = record
|
||||
row = record
|
||||
// this.type='edit'
|
||||
}
|
||||
let connectorType
|
||||
cabinetOptions.forEach((e, index) => {
|
||||
userOptions.forEach((e, index) => {
|
||||
e.list.forEach((i) => {
|
||||
if (index == 1) {
|
||||
// 集中器状态
|
||||
if (i.key == 'ctrMode' || i.key == 'powerStatus') {
|
||||
e.ruleForm[i.key] = row.deviceStatus.lightStatus[i.key]
|
||||
} else {
|
||||
e.ruleForm[i.key] = row.deviceStatus[i.key]
|
||||
}
|
||||
} else if (i.key == 'connectorType') {
|
||||
connectorType = row.deviceExtend[i.key]
|
||||
e.ruleForm[i.key] = row.deviceExtend[i.key]
|
||||
} else {
|
||||
e.ruleForm[i.key] = row ? row[i.key] : ''
|
||||
e.ruleForm.id = row.id
|
||||
}
|
||||
|
||||
e.ruleForm[i.key] = row ? row[i.key] : ''
|
||||
e.ruleForm.id = row.id
|
||||
})
|
||||
})
|
||||
|
||||
// C型控制器，手自动状态和故障状态显示为“无”
|
||||
if (connectorType == 1) {
|
||||
cabinetOptions[1].ruleForm.status = 5
|
||||
cabinetOptions[1].ruleForm.ctrMode = 5
|
||||
}
|
||||
this.isShowFlag = true
|
||||
},
|
||||
handlePagesizeChange(pageOption) {
|
||||
this.pageOption.pageSize = pageOption.pageSize
|
||||
this.pageOption.page = pageOption.page
|
||||
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
.user {
|
||||
height: 100%;
|
||||
|
||||
.content-table {
|
||||
height: calc(100% - 70px);
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user