mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-27 18:59:26 +08:00
合并冲突
This commit is contained in:
zhoumengru
@@ -53,8 +53,8 @@
|
||||
|
||||
<div class="pagination" v-if="data.newTableOpt.page">
|
||||
<a-pagination
|
||||
v-model:current="data.newPageOption.current"
|
||||
:total="data.newPageOption.total"
|
||||
v-model:current="data.newPageOption.page"
|
||||
:total="data.newPageOption.count"
|
||||
:page-size="data.newPageOption.pageSize"
|
||||
@change="onChange"
|
||||
show-size-changer
|
||||
@@ -64,9 +64,9 @@
|
||||
</a-pagination>
|
||||
<div style="color: #7f8fa4; height: 30px; line-height: 30px; margin: 0 10px">
|
||||
共<span style="color: aqua; font-size: 18px; margin: 0 2px">{{
|
||||
data.newPageOption.total
|
||||
data.newPageOption.count
|
||||
}}</span
|
||||
>页
|
||||
>条
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -107,9 +107,9 @@ const props = defineProps({
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
current: 1,
|
||||
count: 1,
|
||||
pageSize: 10,
|
||||
total: 1
|
||||
page: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -206,7 +206,7 @@ function rowClassName(record, index) {
|
||||
}
|
||||
function expandIcon(props) {}
|
||||
function onChange(page, pageSize) {
|
||||
data.newPageOption.current = page
|
||||
data.newPageOption.page = page
|
||||
data.newPageOption.pageSize = pageSize
|
||||
emit('handlePagesizeChange', data.newPageOption)
|
||||
}
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {processData} from '@/utils/dealWithData'
|
||||
export default {
|
||||
name: '',
|
||||
props: {
|
||||
@@ -100,25 +101,11 @@ export default {
|
||||
handleResize() {
|
||||
this.faultChart.resize()
|
||||
},
|
||||
processData(data, keys) {
|
||||
data.sort((a, b) => {
|
||||
return new Date(a.dt) - new Date(b.dt)
|
||||
})
|
||||
const dates = data.map((item) => item.dt)
|
||||
const values = []
|
||||
keys.forEach((item, index) => {
|
||||
values[index] = data.map((dataValue) => dataValue[keys[index]])
|
||||
})
|
||||
|
||||
return {
|
||||
dates,
|
||||
values
|
||||
}
|
||||
},
|
||||
|
||||
getChargeData() {
|
||||
const arr = this.curList
|
||||
const keyList = this.curList.map((item) => item.key)
|
||||
const result = this.processData(this.deviceInfo, keyList)
|
||||
const result = processData(this.deviceInfo, keyList)
|
||||
|
||||
this.lineChartData.xdata = result.dates
|
||||
arr.forEach((item, index) => {
|
||||
|
||||
@@ -12,6 +12,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {processData} from '@/utils/dealWithData'
|
||||
|
||||
export default {
|
||||
name: '',
|
||||
props: {
|
||||
@@ -110,25 +112,11 @@ export default {
|
||||
this.chargeChart.resize()
|
||||
}
|
||||
},
|
||||
processData(data, keys) {
|
||||
data.sort((a, b) => {
|
||||
return new Date(a.dt) - new Date(b.dt)
|
||||
})
|
||||
const dates = data.map((item) => item.dt)
|
||||
const values = []
|
||||
keys.forEach((item, index) => {
|
||||
values[index] = data.map((dataValue) => dataValue[keys[index]])
|
||||
})
|
||||
|
||||
return {
|
||||
dates,
|
||||
values
|
||||
}
|
||||
},
|
||||
|
||||
getChargeData() {
|
||||
const arr = this.curListEcharts
|
||||
const keyList = this.curListEcharts.map((item) => item.key)
|
||||
const result = this.processData(this.deviceInfo, keyList)
|
||||
const result = processData(this.deviceInfo, keyList)
|
||||
|
||||
this.chargeChartData.xdata = result.dates
|
||||
arr.forEach((item, index) => {
|
||||
|
||||
@@ -14,6 +14,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {processData} from '@/utils/dealWithData'
|
||||
|
||||
export default {
|
||||
name: '',
|
||||
props: {
|
||||
@@ -92,25 +94,11 @@ export default {
|
||||
this.energyChart.resize()
|
||||
}
|
||||
},
|
||||
processData(data, keys) {
|
||||
data.sort((a, b) => {
|
||||
return new Date(a.dt) - new Date(b.dt)
|
||||
})
|
||||
const dates = data.map((item) => item.dt)
|
||||
const values = []
|
||||
keys.forEach((item, index) => {
|
||||
values[index] = data.map((dataValue) => dataValue[keys[index]])
|
||||
})
|
||||
|
||||
return {
|
||||
dates,
|
||||
values
|
||||
}
|
||||
},
|
||||
|
||||
getChargeData() {
|
||||
const arr = this.curList
|
||||
const keyList = this.curList.map((item) => item.key)
|
||||
const result = this.processData(this.deviceInfo, keyList)
|
||||
const result = processData(this.deviceInfo, keyList)
|
||||
|
||||
this.energyChartData.xdata = result.dates
|
||||
arr.forEach((item, index) => {
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
</template>
|
||||
<div class="modal-content">
|
||||
<div class="home-modal">
|
||||
<Modal></Modal>
|
||||
<Modal :station-id="changeStationId"></Modal>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
@@ -41,7 +41,7 @@ export default {
|
||||
showCtrModal: false,
|
||||
testVal: {
|
||||
name: '场站211',
|
||||
id: '124563'
|
||||
id: '2'
|
||||
},
|
||||
changeStationId:''
|
||||
}
|
||||
@@ -50,7 +50,6 @@ export default {
|
||||
methods: {
|
||||
async showModal(currentVal) {
|
||||
this.changeStationId=currentVal.id
|
||||
this.$emit('changeStation',this.changeStationId)
|
||||
console.log(currentVal, 'cccccccccccccccccccccc')
|
||||
this.showCtrModal = true
|
||||
try {
|
||||
|
||||
@@ -1,27 +1,31 @@
|
||||
<template>
|
||||
<div class="Home">
|
||||
<div class="content-left">
|
||||
<div v-for="(item, i) in leftList" :key="i" :class="`grid-item ${item.class}`">
|
||||
<div v-for="item in leftList" :key="item.componentId" :class="`grid-item ${item.class}`">
|
||||
<div class="tool">
|
||||
<div class="title">
|
||||
|
||||
<span class="linear-text">{{ item.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<component :is="item.componentId" :props-total="deviceInfo.allTotal" :props-info="deviceInfo[item.infoKey]" ></component>
|
||||
|
||||
<component
|
||||
:is="item.componentId"
|
||||
:props-total="item.infoKey=='prefab'? modalInfo.prefabTotal: modalInfo.allTotal"
|
||||
:props-info="modalInfo[item.infoKey]"
|
||||
></component>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-right">
|
||||
<div v-for="(item, i) in rightList" :key="i" :class="`grid-item ${item.class}`">
|
||||
<div v-for="item in rightList" :key="item.componentId" :class="`grid-item ${item.class}`">
|
||||
<div class="tool">
|
||||
<div class="title">
|
||||
|
||||
<span class="linear-text">{{ item.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<component :is="item.componentId" :props-total="deviceInfo.allTotal" :props-info="deviceInfo[item.infoKey]" ></component>
|
||||
<component
|
||||
:is="item.componentId"
|
||||
:props-total="modalInfo.allTotal"
|
||||
:props-info="modalInfo[item.infoKey]"
|
||||
></component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -35,61 +39,66 @@ import Revenue from '@/components/Home/Modal/Revenue.vue'
|
||||
import Utilization from '@/components/Home/Modal/Utilization.vue'
|
||||
import DisCharge from '@/components/Home/Modal/DisCharge.vue'
|
||||
import { getReq, postReq } from '@/request/api'
|
||||
|
||||
import { getRunDays, getDateDaysAgo } from '@/utils/dealWithData'
|
||||
import EnvInfo from './Modal/EnvInfo.vue'
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
components: {},
|
||||
props: {
|
||||
stationId: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
deviceInfo: {},
|
||||
modalInfo: {},
|
||||
list: [
|
||||
{
|
||||
title: '预制舱信息',
|
||||
class: '',
|
||||
componentId: PrefabCabin,
|
||||
infoKey: 'prefabCabin'
|
||||
infoKey: 'prefab'
|
||||
},
|
||||
{
|
||||
title: '储能充放电量',
|
||||
class: 'stats-cards',
|
||||
componentId: DisCharge,
|
||||
infoKey: 'alarm'
|
||||
infoKey: 'energy'
|
||||
},
|
||||
{
|
||||
title: '运行信息',
|
||||
class: 'operation-status',
|
||||
componentId: OperationalInfo,
|
||||
infoKey: 'operation'
|
||||
infoKey: ''
|
||||
},
|
||||
{
|
||||
title: '场站收益情况',
|
||||
class: 'revenue',
|
||||
componentId: Revenue,
|
||||
infoKey: 'alarm'
|
||||
infoKey: 'energy'
|
||||
},
|
||||
|
||||
{
|
||||
title: '统计信息',
|
||||
class: 'statistical',
|
||||
componentId: StatisticalInfo,
|
||||
infoKey: 'statisticalInfo'
|
||||
infoKey: ''
|
||||
},
|
||||
{
|
||||
title: '设备利用率',
|
||||
class: '',
|
||||
componentId: Utilization,
|
||||
infoKey: 'alarm'
|
||||
infoKey: 'energy'
|
||||
},
|
||||
{
|
||||
title: '环境信息',
|
||||
class: 'envInfo',
|
||||
componentId: EnvInfo,
|
||||
infoKey: 'envInfo'
|
||||
infoKey: ''
|
||||
}
|
||||
],
|
||||
|
||||
sysName: '',
|
||||
user: JSON.parse(localStorage.getItem('user')) || {}
|
||||
}
|
||||
@@ -104,142 +113,86 @@ export default {
|
||||
},
|
||||
async mounted() {
|
||||
await Promise.all([
|
||||
this.getTotalList(),
|
||||
|
||||
( this.deviceInfo = {
|
||||
alarm: [
|
||||
{
|
||||
dt: '2025-08-30',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
dt: '2025-08-29',
|
||||
key1: 8,
|
||||
key2: 5,
|
||||
key3: 5,
|
||||
key4: 7
|
||||
},
|
||||
{
|
||||
dt: '2025-08-28',
|
||||
key1: 0,
|
||||
key2: 10,
|
||||
key3: 20,
|
||||
key4: 4
|
||||
},
|
||||
{
|
||||
dt: '2025-08-27',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
dt: '2025-08-26',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
dt: '2025-08-25',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
dt: '2025-08-24',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
dt: '2025-08-23',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
dt: '2025-08-22',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
dt: '2025-08-21',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
dt: '2025-08-20',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
dt: '2025-08-19',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
dt: '2025-08-18',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
dt: '2025-08-17',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
}
|
||||
],
|
||||
|
||||
}),
|
||||
|
||||
|
||||
this.getStatTotalList(),
|
||||
this.queryStationInfo(),
|
||||
this.getStatDayList(1),
|
||||
])
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
async getTotalList(){
|
||||
// 查询系统累计统计信息
|
||||
async getStatTotalList() {
|
||||
try {
|
||||
// token: 用户TOKEN
|
||||
const res = await getReq({}, '')
|
||||
if (res.code === 200) {
|
||||
this.deviceInfo.allTotal = res.data
|
||||
// date:日期
|
||||
// station_id:场站ID，为0或不传查询所有场站总计
|
||||
// category:类别，1:储能设备,2:充电设备,3:光伏设备,为0或不传查询所有类别总计
|
||||
const query = {
|
||||
date: getDateDaysAgo(0),
|
||||
station_id: this.stationId,
|
||||
category: 0
|
||||
}
|
||||
const res = await getReq('/api/queryStatTotal', query)
|
||||
if (res.errcode === 0) {
|
||||
this.modalInfo.allTotal = res.data
|
||||
this.modalInfo.allTotal.runDays = getRunDays(res.data.launch_date)
|
||||
const { income_charge: incomeCharge, income_elect: incomeElect } = this.modalInfo.allTotal
|
||||
this.modalInfo.allTotal.incomeTotal = +incomeCharge + +incomeElect
|
||||
} else {
|
||||
throw res
|
||||
}
|
||||
} catch (error) {
|
||||
this.deviceInfo.allTotal = {
|
||||
tianshu:11,
|
||||
shouyi:12,
|
||||
shuliang:10,
|
||||
fadianliang:15,
|
||||
key2:11,
|
||||
key1:12,
|
||||
key3:10,
|
||||
key4:15,
|
||||
rongliang:15,
|
||||
this.modalInfo.allTotal = {}
|
||||
}
|
||||
},
|
||||
// 查询场站信息
|
||||
async queryStationInfo() {
|
||||
try {
|
||||
// station_id：场站ID
|
||||
|
||||
const query = {
|
||||
station_id: this.stationId,
|
||||
}
|
||||
const res = await getReq('/api//queryStationInfo', query)
|
||||
if (res.errcode === 0) {
|
||||
this.modalInfo.prefabTotal = res.data
|
||||
} else {
|
||||
throw res
|
||||
}
|
||||
} catch (error) {
|
||||
this.modalInfo.allTotal = {}
|
||||
}
|
||||
},
|
||||
// 查询场站日统计信息
|
||||
async getStatDayList(category) {
|
||||
try {
|
||||
// station_id: 场站ID
|
||||
// category: 类别： 1：储能设备,2:充电设备,3:光伏设备
|
||||
// start_date：开始日期，格式：yyyy-mm-dd
|
||||
// end_date：结束日期，格式：yyyy-mm-dd
|
||||
const query = {
|
||||
station_id: this.stationId,
|
||||
category,
|
||||
start_date: getDateDaysAgo(7 - 1),
|
||||
end_date: getDateDaysAgo(0)
|
||||
}
|
||||
const categoryObj = { 1: 'energy' }
|
||||
const res = await getReq('/api/queryStatDayList', query)
|
||||
if (res.errcode === 0) {
|
||||
this.modalInfo[categoryObj[category]] = res.data.map((item) => {
|
||||
const { income_charge: incomeCharge, income_elect: incomeElect } = item
|
||||
return {
|
||||
...item,
|
||||
incomeTotal: +incomeCharge + +incomeElect
|
||||
}
|
||||
})
|
||||
} else {
|
||||
throw res
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -253,8 +206,6 @@ export default {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.content-left,
|
||||
.content-right {
|
||||
height: 100%;
|
||||
@@ -270,15 +221,15 @@ export default {
|
||||
width: 100%;
|
||||
height: calc(40% - 10px);
|
||||
z-index: 20;
|
||||
|
||||
&:nth-child(2n){
|
||||
|
||||
&:nth-child(2n) {
|
||||
// height:calc(33% - 10px)!important;
|
||||
}
|
||||
}
|
||||
.tool {
|
||||
background: url('@/assets/home/modal-header-bg.png');
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -286,7 +237,7 @@ export default {
|
||||
height: 45px;
|
||||
|
||||
.linear-text {
|
||||
margin-bottom: 7px;
|
||||
margin-bottom: 7px;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(40, 235, 231, 1) 100%);
|
||||
color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
@@ -315,7 +266,7 @@ export default {
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
|
||||
|
||||
i {
|
||||
margin-left: 10px;
|
||||
}
|
||||
@@ -336,19 +287,14 @@ export default {
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.operation-status{
|
||||
.operation-status {
|
||||
height: calc(25% - 10px);
|
||||
|
||||
}
|
||||
.statistical{
|
||||
}
|
||||
.statistical {
|
||||
height: calc(18% - 10px);
|
||||
|
||||
}
|
||||
.envInfo{
|
||||
height: calc(15% - 10px);
|
||||
|
||||
}
|
||||
}
|
||||
.envInfo {
|
||||
height: calc(15% - 10px);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,6 +5,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {processData} from '@/utils/dealWithData'
|
||||
|
||||
export default {
|
||||
name: '',
|
||||
props: {
|
||||
@@ -18,14 +20,14 @@ export default {
|
||||
curList: [
|
||||
{
|
||||
name: '日充电电量',
|
||||
key: 'key1',
|
||||
key: 'storage_elect_in',
|
||||
lineColor: '#9BD801',
|
||||
value: 0,
|
||||
d: 'kW·h'
|
||||
},
|
||||
{
|
||||
name: '日放电电量',
|
||||
key: 'key2',
|
||||
key: 'storage_elect_out',
|
||||
lineColor: '#3DFEFA',
|
||||
value: 0,
|
||||
d: 'kW·h'
|
||||
@@ -66,25 +68,11 @@ export default {
|
||||
this.disChargeChart.resize()
|
||||
}
|
||||
},
|
||||
processData(data, keys) {
|
||||
data.sort((a, b) => {
|
||||
return new Date(a.date) - new Date(b.date)
|
||||
})
|
||||
const dates = data.map((item) => item.dt)
|
||||
const values = []
|
||||
keys.forEach((item, index) => {
|
||||
values[index] = data.map((dataValue) => dataValue[keys[index]])
|
||||
})
|
||||
|
||||
return {
|
||||
dates,
|
||||
values
|
||||
}
|
||||
},
|
||||
getDisChargeData() {
|
||||
const arr = this.curList
|
||||
const keyList = this.curList.map((item) => item.key)
|
||||
const result = this.processData(this.propsInfo, keyList)
|
||||
const result = processData(this.propsInfo, keyList)
|
||||
|
||||
this.disChargeChartData.xdata = result.dates
|
||||
arr.forEach((item, index) => {
|
||||
|
||||
@@ -44,42 +44,68 @@ export default {
|
||||
curStatus: '充电',
|
||||
list: [
|
||||
{
|
||||
key: 'tianshu',
|
||||
key: 'batttey_type',
|
||||
value: '磷酸铁锂电池',
|
||||
d: '',
|
||||
label: '电池类型',
|
||||
class: 'item-1'
|
||||
},
|
||||
{
|
||||
key: 'shouyi',
|
||||
key: 'cooling_type',
|
||||
value: '风冷',
|
||||
d: '',
|
||||
label: '冷却方式',
|
||||
class: 'item-2'
|
||||
},
|
||||
{
|
||||
key: 'shuliang',
|
||||
key: 'voltage_rated',
|
||||
value: 20,
|
||||
d: 'V',
|
||||
label: '电池额定总电压',
|
||||
class: 'item-3'
|
||||
},
|
||||
{
|
||||
key: 'shuliang',
|
||||
key: 'work_mode',
|
||||
value: '最优经济化运行模式',
|
||||
d: '',
|
||||
label: '运行模式',
|
||||
class: 'item-4'
|
||||
class: 'item-4',
|
||||
list:[
|
||||
{
|
||||
label:'手动',
|
||||
value:0
|
||||
},
|
||||
{
|
||||
label:'峰谷套利',
|
||||
value:1
|
||||
},
|
||||
{
|
||||
label:'增网配容',
|
||||
value:2
|
||||
},
|
||||
{
|
||||
label:'应急供电',
|
||||
value:3
|
||||
},
|
||||
{
|
||||
label:'并网保电',
|
||||
value:4
|
||||
},
|
||||
{
|
||||
label:'自定时段',
|
||||
value:5
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'fadianliang',
|
||||
key: 'capacity',
|
||||
value: 20,
|
||||
d: 'Wh',
|
||||
label: '电池储能容量',
|
||||
class: 'item-5'
|
||||
},
|
||||
{
|
||||
key: 'rongliang',
|
||||
key: 'power_rated',
|
||||
value: 100,
|
||||
d: 'Kw',
|
||||
label: 'PCS额定功率',
|
||||
@@ -100,8 +126,15 @@ export default {
|
||||
propsTotal: {
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal !== oldVal) {
|
||||
// 0正常 1故障
|
||||
this.curStatus=['正常','故障'][this.propsTotal.status]
|
||||
this.list.forEach((item) => {
|
||||
item.value = this.propsTotal[item.key]
|
||||
if(item.key=='work_mode'){
|
||||
item.value =item.list.map((item)=>this.propsTotal[item.key]==item.value)[0].label
|
||||
}else {
|
||||
item.value = this.propsTotal[item.key]
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,6 +5,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {processData} from '@/utils/dealWithData'
|
||||
|
||||
export default {
|
||||
name: '',
|
||||
props: {
|
||||
@@ -19,7 +21,7 @@ export default {
|
||||
curList: [
|
||||
{
|
||||
name: '日收益',
|
||||
key: 'key1',
|
||||
key: 'incomeTotal',
|
||||
lineColor: '#00BBA3',
|
||||
colorStart: ' rgba(10, 250, 106, 0.15)',
|
||||
colorEnd: ' rgba(171, 255, 249, 0.3)',
|
||||
@@ -64,26 +66,11 @@ export default {
|
||||
this.revenueChart.resize()
|
||||
}
|
||||
},
|
||||
processData(data, keys) {
|
||||
data.sort((a, b) => {
|
||||
return new Date(a.date) - new Date(b.date)
|
||||
})
|
||||
const dates = data.map((item) => item.dt)
|
||||
const values=[]
|
||||
keys.forEach((item,index)=>{
|
||||
|
||||
values[index]= data.map((dataValue)=>dataValue[keys[index]])
|
||||
})
|
||||
|
||||
return {
|
||||
dates,
|
||||
values,
|
||||
}
|
||||
},
|
||||
|
||||
getRevenueData() {
|
||||
const arr=this.curList
|
||||
const keyList=this.curList.map((item)=>item.key)
|
||||
const result = this.processData(this.propsInfo, keyList)
|
||||
const result = processData(this.propsInfo, keyList)
|
||||
|
||||
this.RevenueChartData.xdata = result.dates
|
||||
arr.forEach((item, index) => {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="onLine">
|
||||
<div class="statistical">
|
||||
<div class="content">
|
||||
<div v-for="item in list" :key="item.key" :class="`item ${item.class}`">
|
||||
<span>{{ item.value ? item.value : 0 }} {{ item.d }}</span>
|
||||
@@ -29,7 +29,7 @@ export default {
|
||||
return {
|
||||
list: [
|
||||
{
|
||||
key: 'tianshu',
|
||||
key: 'runDays',
|
||||
value: 26,
|
||||
d: '天',
|
||||
label: '场站运行天数',
|
||||
@@ -37,7 +37,7 @@ export default {
|
||||
iconPath: require('@/assets/home/wendu.png')
|
||||
},
|
||||
{
|
||||
key: 'shouyi',
|
||||
key: 'storage_elect_in',
|
||||
value: 25,
|
||||
d: 'Kw·h',
|
||||
label: '储能充电量',
|
||||
@@ -45,7 +45,7 @@ export default {
|
||||
iconPath: require('@/assets/home/shidu.png')
|
||||
},
|
||||
{
|
||||
key: 'shuliang',
|
||||
key: 'storage_elect_out',
|
||||
value: 24,
|
||||
d: 'Kw·h',
|
||||
label: '储能放电量',
|
||||
@@ -53,15 +53,15 @@ export default {
|
||||
iconPath: require('@/assets/home/dianya.png')
|
||||
},
|
||||
{
|
||||
key: 'shuliang',
|
||||
key: 'incomeTotal',
|
||||
value: 26,
|
||||
d: '万元',
|
||||
d: '元',
|
||||
label: '场站累计收益',
|
||||
class: 'item-4',
|
||||
iconPath: require('@/assets/home/dianliu.png')
|
||||
},
|
||||
{
|
||||
key: 'fadianliang',
|
||||
key: 'usage_rate',
|
||||
value: 20,
|
||||
d: '%',
|
||||
label: '设备利用率',
|
||||
@@ -96,7 +96,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.onLine {
|
||||
.statistical {
|
||||
height: calc(100% - 45px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@@ -5,6 +5,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {processData} from '@/utils/dealWithData'
|
||||
|
||||
export default {
|
||||
name: '',
|
||||
props: {
|
||||
@@ -18,9 +20,8 @@ export default {
|
||||
curList: [
|
||||
{
|
||||
name: '日设备利用率',
|
||||
key: 'key1',
|
||||
key: 'usage_rate',
|
||||
lineColor: '#F69B52',
|
||||
|
||||
value: 0,
|
||||
d: 'kW·h'
|
||||
}
|
||||
@@ -60,25 +61,11 @@ export default {
|
||||
this.utilizationChart.resize()
|
||||
}
|
||||
},
|
||||
processData(data, keys) {
|
||||
data.sort((a, b) => {
|
||||
return new Date(a.date) - new Date(b.date)
|
||||
})
|
||||
const dates = data.map((item) => item.dt)
|
||||
const values = []
|
||||
keys.forEach((item, index) => {
|
||||
values[index] = data.map((dataValue) => dataValue[keys[index]])
|
||||
})
|
||||
|
||||
return {
|
||||
dates,
|
||||
values
|
||||
}
|
||||
},
|
||||
getUtilizationData() {
|
||||
const arr = this.curList
|
||||
const keyList = this.curList.map((item) => item.key)
|
||||
const result = this.processData(this.propsInfo, keyList)
|
||||
const result = processData(this.propsInfo, keyList)
|
||||
|
||||
this.utilizationChartData.xdata = result.dates
|
||||
arr.forEach((item, index) => {
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {processData} from '@/utils/dealWithData'
|
||||
export default {
|
||||
name: '',
|
||||
props: {
|
||||
@@ -93,25 +94,11 @@ export default {
|
||||
this.pvChart.resize()
|
||||
}
|
||||
},
|
||||
processData(data, keys) {
|
||||
data.sort((a, b) => {
|
||||
return new Date(a.dt) - new Date(b.dt)
|
||||
})
|
||||
const dates = data.map((item) => item.dt)
|
||||
const values = []
|
||||
keys.forEach((item, index) => {
|
||||
values[index] = data.map((dataValue) => dataValue[keys[index]])
|
||||
})
|
||||
|
||||
return {
|
||||
dates,
|
||||
values
|
||||
}
|
||||
},
|
||||
|
||||
getChargeData() {
|
||||
const arr = this.curList
|
||||
const keyList = this.curList.map((item) => item.key)
|
||||
const result = this.processData(this.deviceInfo, keyList)
|
||||
const result = processData(this.deviceInfo, keyList)
|
||||
|
||||
this.pvChartData.xdata = result.dates
|
||||
arr.forEach((item, index) => {
|
||||
|
||||
@@ -155,6 +155,10 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
height: 100%;
|
||||
.item{
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
// .content-left{
|
||||
// align-items: self-end;
|
||||
|
||||
107
web/src/components/OperateCom.vue
Normal file
107
web/src/components/OperateCom.vue
Normal file
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div class="operate">
|
||||
|
||||
<template v-if="operateList.length < 4">
|
||||
<a-button
|
||||
v-for="item in operateList"
|
||||
:key="item.type"
|
||||
type="primary"
|
||||
style="margin-right: 5px"
|
||||
:class="['operateCol', item.type]"
|
||||
:disabled="item.disabled"
|
||||
@click="munuClick(item.type)"
|
||||
>{{ item.label }}
|
||||
</a-button>
|
||||
</template>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'OperateCom',
|
||||
components: { },
|
||||
props: {
|
||||
operateList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
record: {
|
||||
type: Object,
|
||||
default:()=>{}
|
||||
},
|
||||
flag: {
|
||||
type: String,
|
||||
default:''
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
watch: {
|
||||
operateList: {
|
||||
handler(n, o) {},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
munuClick(type) {
|
||||
this.$emit('operateForm', type, { ...this.record })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.moreIcon{
|
||||
color:#fff !important
|
||||
}
|
||||
:deep(.ant-btn) {
|
||||
padding: 0px 7px !important;
|
||||
height: 24px !important;
|
||||
font-size: 13px !important;
|
||||
letter-spacing: -1px;
|
||||
border-radius: 4px;
|
||||
& > span + .anticon {
|
||||
margin-inline-start: 4px;
|
||||
}
|
||||
}
|
||||
:deep(.ant-btn-primary) {
|
||||
box-shadow: none !important;
|
||||
background: var(--theme-btn3);
|
||||
}
|
||||
:deep(.ant-btn,.ant-btn-primary){
|
||||
&:hover{
|
||||
opacity: 0.9;
|
||||
}
|
||||
&:disabled{
|
||||
color: rgba(255,255,255,0.5);
|
||||
}
|
||||
}
|
||||
.operate{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.operateCol {
|
||||
background: var(--theme-btn3);
|
||||
|
||||
&.more {
|
||||
background: var(--theme-btn1);
|
||||
}
|
||||
|
||||
&.del {
|
||||
background: var(--theme-btn2);
|
||||
}
|
||||
|
||||
}
|
||||
.ant-dropdown .ant-dropdown-menu{
|
||||
background-color:var(--theme-opert-bg)!important;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -33,6 +33,11 @@
|
||||
@change="$emit('onSearch', formData)"
|
||||
/>
|
||||
</div>
|
||||
<!-- 日期选择框 date-->
|
||||
<div class="date-picker" v-if="item.type == 'datePick1'">
|
||||
|
||||
<a-range-picker v-model:value="formData[item.key]" value-format="YYYY-MM-DD" @change="$emit('onSearch', formData)" />
|
||||
</div>
|
||||
<!-- 输入框 -->
|
||||
<div class="input" v-if="item.type == 'input'">
|
||||
<a-input
|
||||
|
||||
@@ -10,7 +10,6 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-table">
|
||||
|
||||
<ComTable
|
||||
:columns="columns"
|
||||
:table-data="tableData"
|
||||
@@ -24,16 +23,17 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {postReq} from '@/request/api'
|
||||
import { processData } from '@/utils/dealWithData'
|
||||
import { postReq } from '@/request/api'
|
||||
import ComTable from '@/components/ComTable'
|
||||
export default {
|
||||
name: 'StatisicalAnView',
|
||||
components: { ComTable },
|
||||
props: {
|
||||
tableInfo:{
|
||||
tableInfo: {
|
||||
type: Object,
|
||||
default: () => ({}), // 默认空对象
|
||||
required: false, // 非必须
|
||||
required: false // 非必须
|
||||
},
|
||||
columns: {
|
||||
type: Array,
|
||||
@@ -52,7 +52,7 @@ export default {
|
||||
},
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: () => ([]), // 默认空对象
|
||||
default: () => [] // 默认空对象
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@@ -62,180 +62,17 @@ export default {
|
||||
scroll: {
|
||||
x: 1500
|
||||
},
|
||||
select: false,
|
||||
select: false
|
||||
},
|
||||
tableH: 0,
|
||||
|
||||
// chartOptions: [
|
||||
// {
|
||||
// title: '充放电分析',
|
||||
// type: 'bar',
|
||||
// dataKey: 'sales',
|
||||
// infoKeys: [
|
||||
// { key: 'key1', label: '日充电电量', lineColor: '#2A82E4' },
|
||||
// { key: 'key2', label: '日放电电量', lineColor: '#5AABF2' }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// title: '运行状态分析',
|
||||
// type: 'bar',
|
||||
// dataKey: 'users',
|
||||
// infoKeys: [
|
||||
// { key: 'key1', label: '日故障次数', lineColor: '#0CDAF5' },
|
||||
// { key: 'key2', label: '日充电工作时长', lineColor: '#2A82E4' },
|
||||
// { key: 'key3', label: '日放电工作时长', lineColor: '#5AABF2' }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// title: '电压与电流分析',
|
||||
// type: 'line',
|
||||
// dataKey: 'stock',
|
||||
// infoKeys: [
|
||||
// {
|
||||
// key: 'key1',
|
||||
// label: '电压',
|
||||
// lineColor: '#3F80F2',
|
||||
// colorStart: ' rgba(10, 250, 106, 0.15)',
|
||||
// colorEnd: ' rgba(171, 255, 249, 0.3)'
|
||||
// },
|
||||
// {
|
||||
// key: 'key2',
|
||||
// label: '电流',
|
||||
// lineColor: '#A9A6FF',
|
||||
// colorStart: ' rgba(10, 250, 106, 0.15)',
|
||||
// colorEnd: ' rgba(171, 255, 249, 0.3)'
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// title: '功率分析',
|
||||
// type: 'line',
|
||||
// dataKey: 'yearly',
|
||||
// infoKeys: [
|
||||
// {
|
||||
// key: 'key1',
|
||||
// label: '功率',
|
||||
// lineColor: '#00FFFB',
|
||||
// colorStart: ' rgba(10, 250, 106, 0.15)',
|
||||
// colorEnd: ' rgba(171, 255, 249, 0.3)'
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// ],
|
||||
// chartData: {
|
||||
// sales: [
|
||||
// {
|
||||
// date: '2025-08-30',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-29',
|
||||
// key1: 8,
|
||||
// key2: 5,
|
||||
// key3: 5,
|
||||
// key4: 7
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-28',
|
||||
// key1: 0,
|
||||
// key2: 10,
|
||||
// key3: 20,
|
||||
// key4: 4
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-27',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-26',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-25',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-24',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-23',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-22',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-21',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-20',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-19',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-18',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-17',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// }
|
||||
// ],
|
||||
// users: [
|
||||
// { value: 40, name: 'A' },
|
||||
// { value: 60, name: 'B' }
|
||||
// ],
|
||||
// stock: [30, 50, 80],
|
||||
// yearly: [100, 120, 90, 110]
|
||||
// },
|
||||
|
||||
chartInstances: [] // 存储 ECharts 实例
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
watch: {
|
||||
chartData: {
|
||||
handler(n) {
|
||||
console.log(n, 'nnnnnnnnnnnnnnnnnnnnnnn')
|
||||
this.$nextTick(() => {
|
||||
this.initCharts()
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
@@ -244,7 +81,8 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
// this.initCharts()
|
||||
// window.addEventListener('resize', this.handleResize)
|
||||
},
|
||||
beforeUnmount() {
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
@@ -255,10 +93,9 @@ export default {
|
||||
this.chartOptions.forEach((option, index) => {
|
||||
const dom = this.$refs[`chartContainer${index}`][0]
|
||||
if (!dom) return
|
||||
|
||||
const chart = this.$echarts.init(dom)
|
||||
this.chartInstances.push(chart) // 存储实例
|
||||
|
||||
const keys= option.infoKeys.map((item) => item.key)
|
||||
// 设置图表配置
|
||||
chart.setOption({
|
||||
tooltip: {
|
||||
@@ -281,8 +118,9 @@ export default {
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.processData(option.infoKeys, option.dataKey, this.chartData[option.dataKey])
|
||||
data: processData(this.chartData,keys)
|
||||
.dates,
|
||||
|
||||
axisLine: {
|
||||
lineStyle: { type: 'dashed', color: '#435463' }
|
||||
},
|
||||
@@ -328,41 +166,23 @@ export default {
|
||||
},
|
||||
global: false,
|
||||
showSymbol: false,
|
||||
data: this.processData(
|
||||
option.infoKeys,
|
||||
option.dataKey,
|
||||
this.chartData[option.dataKey]
|
||||
data: processData(
|
||||
this.chartData,
|
||||
keys
|
||||
).values[i]
|
||||
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
processData(keysList, dataKey, data) {
|
||||
const keys = keysList.map((item) => item.key)
|
||||
data.sort((a, b) => {
|
||||
return new Date(a.dt) - new Date(b.dt)
|
||||
})
|
||||
const dates = data.map((item) => item.dt)
|
||||
const values = []
|
||||
|
||||
keys.forEach((item, index) => {
|
||||
values[index] = data.map((dataValue) => dataValue[keys[index]])
|
||||
})
|
||||
return {
|
||||
dates,
|
||||
values
|
||||
}
|
||||
},
|
||||
handleResize() {
|
||||
this.chartInstances.forEach((chart) => chart && chart.resize())
|
||||
},
|
||||
|
||||
|
||||
handlePagesizeChange(pageOption) {
|
||||
this.$emit('pagesizeChange_energy',pageOption)
|
||||
// this.pageOption.pageSize = pageOption.pageSize
|
||||
// this.pageOption.current = pageOption.current
|
||||
// this.getList()
|
||||
this.$emit('pagesizeChange_energy', pageOption)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,6 +8,8 @@ import 'ant-design-vue/dist/reset.css'
|
||||
import '@/style/index.scss'
|
||||
// import '@/assets/iconfont/iconfont.css'
|
||||
import * as echarts from 'echarts'
|
||||
import { setWidth } from '@/utils/column'
|
||||
import { getBtns } from '@/utils/btnList'
|
||||
import VueTianditu from 'vue-tianditu'
|
||||
import SearchBox from '@/components/SearchBox.vue'
|
||||
import ComTable from '@/components/ComTable.vue'
|
||||
@@ -18,5 +20,7 @@ app.component('SearchBox', SearchBox)
|
||||
app.component('ComTable', ComTable)
|
||||
|
||||
app.config.globalProperties.$echarts = echarts // 挂载到全局属性
|
||||
app.config.globalProperties.$setWidth = setWidth // 挂载到全局属性
|
||||
app.config.globalProperties.$getBtns = getBtns
|
||||
|
||||
app.use(store).use(router).use(Antd).use(VueTianditu).mount('#app')
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import { createStore } from "vuex";
|
||||
import { createStore } from 'vuex'
|
||||
import systemUser from './systemUser'
|
||||
|
||||
export default createStore({
|
||||
state: {},
|
||||
getters: {},
|
||||
mutations: {},
|
||||
actions: {},
|
||||
modules: {},
|
||||
});
|
||||
modules: { systemUser }
|
||||
})
|
||||
|
||||
17
web/src/store/systemUser.js
Normal file
17
web/src/store/systemUser.js
Normal file
@@ -0,0 +1,17 @@
|
||||
export default {
|
||||
namespaced: true,
|
||||
tate: {
|
||||
page: 'main', //main or detail
|
||||
detailType: 'add', // add or edit or view
|
||||
title: '新增', // 新增 or 查看
|
||||
type: 'user' // menu or authority role
|
||||
},
|
||||
mutations: {
|
||||
updateState(state, playload) {
|
||||
Object.entries(playload).forEach((item) => {
|
||||
const [key, value] = item
|
||||
state[key] = value
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
54
web/src/utils/btnList.js
Normal file
54
web/src/utils/btnList.js
Normal file
@@ -0,0 +1,54 @@
|
||||
const btnList = [
|
||||
{ label: '', type: '', disFlag: '' },
|
||||
{ label: '新增', type: 'add', disFlag: 'isEdit', icon: 'icon-add' },
|
||||
{ label: '更新', type: 'edit', disFlag: 'isEdit' },
|
||||
{ label: '查看', type: 'detail', disFlag: 'isQuery' },
|
||||
{ label: '编辑', type: 'edit', disFlag: 'isEdit' },
|
||||
{ label: '删除', type: 'del', disFlag: 'isEdit', icon: 'icon-del' },
|
||||
{ label: '批量删除', type: 'del', disFlag: 'isEdit', icon: 'icon-del' },
|
||||
{ label: '导入', type: 'upload', disFlag: 'isEdit', icon: 'icon-import' },
|
||||
{ label: '导出', type: 'download', disFlag: 'isEdit', icon: 'icon-export' },
|
||||
{ label: '上传', type: 'upload', disFlag: 'isEdit', icon: 'icon-upload' },
|
||||
{ label: '下载', type: 'download', disFlag: 'isEdit', icon: 'icon-download' },
|
||||
{ label: '下发', type: 'xf', disFlag: 'isControl' },
|
||||
{ label: '批量下载', type: 'download', disFlag: 'isEdit', icon: 'icon-download' },
|
||||
{ label: '下载模版', type: 'downTemplate', disFlag: 'isControl', icon: 'icon-download' },
|
||||
{ label: '重置密码', type: 'reset', disFlag: 'isEdit' },
|
||||
{ label: '派发', type: 'distribute', disFlag: 'isControl' },
|
||||
{ label: '处理', type: 'dealWith', disFlag: 'isControl' },
|
||||
{ label: '审核', type: 'audit', disFlag: 'isControl' },
|
||||
{ label: '标记为已读', type: 'setTagR', disFlag: 'isControl', icon: 'icon-chulizhuangtai' },
|
||||
{ label: '标记为已处理', type: 'setTagD', disFlag: 'isControl' },
|
||||
{ label: '启动', type: 'start', disFlag: 'isControl' },
|
||||
{ label: '停止', type: 'stop', disFlag: 'isControl' },
|
||||
{ label: '重启', type: 'restart', disFlag: 'isControl' },
|
||||
{ label: '批量启动', type: 'start', disFlag: 'isControl' },
|
||||
{ label: '批量停止', type: 'stop', disFlag: 'isControl' },
|
||||
{ label: '批量重启', type: 'restart', disFlag: 'isControl' },
|
||||
{ label: '监控日志', type: 'log', disFlag: 'isControl' },
|
||||
{ label: '新建备份', type: 'backups', disFlag: 'isEdit', icon: 'icon-add' },
|
||||
{ label: '导入备份', type: 'importBackups', disFlag: 'isEdit', icon: 'icon-import' },
|
||||
{ label: '还原', type: 'restore', disFlag: 'isEdit' },
|
||||
{ label: '批量启用', type: 'enable', disFlag: 'isControl', icon: 'icon-a-qiyong' },
|
||||
{ label: '批量禁用', type: 'disable', disFlag: 'isControl', icon: 'icon-a-jinyong' }
|
||||
]
|
||||
|
||||
// arr:按钮数组
|
||||
// permissions:{
|
||||
// isControl: true;
|
||||
// isEdit: true;
|
||||
// isQuery: true;
|
||||
// }
|
||||
function getBtns(arr) {
|
||||
const permissions =
|
||||
JSON.parse(localStorage.getItem('user')).userExtend.role.permissionList[0] || {}
|
||||
const btns = []
|
||||
btnList.forEach((item) => {
|
||||
if (arr.includes(item.label)) {
|
||||
item.disabled = !Boolean(permissions[item.disFlag])
|
||||
btns.push(item)
|
||||
}
|
||||
})
|
||||
return btns
|
||||
}
|
||||
export { btnList, getBtns }
|
||||
93
web/src/utils/column.js
Normal file
93
web/src/utils/column.js
Normal file
@@ -0,0 +1,93 @@
|
||||
const colWidth = [
|
||||
{
|
||||
label: '用户',
|
||||
width: 120,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
label: '名称',
|
||||
width: 200,
|
||||
align: 'left',
|
||||
sorter: (a, b) => {
|
||||
return a.name.localeCompare(b.name)
|
||||
},
|
||||
sortDirections: ['ascend', 'descend']
|
||||
},
|
||||
{
|
||||
label: '所属',
|
||||
width: 150,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
label: '类型',
|
||||
width: 120,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
label: 'ip',
|
||||
width: 120,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
label: '状态',
|
||||
width: 120,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
label: '是否',
|
||||
width: 120,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
label: '服务',
|
||||
width: 120,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
label: '手机号',
|
||||
width: 200,
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
label: '时间',
|
||||
width: 200,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
label: '文件路径',
|
||||
width: 400
|
||||
},
|
||||
{
|
||||
label: '内容',
|
||||
width: 350
|
||||
},
|
||||
{
|
||||
label: '通知方式',
|
||||
width: 240,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
label: '操作',
|
||||
align: 'center',
|
||||
width: 130,
|
||||
fixed: 'right',
|
||||
resizable: false
|
||||
}
|
||||
]
|
||||
|
||||
function setWidth(val) {
|
||||
let info = {}
|
||||
const Item = colWidth.find((item) => val.title.search(item.label) !== -1) || null
|
||||
if (Item) {
|
||||
if (val.title == '操作') {
|
||||
info = { ...Item, ...val, resizable: true }
|
||||
} else {
|
||||
info = { ...val, ...Item, resizable: true, ellipsis: true }
|
||||
}
|
||||
} else {
|
||||
info = { ...val, align: 'left', ellipsis: true, resizable: true, width: 150 }
|
||||
}
|
||||
return info
|
||||
}
|
||||
|
||||
export { colWidth, setWidth }
|
||||
37
web/src/utils/dealWithData.js
Normal file
37
web/src/utils/dealWithData.js
Normal file
@@ -0,0 +1,37 @@
|
||||
export function getRunDays(date) {
|
||||
const launchDate = new Date(date)
|
||||
const today = new Date() // 替换为当前日期
|
||||
|
||||
const timeDiff = today - launchDate // 毫秒差
|
||||
const daysRun = Math.ceil(timeDiff / (1000 * 60 * 60 * 24)) // 转换为天数
|
||||
|
||||
console.log(`从 2023-01-01 到今天已经运行了 ${daysRun} 天`)
|
||||
|
||||
return daysRun
|
||||
}
|
||||
export function processData(data, keys) {
|
||||
data.sort((a, b) => {
|
||||
return new Date(a.dt) - new Date(b.dt)
|
||||
})
|
||||
const dates = data.map((item) => item.dt)
|
||||
const values = []
|
||||
keys.forEach((item, index) => {
|
||||
values[index] = data.map((dataValue) => dataValue[keys[index]])
|
||||
})
|
||||
|
||||
return {
|
||||
dates,
|
||||
values
|
||||
}
|
||||
}
|
||||
|
||||
export function getDateDaysAgo(daysAgo) {
|
||||
const date = new Date()
|
||||
date.setDate(date.getDate() - daysAgo)
|
||||
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
|
||||
return `${year}-${month}-${day}`
|
||||
}
|
||||
@@ -147,7 +147,7 @@ export default {
|
||||
.subMenu {
|
||||
display: flex;
|
||||
color: #fff;
|
||||
margin-left: 10px;
|
||||
// margin-left: 10px;
|
||||
padding-bottom: 20px;
|
||||
.subItem {
|
||||
width: 96px;
|
||||
|
||||
@@ -22,6 +22,7 @@
|
||||
</div>
|
||||
<div class="main_content">
|
||||
<energyEchart
|
||||
:key="activeKey"
|
||||
:chart-options="echartsInfo[activeKey].chartOptions"
|
||||
:chart-data="echartsInfo[activeKey].chartData"
|
||||
:columns="tableList[activeKey].columns"
|
||||
@@ -29,6 +30,7 @@
|
||||
:table-data="tableList[activeKey].tableData"
|
||||
@pagesizeChange="pagesizeChange()"
|
||||
></energyEchart>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -36,7 +38,9 @@
|
||||
<script>
|
||||
import energyEchart from '@/components/statisticalAnalysis/energyEchart.vue'
|
||||
import searchBox from '@/components/SearchBox.vue'
|
||||
import { postReq } from '@/request/api'
|
||||
import { postReq, getReq } from '@/request/api'
|
||||
import { getRunDays, getDateDaysAgo } from '@/utils/dealWithData'
|
||||
|
||||
export default {
|
||||
name: 'StatisicalAnView',
|
||||
components: { energyEchart, searchBox },
|
||||
@@ -64,7 +68,7 @@ export default {
|
||||
searchOptions: [
|
||||
{
|
||||
label: '日期',
|
||||
type: 'datePick',
|
||||
type: 'datePick1',
|
||||
value: [],
|
||||
key: 'time'
|
||||
}
|
||||
@@ -77,8 +81,8 @@ export default {
|
||||
type: 'bar',
|
||||
dataKey: 'sales',
|
||||
infoKeys: [
|
||||
{ key: 'key1', label: '日充电电量', lineColor: '#2A82E4' },
|
||||
{ key: 'key2', label: '日放电电量', lineColor: '#5AABF2' }
|
||||
{ key: 'storage_elect_in', label: '日充电电量', lineColor: '#2A82E4' },
|
||||
{ key: 'storage_elect_out', label: '日放电电量', lineColor: '#5AABF2' }
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -86,7 +90,7 @@ export default {
|
||||
type: 'bar',
|
||||
dataKey: 'users',
|
||||
infoKeys: [
|
||||
{ key: 'key1', label: '日故障次数', lineColor: '#0CDAF5' },
|
||||
{ key: 'storage_num_err', label: '日故障次数', lineColor: '#0CDAF5' },
|
||||
{ key: 'key2', label: '日充电工作时长', lineColor: '#2A82E4' },
|
||||
{ key: 'key3', label: '日放电工作时长', lineColor: '#5AABF2' }
|
||||
]
|
||||
@@ -128,20 +132,135 @@ export default {
|
||||
}
|
||||
],
|
||||
chartData: {}
|
||||
},
|
||||
1: {
|
||||
chartOptions: [
|
||||
{
|
||||
title: '发电电量分析',
|
||||
type: 'bar',
|
||||
dataKey: 'sales',
|
||||
infoKeys: [
|
||||
{ key: 'storage_elect_in', label: '日发电电量', lineColor: '#2A82E4' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '运行状态分析',
|
||||
type: 'bar',
|
||||
dataKey: 'users',
|
||||
infoKeys: [
|
||||
{ key: 'storage_num_err', label: '日故障次数', lineColor: '#0CDAF5' },
|
||||
{ key: 'key3', label: '日发电时长', lineColor: '#5AABF2' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '电压与电流分析',
|
||||
type: 'line',
|
||||
dataKey: 'stock',
|
||||
infoKeys: [
|
||||
{
|
||||
key: 'key1',
|
||||
label: '电压',
|
||||
lineColor: '#3F80F2',
|
||||
colorStart: ' rgba(10, 250, 106, 0.15)',
|
||||
colorEnd: ' rgba(171, 255, 249, 0.3)'
|
||||
},
|
||||
{
|
||||
key: 'key2',
|
||||
label: '电流',
|
||||
lineColor: '#A9A6FF',
|
||||
colorStart: ' rgba(10, 250, 106, 0.15)',
|
||||
colorEnd: ' rgba(171, 255, 249, 0.3)'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '功率分析',
|
||||
type: 'line',
|
||||
dataKey: 'yearly',
|
||||
infoKeys: [
|
||||
{
|
||||
key: 'key1',
|
||||
label: '功率',
|
||||
lineColor: '#00FFFB',
|
||||
colorStart: ' rgba(10, 250, 106, 0.15)',
|
||||
colorEnd: ' rgba(171, 255, 249, 0.3)'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
chartData: {}
|
||||
},
|
||||
2: {
|
||||
chartOptions: [
|
||||
{
|
||||
title: '充电分析',
|
||||
type: 'bar',
|
||||
dataKey: 'sales',
|
||||
infoKeys: [
|
||||
{ key: 'storage_elect_in', label: '日充电电量', lineColor: '#2A82E4' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '运行状态分析',
|
||||
type: 'bar',
|
||||
dataKey: 'users',
|
||||
infoKeys: [
|
||||
{ key: 'storage_num_err', label: '日充电次数', lineColor: '#0CDAF5' },
|
||||
{ key: 'key3', label: '日故障次数', lineColor: '#5AABF2' },
|
||||
{ key: 'key3', label: '日充电时长', lineColor: '#5AABF2' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '电压与电流分析',
|
||||
type: 'line',
|
||||
dataKey: 'stock',
|
||||
infoKeys: [
|
||||
{
|
||||
key: 'key1',
|
||||
label: '电压',
|
||||
lineColor: '#3F80F2',
|
||||
colorStart: ' rgba(10, 250, 106, 0.15)',
|
||||
colorEnd: ' rgba(171, 255, 249, 0.3)'
|
||||
},
|
||||
{
|
||||
key: 'key2',
|
||||
label: '电流',
|
||||
lineColor: '#A9A6FF',
|
||||
colorStart: ' rgba(10, 250, 106, 0.15)',
|
||||
colorEnd: ' rgba(171, 255, 249, 0.3)'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '功率分析',
|
||||
type: 'line',
|
||||
dataKey: 'yearly',
|
||||
infoKeys: [
|
||||
{
|
||||
key: 'key1',
|
||||
label: '功率',
|
||||
lineColor: '#00FFFB',
|
||||
colorStart: ' rgba(10, 250, 106, 0.15)',
|
||||
colorEnd: ' rgba(171, 255, 249, 0.3)'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
chartData: {}
|
||||
}
|
||||
},
|
||||
activeKey: 0,
|
||||
tabList: [
|
||||
{
|
||||
key: '0',
|
||||
key: 0,
|
||||
name: '储能设备'
|
||||
},
|
||||
{
|
||||
key: '1',
|
||||
key: 1,
|
||||
name: '光伏设备'
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
key: 2,
|
||||
name: '充电设备'
|
||||
}
|
||||
],
|
||||
@@ -150,8 +269,8 @@ export default {
|
||||
columns: [
|
||||
{
|
||||
title: '设备ID',
|
||||
dataIndex: 'key1',
|
||||
key: 'key1',
|
||||
dataIndex: 'ID',
|
||||
key: 'ID',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
@@ -171,8 +290,8 @@ export default {
|
||||
},
|
||||
{
|
||||
title: '充电电量',
|
||||
dataIndex: 'key4',
|
||||
key: 'key4',
|
||||
dataIndex: 'storage_elect_in',
|
||||
key: 'storage_elect_in',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
@@ -192,22 +311,22 @@ export default {
|
||||
},
|
||||
{
|
||||
title: '放电电量',
|
||||
dataIndex: 'key7',
|
||||
key: 'key7',
|
||||
dataIndex: 'storage_elect_out',
|
||||
key: 'storage_elect_out',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '故障次数',
|
||||
dataIndex: 'key8',
|
||||
key: 'key8',
|
||||
dataIndex: 'storage_num_err',
|
||||
key: 'storage_num_err',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '日期',
|
||||
dataIndex: 'key9',
|
||||
key: 'key9',
|
||||
dataIndex: 'dt',
|
||||
key: 'dt',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
}
|
||||
@@ -215,33 +334,173 @@ export default {
|
||||
geturl: '',
|
||||
tableData: [],
|
||||
pageOption: {
|
||||
current: 1,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
total: 1
|
||||
count: 1
|
||||
}
|
||||
},
|
||||
1: {
|
||||
columns: [
|
||||
{
|
||||
title: '设备ID',
|
||||
dataIndex: 'ID',
|
||||
key: 'ID',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '设备名称',
|
||||
dataIndex: 'key2',
|
||||
key: 'key2',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '设备类型',
|
||||
dataIndex: 'key3',
|
||||
key: 'key3',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '发电电量',
|
||||
dataIndex: 'storage_elect_in',
|
||||
key: 'storage_elect_in',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '发电时长',
|
||||
dataIndex: 'key5',
|
||||
key: 'key5',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '故障次数',
|
||||
dataIndex: 'key6',
|
||||
key: 'key6',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
|
||||
{
|
||||
title: '日期',
|
||||
dataIndex: 'dt',
|
||||
key: 'dt',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
}
|
||||
],
|
||||
geturl: '',
|
||||
tableData: [],
|
||||
pageOption: {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
count: 1
|
||||
}
|
||||
},
|
||||
2: {
|
||||
columns: [
|
||||
{
|
||||
title: '设备ID',
|
||||
dataIndex: 'ID',
|
||||
key: 'ID',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '设备名称',
|
||||
dataIndex: 'key2',
|
||||
key: 'key2',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '设备类型',
|
||||
dataIndex: 'key3',
|
||||
key: 'key3',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '充电电量',
|
||||
dataIndex: 'storage_elect_in',
|
||||
key: 'storage_elect_in',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '充电时长',
|
||||
dataIndex: 'key5',
|
||||
key: 'key5',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '充电次数',
|
||||
dataIndex: 'key6',
|
||||
key: 'key6',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '故障次数',
|
||||
dataIndex: 'key6',
|
||||
key: 'key6',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '日期',
|
||||
dataIndex: 'dt',
|
||||
key: 'dt',
|
||||
width: 120,
|
||||
ellipsis: true
|
||||
}
|
||||
],
|
||||
geturl: '',
|
||||
tableData: [],
|
||||
pageOption: {
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
count: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
activeKey(newVal, oldVal) {
|
||||
console.log(newVal, oldVal,"activeKey")
|
||||
// 清空旧数据（可选）
|
||||
if( this.echartsInfo[oldVal]){
|
||||
this.echartsInfo[oldVal].chartData = {};
|
||||
this.tableList[oldVal].tableData = [];
|
||||
// // 重新加载数据
|
||||
this.getTableList()
|
||||
this.getEchartsList()
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
await Promise.all([
|
||||
this.getTableList(),
|
||||
this.getEchartsList()
|
||||
])
|
||||
await Promise.all([this.getTableList(), this.getEchartsList()])
|
||||
},
|
||||
beforeUnmount() {},
|
||||
methods: {
|
||||
pagesizeChange(e) {
|
||||
console.log(e, 'eeeeeeeeeeeeeee')
|
||||
|
||||
this.tableList[this.activeKey].pageOption.pageSize = e.pageSize
|
||||
this.tableList[this.activeKey].pageOption.current = e.current
|
||||
this.tableList[this.activeKey].pageOption.page = e.page
|
||||
this.getTableList()
|
||||
},
|
||||
onSearch(data) {
|
||||
this.paramsDate.startTime = data.time ? data.time[0] : ''
|
||||
this.paramsDate.endTime = data.time ? data.time[1] : ''
|
||||
this.pageOption.current = 1
|
||||
this.paramsDate.start_date = data.time ? data.time[0] : ''
|
||||
this.paramsDate.end_date = data.time ? data.time[1] : ''
|
||||
|
||||
this.tableList[this.activeKey].pageOption.page = 1
|
||||
|
||||
this.getTableList()
|
||||
this.getEchartsList()
|
||||
@@ -251,419 +510,23 @@ export default {
|
||||
|
||||
const query = {
|
||||
...this.paramsDate,
|
||||
category: this.categoryArr.map((item) => item.label == this.activeKey)[0].type
|
||||
category: this.categoryArr.map((item) => item.label == this.activeKey)[0].type,
|
||||
// start_date: getDateDaysAgo(7 - 1),
|
||||
// end_date: getDateDaysAgo(0)
|
||||
}
|
||||
try {
|
||||
const res = await postReq(query, '')
|
||||
if (res.code === 200) {
|
||||
this.echartsInfo[this.activeKey].chartData= res.data
|
||||
|
||||
const res = await getReq('/api/queryStatDayList', query)
|
||||
if (res.errcode === 0) {
|
||||
this.echartsInfo[this.activeKey].chartData = res.data
|
||||
console.log(
|
||||
this.echartsInfo[this.activeKey].chartData,
|
||||
' this.echartsInfo[this.activeKey].chartData'
|
||||
)
|
||||
} else {
|
||||
throw res
|
||||
}
|
||||
} catch (error) {
|
||||
this.echartsInfo[this.activeKey].chartData = {
|
||||
sales: [
|
||||
{
|
||||
date: '2025-08-30',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-29',
|
||||
key1: 8,
|
||||
key2: 5,
|
||||
key3: 5,
|
||||
key4: 7
|
||||
},
|
||||
{
|
||||
date: '2025-08-28',
|
||||
key1: 0,
|
||||
key2: 10,
|
||||
key3: 20,
|
||||
key4: 4
|
||||
},
|
||||
{
|
||||
date: '2025-08-27',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-26',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-25',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-24',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-23',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-22',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-21',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-20',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-19',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-18',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-17',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
}
|
||||
],
|
||||
users: [
|
||||
{
|
||||
date: '2025-08-30',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-29',
|
||||
key1: 8,
|
||||
key2: 5,
|
||||
key3: 5,
|
||||
key4: 7
|
||||
},
|
||||
{
|
||||
date: '2025-08-28',
|
||||
key1: 0,
|
||||
key2: 10,
|
||||
key3: 20,
|
||||
key4: 4
|
||||
},
|
||||
{
|
||||
date: '2025-08-27',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-26',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-25',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-24',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-23',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-22',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-21',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-20',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-19',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-18',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-17',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
}
|
||||
],
|
||||
stock: [
|
||||
{
|
||||
date: '2025-08-30',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-29',
|
||||
key1: 8,
|
||||
key2: 5,
|
||||
key3: 5,
|
||||
key4: 7
|
||||
},
|
||||
{
|
||||
date: '2025-08-28',
|
||||
key1: 0,
|
||||
key2: 10,
|
||||
key3: 20,
|
||||
key4: 4
|
||||
},
|
||||
{
|
||||
date: '2025-08-27',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-26',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-25',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-24',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-23',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-22',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-21',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-20',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-19',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-18',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-17',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
}
|
||||
],
|
||||
yearly: [
|
||||
{
|
||||
date: '2025-08-30',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-29',
|
||||
key1: 8,
|
||||
key2: 5,
|
||||
key3: 5,
|
||||
key4: 7
|
||||
},
|
||||
{
|
||||
date: '2025-08-28',
|
||||
key1: 0,
|
||||
key2: 10,
|
||||
key3: 20,
|
||||
key4: 4
|
||||
},
|
||||
{
|
||||
date: '2025-08-27',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-26',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-25',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-24',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-23',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-22',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-21',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-20',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-19',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-18',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
},
|
||||
{
|
||||
date: '2025-08-17',
|
||||
key1: 10,
|
||||
key2: 0,
|
||||
key3: 15,
|
||||
key4: 5
|
||||
}
|
||||
]
|
||||
}
|
||||
this.echartsInfo[this.activeKey].chartData = {}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -672,23 +535,23 @@ export default {
|
||||
const query = {
|
||||
...this.paramsDate,
|
||||
category: this.categoryArr.map((item) => item.label == this.activeKey)[0].type,
|
||||
pageSize: currentInfo.pageOption.pageSize,
|
||||
pageNumber: currentInfo.pageOption.current
|
||||
page_size: currentInfo.pageOption.pageSize,
|
||||
pageNumber: currentInfo.pageOption.page
|
||||
}
|
||||
try {
|
||||
const res = await postReq(query, currentInfo.getUrl)
|
||||
if (res.code === 200) {
|
||||
currentInfo.tableData = res.data.records
|
||||
const res = await getReq('/api/queryStatDayList', query)
|
||||
if (res.errcode === 0) {
|
||||
currentInfo.tableData = res.data
|
||||
currentInfo.pageOption = {
|
||||
current: res.data.pageNumber,
|
||||
pageSize: res.data.pageSize,
|
||||
total: res.data.totalRow
|
||||
page: res.data.page,
|
||||
pageSize: res.data.page_size,
|
||||
count: res.data.count
|
||||
}
|
||||
} else {
|
||||
throw res
|
||||
}
|
||||
} catch (error) {
|
||||
this.tableList[this.activeKey].tableData = [
|
||||
currentInfo.tableData = [
|
||||
{
|
||||
key1: '1515151515',
|
||||
key2: '设备1111',
|
||||
|
||||
@@ -1,12 +1,7 @@
|
||||
<template>
|
||||
<div class="Home">
|
||||
<div class="content-left">
|
||||
<div
|
||||
v-for="item in leftList"
|
||||
:key="item.componentId"
|
||||
:class="`grid-item ${item.class}`"
|
||||
|
||||
>
|
||||
<div v-for="item in leftList" :key="item.componentId" :class="`grid-item ${item.class}`">
|
||||
<div class="tool">
|
||||
<div class="title">
|
||||
<i class="iconfont icon-hebing linear-text"></i>
|
||||
@@ -26,12 +21,7 @@
|
||||
<Map @changeStation="getCurrentStation"></Map>
|
||||
</div>
|
||||
<div class="content-right">
|
||||
<div
|
||||
v-for="item in rightList"
|
||||
:key="item.componentId"
|
||||
:class="`grid-item ${item.class}`"
|
||||
|
||||
>
|
||||
<div v-for="item in rightList" :key="item.componentId" :class="`grid-item ${item.class}`">
|
||||
<div class="tool">
|
||||
<div class="title">
|
||||
<i class="iconfont icon-hebing linear-text"></i>
|
||||
@@ -57,6 +47,8 @@ import Pv from '@/components/Home/Pv.vue'
|
||||
import Alarm from '@/components/Home/Alarm.vue'
|
||||
import Map from '@/components/Home/Map.vue'
|
||||
import { getReq, postReq } from '@/request/api'
|
||||
import { getRunDays, getDateDaysAgo } from '@/utils/dealWithData'
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
components: { Map },
|
||||
@@ -120,220 +112,6 @@ export default {
|
||||
},
|
||||
async mounted() {
|
||||
await Promise.all([
|
||||
// (this.deviceInfo = {
|
||||
// alarm: [
|
||||
// {
|
||||
// date: '2025-08-30',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-29',
|
||||
// key1: 8,
|
||||
// key2: 5,
|
||||
// key3: 5,
|
||||
// key4: 7
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-28',
|
||||
// key1: 0,
|
||||
// key2: 10,
|
||||
// key3: 20,
|
||||
// key4: 4
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-27',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-26',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-25',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-24',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-23',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-22',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-21',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-20',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-19',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-18',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-17',
|
||||
// key1: 10,
|
||||
// key2: 0,
|
||||
// key3: 15,
|
||||
// key4: 5
|
||||
// }
|
||||
// ],
|
||||
// energy: [
|
||||
// {
|
||||
// date: '2025-08-30',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-29',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-28',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-27',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-26',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-25',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-24',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// }
|
||||
// ],
|
||||
// charge: [
|
||||
// {
|
||||
// date: '2025-08-30',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-29',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-28',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-27',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-26',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-25',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-24',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// }
|
||||
// ],
|
||||
// pv: [
|
||||
// {
|
||||
// date: '2025-08-30',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-29',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-28',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-27',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-26',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-25',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// },
|
||||
// {
|
||||
// date: '2025-08-24',
|
||||
// key1: '2',
|
||||
// key2: '2'
|
||||
// }
|
||||
// ],
|
||||
// allTotal: {}
|
||||
// }),
|
||||
this.getOnLineList(),
|
||||
this.getStatTotalList(),
|
||||
this.getStatDayList(1),
|
||||
@@ -355,7 +133,7 @@ export default {
|
||||
const res = await getReq('/api/queryStatSystem')
|
||||
if (res.errcode === 0) {
|
||||
this.deviceInfo.onLine = JSON.parse(JSON.stringify(res.data))
|
||||
this.deviceInfo.onLine.runDays = this.getRunDays(res.data.launch_date)
|
||||
this.deviceInfo.onLine.runDays = getRunDays(res.data.launch_date)
|
||||
console.log(JSON.parse(JSON.stringify(res.data)), this.deviceInfo.onLine, '111111111111')
|
||||
} else {
|
||||
throw res
|
||||
@@ -364,17 +142,7 @@ export default {
|
||||
this.deviceInfo.onLine = {}
|
||||
}
|
||||
},
|
||||
getRunDays(date) {
|
||||
const launchDate = new Date(date)
|
||||
const today = new Date() // 替换为当前日期
|
||||
|
||||
const timeDiff = today - launchDate // 毫秒差
|
||||
const daysRun = Math.ceil(timeDiff / (1000 * 60 * 60 * 24)) // 转换为天数
|
||||
|
||||
console.log(`从 2023-01-01 到今天已经运行了 ${daysRun} 天`)
|
||||
|
||||
return daysRun
|
||||
},
|
||||
// 查询系统累计统计信息
|
||||
async getStatTotalList() {
|
||||
try {
|
||||
@@ -417,16 +185,6 @@ export default {
|
||||
this.deviceInfo.allTotal.incomeCharge + this.deviceInfo.allTotal.incomeElect
|
||||
}
|
||||
},
|
||||
getDateDaysAgo(daysAgo) {
|
||||
const date = new Date()
|
||||
date.setDate(date.getDate() - daysAgo)
|
||||
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
|
||||
return `${year}-${month}-${day}`
|
||||
},
|
||||
|
||||
// 示例：获取7天前的日期
|
||||
// 查询场站日统计信息
|
||||
@@ -439,14 +197,26 @@ export default {
|
||||
const query = {
|
||||
stationId: this.stationId,
|
||||
category,
|
||||
start_date: this.getDateDaysAgo(7 - 1),
|
||||
end_date: this.getDateDaysAgo(0)
|
||||
start_date: getDateDaysAgo(7 - 1),
|
||||
end_date: getDateDaysAgo(0)
|
||||
}
|
||||
const arr = { 1: 'energy', 2: 'charge', 3: 'pv' }
|
||||
const res = await getReq('/api/queryStatDayList', query)
|
||||
if (res.errcode === 0) {
|
||||
this.list.forEach((item) => {
|
||||
this.deviceInfo[arr[category]] = res.data
|
||||
if (
|
||||
this.deviceInfo.energy.length &&
|
||||
this.deviceInfo.charge.length &&
|
||||
this.deviceInfo.pv.length
|
||||
) {
|
||||
const newArr = this.mergedArray(
|
||||
this.deviceInfo.energy,
|
||||
this.deviceInfo.charge,
|
||||
this.deviceInfo.pv
|
||||
)
|
||||
this.deviceInfo.alarm = newArr
|
||||
}
|
||||
})
|
||||
} else {
|
||||
throw res
|
||||
@@ -454,6 +224,24 @@ export default {
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
// 整合三个数组
|
||||
mergedArray(arr1, arr2, arr3) {
|
||||
const newArr = []
|
||||
arr1.forEach((item1, index) => {
|
||||
// 获取对应索引的 arr2 和 arr3 的对象
|
||||
const item2 = arr2[index] || {}
|
||||
const item3 = arr3[index] || {}
|
||||
|
||||
// 返回整合后的对象
|
||||
newArr.push({
|
||||
storage_num_err: item1.storage_num_err || '',
|
||||
solar_num_err: item2.solar_num_err || '',
|
||||
charge_num_err: item3.charge_num_err || '',
|
||||
dt: item1.dt
|
||||
})
|
||||
})
|
||||
return newArr
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,30 +1,196 @@
|
||||
<template>
|
||||
<div >
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template>
|
||||
<div class="user">
|
||||
<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 #gender="record">
|
||||
<!-- 0:女; 1:男 -->
|
||||
<span>{{ ['女', '男'][record.gender] }}</span>
|
||||
</template>
|
||||
|
||||
<template #action="record">
|
||||
<OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
|
||||
</template>
|
||||
</ComTable>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { columnList } from '../../../public/config/columnList'
|
||||
import { mapState } from 'vuex'
|
||||
import { getReq, postReq } from '@/request/api.js'
|
||||
import ComTable from '@/components/ComTable'
|
||||
import OperateCom from '@/components/OperateCom'
|
||||
|
||||
import searchBox from '@/components/SearchBox.vue'
|
||||
export default {
|
||||
name: '',
|
||||
components:{
|
||||
components: {
|
||||
searchBox,
|
||||
ComTable,
|
||||
OperateCom
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
|
||||
pageOption:{},
|
||||
btnOptionList: [],
|
||||
paramsDate:{
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(['page', 'detailType', 'type'])
|
||||
},
|
||||
created() {
|
||||
let info = []
|
||||
let col = columnList.find((i) => i.page == 'user').columns
|
||||
if (col.length) {
|
||||
col.forEach((item) => {
|
||||
info.push(this.$setWidth(item))
|
||||
})
|
||||
}
|
||||
this.columns = info
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods:{
|
||||
|
||||
this.operateList = this.$getBtns(['查看', '编辑', '删除'])
|
||||
this.btnOptionList = this.$getBtns(['新增', '批量删除'])
|
||||
this.getList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
async getList() {
|
||||
this.$refs.comTable.loading = true
|
||||
|
||||
const { page, pageSize } = this.pageOption
|
||||
|
||||
const params = {
|
||||
...this.paramsDate,
|
||||
page_size: pageSize,
|
||||
page
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await getReq('/api/queryUserList',params)
|
||||
if (res.errcode === 0) {
|
||||
this.$refs.comTable.loading = false
|
||||
|
||||
this.tableData = res.data
|
||||
|
||||
this.pageOption = {
|
||||
page: res.page,
|
||||
pageSize: res.page_size,
|
||||
count: res.count
|
||||
}
|
||||
} else {
|
||||
const err = { tip: res.errmsg }
|
||||
throw err
|
||||
}
|
||||
} catch (error) {
|
||||
//统一处理报错提示
|
||||
}
|
||||
},
|
||||
operateForm(type, record = {}) {
|
||||
switch (type) {
|
||||
case 'detail':
|
||||
this.$store.commit('updateState', {
|
||||
detailType: 'edit', //edit or view
|
||||
page: 'detail',
|
||||
title: '查看',
|
||||
type: 'user'
|
||||
})
|
||||
|
||||
|
||||
|
||||
this.getRuleFormInfo(record)
|
||||
break
|
||||
|
||||
case 'back':
|
||||
this.$store.commit('updateState', {
|
||||
page: 'main'
|
||||
})
|
||||
this.isShowFlag = false
|
||||
this.getList()
|
||||
break
|
||||
|
||||
default:
|
||||
break
|
||||
}
|
||||
},
|
||||
async getRuleFormInfo(record) {
|
||||
function getInfo(data, url) {
|
||||
return new Promise((reslove, reject) => {
|
||||
getReq(data, url).then((res) => {
|
||||
reslove(res.data)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
let row = {}
|
||||
if (record.id) {
|
||||
row = await getInfo({ id: record.id }, this.apiMethods[0].get)
|
||||
this.record = row
|
||||
this.$store.commit('updateState', {
|
||||
// 配电柜-集中器-查看
|
||||
title:
|
||||
(row.cabinetName ? row.cabinetName + '-' : '') +
|
||||
(row.name.split('集中器')[0] ? row.name.split('集中器')[0] : '') +
|
||||
'集中器-查看'
|
||||
})
|
||||
}
|
||||
let connectorType
|
||||
cabinetOptions.forEach((e, index) => {
|
||||
e.list.forEach((i) => {
|
||||
if (index == 1) {
|
||||
// 集中器状态
|
||||
if (i.key == 'ctrMode' || i.key == 'powerStatus') {
|
||||
e.ruleForm[i.key] = row.deviceStatus.lightStatus[i.key]
|
||||
} else {
|
||||
e.ruleForm[i.key] = row.deviceStatus[i.key]
|
||||
}
|
||||
} else if (i.key == 'connectorType') {
|
||||
connectorType = row.deviceExtend[i.key]
|
||||
e.ruleForm[i.key] = row.deviceExtend[i.key]
|
||||
} else {
|
||||
e.ruleForm[i.key] = row ? row[i.key] : ''
|
||||
e.ruleForm.id = row.id
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// C型控制器，手自动状态和故障状态显示为“无”
|
||||
if (connectorType == 1) {
|
||||
cabinetOptions[1].ruleForm.status = 5
|
||||
cabinetOptions[1].ruleForm.ctrMode = 5
|
||||
}
|
||||
this.isShowFlag = true
|
||||
},
|
||||
handlePagesizeChange(pageOption) {
|
||||
this.pageOption.pageSize = pageOption.pageSize
|
||||
this.pageOption.page = pageOption.page
|
||||
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
Reference in New Issue
Block a user