mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-27 18:59:26 +08:00
各模块样式等布局优化，运行分析接口联调
This commit is contained in:
ym1026
@@ -215,8 +215,8 @@ export const columnList = [
|
||||
},
|
||||
{
|
||||
title: '投运时间',
|
||||
dataIndex: 'touyuntime',
|
||||
key: 'touyuntime'
|
||||
dataIndex: 'operation_date',
|
||||
key: 'operation_date'
|
||||
},
|
||||
{
|
||||
title: '场站运行模式',
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
selectedRowKeys: data.selectedRowKeys,
|
||||
onChange: onSelectChange
|
||||
}
|
||||
: {}
|
||||
: null
|
||||
"
|
||||
:expanded-row-keys="data.newTableOpt.expand ? data.expandedKeys : null"
|
||||
size="middle"
|
||||
|
||||
@@ -228,6 +228,7 @@ export default {
|
||||
case 'station':
|
||||
this.detailInfos = stationOptions
|
||||
this.formRules = stationFormRules
|
||||
this.workModeIdSelect=this.detailInfos[0].ruleForm['work_mode']
|
||||
|
||||
break
|
||||
case 'device':
|
||||
|
||||
@@ -141,7 +141,7 @@ export default {
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top: 20,
|
||||
top: 10,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
@@ -150,7 +150,8 @@ export default {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
top: '32%',
|
||||
// containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
@@ -192,44 +193,4 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.text_Cur {
|
||||
border-bottom: 1px solid transparent;
|
||||
border-top: 1px solid transparent;
|
||||
border-image: linear-gradient(to right, transparent, #1d8a7b, transparent) 1;
|
||||
padding: 0px 15px;
|
||||
font-size: 14px;
|
||||
margin: 3px 0px;
|
||||
height: 45px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.mark {
|
||||
font-size: 16px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
& > div:nth-child(2),
|
||||
& > div:nth-child(3) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
& > div:last-child{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: end;
|
||||
}
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(0, 186, 173, 0.15) 0%,
|
||||
rgba(61, 254, 250, 0.15) 49.2%,
|
||||
rgba(61, 254, 250, 0) 100%
|
||||
);
|
||||
.d {
|
||||
margin-left: 1px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -154,6 +154,8 @@ export default {
|
||||
},
|
||||
|
||||
drawLineChart(activeKey) {
|
||||
console.log(this.$refs.charge)
|
||||
// const labelCount = Math.floor(500 / 30);
|
||||
this.getChargeData(activeKey)
|
||||
if(this.chargeChart){
|
||||
this.chargeChart.dispose()
|
||||
@@ -170,7 +172,7 @@ export default {
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top: 20,
|
||||
top: 10,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
@@ -178,8 +180,9 @@ export default {
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
bottom: '1%',
|
||||
top: '32%',
|
||||
// containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
@@ -197,10 +200,11 @@ export default {
|
||||
lineStyle: { type: 'dashed', color: '#435463' }
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 4,
|
||||
// margin: 10,
|
||||
// interval: 60,
|
||||
color: '#fff',
|
||||
fontSize:12
|
||||
|
||||
fontSize:12,
|
||||
// padding: [5, 0, 0, 0]
|
||||
}
|
||||
},
|
||||
series: this.chargeChartData.ydata
|
||||
@@ -226,37 +230,5 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.text_Cur {
|
||||
border-bottom: 1px solid transparent;
|
||||
border-top: 1px solid transparent;
|
||||
border-image: linear-gradient(to right, transparent, #1d8a7b, transparent) 1;
|
||||
padding: 0px 15px;
|
||||
font-size: 14px;
|
||||
margin: 3px 0px;
|
||||
height: 45px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
& > div:last-child {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: end;
|
||||
}
|
||||
.mark {
|
||||
font-size: 16px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(0, 186, 173, 0.15) 0%,
|
||||
rgba(61, 254, 250, 0.15) 49.2%,
|
||||
rgba(61, 254, 250, 0) 100%
|
||||
);
|
||||
.d {
|
||||
margin-left: 1px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -147,7 +147,8 @@ export default {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
top: '32%',
|
||||
// containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
@@ -165,7 +166,7 @@ export default {
|
||||
lineStyle: { type: 'dashed', color: '#435463' }
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 4,
|
||||
// interval: 4,
|
||||
color: '#fff',
|
||||
fontSize:12
|
||||
|
||||
@@ -193,37 +194,4 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.text_Cur {
|
||||
border-bottom: 1px solid transparent;
|
||||
border-top: 1px solid transparent;
|
||||
border-image: linear-gradient(to right, transparent, #1d8a7b, transparent) 1;
|
||||
padding: 0px 15px;
|
||||
font-size: 14px;
|
||||
margin: 3px 0px;
|
||||
height: 45px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
& > div:last-child {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: end;
|
||||
}
|
||||
.mark {
|
||||
font-size: 16px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(0, 186, 173, 0.15) 0%,
|
||||
rgba(61, 254, 250, 0.15) 49.2%,
|
||||
rgba(61, 254, 250, 0) 100%
|
||||
);
|
||||
.d {
|
||||
margin-left: 1px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -57,8 +57,8 @@ export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
center: [113.5, 33.875], // 默认中心点（河南）
|
||||
zoom: 10,
|
||||
center: [112.870000,34.180000], // 默认中心点（河南）
|
||||
zoom: 12,
|
||||
map: null,
|
||||
currentMarker: {},
|
||||
showCtrModal: false,
|
||||
@@ -72,12 +72,19 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(()=>{
|
||||
this.initMap()
|
||||
})
|
||||
},
|
||||
beforeUnmount() {
|
||||
if(this.map){
|
||||
// this.map.destory()
|
||||
this.map=null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(map) {
|
||||
this.map = map
|
||||
this.center= [110.404, 40.915]
|
||||
this.getMarkList()
|
||||
},
|
||||
async getMarkList() {
|
||||
@@ -114,33 +121,27 @@ export default {
|
||||
|
||||
|
||||
|
||||
// 备用定位方案
|
||||
// setFallbackLocation() {
|
||||
// const fallbackCoords = [116.404, 39.915] // 北京坐标
|
||||
// this.center = fallbackCoords
|
||||
// if (this.map) {
|
||||
// this.map.setCenter(new T.LngLat(...fallbackCoords))
|
||||
// }
|
||||
// },
|
||||
|
||||
|
||||
async getSysConfig() {
|
||||
let sysConfig
|
||||
try {
|
||||
const query = {}
|
||||
const res = await getReq('/', query)
|
||||
if (res.errcode === 0) {
|
||||
sysConfig = res.data.value
|
||||
} else {
|
||||
throw res
|
||||
}
|
||||
} catch (error) {
|
||||
sysConfig = this.targetKey
|
||||
}
|
||||
let sysConfig=this.targetKey
|
||||
// try {
|
||||
// const query = {}
|
||||
// const res = await getReq('/', query)
|
||||
// if (res.errcode === 0) {
|
||||
// sysConfig = res.data.value
|
||||
// } else {
|
||||
// throw res
|
||||
// }
|
||||
// } catch (error) {
|
||||
// sysConfig = this.targetKey
|
||||
// }
|
||||
return sysConfig
|
||||
},
|
||||
|
||||
async clickArrayMarker(currentVal) {
|
||||
this.changeStationId = currentVal.station_id
|
||||
this.testVal.name=currentVal.name
|
||||
this.showCtrModal = true
|
||||
}
|
||||
}
|
||||
|
||||
@@ -58,7 +58,7 @@ export default {
|
||||
propsInfo: {
|
||||
cabId: '',
|
||||
stationId: '',
|
||||
stationName: '场站111'
|
||||
station_name: '场站111'
|
||||
},
|
||||
showCtrModal: false,
|
||||
mapStyle: {
|
||||
|
||||
@@ -165,37 +165,4 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.text_Cur {
|
||||
border-bottom: 1px solid transparent;
|
||||
border-top: 1px solid transparent;
|
||||
border-image: linear-gradient(to right, transparent, #1d8a7b, transparent) 1;
|
||||
padding: 0px 15px;
|
||||
font-size: 14px;
|
||||
margin: 3px 0px;
|
||||
height: 45px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
& > div:last-child {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: end;
|
||||
}
|
||||
.mark {
|
||||
font-size: 16px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(0, 186, 173, 0.15) 0%,
|
||||
rgba(61, 254, 250, 0.15) 49.2%,
|
||||
rgba(61, 254, 250, 0) 100%
|
||||
);
|
||||
.d {
|
||||
margin-left: 1px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="onLine">
|
||||
<div class="env">
|
||||
<div class="content">
|
||||
<div v-for="item in list" :key="item.key" :class="`item ${item.class}`">
|
||||
<i
|
||||
@@ -118,7 +118,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.onLine {
|
||||
.env {
|
||||
height: calc(100% - 45px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="onLine">
|
||||
<div class="operationlInfo">
|
||||
<div class="content">
|
||||
<div v-for="item in list" :key="item.key" :class="`item ${item.class}`">
|
||||
<a-image :preview="false" :src="item.iconPath" :width="50" class="left"> </a-image>
|
||||
@@ -101,7 +101,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.onLine {
|
||||
.operationlInfo {
|
||||
height: calc(100% - 45px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -112,7 +112,7 @@ export default {
|
||||
|
||||
.content {
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
width: 90%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="onLine">
|
||||
<div class="prefabCabin">
|
||||
<div class="content-left">
|
||||
<div v-for="item in leftList" :key="item.key" :class="`item ${item.class}`">
|
||||
<div>
|
||||
@@ -10,7 +10,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: center; font-weight: 500">
|
||||
<div class="online-icon"></div>
|
||||
<div class="prefabCabin-icon"></div>
|
||||
<span>{{ curStatus }}</span>
|
||||
</div>
|
||||
|
||||
@@ -146,7 +146,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.onLine {
|
||||
.prefabCabin {
|
||||
height: calc(100% - 45px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -198,7 +198,7 @@ export default {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.online-icon {
|
||||
.prefabCabin-icon {
|
||||
width: 110px;
|
||||
height: 130px;
|
||||
background-image: url('@/assets/home/perIcon.png');
|
||||
|
||||
@@ -179,37 +179,4 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.text_Cur {
|
||||
border-bottom: 1px solid transparent;
|
||||
border-top: 1px solid transparent;
|
||||
border-image: linear-gradient(to right, transparent, #1d8a7b, transparent) 1;
|
||||
padding: 0px 15px;
|
||||
font-size: 14px;
|
||||
margin: 3px 0px;
|
||||
height: 45px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
& > div:last-child{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: end;
|
||||
}
|
||||
.mark {
|
||||
font-size: 16px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(0, 186, 173, 0.15) 0%,
|
||||
rgba(61, 254, 250, 0.15) 49.2%,
|
||||
rgba(61, 254, 250, 0) 100%
|
||||
);
|
||||
.d{
|
||||
margin-left: 1px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -158,37 +158,4 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.text_Cur {
|
||||
border-bottom: 1px solid transparent;
|
||||
border-top: 1px solid transparent;
|
||||
border-image: linear-gradient(to right, transparent, #1d8a7b, transparent) 1;
|
||||
padding: 0px 15px;
|
||||
font-size: 14px;
|
||||
margin: 3px 0px;
|
||||
height: 45px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
& > div:last-child {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: end;
|
||||
}
|
||||
.mark {
|
||||
font-size: 16px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(0, 186, 173, 0.15) 0%,
|
||||
rgba(61, 254, 250, 0.15) 49.2%,
|
||||
rgba(61, 254, 250, 0) 100%
|
||||
);
|
||||
.d {
|
||||
margin-left: 1px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,25 +1,17 @@
|
||||
<template>
|
||||
<div class="Operational">
|
||||
<div class="oper-bg">{{ currentHoverNumber }}%</div>
|
||||
<div class="oper-right">
|
||||
<div v-for="item in curList" :key="item.key" class="oper-item" @mouseover="changeNumber(item)">
|
||||
<div style="display: flex">
|
||||
<div :style="`background:${item.lineColor}`" class="item-icon"></div>
|
||||
<span class="item-name">{{ item.name }}</span>
|
||||
</div>
|
||||
<span class="item-value">{{ item.value?item.value:0 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="operational">
|
||||
<div id="operational-chart"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: '',
|
||||
props: {
|
||||
total:{
|
||||
type:Object,
|
||||
default:()=>{}
|
||||
total: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
deviceInfo: {
|
||||
type: Array,
|
||||
@@ -28,89 +20,203 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentHoverNumber: 58,
|
||||
curList: [
|
||||
{
|
||||
name: '收益',
|
||||
key: 'incomeTotal',
|
||||
key: 'income',
|
||||
percentKey: 'connector_online_percent',
|
||||
lineColor: 'linear-gradient(90deg, rgba(13, 87, 144, 1) 0%, rgba(21, 153, 253, 1) 100%);',
|
||||
lineColor: '#00BAAD',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
name: '利用率',
|
||||
key: 'usage_rate',
|
||||
percentKey: 'connector_off_percent',
|
||||
lineColor:
|
||||
'linear-gradient(90deg, rgba(53, 120, 124, 1) 0%, rgba(102, 225, 223, 1) 100%);',
|
||||
lineColor:'#0E68E4',
|
||||
value: 0
|
||||
}
|
||||
]
|
||||
],
|
||||
operationalChart: null,
|
||||
operationalChartData: {
|
||||
ydata: [],
|
||||
xdata: []
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
total:{
|
||||
handler(newVal,oldVal) {
|
||||
if (newVal!==oldVal) {
|
||||
let that=this
|
||||
that.curList.forEach((item)=>{
|
||||
item.value=that.total[item.key]
|
||||
|
||||
deviceInfo: {
|
||||
handler(newVal, oldVal) {
|
||||
if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
|
||||
this.$nextTick(() => {
|
||||
this.drawLineChart()
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
deep: true // 确保深度比较
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
beforeUnmount() {
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
if (this.operationalChart) {
|
||||
this.operationalChart.dispose()
|
||||
this.operationalChart = null
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
changeNumber(item) {
|
||||
this.currentHoverNumber = item.percentValue? item.percentValue:0
|
||||
processData(data, keys) {
|
||||
data.sort((a, b) => {
|
||||
return new Date(a.station_name) - new Date(b.station_name)
|
||||
})
|
||||
const dates = data.map((item) => item.station_name)
|
||||
const values = []
|
||||
keys.forEach((item, index) => {
|
||||
values[index] = data.map((dataValue) => dataValue[keys[index]])
|
||||
})
|
||||
|
||||
return {
|
||||
dates,
|
||||
values
|
||||
}
|
||||
},
|
||||
handleResize() {
|
||||
if (this.operationalChart) {
|
||||
this.operationalChart.resize()
|
||||
}
|
||||
},
|
||||
|
||||
getChargeData() {
|
||||
const arr = this.curList
|
||||
const keyList = this.curList.map((item) => item.key)
|
||||
const result = this.processData(this.deviceInfo, keyList)
|
||||
|
||||
this.operationalChartData.xdata = result.dates
|
||||
arr.forEach((item, index) => {
|
||||
this.operationalChartData.ydata[index] = {
|
||||
name: item.name,
|
||||
smooth: true,
|
||||
type: 'bar',
|
||||
barWidth: 5,
|
||||
itemStyle: {
|
||||
borderRadius: [5, 5, 0, 0],
|
||||
color: item.lineColor
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
yAxisIndex: index,
|
||||
global: false,
|
||||
showSymbol: false,
|
||||
data: result.values[index]
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
drawLineChart(activeKey) {
|
||||
this.getChargeData(activeKey)
|
||||
if (this.operationalChart) {
|
||||
this.operationalChart.dispose()
|
||||
}
|
||||
const chartDom = document.getElementById('operational-chart')
|
||||
if (!chartDom) return
|
||||
let operationalChart = this.$echarts.init(chartDom)
|
||||
this.operationalChart = operationalChart
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis', // 触发类型：坐标轴触发
|
||||
// position: function (pos, params, dom, rect, size) {
|
||||
// // pos: 鼠标位置 [x, y]
|
||||
// // size: 提示框大小 {viewSize: [width, height], contentSize: [width, height]}
|
||||
// const x = pos[0] + 10; // 鼠标右侧10px
|
||||
// const y = pos[1]; // 保持与鼠标同高
|
||||
// return [x, y];
|
||||
// }
|
||||
},
|
||||
legend: {
|
||||
top: 10,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: this.operationalChartData.xdata,
|
||||
axisLine: {
|
||||
lineStyle: { type: 'dashed', color: '#435463' }
|
||||
},
|
||||
axisLabel: {
|
||||
color:"#fff",
|
||||
// interval:'auto', // 显示所有标签
|
||||
fontSize: 12,
|
||||
formatter: function(value) {
|
||||
return value.length > 8 ? value.substring(0, 8) + '...' : value;
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
name: '收益(元)',
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
lineStyle: { type: 'dashed', color: '#435463' }
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: '#fff' // 绿色名称
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 4,
|
||||
color: '#fff',
|
||||
fontSize:12
|
||||
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '利用率(%)',
|
||||
type: 'value',
|
||||
nameTextStyle: {
|
||||
color: '#fff' // 绿色名称
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: { type: 'dashed', color: '#435463' }
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 4,
|
||||
color: '#fff',
|
||||
fontSize:12
|
||||
|
||||
},
|
||||
},
|
||||
],
|
||||
series: this.operationalChartData.ydata
|
||||
}
|
||||
option && operationalChart.setOption(option)
|
||||
this.setupResizeListener()
|
||||
},
|
||||
setupResizeListener() {
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Operational {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
.operational {
|
||||
height: calc(100% - 45px);
|
||||
.oper-bg {
|
||||
font-size: 1vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: url('../../assets/home/operBg.png');
|
||||
background-size: 100% 100%;
|
||||
width: 9vw;
|
||||
height: 9vw;
|
||||
aspect-ratio: 1/1;
|
||||
}
|
||||
.oper-right {
|
||||
font-size: 13px;
|
||||
.oper-item {
|
||||
height: 12%;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 5px 15px;
|
||||
background: url('../../assets/home/leg-bg.png');
|
||||
background-size: 100% 100%;
|
||||
.item-icon {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
.item-name {
|
||||
margin-left: 5px;
|
||||
margin-right: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
#operational-chart {
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -138,7 +138,7 @@ export default {
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
top: 20,
|
||||
top: 10,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
@@ -147,7 +147,8 @@ export default {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
top: '32%',
|
||||
// containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
@@ -165,7 +166,7 @@ export default {
|
||||
lineStyle: { type: 'dashed', color: '#435463' }
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 4,
|
||||
// interval: 4,
|
||||
color: '#fff',
|
||||
fontSize:12
|
||||
|
||||
@@ -193,37 +194,4 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.text_Cur {
|
||||
border-bottom: 1px solid transparent;
|
||||
border-top: 1px solid transparent;
|
||||
border-image: linear-gradient(to right, transparent, #1d8a7b, transparent) 1;
|
||||
padding: 0px 15px;
|
||||
font-size: 14px;
|
||||
margin: 3px 0px;
|
||||
height: 45px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
& > div:last-child {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: end;
|
||||
}
|
||||
.mark {
|
||||
font-size: 16px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(0, 186, 173, 0.15) 0%,
|
||||
rgba(61, 254, 250, 0.15) 49.2%,
|
||||
rgba(61, 254, 250, 0) 100%
|
||||
);
|
||||
.d {
|
||||
margin-left: 1px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -28,7 +28,7 @@ export default {
|
||||
props: {
|
||||
infoKey: {
|
||||
type: String,
|
||||
default:''
|
||||
default: ''
|
||||
},
|
||||
total: {
|
||||
type: Object,
|
||||
@@ -98,19 +98,18 @@ export default {
|
||||
|
||||
watch: {
|
||||
total: {
|
||||
handler(newVal,oldVal) {
|
||||
if (newVal&&newVal!==oldVal) {
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal && newVal !== oldVal) {
|
||||
this.curList.forEach((item) => {
|
||||
item.value = newVal[item.key] || 0;
|
||||
});
|
||||
item.value = newVal[item.key] || 0
|
||||
})
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
mounted() {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
@@ -147,14 +146,13 @@ export default {
|
||||
|
||||
.content-left,
|
||||
.content-right {
|
||||
width: calc((100% - 110px) / 2);
|
||||
// width: 40%;
|
||||
width: 40%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
height: 100%;
|
||||
.item{
|
||||
.item {
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
@@ -171,7 +169,7 @@ export default {
|
||||
}
|
||||
|
||||
.online-icon {
|
||||
width: 110px;
|
||||
width: 20%;
|
||||
height: 130px;
|
||||
background-image: url('@/assets/home/onLineIcon.png');
|
||||
background-size: contain;
|
||||
|
||||
@@ -333,7 +333,7 @@ input:-internal-autofill-selected {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.button {
|
||||
margin-left: 10px;
|
||||
// margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,7 +10,8 @@
|
||||
:row-class-name="(record, index) => rowClassName(record, index)"
|
||||
row-key="key"
|
||||
size="middle"
|
||||
:row-selection="rowSelection"
|
||||
:row-selection="newTableOpt.select
|
||||
?rowSelection:null"
|
||||
:indent-size="30"
|
||||
:check-strictly="false"
|
||||
@resizeColumn="handleResizeColumn"
|
||||
@@ -100,6 +101,7 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
rowSelection() {
|
||||
|
||||
const { selectedRowKeys } = this
|
||||
return {
|
||||
checkStrictly: this.tableOption.checkStrictly,
|
||||
|
||||
@@ -173,6 +173,7 @@ export default {
|
||||
},
|
||||
// 初始化柱状图
|
||||
initBarCharts() {
|
||||
|
||||
this.chartOptions.forEach((option, index) => {
|
||||
if (option.type === 'bar') {
|
||||
const dom = this.$refs[`chartContainer${index}`]?.[0];
|
||||
|
||||
@@ -168,3 +168,38 @@ $page-border: #cad2dd;
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 添加统一布局的样式
|
||||
.text_Cur {
|
||||
border-bottom: 1px solid transparent;
|
||||
border-top: 1px solid transparent;
|
||||
border-image: linear-gradient(to right, transparent, #1d8a7b, transparent) 1;
|
||||
padding: 0px 15px;
|
||||
font-size: 12px;
|
||||
margin: 3px 0px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
& > div:last-child {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: end;
|
||||
}
|
||||
.mark {
|
||||
font-size: 16px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(0, 186, 173, 0.15) 0%,
|
||||
rgba(61, 254, 250, 0.15) 49.2%,
|
||||
rgba(61, 254, 250, 0) 100%
|
||||
);
|
||||
.d {
|
||||
margin-left: 1px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
>
|
||||
<template #stationSelect="item">
|
||||
<a-select
|
||||
style="width: 120px"
|
||||
style="width: 200px"
|
||||
:dropdown-match-select-width="false"
|
||||
v-model:value="stationId"
|
||||
allow-clear
|
||||
@@ -512,7 +512,7 @@ export default {
|
||||
this.resetDataForInactiveKey()
|
||||
|
||||
// 并行加载新数据
|
||||
Promise.all([this.getEchartsListForActiveKey(), this.getTableListForActiveKey()]).then(
|
||||
Promise.all([this.getStationList(),this.getEchartsListForActiveKey(), this.getTableListForActiveKey()]).then(
|
||||
() => {
|
||||
this.$nextTick(() => {
|
||||
this.getStatCharts()
|
||||
|
||||
@@ -48,46 +48,45 @@ import Alarm from '@/components/Home/Alarm.vue'
|
||||
import Map from '@/components/Home/Map.vue'
|
||||
import { getReq, postReq } from '@/request/api'
|
||||
import { getRunDays, getDateDaysAgo } from '@/utils/dealWithData'
|
||||
import { markRaw } from 'vue';
|
||||
import { markRaw } from 'vue'
|
||||
export default {
|
||||
name: 'Home',
|
||||
components: { Map },
|
||||
data() {
|
||||
return {
|
||||
showFlag: false,
|
||||
|
||||
stationId: null,
|
||||
deviceInfo: {},
|
||||
list: [
|
||||
{
|
||||
title: '运行状况',
|
||||
class: 'online-status',
|
||||
componentId:markRaw(onLine),
|
||||
componentId: markRaw(onLine),
|
||||
infoKey: 'onLineTotal'
|
||||
},
|
||||
{
|
||||
title: '运行分析',
|
||||
class: 'stats-cards',
|
||||
componentId:markRaw( Operational),
|
||||
infoKey: ''
|
||||
componentId: markRaw(Operational),
|
||||
infoKey: 'operationTotal'
|
||||
},
|
||||
{
|
||||
title: '储能设备',
|
||||
class: 'energy-status',
|
||||
componentId:markRaw( Energy),
|
||||
componentId: markRaw(Energy),
|
||||
infoKey: 'energy'
|
||||
},
|
||||
{
|
||||
title: '充电设备',
|
||||
class: 'charge-analysis',
|
||||
componentId:markRaw( Charge),
|
||||
componentId: markRaw(Charge),
|
||||
infoKey: 'charge'
|
||||
},
|
||||
|
||||
{
|
||||
title: '光伏设备',
|
||||
class: 'work-order',
|
||||
componentId:markRaw( Pv),
|
||||
componentId: markRaw(Pv),
|
||||
infoKey: 'pv'
|
||||
},
|
||||
{
|
||||
@@ -114,10 +113,11 @@ export default {
|
||||
await Promise.all([
|
||||
this.getOnLineList(),
|
||||
this.getStatTotalList(),
|
||||
this.getOperTotalList(),
|
||||
this.getStatDayList(1),
|
||||
this.getStatDayList(2),
|
||||
this.getStatDayList(3)
|
||||
]).then((r)=>{
|
||||
]).then((r) => {
|
||||
if (
|
||||
this.deviceInfo.energy.length &&
|
||||
this.deviceInfo.charge.length &&
|
||||
@@ -130,15 +130,11 @@ export default {
|
||||
)
|
||||
this.deviceInfo.alarm = newArr
|
||||
}
|
||||
console.log(r,'11111')
|
||||
|
||||
})
|
||||
// this.showFlag=true
|
||||
},
|
||||
|
||||
methods: {
|
||||
getCurrentStation(e) {
|
||||
console.log(e, 'getCurrentStation')
|
||||
this.stationId = e
|
||||
},
|
||||
// 查询系统统计信息
|
||||
@@ -149,7 +145,6 @@ export default {
|
||||
if (res.errcode === 0) {
|
||||
this.deviceInfo.onLine = JSON.parse(JSON.stringify(res.data))
|
||||
this.deviceInfo.onLine.runDays = getRunDays(res.data.launch_date)
|
||||
console.log(JSON.parse(JSON.stringify(res.data)), this.deviceInfo.onLine, '111111111111')
|
||||
} else {
|
||||
throw res
|
||||
}
|
||||
@@ -166,7 +161,7 @@ export default {
|
||||
// station_id:场站ID，为0或不传查询所有场站总计
|
||||
// category:类别，1:储能设备,2:充电设备,3:光伏设备,为0或不传查询所有类别总计
|
||||
const query = {
|
||||
date: new Date(),
|
||||
date: getDateDaysAgo(0),
|
||||
stationId: this.stationId,
|
||||
category: 0
|
||||
}
|
||||
@@ -176,35 +171,31 @@ export default {
|
||||
const { income_charge: incomeCharge, income_elect: incomeElect } =
|
||||
this.deviceInfo.allTotal
|
||||
this.deviceInfo.allTotal.incomeTotal = +incomeCharge + +incomeElect
|
||||
console.log(
|
||||
this.deviceInfo.allTotal.incomeTotal,
|
||||
incomeCharge,
|
||||
incomeElect,
|
||||
' this.deviceInfo.allTotal.incomeTotal'
|
||||
)
|
||||
} else {
|
||||
throw res
|
||||
}
|
||||
} catch (error) {
|
||||
this.deviceInfo.allTotal = {
|
||||
storageElectIn: 2,
|
||||
storageElectOut: 5,
|
||||
chargeElect: 4,
|
||||
chargeNum: 5,
|
||||
incomeCharge: 7,
|
||||
incomeElect: 7,
|
||||
solarElectGen: 7,
|
||||
solarElectGrid: 7
|
||||
this.deviceInfo.allTotal = {}
|
||||
this.deviceInfo.allTotal.incomeTotal = 0
|
||||
}
|
||||
this.deviceInfo.allTotal.incomeTotal =
|
||||
this.deviceInfo.allTotal.incomeCharge + this.deviceInfo.allTotal.incomeElect
|
||||
},
|
||||
// 运行分析 联调
|
||||
async getOperTotalList() {
|
||||
try {
|
||||
const res = await getReq('/queryStatStation', {})
|
||||
if (res.errcode === 0) {
|
||||
this.deviceInfo.operationTotal = res.data
|
||||
} else {
|
||||
throw res
|
||||
}
|
||||
} catch (error) {
|
||||
this.deviceInfo.operationTotal = [ ]
|
||||
}
|
||||
},
|
||||
|
||||
// 示例：获取7天前的日期
|
||||
// 查询场站日统计信息
|
||||
async getStatDayList(category) {
|
||||
console.log(category,"category")
|
||||
try {
|
||||
// station_id: 场站ID
|
||||
// category: 类别： 1：储能设备,2:充电设备,3:光伏设备
|
||||
@@ -221,7 +212,6 @@ export default {
|
||||
if (res.errcode === 0) {
|
||||
this.list.forEach((item) => {
|
||||
this.deviceInfo[arr[category]] = res.data
|
||||
|
||||
})
|
||||
} else {
|
||||
throw res
|
||||
|
||||
@@ -1,10 +1,6 @@
|
||||
<template>
|
||||
<div class="permission">
|
||||
<searchBox
|
||||
:btn-option-list="btnOptionList"
|
||||
@onSearch="onSearch"
|
||||
@operateForm="operateForm"
|
||||
></searchBox>
|
||||
<!-- <searchBox :btn-option-list="btnOptionList" @operateForm="operateForm"></searchBox> -->
|
||||
|
||||
<div class="content-table">
|
||||
<TreeTable
|
||||
@@ -31,7 +27,13 @@
|
||||
</template>
|
||||
</TreeTable>
|
||||
</div>
|
||||
<a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
|
||||
<a-modal
|
||||
v-model:open="formModal"
|
||||
width="750px"
|
||||
style="top: 20px"
|
||||
:footer="null"
|
||||
:destroy-on-close="true"
|
||||
>
|
||||
<!-- action:edit add -->
|
||||
<EditCom
|
||||
:record="record"
|
||||
@@ -64,7 +66,10 @@ export default {
|
||||
page: 1
|
||||
},
|
||||
btnOptionList: [],
|
||||
paramsDate: {}
|
||||
paramsDate: {},
|
||||
tableOption: {
|
||||
select: false
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
@@ -125,10 +130,7 @@ export default {
|
||||
operateForm(type, record = {}) {
|
||||
this.formStatus = type
|
||||
switch (type) {
|
||||
|
||||
|
||||
case 'del':
|
||||
|
||||
break
|
||||
|
||||
case 'back':
|
||||
@@ -196,10 +198,9 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.permission {
|
||||
height: 100%;
|
||||
|
||||
padding: 20px 20px 0 20px;
|
||||
.content-table {
|
||||
height: calc(100% - 70px);
|
||||
padding: 10px;
|
||||
height: calc(100% - 92px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,10 +1,6 @@
|
||||
<template>
|
||||
<div class="role">
|
||||
<searchBox
|
||||
:btn-option-list="btnOptionList"
|
||||
@onSearch="onSearch"
|
||||
@operateForm="operateForm"
|
||||
></searchBox>
|
||||
<searchBox :btn-option-list="btnOptionList" @operateForm="operateForm"></searchBox>
|
||||
|
||||
<div class="content-table">
|
||||
<ComTable
|
||||
@@ -31,7 +27,13 @@
|
||||
</template>
|
||||
</ComTable>
|
||||
</div>
|
||||
<a-modal v-model:open="formModal" width="950px" style="top: 20px" :footer="null" :destroy-on-close="true">
|
||||
<a-modal
|
||||
v-model:open="formModal"
|
||||
width="950px"
|
||||
style="top: 20px"
|
||||
:footer="null"
|
||||
:destroy-on-close="true"
|
||||
>
|
||||
<!-- action:edit add -->
|
||||
<EditCom
|
||||
:show-flag="formModal"
|
||||
@@ -75,8 +77,8 @@ export default {
|
||||
btnOptionList: [],
|
||||
paramsDate: {},
|
||||
tableOption: {
|
||||
select:false
|
||||
},
|
||||
select: false
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
@@ -143,9 +145,9 @@ export default {
|
||||
...item,
|
||||
key: item.permission_id,
|
||||
is_add: Boolean(+item.is_add) || false,
|
||||
is_del: Boolean(+item.is_del )|| false,
|
||||
is_edit: Boolean(+item.is_edit )|| false,
|
||||
is_view: Boolean(+item.is_view )|| false,
|
||||
is_del: Boolean(+item.is_del) || false,
|
||||
is_edit: Boolean(+item.is_edit) || false,
|
||||
is_view: Boolean(+item.is_view) || false,
|
||||
// 确保子权限容器存在
|
||||
children: item.children ? [...item.children] : []
|
||||
}
|
||||
@@ -194,10 +196,10 @@ export default {
|
||||
},
|
||||
calculateParentPermissions(node) {
|
||||
if (node.children?.length) {
|
||||
node.is_view = node.children.some((child) => child.is_view === '1') ? true:false
|
||||
node.is_add = node.children.some((child) => child.is_add === '1') ? true:false
|
||||
node.is_edit = node.children.some((child) => child.is_edit === '1') ? true:false
|
||||
node.is_del = node.children.some((child) => child.is_del === '1') ? true:false
|
||||
node.is_view = node.children.some((child) => child.is_view === '1') ? true : false
|
||||
node.is_add = node.children.some((child) => child.is_add === '1') ? true : false
|
||||
node.is_edit = node.children.some((child) => child.is_edit === '1') ? true : false
|
||||
node.is_del = node.children.some((child) => child.is_del === '1') ? true : false
|
||||
}
|
||||
},
|
||||
async getPermissionList() {
|
||||
@@ -243,7 +245,7 @@ export default {
|
||||
is_add: data ? Boolean(+data.is_add) : false,
|
||||
is_del: data ? Boolean(+data.is_del) : false,
|
||||
is_edit: data ? Boolean(+data.is_edit) : false,
|
||||
is_view: data ? Boolean(+data.is_view ): false
|
||||
is_view: data ? Boolean(+data.is_view) : false
|
||||
}
|
||||
},
|
||||
operateForm(type, record = {}) {
|
||||
@@ -295,13 +297,11 @@ export default {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
onCancel() {
|
||||
},
|
||||
onCancel() {},
|
||||
class: 'test'
|
||||
})
|
||||
},
|
||||
async getRuleFormInfo(record) {
|
||||
|
||||
function getInfo(data, url) {
|
||||
return new Promise((reslove, reject) => {
|
||||
getReq(data, url).then((res) => {
|
||||
@@ -320,16 +320,16 @@ export default {
|
||||
perList,
|
||||
record && record.permission.length ? record.permission : []
|
||||
)
|
||||
const newData=JSON.parse(JSON.stringify( this.processedData))
|
||||
const newData = JSON.parse(JSON.stringify(this.processedData))
|
||||
|
||||
roleOptions.forEach((e, index) => {
|
||||
e.list.forEach((i) => {
|
||||
if (i.key == 'permission') {
|
||||
i.tableData = newData
|
||||
if(record&&record.role_id){
|
||||
i.selectTableData=this.extractAllIds( record.permission)
|
||||
}else {
|
||||
i.selectTableData=[]
|
||||
if (record && record.role_id) {
|
||||
i.selectTableData = this.extractAllIds(record.permission)
|
||||
} else {
|
||||
i.selectTableData = []
|
||||
}
|
||||
} else {
|
||||
e.ruleForm[i.key] = row ? row[i.key] : ''
|
||||
@@ -340,25 +340,25 @@ export default {
|
||||
},
|
||||
// 定义提取所有ID的函数
|
||||
extractAllIds(treeData) {
|
||||
const idSet = new Set();
|
||||
const idSet = new Set()
|
||||
|
||||
// 递归遍历函数
|
||||
const traverse = (node) => {
|
||||
// 添加当前节点ID
|
||||
if (node.permission_id) {
|
||||
idSet.add(node.permission_id);
|
||||
idSet.add(node.permission_id)
|
||||
}
|
||||
|
||||
// 递归处理子节点
|
||||
if (node.children && node.children.length > 0) {
|
||||
node.children.forEach((child) => traverse(child));
|
||||
node.children.forEach((child) => traverse(child))
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 处理所有根节点
|
||||
treeData.forEach((node) => traverse(node));
|
||||
treeData.forEach((node) => traverse(node))
|
||||
|
||||
return Array.from(idSet);
|
||||
return Array.from(idSet)
|
||||
},
|
||||
handlePagesizeChange(pageOption) {
|
||||
this.pageOption.pageSize = pageOption.pageSize
|
||||
@@ -373,9 +373,9 @@ export default {
|
||||
.role {
|
||||
height: 100%;
|
||||
|
||||
padding: 0 20px;
|
||||
.content-table {
|
||||
height: calc(100% - 70px);
|
||||
padding: 10px;
|
||||
height: calc(100% - 92px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,10 +1,6 @@
|
||||
<template>
|
||||
<div class="service">
|
||||
<searchBox
|
||||
:btn-option-list="btnOptionList"
|
||||
@onSearch="onSearch"
|
||||
@operateForm="operateForm"
|
||||
></searchBox>
|
||||
<searchBox :btn-option-list="btnOptionList" @operateForm="operateForm"></searchBox>
|
||||
|
||||
<div class="content-table">
|
||||
<ComTable
|
||||
@@ -22,13 +18,18 @@
|
||||
}}</a-tag>
|
||||
</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">
|
||||
<a-modal
|
||||
v-model:open="formModal"
|
||||
width="750px"
|
||||
style="top: 20px"
|
||||
:footer="null"
|
||||
:destroy-on-close="true"
|
||||
>
|
||||
<!-- action:edit add -->
|
||||
<EditCom
|
||||
:record="record"
|
||||
@@ -52,13 +53,13 @@ export default {
|
||||
name: '',
|
||||
components: {
|
||||
searchBox,
|
||||
EditCom,
|
||||
EditCom
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
tableOption: {
|
||||
select:false
|
||||
select: false
|
||||
},
|
||||
formModal: false,
|
||||
formState: {},
|
||||
@@ -69,33 +70,33 @@ export default {
|
||||
},
|
||||
btnOptionList: [],
|
||||
paramsDate: {},
|
||||
workModeList:[
|
||||
workModeList: [
|
||||
{
|
||||
label:'最优经济化',
|
||||
value:1
|
||||
label: '最优经济化',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label:'支撑电网稳定',
|
||||
value:2
|
||||
label: '支撑电网稳定',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label:'自定义',
|
||||
value:3
|
||||
},
|
||||
label: '自定义',
|
||||
value: 3
|
||||
}
|
||||
],
|
||||
policyList:[
|
||||
policyList: [
|
||||
{
|
||||
label:'削峰套利',
|
||||
value:1
|
||||
label: '削峰套利',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label:'需求响应',
|
||||
value:2
|
||||
label: '需求响应',
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label:'自发自用',
|
||||
value:3
|
||||
},
|
||||
label: '自发自用',
|
||||
value: 3
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
@@ -148,7 +149,6 @@ export default {
|
||||
} catch (error) {
|
||||
//统一处理报错提示
|
||||
this.$refs.comTable.loading = false
|
||||
|
||||
}
|
||||
},
|
||||
operateForm(type, record = {}) {
|
||||
@@ -168,7 +168,7 @@ export default {
|
||||
break
|
||||
|
||||
case 'del':
|
||||
this.handleDelete([record.api_id],this.getList)
|
||||
this.handleDelete([record.api_id], this.getList)
|
||||
|
||||
break
|
||||
|
||||
@@ -182,7 +182,7 @@ export default {
|
||||
}
|
||||
},
|
||||
// 删除操作
|
||||
async handleDelete(id,callback) {
|
||||
async handleDelete(id, callback) {
|
||||
const that = this
|
||||
Modal.confirm({
|
||||
title: '你确认删除数据吗?',
|
||||
@@ -190,10 +190,10 @@ export default {
|
||||
|
||||
async onOk() {
|
||||
try {
|
||||
const res = await getReq('/deleteServiceApi',{api_id:id})
|
||||
const res = await getReq('/deleteServiceApi', { api_id: id })
|
||||
if (res.errcode === 0) {
|
||||
this.$message.success(res.errmsg)
|
||||
this.pageOption.page=1
|
||||
this.pageOption.page = 1
|
||||
callback()
|
||||
} else {
|
||||
throw res
|
||||
@@ -202,8 +202,7 @@ export default {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
onCancel() {
|
||||
},
|
||||
onCancel() {},
|
||||
class: 'test'
|
||||
})
|
||||
},
|
||||
@@ -225,7 +224,6 @@ export default {
|
||||
}
|
||||
serviceApiOptions.forEach((e, index) => {
|
||||
e.list.forEach((i) => {
|
||||
|
||||
e.ruleForm[i.key] = row ? row[i.key] : ''
|
||||
e.ruleForm.id = row.id
|
||||
})
|
||||
|
||||
@@ -1,10 +1,6 @@
|
||||
<template>
|
||||
<div class="station">
|
||||
<searchBox
|
||||
:btn-option-list="btnOptionList"
|
||||
@onSearch="onSearch"
|
||||
@operateForm="operateForm"
|
||||
></searchBox>
|
||||
<searchBox :btn-option-list="btnOptionList" @operateForm="operateForm"></searchBox>
|
||||
|
||||
<div class="content-table">
|
||||
<ComTable
|
||||
@@ -22,19 +18,20 @@
|
||||
<span>{{}}</span>
|
||||
</template>
|
||||
<template #work_mode="record">
|
||||
<span>{{ workModeList.find((item) => record.value == item.value)?.label || '' }}</span>
|
||||
<span>{{ workModeList.find((item) => record.work_mode == item.value)?.label || '' }}</span>
|
||||
</template>
|
||||
<template #policy_id="record">
|
||||
<span>{{ policyList.find((item) => record.value == item.value)?.label || '' }}</span>
|
||||
<span>{{ policyList.find((item) => record.policy_id == item.value)?.label || '' }}</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">
|
||||
<a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null" :destroy-on-close="true">
|
||||
<!-- action:edit add -->
|
||||
<EditCom
|
||||
ref="EditCom"
|
||||
:record="record"
|
||||
@operateForm="operateForm"
|
||||
type="station"
|
||||
@@ -217,8 +214,7 @@ export default {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
onCancel() {
|
||||
},
|
||||
onCancel() {},
|
||||
class: 'test'
|
||||
})
|
||||
},
|
||||
@@ -240,8 +236,27 @@ export default {
|
||||
}
|
||||
stationOptions.forEach((e, index) => {
|
||||
e.list.forEach((i) => {
|
||||
if (i.key == 'work_mode') {
|
||||
console.log(row[i.key], 'rrrrrrrrr')
|
||||
switch (row[i.key]) {
|
||||
case '1':
|
||||
case '5':
|
||||
e.ruleForm[i.key] =row[i.key]
|
||||
// this.$refs.EditCom.workModeIdSelect = row[i.key]
|
||||
e.ruleForm['policy_id'] = row ? row['policy_id'] : ''
|
||||
stationOptions[0].list[stationOptions[0].list.length - 1].type = 'select'
|
||||
break
|
||||
default:
|
||||
e.ruleForm[i.key] =row[i.key]
|
||||
|
||||
console.log('1245')
|
||||
stationOptions[0].list[stationOptions[0].list.length - 1].type = 'unshow'
|
||||
|
||||
break
|
||||
}
|
||||
} else {
|
||||
e.ruleForm[i.key] = row ? row[i.key] : ''
|
||||
e.ruleForm.id = row.id
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
@@ -258,9 +273,9 @@ export default {
|
||||
.station {
|
||||
height: 100%;
|
||||
|
||||
padding: 0 20px;
|
||||
.content-table {
|
||||
height: calc(100% - 70px);
|
||||
padding: 10px;
|
||||
height: calc(100% - 92px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,11 +1,6 @@
|
||||
<template>
|
||||
<div class="user">
|
||||
<searchBox
|
||||
:btn-option-list="btnOptionList"
|
||||
@onSearch="onSearch"
|
||||
:search-options="searchOptions"
|
||||
@operateForm="operateForm"
|
||||
></searchBox>
|
||||
<searchBox :btn-option-list="btnOptionList" @operateForm="operateForm"></searchBox>
|
||||
|
||||
<div class="content-table">
|
||||
<ComTable
|
||||
@@ -26,7 +21,13 @@
|
||||
</template>
|
||||
</ComTable>
|
||||
</div>
|
||||
<a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
|
||||
<a-modal
|
||||
v-model:open="formModal"
|
||||
width="750px"
|
||||
style="top: 20px"
|
||||
:footer="null"
|
||||
:destroy-on-close="true"
|
||||
>
|
||||
<!-- action:edit add -->
|
||||
<EditCom
|
||||
:record="record"
|
||||
@@ -48,13 +49,13 @@ import { createVNode } from 'vue'
|
||||
export default {
|
||||
name: '',
|
||||
components: {
|
||||
EditCom,
|
||||
EditCom
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
tableOption: {
|
||||
select:false
|
||||
select: false
|
||||
},
|
||||
formModal: false,
|
||||
formState: {},
|
||||
@@ -136,7 +137,7 @@ export default {
|
||||
break
|
||||
|
||||
case 'del':
|
||||
this.handleDelete([record.user_id],this.getList)
|
||||
this.handleDelete([record.user_id], this.getList)
|
||||
|
||||
break
|
||||
|
||||
@@ -150,7 +151,7 @@ export default {
|
||||
}
|
||||
},
|
||||
// 删除操作
|
||||
async handleDelete(id,callback) {
|
||||
async handleDelete(id, callback) {
|
||||
const that = this
|
||||
this.$Modal.confirm({
|
||||
title: '你确认删除数据吗?',
|
||||
@@ -158,10 +159,10 @@ export default {
|
||||
|
||||
async onOk() {
|
||||
try {
|
||||
const res = await getReq('/deleteUser',{user_id:id})
|
||||
const res = await getReq('/deleteUser', { user_id: id })
|
||||
if (res.errcode === 0) {
|
||||
this.$message.success(res.errmsg)
|
||||
this.pageOption.page=1
|
||||
this.pageOption.page = 1
|
||||
callback()
|
||||
} else {
|
||||
throw res
|
||||
@@ -170,8 +171,7 @@ export default {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
onCancel() {
|
||||
},
|
||||
onCancel() {},
|
||||
class: 'test'
|
||||
})
|
||||
},
|
||||
@@ -193,7 +193,6 @@ export default {
|
||||
}
|
||||
userOptions.forEach((e, index) => {
|
||||
e.list.forEach((i) => {
|
||||
|
||||
e.ruleForm[i.key] = row ? row[i.key] : ''
|
||||
e.ruleForm.id = row.id
|
||||
})
|
||||
@@ -211,10 +210,9 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.user {
|
||||
height: 100%;
|
||||
|
||||
padding: 0 20px;
|
||||
.content-table {
|
||||
height: calc(100% - 70px);
|
||||
padding: 10px;
|
||||
height: calc(100% - 92px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user