|
@@ -1,7 +1,8 @@
|
|
|
<template>
|
|
|
<div class="page stationInfoPage">
|
|
|
<div class="timeBox">{{ time }}</div>
|
|
|
- <div class="kaiguanBox"><img src="../../../../public/largeScreenImg/kaiguan.png" style="width: 30px;height: 30px" @click="pushZaiXian()"/></div>
|
|
|
+ <div class="kaiguanBox"><img src="../../../../public/largeScreenImg/kaiguan.png" style="width: 30px;height: 30px"
|
|
|
+ @click="pushZaiXian()"/></div>
|
|
|
<div class="topTiltle">
|
|
|
<span class="title">在运风光场站信息</span>
|
|
|
</div>
|
|
@@ -17,52 +18,182 @@
|
|
|
<div class="rightTextBg">
|
|
|
<div class="rightBg topBox">
|
|
|
<div class="rightTiltleTextBg">
|
|
|
- <div class="rightMainTitle">
|
|
|
+ <div class="rightMainTitle" style="display: flex;justify-content: space-between;width: 100%">
|
|
|
+
|
|
|
<span class="mainTitle" @click="pushInfo()">{{ station.stationName }}</span>
|
|
|
+ <div style="display: flex;margin-right: 8%;color: #f9ff00;font-size: 16px">
|
|
|
+ <span v-if="station.type === '风'">主风向:</span>
|
|
|
+ <span v-else>天气:</span>{{ wdSum }}
|
|
|
+ </div>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
<div class="rightTopContent" v-for="item in dataInfo">
|
|
|
<div class="branckTitleBg">
|
|
|
-<!-- <span class="fjName">{{item.category}}<span class="number">{{item.fjNum}}</span>台</span>-->
|
|
|
- <span class="fjModel">{{item.modelType}}<span class="number" style="margin-left: 4%">{{item.modelTotal}}</span>台</span>
|
|
|
-
|
|
|
+ <span class="fjModel">{{ item.modelType }}
|
|
|
+ <span class="number" style="margin-left: 4%">{{ item.modelTotal }}</span>台</span>
|
|
|
</div>
|
|
|
- <div class="mainContent">
|
|
|
- <div class="contentBox" v-if="station.type === '风'">
|
|
|
- <span class="numberBox">{{ item.wsAve.replace(/\.?0+$/, "") }}</span>
|
|
|
- <span class="textBox">平均风速<span class="numberBox" style="font-size: 14px">(m/s)</span></span>
|
|
|
+ <div>
|
|
|
+ <div class="rightMain" v-if="station.type === '风'">
|
|
|
+ <div class="contentBox">
|
|
|
+ <span class="numberBox">{{ item.wsAve.replace(/\.?0+$/, "") }}</span>
|
|
|
+ <span class="textBox">平均风速<div class="numberBox" style="font-size: 14px">(m/s)</div></span>
|
|
|
+ </div>
|
|
|
+ <div class="tabelTextbg">
|
|
|
+ <div class="tabelText">
|
|
|
+ <div>最小风速:</div>
|
|
|
+ <span>{{ item.wsMin.replace(/\.?0+$/, "") }} (m/s)</span>
|
|
|
+ </div>
|
|
|
+ <div class="tabelText">
|
|
|
+ <div>最大风速:</div>
|
|
|
+ <span>{{ item.wsMax.replace(/\.?0+$/, "") }}(m/s)</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="rightMain" v-else>
|
|
|
+ <div class="contentBox">
|
|
|
+ <span class="numberBox">{{ item.wsAve.replace(/\.?0+$/, "") }}</span>
|
|
|
+ <span class="textBox">平均日照<div class="numberBox" style="font-size: 14px">(W/m²)</div></span>
|
|
|
+ </div>
|
|
|
+ <div class="tabelTextbg">
|
|
|
+ <div class="tabelText">
|
|
|
+ <div>最小日照:</div>
|
|
|
+ <span>{{ item.wsMin.replace(/\.?0+$/, "") }} (W/m²)</span>
|
|
|
+ </div>
|
|
|
+ <div class="tabelText">
|
|
|
+ <div>最大日照:</div>
|
|
|
+ <span>{{ item.wsMax.replace(/\.?0+$/, "") }}(W/m²)</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 100%;display: flex;justify-content: center">
|
|
|
+ <dv-decoration-10 style="width:80%;height:5px;" />
|
|
|
</div>
|
|
|
- <div class="contentBox">
|
|
|
- <span class="numberBox">{{item.generatingCapacity.replace(/\.?0+$/, "")}}</span>
|
|
|
- <span class="textBox">发电量<span class="numberBox" style="font-size: 14px">(MWh)</span></span>
|
|
|
|
|
|
+ <div class="rightMain">
|
|
|
+ <div class="contentBox">
|
|
|
+ <span class="numberBox">{{ item.generatingCapacityr.replace(/\.?0+$/, "") }}</span>
|
|
|
+ <span class="textBox">发电量<div class="numberBox" style="font-size: 14px">(MWh)</div></span>
|
|
|
+ </div>
|
|
|
+ <div class="tabelTextbg">
|
|
|
+ <div class="tabelText">
|
|
|
+ <div>月发电量:</div>
|
|
|
+ <span>{{ item.generatingCapacityy.replace(/\.?0+$/, "") }} (MWh)</span>
|
|
|
+ </div>
|
|
|
+ <div class="tabelText">
|
|
|
+ <div>年发电量:</div>
|
|
|
+ <span>{{ item.generatingCapacity.replace(/\.?0+$/, "") }}(MWh)</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="contentBox" v-if="station.type === '风'">
|
|
|
- <span class="numberBox">{{ item.wdSum }}</span>
|
|
|
- <span class="textBox">主风向</span>
|
|
|
+ <div style="width: 100%;display: flex;justify-content: center">
|
|
|
+ <dv-decoration-10 style="width:80%;height:5px;" />
|
|
|
</div>
|
|
|
- <div class="contentBox">
|
|
|
- <span class="numberBox">{{ item.realTimeTotal.replace(/\.?0+$/, "") }}</span>
|
|
|
- <span class="textBox">等效小时数<span class="numberBox" style="font-size: 14px">(h)</span></span>
|
|
|
+ <div class="rightMain">
|
|
|
+ <div class="contentBox">
|
|
|
+ <span class="numberBox">{{ item.realTimeTotalr.replace(/\.?0+$/, "") }}</span>
|
|
|
+ <span class="textBox">满发小时数<div class="numberBox" style="font-size: 14px">(h)</div></span>
|
|
|
+ </div>
|
|
|
+ <div class="tabelTextbg">
|
|
|
+ <div class="tabelText">
|
|
|
+ <div>月累计:</div>
|
|
|
+ <span>{{ item.realTimeTotaly.replace(/\.?0+$/, "") }} (h)</span>
|
|
|
+ </div>
|
|
|
+ <div class="tabelText">
|
|
|
+ <div>年累计:</div>
|
|
|
+ <span>{{ item.realTimeTotal.replace(/\.?0+$/, "") }}(h)</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- -->
|
|
|
+<!-- <div class="mainContent" v-if="station.type === '风'">-->
|
|
|
+<!-- <div class="contentBox">-->
|
|
|
+<!-- <span class="numberBox">{{ item.wsAve.replace(/\.?0+$/, "") }}</span>-->
|
|
|
+<!-- <span class="textBox">平均风速<div class="numberBox" style="font-size: 14px">(m/s)</div></span>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <div class="contentBox">-->
|
|
|
+<!-- <span class="numberBox">{{ item.wsMax.replace(/\.?0+$/, "") }}</span>-->
|
|
|
+<!-- <span class="textBox">最大风速<div class="numberBox" style="font-size: 14px">(m/s)</div></span>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <div class="contentBox">-->
|
|
|
+<!-- <span class="numberBox">{{ item.wsMin }}</span>-->
|
|
|
+<!-- <span class="textBox">最小风速<div class="numberBox" style="font-size: 14px">(m/s)</div></span>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <div class="mainContent" v-else>-->
|
|
|
+<!-- <div class="contentBox">-->
|
|
|
+<!-- <span class="numberBox">{{ item.wsAve.replace(/\.?0+$/, "") }}</span>-->
|
|
|
+<!-- <span class="textBox">平均日照<div class="numberBox" style="font-size: 14px">(W/m²)</div></span>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <div class="contentBox">-->
|
|
|
+<!-- <span class="numberBox">{{ item.wsMax.replace(/\.?0+$/, "") }}</span>-->
|
|
|
+<!-- <span class="textBox">最大日照<div class="numberBox" style="font-size: 14px">(W/m²)</div></span>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <div class="contentBox">-->
|
|
|
+<!-- <span class="numberBox">{{ item.wsMin }}</span>-->
|
|
|
+<!-- <span class="textBox">最小日照<div class="numberBox" style="font-size: 14px">(W/m²)</div></span>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <div style="display: flex;flex-wrap: wrap;justify-content: space-around;">-->
|
|
|
+<!-- <div class="tabelTextbg">-->
|
|
|
+<!-- <div style="width: 100%;text-align: center;margin-bottom: 1%">发电量 (MWh)</div>-->
|
|
|
+<!-- <div class="split-line"></div>-->
|
|
|
+<!-- <!– <el-divider></el-divider>–>-->
|
|
|
+<!-- <div class="tabelText" style="padding-top: 2%;">-->
|
|
|
+<!-- <div>日累计:</div>-->
|
|
|
+<!-- <div>{{ item.generatingCapacityr.replace(/\.?0+$/, "") }}</div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <div class="tabelText">-->
|
|
|
+<!-- <div>月累计:</div>-->
|
|
|
+<!-- <div>{{ item.generatingCapacityy.replace(/\.?0+$/, "") }}</div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <div class="tabelText">-->
|
|
|
+<!-- <div>年累计:</div>-->
|
|
|
+<!-- <div>{{ item.generatingCapacity.replace(/\.?0+$/, "") }}</div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <div class="tabelTextbg">-->
|
|
|
+<!-- <div style="width: 100%;text-align: center;margin-bottom: 1%">等效小时数 (h)</div>-->
|
|
|
+<!-- <div class="split-line"></div>-->
|
|
|
+<!-- <!– <el-divider></el-divider>–>-->
|
|
|
+<!-- <div class="tabelText" style="padding-top: 2%;">-->
|
|
|
+<!-- <div>日累计:</div>-->
|
|
|
+<!-- <div>{{ item.realTimeTotalr.replace(/\.?0+$/, "") }}</div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <div class="tabelText">-->
|
|
|
+<!-- <div>月累计:</div>-->
|
|
|
+<!-- <div>{{ item.realTimeTotaly.replace(/\.?0+$/, "") }}</div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <div class="tabelText">-->
|
|
|
+<!-- <div>年累计:</div>-->
|
|
|
+<!-- <div>{{ item.realTimeTotal.replace(/\.?0+$/, "") }}</div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
</div>
|
|
|
+
|
|
|
+
|
|
|
</div>
|
|
|
+
|
|
|
</div>
|
|
|
|
|
|
<div class="mapBtuBg">
|
|
|
<div id="mapBtuOne" class="mapBtu mapBtuBefore" @click="clickBtu('mapBtuOne')">
|
|
|
<span class="mapBtuText">地形图</span>
|
|
|
</div>
|
|
|
-<!-- <div id="mapBtuTwo" class="mapBtu mapBtuAfter" @click="clickBtu('mapBtuTwo')">-->
|
|
|
-<!-- <span class="mapBtuText">风场气象图</span>-->
|
|
|
-<!-- </div>-->
|
|
|
+ <!-- <div id="mapBtuTwo" class="mapBtu mapBtuAfter" @click="clickBtu('mapBtuTwo')">-->
|
|
|
+ <!-- <span class="mapBtuText">风场气象图</span>-->
|
|
|
+ <!-- </div>-->
|
|
|
<div id="mapBtuThree" class="mapBtu mapBtuAfter" @click="clickBtu('mapBtuThree')">
|
|
|
<span class="mapBtuText">风资源分布图</span>
|
|
|
</div>
|
|
|
-<!-- <div id="mapBtuFour" class="mapBtu mapBtuAfter" @click="clickBtu('mapBtuFour')">-->
|
|
|
-<!-- <span class="mapBtuText">光辐射气象图</span>-->
|
|
|
-<!-- </div>-->
|
|
|
+ <!-- <div id="mapBtuFour" class="mapBtu mapBtuAfter" @click="clickBtu('mapBtuFour')">-->
|
|
|
+ <!-- <span class="mapBtuText">光辐射气象图</span>-->
|
|
|
+ <!-- </div>-->
|
|
|
<div id="mapBtuFive" class="mapBtu mapBtuAfter" @click="clickBtu('mapBtuFive')">
|
|
|
<span class="mapBtuText">光资源分布图</span>
|
|
|
</div>
|
|
@@ -110,19 +241,19 @@ import bigeMap3D from "@/views/largeScreenPage/components/3DbigeMap";
|
|
|
export default {
|
|
|
name: "stationInfo",
|
|
|
components: {
|
|
|
- bigeMap, bigeHeatMap,bigeHeatSunMap,zaiXianBigeMap, bigeMap3D
|
|
|
+ bigeMap, bigeHeatMap, bigeHeatSunMap, zaiXianBigeMap, bigeMap3D
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
timer: null,
|
|
|
time: '',
|
|
|
- station: {},
|
|
|
- dataInfo:[
|
|
|
+ station: {stationName: "XXX风电场", type: "风"},
|
|
|
+ dataInfo: [
|
|
|
// {category:'一期',fjNum:'20',model:'恩德1.3MW机型',avgWs:'4.5',power:'39650',wd:'西南',hour:'1525'},
|
|
|
// {category:'二期',fjNum:'30',model:'华锐1.5MW机型',avgWs:'4.7',power:'73125',wd:'西',hour:'1625'},
|
|
|
],
|
|
|
- modelT:[],
|
|
|
- coordinates:[],
|
|
|
+ modelT: [],
|
|
|
+ coordinates: [],
|
|
|
mapMark: 'mapBtuOne',
|
|
|
//地图传值
|
|
|
mapValue: {
|
|
@@ -130,10 +261,11 @@ export default {
|
|
|
center: [],//中心坐标
|
|
|
allStationInfo: null,//场站坐标
|
|
|
projectInfo: null,//项目坐标
|
|
|
- allPointInfo:null,//所有点位信息
|
|
|
+ allPointInfo: null,//所有点位信息
|
|
|
},
|
|
|
- allPointInfo:[],
|
|
|
- dialogVisible:false
|
|
|
+ allPointInfo: [],
|
|
|
+ dialogVisible: false,
|
|
|
+ wdSum: ''
|
|
|
}
|
|
|
},
|
|
|
destroyed() {
|
|
@@ -149,56 +281,63 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
/*所有风机、塔、拐点坐标信息*/
|
|
|
- getPointMap(){
|
|
|
- if(this.$store.getters.allPointInfo.length>0){
|
|
|
+ getPointMap() {
|
|
|
+ if (this.$store.getters.allPointInfo.length > 0) {
|
|
|
this.allPointInfo = JSON.parse(this.$store.getters.allPointInfo).info
|
|
|
this.getInfo()
|
|
|
- }else {
|
|
|
- getPointMap().then(res=>{
|
|
|
+ } else {
|
|
|
+ getPointMap().then(res => {
|
|
|
// console.log(res.data)
|
|
|
this.allPointInfo = res.data
|
|
|
this.getInfo()
|
|
|
- sessionStorage.setItem("allPointInfo", JSON.stringify({info:this.allPointInfo}))
|
|
|
- this.$store.dispatch('equipmentInfo/allPointInfo', JSON.stringify({info:this.allPointInfo}))
|
|
|
- }).catch(err=>{
|
|
|
- console.log('所有点位坐标:'+err)
|
|
|
+ sessionStorage.setItem("allPointInfo", JSON.stringify({info: this.allPointInfo}))
|
|
|
+ this.$store.dispatch('equipmentInfo/allPointInfo', JSON.stringify({info: this.allPointInfo}))
|
|
|
+ }).catch(err => {
|
|
|
+ console.log('所有点位坐标:' + err)
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
- getInfo(){
|
|
|
- stationInfo({stationId:this.station.id}).then(res=>{
|
|
|
- // console.log(res.data)
|
|
|
+ getInfo() {
|
|
|
+ stationInfo({stationId: this.station.id}).then(res => {
|
|
|
+ console.log(res.data)
|
|
|
let data = res.data
|
|
|
this.dataInfo = data.modelT
|
|
|
- if(data.latitude === undefined ){
|
|
|
+ if (this.dataInfo) {
|
|
|
+ if (this.dataInfo[0] === undefined) {
|
|
|
+ this.wdSum = ''
|
|
|
+ } else {
|
|
|
+ this.wdSum = this.dataInfo[0].wdSum
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (data.latitude === undefined) {
|
|
|
this.coordinates = []
|
|
|
- }else{
|
|
|
- this.coordinates = [Number(data.latitude),Number(data.longitude)]
|
|
|
+ } else {
|
|
|
+ this.coordinates = [Number(data.latitude), Number(data.longitude)]
|
|
|
}
|
|
|
|
|
|
- this.mapValue ={
|
|
|
+ this.mapValue = {
|
|
|
params: new Date(),
|
|
|
level: 12,//地图层级
|
|
|
center: this.coordinates,//中心坐标
|
|
|
allStationInfo: null,//场站坐标
|
|
|
projectInfo: null,//项目坐标
|
|
|
- id:this.station.id,
|
|
|
- allPointInfo:this.allPointInfo,//所有点位信息
|
|
|
+ id: this.station.id,
|
|
|
+ allPointInfo: this.allPointInfo,//所有点位信息
|
|
|
}
|
|
|
- }).catch(err=>{
|
|
|
- this.mapValue ={
|
|
|
+ }).catch(err => {
|
|
|
+ this.mapValue = {
|
|
|
params: new Date(),
|
|
|
level: 6,//地图层级
|
|
|
center: [],//中心坐标
|
|
|
allStationInfo: null,//场站坐标
|
|
|
projectInfo: null,//项目坐标
|
|
|
- id:this.station.id,
|
|
|
- allPointInfo:null,//所有点位信息
|
|
|
+ id: this.station.id,
|
|
|
+ allPointInfo: null,//所有点位信息
|
|
|
}
|
|
|
- if(err.msg === 'Index: 0, Size: 0'){
|
|
|
+ if (err.msg === 'Index: 0, Size: 0') {
|
|
|
console.log('此场站没有风机与测风塔')
|
|
|
- }else{
|
|
|
- console.log('场站信息获取异常:'+err.msg)
|
|
|
+ } else {
|
|
|
+ console.log('场站信息获取异常:', err)
|
|
|
}
|
|
|
|
|
|
})
|
|
@@ -207,12 +346,12 @@ export default {
|
|
|
this.$router.push({path: "/dataQuery/windTowerStatusInfo"})
|
|
|
},
|
|
|
pushInfo() {
|
|
|
- let station = {stationId:this.station.id,equipmentNo:null}
|
|
|
- if(this.station.type === '风'){
|
|
|
+ let station = {stationId: this.station.id, equipmentNo: null}
|
|
|
+ if (this.station.type === '风') {
|
|
|
sessionStorage.setItem("realWindTowerInfo", JSON.stringify(station))
|
|
|
this.$store.dispatch('equipmentInfo/realWindTowerInfo', JSON.stringify(station))
|
|
|
this.$router.push({path: "/homepage/realResourcesInfo"})
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
sessionStorage.setItem("realPvWindTowerInfo", JSON.stringify(station))
|
|
|
this.$store.dispatch('equipmentInfo/realPvWindTowerInfo', JSON.stringify(station))
|
|
|
this.$router.push({path: "/homepage/realPvResourcesInfo"})
|
|
@@ -225,50 +364,50 @@ export default {
|
|
|
pushStationResource() {
|
|
|
this.$router.push({path: "/homepage/stationResources"})
|
|
|
},
|
|
|
- pushZaiXian(){
|
|
|
- if(this.mapMark === 'mapBtuOne'){
|
|
|
+ pushZaiXian() {
|
|
|
+ if (this.mapMark === 'mapBtuOne') {
|
|
|
let center = this.$refs.childMethod.center
|
|
|
let level = this.$refs.childMethod.level
|
|
|
- this.mapValue ={
|
|
|
+ this.mapValue = {
|
|
|
params: new Date(),
|
|
|
- level: level === ''?null:level,//地图层级
|
|
|
- center: center.length === 0?[]:[center.lat,center.lng],//中心坐标
|
|
|
+ level: level === '' ? null : level,//地图层级
|
|
|
+ center: center.length === 0 ? [] : [center.lat, center.lng],//中心坐标
|
|
|
allStationInfo: null,//场站坐标
|
|
|
projectInfo: null,//项目坐标
|
|
|
- id:this.station.id,
|
|
|
- allPointInfo:this.allPointInfo,//所有点位信息
|
|
|
+ id: this.station.id,
|
|
|
+ allPointInfo: this.allPointInfo,//所有点位信息
|
|
|
}
|
|
|
this.mapMark = 'mapBtu'
|
|
|
}
|
|
|
},
|
|
|
- dialog3DMap(){
|
|
|
+ dialog3DMap() {
|
|
|
let center = this.$refs.childMethod.center
|
|
|
let level = this.$refs.childMethod.level
|
|
|
- this.mapValue ={
|
|
|
+ this.mapValue = {
|
|
|
params: new Date(),
|
|
|
- level: level === ''?null:level,//地图层级
|
|
|
- center: center.length === 0?[]:[center.lat,center.lng],//中心坐标
|
|
|
+ level: level === '' ? null : level,//地图层级
|
|
|
+ center: center.length === 0 ? [] : [center.lat, center.lng],//中心坐标
|
|
|
allStationInfo: null,//场站坐标
|
|
|
projectInfo: null,//项目坐标
|
|
|
- id:this.station.id,
|
|
|
- allPointInfo:this.allPointInfo,//所有点位信息
|
|
|
+ id: this.station.id,
|
|
|
+ allPointInfo: this.allPointInfo,//所有点位信息
|
|
|
}
|
|
|
this.dialogVisible = true
|
|
|
},
|
|
|
- handleClose(){
|
|
|
+ handleClose() {
|
|
|
this.dialogVisible = false
|
|
|
},
|
|
|
clickBtu(id) {
|
|
|
let center = this.$refs.childMethod.center
|
|
|
let level = this.$refs.childMethod.level
|
|
|
- this.mapValue ={
|
|
|
+ this.mapValue = {
|
|
|
params: new Date(),
|
|
|
- level: level === ''?null:level,//地图层级
|
|
|
- center: center.length === 0?[]:[center.lat,center.lng],//中心坐标
|
|
|
+ level: level === '' ? null : level,//地图层级
|
|
|
+ center: center.length === 0 ? [] : [center.lat, center.lng],//中心坐标
|
|
|
allStationInfo: null,//场站坐标
|
|
|
projectInfo: null,//项目坐标
|
|
|
- id:this.station.id,
|
|
|
- allPointInfo:this.allPointInfo,//所有点位信息
|
|
|
+ id: this.station.id,
|
|
|
+ allPointInfo: this.allPointInfo,//所有点位信息
|
|
|
}
|
|
|
this.mapMark = id
|
|
|
let clickItem = document.getElementById(id)
|
|
@@ -385,9 +524,10 @@ export default {
|
|
|
}
|
|
|
|
|
|
.rightTextBg {
|
|
|
+ height: calc(90vh);
|
|
|
position: absolute;
|
|
|
right: 2%;
|
|
|
- top: 8%;
|
|
|
+ top: 5%;
|
|
|
width: 20%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
@@ -400,6 +540,21 @@ export default {
|
|
|
padding: 5%;
|
|
|
}
|
|
|
|
|
|
+.tabelTextbg {
|
|
|
+ width: 80%;
|
|
|
+ height: 80px;
|
|
|
+ background: url(../../../assets/largeScreenImg/resourcesInfo/heightBg.png) 100% no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding: 5%;
|
|
|
+}
|
|
|
+
|
|
|
+.tabelText {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
.mapBtuBg {
|
|
|
position: absolute;
|
|
|
right: 22%;
|
|
@@ -410,7 +565,7 @@ export default {
|
|
|
|
|
|
.rightTiltleTextBg {
|
|
|
height: 32px;
|
|
|
- background: url(../../../assets/largeScreenImg/index/rightTiltleTextBg.png) 100% no-repeat;
|
|
|
+ background: url(../../../assets/largeScreenImg/zaiyunAndqianqi/rightTitleBg.png) 100% no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
|
|
@@ -427,29 +582,39 @@ export default {
|
|
|
.rightTopContent {
|
|
|
margin-top: 4%;
|
|
|
}
|
|
|
-.branckTitleBg{
|
|
|
+
|
|
|
+.branckTitleBg {
|
|
|
background: url(../../../assets/largeScreenImg/zaiyunAndqianqi/branckTitleBg.png) 100% no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
height: 32px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
-.fjName{
|
|
|
- margin-left: 2%;
|
|
|
+
|
|
|
+.textBox {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center
|
|
|
}
|
|
|
-.fjModel{
|
|
|
+
|
|
|
+.fjModel {
|
|
|
width: 100%;
|
|
|
margin-left: 2%;
|
|
|
}
|
|
|
-.mainContent{
|
|
|
+
|
|
|
+.mainContent {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
+.rightMain{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
.contentBox {
|
|
|
- margin-top: 5%;
|
|
|
- width: 38%;
|
|
|
- height: 125px;
|
|
|
+ margin-top: 2%;
|
|
|
+ width: 40%;
|
|
|
+ height: 100px;
|
|
|
background: url(../../../assets/largeScreenImg/index/liubianxingBorder.png) 100% no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
display: flex;
|
|
@@ -457,7 +622,8 @@ export default {
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
}
|
|
|
-.number{
|
|
|
+
|
|
|
+.number {
|
|
|
font-weight: 700;
|
|
|
background-image: linear-gradient(
|
|
|
rgba(255, 255, 255, 1) 0,
|
|
@@ -468,6 +634,7 @@ export default {
|
|
|
background-clip: text;
|
|
|
color: transparent;
|
|
|
}
|
|
|
+
|
|
|
.numberBox {
|
|
|
font-size: 24px;
|
|
|
font-weight: 700;
|
|
@@ -516,21 +683,81 @@ export default {
|
|
|
right: 0;
|
|
|
bottom: 0;
|
|
|
}
|
|
|
-.kaiguanBox{
|
|
|
+
|
|
|
+.kaiguanBox {
|
|
|
cursor: pointer;
|
|
|
position: absolute;
|
|
|
left: 22%;
|
|
|
top: .5%;
|
|
|
}
|
|
|
-.map3D /deep/ .el-dialog__header, .map3D /deep/ .el-dialog__body {
|
|
|
+
|
|
|
+.map3D /deep/ .el-dialog__header, .map3D /deep/ .el-dialog__body {
|
|
|
padding: 0;
|
|
|
}
|
|
|
+
|
|
|
.map3D /deep/ .el-dialog__headerbtn {
|
|
|
z-index: 100;
|
|
|
top: 10px;
|
|
|
right: 10px;
|
|
|
}
|
|
|
+
|
|
|
.map3D /deep/ .el-dialog__headerbtn .el-dialog__close {
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
</style>
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+.split-line {
|
|
|
+ position: relative;
|
|
|
+ height: 2px; /* 分割线的高度 */
|
|
|
+ background-color: #f0f0f0; /* 分割线的背景色 */
|
|
|
+ overflow: hidden; /* 避免伪元素溢出容器 */
|
|
|
+ border-radius: 10%;
|
|
|
+}
|
|
|
+
|
|
|
+.split-line::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: linear-gradient(45deg, #5ffffa, #7bfafe, #5fcfff); /* 创建渐变效果 */
|
|
|
+ background-size: 300%; /* 渐变区域比容器大,以便创造重复的效果 */
|
|
|
+ animation: slide 5s linear infinite; /* 使用关键帧动画 */
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes slide {
|
|
|
+ 0% {
|
|
|
+ background-position: 0 0;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ background-position: 300% 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 设置滚动条样式 */
|
|
|
+/* 设置scrollbar-thumb之前要设置scrollbar的width和height */
|
|
|
+::-webkit-scrollbar-track {
|
|
|
+ border-radius: 0;
|
|
|
+ background-color: #f2f3f8;
|
|
|
+}
|
|
|
+
|
|
|
+::-webkit-scrollbar-thumb {
|
|
|
+ border-radius: 0;
|
|
|
+ border-radius: 5px;
|
|
|
+ background-image: -webkit-linear-gradient(0deg, rgba(202, 214, 220, 0.5) 0, #737179 100%);
|
|
|
+ -webkit-transition: all .2s;
|
|
|
+ transition: all .2s;
|
|
|
+}
|
|
|
+
|
|
|
+::-webkit-scrollbar-corner {
|
|
|
+ background-color: #f2f3f8;
|
|
|
+}
|
|
|
+
|
|
|
+::-webkit-scrollbar {
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|