|
@@ -0,0 +1,362 @@
|
|
|
|
+<template>
|
|
|
|
+ <el-dialog width="80%" @opened="opened()" @closed="closed()" :show-close="false" class="my-info-dialog">
|
|
|
|
+ <template #title>
|
|
|
|
+ <div style="margin-top: -10px; color: #ffffff">光伏详情</div>
|
|
|
|
+ </template>
|
|
|
|
+ <div class="pvDetail">
|
|
|
|
+ <div class="pvLeftDetail">
|
|
|
|
+ <div class="commonSty titleFont">
|
|
|
|
+ <span>光伏板号:</span>
|
|
|
|
+ <span style="width: 38%;color: #c3c3c3">{{windturbine.id}}</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="commonSty titleFont">
|
|
|
|
+ <span>逆变器状态</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div v-for="(item, index) in nbqData" :key="index" class="commonSty arrSty">
|
|
|
|
+ <div class="arrName">
|
|
|
|
+ <span>{{item.name}}</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="arrMsg">
|
|
|
|
+ <span style="padding-right: 20px">{{item.value}}</span>
|
|
|
|
+ <span style="width: 20%;color: #c3c3c3">{{item.tes}}</span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="pvRightDetail">
|
|
|
|
+ <div class="pvRightDetail_top">
|
|
|
|
+ <div class="pvRightTopTitle">
|
|
|
|
+ <span>光伏板</span>
|
|
|
|
+ <span>汇流箱</span>
|
|
|
|
+ <span>逆变器</span>
|
|
|
|
+ <span>电网</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="pvRightBotImg">
|
|
|
|
+ <div class="img1">
|
|
|
|
+ <img src="../assets/img/PV/pv_pic.png" alt="">
|
|
|
|
+ </div>
|
|
|
|
+ <div class="imgCom">
|
|
|
|
+ <img src="../assets/img/PV/pv_arrow_pic.png" alt="">
|
|
|
|
+ </div>
|
|
|
|
+ <div class="img2">
|
|
|
|
+ <img src="../assets/img/PV/pv_box_pic.png" alt="">
|
|
|
|
+ </div>
|
|
|
|
+ <div class="imgCom">
|
|
|
|
+ <img src="../assets/img/PV/pv_arrow_pic.png" alt="">
|
|
|
|
+ </div>
|
|
|
|
+ <div class="img3">
|
|
|
|
+ <img src="../assets/img/PV/pv_nb_pic.png" alt="">
|
|
|
|
+ </div>
|
|
|
|
+ <div class="imgCom">
|
|
|
|
+ <img src="../assets/img/PV/pv_arrow_pic.png" alt="">
|
|
|
|
+ </div>
|
|
|
|
+ <div>
|
|
|
|
+ <img src="../assets/img/PV/pv_elec_pic.png" alt="">
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="pvRightDetail_bot">
|
|
|
|
+ <div class="pvRightBotTitle">
|
|
|
|
+ <span>功率曲线</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="pvRightBotEchart" id="pvEchart"></div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </el-dialog>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import api from "api/index";
|
|
|
|
+import * as echarts from "echarts";
|
|
|
|
+export default {
|
|
|
|
+ props: {
|
|
|
|
+ windturbine: {
|
|
|
|
+ type: Object,
|
|
|
|
+ default: () => {
|
|
|
|
+ return {}
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ watch: {
|
|
|
|
+ windturbine: {
|
|
|
|
+ handler: function (json) {
|
|
|
|
+ if (json) {
|
|
|
|
+ // this.initData();
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ nbqData: []
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ created() {
|
|
|
|
+ this.nbqData = [
|
|
|
|
+ {
|
|
|
|
+ name: '交流电压',
|
|
|
|
+ value: 0,
|
|
|
|
+ tes: 'V'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '交流电流',
|
|
|
|
+ value: 0,
|
|
|
|
+ tes: 'A'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '直流电压',
|
|
|
|
+ value: 0,
|
|
|
|
+ tes: 'V'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '直流电流',
|
|
|
|
+ value: 0,
|
|
|
|
+ tes: 'A'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '并网功率',
|
|
|
|
+ value: 0,
|
|
|
|
+ tes: 'KW'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '电网频率',
|
|
|
|
+ value: 0,
|
|
|
|
+ tes: 'Hz'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '功率因数',
|
|
|
|
+ value: 0,
|
|
|
|
+ tes: ''
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '日发电量',
|
|
|
|
+ value: 0,
|
|
|
|
+ tes: 'Kwh'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '月发电量',
|
|
|
|
+ value: 0,
|
|
|
|
+ tes: 'Kwh'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '年发电量',
|
|
|
|
+ value: 0,
|
|
|
|
+ tes: 'Kwh'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '累计发电量',
|
|
|
|
+ value: 0,
|
|
|
|
+ tes: 'Kwh'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '逆变器温度',
|
|
|
|
+ value: 0,
|
|
|
|
+ tes: '℃'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '效率',
|
|
|
|
+ value: 0,
|
|
|
|
+ tes: '%'
|
|
|
|
+ },
|
|
|
|
+ ]
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ methods: {
|
|
|
|
+ opened() {
|
|
|
|
+ this.$nextTick(() =>{
|
|
|
|
+ this.getEcharts()
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ closed(){},
|
|
|
|
+ // 获取曲线数据
|
|
|
|
+ getEcharts() {
|
|
|
|
+ let series = [
|
|
|
|
+ {
|
|
|
|
+ name: 'Email',
|
|
|
|
+ type: 'line',
|
|
|
|
+ stack: 'Total',
|
|
|
|
+ data: [120, 132, 101, 134, 90, 230, 210]
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: 'Union Ads',
|
|
|
|
+ type: 'line',
|
|
|
|
+ stack: 'Total',
|
|
|
|
+ data: [220, 182, 191, 234, 290, 330, 310]
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: 'Video Ads',
|
|
|
|
+ type: 'line',
|
|
|
|
+ stack: 'Total',
|
|
|
|
+ data: [150, 232, 201, 154, 190, 330, 410]
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: 'Direct',
|
|
|
|
+ type: 'line',
|
|
|
|
+ stack: 'Total',
|
|
|
|
+ data: [320, 332, 301, 334, 390, 330, 320]
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: 'Search Engine',
|
|
|
|
+ type: 'line',
|
|
|
|
+ stack: 'Total',
|
|
|
|
+ data: [820, 932, 901, 934, 1290, 1330, 1320]
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ let xAxis = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
|
|
+ let legend = ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
|
|
|
|
+ this.getglobalLine('pvEchart', xAxis, legend, series)
|
|
|
|
+ },
|
|
|
|
+ getglobalLine(name, xAxis, legend, series) {
|
|
|
|
+ let option = {
|
|
|
|
+ backgroundColor: '#232d38',
|
|
|
|
+ tooltip: {
|
|
|
|
+ trigger: 'axis'
|
|
|
|
+ },
|
|
|
|
+ legend: {
|
|
|
|
+ data: legend
|
|
|
|
+ },
|
|
|
|
+ grid: {
|
|
|
|
+ left: '5%',
|
|
|
|
+ right: '4%',
|
|
|
|
+ bottom: '3%',
|
|
|
|
+ containLabel: true
|
|
|
|
+ },
|
|
|
|
+ xAxis: {
|
|
|
|
+ type: 'category',
|
|
|
|
+ boundaryGap: false,
|
|
|
|
+ data: xAxis
|
|
|
|
+ },
|
|
|
|
+ yAxis: {
|
|
|
|
+ type: 'value',
|
|
|
|
+ name: '万千瓦时(Wkw/h)'
|
|
|
|
+ },
|
|
|
|
+ series: series
|
|
|
|
+ };
|
|
|
|
+ // 基于准备好的dom,初始化echarts实例
|
|
|
|
+ let dom = document.getElementById(name);
|
|
|
|
+ let myChart = echarts.init(dom, 'dark');
|
|
|
|
+ myChart.setOption(option);
|
|
|
|
+ window.addEventListener("resize", function () {
|
|
|
|
+ myChart.resize()
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ }
|
|
|
|
+};
|
|
|
|
+</script>
|
|
|
|
+<style lang="less" scoped>
|
|
|
|
+.pvDetail {
|
|
|
|
+ background-color: black;
|
|
|
|
+ margin-top: -30px;
|
|
|
|
+ margin-left: -10px;
|
|
|
|
+ margin-right: -10px;
|
|
|
|
+ margin-bottom: -30px;
|
|
|
|
+ border-bottom: 20px solid rgb(36, 36, 36);
|
|
|
|
+ display: flex;
|
|
|
|
+ padding: 5px 10px;
|
|
|
|
+ .pvLeftDetail{
|
|
|
|
+ width: 20%;
|
|
|
|
+ .commonSty{
|
|
|
|
+ height: 40px;
|
|
|
|
+ background:#232d38;
|
|
|
|
+ border-radius: 10px;
|
|
|
|
+ margin-top: 10px;
|
|
|
|
+ span{
|
|
|
|
+ color: #fff;
|
|
|
|
+ position: relative;
|
|
|
|
+ top: 8px;
|
|
|
|
+ left: 16px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .titleFont{
|
|
|
|
+ width: calc(100% - 20px);
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ display: flex;
|
|
|
|
+ padding-right: 20px;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ }
|
|
|
|
+ .arrSty{
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ span{
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ }
|
|
|
|
+ .arrName{
|
|
|
|
+ width: 40%;
|
|
|
|
+ span{
|
|
|
|
+ color: #c3c3c3;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .arrMsg{
|
|
|
|
+ width: 60%;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: end;
|
|
|
|
+ padding-right: 20px;
|
|
|
|
+ span{
|
|
|
|
+ display: inline-block;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .pvRightDetail{
|
|
|
|
+ width: calc(80% - 10px);
|
|
|
|
+ padding-left: 10px;
|
|
|
|
+ .pvRightDetail_top{
|
|
|
|
+ background:#232d38;
|
|
|
|
+ border-radius: 10px;
|
|
|
|
+ margin-top: 10px;
|
|
|
|
+ .pvRightTopTitle{
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-around;
|
|
|
|
+ height: 30px;
|
|
|
|
+ color: #253443;
|
|
|
|
+ border-bottom: 1px solid #5c5b5b;
|
|
|
|
+ padding: 5px 0;
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+ span{
|
|
|
|
+ color: #fff;
|
|
|
|
+ margin-top: 3px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .pvRightBotImg{
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-around;
|
|
|
|
+ padding: 50px 0;
|
|
|
|
+ .img1{
|
|
|
|
+ margin-top: 40px;
|
|
|
|
+ }
|
|
|
|
+ .img2{
|
|
|
|
+ margin-top: 35px;
|
|
|
|
+ }
|
|
|
|
+ .img3{
|
|
|
|
+ margin-top: 20px;
|
|
|
|
+ }
|
|
|
|
+ .imgCom{
|
|
|
|
+ margin-top: 50px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .pvRightDetail_bot{
|
|
|
|
+ background:#232d38;
|
|
|
|
+ border-radius: 10px;
|
|
|
|
+ margin-top: 10px;
|
|
|
|
+ .pvRightBotTitle{
|
|
|
|
+ text-align: center;
|
|
|
|
+ height: 20px;
|
|
|
|
+ color: #253443;
|
|
|
|
+ border-bottom: 1px solid #5c5b5b;
|
|
|
|
+ padding: 10px 0;
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+ span{
|
|
|
|
+ color: #fff;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .pvRightBotEchart{
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 375px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+</style>
|