Compare commits
2 Commits
e1ef061090
...
5300558cd2
| Author | SHA1 | Date |
|---|---|---|
 lixiaobang
|
5300558cd2 | |
|
lixiaobang
|
006ee502ff |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 427 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 580 B |
124
src/App.vue
124
src/App.vue
|
|
@ -2,14 +2,14 @@
|
|||
<div id="app">
|
||||
<div class="top">
|
||||
<div class="left">
|
||||
<div style="font-size:28px;color:#ffffff">2022-12-14 14:30:50 | 星期二</div>
|
||||
<div style="font-size:28px;color:#ffffff">{{time}} | {{week}}</div>
|
||||
</div>
|
||||
<div class="middle">
|
||||
<div class="leftBtn" @click="powerPdf"><div class="leftBtnText">电力行业发展</div></div>
|
||||
<div class="leftBtn" @click="powerPdf" :class="{'handleAction':handleAction=='电力行业发展'}"><div class="leftBtnText">电力行业发展</div></div>
|
||||
<div class="middleText"><img src="./assets/images/homeText.png"/></div>
|
||||
<div class="rightBtn" @click="energyPdf"><div class="rightBtnText">能源发展综述</div></div>
|
||||
<div class="rightBtn" @click="energyPdf" :class="{'handleAction1':handleAction1=='能源发展综述'}"><div class="rightBtnText">能源发展综述</div></div>
|
||||
</div>
|
||||
<div class="right"><img :src="weather" style="width:10%;height:50%"/>晴转多云 | -2-5℃ | 东风3级</div>
|
||||
<div class="right"><img :src="weather" style="width:10%;height:50%"/>{{weatherText}} | <span style="color:rgb(23,231,232)">{{lowTemperature}}-{{highTemperature}}℃</span> | {{wind}}</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<router-view />
|
||||
|
|
@ -60,13 +60,23 @@
|
|||
<script>
|
||||
import pdf from 'vue-pdf'
|
||||
import axios from "axios"
|
||||
import {getData} from './api/index.js'
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
time:'',
|
||||
handleAction:'',
|
||||
handleAction1:'',
|
||||
fileType:false, //pdf显示
|
||||
numPages: 1, //pdf页数
|
||||
filePdf:'', //pdf文件
|
||||
weather:require('./assets/weather/Cloudy .png')
|
||||
weather:require('./assets/weather/Cloudy .png'),
|
||||
weekList:['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
|
||||
week:'',
|
||||
highTemperature:'',
|
||||
lowTemperature:'',
|
||||
wind:'',
|
||||
weatherText:''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -78,27 +88,99 @@ import axios from "axios"
|
|||
// console.log(err);
|
||||
// })
|
||||
// })
|
||||
|
||||
let week = new Date(this.$moment().format("YYYY-MM-DD")).getDay()
|
||||
this.week = this.weekList[week]
|
||||
window.setInterval(()=>{
|
||||
this.time = this.$moment().format("YYYY-MM-DD hh:mm:ss")
|
||||
},1000)
|
||||
getData({
|
||||
action:'one',
|
||||
key:'天气情况'
|
||||
}).then((res)=>{
|
||||
let toDay = this.$moment().format("DD")
|
||||
for (let i = 0; i < res.data.data.length; i++) {
|
||||
if (toDay == res.data.data[i].第N天) {
|
||||
this.highTemperature = res.data.data[i].最高温度;
|
||||
this.lowTemperature = res.data.data[i].最低温度;
|
||||
this.wind = res.data.data[i].风向;
|
||||
this.weatherText = res.data.data[i].天气;
|
||||
switch (this.weatherText) {
|
||||
case "多云":
|
||||
return this.weather = require('./assets/weather/Cloudy .png');
|
||||
case "阴":
|
||||
return this.weather = require('./assets/weather/Cloudy .png')
|
||||
case "暴雨":
|
||||
return this.weather = require('./assets/weather/rainstorm.png')
|
||||
case "冰雹":
|
||||
return this.weather = require('./assets/weather/hail.png')
|
||||
case "大风":
|
||||
return this.weather = require('./assets/weather/gale.png')
|
||||
case "大雪":
|
||||
return this.weather = require('./assets/weather/bigsnow.png')
|
||||
case "大雨":
|
||||
return this.weather = require('./assets/weather/bigrain.png')
|
||||
case "雷电":
|
||||
return this.weather = require('./assets/weather/thunder.png')
|
||||
case "雷阵雨":
|
||||
return this.weather = require('./assets/weather/shower.png')
|
||||
case "沙尘暴":
|
||||
return this.weather = require('./assets/weather/sand.png')
|
||||
case "晴":
|
||||
return this.weather = require('./assets/weather/sun.png')
|
||||
case "雾霾":
|
||||
return this.weather = require('./assets/weather/smog.png')
|
||||
case "小雪":
|
||||
return this.weather = require('./assets/weather/snow.png')
|
||||
case "小雨":
|
||||
return this.weather = require('./assets/weather/rain.png')
|
||||
case "雪":
|
||||
return this.weather = require('./assets/weather/rainlitter.png')
|
||||
case "多云":
|
||||
return this.weather = require('./assets/weather/night.png')
|
||||
case "雨夹雪":
|
||||
return this.weather = require('./assets/weather/rainsnow.png')
|
||||
case "月亮":
|
||||
return this.weather = require('./assets/weather/moon.png')
|
||||
case "中雪":
|
||||
return this.weather = require('./assets/weather/mieddlesnow.png')
|
||||
case "中雨":
|
||||
return this.weather = require('./assets/weather/middlerain.png')
|
||||
}
|
||||
}else{
|
||||
this.highTemperature = '0';
|
||||
this.lowTemperature = '0';
|
||||
this.wind = '东风0级';
|
||||
this.weatherText = '阴';
|
||||
this.weather = require('./assets/weather/Cloudy .png');
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
methods:{
|
||||
//关闭PDF文件
|
||||
handleClosePdf(){
|
||||
this.fileType = false
|
||||
this.filePdf = ''
|
||||
this.$nextTick(()=>{
|
||||
this.handleAction = ''
|
||||
this.handleAction1 = ''
|
||||
})
|
||||
},
|
||||
powerPdf(){
|
||||
this.filePdf = ''
|
||||
let fileUrl = "/pdf/power.pdf";
|
||||
this.numPages = 20
|
||||
this.filePdf = pdf.createLoadingTask(fileUrl)
|
||||
this.fileType = true
|
||||
|
||||
this.handleAction = '电力行业发展'
|
||||
},
|
||||
energyPdf(){
|
||||
this.filePdf = ''
|
||||
let fileUrl = "/pdf/energy.pdf";
|
||||
this.numPages = 27
|
||||
this.filePdf = pdf.createLoadingTask(fileUrl)
|
||||
this.numPages = 27
|
||||
this.fileType = true
|
||||
|
||||
this.handleAction1 = '能源发展综述'
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
@ -157,15 +239,25 @@ import axios from "axios"
|
|||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
color:rgb(15,251,251);
|
||||
color:#ffffff;
|
||||
.leftBtnText{
|
||||
height: 61%;
|
||||
// width: 56.62%;
|
||||
width: 62%;
|
||||
background: url("./assets/images/btnLeftPdf.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.handleAction{
|
||||
width:20%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
color:rgb(15,251,251);
|
||||
}
|
||||
.middleText{
|
||||
width:59%;
|
||||
height: 100%;
|
||||
|
|
@ -191,15 +283,25 @@ import axios from "axios"
|
|||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
color:rgb(15,251,251);
|
||||
color:#ffffff;
|
||||
.rightBtnText{
|
||||
height: 61%;
|
||||
// width: 56.62%;
|
||||
width: 62%;
|
||||
background: url("./assets/images/btnRightPdf.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.handleAction1{
|
||||
width:24%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
color:rgb(15,251,251);
|
||||
}
|
||||
}
|
||||
.right{
|
||||
width: 9%;
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
<div class="powerCount">
|
||||
<div class="powerImg"><img src="../assets/images/powerCount.png"/></div>
|
||||
<div class="powerNumber">
|
||||
<span style="color:yellow;font-size:30px;font-weight: 700;font-family: auto;">18132.6667MW</span>
|
||||
<span style="color:yellow;font-size:30px;font-weight: 700;font-family: auto;">{{capacity}}MW</span>
|
||||
<span style="color:#ffffff">盐城电力生产总装机量</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -219,27 +219,29 @@
|
|||
<el-table-column
|
||||
prop="shiqu"
|
||||
label="市区"
|
||||
width="70">
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="yunweizhan"
|
||||
label="运维站"
|
||||
width="90">
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="biandianzhan"
|
||||
label="变电站"
|
||||
width="70">
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="yisun"
|
||||
label="易损线路/开关"
|
||||
width="110">
|
||||
show-overflow-tooltip
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="guzhang"
|
||||
label="故障发生时间"
|
||||
width="110">
|
||||
show-overflow-tooltip
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
|
@ -280,6 +282,7 @@ import {getData} from '../api/index.js'
|
|||
export default {
|
||||
data(){
|
||||
return{
|
||||
capacity:0, //装机总量
|
||||
news:[
|
||||
{
|
||||
Journalism:''
|
||||
|
|
@ -419,129 +422,10 @@ export default {
|
|||
qiyeshuliang:'12'
|
||||
},
|
||||
],
|
||||
popTableData2:[
|
||||
{
|
||||
diqu:'亭湖区',
|
||||
dianzhanshu:'13',
|
||||
jizhongshi:'1',
|
||||
fenbushi:'12'
|
||||
},
|
||||
{
|
||||
diqu:'亭湖区',
|
||||
dianzhanshu:'13',
|
||||
jizhongshi:'1',
|
||||
fenbushi:'12'
|
||||
},
|
||||
{
|
||||
diqu:'亭湖区',
|
||||
dianzhanshu:'13',
|
||||
jizhongshi:'1',
|
||||
fenbushi:'12'
|
||||
},
|
||||
{
|
||||
diqu:'亭湖区',
|
||||
dianzhanshu:'13',
|
||||
jizhongshi:'1',
|
||||
fenbushi:'12'
|
||||
},
|
||||
{
|
||||
diqu:'亭湖区',
|
||||
dianzhanshu:'13',
|
||||
jizhongshi:'1',
|
||||
fenbushi:'12'
|
||||
},
|
||||
],
|
||||
popTableData3:[
|
||||
{
|
||||
feitongdiao:'集中式光伏',
|
||||
zuoshu:'13',
|
||||
taishu:'1',
|
||||
bingwang:'694.4890'
|
||||
},
|
||||
{
|
||||
feitongdiao:'集中式光伏',
|
||||
zuoshu:'13',
|
||||
taishu:'1',
|
||||
bingwang:'694.4890'
|
||||
},
|
||||
{
|
||||
feitongdiao:'集中式光伏',
|
||||
zuoshu:'13',
|
||||
taishu:'1',
|
||||
bingwang:'694.4890'
|
||||
},
|
||||
{
|
||||
feitongdiao:'集中式光伏',
|
||||
zuoshu:'13',
|
||||
taishu:'1',
|
||||
bingwang:'694.4890'
|
||||
},
|
||||
],
|
||||
popTableData4:[
|
||||
{
|
||||
diqu:'开发区',
|
||||
guangfuhezhun:'70.45000',
|
||||
guangfushiji:'69.70000'
|
||||
},
|
||||
{
|
||||
diqu:'开发区',
|
||||
guangfuhezhun:'70.45000',
|
||||
guangfushiji:'69.70000'
|
||||
},
|
||||
{
|
||||
diqu:'开发区',
|
||||
guangfuhezhun:'70.45000',
|
||||
guangfushiji:'69.70000'
|
||||
},
|
||||
{
|
||||
diqu:'开发区',
|
||||
guangfuhezhun:'70.45000',
|
||||
guangfushiji:'69.70000'
|
||||
},
|
||||
{
|
||||
diqu:'开发区',
|
||||
guangfuhezhun:'70.45000',
|
||||
guangfushiji:'69.70000'
|
||||
},
|
||||
{
|
||||
diqu:'开发区',
|
||||
guangfuhezhun:'70.45000',
|
||||
guangfushiji:'69.70000'
|
||||
},
|
||||
],
|
||||
popTableData2:[],
|
||||
popTableData3:[],
|
||||
popTableData4:[],
|
||||
popTableData5:[
|
||||
{
|
||||
fadianchang:'毛竹沙风电',
|
||||
zhuangji:'300',
|
||||
fengdian:'风电',
|
||||
zuigao:'500kv',
|
||||
date:'2021-11-26 00:00:00',
|
||||
status:'在运'
|
||||
},
|
||||
{
|
||||
fadianchang:'毛竹沙风电',
|
||||
zhuangji:'300',
|
||||
fengdian:'风电',
|
||||
zuigao:'500kv',
|
||||
date:'2021-11-26 00:00:00',
|
||||
status:'在建'
|
||||
},
|
||||
{
|
||||
fadianchang:'毛竹沙风电',
|
||||
zhuangji:'300',
|
||||
fengdian:'风电',
|
||||
zuigao:'500kv',
|
||||
date:'2021-11-26 00:00:00',
|
||||
status:'退运'
|
||||
},
|
||||
{
|
||||
fadianchang:'毛竹沙风电',
|
||||
zhuangji:'300',
|
||||
fengdian:'风电',
|
||||
zuigao:'500kv',
|
||||
date:'2021-11-26 00:00:00',
|
||||
status:'在运'
|
||||
},
|
||||
],
|
||||
popTableData6:[
|
||||
{
|
||||
|
|
@ -578,38 +462,6 @@ export default {
|
|||
},
|
||||
],
|
||||
popTableData7:[
|
||||
{
|
||||
fadianchang:'毛竹沙风电',
|
||||
zhuangji:'300',
|
||||
fengdian:'光热一体',
|
||||
zuigao:'500kv',
|
||||
date:'2021-11-26 00:00:00',
|
||||
status:'在运'
|
||||
},
|
||||
{
|
||||
fadianchang:'毛竹沙风电',
|
||||
zhuangji:'300',
|
||||
fengdian:'光热一体',
|
||||
zuigao:'500kv',
|
||||
date:'2021-11-26 00:00:00',
|
||||
status:'在建'
|
||||
},
|
||||
{
|
||||
fadianchang:'毛竹沙风电',
|
||||
zhuangji:'300',
|
||||
fengdian:'光热一体',
|
||||
zuigao:'500kv',
|
||||
date:'2021-11-26 00:00:00',
|
||||
status:'退运'
|
||||
},
|
||||
{
|
||||
fadianchang:'毛竹沙风电',
|
||||
zhuangji:'300',
|
||||
fengdian:'光热一体',
|
||||
zuigao:'500kv',
|
||||
date:'2021-11-26 00:00:00',
|
||||
status:'在运'
|
||||
},
|
||||
],
|
||||
popTableData8:[
|
||||
{
|
||||
|
|
@ -754,10 +606,6 @@ export default {
|
|||
}
|
||||
},
|
||||
mounted(){
|
||||
this.echartsTwo();
|
||||
this.echartsThree();
|
||||
this.echartsFour();
|
||||
this.echartsFive();
|
||||
this.echartsSix();
|
||||
this.echartsSeven();
|
||||
this.echartsMap();
|
||||
|
|
@ -794,37 +642,94 @@ export default {
|
|||
contaminatedData = res.data.data
|
||||
this.echartsOne(contaminatedData);
|
||||
})
|
||||
//查询当日上网电量
|
||||
getData(
|
||||
{
|
||||
action:'one',
|
||||
key:'当日上网电量'
|
||||
}
|
||||
).then((res)=>{
|
||||
let powerData = []
|
||||
powerData = res.data.data
|
||||
this.echartsFive(powerData);
|
||||
|
||||
})
|
||||
//查询盐城装机容量
|
||||
getData(
|
||||
{
|
||||
action:'one',
|
||||
key:'盐城装机容量'
|
||||
}
|
||||
).then((res)=>{
|
||||
let sumCapacity = [];
|
||||
let capacityData = res.data.data
|
||||
this.echartsTwo(capacityData);
|
||||
Object.keys(capacityData).map((item,index)=>{
|
||||
for (const key in capacityData[index]) {
|
||||
sumCapacity.push(Number(capacityData[index][key]))
|
||||
}
|
||||
})
|
||||
this.capacity = sumCapacity.reduce((x,y)=>x+y)
|
||||
})
|
||||
//查询非统调光伏电站座数
|
||||
getData(
|
||||
{
|
||||
action:'one',
|
||||
key:'非统调光伏电站座数'
|
||||
}
|
||||
).then((res)=>{
|
||||
this.popTableData2 = res.data.data
|
||||
let powerStation = res.data.data
|
||||
this.echartsThree(powerStation);
|
||||
})
|
||||
//查询非统调电厂并网容量
|
||||
getData(
|
||||
{
|
||||
action:'one',
|
||||
key:'非统调电厂并网容量'
|
||||
}
|
||||
).then((res)=>{
|
||||
this.popTableData3 = res.data.data
|
||||
this.echartsFour(this.popTableData3);
|
||||
})
|
||||
},
|
||||
methods:{
|
||||
cityChange(val){
|
||||
this.popTableShow = 0
|
||||
this.cityActive = val
|
||||
if (val == 0) {
|
||||
this.modelOthers = true
|
||||
this.componentShow = 'pop';
|
||||
this.popName = '风电';
|
||||
this.popTableShow = 5
|
||||
this.popName = '风电';
|
||||
}else if (val == 1) {
|
||||
this.modelOthers = true
|
||||
this.componentShow = 'pop';
|
||||
this.popName = '光伏';
|
||||
this.popTableShow = 5
|
||||
}else if (val == 2) {
|
||||
this.modelOthers = true
|
||||
this.componentShow = 'pop';
|
||||
this.popName = '光热一体';
|
||||
this.popTableShow = 5
|
||||
}else if (val == 3) {
|
||||
this.modelOthers = true
|
||||
this.componentShow = 'pop';
|
||||
this.popName = '火电';
|
||||
this.popTableShow = 5
|
||||
}else if (val == 4) {
|
||||
this.modelOthers = true
|
||||
this.componentShow = 'pop';
|
||||
this.popName = '水电';
|
||||
this.popTableShow = 5
|
||||
}
|
||||
getData(
|
||||
{
|
||||
action:'one',
|
||||
key:'装机容量'+this.popName
|
||||
}
|
||||
).then((res)=>{
|
||||
this.modelOthers = true
|
||||
this.componentShow = 'pop';
|
||||
this.popTableShow = 5
|
||||
if (this.popName == '风电') {
|
||||
this.popTableData5 = res.data.data
|
||||
}else if (this.popName == '光伏') {
|
||||
this.popTableData6 = res.data.data
|
||||
}else if (this.popName == '光热一体') {
|
||||
this.popTableData7 = res.data.data
|
||||
}else if (this.popName == '火电') {
|
||||
this.popTableData8 = res.data.data
|
||||
}else if (this.popName == '水电') {
|
||||
this.popTableData9 = res.data.data
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
typeChange(val){
|
||||
this.popTableShow = 0
|
||||
|
|
@ -855,7 +760,6 @@ export default {
|
|||
this.mapCityAction = val
|
||||
},
|
||||
echartsOne(contaminatedData){
|
||||
console.log(contaminatedData,'contaminatedData');
|
||||
let regionData = [
|
||||
{
|
||||
name:'',
|
||||
|
|
@ -863,9 +767,9 @@ export default {
|
|||
}
|
||||
]
|
||||
//求企业数量和
|
||||
let enterpriseNum = contaminatedData.reduce((sum,e)=> sum + Number(e.企业数量 || 0),0)
|
||||
// let enterpriseNum = contaminatedData.reduce((sum,e)=> sum + Number(e.企业数量 || 0),0)
|
||||
regionData = Object.keys(contaminatedData).map((item,index)=>{
|
||||
return {name:contaminatedData[index].区县,value: Number(contaminatedData[index].企业数量/enterpriseNum*100).toFixed(2)}
|
||||
return {name:contaminatedData[index].区县,value: contaminatedData[index].企业数量}
|
||||
})
|
||||
var myChart = this.$echarts.init(document.getElementById("echartsOne"));
|
||||
var option ={
|
||||
|
|
@ -902,11 +806,7 @@ export default {
|
|||
borderWidth: 1,
|
||||
padding:[5,10,10,5],
|
||||
// borderRadius: [0,0,14,0],
|
||||
formatter: function (param) {
|
||||
// return param.name + ': ' + (param.value - number) + ' ' + (((param.value - number) / sum) * 100)
|
||||
// .toFixed(2) + '%'
|
||||
return param.name + ':' + param.value + '%'
|
||||
},
|
||||
formatter: [ '{b}','{d}%'].join(':'),
|
||||
|
||||
},
|
||||
|
||||
|
|
@ -1107,7 +1007,18 @@ export default {
|
|||
};
|
||||
myChart.setOption(option);
|
||||
},
|
||||
echartsTwo(){
|
||||
echartsTwo(capacityData){
|
||||
let capacitySum = null
|
||||
let capacityList = []
|
||||
// for (let i = 0; i < capacityData.length; i++) {
|
||||
// capacitySum = Number(capacityData[i].风电) + Number(capacityData[i].光伏) + Number(capacityData[i].光热一体) +
|
||||
// Number(capacityData[i].火电) + Number(capacityData[i].水电)
|
||||
// }
|
||||
Object.keys(capacityData).map((item,index)=>{
|
||||
for (const key in capacityData[index]) {
|
||||
capacityList.push({name:key , value:capacityData[index][key]})
|
||||
}
|
||||
})
|
||||
var myChart = this.$echarts.init(document.getElementById("echartsTwo"));
|
||||
var option = {
|
||||
tooltip: {
|
||||
|
|
@ -1135,19 +1046,17 @@ export default {
|
|||
radius: [0, '70%'],
|
||||
color: ['#57d1fa','#b6b91d','#8bd2b2','#57d1fa','#ff9374'],
|
||||
roseType: 'area',
|
||||
data: [
|
||||
{value: 25, name: 'A类型'},
|
||||
{value: 30, name: 'B类型'},
|
||||
{value: 30, name: 'C类型'},
|
||||
{value: 25, name: 'D类型'},
|
||||
{value: 25, name: 'E类型'},
|
||||
]
|
||||
data: capacityList
|
||||
}
|
||||
]
|
||||
}
|
||||
myChart.setOption(option);
|
||||
},
|
||||
echartsThree(){
|
||||
echartsThree(powerStation){
|
||||
let powerStationList = [];
|
||||
powerStationList = Object.keys(powerStation).map((item,index)=>{
|
||||
return {name:powerStation[index].地区, value: powerStation[index].电站数}
|
||||
})
|
||||
var myChart = this.$echarts.init(document.getElementById("echartsThree"));
|
||||
var option ={
|
||||
tooltip: {
|
||||
|
|
@ -1155,7 +1064,7 @@ export default {
|
|||
},
|
||||
series: [
|
||||
{
|
||||
name: "企业污染",
|
||||
name: "非统调光伏电站座数分布",
|
||||
type: "pie",
|
||||
radius: ["20%", "63%"],
|
||||
center: ["50%", "50%"],
|
||||
|
|
@ -1183,11 +1092,7 @@ export default {
|
|||
borderWidth: 1,
|
||||
padding:[5,10,10,5],
|
||||
// borderRadius: [0,0,14,0],
|
||||
formatter: function (param) {
|
||||
// return param.name + ': ' + (param.value - number) + ' ' + (((param.value - number) / sum) * 100)
|
||||
// .toFixed(2) + '%'
|
||||
return param.name + ':' + param.value + '%'
|
||||
},
|
||||
formatter: [ '{b}','{d}%'].join(':'),
|
||||
|
||||
},
|
||||
|
||||
|
|
@ -1198,14 +1103,7 @@ export default {
|
|||
// shadowOffsetX: 5,
|
||||
// shadowOffsetY: 5
|
||||
// },
|
||||
data:[{name:'东台市',value:71.03},
|
||||
{name:'阜宁县',value:12.66},
|
||||
{name:'盐都区',value:6.04},
|
||||
{name:'响水县',value:8.04},
|
||||
{name:'建湖县',value:8.04},
|
||||
{name:'大丰区',value:18.04},
|
||||
{name:'射阳县',value:9.04},
|
||||
]
|
||||
data:powerStationList
|
||||
},
|
||||
{
|
||||
name: "ring5",
|
||||
|
|
@ -1395,7 +1293,13 @@ export default {
|
|||
};
|
||||
myChart.setOption(option);
|
||||
},
|
||||
echartsFour(){
|
||||
echartsFour(powerPlant){
|
||||
let powerPlantType = [];
|
||||
let powerPlantCount = [];
|
||||
for (let i = 0; i < powerPlant.length; i++) {
|
||||
powerPlantType.push(powerPlant[i].非统调电源类型)
|
||||
powerPlantCount.push(powerPlant[i].实际并网容量)
|
||||
}
|
||||
var myChart = this.$echarts.init(document.getElementById("echartsFour"));
|
||||
var option = {
|
||||
tooltip: {
|
||||
|
|
@ -1414,11 +1318,11 @@ export default {
|
|||
grid: {
|
||||
// top:'20%',
|
||||
// bottom: '10%',
|
||||
right: '10%',
|
||||
right: '8%',
|
||||
left: '10%',
|
||||
},
|
||||
xAxis: {
|
||||
data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00','06:00', '07:00', '08:00', '09:00', '10:00', '11:00'],
|
||||
data: powerPlantType,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#08c386'
|
||||
|
|
@ -1439,15 +1343,15 @@ export default {
|
|||
axisLabel: {
|
||||
show: true,
|
||||
interval:0,
|
||||
// rotate:20,
|
||||
rotate:20,
|
||||
margin: 14,
|
||||
fontSize: 14,
|
||||
fontSize: 12,
|
||||
color: 'rgb(78,227,207)',
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
name: '',
|
||||
name: '单位:MW',
|
||||
nameTextStyle: {
|
||||
fontSize: 11,
|
||||
color: '#08c386',
|
||||
|
|
@ -1520,7 +1424,7 @@ export default {
|
|||
backgroundColor: 'rgb(5,52,44)',
|
||||
formatter: '{c}',
|
||||
},
|
||||
data: [47, 46, 41, 46, 44, 90,47, 46, 41, 46, 44, 90],
|
||||
data: powerPlantCount,
|
||||
z: 10,
|
||||
zlevel: 0,
|
||||
},
|
||||
|
|
@ -1539,7 +1443,7 @@ export default {
|
|||
symbolSize: [22, 5],
|
||||
symbolPosition: 'start',
|
||||
symbolOffset: [1, 1],
|
||||
data: [47, 46, 41, 46, 44, 90,47, 46, 41, 46, 44, 90],
|
||||
data: powerPlantCount,
|
||||
width: 2,
|
||||
z: 0,
|
||||
zlevel: 1,
|
||||
|
|
@ -1567,7 +1471,13 @@ export default {
|
|||
};
|
||||
myChart.setOption(option)
|
||||
},
|
||||
echartsFive(){
|
||||
echartsFive(powerData){
|
||||
let powerX = []
|
||||
let powerY = []
|
||||
for (let i = 0; i < powerData.length; i++) {
|
||||
powerX.push(powerData[i].类型)
|
||||
powerY.push(powerData[i].电量)
|
||||
}
|
||||
var myChart = this.$echarts.init(document.getElementById("echartsFive"));
|
||||
var option = {
|
||||
tooltip: {
|
||||
|
|
@ -1590,7 +1500,7 @@ export default {
|
|||
left: '10%',
|
||||
},
|
||||
xAxis: {
|
||||
data: ['光伏发电','风力发电','余电上网光伏','电厂'],
|
||||
data: powerX,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#08c386'
|
||||
|
|
@ -1619,7 +1529,7 @@ export default {
|
|||
},
|
||||
yAxis: [
|
||||
{
|
||||
name: '',
|
||||
name: '单位/万kWh',
|
||||
nameTextStyle: {
|
||||
fontSize: 11,
|
||||
color: '#08c386',
|
||||
|
|
@ -1692,7 +1602,7 @@ export default {
|
|||
backgroundColor: 'rgb(5,52,44)',
|
||||
formatter: '{c}',
|
||||
},
|
||||
data: [47, 46, 41, 46,],
|
||||
data: powerY,
|
||||
z: 10,
|
||||
zlevel: 0,
|
||||
},
|
||||
|
|
@ -1711,7 +1621,7 @@ export default {
|
|||
symbolSize: [22, 2],
|
||||
symbolPosition: 'start',
|
||||
symbolOffset: [1, 25],
|
||||
data: [47, 46, 41, 46,],
|
||||
data: powerY,
|
||||
width: 1,
|
||||
z: 0,
|
||||
zlevel: 1,
|
||||
|
|
@ -1747,7 +1657,7 @@ export default {
|
|||
},
|
||||
series: [
|
||||
{
|
||||
name: "企业污染",
|
||||
name: "非统调光伏电站装机容量分布",
|
||||
type: "pie",
|
||||
radius: ["20%", "63%"],
|
||||
center: ["50%", "50%"],
|
||||
|
|
@ -2029,7 +1939,7 @@ export default {
|
|||
return `{${circle}|}\n{${color}|${params.name}\n${params.value}}`;
|
||||
},
|
||||
rich: {
|
||||
yellow: {
|
||||
purple: {
|
||||
color:'rgb(5,204,148)',
|
||||
fontSize: 18,
|
||||
},
|
||||
|
|
@ -2041,7 +1951,7 @@ export default {
|
|||
color:'rgb(30,140,189)',
|
||||
fontSize: 18,
|
||||
},
|
||||
purple: {
|
||||
yellow: {
|
||||
color: 'rgb(255,160,98)',
|
||||
fontSize: 18,
|
||||
},
|
||||
|
|
@ -2123,7 +2033,6 @@ export default {
|
|||
if (params.componentSubType == 'scatter') {
|
||||
return `<div class=chartLabel>
|
||||
<div class=title>${params.name}</div>
|
||||
<button id="btn-tooltip" onclick="handle('${params.name}')">查看更多</button>
|
||||
</div>`
|
||||
}
|
||||
|
||||
|
|
@ -2160,35 +2069,22 @@ export default {
|
|||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#009DA1", // 0% 处的颜色
|
||||
color: "rgb(11,224,181)", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#005B9E", // 50% 处的颜色
|
||||
color: "rgb(11,224,181)", // 50% 处的颜色
|
||||
},
|
||||
],
|
||||
global: true, // 缺省为 false
|
||||
},
|
||||
opacity: 0.5,
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: "#2a333d",
|
||||
},
|
||||
// emphasis: {
|
||||
// areaColor: "#2a333d",
|
||||
// },
|
||||
|
||||
},
|
||||
// regions: [
|
||||
// {
|
||||
// name: "南海诸岛",
|
||||
// itemStyle: {
|
||||
// areaColor: "rgba(0, 10, 52, 1)",
|
||||
// borderColor: "rgba(0, 10, 52, 1)",
|
||||
// },
|
||||
// emphasis: {
|
||||
// areaColor: "rgba(0, 10, 52, 1)",
|
||||
// borderColor: "rgba(0, 10, 52, 1)",
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
z: 2,
|
||||
},
|
||||
series: [
|
||||
|
|
@ -2207,7 +2103,106 @@ export default {
|
|||
show: true, // 是否显示标签。
|
||||
fontSize: '11',
|
||||
color: 'rgba(0,0,0,0.7)',
|
||||
|
||||
fontSize:15,
|
||||
// position: [10,20],
|
||||
color: '#fff',
|
||||
backgroundColor: 'rgb(5,52,44)',
|
||||
formatter: (params) => {
|
||||
let color = "blue";
|
||||
if (params.dataIndex === 0) {
|
||||
var res = "{binhai|}"
|
||||
return res;
|
||||
} else if (params.dataIndex === 1) {
|
||||
var res = "{dafeng|}"
|
||||
return res;
|
||||
} else if (params.dataIndex === 2) {
|
||||
var res = "{dongtai|}"
|
||||
return res;
|
||||
} else if (params.dataIndex === 3) {
|
||||
var res = "{funing|}"
|
||||
return res;
|
||||
}else if (params.dataIndex === 4) {
|
||||
var res = "{jianhu|}"
|
||||
return res;
|
||||
}else if (params.dataIndex === 5) {
|
||||
var res = "{sheyang|}"
|
||||
return res;
|
||||
}else if (params.dataIndex === 6) {
|
||||
var res = "{tinghu|}"
|
||||
return res;
|
||||
}else if (params.dataIndex === 7) {
|
||||
var res = "{xiangshui|}"
|
||||
return res;
|
||||
}else if (params.dataIndex === 8) {
|
||||
var res = "{yandu|}"
|
||||
return res;
|
||||
}
|
||||
},
|
||||
rich: {
|
||||
binhai: {
|
||||
height: 21,
|
||||
width: 64,
|
||||
backgroundColor: {
|
||||
image: '/mapIcon/binhai.png'
|
||||
},
|
||||
},
|
||||
dafeng: {
|
||||
height: 21,
|
||||
width: 52,
|
||||
backgroundColor: {
|
||||
image: '/mapIcon/dafeng.png'
|
||||
},
|
||||
},
|
||||
dongtai: {
|
||||
height: 21,
|
||||
width: 49,
|
||||
backgroundColor: {
|
||||
image: '/mapIcon/dongtai.png'
|
||||
},
|
||||
},
|
||||
funing: {
|
||||
height: 21,
|
||||
width: 52,
|
||||
backgroundColor: {
|
||||
image: '/mapIcon/funing.png'
|
||||
},
|
||||
},
|
||||
jianhu: {
|
||||
height: 21,
|
||||
width: 52,
|
||||
backgroundColor: {
|
||||
image: '/mapIcon/jianhu.png'
|
||||
},
|
||||
},
|
||||
sheyang: {
|
||||
height: 21,
|
||||
width: 52,
|
||||
backgroundColor: {
|
||||
image: '/mapIcon/sheyang.png'
|
||||
},
|
||||
},
|
||||
tinghu: {
|
||||
height: 21,
|
||||
width: 52,
|
||||
backgroundColor: {
|
||||
image: '/mapIcon/tinghu.png'
|
||||
},
|
||||
},
|
||||
xiangshui: {
|
||||
height: 21,
|
||||
width: 52,
|
||||
backgroundColor: {
|
||||
image: '/mapIcon/xiangshui.png'
|
||||
},
|
||||
},
|
||||
yandu: {
|
||||
height: 21,
|
||||
width: 52,
|
||||
backgroundColor: {
|
||||
image: '/mapIcon/yandu.png'
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
itemStyle: {
|
||||
|
|
@ -2283,7 +2278,7 @@ export default {
|
|||
{ name: '响水县', value: [120.339948,33.177641] },
|
||||
{ name: '盐都区', value: [120.439991,33.077621] },
|
||||
],
|
||||
symbol: "image:///mapIcon/地标.png",
|
||||
symbol: "image:///mapIcon/location.png",
|
||||
symbolSize:[16, 20],
|
||||
symbolKeepAspect:"true"
|
||||
// itemStyle: {
|
||||
|
|
@ -4221,10 +4216,16 @@ export default {
|
|||
this.popName = '非统调电厂';
|
||||
this.popTableShow = val
|
||||
}else if (val == 4) {
|
||||
this.modelOthers = true
|
||||
this.componentShow = 'pop';
|
||||
this.popName = '非统调光伏电站装机容量分布';
|
||||
this.popTableShow = val
|
||||
getData({
|
||||
action:'one',
|
||||
key:'非统调光伏电站装机容量'
|
||||
}).then((res)=>{
|
||||
this.modelOthers = true
|
||||
this.componentShow = 'pop';
|
||||
this.popName = '非统调光伏电站装机容量分布';
|
||||
this.popTableShow = val
|
||||
this.popTableData4 = res.data.data
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -4280,8 +4281,8 @@ export default {
|
|||
background: url("../assets/images/kuang.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #ffffff;
|
||||
text-indent : 40px;
|
||||
letter-spacing:7px;
|
||||
text-indent : 32px;
|
||||
letter-spacing:1px;
|
||||
text-align:left;
|
||||
line-height:25px;
|
||||
overflow: auto;
|
||||
|
|
@ -4404,9 +4405,10 @@ export default {
|
|||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -4674,6 +4676,7 @@ export default {
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
z-index: 100;
|
||||
.cityBtn{
|
||||
width: 100%;
|
||||
height: 9%;
|
||||
|
|
@ -5091,6 +5094,7 @@ export default {
|
|||
height: 10%;
|
||||
right: 4%;
|
||||
top: 4%;
|
||||
z-index: 100;
|
||||
.el-select{
|
||||
::v-deep .el-input--suffix .el-input__inner{
|
||||
background: url("../assets/images/selectKuang.png") no-repeat;
|
||||
|
|
@ -5137,7 +5141,7 @@ export default {
|
|||
}
|
||||
/deep/ .el-table__header {
|
||||
height: 48px;
|
||||
background: url("../assets/images/table.png") no-repeat !important;
|
||||
background: url("../assets/images/table.png") no-repeat ;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
/deep/ .el-table__header th {
|
||||
|
|
@ -5230,6 +5234,9 @@ export default {
|
|||
.el-select-dropdown__item{
|
||||
color: #ffffff !important;
|
||||
}
|
||||
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
|
||||
background-color: rgb(8,52,41) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -51,22 +51,22 @@
|
|||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="diqu"
|
||||
prop="地区"
|
||||
label="地区"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="dianzhanshu"
|
||||
prop="电站数"
|
||||
label="电站数"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="jizhongshi"
|
||||
prop="集中式"
|
||||
label="电站数(集中式)"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="fenbushi"
|
||||
prop="分布式"
|
||||
label="电站数(分布式)"
|
||||
>
|
||||
</el-table-column>
|
||||
|
|
@ -84,23 +84,23 @@
|
|||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="feitongdiao"
|
||||
prop="非统调电源类型"
|
||||
label="非统调电源类型"
|
||||
width="150"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="zuoshu"
|
||||
prop="座数"
|
||||
label="座数"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="taishu"
|
||||
prop="台数"
|
||||
label="台数"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="bingwang"
|
||||
prop="实际并网容量"
|
||||
label="实际并网容量(MW)"
|
||||
width="150"
|
||||
>
|
||||
|
|
@ -119,21 +119,18 @@
|
|||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="diqu"
|
||||
prop="地区"
|
||||
label="地区"
|
||||
width="100"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="guangfuhezhun"
|
||||
prop="光伏核准总装机容量"
|
||||
label="光伏核准总装机容量(MW)"
|
||||
width="200"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="guangfushiji"
|
||||
prop="光伏实际总装机容量"
|
||||
label="光伏实际总装机容量(MW)"
|
||||
width="200"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
|
@ -150,37 +147,38 @@
|
|||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="fadianchang"
|
||||
prop="发电厂名称"
|
||||
label="发电厂名称"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="zhuangji"
|
||||
prop="装机容量"
|
||||
label="装机容量(MW)"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="fengdian"
|
||||
prop="发电厂类型"
|
||||
label="发电厂类型"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="zuigao"
|
||||
prop="最高电压等级"
|
||||
label="最高电压等级"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="date"
|
||||
prop="投运日期"
|
||||
label="投运日期"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="运行状态"
|
||||
>
|
||||
<template slot-scope="scop">
|
||||
<span v-if="scop.row.status =='在运'">{{ scop.row.status}}</span>
|
||||
<span v-else-if="scop.row.status =='退运'" style="color:red">{{ scop.row.status}}</span>
|
||||
<span v-else-if="scop.row.status =='在建'" style="color:yellow">{{ scop.row.status}}</span>
|
||||
<span v-if="scop.row.运行状态 =='在运'">{{ scop.row.运行状态}}</span>
|
||||
<span v-else-if="scop.row.运行状态 =='退运'" style="color:red">{{ scop.row.运行状态}}</span>
|
||||
<span v-else-if="scop.row.运行状态 =='在建'" style="color:yellow">{{ scop.row.运行状态}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
|
@ -268,9 +266,8 @@ props: {
|
|||
}
|
||||
},
|
||||
mounted(){
|
||||
console.log(this.popTableData2,'popTableData');
|
||||
this.tableShow = this.popTableShow;
|
||||
if (this.popTableShow == 1) {
|
||||
if (this.popTableShow == 1) {
|
||||
this.popData = this.popTableData1;
|
||||
}else if (this.popTableShow == 2) {
|
||||
this.popData = this.popTableData2;
|
||||
|
|
@ -301,7 +298,15 @@ props: {
|
|||
this.popData = this.popTableData13;
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
watch: {
|
||||
// //监听内容
|
||||
// popData(newVal,oldVal) {
|
||||
// console.log(newVal,oldVal,"value发生了变化");
|
||||
// if (newVal != oldVal && newVal != '') {
|
||||
// this.popData = newVal
|
||||
// }
|
||||
// }
|
||||
},
|
||||
methods:{
|
||||
close(){
|
||||
|
|
@ -347,7 +352,7 @@ props: {
|
|||
}
|
||||
.secondContent{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: calc(100% - 8%);
|
||||
padding-top: 2%;
|
||||
box-sizing: border-box;
|
||||
/deep/ .el-table {
|
||||
|
|
@ -361,7 +366,7 @@ props: {
|
|||
}
|
||||
/deep/ .el-table__header {
|
||||
height: 48px;
|
||||
background: url("../assets/images/table.png") no-repeat !important;
|
||||
background: url("../assets/images/table.png") no-repeat ;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
/deep/ .el-table__header th {
|
||||
|
|
|
|||
Loading…
Reference in New Issue