From 1723b7d0ac83e56e29d16319eae60a60e20c0045 Mon Sep 17 00:00:00 2001
From: lijun <lj7788@126.com>
Date: Thu, 12 Dec 2024 00:29:01 +0800
Subject: [PATCH] update code

---
 yanzhu-bigscreen/src/components/MyChart.vue  |  65 +++
 yanzhu-bigscreen/src/components/header.vue   |   8 +-
 yanzhu-bigscreen/src/router/index.js         |   7 +
 yanzhu-bigscreen/src/views/greenCarbon.vue   | 427 +++++++++++++++++++
 yanzhu-bigscreen/src/views/init.js           |   2 +
 yanzhu-bigscreen/src/views/projectDetail.vue |   2 +-
 6 files changed, 508 insertions(+), 3 deletions(-)
 create mode 100644 yanzhu-bigscreen/src/components/MyChart.vue
 create mode 100644 yanzhu-bigscreen/src/views/greenCarbon.vue

diff --git a/yanzhu-bigscreen/src/components/MyChart.vue b/yanzhu-bigscreen/src/components/MyChart.vue
new file mode 100644
index 00000000..59960aea
--- /dev/null
+++ b/yanzhu-bigscreen/src/components/MyChart.vue
@@ -0,0 +1,65 @@
+<template>
+
+        <div :id="id" :class="className" :style="{ height, width }"></div>
+
+</template>
+
+<script>
+export default {
+    props: {
+    id: {
+      type: String,
+      default: "barChart1",
+    },
+    className: {
+      type: String,
+      default: "",
+    },
+    width: {
+      type: String,
+      default: "400px",
+    },
+    height: {
+      type: String,
+      default: "400px",
+    },
+    render: {
+      type: Function,
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  mounted() {
+    this.chart = window.echarts.init(document.getElementById(this.id));
+    setTimeout(() => {
+      this.setOption({});
+    }, 400);
+    // 大小自适应
+    window.addEventListener("resize", () => {
+      this.chart.resize();
+    });
+  },
+  methods: {
+    reLoad(){
+      let opt={};
+      if (this.render) {
+        opt = this.render(opt);
+      }
+      this.chart.setOption(opt,true);
+    },
+    setOption(opt) {
+      if (this.render) {
+        opt = this.render(opt);
+      }
+      this.chart.setOption(opt);
+    },
+  },
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/yanzhu-bigscreen/src/components/header.vue b/yanzhu-bigscreen/src/components/header.vue
index 9fa8ff70..2f007941 100644
--- a/yanzhu-bigscreen/src/components/header.vue
+++ b/yanzhu-bigscreen/src/components/header.vue
@@ -8,13 +8,17 @@
                     <div :class="nav == 3 ? 'head-nav active' : 'head-nav'" @click="doNav(3)">安全管理</div>
                     <div :class="nav == 4 ? 'head-nav active' : 'head-nav'" @click="doNav(4)">质量管理</div>
                     <div :class="nav == 5 ? 'head-nav active' : 'head-nav'" @click="doNav(5)">进度管理</div>
+                    
                 </div>
             </el-col>
             <el-col :span="8" class="header-center">
                 数字建安施工管理平台
             </el-col>
             <el-col :span="8">
-                <div class="header-title-user-info">
+                <div class="head-title-tab" style="display: inline-block">
+                <div :class="nav == 6 ? 'head-nav active' : 'head-nav'" @click="doNav(6)">绿碳中心</div>
+                </div>
+                <div class="header-title-user-info" style="display:inline-block;float:right;">
                     <el-select v-model="selProject" popper-class="header-sel-project-pop"
                         style="width: 150px;margin-right: 20px;height:30px;line-height: 30px;"
                         @change="doProjectSelect">
@@ -78,7 +82,7 @@ export default {
                 return;
             }
             this.nav = n;
-            let path = ["/index", "/detail", "/prjSafety", "/prjQuality", "/prjProgress"][n - 1];
+            let path = ["/index", "/detail", "/prjSafety", "/prjQuality", "/prjProgress","/greenCarbon"][n - 1];
             this.$router.push(path);
         },
         doLogout() {
diff --git a/yanzhu-bigscreen/src/router/index.js b/yanzhu-bigscreen/src/router/index.js
index 544b8091..15672429 100644
--- a/yanzhu-bigscreen/src/router/index.js
+++ b/yanzhu-bigscreen/src/router/index.js
@@ -39,6 +39,13 @@ const routes = [
     component: () =>
       import(/* webpackChunkName: "progress" */ "../views/projectProgress.vue"),
   },  
+  {
+    path: "/greenCarbon",
+    name: "greenCarbon",
+    meta: { nav: 23 },
+    component: () =>
+      import(/* webpackChunkName: "progress" */ "../views/greenCarbon.vue"),
+  },  
 ];
 const router = new VueRouter({
   mode: "hash",
diff --git a/yanzhu-bigscreen/src/views/greenCarbon.vue b/yanzhu-bigscreen/src/views/greenCarbon.vue
new file mode 100644
index 00000000..86278c78
--- /dev/null
+++ b/yanzhu-bigscreen/src/views/greenCarbon.vue
@@ -0,0 +1,427 @@
+<template>
+    <div class="green-carbon  main-page">
+        <el-col :span="6" class="h100">
+            <module-one-1-1 label="建材统计">
+                <my-chart :key="chartKey" id="green-carbon-building" width="100%" height="100%"
+                    :render="renderChart1"></my-chart>
+            </module-one-1-1>
+            <module-one-1-1 label="用油统计" class="left-oil">
+                <div style="height: 50%;">
+                    <div class="survey_content">
+                        <div class="survey_content_img">
+                            <div class="oil-data">
+                                <div class="led-number an1">2222L</div>
+                                <div class="oil-title">施工用油</div>
+                            </div>
+
+                        </div>
+                    </div>
+                </div>
+                <div style="height: 50%;">
+                    <el-col :span="12" style="height: 100%;">
+                        <my-chart :key="chartKey" id="green-carbon-oil1" width="100%" height="100%"
+                            :render="renderChart2"></my-chart>
+                    </el-col>
+                    <el-col :span="12" style="height: 100%;">
+                        <my-chart :key="chartKey" id="green-carbon-oil2" width="100%" height="100%"
+                            :render="renderChart3"></my-chart>
+                    </el-col>
+                </div>
+            </module-one-1-1>
+            <module-one-1-1 label="用电统计">
+            </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>
+            <module-one-1-2 label="节能减排趋势" class="energy-tendency">
+            </module-one-1-2>
+        </el-col>
+        <el-col :span="6" class="h100">
+            <module-one-1-1 label="建材排放趋势">
+            </module-one-1-1>
+            <module-one-1-1 label="用油排放趋势">
+            </module-one-1-1>
+            <module-one-1-1 label="用电排放趋势">
+            </module-one-1-1>
+        </el-col>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            dpi: '',
+            chartKey: 0,
+        }
+    },
+    mounted() {
+        this.dpi = this.$dpi();
+        window.addEventListener("resize", () => {
+            if (this.dpi != this.$dpi()) {
+                this.dpi = this.$dpi();
+                this.chartKey++;
+            }
+        });
+    },
+    methods: {
+        renderChart1() {
+            let is1K = this.$dpi() == "1K";
+            let is2K = this.$dpi() == "2K";
+            let option = {
+                color: ['#ff9f1a', '#00a4e6'],
+                legend: {
+                    bottom: is1K ? '0%' : is2K ? '10%' : '10%',
+                    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,
+                    }
+                },
+                series: [
+                    {
+                        type: 'pie',
+                        radius: "70%",
+                        avoidLabelOverlap: false,
+                        bottom: is1K ? '5%' : is2K ? '15%' : '10%',
+                        top: "-10%",
+                        itemStyle: {
+                            borderRadius: is1K ? 4 : is2K ? 8 : 10,
+                            borderColor: '#fff',
+                            borderWidth: 2
+                        },
+                        label: {
+                            formatter: ["{b|{b}}", "{c|{c}T CO2}"].join("\n"),//"{b|b}\n{c|c T CO2}",
+                            rich: {
+                                b: {
+                                    color: '#fff',
+                                    height: 50,
+                                    fontSize: is1K ? 14 : is2K ? 20 : 30,
+                                },
+                                c: {
+                                    color: '#fff',
+                                    fontSize: is1K ? 14 : is2K ? 20 : 30,
+                                }
+                            },
+                            show: true,
+                            fontSize: is1K ? 14 : is2K ? 20 : 30,
+                        },
+
+                        labelLine: {
+                            show: true
+                        },
+                        data: [
+                            { value: 1048, name: '碳排放' },
+                            { value: 735, name: '碳减排' },
+
+                        ]
+                    }
+                ]
+            };
+            return option;
+        },
+        renderChart2() {
+            let is1K = this.$dpi() == "1K";
+            let is2K = this.$dpi() == "2K";
+            let option = {
+                series: [
+                    {
+                        type: 'gauge',
+                        startAngle: 180,
+                        endAngle: 0,
+                        max: 6000,
+                        center: ['50%', '90%'],
+                        radius: '120%',
+                        itemStyle: {
+                            color: '#e76e50',
+                            shadowColor: 'rgba(0,138,255,0.45)',
+                            shadowBlur: 10,
+                            shadowOffsetX: 2,
+                            shadowOffsetY: 2
+                        },
+                        progress: {
+                            show: true,
+                            width: is1K ? 12 : is2K ? 20 : 30,
+
+                        },
+                        axisLine: {
+                            lineStyle: {
+                                width: is1K ? 12 : is2K ? 20 : 30,
+                                color: [[1, '#4f504e']] // 圆环底
+                            }
+                        },
+                        axisTick: {
+                            show: true,
+                            distance: is1K ? -16 : is2K ? -30 : -40,
+                            length: is1K ? 4 : is2K ? 8 : 10,
+                        },
+                        splitLine: {
+                            length: 10,
+                            distance: -20,
+                            lineStyle: {
+                                width: 1,
+                                color: '#8e9aaf'
+                            }
+                        },
+                        axisLabel: {
+                            color: '#999',
+                            distance: is1K ? -15 : is2K ? -20 : -30,
+                            fontSize: is1K ? 12 : is2K ? 14 : 20,
+                        },
+                        pointer: {
+                            show: false,
+                        },
+                        anchor: {
+                            show: false,
+                        },
+                        title: {
+                            offsetCenter: is1K ? [0, '-5%'] : is2K ? [0, '-5%'] : [0, '-5%'],
+                            fontSize: is1K ? 12 : is2K ? 20 : 30,
+                            color: '#fff'
+                        },
+                        detail: {
+                            valueAnimation: true,
+                            fontSize: is1K ? 20 : is2K ? 30 : 40,
+                            offsetCenter: [0, '-40%'],
+                            color: '#4ccdc4'
+                        },
+                        data: [
+                            {
+                                value: 4000,
+                                name: '碳排放(T CO₂)'
+                            }
+                        ]
+                    }
+                ]
+            };
+            return option;
+        },
+        renderChart3() {
+            let is1K = this.$dpi() == "1K";
+            let is2K = this.$dpi() == "2K";
+            let option = {
+                series: [
+                    {
+                        type: 'gauge',
+                        startAngle: 180,
+                        endAngle: 0,
+                        max: 6000,
+                        center: ['50%', '90%'],
+                        radius: '120%',
+                        itemStyle: {
+                            color: '#05d69e',
+                            shadowColor: 'rgba(0,138,255,0.45)',
+                            shadowBlur: 10,
+                            shadowOffsetX: 2,
+                            shadowOffsetY: 2
+                        },
+                        progress: {
+                            show: true,
+                            width: is1K ? 12 : is2K ? 20 : 30,
+
+                        },
+                        axisLine: {
+                            lineStyle: {
+                                width: is1K ? 12 : is2K ? 20 : 30,
+                                color: [[1, '#4f504e']] // 圆环底
+                            }
+                        },
+                        axisTick: {
+                            show: true,
+                            distance: is1K ? -16 : is2K ? -30 : -40,
+                            length: is1K ? 4 : is2K ? 8 : 10,
+                        },
+                        splitLine: {
+                            length: 10,
+                            distance: -20,
+                            lineStyle: {
+                                width: 1,
+                                color: '#8e9aaf'
+                            }
+                        },
+                        axisLabel: {
+                            color: '#999',
+                            distance: is1K ? -15 : is2K ? -20 : -30,
+                            fontSize: is1K ? 12 : is2K ? 14 : 20,
+                        },
+                        pointer: {
+                            show: false,
+                        },
+                        anchor: {
+                            show: false,
+                        },
+                        title: {
+                            offsetCenter: is1K ? [0, '-5%'] : is2K ? [0, '-5%'] : [0, '-5%'],
+                            fontSize: is1K ? 12 : is2K ? 20 : 30,
+                            color: '#fff'
+                        },
+                        detail: {
+                            valueAnimation: true,
+                            fontSize: is1K ? 20 : is2K ? 30 : 40,
+                            offsetCenter: [0, '-40%'],
+                            color: '#4ccdc4'
+                        },
+                        data: [
+                            {
+                                value: 4000,
+                                name: '碳减排(T CO₂)'
+                            }
+                        ]
+                    }
+                ]
+            };
+            return option;
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.green-carbon {
+    .left-oil {
+        @keyframes bounce {
+
+            0%,
+            100% {
+                transform: translateY(0);
+            }
+
+            50% {
+                transform: translateY(-10px);
+            }
+        }
+
+        .an1 {
+            animation: bounce 1s infinite;
+        }
+
+        .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%;
+                       
+                    }
+                }
+            }
+        }
+    }
+}
+@media (max-width: 1920px) {
+    .left-oil {
+        @keyframes bounce {
+
+            0%,
+            100% {
+                transform: translateY(0);
+            }
+
+            50% {
+                transform: translateY(-30px) ;
+            }
+        }
+        .survey_content {
+
+            .survey_content_img {
+                background-size: 120px 120px;
+                .oil-data {
+                    .an1 {
+                        top: 20px;
+                        font-size: 30px;
+                    }
+
+                    .oil-title {                        
+                        bottom: 50px;
+                        font-size: 14px;
+                    }
+                }
+            }
+        }
+    }
+}
+@media (min-width: 1921px) and (max-width: 2560px) {
+    .left-oil {
+        @keyframes bounce {
+
+            0%,
+            100% {
+                transform: translateY(0);
+            }
+
+            50% {
+                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;
+                        font-size: 20px !important;
+                    }
+                }
+            }
+        }
+    }
+}
+@media (min-width: 2561px) {
+    .left-oil {
+        @keyframes bounce {
+
+            0%,
+            100% {
+                transform: translateY(0);
+            }
+
+            50% {
+                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;
+                        font-size: 30px !important;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/yanzhu-bigscreen/src/views/init.js b/yanzhu-bigscreen/src/views/init.js
index 2ca4dbd7..54ce7f96 100644
--- a/yanzhu-bigscreen/src/views/init.js
+++ b/yanzhu-bigscreen/src/views/init.js
@@ -15,6 +15,7 @@ import moduleOne23 from '../components/module/module-one-2-3.vue'
 import peopleNumber from '@/components/people-number.vue'
 import dictTag from '@/components/DictTag/index.vue'
 import MyDialog from '@/components/MyDialog.vue'
+import MyChart from '@/components/MyChart.vue'
 //import projectOverviewChart from '../components/project-overview-chart.vue'
 //import peopleNumber from '../components/people-number.vue'
 import header from '../components/header.vue'
@@ -30,6 +31,7 @@ Vue.component("module-one-2-1",moduleOne21)
 Vue.component("module-one-2-2",moduleOne22)
 Vue.component("module-one-2-3",moduleOne23)
 Vue.component("people-number",peopleNumber)
+Vue.component("my-chart",MyChart)
 Vue.component("dict-tag",dictTag)
 Vue.component("MyDialog",MyDialog)
 Vue.prototype.$bus=new Vue();
diff --git a/yanzhu-bigscreen/src/views/projectDetail.vue b/yanzhu-bigscreen/src/views/projectDetail.vue
index fcfee7b6..1604f6db 100644
--- a/yanzhu-bigscreen/src/views/projectDetail.vue
+++ b/yanzhu-bigscreen/src/views/projectDetail.vue
@@ -363,7 +363,7 @@
                         <div class="dangerous-timeline-max w-scroll">
                             <div class="dangerous-timeline-min" :style="{ width: maxWidth + 'px' }">
                                 <template v-if="projectBuildNode && projectBuildNode.length > 0">
-                                    <div class="dangerous-timeline-con" v-for="item in projectBuildNode">
+                                    <div class="dangerous-timeline-con" v-for="(item,idx) in projectBuildNode" :key="idx">
                                         <div class="dangerous-text" v-html="item.nodeText"></div>
                                         <div class="dangerous-dot">
                                             <div class="dangerous-dot-item"></div>