Browse Source

1.矩阵页面,首页设备区新增光伏二级弹框页面;
2.升压站修改预警样式报警;

SunZehao 2 years ago
parent
commit
876dbda827

BIN
src/assets/img/PV/close.png


BIN
src/assets/img/PV/pv_arrow_pic.png


BIN
src/assets/img/PV/pv_box_pic.png


BIN
src/assets/img/PV/pv_box_transformer.png


BIN
src/assets/img/PV/pv_elec_pic.png


BIN
src/assets/img/PV/pv_nb_pic.png


BIN
src/assets/img/PV/pv_pic.png


BIN
src/assets/img/PV/pv_state_blue.png


BIN
src/assets/img/PV/pv_state_gre.png


BIN
src/assets/img/PV/pv_state_grey.png


BIN
src/assets/img/PV/pv_state_org.png


BIN
src/assets/img/PV/pv_state_red.png


BIN
src/assets/img/PV/pv_state_un.png


BIN
src/assets/img/PV/pv_state_vio.png


BIN
src/assets/img/PV/zhengti.png


+ 362 - 0
src/components/PvDetailPages.vue

@@ -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>

+ 26 - 6
src/components/allMatrices.vue

@@ -189,7 +189,7 @@
               </UnpaidMatrixBlock>
             </div>
             <div class="block" v-else>
-              <UnpaidMatrixBlockPv @on-click="handleDetial" @choose-click="handleClick" :dataList="item">
+              <UnpaidMatrixBlockPv @on-click="handleDetialPv" @choose-click="handleClickPv" :dataList="item">
               </UnpaidMatrixBlockPv>
             </div>
           </div>
@@ -198,6 +198,8 @@
     </div>
     <WindturbineDetailPages v-model="dialogVisible" @close="handleClose" :windturbine="currentWindturbine">
     </WindturbineDetailPages>
+    <PvDetailPages v-model="dialogPvDia" @close="handleClose" :windturbine="currentWindturbinePv">
+    </PvDetailPages>
     <ParametersContrast :chooseList="chooseList" v-model="parametersDisplay"></ParametersContrast>
   </el-dialog>
 </template>
@@ -206,6 +208,7 @@ import BackgroundData from "utils/BackgroundData";
 import UnpaidMatrixBlock from "components/unpaidMatrixBlock.vue";
 import UnpaidMatrixBlockPv from "components/unpaidMatrixBlockPv.vue";
 import WindturbineDetailPages from "components/WindturbineDetailPages.vue";
+import PvDetailPages from "components/PvDetailPages.vue";
 import boxSelect from "components/boxSelect.vue";
 import ParametersContrast from "./control/parametersContrast.vue";
 import MessageBridge from "../utils/MessageBridge";
@@ -215,6 +218,7 @@ export default {
     UnpaidMatrixBlock,
     UnpaidMatrixBlockPv,
     WindturbineDetailPages,
+    PvDetailPages,
     boxSelect,
     ParametersContrast,
   },
