Compare commits
No commits in common. "5300558cd2684fd8d76d63c1c933c0aa382c720b" and "e1ef061090c3e9dbdded5dee64e3bb059cc0b818" have entirely different histories.
5300558cd2
...
e1ef061090
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 427 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before 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">{{time}} | {{week}}</div>
|
||||
<div style="font-size:28px;color:#ffffff">2022-12-14 14:30:50 | 星期二</div>
|
||||
</div>
|
||||
<div class="middle">
|
||||
<div class="leftBtn" @click="powerPdf" :class="{'handleAction':handleAction=='电力行业发展'}"><div class="leftBtnText">电力行业发展</div></div>
|
||||
<div class="leftBtn" @click="powerPdf"><div class="leftBtnText">电力行业发展</div></div>
|
||||
<div class="middleText"><img src="./assets/images/homeText.png"/></div>
|
||||
<div class="rightBtn" @click="energyPdf" :class="{'handleAction1':handleAction1=='能源发展综述'}"><div class="rightBtnText">能源发展综述</div></div>
|
||||
<div class="rightBtn" @click="energyPdf"><div class="rightBtnText">能源发展综述</div></div>
|
||||
</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 class="right"><img :src="weather" style="width:10%;height:50%"/>晴转多云 | -2-5℃ | 东风3级</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<router-view />
|
||||
|
|
@ -60,23 +60,13 @@
|
|||
<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'),
|
||||
weekList:['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
|
||||
week:'',
|
||||
highTemperature:'',
|
||||
lowTemperature:'',
|
||||
wind:'',
|
||||
weatherText:''
|
||||
weather:require('./assets/weather/Cloudy .png')
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -88,99 +78,27 @@ import {getData} from './api/index.js'
|
|||
// 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.filePdf = pdf.createLoadingTask(fileUrl)
|
||||
this.numPages = 27
|
||||
this.filePdf = pdf.createLoadingTask(fileUrl)
|
||||
this.fileType = true
|
||||
this.handleAction1 = '能源发展综述'
|
||||
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
@ -239,25 +157,15 @@ import {getData} from './api/index.js'
|
|||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
color:#ffffff;
|
||||
color:rgb(15,251,251);
|
||||
.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%;
|
||||
|
|
@ -283,25 +191,15 @@ import {getData} from './api/index.js'
|
|||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
color:#ffffff;
|
||||
color:rgb(15,251,251);
|
||||
.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;">{{capacity}}MW</span>
|
||||
<span style="color:yellow;font-size:30px;font-weight: 700;font-family: auto;">18132.6667MW</span>
|
||||
<span style="color:#ffffff">盐城电力生产总装机量</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -219,29 +219,27 @@
|
|||
<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="易损线路/开关"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
width="110">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="guzhang"
|
||||
label="故障发生时间"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
width="110">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
|
@ -282,7 +280,6 @@ import {getData} from '../api/index.js'
|
|||
export default {
|
||||
data(){
|
||||
return{
|
||||
capacity:0, //装机总量
|
||||
news:[
|
||||
{
|
||||
Journalism:''
|
||||
|
|
@ -422,10 +419,129 @@ export default {
|
|||
qiyeshuliang:'12'
|
||||
},
|
||||
],
|
||||
popTableData2:[],
|
||||
popTableData3:[],
|
||||
popTableData4:[],
|
||||
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'
|
||||
},
|
||||
],
|
||||
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:[
|
||||
{
|
||||
|
|
@ -462,6 +578,38 @@ 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:[
|
||||
{
|
||||
|
|
@ -606,6 +754,10 @@ export default {
|
|||
}
|
||||
},
|
||||
mounted(){
|
||||
this.echartsTwo();
|
||||
this.echartsThree();
|
||||
this.echartsFour();
|
||||
this.echartsFive();
|
||||
this.echartsSix();
|
||||
this.echartsSeven();
|
||||
this.echartsMap();
|
||||
|
|
@ -642,94 +794,37 @@ 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.popName = '风电';
|
||||
this.modelOthers = true
|
||||
this.componentShow = 'pop';
|
||||
this.popName = '风电';
|
||||
this.popTableShow = 5
|
||||
}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
|
||||
|
|
@ -760,6 +855,7 @@ export default {
|
|||
this.mapCityAction = val
|
||||
},
|
||||
echartsOne(contaminatedData){
|
||||
console.log(contaminatedData,'contaminatedData');
|
||||
let regionData = [
|
||||
{
|
||||
name:'',
|
||||
|
|
@ -767,9 +863,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: contaminatedData[index].企业数量}
|
||||
return {name:contaminatedData[index].区县,value: Number(contaminatedData[index].企业数量/enterpriseNum*100).toFixed(2)}
|
||||
})
|
||||
var myChart = this.$echarts.init(document.getElementById("echartsOne"));
|
||||
var option ={
|
||||
|
|
@ -806,7 +902,11 @@ export default {
|
|||
borderWidth: 1,
|
||||
padding:[5,10,10,5],
|
||||
// borderRadius: [0,0,14,0],
|
||||
formatter: [ '{b}','{d}%'].join(':'),
|
||||
formatter: function (param) {
|
||||
// return param.name + ': ' + (param.value - number) + ' ' + (((param.value - number) / sum) * 100)
|
||||
// .toFixed(2) + '%'
|
||||
return param.name + ':' + param.value + '%'
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
|
@ -1007,18 +1107,7 @@ export default {
|
|||
};
|
||||
myChart.setOption(option);
|
||||
},
|
||||
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]})
|
||||
}
|
||||
})
|
||||
echartsTwo(){
|
||||
var myChart = this.$echarts.init(document.getElementById("echartsTwo"));
|
||||
var option = {
|
||||
tooltip: {
|
||||
|
|
@ -1046,17 +1135,19 @@ export default {
|
|||
radius: [0, '70%'],
|
||||
color: ['#57d1fa','#b6b91d','#8bd2b2','#57d1fa','#ff9374'],
|
||||
roseType: 'area',
|
||||
data: capacityList
|
||||
data: [
|
||||
{value: 25, name: 'A类型'},
|
||||
{value: 30, name: 'B类型'},
|
||||
{value: 30, name: 'C类型'},
|
||||
{value: 25, name: 'D类型'},
|
||||
{value: 25, name: 'E类型'},
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
myChart.setOption(option);
|
||||
},
|
||||
echartsThree(powerStation){
|
||||
let powerStationList = [];
|
||||
powerStationList = Object.keys(powerStation).map((item,index)=>{
|
||||
return {name:powerStation[index].地区, value: powerStation[index].电站数}
|
||||
})
|
||||
echartsThree(){
|
||||
var myChart = this.$echarts.init(document.getElementById("echartsThree"));
|
||||
var option ={
|
||||
tooltip: {
|
||||
|
|
@ -1064,7 +1155,7 @@ export default {
|
|||
},
|
||||
series: [
|
||||
{
|
||||
name: "非统调光伏电站座数分布",
|
||||
name: "企业污染",
|
||||
type: "pie",
|
||||
radius: ["20%", "63%"],
|
||||
center: ["50%", "50%"],
|
||||
|
|
@ -1092,7 +1183,11 @@ export default {
|
|||
borderWidth: 1,
|
||||
padding:[5,10,10,5],
|
||||
// borderRadius: [0,0,14,0],
|
||||
formatter: [ '{b}','{d}%'].join(':'),
|
||||
formatter: function (param) {
|
||||
// return param.name + ': ' + (param.value - number) + ' ' + (((param.value - number) / sum) * 100)
|
||||
// .toFixed(2) + '%'
|
||||
return param.name + ':' + param.value + '%'
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
|
|
@ -1103,7 +1198,14 @@ export default {
|
|||
// shadowOffsetX: 5,
|
||||
// shadowOffsetY: 5
|
||||
// },
|
||||
data:powerStationList
|
||||
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},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "ring5",
|
||||
|
|
@ -1293,13 +1395,7 @@ export default {
|
|||
};
|
||||
myChart.setOption(option);
|
||||
},
|
||||
echartsFour(powerPlant){
|
||||
let powerPlantType = [];
|
||||
let powerPlantCount = [];
|
||||
for (let i = 0; i < powerPlant.length; i++) {
|
||||
powerPlantType.push(powerPlant[i].非统调电源类型)
|
||||
powerPlantCount.push(powerPlant[i].实际并网容量)
|
||||
}
|
||||
echartsFour(){
|
||||
var myChart = this.$echarts.init(document.getElementById("echartsFour"));
|
||||
var option = {
|
||||
tooltip: {
|
||||
|
|
@ -1318,11 +1414,11 @@ export default {
|
|||
grid: {
|
||||
// top:'20%',
|
||||
// bottom: '10%',
|
||||
right: '8%',
|
||||
right: '10%',
|
||||
left: '10%',
|
||||
},
|
||||
xAxis: {
|
||||
data: powerPlantType,
|
||||
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'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#08c386'
|
||||
|
|
@ -1343,15 +1439,15 @@ export default {
|
|||
axisLabel: {
|
||||
show: true,
|
||||
interval:0,
|
||||
rotate:20,
|
||||
// rotate:20,
|
||||
margin: 14,
|
||||
fontSize: 12,
|
||||
fontSize: 14,
|
||||
color: 'rgb(78,227,207)',
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
name: '单位:MW',
|
||||
name: '',
|
||||
nameTextStyle: {
|
||||
fontSize: 11,
|
||||
color: '#08c386',
|
||||
|
|
@ -1424,7 +1520,7 @@ export default {
|
|||
backgroundColor: 'rgb(5,52,44)',
|
||||
formatter: '{c}',
|
||||
},
|
||||
data: powerPlantCount,
|
||||
data: [47, 46, 41, 46, 44, 90,47, 46, 41, 46, 44, 90],
|
||||
z: 10,
|
||||
zlevel: 0,
|
||||
},
|
||||
|
|
@ -1443,7 +1539,7 @@ export default {
|
|||
symbolSize: [22, 5],
|
||||
symbolPosition: 'start',
|
||||
symbolOffset: [1, 1],
|
||||
data: powerPlantCount,
|
||||
data: [47, 46, 41, 46, 44, 90,47, 46, 41, 46, 44, 90],
|
||||
width: 2,
|
||||
z: 0,
|
||||
zlevel: 1,
|
||||
|
|
@ -1471,13 +1567,7 @@ export default {
|
|||
};
|
||||
myChart.setOption(option)
|
||||
},
|
||||
echartsFive(powerData){
|
||||
let powerX = []
|
||||
let powerY = []
|
||||
for (let i = 0; i < powerData.length; i++) {
|
||||
powerX.push(powerData[i].类型)
|
||||
powerY.push(powerData[i].电量)
|
||||
}
|
||||
echartsFive(){
|
||||
var myChart = this.$echarts.init(document.getElementById("echartsFive"));
|
||||
var option = {
|
||||
tooltip: {
|
||||
|
|
@ -1500,7 +1590,7 @@ export default {
|
|||
left: '10%',
|
||||
},
|
||||
xAxis: {
|
||||
data: powerX,
|
||||
data: ['光伏发电','风力发电','余电上网光伏','电厂'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#08c386'
|
||||
|
|
@ -1529,7 +1619,7 @@ export default {
|
|||
},
|
||||
yAxis: [
|
||||
{
|
||||
name: '单位/万kWh',
|
||||
name: '',
|
||||
nameTextStyle: {
|
||||
fontSize: 11,
|
||||
color: '#08c386',
|
||||
|
|
@ -1602,7 +1692,7 @@ export default {
|
|||
backgroundColor: 'rgb(5,52,44)',
|
||||
formatter: '{c}',
|
||||
},
|
||||
data: powerY,
|
||||
data: [47, 46, 41, 46,],
|
||||
z: 10,
|
||||
zlevel: 0,
|
||||
},
|
||||
|
|
@ -1621,7 +1711,7 @@ export default {
|
|||
symbolSize: [22, 2],
|
||||
symbolPosition: 'start',
|
||||
symbolOffset: [1, 25],
|
||||
data: powerY,
|
||||
data: [47, 46, 41, 46,],
|
||||
width: 1,
|
||||
z: 0,
|
||||
zlevel: 1,
|
||||
|
|
@ -1657,7 +1747,7 @@ export default {
|
|||
},
|
||||
series: [
|
||||
{
|
||||
name: "非统调光伏电站装机容量分布",
|
||||
name: "企业污染",
|
||||
type: "pie",
|
||||
radius: ["20%", "63%"],
|
||||
center: ["50%", "50%"],
|
||||
|
|
@ -1939,7 +2029,7 @@ export default {
|
|||
return `{${circle}|}\n{${color}|${params.name}\n${params.value}}`;
|
||||
},
|
||||
rich: {
|
||||
purple: {
|
||||
yellow: {
|
||||
color:'rgb(5,204,148)',
|
||||
fontSize: 18,
|
||||
},
|
||||
|
|
@ -1951,7 +2041,7 @@ export default {
|
|||
color:'rgb(30,140,189)',
|
||||
fontSize: 18,
|
||||
},
|
||||
yellow: {
|
||||
purple: {
|
||||
color: 'rgb(255,160,98)',
|
||||
fontSize: 18,
|
||||
},
|
||||
|
|
@ -2033,6 +2123,7 @@ 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>`
|
||||
}
|
||||
|
||||
|
|
@ -2069,22 +2160,35 @@ export default {
|
|||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgb(11,224,181)", // 0% 处的颜色
|
||||
color: "#009DA1", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgb(11,224,181)", // 50% 处的颜色
|
||||
color: "#005B9E", // 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: [
|
||||
|
|
@ -2103,106 +2207,7 @@ 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: {
|
||||
|
|
@ -2278,7 +2283,7 @@ export default {
|
|||
{ name: '响水县', value: [120.339948,33.177641] },
|
||||
{ name: '盐都区', value: [120.439991,33.077621] },
|
||||
],
|
||||
symbol: "image:///mapIcon/location.png",
|
||||
symbol: "image:///mapIcon/地标.png",
|
||||
symbolSize:[16, 20],
|
||||
symbolKeepAspect:"true"
|
||||
// itemStyle: {
|
||||
|
|
@ -4216,16 +4221,10 @@ export default {
|
|||
this.popName = '非统调电厂';
|
||||
this.popTableShow = val
|
||||
}else if (val == 4) {
|
||||
getData({
|
||||
action:'one',
|
||||
key:'非统调光伏电站装机容量'
|
||||
}).then((res)=>{
|
||||
this.modelOthers = true
|
||||
this.componentShow = 'pop';
|
||||
this.popName = '非统调光伏电站装机容量分布';
|
||||
this.popTableShow = val
|
||||
this.popTableData4 = res.data.data
|
||||
})
|
||||
this.modelOthers = true
|
||||
this.componentShow = 'pop';
|
||||
this.popName = '非统调光伏电站装机容量分布';
|
||||
this.popTableShow = val
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -4281,8 +4280,8 @@ export default {
|
|||
background: url("../assets/images/kuang.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #ffffff;
|
||||
text-indent : 32px;
|
||||
letter-spacing:1px;
|
||||
text-indent : 40px;
|
||||
letter-spacing:7px;
|
||||
text-align:left;
|
||||
line-height:25px;
|
||||
overflow: auto;
|
||||
|
|
@ -4405,10 +4404,9 @@ export default {
|
|||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -4676,7 +4674,6 @@ export default {
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
z-index: 100;
|
||||
.cityBtn{
|
||||
width: 100%;
|
||||
height: 9%;
|
||||
|
|
@ -5094,7 +5091,6 @@ 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;
|
||||
|
|
@ -5141,7 +5137,7 @@ export default {
|
|||
}
|
||||
/deep/ .el-table__header {
|
||||
height: 48px;
|
||||
background: url("../assets/images/table.png") no-repeat ;
|
||||
background: url("../assets/images/table.png") no-repeat !important;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
/deep/ .el-table__header th {
|
||||
|
|
@ -5234,9 +5230,6 @@ 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="地区"
|
||||
prop="diqu"
|
||||
label="地区"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="电站数"
|
||||
prop="dianzhanshu"
|
||||
label="电站数"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="集中式"
|
||||
prop="jizhongshi"
|
||||
label="电站数(集中式)"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="分布式"
|
||||
prop="fenbushi"
|
||||
label="电站数(分布式)"
|
||||
>
|
||||
</el-table-column>
|
||||
|
|
@ -84,23 +84,23 @@
|
|||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="非统调电源类型"
|
||||
prop="feitongdiao"
|
||||
label="非统调电源类型"
|
||||
width="150"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="座数"
|
||||
prop="zuoshu"
|
||||
label="座数"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="台数"
|
||||
prop="taishu"
|
||||
label="台数"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="实际并网容量"
|
||||
prop="bingwang"
|
||||
label="实际并网容量(MW)"
|
||||
width="150"
|
||||
>
|
||||
|
|
@ -119,18 +119,21 @@
|
|||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="地区"
|
||||
prop="diqu"
|
||||
label="地区"
|
||||
width="100"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="光伏核准总装机容量"
|
||||
prop="guangfuhezhun"
|
||||
label="光伏核准总装机容量(MW)"
|
||||
width="200"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="光伏实际总装机容量"
|
||||
prop="guangfushiji"
|
||||
label="光伏实际总装机容量(MW)"
|
||||
width="200"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
|
@ -147,38 +150,37 @@
|
|||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="发电厂名称"
|
||||
prop="fadianchang"
|
||||
label="发电厂名称"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="装机容量"
|
||||
prop="zhuangji"
|
||||
label="装机容量(MW)"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="发电厂类型"
|
||||
prop="fengdian"
|
||||
label="发电厂类型"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="最高电压等级"
|
||||
prop="zuigao"
|
||||
label="最高电压等级"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="投运日期"
|
||||
prop="date"
|
||||
label="投运日期"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="运行状态"
|
||||
>
|
||||
<template slot-scope="scop">
|
||||
<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>
|
||||
<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>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
|
@ -266,8 +268,9 @@ 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;
|
||||
|
|
@ -298,15 +301,7 @@ props: {
|
|||
this.popData = this.popTableData13;
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// //监听内容
|
||||
// popData(newVal,oldVal) {
|
||||
// console.log(newVal,oldVal,"value发生了变化");
|
||||
// if (newVal != oldVal && newVal != '') {
|
||||
// this.popData = newVal
|
||||
// }
|
||||
// }
|
||||
|
||||
},
|
||||
methods:{
|
||||
close(){
|
||||
|
|
@ -352,7 +347,7 @@ props: {
|
|||
}
|
||||
.secondContent{
|
||||
width: 100%;
|
||||
height: calc(100% - 8%);
|
||||
height: 100%;
|
||||
padding-top: 2%;
|
||||
box-sizing: border-box;
|
||||
/deep/ .el-table {
|
||||
|
|
@ -366,7 +361,7 @@ props: {
|
|||
}
|
||||
/deep/ .el-table__header {
|
||||
height: 48px;
|
||||
background: url("../assets/images/table.png") no-repeat ;
|
||||
background: url("../assets/images/table.png") no-repeat !important;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
/deep/ .el-table__header th {
|
||||
|
|
|
|||
Loading…
Reference in New Issue