mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-28 03:09:24 +08:00
各模块样式等布局优化，运行分析接口联调
This commit is contained in:
ym1026
@@ -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.initMap()
|
||||
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;
|
||||
|
||||
Reference in New Issue
Block a user