@@ -226,30 +230,32 @@ export default {
       cache: {},
       stationArr: [],
       dialogVisible: false,
+      dialogPvDia: false,
       currentWindturbine: {},
+      currentWindturbinePv: {},
       chooseList: [],
       lockValues: [],
       parametersDisplay: false,
       intervals: null,
       showpieColor: [
         {
-            name: '×5  0%~5%',
+            name: '×5:  0%~5%',
             value: '#05bb4c'
         },
         {
-            name: '×4  5%~10%',
+            name: '×4:  5%~10%',
             value: '#0ec7dc'
         },
         {
-            name: '×3  10%~20%',
+            name: '×3:  10%~20%',
             value: '#4b55ae'
         },
         {
-            name: '×2  20%~40%',
+            name: '×2:  20%~40%',
             value: '#e17d24'
         },
         {
-            name: '×1  >40%',
+            name: '×1:  >40%',
             value: '#ba3237'
         },
       ]
@@ -386,6 +392,7 @@ export default {
       this.stationObj = stationObj;
       this.stationArr = stationArr;
     },
+    //风场回调
     handleDetial(itm) {
       this.dialogVisible = true;
       this.currentWindturbine = itm;
@@ -414,6 +421,19 @@ export default {
       this.dialogVisible = false;
       this.getLocks();
     },
+    //光伏回调
+    handleDetialPv(item) {
+        this.dialogPvDia = true;
+        this.currentWindturbinePv = item;
+        console.log('item', item)
+    },
+    handleClickPv(values) {
+
+    },
+    handleClosePv() {
+      this.dialogPvDia = false;
+    },
+
     selectList(val) {
       val.forEach((item) => {
         this.handleClick(this.windterbin[item.id]);

+ 11 - 2
src/components/control/controlAllArea.vue

@@ -43,8 +43,7 @@
             </MatrixBlock>
             <MatrixBlockPv
                 v-else
-              @choose-click="handleClick"
-              @on-click="handleDetails"
+              @on-click="handleDetialPv"
               :dataList="showList"
             >
             </MatrixBlockPv>
@@ -61,6 +60,8 @@
       @close="handleClose"
       :windturbine="currentWindturbine"
     ></WindturbineDetailPages>
+    <PvDetailPages v-model="dialogPvDia" @close="handleClose" :windturbine="currentWindturbinePv">
+    </PvDetailPages>
     <ParametersContrast
       :chooseList="chooseList"
       v-model="parametersDisplay"
@@ -70,6 +71,7 @@
 
 <script>
 import WindturbineDetailPages from "../WindturbineDetailPages.vue";
+import PvDetailPages from "components/PvDetailPages.vue";
 import MatrixBlock from "../matrixBlock.vue";
 import MatrixBlockPv from "../matrixBlockPv.vue";
 import EaxyMatrxBlock from "../eaxyMatrixBlock.vue";
@@ -82,6 +84,7 @@ export default {
   name: "ProblemArea",
   components: {
     WindturbineDetailPages,
+    PvDetailPages,
     MatrixBlock,
     MatrixBlockPv,
     boxSelect,
@@ -105,7 +108,9 @@ export default {
       chooseList: [],
       lockValues: [],
       currentWindturbine: {},
+      currentWindturbinePv: {},
       dialogVisible: false,
+      dialogPvDia: false,
       showSvg: false,
       parametersDisplay: false,
       windturbinelist: {},
@@ -759,6 +764,10 @@ export default {
       this.dialogVisible = true;
       this.currentWindturbine = itm;
     },
+    handleDetialPv(item) {
+        this.dialogPvDia = true;
+        this.currentWindturbinePv = item;
+    },
     handleClose() {
       this.dialogVisible = false;
       this.showSvg = false;

+ 15 - 10
src/components/focus/syzDetails.vue

@@ -179,13 +179,15 @@ export default {
                     let datas = res.data
                     let arr = []
                     datas.forEach(it =>{
-                        let str = ''
-                        if (it.stationName.indexOf('风电场') !== -1 ) {
-                            str = it.stationName.substring(0, it.stationName.indexOf('风电场'))
-                        } else if (it.stationName.indexOf('光伏电站') !== -1) {
-                            str = it.stationName.substring(0, it.stationName.indexOf('光伏电站'))
+                        if (it.rank === '5') {
+                            if (it.stationName.indexOf('风电场') !== -1 ) {
+                                str = it.stationName.substring(0, it.stationName.indexOf('风电场'))
+                            } else if (it.stationName.indexOf('光伏电站') !== -1) {
+                                str = it.stationName.substring(0, it.stationName.indexOf('光伏电站'))
+                            }
+                            arr.push(str)
                         }
-                        arr.push(str)
+                        let str = ''
                     })
                     this.allWarnData = this.unique(arr)
                 }
@@ -304,13 +306,13 @@ export default {
                         if (svg1) {
                             let allTags = []
                             let allTagsxc = []
-                            let status = ['g', 'text', 'rect', 'line']
+                            let status = ['g', 'text', 'rect', 'line', 'polyline', 'circle', 'ellipse', 'polygon']
                             status.forEach(it =>{
                                 let allgs = []
                                 allgs = document.querySelectorAll(it);
                                 allTags.push(allgs)
                             })
-                            allTags = [...allTags[0], ...allTags[1], ...allTags[2], ...allTags[3]]
+                            allTags = [...allTags[0], ...allTags[1], ...allTags[2], ...allTags[3], ...allTags[4], ...allTags[5], ...allTags[6], ...allTags[7]]
                             allTags.forEach((it) => {
                                 if (it.getAttribute("tagid")) {
                                     allTagsxc.push(it);
@@ -377,13 +379,16 @@ export default {
                 if (it.attributes.tagid) {
                     if (val === it.attributes.tagid.value) {
                         this.onlytag = it
+                        if (it.nodeName === 'polyline') {
+                            console.log('onlyTag666', this.onlytag)
+                        }
                         if (it.nodeName !== 'text') {
                             if (this.onlytag.attributes.csid) {
                                 let csid = this.onlytag.attributes.csid.value.split(';')
                                 csid.forEach(ic =>{
                                     if (ic) {
                                         if (!this.allConditions[ic].isBinding) {
-                                            let num = this.allConditions[ic].value === 0 ? '0' : this.allConditions[ic].value
+                                            let num = parseInt(this.allConditions[ic].value) === 0 ? '0' : parseInt(this.allConditions[ic].value)
                                             if (num) {
                                                 let num2 = tag.value === 0 ? '0' : tag.value
                                                 if (num === num2) {
@@ -403,7 +408,7 @@ export default {
                     }
                 }
             })
-            console.log('onlyTag555', this.onlytag)
+            // console.log('onlyTag555', this.onlytag)
         },
         // '全部'界面双击事件
         dblgetSvgDataFn(name) {

+ 2 - 1
src/components/matrixBlockPv.vue

@@ -4,6 +4,7 @@
       class="box"
       style="display: flex; flex-direction: row; flex-wrap: wrap"
     >
+    <!-- @click="onSelectHandler(item)" -->
       <div
         :class="
           item.active
@@ -15,7 +16,7 @@
         :id="item.windturbineId"
         v-for="(item, index) in dataList"
         :key="index"
-        @click="onSelectHandler(item)"
+        
         @dblclick="sendMsg(item)"
         style="margin-right: 8px"
       >

+ 5 - 5
src/components/unpaidMatrixBlockPv.vue

@@ -63,22 +63,22 @@
           <div
             v-if="item.status === 1"
             class="progress"
-            :style="`width: ${((item.power / item.powerProduction) * 100 >= 100
+            :style="`width: ${((item.p / item.powerProduction) * 100 >= 100
               ? 100
-              : (item.power / item.powerProduction) * 100
+              : (item.p / item.powerProduction) * 100
             ).toFixed(2)}%;background-color: ${
-              unpaidColor[item.undeliveredStatus]
+              unpaidColor[item.status]
             };height: 50%;`"
           ></div>
         </div>
       </div>
     </div>
-    <WindturbineDetailPages
+    <!-- <WindturbineDetailPages
       v-model="dialogVisible"
       :showSvg="showSvg"
       @close="handleClose"
       :windturbine="currentWindturbine"
-    ></WindturbineDetailPages>
+    ></WindturbineDetailPages> -->
   </div>
 </template>
 <script>