From 05c15aeb9ad51c17ddb371ffd5fd2d77940f4f84 Mon Sep 17 00:00:00 2001
From: lijun <lj7788@126.com>
Date: Fri, 13 Dec 2024 22:06:04 +0800
Subject: [PATCH] update code

---
 .../public/css/largeScreenStyle.css           |   1 +
 .../public/css/largeScreenStyle.less          |   1 +
 .../src/assets/icons/svg/wind.svg             |   4 +-
 yanzhu-bigscreen/src/views/greenCarbon.vue    | 658 +++++++++++++++++-
 4 files changed, 643 insertions(+), 21 deletions(-)

diff --git a/yanzhu-bigscreen/public/css/largeScreenStyle.css b/yanzhu-bigscreen/public/css/largeScreenStyle.css
index 0edcb828..aedda8a4 100644
--- a/yanzhu-bigscreen/public/css/largeScreenStyle.css
+++ b/yanzhu-bigscreen/public/css/largeScreenStyle.css
@@ -199,6 +199,7 @@ body {
 }
 .screen-module.no-title .module-ctx {
   padding: 0px;
+  height: 100%;
 }
 .screen-module.no-border {
   background-image: none;
diff --git a/yanzhu-bigscreen/public/css/largeScreenStyle.less b/yanzhu-bigscreen/public/css/largeScreenStyle.less
index bb64767f..404befb3 100644
--- a/yanzhu-bigscreen/public/css/largeScreenStyle.less
+++ b/yanzhu-bigscreen/public/css/largeScreenStyle.less
@@ -213,6 +213,7 @@ body{
         }
         .module-ctx{
             padding: 0px;
+            height: 100%;
         }
     }
     &.no-border{
diff --git a/yanzhu-bigscreen/src/assets/icons/svg/wind.svg b/yanzhu-bigscreen/src/assets/icons/svg/wind.svg
index 8a6aa820..0fb76572 100644
--- a/yanzhu-bigscreen/src/assets/icons/svg/wind.svg
+++ b/yanzhu-bigscreen/src/assets/icons/svg/wind.svg
@@ -1 +1,3 @@
-<svg style="width: 1em;height: 1em;vertical-align: middle;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7027"><path d="M519.723387 534.475706a19.438636 19.438636 0 0 0-19.438636 19.438636v450.559809a19.438636 19.438636 0 0 0 5.640675 13.79796 19.178297 19.178297 0 0 0 13.797961 5.727455h133.640621a19.525415 19.525415 0 0 0 13.79796-5.727455 19.091517 19.091517 0 0 0 5.640676-13.79796V553.827562a19.438636 19.438636 0 0 0-19.438636-19.438636h-34.104392V232.482613H798.37276v64.477261a19.351856 19.351856 0 0 0 29.244733 16.835247l164.187049-95.457586a19.525415 19.525415 0 0 0 0-33.757274l-164.187049-95.457587-3.210846-1.735592a18.39728 18.39728 0 0 0-6.508472-1.214915A19.525415 19.525415 0 0 0 798.37276 105.697582V173.559248H393.719372L99.710005 2.690168A19.265077 19.265077 0 0 0 89.990687 0H41.741216a19.438636 19.438636 0 0 0-19.438636 19.525415A21.087449 21.087449 0 0 0 23.430715 26.033887l60.745737 168.69959a19.351856 19.351856 0 0 1 0 13.277282l-60.745737 168.69959a19.351856 19.351856 0 0 0 18.223722 26.033887h48.33625a19.265077 19.265077 0 0 0 9.806098-2.603389l287.934793-167.658234h166.182981v301.906313z" p-id="7028"></path></svg>
\ No newline at end of file
+<svg style="width: 1em;height: 1em;vertical-align: middle;overflow: hidden;"
+ viewBox="0 0 1024 1024" version="1.1"
+  xmlns="http://www.w3.org/2000/svg" p-id="7027"><path d="M519.723387 534.475706a19.438636 19.438636 0 0 0-19.438636 19.438636v450.559809a19.438636 19.438636 0 0 0 5.640675 13.79796 19.178297 19.178297 0 0 0 13.797961 5.727455h133.640621a19.525415 19.525415 0 0 0 13.79796-5.727455 19.091517 19.091517 0 0 0 5.640676-13.79796V553.827562a19.438636 19.438636 0 0 0-19.438636-19.438636h-34.104392V232.482613H798.37276v64.477261a19.351856 19.351856 0 0 0 29.244733 16.835247l164.187049-95.457586a19.525415 19.525415 0 0 0 0-33.757274l-164.187049-95.457587-3.210846-1.735592a18.39728 18.39728 0 0 0-6.508472-1.214915A19.525415 19.525415 0 0 0 798.37276 105.697582V173.559248H393.719372L99.710005 2.690168A19.265077 19.265077 0 0 0 89.990687 0H41.741216a19.438636 19.438636 0 0 0-19.438636 19.525415A21.087449 21.087449 0 0 0 23.430715 26.033887l60.745737 168.69959a19.351856 19.351856 0 0 1 0 13.277282l-60.745737 168.69959a19.351856 19.351856 0 0 0 18.223722 26.033887h48.33625a19.265077 19.265077 0 0 0 9.806098-2.603389l287.934793-167.658234h166.182981v301.906313z" p-id="7028"></path></svg>
\ No newline at end of file
diff --git a/yanzhu-bigscreen/src/views/greenCarbon.vue b/yanzhu-bigscreen/src/views/greenCarbon.vue
index 86278c78..0c0986bc 100644
--- a/yanzhu-bigscreen/src/views/greenCarbon.vue
+++ b/yanzhu-bigscreen/src/views/greenCarbon.vue
@@ -28,14 +28,110 @@
                     </el-col>
                 </div>
             </module-one-1-1>
-            <module-one-1-1 label="用电统计">
+            <module-one-1-1 label="用电统计" class="left-power">
+                <div style="height: 50%;">
+                    <div class="survey_content">
+                        <div class="survey_content_img">
+                            <svg-icon icon-class="power" class="an2"></svg-icon>
+                        </div>
+                    </div>
+                </div>
+                <div style="height: 50%;" class="power-chart">
+                    <el-col :span="8">
+                        <div class="chart-bg power-chart1">
+                            <div class="chart-proc"></div>
+                            <div class="data-top">
+                                <div class="chart-data led-number">2999339</div>
+                                <div class="chart-unit">kW</div>
+                            </div>
+                            <div class="data-bottom">
+                                施工用电
+                            </div>
+                        </div>
+                    </el-col>
+                    <el-col :span="8">
+                        <div class="chart-bg power-chart2">
+                            <div class="chart-proc" style="height:60%;"></div>
+                            <div class="data-top">
+                                <div class="chart-data led-number">2999339</div>
+                                <div class="chart-unit">(T CO₂)</div>
+                            </div>
+                            <div class="data-bottom">
+                                碳排放
+                            </div>
+                        </div>
+                    </el-col>
+                    <el-col :span="8">
+                        <div class="chart-bg power-chart3">
+                            <div class="chart-proc" style="height:40%;"></div>
+                            <div class="data-top">
+                                <div class="chart-data led-number">2999339</div>
+                                <div class="chart-unit">(T CO₂)</div>
+                            </div>
+                            <div class="data-bottom">
+                                碳减排
+                            </div>
+                        </div>
+                    </el-col>
+                </div>
             </module-one-1-1>
         </el-col>
 
         <el-col :span="12" class="h100">
-            <module-one-2-2 label="" class="no-title no-border">
+            <module-one-2-2 label="" class="no-title no-border center-top">
+                <div class="top-total-data">
+                    <el-col :span="8">
+                        <div class="data-item">
+                            <div class="td-title">
+                                <svg-icon icon-class="money"></svg-icon>
+                                碳排放预估总量(T CO₂)
+                            </div>
+                            <div class="td-number">
+                                <people-number :number="225566.1" unit=""></people-number>
+                            </div>
+                        </div>
+                    </el-col>
+                    <el-col :span="8">
+                        <div class="data-item">
+                            <div class="td-title">
+                                <svg-icon icon-class="money"></svg-icon>
+                                碳排放监测累计总量(T CO₂)
+                            </div>
+                            <div class="td-number">
+                                <people-number :number="225566.9" unit=""></people-number>
+                            </div>
+                        </div>
+                    </el-col>
+                    <el-col :span="8">
+                        <div class="data-item">
+                            <div class="td-title">
+                                <svg-icon icon-class="money"></svg-icon>
+                                当月碳排放监测量(T CO₂)
+                            </div>
+                            <div class="td-number">
+                                <people-number :number="225566.9" unit=""></people-number>
+                            </div>
+                        </div>
+                    </el-col>
+                </div>
+                <div class="prj-img-list">
+                    <el-carousel height="100%" :autoplay="false">
+                        <el-carousel-item v-for="(it, idx) in prjImgs" :key="idx">
+                            <el-image style="width: 100%; height: 100%" :src="it" fit="contain" />
+                        </el-carousel-item>
+                    </el-carousel>
+                </div>
             </module-one-2-2>
             <module-one-1-2 label="节能减排趋势" class="energy-tendency">
+                <el-col :span="8" class="et-chart1">
+                    <img src="images/security1.gif" class="time-img" />
+                    <my-chart :key="chartKey" id="energy-tendency-total" width="100%" height="100%"
+                        :render="renderChart4"></my-chart>
+                </el-col>
+                <el-col :span="16">
+                    <my-chart :key="chartKey" id="energy-tendency-line" width="100%" height="100%"
+                        :render="renderChart5"></my-chart>
+                </el-col>
             </module-one-1-2>
         </el-col>
         <el-col :span="6" class="h100">
@@ -50,14 +146,21 @@
 </template>
 
 <script>
+import debounce from 'lodash.debounce'
+import SvgIcon from '@/components/SvgIcon.vue';
 export default {
+    components: { SvgIcon },
     data() {
         return {
             dpi: '',
             chartKey: 0,
+            prjImgs: [],
+            selProject: null,
+            prjInfo: {},
         }
     },
     mounted() {
+        this.$store.dispatch('ChangeNav', 6);
         this.dpi = this.$dpi();
         window.addEventListener("resize", () => {
             if (this.dpi != this.$dpi()) {
@@ -65,8 +168,23 @@ export default {
                 this.chartKey++;
             }
         });
+        this.$bus.$on('projectChange', debounce(prj => {
+            this.selProject = prj;
+            this.init();
+        }));
+        this.selProject = this.$store.getters.selProject;
+        this.init();
     },
     methods: {
+        init() {
+            if (!this.selProject) {
+                return;
+            }
+            this.$api.project.getProjectInfo(this.selProject.id).then(d => {
+                this.prjInfo = d.data || {};
+                this.prjImgs = (this.prjInfo?.setting?.orgImage || '').split(",").filter(d => d);
+            });
+        },
         renderChart1() {
             let is1K = this.$dpi() == "1K";
             let is2K = this.$dpi() == "2K";
@@ -96,7 +214,7 @@ export default {
                             borderWidth: 2
                         },
                         label: {
-                            formatter: ["{b|{b}}", "{c|{c}T CO2}"].join("\n"),//"{b|b}\n{c|c T CO2}",
+                            formatter: ["{b|{b}}", "{c|{c}\nT CO₂}"].join("\n"),//"{b|b}\n{c|c T CO2}",
                             rich: {
                                 b: {
                                     color: '#fff',
@@ -276,6 +394,72 @@ export default {
                 ]
             };
             return option;
+        },
+        renderChart4() {
+            let is1K = this.$dpi() == "1K";
+            let is2K = this.$dpi() == "2K";
+            let option = {
+                legend: {
+
+                    bottom: is1K ? '0%' : is2K ? '10%' : '5%',
+                    left: 'center',
+                    itemWidth: is1K ? 25 : is2K ? 30 : 40,
+                    itemHeight: is1K ? 14 : is2K ? 20 : 20,
+                    itemGap: is1K ? 20 : is2K ? 30 : 40,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: is1K ? 14 : is2K ? 20 : 30,
+                    }
+                },
+                color: ['#C060F6', '#5087EC', '#FFBB3A'],
+                series: [
+                    {
+                        type: 'pie',
+                        radius: is1K ? [40, 66] : is2K ? [60, 100] : [140, 190],
+                        center: is1K ? ['50%', '40%'] : is2K ? ['50%', '40%'] : ['50%', '40%'],
+                        roseType: 'area',
+                        itemStyle: {
+                            borderRadius: is1K ? 4 : is2K ? 8 : 10,
+                            borderColor: '#fff',
+                            borderWidth: 2
+                        },
+                        data: [
+                            { value: 40000, name: '电力' },
+                            { value: 38888, name: '建材' },
+                            { value: 32222, name: '油耗' },
+                        ],
+                        label: {
+                            overflow: 'none',
+                            formatter: ["{b|{b}}", "{c|{c}\nT CO₂}"].join("\n"),
+                            rich: {
+                                b: {
+                                    color: '#01e5ff',
+                                    height: is1K ? 20 : is2K ? 30 : 50,
+                                    fontSize: is1K ? 12 : is2K ? 16 : 30,
+                                },
+                                c: {
+                                    color: '#01e5ff',
+                                    fontSize: is1K ? 12 : is2K ? 16 : 30,
+                                }
+                            },
+                            show: true,
+                            fontSize: is1K ? 12 : is2K ? 16 : 30,
+                        },
+                        labelLayout: {
+
+                        }
+                    }
+                ]
+            };
+            return option;
+        },
+        renderChart5() {
+            let is1K = this.$dpi() == "1K";
+            let is2K = this.$dpi() == "2K";
+            let option = {
+
+            };
+            return option;
         }
     }
 }
@@ -301,33 +485,190 @@ export default {
         }
 
         .survey_content {
-            height: 100%;
-
             .survey_content_img {
-                width: 100%;
-                height: 100%;
-                line-height: 100%;
-                
-
                 .oil-data {
                     height: 100%;
                     position: relative;
 
                     .an1 {
                         position: relative;
-                       
+
                     }
 
                     .oil-title {
                         position: absolute;
                         width: 100%;
-                       
+
                     }
                 }
             }
         }
     }
+
+    .survey_content {
+        height: 100%;
+
+        .survey_content_img {
+            width: 100%;
+            height: 100%;
+            line-height: 100%;
+
+            .an2 {
+                position: relative;
+            }
+        }
+    }
+
+    .left-power {
+        .svg-icon {
+            fill: #63c8ff;
+        }
+
+        .power-chart {
+            .el-col {
+                height: 100%;
+                padding: 10px;
+
+                .chart-bg {
+                    position: relative;
+                    border-radius: 5px 5px 0px 0px;
+                    height: 100%;
+
+                    &.power-chart1 {
+                        background-color: #0c142d;
+
+                    }
+
+                    &.power-chart2 {
+                        background-color: #FFBB3A;
+                    }
+
+                    &.power-chart3 {
+                        background-color: #17AD55;
+                    }
+
+                    .chart-proc {
+                        height: 50%;
+                        position: absolute;
+                        bottom: 0px;
+                        width: 100%;
+                        background-color: #05275aad;
+                        z-index: 1;
+                    }
+
+                    .data-top {
+                        position: relative;
+                        z-index: 10;
+                        height: 50%;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        flex-flow: column;
+
+                        .chart-data {
+                            color: #01e5ff;
+                            text-shadow: 2px 2px 2px black;
+                        }
+                    }
+
+                    .data-bottom {
+                        position: relative;
+                        z-index: 10;
+                        height: 50%;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                    }
+                }
+            }
+        }
+    }
+
+    .center-top {
+        .top-total-data {
+            height: 110px;
+            margin-bottom: 20px;
+            overflow: hidden;
+            width: 100%;
+
+            .el-col {
+                padding: 10px 10px;
+
+                &:first-child {
+                    padding: 10px 10px 10px 0px;
+                }
+
+                &:last-child {
+                    padding: 10px 0px 10px 10px;
+                }
+
+                .data-item {
+                    background-image: linear-gradient(89deg, #192c6447 0%, #192c648a 100%);
+
+                    .td-title {
+                        height: 40px;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        color: #01e5ff;
+
+                        .svg-icon {
+                            margin-right: 8px;
+                        }
+                    }
+
+                    .td-number {
+                        height: 70px;
+                        display: flex;
+                        position: relative;
+                        top: -10px;
+                        justify-content: center;
+
+                        .people-number-con {
+                            padding: 0px;
+
+                            div {
+                                margin-right: 2px;
+                                width: 25px;
+                                color: #01e5ff;
+                                text-shadow: 2px 2px 2px black;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        .prj-img-list {
+            height: calc(100% - 130px);
+
+            .el-carousel {
+                height: 100%;
+
+                .el-carousel__arrow {
+                    width: 50px;
+                    height: 50px;
+                    background-color: #192c648a;
+
+                    i {
+                        font-size: 20px;
+                    }
+                }
+            }
+        }
+    }
+
+    .energy-tendency {
+        .el-col {
+            height: 100%;
+
+            &.et-chart1 {
+                position: relative;
+            }
+        }
+    }
 }
+
 @media (max-width: 1920px) {
     .left-oil {
         @keyframes bounce {
@@ -338,20 +679,22 @@ export default {
             }
 
             50% {
-                transform: translateY(-30px) ;
+                transform: translateY(-30px);
             }
         }
+
         .survey_content {
 
             .survey_content_img {
                 background-size: 120px 120px;
+
                 .oil-data {
                     .an1 {
                         top: 20px;
                         font-size: 30px;
                     }
 
-                    .oil-title {                        
+                    .oil-title {
                         bottom: 50px;
                         font-size: 14px;
                     }
@@ -359,7 +702,66 @@ export default {
             }
         }
     }
+
+    .left-power {
+        @keyframes bounce2 {
+            from {
+                width: 10px;
+                height: 10px;
+            }
+
+            to {
+                width: 60px;
+                height: 60px;
+            }
+        }
+
+        .an2 {
+            animation: bounce2 1s infinite;
+        }
+
+        .survey_content {
+            .survey_content_img {
+                background-size: 120px 120px;
+            }
+        }
+
+        .chart-bg {
+            .data-top {
+                .chart-data {
+                    font-size: 30px;
+                }
+
+                .chart-unit {
+                    font-size: 12px;
+                }
+            }
+
+            .data-bottom {
+                font-size: 20px;
+            }
+        }
+    }
+
+    .energy-tendency {
+        .el-col {
+            &.et-chart1 {
+                position: relative;
+
+                .time-img {
+                    position: absolute;
+                    width: 110px;
+                    height: 110px;
+                    top: 50%;
+                    left: 50%;
+                    margin-top: -79px;
+                    margin-left: -56px;
+                }
+            }
+        }
+    }
 }
+
 @media (min-width: 1921px) and (max-width: 2560px) {
     .left-oil {
         @keyframes bounce {
@@ -370,28 +772,137 @@ export default {
             }
 
             50% {
-                transform: translateY(-30px) ;
+                transform: translateY(-30px);
             }
         }
+
         .survey_content {
 
             .survey_content_img {
                 background-size: 160px 160px !important;
+
                 .oil-data {
                     .an1 {
                         top: 50px !important;
                         font-size: 40px !important;
                     }
 
-                    .oil-title {                        
-                        bottom:60px !important;
+                    .oil-title {
+                        bottom: 60px !important;
                         font-size: 20px !important;
                     }
                 }
             }
         }
     }
+
+    .left-power {
+        @keyframes bounce2 {
+            from {
+                width: 10px;
+                height: 10px;
+            }
+
+            to {
+                width: 80px;
+                height: 80px;
+            }
+        }
+
+        .an2 {
+            animation: bounce2 1s infinite;
+            top: 40px;
+        }
+
+        .survey_content {
+            .survey_content_img {
+                background-size: 160px 160px !important;
+            }
+        }
+
+        .chart-bg {
+            .data-top {
+                .chart-data {
+                    font-size: 40px;
+                }
+
+                .chart-unit {
+                    font-size: 20px;
+                }
+            }
+
+            .data-bottom {
+                font-size: 30px;
+            }
+        }
+    }
+
+    .center-top {
+        .top-total-data {
+            height: 150px !important;
+
+            .el-col {
+                .data-item {
+                    .td-title {
+                        height: 60px !important;
+                        font-size: 20px !important;
+                    }
+
+                    .td-number {
+                        height: 90px !important;
+                        top: -15px !important;
+
+                        .people-number-con {
+                            div {
+                                width: 35px !important;
+                                height: 60px !important;
+                                font-size: 50px;
+                                margin-right: 4px !important;
+                                line-height: 60px !important;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        .prj-img-list {
+            height: calc(100% - 170px) !important;
+
+            .el-carousel {
+                height: 100%;
+
+                .el-carousel__arrow {
+                    width: 80px !important;
+                    height: 80px !important;
+
+                    i {
+                        font-size: 30px !important;
+                    }
+                }
+            }
+        }
+    }
+
+    .energy-tendency {
+        .el-col {
+            &.et-chart1 {
+                position: relative;
+
+                .time-img {
+                    position: absolute;
+                    width: 180px;
+                    height: 180px;
+                    top: 50%;
+                    left: 50%;
+                    margin-top: -126px;
+                    margin-left: -89px;
+                }
+            }
+        }
+    }
 }
+
 @media (min-width: 2561px) {
     .left-oil {
         @keyframes bounce {
@@ -402,26 +913,133 @@ export default {
             }
 
             50% {
-                transform: translateY(-30px) ;
+                transform: translateY(-30px);
             }
         }
+
         .survey_content {
 
             .survey_content_img {
                 background-size: 200px 200px !important;
+
                 .oil-data {
                     .an1 {
                         top: 90px !important;
                         font-size: 60px !important;
                     }
 
-                    .oil-title {                        
-                        bottom:80px !important;
+                    .oil-title {
+                        bottom: 80px !important;
                         font-size: 30px !important;
                     }
                 }
             }
         }
     }
+
+    .left-power {
+        @keyframes bounce2 {
+            from {
+                width: 20px;
+                height: 20px;
+            }
+
+            to {
+                width: 120px;
+                height: 120px;
+            }
+        }
+
+        .an2 {
+            animation: bounce2 1s infinite;
+            top: 60px;
+        }
+
+        .survey_content {
+            .survey_content_img {
+                background-size: 200px 200px !important;
+            }
+        }
+
+        .chart-bg {
+            .data-top {
+                .chart-data {
+                    font-size: 60px;
+                }
+
+                .chart-unit {
+                    font-size: 30px;
+                }
+            }
+
+            .data-bottom {
+                font-size: 40px;
+            }
+        }
+    }
+
+    .center-top {
+        .top-total-data {
+            height: 180px !important;
+
+            .el-col {
+                .data-item {
+                    .td-title {
+                        height: 70px !important;
+                        font-size: 24px !important;
+                    }
+
+                    .td-number {
+                        height: 110px !important;
+                        top: -15px !important;
+
+                        .people-number-con {
+                            div {
+                                width: 45px !important;
+                                height: 80px !important;
+                                font-size: 64px;
+                                margin-right: 4px !important;
+                                line-height: 80px !important;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        .prj-img-list {
+            height: calc(100% - 200px) !important;
+
+            .el-carousel {
+                height: 100%;
+
+                .el-carousel__arrow {
+                    width: 120px !important;
+                    height: 120px !important;
+
+                    i {
+                        font-size: 40px !important;
+                    }
+                }
+            }
+        }
+    }
+
+    .energy-tendency {
+        .el-col {
+            &.et-chart1 {
+                position: relative;
+                .time-img {
+                    position: absolute;
+                    width: 400px;
+                    height: 400px;
+                    top: 50%;
+                    left: 50%;
+                    margin-top: -261px;
+                    margin-left: -199px;
+                }
+            }
+        }
+    }
 }
 </style>
\ No newline at end of file